Update templates/index.html

templates/index.html

@@ -347,211 +347,184 @@
     </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 languageSelect = document.getElementById('language-select');  
-      
-          // Add message to 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 of the chat  
-          }  
-      
-          // Initialize speech recognition  
-          const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();  
-      
-          // Function to set language for speech recognition  
-          function setRecognitionLanguage() {  
-              const selectedLanguage = languageSelect.value;  
-              switch (selectedLanguage) {  
-                  case 'telugu':  
-                      recognition.lang = 'te-IN'; break;  
-                  case 'hindi':  
-                      recognition.lang = 'hi-IN'; break;  
-                  case 'bengali':  
-                      recognition.lang = 'bn-IN'; break;  
-                  case 'marathi':  
-                      recognition.lang = 'mr-IN'; break;  
-                  case 'tamil':  
-                      recognition.lang = 'ta-IN'; break;  
-                  case 'gujarati':  
-                      recognition.lang = 'gu-IN'; break;  
-                  case 'kannada':  
-                      recognition.lang = 'kn-IN'; break;  
-                  case 'malayalam':  
-                      recognition.lang = 'ml-IN'; break;  
-                  case 'punjabi':  
-                      recognition.lang = 'pa-IN'; break;  
-                  case 'odia':  
-                      recognition.lang = 'or-IN'; break;  
-                  case 'urdu':  
-                      recognition.lang = 'ur-IN'; break;  
-                  case 'assamese':  
-                      recognition.lang = 'as-IN'; break;  
-                  case 'sanskrit':  
-                      recognition.lang = 'sa-IN'; break;  
-                  case 'english':  
-                  default:  
-                      recognition.lang = 'en-US'; break; // Default to English  
-              }  
-          }  
-      
-          // Event listener for voice input button  
-          voiceBtn.addEventListener('click', () => {  
-              setRecognitionLanguage(); // Set language  
-              recognition.start(); // Start recognition  
-          });  
-      
-          // Handle results from speech recognition  
-          recognition.addEventListener('result', (e) => {  
-              const transcript = e.results[0][0].transcript;  
-              addMessage('user-message', transcript);  
-              sendUserMessage(transcript);  
-          });  
-      
-          // Handle errors in speech recognition  
-          recognition.addEventListener('error', (event) => {  
-              console.error("Speech recognition error", event);  
-          });  
-      
-          // Change the accent color  
-          function changeColor(color) {  
-              document.documentElement.style.setProperty('--accent-color', color);  
-          }  
-      
-          // 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',  
-                  headers: {  
-                      'Content-Type': 'application/json',  
-                  },  
-                  body: JSON.stringify({  
-                      message,  
-                      language: selectedLanguage, // Include the selected language in the request body  
-                  }),   
-              })  
-              .then(response => response.json())  
-              .then(data => {  
-                  const botResponse = data.response;  
-                  addMessage('bot-message', botResponse);  
-                  speakResponse(botResponse, selectedLanguage);  
-              })  
-              .catch(error => {  
-                  console.error("Error:", error);  
-                  addMessage('bot-message', "Sorry, I couldn't process that.");  
-              });  
-          }  
-      
-          // Function to get the voice list and match the language  
-          function getVoiceForLanguage(lang) {  
-              const voices = window.speechSynthesis.getVoices();  
-              return voices.find(voice => voice.lang === lang) || null; // Find a matching voice or return null  
-          }  
-      
-          // Text-to-Speech function
-              // Text-to-Speech function  
-          function speak(text, lang) {  
-              const utterance = new SpeechSynthesisUtterance(text);  
-              const selectedVoice = getVoiceForLanguage(lang);  
-      
-              if (selectedVoice) {  
-                  utterance.voice = selectedVoice; // Set the matching voice  
-                  utterance.lang = lang;          // Set the language  
-              } else {  
-                  console.warn(`No voice found for language: ${lang}. Falling back to default.`);  
-                  utterance.lang = 'en-US'; // Fallback to English  
-              }  
-      
-              utterance.pitch = 1; // Set pitch  
-              utterance.rate = 1; // Set rate  
-              window.speechSynthesis.speak(utterance); // Speak the text  
-          }  
-      
-          // Language Handling Function  
-          function speakResponse(text, selectedLanguage) {  
-              let lang;  
-      
-              // Map selected language to appropriate language code  
-              switch (selectedLanguage) {  
-                  case 'hindi':  
-                      lang = 'hi-IN'; break;  
-                  case 'bengali':  
-                      lang = 'bn-IN'; break;  
-                  case 'telugu':  
-                      lang = 'te-IN'; break;  
-                  case 'marathi':  
-                      lang = 'mr-IN'; break;  
-                  case 'tamil':  
-                      lang = 'ta-IN'; break;  
-                  case 'gujarati':  
-                      lang = 'gu-IN'; break;  
-                  case 'kannada':  
-                      lang = 'kn-IN'; break;  
-                  case 'malayalam':  
-                      lang = 'ml-IN'; break;  
-                  case 'punjabi':  
-                      lang = 'pa-IN'; break;  
-                  case 'odia':  
-                      lang = 'or-IN'; break;  
-                  case 'urdu':  
-                      lang = 'ur-IN'; break;  
-                  case 'assamese':  
-                      lang = 'as-IN'; break;  
-                  case 'sanskrit':  
-                      lang = 'sa-IN'; break;  
-                  default:  
-                      lang = 'en-US'; break; // English (default)  
-              }  
-      
-              speak(text, lang); // Call the speak function with the determined language  
-          }  
-      
-          // Ensure voices are loaded before running the TTS  
-          if (window.speechSynthesis.onvoiceschanged !== undefined) {  
-              window.speechSynthesis.onvoiceschanged = () => {  
-                  console.log("Voices loaded and ready to use.");  
-              };  
-          }  
-      
-          // 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);  
-          });  
-      </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 languageSelect = document.getElementById('language-select');  
+    
+        // Add message to 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 of the chat  
+        }  
+    
+        // Initialize speech recognition  
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();  
+    
+        // Function to set language for speech recognition  
+        function setRecognitionLanguage() {  
+            const selectedLanguage = languageSelect.value;  
+            switch (selectedLanguage) {  
+                case 'telugu': recognition.lang = 'te-IN'; break;  
+                case 'hindi': recognition.lang = 'hi-IN'; break;  
+                case 'bengali': recognition.lang = 'bn-IN'; break;  
+                case 'marathi': recognition.lang = 'mr-IN'; break;  
+                case 'tamil': recognition.lang = 'ta-IN'; break;  
+                case 'gujarati': recognition.lang = 'gu-IN'; break;  
+                case 'kannada': recognition.lang = 'kn-IN'; break;  
+                case 'malayalam': recognition.lang = 'ml-IN'; break;  
+                case 'punjabi': recognition.lang = 'pa-IN'; break;  
+                case 'odia': recognition.lang = 'or-IN'; break;  
+                case 'urdu': recognition.lang = 'ur-IN'; break;  
+                case 'assamese': recognition.lang = 'as-IN'; break;  
+                case 'sanskrit': recognition.lang = 'sa-IN'; break;  
+                case 'english':  
+                default: recognition.lang = 'en-US'; break; // Default to English  
+            }  
+        }  
+    
+        // Event listener for voice input button  
+        voiceBtn.addEventListener('click', () => {  
+            setRecognitionLanguage(); // Set language  
+            recognition.start(); // Start recognition  
+        });  
+    
+        // Handle results from speech recognition  
+        recognition.addEventListener('result', (e) => {  
+            const transcript = e.results[0][0].transcript;  
+            addMessage('user-message', transcript);  
+            sendUserMessage(transcript);  
+        });  
+    
+        // Handle errors in speech recognition  
+        recognition.addEventListener('error', (event) => {  
+            console.error("Speech recognition error", event);  
+        });  
+    
+        // Change the accent color  
+        function changeColor(color) {  
+            document.documentElement.style.setProperty('--accent-color', color);  
+        }  
+    
+        // 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',  
+                headers: {  
+                    'Content-Type': 'application/json',  
+                },  
+                body: JSON.stringify({  
+                    message,  
+                    language: selectedLanguage, // Include the selected language in the request body  
+                }),  
+            })  
+            .then(response => response.json())  
+            .then(data => {  
+                const botResponse = data.response;  
+                addMessage('bot-message', botResponse);  
+                speakResponse(botResponse, selectedLanguage);  
+            })  
+            .catch(error => {  
+                console.error("Error:", error);  
+                addMessage('bot-message', "Sorry, I couldn't process that.");  
+            });  
+        }  
+    
+        // Function to return the voice list and find a matching language voice  
+        function getVoiceForLanguage(lang) {  
+            const voices = window.speechSynthesis.getVoices();  
+            const matchingVoice = voices.find(voice => voice.lang.startsWith(lang.split('-')[0])); // Match based on language code  
+            return matchingVoice || null; // Return first match or null if not found  
+        }  
+    
+        // Text-to-Speech function  
+        function speak(text, lang) {  
+            const utterance = new SpeechSynthesisUtterance(text);  
+            const selectedVoice = getVoiceForLanguage(lang);  
+    
+            if (selectedVoice) {  
+                utterance.voice = selectedVoice; // Set the matching voice  
+                utterance.lang = lang;          // Set the language  
+            } else {  
+                console.warn(`No voice found for language: ${lang}. Falling back to default.`);  
+                utterance.lang = 'en-US'; // Fallback to English  
+            }  
+    
+            utterance.pitch = 1; // Set pitch  
+            utterance.rate = 1;  // Set rate  
+            window.speechSynthesis.speak(utterance); // Speak the text  
+        }  
+    
+        // Language Handling Function  
+        function speakResponse(text, selectedLanguage) {  
+            let lang;  
+    
+            // Map selected language to appropriate language code  
+            switch (selectedLanguage) {  
+                case 'hindi': lang = 'hi-IN'; break;  
+                case 'bengali': lang = 'bn-IN'; break;  
+                case 'telugu': lang = 'te-IN'; break;  
+                case 'marathi': lang = 'mr-IN'; break;  
+                case 'tamil': lang = 'ta-IN'; break;  
+                case 'gujarati': lang = 'gu-IN'; break;    
+                case 'kannada': lang = 'kn-IN'; break;  
+                case 'malayalam': lang = 'ml-IN'; break;  
+                case 'punjabi': lang = 'pa-IN'; break;  
+                case 'odia': lang = 'or-IN'; break;  
+                case 'urdu': lang = 'ur-IN'; break;  
+                case 'assamese': lang = 'as-IN'; break;  
+                case 'sanskrit': lang = 'sa-IN'; break;  
+                default: lang = 'en-US'; break; // English (default)  
+            }  
+    
+            speak(text, lang); // Call the speak function with the determined language  
+        }  
+    
+        // Ensure voices are loaded before running the TTS  
+        window.speechSynthesis.onvoiceschanged = () => {  
+            console.log("Voices loaded and ready to use.");  
+            // Populate voices (optional, you may also load voices on demand)  
+            const voices = window.speechSynthesis.getVoices();  
+            voices.forEach(voice => console.log(`Voice: ${voice.name}, Language: ${voice.lang}`));  
+        };  
+    
+        // 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);  
+        });  
+    </script>
   </body>         
 </html>