Update index.html

index.html

@@ -36,7 +36,6 @@
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
-    /* Responsive adjustments */
     @media (max-width: 768px) {
       .avatar svg { width: 80px; height: 80px; }
       h1 { font-size: 2rem; }
@@ -57,9 +56,9 @@
   <p class="text-center mb-4 text-gray-700">I'm here to listen, support, and share knowledge. Let's connect!</p>
   
   <div class="flex gap-4 mb-4 flex-wrap justify-center">
-    <button id="modeBtn" onclick="toggleMode()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Toggle between Emotional Support and Knowledge modes">Mode: Emotional Support</button>
-    <button onclick="clearChat()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Clear the chat history">Clear Chat</button>
-    <select id="voiceSelect" class="bg-white border rounded-lg px-3 py-2 shadow-lg" aria-label="Select output voice">
+    <button id="modeBtn" onclick="toggleMode()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Toggle modes">Mode: Emotional Support</button>
+    <button onclick="clearChat()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Clear chat">Clear Chat</button>
+    <select id="voiceSelect" class="bg-white border rounded-lg px-3 py-2 shadow-lg" aria-label="Select voice">
       <option value="calming male">Calming Male</option>
       <option value="calming female">Calming Female</option>
       <option value="soothing motivating male">Soothing Motivating Male</option>
@@ -72,16 +71,16 @@
     </select>
   </div>
   
-  <div id="chat-box" class="w-full max-w-lg h-96 bg-white rounded-lg shadow-xl overflow-y-auto p-4 mb-4" role="log" aria-live="polite" aria-label="Chat conversation"></div>
+  <div id="chat-box" class="w-full max-w-lg h-96 bg-white rounded-lg shadow-xl overflow-y-auto p-4 mb-4" role="log" aria-live="polite" aria-label="Chat"></div>
 
   <div class="flex gap-2 w-full max-w-lg flex-wrap">
-    <input id="message" type="text" class="flex-grow p-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Share what's on your mind..." aria-label="Type your message" />
-    <button onclick="sendMessage()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Send your message">Send</button>
+    <input id="message" type="text" class="flex-grow p-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Share what's on your mind..." aria-label="Type message" />
+    <button onclick="sendMessage()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Send">Send</button>
   </div>
 
   <div class="flex gap-2 mt-4 flex-wrap justify-center">
-    <button id="listenBtn" onclick="startListening()" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Start voice input" disabled>🎙️ Start Listening</button>
-    <button id="stopBtn" onclick="stopListening()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Stop voice input" disabled>⏹️ Stop</button>
+    <button id="listenBtn" onclick="startListening()" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Voice input" disabled>🎙️ Listen</button>
+    <button id="stopBtn" onclick="stopListening()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Stop voice" disabled>⏹️ Stop</button>
   </div>
 
   <script>
@@ -96,22 +95,20 @@
     let currentMode = "emotional_support";
 
     const emotionColors = {
-      joy: ["bg-gradient-to-r from-yellow-200 to-yellow-300", "bg-gradient-to-r from-yellow-300 to-orange-200"],
-      sadness: ["bg-gradient-to-r from-blue-200 to-blue-300", "bg-gradient-to-r from-blue-300 to-indigo-200"],
-      anger: ["bg-gradient-to-r from-red-200 to-red-300", "bg-gradient-to-r from-red-300 to-pink-200"],
-      calm: ["bg-gradient-to-r from-green-200 to-green-300", "bg-gradient-to-r from-green-300 to-teal-200"],
-      optimism: ["bg-gradient-to-r from-orange-200 to-orange-300", "bg-gradient-to-r from-orange-300 to-yellow-200"],
-      surprise: ["bg-gradient-to-r from-purple-200 to-purple-300", "bg-gradient-to-r from-purple-300 to-violet-200"],
-      neutral: ["bg-gradient-to-r from-gray-200 to-gray-300", "bg-gradient-to-r from-gray-300 to-slate-200"]
+      joy: ["bg-gradient-to-r from-yellow-200 to-yellow-300"],
+      sadness: ["bg-gradient-to-r from-blue-200 to-blue-300"],
+      anger: ["bg-gradient-to-r from-red-200 to-red-300"],
+      calm: ["bg-gradient-to-r from-green-200 to-green-300"],
+      optimism: ["bg-gradient-to-r from-orange-200 to-orange-300"],
+      surprise: ["bg-gradient-to-r from-purple-200 to-purple-300"],
+      neutral: ["bg-gradient-to-r from-gray-200 to-gray-300"]
     };
 
-    // Load chat history from localStorage
     function loadHistory() {
       const history = JSON.parse(localStorage.getItem("chatHistory") || "[]");
       history.forEach(msg => appendMessage(msg.sender, msg.text, false));
     }
 
-    // Save chat history to localStorage
     function saveHistory() {
       const messages = Array.from(chatBox.children).map(div => ({
         sender: div.querySelector("strong").textContent.replace(":", ""),
@@ -124,10 +121,7 @@
       const message = messageInput.value.trim();
       if (!message) return;
       
-      if (!voiceConfirmed && recognition) {
-        if (!confirm("Send this voice message?")) return;
-      }
-      
+      console.log("Sending message:", message);
       appendMessage("You", message);
       messageInput.value = "";
       showLoading(true);
@@ -138,13 +132,16 @@
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ message, mode: currentMode, voice_tone: voiceSelect.value }),
         });
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
         const data = await res.json();
+        console.log("Received response:", data);
         appendMessage("Assistant", data.reply);
         updateBackground(data.emotion);
         speak(data.reply);
         saveHistory();
       } catch (error) {
-        appendMessage("Assistant", "Oops, something went wrong. Please try again.");
+        console.error("Fetch error:", error);
+        appendMessage("Assistant", "Something went wrong. Check your API key or try again.");
       } finally {
         showLoading(false);
       }
