Update templates/index.html

templates/index.html

@@ -347,240 +347,190 @@
     </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 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;  
-        }  
-
-        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'; // Telugu
-                    break;
-                case 'hindi':
-                    recognition.lang = 'hi-IN'; // Hindi
-                    break;
-                case 'bengali':
-                    recognition.lang = 'bn-IN'; // Bengali
-                    break;
-                case 'marathi':
-                    recognition.lang = 'mr-IN'; // Marathi
-                    break;
-                case 'tamil':
-                    recognition.lang = 'ta-IN'; // Tamil
-                    break;
-                case 'gujarati':
-                    recognition.lang = 'gu-IN'; // Gujarati
-                    break;
-                case 'kannada':
-                    recognition.lang = 'kn-IN'; // Kannada
-                    break;
-                case 'malayalam':
-                    recognition.lang = 'ml-IN'; // Malayalam
-                    break;
-                case 'punjabi':
-                    recognition.lang = 'pa-IN'; // Punjabi
-                    break;
-                case 'odia':
-                    recognition.lang = 'or-IN'; // Odia
-                    break;
-                case 'urdu':
-                    recognition.lang = 'ur-IN'; // Urdu
-                    break;
-                case 'assamese':
-                    recognition.lang = 'as-IN'; // Assamese
-                    break;
-                case 'sanskrit':
-                    recognition.lang = 'sa-IN'; // Sanskrit
-                    break;
-                case 'english':
-                default:
-                    recognition.lang = 'en-US'; // English (default)
-                    break;
-            }
-        }
-        
-        // Event listener for the voice input button
-        voiceBtn.addEventListener('click', () => {
-            setRecognitionLanguage();  // Set the language before starting speech recognition
-            recognition.start();
-        });
-        
-        // Handle results from the 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);
-        });
-
-
-        // 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',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    message: 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.");
-            });
-        }
-
-        // // 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) {
-        //         case 'telugu':
-        //             utterance.lang = 'te-IN'; // Telugu
-        //             break;
-        //         case 'hindi':
-        //             utterance.lang = 'hi-IN'; // Hindi
-        //             break;
-        //         default:
-        //             utterance.lang = 'en-US'; // English
-        //             break;
-        //     }
-    
-        //     window.speechSynthesis.speak(utterance);
-        // }
-        // Function to get the voice list and match language
-        function getVoiceForLanguage(lang) {
-            const voices = window.speechSynthesis.getVoices();
-            return voices.find(voice => voice.lang === lang) || null; // Find a matching voice or return null
-        }
-        
-        // // Enhanced Speak 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 (default: 1)
-        //     utterance.rate = 1;  // Set rate (default: 1)
-        //     window.speechSynthesis.speak(utterance); // Speak the text
-        // }
-      // Text-to-Speech function
-        function speak(text, lang) {
-            const utterance = new SpeechSynthesisUtterance(text);
-            utterance.lang = lang;
-            utterance.pitch = 1;
-            utterance.rate = 1;
-            synth.speak(utterance);
-        }
-        
-        // Language Handling Function
-        function speakResponse(text,selectedLanguage) {
-            // const selectedLanguage = document.getElementById('language-select').value; // Get the selected language
-            
-            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.");
-            };
-        }
-
-        
+          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();  
@@ -590,23 +540,18 @@
                   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);  
-          });  
-        
-    </script>  
+      </script>
   </body>         
 </html>