Update it completely.

Make sure it runs greatly.

index.html

@@ -32,110 +32,132 @@
       <button id="stop-btn" class="bg-red-500 text-white px-3 py-2 rounded hover:bg-red-600">⏹️ Stop</button>
     </div>
   </div>
+<script>
+const chatBox = document.createElement("div");
+const input = document.createElement("input");
+const sendBtn = document.createElement("button");
+const startBtn = document.createElement("button");
+const stopBtn = document.createElement("button");
 
-  <script>
-    const chatBox = document.getElementById("chat-box");
-    const messageInput = document.getElementById("message-input");
-    const sendBtn = document.getElementById("send-btn");
-
-    // 🎤 Voice recognition setup
-    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-    const recognition = new SpeechRecognition();
-    recognition.continuous = false;
-    recognition.lang = "en-US";
-
-    document.getElementById("start-btn").onclick = () => {
-      recognition.start();
-    };
-    document.getElementById("stop-btn").onclick = () => {
-      recognition.stop();
-    };
-
-    recognition.onresult = (event) => {
-      const transcript = event.results[0][0].transcript;
-      messageInput.value = transcript;
-      sendMessage();
-    };
-
-    // 💬 Send message function
-    sendBtn.onclick = sendMessage;
-    messageInput.addEventListener("keypress", (e) => {
-      if (e.key === "Enter") sendMessage();
-    });
-
-    async function sendMessage() {
-      const message = messageInput.value.trim();
-      if (!message) return;
-
-      appendMessage("You", message, "text-right text-blue-600");
-      messageInput.value = "";
-
-      try {
-        const res = await fetch("/chat", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            message,
-            name: "User",
-            age: "25"
-          }),
-        });
-        const data = await res.json();
-        appendMessage("Bot", data.response, "text-left text-gray-800");
-
-        changeBackground(data.emotion);
-        speakText(data.response);
-      } catch (err) {
-        appendMessage("Bot", "Oops, something went wrong. Please try again.", "text-red-600");
-        console.error(err);
-      }
-    }
+chatBox.id = "chat-box";
+input.placeholder = "Type your message...";
+sendBtn.textContent = "Send";
+startBtn.textContent = "🎙️ Start Listening";
+stopBtn.textContent = "⏹️ Stop";
 
-    // 🗨️ Append message to chat box
-    function appendMessage(sender, text, style) {
-      const msg = document.createElement("div");
-      msg.className = `p-2 rounded-lg ${style}`;
-      msg.innerHTML = `<strong>${sender}:</strong> ${text}`;
-      chatBox.appendChild(msg);
-      chatBox.scrollTop = chatBox.scrollHeight;
-    }
+document.body.append(chatBox, input, sendBtn, startBtn, stopBtn);
 
-    // 🎨 Background color transitions
-    function changeBackground(emotion) {
-      let gradient = "";
-      switch (emotion.toLowerCase()) {
-        case "joy":
-          gradient = "from-yellow-200 to-yellow-400";
-          break;
-        case "sadness":
-          gradient = "from-blue-200 to-blue-400";
-          break;
-        case "anger":
-          gradient = "from-red-400 to-orange-500";
-          break;
-        case "neutral":
-        case "calm":
-          gradient = "from-green-100 to-green-300";
-          break;
-        case "motivated":
-          gradient = "from-orange-300 to-orange-500";
-          break;
-        default:
-          gradient = "from-gray-100 to-gray-300";
-      }
-      document.body.className = `bg-gradient-to-br ${gradient} min-h-screen flex flex-col items-center justify-center p-4 transition-all`;
-    }
+let recognition;
+let isListening = false;
+let synth = window.speechSynthesis;
+let currentUtterance = null;
 
-    // 🔊 Text-to-speech
-    function speakText(text) {
-      if (!window.speechSynthesis) return;
-      const utter = new SpeechSynthesisUtterance(text);
-      utter.lang = "en-US";
-      utter.pitch = 1;
-      utter.rate = 1;
-      utter.volume = 1;
-      window.speechSynthesis.speak(utter);
-    }
-  </script>
+// ✅ Initialize SpeechRecognition
+if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window) {
+  const SpeechRecognition =
+    window.SpeechRecognition || window.webkitSpeechRecognition;
+  recognition = new SpeechRecognition();
+  recognition.continuous = true;
+  recognition.interimResults = false;
+  recognition.lang = "en-US";
+
+  recognition.onresult = (event) => {
+    const text = event.results[event.results.length - 1][0].transcript.trim();
+    input.value = text;
+    sendMessage();
+  };
+
+  recognition.onerror = (event) => {
+    console.error("Speech recognition error:", event.error);
+  };
+
+  recognition.onend = () => {
+    isListening = false;
+    startBtn.disabled = false;
+  };
+} else {
+  alert("Speech recognition not supported on this browser.");
+}
+
+// ✅ Send message to backend
+async function sendMessage() {
+  const text = input.value.trim();
+  if (!text) return;
+  addMessage("🧑 You", text);
+  input.value = "";
+
+  const res = await fetch("/chat", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ message: text }),
+  });
+
+  const data = await res.json();
+  addMessage("🤖 Bot", data.text);
+  speakText(data.text);
+  updateBackground(data.emotion);
+}
+
+// ✅ Speak bot response
+function speakText(text) {
+  if (synth.speaking) synth.cancel();
+  currentUtterance = new SpeechSynthesisUtterance(text);
+  currentUtterance.lang = "en-US";
+  synth.speak(currentUtterance);
+}
+
+// ✅ Stop everything cleanly
+stopBtn.onclick = () => {
+  if (isListening && recognition) recognition.stop();
+  if (synth.speaking) synth.cancel();
+  isListening = false;
+  startBtn.disabled = false;
+};
+
+// ✅ Start listening
+startBtn.onclick = () => {
+  if (!isListening && recognition) {
+    recognition.start();
+    isListening = true;
+    startBtn.disabled = true;
+  }
+};
+
+// ✅ Chatbox display
+function addMessage(sender, text) {
+  const msg = document.createElement("p");
+  msg.textContent = `${sender}: ${text}`;
+  chatBox.appendChild(msg);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+// ✅ Emotion-based background
+function updateBackground(emotion) {
+  let color;
+  switch (emotion.toLowerCase()) {
+    case "happy":
+      color = "linear-gradient(135deg, #fff176, #ffd54f)";
+      break;
+    case "sad":
+      color = "linear-gradient(135deg, #64b5f6, #1976d2)";
+      break;
+    case "angry":
+      color = "linear-gradient(135deg, #ff7043, #f44336)";
+      break;
+    case "calm":
+      color = "linear-gradient(135deg, #a5d6a7, #66bb6a)";
+      break;
+    case "motivated":
+      color = "linear-gradient(135deg, #ffb74d, #fb8c00)";
+      break;
+    default:
+      color = "linear-gradient(135deg, #e0e0e0, #bdbdbd)";
+  }
+  document.body.style.background = color;
+  document.body.style.transition = "background 1s ease";
+}
+
+sendBtn.onclick = sendMessage;
+</script>
 </body>
 </html>accesskey