Update templates/index.html

templates/index.html

@@ -303,7 +303,19 @@
                     <option value="soft-lavender">Soft Lavender</option>  
                     <option value="bright-summer">Bright Summer</option>  
                 </select>  
-            </div>  
+            </div>
+            <div class="language-toggle">
+              <label for="language-select">Select Language:</label>
+              <select id="language-select">
+                  <option value="en">English</option>
+                  <option value="es">Spanish</option>
+                  <option value="fr">French</option>
+                  <option value="de">German</option>
+                  <option value="hi">Hindi</option>
+                  <option value="zh">Chinese</option>
+                  <option value="ar">Arabic</option>
+              </select>
+            </div>
             <div class="color-picker">  
                 <label>Accent Color:</label>  
                 <div class="color-circle" style="background-color: #6a0dad;" onclick="changeColor('#6a0dad')"></div>  
@@ -343,17 +355,40 @@
             chatBox.scrollTop = chatBox.scrollHeight;  
         }  
 
-        // Speech Recognition Setup  
-        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();  
-        recognition.lang = 'en-US';  
-
-        voiceBtn.addEventListener('click', () => recognition.start());  
-
-        recognition.addEventListener('result', (e) => {  
-            const transcript = e.results[0][0].transcript;  
-            addMessage('user-message', transcript);  
-            sendUserMessage(transcript);  
-        });  
+        // Speech Recognition Setup
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.lang = 'en-US';
+        
+        // Start recognition when the voice button is clicked
+        voiceBtn.addEventListener('click', () => recognition.start());
+        
+        // Handle successful speech recognition
+        recognition.addEventListener('result', (e) => {
+            const transcript = e.results[0][0].transcript;
+            addMessage('user-message', transcript);
+            sendUserMessage(transcript);
+        });
+        
+        // Handle when speech ends without detection
+        recognition.onspeechend = () => {
+            recognition.stop(); // Stop recognition to prevent hanging
+        };
+        
+        // Handle no match (e.g., no recognizable speech detected)
+        recognition.onnomatch = () => {
+            addMessage('system-message', 'Speech not detected. Please try again.');
+        };
+        
+        // Handle errors during speech recognition
+        recognition.onerror = (event) => {
+            console.error('Speech recognition error:', event.error);
+            if (event.error === 'no-speech') {
+                addMessage('system-message', 'No speech detected. Please speak clearly and try again.');
+            } else {
+                addMessage('system-message', 'An error occurred during speech recognition.');
+            }
+        };
+ 
 
         // Function to change the accent color  
         function changeColor(color) {  
@@ -420,6 +455,25 @@
                 recognition.addEventListener('error', (event) => {  
                     console.error("Speech recognition error", event);  
                 });  
+              // Event listener for language selection
+                document.getElementById("language-select").addEventListener("change", function () {
+                    const selectedLanguage = this.value;
+                    
+                    // Example: Display a message when the language is changed
+                    console.log(`Language selected: ${selectedLanguage}`);
+            
+                    // Logic to change chatbot responses based on the selected language
+                    // You can call an API to fetch translations or configure response logic here.
+                    // For example:
+                    updateBotLanguage(selectedLanguage);
+                });
+            
+                // Function to handle language-specific logic
+                function updateBotLanguage(language) {
+                    // Placeholder function for your chatbot's language integration
+                    alert(`Chatbot will now respond in: ${language.toUpperCase()}`);
+                    // Integrate language translations for bot messages here.
+                }
         
             </script>  
         </body>