Update templates/index.html

templates/index.html

@@ -340,139 +340,124 @@
     </div>  
 
     <script>  
-        const chatBox = document.getElementById('chat-box');  
-        const voiceBtn = document.getElementById('voice-btn');  
-        const sendBtn = document.getElementById('send-btn');  
-        const userInput = document.getElementById('user-input');  
-        const themeSelect = document.getElementById('theme-select');  
-
-        // Add message to chatbox with visual effects  
-        function addMessage(sender, text) {  
-            const msgDiv = document.createElement('div');  
-            msgDiv.classList.add('message', sender);  
-            msgDiv.textContent = text;  
-            chatBox.appendChild(msgDiv);  
-            chatBox.scrollTop = chatBox.scrollHeight;  
-        }  
-
-        // Speech Recognition Setup
-        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();  
-        recognition.lang = 'en-US';  
-        recognition.maxResults = 10;  
-        recognition.interimResults = true;  
-        
-        voiceBtn.addEventListener('click', () => recognition.start());  
-        
-        recognition.addEventListener('result', (e) => {  
-            const transcript = e.results[0][0].transcript;  
-            addMessage('user-message', transcript);  
-            sendUserMessage(transcript);  
-        });  
-        
-        recognition.addEventListener('noresult', () => {  
-            addMessage('user-message', 'No speech detected');  
-            sendUserMessage('No speech detected');  
-        });  
-        
-        recognition.addEventListener('nomatch', () => {  
-            addMessage('user-message', 'No speech detected');  
-            sendUserMessage('No speech detected');  
-        });  
-        
-        recognition.addEventListener('error', (e) => {  
-            if(e.error == 'no-speech') {  
-                addMessage('user-message', 'No speech detected');  
-                sendUserMessage('No speech detected');  
-            }  
-        });
- 
-
-        // Function to change the accent color  
-        function changeColor(color) {  
-            document.documentElement.style.setProperty('--accent-color', color);  
-        }  
-
-        // Function to change the theme  
-        function changeTheme(theme) {  
-            document.documentElement.classList.remove('theme-calm-azure', 'theme-elegant-charcoal', 'theme-fresh-greenery', 'theme-soft-lavender', 'theme-bright-summer');  
-            if (theme !== 'default') {  
-                document.documentElement.classList.add('theme-' + theme);  
-            }  
-        }  
-
-        // Send user input to backend (placeholder URL)  
-        function sendUserMessage(message) {  
-            fetch('/chat', {  
-                method: 'POST',  
-                headers: {  
-                    'Content-Type': 'application/json',  
-                },  
-                body: JSON.stringify({ message: message }),  
+    const chatBox = document.getElementById('chat-box');  
+    const voiceBtn = document.getElementById('voice-btn');  
+    const sendBtn = document.getElementById('send-btn');  
+    const userInput = document.getElementById('user-input');  
+    const themeSelect = document.getElementById('theme-select');  
+
+    // Function to add messages to the chatbox  
+    function addMessage(sender, text) {  
+        const msgDiv = document.createElement('div');  
+        msgDiv.classList.add('message', sender);  
+        msgDiv.textContent = text;  
+        chatBox.appendChild(msgDiv);  
+        chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom  
+    }  
+
+    // Speech Recognition Setup  
+    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();  
+    recognition.lang = 'en-US';  
+    recognition.interimResults = false; // Set to true for interim results  
+
+    // Start speech recognition when voice button is clicked  
+    voiceBtn.addEventListener('click', () => {  
+        recognition.start();  
+    });  
+
+    // Process the speech result  
+    recognition.addEventListener('result', (e) => {  
+        const transcript = e.results[0][0].transcript;  
+        addMessage('user-message', transcript);  
+        sendUserMessage(transcript);  
+    });  
+
+    // Handle cases when no result is found  
+    recognition.addEventListener('nomatch', () => {  
+        const message = 'No speech detected';  
+        addMessage('user-message', message);  
+        sendUserMessage(message);  
+    });  
+
+    // Handle speech recognition errors  
+    recognition.addEventListener('error', (e) => {  
+        console.error("Speech recognition error", e);  
+        const message = 'No speech detected';  
+        addMessage('user-message', message);  
+        sendUserMessage(message);  
+    });  
+
+    // Send user input to the backend  
+    function sendUserMessage(message) {  
+        fetch('/chat', {  
+            method: 'POST',  
+            headers: {  
+                'Content-Type': 'application/json',  
+            },  
+            body: JSON.stringify({ message: message }),  
+        })  
+            .then(response => response.json())  
+            .then(data => {  
+                const botResponse = data.response;  
+                addMessage('bot-message', botResponse);  
+                speakResponse(botResponse);  
             })  
-                .then(response => response.json())  
-                .then(data => {  
-                    const botResponse = data.response;  
-                    addMessage('bot-message', botResponse);  
-                    speakResponse(botResponse);  
-                })  
-                .catch(error => {  
-                    console.error("Error:", error);  
-                    addMessage('bot-message', "Sorry, I couldn't process that.");  
-                });  
-        }  
-
-        // Text-to-Speech Function  
-        function speakResponse(text) {  
-            const utterance = new SpeechSynthesisUtterance(text);  
-            utterance.lang = 'en-US';  
-            window.speechSynthesis.speak(utterance);  
-        }
-                // Event listeners for buttons  
-                sendBtn.addEventListener('click', () => {  
-                    const message = userInput.value.trim();  
-                    if (message) {  
-                        addMessage('user-message', message);  
-                        sendUserMessage(message);  
-                        userInput.value = ''; // Clear input field after sending  
-                    }  
-                });  
-        
-                // Handle pressing 'Enter' key for sending messages  
-                userInput.addEventListener('keypress', (e) => {  
-                    if (e.key === 'Enter') {  
-                        sendBtn.click(); // Trigger button click  
-                    }  
-                });  
-        
-                // Update theme when selected from dropdown  
-                themeSelect.addEventListener('change', (e) => {  
-                    changeTheme(e.target.value);  
-                });  
-        
-                recognition.addEventListener('error', (event) => {  
-                    console.error("Speech recognition error", event);  
-                });  
-              // Event listener for language selection
-                document.getElementById("language-select").addEventListener("change", function () {
-                    const selectedLanguage = this.value;
-                    
-                    // Example: Display a message when the language is changed
-                    console.log(`Language selected: ${selectedLanguage}`);
-            
-                    // Logic to change chatbot responses based on the selected language
-                    // You can call an API to fetch translations or configure response logic here.
-                    // For example:
-                    updateBotLanguage(selectedLanguage);
-                });
-            
-                // Function to handle language-specific logic
-                function updateBotLanguage(language) {
-                    // Placeholder function for your chatbot's language integration
-                    alert(`Chatbot will now respond in: ${language.toUpperCase()}`);
-                    // Integrate language translations for bot messages here.
-                }
-        
-            </script>  
+            .catch(error => {  
+                console.error("Error:", error);  
+                addMessage('bot-message', "Sorry, I couldn't process that.");  
+            });  
+    }  
+
+    // Text-to-Speech Function  
+    function speakResponse(text) {  
+        const utterance = new SpeechSynthesisUtterance(text);  
+        utterance.lang = 'en-US';  
+        window.speechSynthesis.speak(utterance);  
+    }  
+
+    // Event listeners for sending messages  
+    sendBtn.addEventListener('click', () => {  
+        const message = userInput.value.trim();  
+        if (message) {  
+            addMessage('user-message', message);  
+            sendUserMessage(message);  
+            userInput.value = ''; // Clear the input field after sending  
+        }  
+    });  
+
+    // Handle pressing 'Enter' key to send messages  
+    userInput.addEventListener('keypress', (e) => {  
+        if (e.key === 'Enter') {  
+            sendBtn.click(); // Trigger button click  
+        }  
+    });  
+
+    // Theme selection handling  
+    themeSelect.addEventListener('change', (e) => {  
+        changeTheme(e.target.value);  
+    });  
+
+    // Function to change the theme based on selection  
+    function changeTheme(theme) {  
+        document.documentElement.classList.remove('theme-calm-azure', 'theme-elegant-charcoal', 'theme-fresh-greenery', 'theme-soft-lavender', 'theme-bright-summer');  
+        if (theme !== 'default') {  
+            document.documentElement.classList.add('theme-' + theme);  
+        }  
+    }  
+
+    // Event listener for language selection, if integrated  
+    document.getElementById("language-select").addEventListener("change", function () {  
+        const selectedLanguage = this.value;  
+        console.log(`Language selected: ${selectedLanguage}`);  
+        updateBotLanguage(selectedLanguage); // Function to handle language updates  
+    });  
+
+    // Function to handle language-specific logic  
+    function updateBotLanguage(language) {  
+        alert(`Chatbot will now respond in: ${language.toUpperCase()}`);  
+        // You might want to integrate translation logic here.  
+    }  
+</script>
         </body>  
         
         </html>