Upload 9 files

static/css/style.css

@@ -0,0 +1,178 @@
+/* Estilos generales */
+body {
+    background-color: #f5f5f5;
+    font-family: Arial, sans-serif;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Estilos de la tarjeta */
+.card {
+    border-radius: 15px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+    border-radius: 15px 15px 0 0;
+    padding: 1rem;
+}
+
+/* Estilos de las pestañas */
+.nav-tabs .nav-link {
+    border: none;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.nav-tabs .nav-link:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.nav-tabs .nav-link.active {
+    background-color: rgba(255, 255, 255, 0.2);
+    border: none;
+}
+
+/* Estilos del chat */
+.chat-box {
+    height: 400px;
+    overflow-y: auto;
+    padding: 1rem;
+    background-color: #fff;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+}
+
+.message {
+    padding: 0.5rem 1rem;
+    margin-bottom: 0.5rem;
+    border-radius: 10px;
+    max-width: 80%;
+}
+
+.user-message {
+    background-color: #e3f2fd;
+    margin-left: auto;
+}
+
+.bot-message {
+    background-color: #f5f5f5;
+    margin-right: auto;
+}
+
+/* Estilos de los controles */
+.input-group {
+    margin-top: 1rem;
+}
+
+.btn {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    transition: all 0.3s;
+}
+
+.btn i {
+    margin-right: 0.5rem;
+}
+
+.btn-primary {
+    background-color: #2196f3;
+    border-color: #2196f3;
+}
+
+.btn-primary:hover {
+    background-color: #1976d2;
+    border-color: #1976d2;
+}
+
+.btn-success {
+    background-color: #4caf50;
+    border-color: #4caf50;
+}
+
+.btn-success:hover {
+    background-color: #388e3c;
+    border-color: #388e3c;
+}
+
+/* Estilos para el botón de grabación */
+#startRecording {
+    position: relative;
+    transition: all 0.3s;
+}
+
+#startRecording.active {
+    background-color: #f44336;
+    border-color: #f44336;
+}
+
+#startRecording.active:hover {
+    background-color: #d32f2f;
+    border-color: #d32f2f;
+}
+
+/* Estilos para los selectores */
+.form-select {
+    padding: 0.5rem;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    background-color: #fff;
+}
+
+/* Estilos para la configuración */
+.form-label {
+    font-weight: bold;
+    color: #333;
+}
+
+.form-control {
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    padding: 0.5rem;
+}
+
+/* Estilos para el estado */
+#statusLabel {
+    font-size: 0.9rem;
+    color: #666;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+/* Animaciones */
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.recording {
+    animation: pulse 1.5s infinite;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        padding: 0.5rem;
+    }
+    
+    .message {
+        max-width: 90%;
+    }
+    
+    .chat-box {
+        height: 300px;
+    }
+}

static/css/styles.css

