Untitled

 let recognition;
    if ('webkitSpeechRecognition' in window) {
        recognition = new webkitSpeechRecognition();
        recognition.continuous = false;
        recognition.interimResults = false;
        recognition.lang = 'es-MX'; // Default to Spanish

        recognition.onstart = function() {
            listeningIndicator.style.display = 'block';
        };

        recognition.onresult = function(event) {
            const result = event.results[0][0].transcript;
            addChatMessage(result, 'user');
            sendMessageToServer(result, recognition.lang); // Enviar mensaje al servidor
        };

        recognition.onend = function() {
            listeningIndicator.style.display = 'none';
        };

        recognition.onerror = function() {
            console.error('Speech recognition error');
        };
    } else {
        console.error('Speech recognition not supported');
    }

    function selectCharacter(voiceId) {
        const selectedCharacter = languageSelectors[voiceId];

        if (selectedCharacter) {
            avatarImg.src = selectedCharacter.avatarSrc;
            addChatMessage(selectedCharacter.welcomeMessage, 'bot');
            recognition.lang = selectedCharacter.language;
        }
    }

    synthesizeBtn.addEventListener('click', function() {
        const text = textInput.value;
        if (text) {
            addChatMessage(text, 'user');
            sendMessageToServer(text, recognition.lang); // Enviar mensaje al servidor
        }
    });

    textInput.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            const text = textInput.value;
            if (text) {
                addChatMessage(text, 'user');
                sendMessageToServer(text, recognition.lang); // Enviar mensaje al servidor
            }
        }
    });

    speechBtn.addEventListener('click', function() {
        if (recognition) {
            recognition.start();
        }
    });

    function sendMessageToServer(text, language) {
        fetch('/send_message', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ message: text, language: language }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.response) {
                addChatMessage(data.response, 'bot'); // Mostrar la respuesta en el chat
                synthesizeSpeech(data.response, voiceId); // Sintetizar la respuesta del bot
            } else {
                console.error('Error in response:', data);
            }
        })
        .catch(error => {
            console.error('Error sending message:', error);
        });
    }

    function synthesizeSpeech(text, voiceId) {
        fetch('/synthesize', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ text: text, voice_id: voiceId }),
        })
        .then(response => response.blob())
        .then(blob => {
            const audioUrl = URL.createObjectURL(blob);
            audioPlayer.src = audioUrl;
            audioPlayer.play();
        })
        .catch(error => {
            console.error('Error synthesizing speech:', error);
        });
    }