Update templates/index.html

templates/index.html

@@ -303,19 +303,7 @@
                     <option value="soft-lavender">Soft Lavender</option>  
                     <option value="bright-summer">Bright Summer</option>  
                 </select>  
-            </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>  
             <div class="color-picker">  
                 <label>Accent Color:</label>  
                 <div class="color-circle" style="background-color: #6a0dad;" onclick="changeColor('#6a0dad')"></div>  
@@ -340,124 +328,100 @@
     </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');  
-
-    // Function to add messages to the 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  
-    }  
-
-    // Speech Recognition Setup  
-    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();  
-    recognition.lang = 'en-US';  
-    recognition.interimResults = false; // Set to true for interim results  
-
-    // Start speech recognition when voice button is clicked  
-    voiceBtn.addEventListener('click', () => {  
-        recognition.start();  
-    });  
-
-    // Process the speech result  
-    recognition.addEventListener('result', (e) => {  
-        const transcript = e.results[0][0].transcript;  
-        addMessage('user-message', transcript);  
-        sendUserMessage(transcript);  
-    });  
-
-    // Handle cases when no result is found  
-    recognition.addEventListener('nomatch', () => {  
-        const message = 'No speech detected';  
-        addMessage('user-message', message);  
-        sendUserMessage(message);  
-    });  
-
-    // Handle speech recognition errors  
-    recognition.addEventListener('error', (e) => {  
-        console.error("Speech recognition error", e);  
-        const message = 'No speech detected';  
-        addMessage('user-message', message);  
-        sendUserMessage(message);  
-    });  
-
-    // Send user input to the backend  
-    function sendUserMessage(message) {  
-        fetch('/chat', {  
-            method: 'POST',  
-            headers: {  
-                'Content-Type': 'application/json',  
-            },  
-            body: JSON.stringify({ message: message }),  
-        })  
-            .then(response => response.json())  
-            .then(data => {  
-                const botResponse = data.response;  
-                addMessage('bot-message', botResponse);  
-                speakResponse(botResponse);  
+        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');  
+
+        // 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';  
+
+        voiceBtn.addEventListener('click', () => 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);  
+            }  
+        }  
+
+        // Send user input to backend (placeholder URL)  
+        function sendUserMessage(message) {  
+            fetch('/chat', {  
+                method: 'POST',  
+                headers: {  
+                    'Content-Type': 'application/json',  
+                },  
+                body: JSON.stringify({ message: message }),  
             })  
-            .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);  
-    }  
-
-    // Event listeners for sending messages  
-    sendBtn.addEventListener('click', () => {  
-        const message = userInput.value.trim();  
-        if (message) {  
-            addMessage('user-message', message);  
-            sendUserMessage(message);  
-            userInput.value = ''; // Clear the input field after sending  
-        }  
-    });  
-
-    // Handle pressing 'Enter' key to send messages  
-    userInput.addEventListener('keypress', (e) => {  
-        if (e.key === 'Enter') {  
-            sendBtn.click(); // Trigger button click  
-        }  
-    });  
-
-    // Theme selection handling  
-    themeSelect.addEventListener('change', (e) => {  
-        changeTheme(e.target.value);  
-    });  
-
-    // Function to change the theme based on selection  
-    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);  
-        }  
-    }  
-
-    // Event listener for language selection, if integrated  
-    document.getElementById("language-select").addEventListener("change", function () {  
-        const selectedLanguage = this.value;  
-        console.log(`Language selected: ${selectedLanguage}`);  
-        updateBotLanguage(selectedLanguage); // Function to handle language updates  
-    });  
-
-    // Function to handle language-specific logic  
-    function updateBotLanguage(language) {  
-        alert(`Chatbot will now respond in: ${language.toUpperCase()}`);  
-        // You might want to integrate translation logic here.  
-    }  
-</script>
+                .then(response => response.json())  
+                .then(data => {  
+                    const botResponse = data.response;  
+                    addMessage('bot-message', botResponse);  
+                    speakResponse(botResponse);  
+                })  
+                .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);  
+        }
+                // 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);  
+                });  
+        
+                recognition.addEventListener('error', (event) => {  
+                    console.error("Speech recognition error", event);  
+                });  
+        
+            </script>  
         </body>  
         
         </html>