@@ -0,0 +1,56 @@
+.chat-container {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.chat-messages {
+    height: 400px;
+    overflow-y: auto;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #eee;
+}
+
+.message {
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.user-message {
+    background-color: #e3f2fd;
+    margin-left: 20%;
+}
+
+.bot-message {
+    background-color: #f5f5f5;
+    margin-right: 20%;
+}
+
+.chat-input {
+    display: flex;
+    gap: 10px;
+}
+
+#user-input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+#send-button {
+    padding: 10px 20px;
+    background-color: #2196f3;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#send-button:hover {
+    background-color: #1976d2;
+} 

static/js/chat.js

@@ -0,0 +1,288 @@
+        // Variables globales
+let currentMode = 'seguros';
+let currentModel = 'Gemini 8b';
+let currentTTS = 'EDGE';
+let isListening = false;
+let recognition = null;
+
+function playAudio(button, text) {
+    const icon = button ? button.querySelector('i') : null;
+    text = text || (button ? button.getAttribute('data-text') : '');
+    
+    if (!text) {
+        console.error('No text provided for audio');
+        return;
+    }
+    
+    if (button) {
+        icon.className = 'fas fa-spinner fa-spin';
+        button.disabled = true;
+    }
+    
+    fetch('/generate_audio', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ 
+            text: text,
+            model: currentTTS
+        })
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (data.audio_url) {
+            console.log(`Reproduciendo audio generado con modelo: ${data.model_used}`);
+            const audio = new Audio(window.location.origin + data.audio_url);
+            
+            if (button) {
+                audio.onplay = () => {
+                    icon.className = 'fas fa-pause';
+                };
+                
+                audio.onended = () => {
+                    icon.className = 'fas fa-play';
+                    button.disabled = false;
+                };
+            }
+            
+            audio.onerror = (e) => {
+                console.error('Error reproduciendo audio:', e);
+                if (button) {
+                    icon.className = 'fas fa-play';
+                    button.disabled = false;
+                }
+                appendBotMessage("Error reproduciendo el audio. Intente de nuevo.");
+            };
+            
+            audio.play().catch(error => {
+                console.error('Error playing audio:', error);
+                if (button) {
+                    icon.className = 'fas fa-play';
+                    button.disabled = false;
+                }
+                appendBotMessage("Error reproduciendo el audio. Intente de nuevo.");
+            });
+        } else {
+            throw new Error('No audio URL in response');
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        if (button) {
+            icon.className = 'fas fa-play';
+            button.disabled = false;
+        }
+        appendBotMessage(`Error generando el audio: ${error.message}`);
+    });
+}
+
+// Agregar esto para manejar nuevos mensajes dinámicamente
+function appendBotMessage(message) {
+    const chatMessages = document.getElementById('chat-messages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'message bot-message';
+    messageDiv.innerHTML = `
+        <div class="message-content">${message}</div>
+        <button onclick="playAudio(this)" data-text="${message}" class="play-button">
+            <i class="fas fa-play"></i>
+        </button>
+    `;
+    chatMessages.appendChild(messageDiv);
+}
+
+async function sendMessage() {
+    const input = document.getElementById('user-input');
+    const text = input.value.trim();
+    
+    if (text) {
+        // Agregar mensaje del usuario
+        const chatMessages = document.getElementById('chat-messages');
+        const userDiv = document.createElement('div');
+        userDiv.className = 'message user-message';
+        userDiv.textContent = text;
+        chatMessages.appendChild(userDiv);
+        
+        // Limpiar input
+        input.value = '';
+        
+        try {
+            // Enviar mensaje al backend con el modo actual
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ 
+                    message: text,
+                    mode: currentMode 
+                })
+            });
+
+            const data = await response.json();
+            
+            if (data.response) {
+                // Agregar respuesta del bot
+                appendBotMessage(data.response);
+                // Auto-reproducir respuesta
+                const lastButton = document.querySelector('.bot-message:last-child .play-button');
+                if (lastButton) {
+                    playAudio(lastButton);
+                }
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            appendBotMessage("Lo siento, hubo un error al procesar tu mensaje.");
+        }
+    }
+}
+
+async function changeMode(mode) {
+    try {
+        const response = await fetch('/change_mode', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ mode })
+        });
+        
+        if (response.ok) {
+            currentMode = mode;
+            appendBotMessage(`Modo cambiado a: ${mode}`);
+            playAudio(null, `Modo de operación cambiado a ${mode}`);
+        }
+    } catch (error) {
+        console.error('Error changing mode:', error);
+        appendBotMessage("Error al cambiar el modo de operación");
+    }
+}
+
+async function changeModel(model) {
+    try {
+        const response = await fetch('/change_model', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ model })
+        });
+        
+        if (response.ok) {
+            currentModel = model;
+            appendBotMessage(`Modelo de IA cambiado a: ${model}`);
+            playAudio(null, `Modelo de inteligencia artificial cambiado a ${model}`);
+        }
+    } catch (error) {
+        console.error('Error changing model:', error);
+        appendBotMessage("Error al cambiar el modelo de IA");
+    }
+}
+
+// Inicializar reconocimiento de voz
+function initSpeechRecognition() {
+    if ('webkitSpeechRecognition' in window) {
+        recognition = new webkitSpeechRecognition();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+        recognition.lang = 'es-ES';
+
+        recognition.onresult = function(event) {
+            const result = event.results[event.results.length - 1];
+            if (result.isFinal) {
+                const text = result.item(0).transcript;
+                document.getElementById('user-input').value = text;
+                sendMessage();
+            }
+        };
+
+        recognition.onerror = function(event) {
+            console.error('Error en reconocimiento:', event.error);
+            toggleVAD();
+        };
+    } else {
+        console.error('Reconocimiento de voz no soportado');
+    }
+}
+
+// Función para cambiar TTS
+async function changeTTS(model) {
+    try {
+        const response = await fetch('/change_tts', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ model })
+        });
+        
+        if (response.ok) {
+            currentTTS = model;
+            appendBotMessage(`Modelo de voz cambiado a: ${model}`);
+            playAudio(null, `Voz del sistema cambiada a ${model}`);
+        }
+    } catch (error) {
+        console.error('Error changing TTS:', error);
+        appendBotMessage("Error al cambiar el modelo de voz");
+    }
+}
+
+// Función para activar/desactivar VAD
+function toggleVAD() {
+    const vadButton = document.querySelector('.vad-button');
+    const vadStatus = document.getElementById('vad-status');
+    
+    if (!isListening) {
+        if (recognition) {
+            recognition.start();
+            isListening = true;
+            vadButton.classList.remove('inactive');
+            vadButton.classList.add('active');
+            vadButton.innerHTML = '<i class="fas fa-microphone"></i> Escuchando';
+            
+            // Mostrar estado de escucha
+            vadStatus.classList.add('listening');
+            vadStatus.innerHTML = '🎤 Escuchando...';
+            
+            // Reproducir sonido de inicio
+            playAudio(null, "Sistema activado. Puede hablar.");
+        }
+    } else {
+        if (recognition) {
+            recognition.stop();
+            isListening = false;
+            vadButton.classList.remove('active');
+            vadButton.classList.add('inactive');
+            vadButton.innerHTML = '<i class="fas fa-microphone-slash"></i> Activar micrófono';
+            
+            // Ocultar estado de escucha
+            vadStatus.classList.remove('listening');
+            vadStatus.innerHTML = '';
+            
+            // Mensaje de desactivación
+            playAudio(null, "Sistema en pausa.");
+        }
+    }
+}
+
+// Inicializar cuando el documento esté listo
+document.addEventListener('DOMContentLoaded', function() {
+    initSpeechRecognition();
+    // Iniciar VAD automáticamente
+    setTimeout(() => {
+        toggleVAD(); // Activar el VAD al inicio
+        appendBotMessage("Sistema iniciado. Modelos cargados correctamente. Escuchando...");
+    }, 1000);
+});
+
+// Permitir enviar con Enter
+document.getElementById('user-input')?.addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') {
+        sendMessage();
+    }
+}); 

