Update templates/index.html

templates/index.html

@@ -336,84 +336,69 @@
     </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
-        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);
-            });
-        }
-        
-        // 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);
+
+        // 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;
             }
         }
-        
+        // 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 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',
@@ -436,11 +421,17 @@
                 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) {
@@ -454,52 +445,36 @@
                     utterance.lang = 'en-US'; // English
                     break;
             }
-        
-            if ('speechSynthesis' in window) {
-                window.speechSynthesis.speak(utterance);
-            } else {
-                console.error("Text-to-Speech not supported in this browser.");
-            }
+    
+            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);
-        });
-        
-        // 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);  
-        }  
+        // 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  
+            }  
+        });  
 
-        // 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);  
+        // 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);  
+        });  
+        
     </script>  
   </body>         
 </html>