Spaces:

Shresthh03
/

Travis-chatbot

Runtime error

App Files Files Community

Shresthh03 commited on about 1 month ago

Commit

c429d8c

verified ·

1 Parent(s): bb82646

Update it.

Browse files

Files changed (1) hide show

index.html +171 -149

index.html CHANGED Viewed

@@ -1,163 +1,185 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Empathy Chatbot 💬</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    body {
-      transition: background 1.5s ease;
     }
-    #chat-box {
-      max-height: 60vh;
-      overflow-y: auto;
-      scroll-behavior: smooth;
     }
   </style>
 </head>
-<body class="bg-gradient-to-br from-green-100 to-green-200 min-h-screen flex flex-col items-center justify-center p-4">
-  <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6 flex flex-col">
-    <h1 class="text-2xl font-bold text-center mb-4 text-gray-700">💛 Emotional Support Assistant</h1>
-    <div id="chat-box" class="flex-1 mb-4 overflow-y-auto space-y-3"></div>
-    <div class="flex gap-2">
-      <input id="message-input" type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring focus:ring-blue-200">
-      <button id="send-btn" class="bg-blue-500 text-white rounded px-4 py-2 hover:bg-blue-600">Send</button>
-    </div>
-    <div class="flex justify-center gap-2 mt-4">
-      <button id="start-btn" class="bg-green-500 text-white px-3 py-2 rounded hover:bg-green-600">🎙️ Start Listening</button>
-      <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");
-chatBox.id = "chat-box";
-input.placeholder = "Type your message...";
-sendBtn.textContent = "Send";
-startBtn.textContent = "🎙️ Start Listening";
-stopBtn.textContent = "⏹️ Stop";
-document.body.append(chatBox, input, sendBtn, startBtn, stopBtn);
-let recognition;
-let isListening = false;
-let synth = window.speechSynthesis;
-let currentUtterance = null;
-// ✅ 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

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>💛 Emotional Support Assistant</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
+    body { transition: background 1s ease; }
+    #mic-indicator {
+      width: 20px; height: 20px; border-radius: 50%;
+      margin-left: 10px; display: inline-block;
+      background-color: gray;
+      box-shadow: 0 0 5px rgba(0,0,0,0.2);
+      transition: background-color 0.3s ease, box-shadow 0.3s ease;
     }
+    .listening {
+      background-color: #22c55e;
+      box-shadow: 0 0 15px #22c55e;
+    }
+    .speaking {
+      animation: pulse 1s infinite;
+    }
+    @keyframes pulse {
+      0% { opacity: 0.3; }
+      50% { opacity: 1; }
+      100% { opacity: 0.3; }
     }
   </style>
 </head>
+<body class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-yellow-100 to-yellow-300 p-4">
+  <h1 class="text-2xl font-bold mb-4 text-center">💛 Emotional Support Assistant</h1>
+  <div id="chat-box" class="w-full max-w-2xl h-96 overflow-y-auto bg-white p-4 rounded shadow mb-4 border"></div>
+  <div class="flex gap-2 w-full max-w-2xl">
+    <input id="user-input" type="text" placeholder="Type your message..."
+           class="flex-1 border p-2 rounded" />
+    <button id="send-btn" class="bg-blue-500 text-white px-4 py-2 rounded">Send</button>
+  </div>
+  <div class="mt-4 flex items-center gap-3">
+    <button id="start-btn" class="bg-green-500 text-white px-4 py-2 rounded">🎙️ Start Listening</button>
+    <button id="stop-btn" class="bg-red-500 text-white px-4 py-2 rounded">⏹️ Stop</button>
+    <div id="mic-indicator" title="Mic status"></div>
+  </div>
+  <div id="speaking-status" class="text-gray-600 mt-3 hidden">
+    🤖 Bot is speaking...
   </div>
+  <script>
+    const chatBox = document.getElementById("chat-box");
+    const userInput = document.getElementById("user-input");
+    const sendBtn = document.getElementById("send-btn");
+    const startBtn = document.getElementById("start-btn");
+    const stopBtn = document.getElementById("stop-btn");
+    const micIndicator = document.getElementById("mic-indicator");
+    const speakingStatus = document.getElementById("speaking-status");
+    let recognition;
+    let isListening = false;
+    let synth = window.speechSynthesis;
+    let currentUtterance = null;
+    // 🎤 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.onstart = () => {
+        micIndicator.classList.add("listening");
+        isListening = true;
+        startBtn.disabled = true;
+      };
+      recognition.onend = () => {
+        micIndicator.classList.remove("listening");
+        isListening = false;
+        startBtn.disabled = false;
+      };
+      recognition.onresult = (event) => {
+        const text = event.results[event.results.length - 1][0].transcript.trim();
+        userInput.value = text;
+        sendMessage();
+      };
+      recognition.onerror = (event) => {
+        console.error("Speech recognition error:", event.error);
+        micIndicator.classList.remove("listening");
+        isListening = false;
+        startBtn.disabled = false;
+      };
+    } else {
+      alert("Speech recognition not supported in this browser. Try using Chrome.");
+    }
+    // 💬 Send user message to Flask backend
+    async function sendMessage() {
+      const text = userInput.value.trim();
+      if (!text) return;
+      addMessage("🧑 You", text);
+      userInput.value = "";
+      try {
+        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);
+      } catch (err) {
+        console.error("Error:", err);
+      }
+    }
+    // 🗣️ Speak text aloud and show animation
+    function speakText(text) {
+      if (synth.speaking) synth.cancel();
+      currentUtterance = new SpeechSynthesisUtterance(text);
+      currentUtterance.lang = "en-US";
+      speakingStatus.classList.remove("hidden");
+      speakingStatus.classList.add("speaking");
+      currentUtterance.onend = () => {
+        speakingStatus.classList.add("hidden");
+        speakingStatus.classList.remove("speaking");
+      };
+      synth.speak(currentUtterance);
+    }
+    // 🧠 Button handlers
+    startBtn.onclick = () => {
+      if (recognition && !isListening) recognition.start();
+    };
+    stopBtn.onclick = () => {
+      if (isListening && recognition) recognition.stop();
+      if (synth.speaking) synth.cancel();
+      isListening = false;
+      micIndicator.classList.remove("listening");
+      speakingStatus.classList.add("hidden");
+      startBtn.disabled = false;
+    };
+    sendBtn.onclick = sendMessage;
+    // 💬 Display messages in chat
+    function addMessage(sender, text) {
+      const bubble = document.createElement("div");
+      bubble.className = sender.includes("Bot")
+        ? "text-left mb-2 bg-yellow-100 p-2 rounded"
+        : "text-right mb-2 bg-blue-100 p-2 rounded";
+      bubble.innerHTML = `<strong>${sender}:</strong> ${text}`;
+      chatBox.appendChild(bubble);
+      chatBox.scrollTop = chatBox.scrollHeight;
+    }
+    // 🎨 Change background smoothly by emotion
+    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;
+    }
+  </script>
 </body>
+</html>