static/js/main.js

@@ -0,0 +1,384 @@
+let recognition = null;
+let isProcessingSpeech = false;
+let isPlayingAudio = false;
+const STOP_WORDS = ['alto', 'detente', 'permiteme', 'callate', 'silencio'];
+
+// Elementos del DOM
+const chatBox = document.getElementById('chatBox');
+const textInput = document.getElementById('textInput');
+const sendTextButton = document.getElementById('sendText');
+const modoSelect = document.getElementById('modoSelect');
+const modeloSelect = document.getElementById('modeloSelect');
+const vozSelect = document.getElementById('vozSelect');
+const configForm = document.getElementById('configForm');
+const statusLabel = document.getElementById('statusLabel');
+
+// Manejar guardado de configuración
+if (configForm) {
+    configForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const config = {
+            GOOGLE_API_KEY: document.getElementById('googleApiKey').value,
+            HUGGINGFACE_TOKEN: document.getElementById('huggingfaceToken').value,
+            OPENAI_API_KEY: document.getElementById('openaiApiKey').value
+        };
+
+        try {
+            const response = await fetch('/guardar_config', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(config)
+            });
+
+            const data = await response.json();
+            if (data.success) {
+                alert('Configuración guardada exitosamente');
+            } else {
+                alert('Error al guardar la configuración: ' + data.error);
+            }
+        } catch (error) {
+            alert('Error al guardar la configuración: ' + error);
+        }
+    });
+}
+
+// Manejar cambio de modelo AI
+if (modeloSelect) {
+    modeloSelect.addEventListener('change', async function() {
+        const response = await fetch('/cambiar_modelo', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ modelo: this.value })
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            alert('Error al cambiar el modelo: ' + data.error);
+        }
+    });
+}
+
+// Manejar cambio de modelo de voz
+if (vozSelect) {
+    vozSelect.addEventListener('change', async function() {
+        const response = await fetch('/cambiar_voz', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ voz: this.value })
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            alert('Error al cambiar el modelo de voz: ' + data.error);
+        }
+    });
+}
+
+// Manejar cambio de modo
+modoSelect.addEventListener('change', async function() {
+    const response = await fetch('/cambiar_modo', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ modo: this.value })
+    });
+
+    const data = await response.json();
+    if (data.success) {
+        addMessage(data.mensaje, 'bot');
+        if (data.audio) {
+            await playAudio(data.audio);
+        }
+        updateStatus('Esperando activación...');
+    }
+});
+
+// Función para verificar si el texto contiene palabras de parada
+function containsStopWord(text) {
+    const lowerText = text.toLowerCase();
+    return STOP_WORDS.some(word => lowerText.includes(word));
+}
+
+// Función para reproducir audio
+async function playAudio(base64Audio) {
+    try {
+        console.log('Preparando reproducción de audio...');
+        isPlayingAudio = true;
+        
+        // Detener completamente el reconocimiento
+        if (recognition) {
+            recognition.stop();
+            recognition.abort();
+            await new Promise(resolve => setTimeout(resolve, 500));
+        }
+        
+        updateStatus('Reproduciendo respuesta...');
+        const audio = new Audio('data:audio/mp3;base64,' + base64Audio);
+        
+        // Permitir interrupciones durante la reproducción
+        recognition.start();
+        
+        audio.onended = () => {
+            console.log('Audio reproducido completamente');
+            isPlayingAudio = false;
+            updateStatus('Escuchando...');
+        };
+        
+        audio.play();
+        
+    } catch (error) {
+        console.error('Error reproduciendo audio:', error);
+        isPlayingAudio = false;
+        updateStatus('Error al reproducir audio. Escuchando...');
+        if (!isProcessingSpeech) {
+            recognition.start();
+        }
+    }
+}
+
+// Función para agregar mensaje al chat
+function addMessage(text, sender) {
+    if (!text || !sender) {
+        console.error('Error: texto o remitente faltante', { text, sender });
+        return;
+    }
+    
+    const chatBox = document.getElementById('chatBox');
+    if (!chatBox) {
+        console.error('Error crítico: No se encontró el elemento chatBox');
+        return;
+    }
+    
+    try {
+        console.log('Agregando mensaje al chat:', { text, sender });
+        
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}-message`;
+        
+        const iconSpan = document.createElement('span');
+        iconSpan.className = 'message-icon';
+        iconSpan.textContent = sender === 'user' ? '👤' : '🤖';
+        
+        const textSpan = document.createElement('span');
+        textSpan.className = 'message-text';
+        textSpan.textContent = text;
+        
+        messageDiv.appendChild(iconSpan);
+        messageDiv.appendChild(textSpan);
+        chatBox.appendChild(messageDiv);
+        
+        // Hacer scroll al último mensaje
+        chatBox.scrollTop = chatBox.scrollHeight;
+        
+        console.log('Mensaje agregado exitosamente');
+    } catch (error) {
+        console.error('Error al agregar mensaje:', error);
+    }
+}
+
+// Agregar múltiples mensajes
+function addMessages(messages) {
+    messages.forEach(msg => {
+        addMessage(msg.text, msg.sender);
+    });
+}
+
+// Función para actualizar el estado
+function updateStatus(text) {
+    const statusLabel = document.getElementById('statusLabel');
+    if (statusLabel) {
+        statusLabel.textContent = text;
+        statusLabel.style.display = 'block'; // Asegurar que sea visible
+        console.log('Estado actualizado:', text);
+    } else {
+        console.error('No se encontró el elemento statusLabel');
+    }
+}
+
+// Función para procesar la respuesta del servidor
+async function processServerResponse(data, userText) {
+    try {
+        console.log('Procesando respuesta del servidor:', data);
+        
+        // Mostrar el mensaje del usuario
+        addMessage(userText, 'user');
+        
+        if (data.success && data.texto) {
+            // Mostrar la respuesta del bot
+            console.log('Mostrando respuesta del bot:', data.texto);
+            addMessage(data.texto, 'bot');
+            
+            // Reproducir el audio si existe y no se dijo una palabra de parada
+            if (data.audio && !containsStopWord(userText)) {
+                await playAudio(data.audio);
+            }
+        } else {
+            const errorMessage = data.error || 'Error desconocido';
+            console.error('Error en la respuesta:', errorMessage);
+            addMessage('Lo siento, hubo un error: ' + errorMessage, 'bot');
+        }
+    } catch (error) {
+        console.error('Error procesando respuesta:', error);
+        addMessage('Lo siento, ocurrió un error inesperado.', 'bot');
+    }
+}
+
+// Inicializar reconocimiento de voz
+function initializeSpeechRecognition() {
+    if ('webkitSpeechRecognition' in window) {
+        recognition = new webkitSpeechRecognition();
+        recognition.continuous = true;  // Cambiar a true para permitir interrupciones
+        recognition.interimResults = true;
+        recognition.lang = 'es-ES';
+
+        recognition.onstart = function() {
+            console.log('Reconocimiento de voz iniciado');
+            updateStatus('Escuchando...');
+        };
+
+        recognition.onend = function() {
+            console.log('Reconocimiento de voz terminado');
+            if (!isProcessingSpeech) {
+                console.log('Reiniciando reconocimiento...');
+                updateStatus('Escuchando...');
+                setTimeout(() => recognition.start(), 500);
+            }
+        };
+
+        recognition.onerror = function(event) {
+            console.error('Error en reconocimiento de voz:', event.error);
+            if (!isProcessingSpeech && event.error !== 'no-speech') {
+                setTimeout(() => recognition.start(), 1000);
+            }
+        };
+
+        recognition.onresult = async function(event) {
+            let finalTranscript = '';
+            let interimTranscript = '';
+
+            for (let i = event.resultIndex; i < event.results.length; ++i) {
+                const transcript = event.results[i][0].transcript;
+                
+                if (event.results[i].isFinal) {
+                    finalTranscript = transcript;
+                    console.log('Texto final:', finalTranscript);
+                    
+                    // Verificar si es una palabra de parada
+                    if (containsStopWord(finalTranscript)) {
+                        console.log('Palabra de parada detectada, deteniendo audio...');
+                        const audio = document.querySelector('audio');
+                        if (audio) {
+                            audio.pause();
+                            audio.currentTime = 0;
+                        }
+                        isPlayingAudio = false;
+                        updateStatus('Audio detenido. Escuchando...');
+                        continue;
+                    }
+                    
+                    if (!isProcessingSpeech) {
+                        isProcessingSpeech = true;
+                        updateStatus('Procesando...');
+                        
+                        try {
+                            console.log('Enviando texto al servidor:', finalTranscript);
+                            const response = await fetch('/procesar_voz', {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify({ texto: finalTranscript })
+                            });
+                            
+                            const data = await response.json();
+                            console.log('Respuesta recibida:', data);
+                            await processServerResponse(data, finalTranscript);
+                            
+                        } catch (error) {
+                            console.error('Error al procesar voz:', error);
+                            updateStatus('Error de conexión. Escuchando...');
+                            addMessage('Lo siento, hubo un error de conexión.', 'bot');
+                        }
+                        
+                        isProcessingSpeech = false;
+                    }
+                } else {
+                    interimTranscript = transcript;
+                    updateStatus(`Escuchando: ${interimTranscript}`);
+                }
+            }
+        };
+
+        // Iniciar reconocimiento
+        recognition.start();
+        updateStatus('Escuchando...');
+        
+    } else {
+        console.error('El reconocimiento de voz no está soportado en este navegador');
+        alert('Tu navegador no soporta el reconocimiento de voz. Por favor, usa Chrome.');
+        updateStatus('Reconocimiento de voz no soportado');
+    }
+}
+
+// Manejar envío de texto
+sendTextButton.addEventListener('click', async () => {
+    const text = textInput.value.trim();
+    if (text) {
+        updateStatus('Procesando...');
+        addMessage(text, 'user');
+        
+        try {
+            const response = await fetch('/procesar_voz', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ texto: text })
+            });
+            
+            const data = await response.json();
+            await processServerResponse(data, text);
+            
+            textInput.value = '';
+            updateStatus('Esperando activación...');
+        } catch (error) {
+            console.error('Error:', error);
+            updateStatus('Error de conexión');
+        }
+    }
+});
+
+// Inicializar cuando se carga la página
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Página cargada, verificando elementos...');
+    
+    // Verificar que existan los elementos necesarios
+    const chatBox = document.getElementById('chatBox');
+    const statusLabel = document.getElementById('statusLabel');
+    
+    if (!chatBox) {
+        console.error('Error crítico: No se encontró el elemento chatBox');
+        return;
+    }
+    
+    if (!statusLabel) {
+        console.error('Error crítico: No se encontró el elemento statusLabel');
+        return;
+    }
+    
+    // Asegurar que el statusLabel sea visible
+    statusLabel.style.display = 'block';
+    
+    console.log('Elementos encontrados, inicializando reconocimiento de voz...');
+    initializeSpeechRecognition();
+    
+    // Agregar mensaje de bienvenida
+    addMessage('¡Hola! Soy tu asistente virtual. ¿En qué puedo ayudarte?', 'bot');
+});

templates/chat.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot</title>
+    <link rel="stylesheet" href="/static/css/styles.css">
+</head>
+<body>
+    <div class="chat-container">
+        <div id="chat-messages" class="chat-messages"></div>
+        <div class="chat-input">
+            <input type="text" id="user-input" placeholder="Escribe tu mensaje...">
+            <button id="send-button">Enviar</button>
+        </div>
+    </div>
+    <script src="/static/js/chat.js"></script>
+</body>
+</html> 

templates/index.html

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #f5f5f5;
+            font-family: Arial, sans-serif;
+        }
+        
+        .chat-container {
+            max-width: 800px;
+            margin: 20px auto;
+            padding: 20px;
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        
+        #chatBox {
+            height: 400px;
+            overflow-y: auto;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            background-color: #f8f9fa;
+        }
+        
+        .message {
+            margin: 10px 0;
+            padding: 12px;
+            border-radius: 10px;
+            max-width: 80%;
+            position: relative;
+            animation: fadeIn 0.3s ease-in;
+            display: flex;
+            align-items: flex-start;
+        }
+        
+        .message-icon {
+            margin-right: 8px;
+            font-size: 1.2em;
+        }
+        
+        .message-text {
+            word-wrap: break-word;
+            flex: 1;
+        }
+        
+        .user-message {
+            background-color: #007bff;
+            color: white;
+            margin-left: auto;
+            flex-direction: row-reverse;
+        }
+        
+        .user-message .message-icon {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+        
+        .bot-message {
+            background-color: #e9ecef;
+            color: black;
+            margin-right: auto;
+        }
+        
+        .control-panel {
+            background-color: #f8f9fa;
+            padding: 15px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            border: 1px solid #dee2e6;
+        }
+        
+        .status-label {
+            font-size: 1em;
+            color: #333;
+            margin-top: 15px;
+            text-align: center;
+            font-style: italic;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+            border: 1px solid #dee2e6;
+            display: block;
+        }
+        
+        .recording-button {
+            transition: all 0.3s ease;
+            width: 50px;
+            height: 38px;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2em;
+        }
+        
+        .recording-button.active {
+            background-color: #dc3545 !important;
+            animation: pulse 1.5s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .input-group {
+            margin: 5px 15px;
+        }
+        
+        #textInput {
+            border-radius: 5px 0 0 5px;
+            border: 1px solid #ced4da;
+            padding: 8px 12px;
+        }
+        
+        #sendText {
+            border-radius: 0;
+            margin-right: -1px;
+        }
+        
+        #startRecording {
+            border-radius: 0 5px 5px 0;
+        }
+        
+        .form-select {
+            cursor: pointer;
+        }
+        
+        .form-label {
+            font-weight: 500;
+            margin-bottom: 5px;
+        }
+        
+        #ngrokUrl {
+            font-size: 0.9em;
+            background-color: #f8f9fa;
+            border-color: #dee2e6;
+            min-width: 250px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container mt-4">
+        <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="chat-tab" data-bs-toggle="tab" data-bs-target="#chat" type="button" role="tab">💬 Chat</button>
+            </li>
+            {% if config.NGROK_URL %}
+            <li class="nav-item ms-auto d-flex align-items-center">
+                <div class="input-group">
+                    <input type="text" class="form-control" value="{{ config.NGROK_URL }}" id="ngrokUrl" readonly>
+                    <button class="btn btn-primary" onclick="shareUrl()">🔗 Copiar URL</button>
+                </div>
+            </li>
+            {% endif %}
+        </ul>
+        
+        <div class="tab-content" id="myTabContent">
+            <!-- Tab de Chat -->
+            <div class="tab-pane fade show active" id="chat" role="tabpanel">
+                <div class="chat-container">
+                    <div class="control-panel">
+                        <div class="row">
+                            <div class="col-md-4">
+                                <label for="modoSelect" class="form-label">📋 Modo:</label>
+                                <select id="modoSelect" class="form-select">
+                                    <option value="seguros">🛡️ Seguros</option>
+                                    <option value="credito">💰 Créditos</option>
+                                    <option value="cobranza">💵 Cobranza</option>
+                                </select>
+                            </div>
+                            <div class="col-md-4">
+                                <label for="modeloSelect" class="form-label">🤖 Modelo:</label>
+                                <select id="modeloSelect" class="form-select">
+                                    <option value="gemini">🧠 Gemini 8b</option>
+                                    <option value="mixtral">⚡Mixtral 7b</option>
+                                </select>
+                            </div>
+                            <div class="col-md-4">
+                                <label for="vozSelect" class="form-label">🎤 Voz:</label>
+                                <select id="vozSelect" class="form-select">
+                                    <option value="EDGE">📢 Edge</option>
+                                    <option value="VITS">🔊 VITS</option>
+                                    <option value="gTTS">🌐 gTTS</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div id="chatBox"></div>
+                    
+                    <div class="input-group">
+                        <input type="text" id="textInput" class="form-control" placeholder="Escribe tu mensaje...">
+                        <button id="sendText" class="btn btn-primary">Enviar</button>
+                        <button id="startRecording" class="btn btn-success recording-button">🎤</button>
+                    </div>
+                    
+                    <div class="status-label" id="statusLabel">Iniciando...</div>
+                </div>
+            </div>
+            
+            <!-- Tab de Configuración -->
+            <div class="tab-pane fade" id="config" role="tabpanel">
+                <div class="chat-container">
+                    <form id="configForm">
+                        <div class="mb-3">
+                            <label for="googleApiKey" class="form-label">Google API Key:</label>
+                            <input type="password" class="form-control" id="googleApiKey" value="{{ config.get('GOOGLE_API_KEY', '') }}">
+                        </div>
+                        <div class="mb-3">
+                            <label for="huggingfaceToken" class="form-label">HuggingFace Token:</label>
+                            <input type="password" class="form-control" id="huggingfaceToken" value="{{ config.get('HUGGINGFACE_TOKEN', '') }}">
+                        </div>
+                        <div class="mb-3">
+                            <label for="openaiApiKey" class="form-label">OpenAI API Key:</label>
+                            <input type="password" class="form-control" id="openaiApiKey" value="{{ config.get('OPENAI_API_KEY', '') }}">
+                        </div>
+                        <button type="submit" class="btn btn-primary">Guardar</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <script>
+        function shareUrl() {
+            const url = document.getElementById('ngrokUrl').value;
+            navigator.clipboard.writeText(url).then(() => {
+                const btn = document.querySelector('button[onclick="shareUrl()"]');
+                const originalText = btn.innerHTML;
+                btn.innerHTML = '✅ ¡Copiado!';
+                setTimeout(() => {
+                    btn.innerHTML = originalText;
+                }, 2000);
+            }).catch(err => {
+                alert("URL del túnel: " + url);
+            });
+        }
+    </script>
+</body>
+</html>