@@ -161,29 +158,25 @@
 
     function updateBackground(emotion) {
       const colors = emotionColors[emotion.toLowerCase()] || emotionColors["neutral"];
-      const randomColor = colors[Math.floor(Math.random() * colors.length)];
-      document.body.className = `transition-all min-h-screen flex flex-col items-center justify-center p-4 ${randomColor}`;
+      document.body.className = `transition-all min-h-screen flex flex-col items-center justify-center p-4 ${colors[0]}`;
     }
 
     function speak(text) {
       if ("speechSynthesis" in window) {
         const utterance = new SpeechSynthesisUtterance(text);
         const voices = speechSynthesis.getVoices();
-        // Map voice tone to available voices (basic mapping; adjust based on browser)
         let selectedVoice = voices.find(v => v.name.toLowerCase().includes(voiceSelect.value.split(' ')[0]));
-        if (!selectedVoice) selectedVoice = voices[0]; // Fallback
+        if (!selectedVoice) selectedVoice = voices[0];
         utterance.voice = selectedVoice;
-        utterance.rate = 0.8; // Calm pace
+        utterance.rate = 0.8;
         utterance.pitch = 1;
         speechSynthesis.speak(utterance);
-      } else {
-        alert("Speech synthesis not supported in your browser.");
       }
     }
 
     function startListening() {
       if (!("webkitSpeechRecognition" in window)) {
-        alert("Speech recognition not supported in your browser.");
+        alert("Voice not supported.");
         return;
       }
       recognition = new webkitSpeechRecognition();
@@ -200,9 +193,8 @@
 
       recognition.onresult = (event) => {
         const transcript = event.results[0][0].transcript;
-        appendMessage("You (voice)", transcript);
         messageInput.value = transcript;
-        sendMessage(true);  // Auto-send with confirmation
+        sendMessage(true);
       };
 
       recognition.onend = () => {
@@ -214,4 +206,44 @@
       recognition.start();
     }
 
-    function stop
+    function stopListening() {
+      if (recognition && listening) {
+        recognition.stop();
+        listening = false;
+        listenBtn.disabled = false;
+        stopBtn.disabled = true;
+        appendMessage("System", "Stopped.");
+      }
+    }
+
+    function toggleMode() {
+      currentMode = currentMode === "emotional_support" ? "knowledge" : "emotional_support";
+      modeBtn.textContent = `Mode: ${currentMode === "emotional_support" ? "Emotional Support" : "Knowledge"}`;
+      console.log("Mode switched to:", currentMode);
+    }
+
+    function clearChat() {
+      chatBox.innerHTML = "";
+      localStorage.removeItem("chatHistory");
+    }
+
+    function showLoading(show) {
+      const btn = document.querySelector("button[onclick='sendMessage()']");
+      if (show) {
+        btn.innerHTML = '<div class="loading"></div>';
+        btn.disabled = true;
+      } else {
+        btn.innerHTML = "Send";
+        btn.disabled = false;
+      }
+    }
+
+    messageInput.addEventListener('keypress', function(e) {
+      if (e.key === 'Enter') sendMessage();
+    });
+
+    loadHistory();
+    appendMessage("Assistant", "Hi! How are you?");
+  </script>
+</body>
+</html>