añade chatgpt 4o mini de la web https://gleaming-wren-2af.notion.site/1min-AI-API-Docs-111af080bd8f8046a4e6e1053c95e047 en:<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Simulado con Hugging Face</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div class="chat-container">
        <div id="chat"></div>
        <div class="options-container">
            <select id="modelSelect">
                <option value="google/gemma-1.1-7b-it">Gemma 1.1</option>
                <option value="HuggingFaceH4/starchat2-15b-v0.1">Starchat 2</option>
                <option value="HuggingFaceH4/zephyr-7b-alpha">Zephyr</option>
                <option value="01-ai/Yi-1.5-34B-Chat">Yi 1.5</option>
                <option value="mistralai/Mistral-7B-Instruct-v0.3">Mistral</option>
                <option value="Qwen/Qwen2.5-72B-Instruct">Qwen 2.5</option>
            </select>
            <button onclick="setSuggestedMessage('¿Cuántas estrellas hay en nuestra galaxia?')">El espacio</button>
            <button onclick="setSuggestedMessage('¿Cuál es la capital de Francia?')">Capital de Francia</button>
        </div>
        <div class="input-container">
            <input type="text" id="userInput" placeholder="Escribe un mensaje..." />
            <button onclick="sendMessage()">Enviar</button>
        </div>
    </div>
    
    <script>
        const YOUR_HF_TOKEN = '<TRUFFLEHOG_REDACTED_HUGGINGFACE>'; // Tu token de Hugging Face aquí

        async function sendMessage() {
            const input = document.getElementById('userInput');
            const userMessage = input.value;
            if (!userMessage) return;

            addMessage(userMessage, 'user');
            input.value = '';

            const model = document.getElementById('modelSelect').value;

            try {
                const response = await fetch(`https://api-inference.huggingface.co/models/${model}`, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${YOUR_HF_TOKEN}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        inputs: userMessage,
                        parameters: {
                            max_tokens: 1024,
                            temperature: 0.5,
                            top_p: 0.7
                        }
                    })
                });

                if (response.ok) {
                    const data = await response.json();
                    const botMessage = data[0]?.generated_text || 'No se encontraron resultados.';
                    addMessage(botMessage, 'bot');
                } else {
                    const errorText = await response.text();
                    addMessage(`Error: ${errorText}`, 'bot');
                }
            } catch (error) {
                addMessage('Error al comunicarse con el modelo.', 'bot');
            }
        }

        function addMessage(message, type) {
            const chat = document.getElementById('chat');
            const messageDiv = document.createElement('div');
            messageDiv.className = type;
            messageDiv.textContent = message;
            chat.appendChild(messageDiv);
            chat.scrollTop = chat.scrollHeight; // Scroll to bottom
        }

        function setSuggestedMessage(suggestedMessage) {
            const input = document.getElementById('userInput');
            input.value = suggestedMessage;
        }
    </script>
</body>
</html>