Update templates/index.html

templates/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
     <title>TAJ HOTEL CHATBOT</title>  
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">  
+    <script src="https://code.responsivevoice.org/responsivevoice.js?key=q1DbMp6Z"></script>
     <style>  
         :root {  
             --primary-color: #007bff; /* Default blue */  
@@ -501,77 +502,105 @@
         //         console.log(`Voice: ${voice.name}, Language: ${voice.lang}`);  
         //     });  
         // };
-        // Function to initialize and fetch voices
-        function initializeVoices() {
-            return new Promise((resolve) => {
-                const voices = window.speechSynthesis.getVoices();
-                if (voices.length) {
-                    resolve(voices);
-                } else {
-                    window.speechSynthesis.onvoiceschanged = () => {
-                        resolve(window.speechSynthesis.getVoices());
-                    };
-                }
-            });
-        }
+        // // Function to initialize and fetch voices
+        // function initializeVoices() {
+        //     return new Promise((resolve) => {
+        //         const voices = window.speechSynthesis.getVoices();
+        //         if (voices.length) {
+        //             resolve(voices);
+        //         } else {
+        //             window.speechSynthesis.onvoiceschanged = () => {
+        //                 resolve(window.speechSynthesis.getVoices());
+        //             };
+        //         }
+        //     });
+        // }
         
-        // Function to get the voice for a given language
-        function getVoiceForLanguage(lang, voices) {
-            const voice = voices.find(voice => voice.lang === lang);
-            if (voice) {
-                return voice;
-            }
-            console.warn(`No voice found for language: ${lang}.`);
-            return null;
-        }
+        // // Function to get the voice for a given language
+        // function getVoiceForLanguage(lang, voices) {
+        //     const voice = voices.find(voice => voice.lang === lang);
+        //     if (voice) {
+        //         return voice;
+        //     }
+        //     console.warn(`No voice found for language: ${lang}.`);
+        //     return null;
+        // }
         
-        // Text-to-Speech function
-        async function speak(text, lang) {
-            const voices = await initializeVoices();
-            const selectedVoice = getVoiceForLanguage(lang, voices);
+        // // Text-to-Speech function
+        // async function speak(text, lang) {
+        //     const voices = await initializeVoices();
+        //     const selectedVoice = getVoiceForLanguage(lang, voices);
         
-            const utterance = new SpeechSynthesisUtterance(text);
-            if (selectedVoice) {
-                utterance.voice = selectedVoice;
-                utterance.lang = selectedVoice.lang;
-            } else {
-                console.warn(`Falling back to default language.`);
-                utterance.lang = 'en-US';
-            }
+        //     const utterance = new SpeechSynthesisUtterance(text);
+        //     if (selectedVoice) {
+        //         utterance.voice = selectedVoice;
+        //         utterance.lang = selectedVoice.lang;
+        //     } else {
+        //         console.warn(`Falling back to default language.`);
+        //         utterance.lang = 'en-US';
+        //     }
         
-            utterance.pitch = 1; // Set pitch
-            utterance.rate = 1;  // Set rate
-            window.speechSynthesis.speak(utterance); // Speak the text
-        }
+        //     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;
-            switch (selectedLanguage.toLowerCase()) {
-                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)
-            }
+        function speakResponse(text, selectedLanguage) {  
+            let voice;  
+            switch (selectedLanguage.toLowerCase()) {  
+                case 'hindi':  
+                    voice = 'Hindi Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'bengali':  
+                    voice = 'Bengali Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'telugu':  
+                    voice = 'Telugu Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'marathi':  
+                    voice = 'Marathi Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'tamil':  
+                    voice = 'Tamil Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'gujarati':  
+                    voice = 'Gujarati Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'kannada':  
+                    voice = 'Kannada Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'malayalam':  
+                    voice = 'Malayalam Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'punjabi':  
+                    voice = 'Punjabi Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'odia':  
+                    voice = 'Odia Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'urdu':  
+                    voice = 'Urdu Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'assamese':  
+                    voice = 'Assamese Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                case 'sanskrit':  
+                    voice = 'Sanskrit Female'; // Use ResponsiveVoice voice name  
+                    break;  
+                default:  
+                    voice = 'English US Female'; // Use ResponsiveVoice default voice name  
+                    break;  
+            }  
         
-            speak(text, lang); // Call the speak function with the determined language
-        }
+            responsiveVoice.speak(text, voice); // Call ResponsiveVoice speak function with the determined voice  
+        }  
         
-        // Test voices and log them
-        initializeVoices().then(voices => {
-            console.log("Available voices:");
-            voices.forEach(voice => console.log(`Voice: ${voice.name}, Language: ${voice.lang}`));
-        });
+        // // Test voices and log them
+        // initializeVoices().then(voices => {
+        //     console.log("Available voices:");
+        //     voices.forEach(voice => console.log(`Voice: ${voice.name}, Language: ${voice.lang}`));
+        // });
         // Event listeners for buttons  
         sendBtn.addEventListener('click', () => {  
             const message = userInput.value.trim();