Update templates/index.html

templates/index.html

@@ -336,69 +336,84 @@
     </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');  
+        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');
         const languageSelect = document.getElementById('language-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';  
-        // Function to set language for speech recognition
-        function setRecognitionLanguage() {
-            const selectedLanguage = languageSelect.value;
-            switch (selectedLanguage) {
-                case 'telugu':
-                    recognition.lang = 'te-IN'; // Telugu
-                    break;
-                case 'hindi':
-                    recognition.lang = 'hi-IN'; // Hindi
-                    break;
-                default:
-                    recognition.lang = 'en-US'; // English
-                    break;
+        
+        // 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
+        let recognition;
+        try {
+            recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        } catch (e) {
+            console.error("Speech Recognition API not supported in this browser.");
+        }
+        
+        if (recognition) {
+            recognition.continuous = true; // Continuously listen for speech
+            recognition.interimResults = true; // Get real-time speech results
+            recognition.maxAlternatives = 1; // Only return the top result
+        
+            // Function to set language for speech recognition
+            function setRecognitionLanguage() {
+                const selectedLanguage = languageSelect.value;
+                switch (selectedLanguage) {
+                    case 'telugu':
+                        recognition.lang = 'te-IN'; // Telugu
+                        break;
+                    case 'hindi':
+                        recognition.lang = 'hi-IN'; // Hindi
+                        break;
+                    default:
+                        recognition.lang = 'en-US'; // English
+                        break;
+                }
             }
+        
+            voiceBtn.addEventListener('click', () => {
+                setRecognitionLanguage();  // Set the language before starting speech recognition
+                recognition.start();
+            });
+        
+            recognition.addEventListener('result', (e) => {
+                const transcript = e.results[0][0].transcript;
+                addMessage('user-message', transcript);
+                sendUserMessage(transcript);
+            });
+        
+            recognition.addEventListener('error', (event) => {
+                console.error("Speech recognition error", event);
+            });
         }
-        // voiceBtn.addEventListener('click', () => recognition.start());  
-        voiceBtn.addEventListener('click', () => {
-            setRecognitionLanguage();  // Set the language before starting speech recognition
-            recognition.start();
-        });
-
-        recognition.addEventListener('result', (e) => {  
-            const transcript = e.results[0][0].transcript;  
-            addMessage('user-message', transcript);  
-            sendUserMessage(transcript);  
-        });  
-
-        // 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);  
-            }  
-        }  
-
+        
+        // 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);
+            }
+        }
+        
         // Function to send user input and selected language to backend
         function sendUserMessage(message) {
             const selectedLanguage = languageSelect.value; // Get the selected language
-    
+        
             // Send the message and selected language to the backend
             fetch('/chat', {
                 method: 'POST',
@@ -421,17 +436,11 @@
                 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);  
-        // }
+        
         // Text-to-Speech Function
         function speakResponse(text) {
             const utterance = new SpeechSynthesisUtterance(text);
-    
+        
             // Set the language for text-to-speech based on the selected language
             const selectedLanguage = languageSelect.value;
             switch (selectedLanguage) {
@@ -445,36 +454,52 @@
                     utterance.lang = 'en-US'; // English
                     break;
             }
-    
-            window.speechSynthesis.speak(utterance);
+        
+            if ('speechSynthesis' in window) {
+                window.speechSynthesis.speak(utterance);
+            } else {
+                console.error("Text-to-Speech not supported in this browser.");
+            }
         }
         
-        // 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  
-            }  
-        });  
+        // 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
+            }
+        });
         
-        // Update theme when selected from dropdown  
-        themeSelect.addEventListener('change', (e) => {  
-            changeTheme(e.target.value);  
-        });  
-
-        recognition.addEventListener('error', (event) => {  
-            console.error("Speech recognition error", event);  
-        });  
+        // 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);
+        });
+        
+        // Ensure language is set when page loads
+        window.addEventListener('load', () => {
+            setRecognitionLanguage(); // Set default language for recognition on load
+        });
+        // 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);  
+            }  
+        }          
     </script>  
   </body>         
 </html>