Spaces:

Shresthh03
/

Another-new-chatbot112

Runtime error

App Files Files Community

Shresthh03 commited on Oct 25

Commit

f9e41a1

verified ·

1 Parent(s): b6280c2

Update index.html

Browse files

Files changed (1) hide show

index.html +105 -27

index.html CHANGED Viewed

@@ -45,16 +45,6 @@
   </style>
 </head>
 <body class="text-gray-800 flex flex-col items-center justify-center min-h-screen p-4">
-  <!-- Info Collection Modal -->
-  <div id="infoModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
-      <h2 class="text-xl font-bold mb-4">Welcome! Let's Get Started</h2>
-      <input id="emailInput" type="email" class="w-full p-2 border rounded mb-4" placeholder="Enter your email" required>
-      <button id="submitInfoBtn" class="bg-blue-500 text-white px-4 py-2 rounded w-full">Submit</button>
-      <p id="errorMsg" class="text-red-500 mt-2 hidden"></p>  <!-- Added for error display -->
-    </div>
-  </div>
   <div class="avatar mb-4">
     <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <circle cx="50" cy="50" r="45" fill="#fbbf24" stroke="#f59e0b" stroke-width="5"/>
@@ -101,14 +91,9 @@
     const listenBtn = document.getElementById("listenBtn");
     const stopBtn = document.getElementById("stopBtn");
     const voiceSelect = document.getElementById("voiceSelect");
-    const infoModal = document.getElementById("infoModal");
-    const emailInput = document.getElementById("emailInput");
-    const submitInfoBtn = document.getElementById("submitInfoBtn");
-    const errorMsg = document.getElementById("errorMsg");  // Added for error display
     let recognition;
     let listening = false;
     let currentMode = "emotional_support";
-    let userEmail = null;
     const emotionColors = {
       joy: ["bg-gradient-to-r from-yellow-200 to-yellow-300", "bg-gradient-to-r from-yellow-300 to-orange-200"],
@@ -120,20 +105,113 @@
       neutral: ["bg-gradient-to-r from-gray-200 to-gray-300", "bg-gradient-to-r from-gray-300 to-slate-200"]
     };
-    // Collect user info on load with error handling
-    submitInfoBtn.addEventListener("click", async () => {
-      const email = emailInput.value.trim();
-      errorMsg.classList.add("hidden");  // Hide previous errors
-      if (!email || !email.includes("@")) {
-        errorMsg.textContent = "Please enter a valid email.";
-        errorMsg.classList.remove("hidden");
-        return;
       }
       try {
-        const response = await fetch("/collect_info", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ email })
         });
-        const result = await response.json();
-        if (response.ok && result.status === "success

   </style>
 </head>
 <body class="text-gray-800 flex flex-col items-center justify-center min-h-screen p-4">
   <div class="avatar mb-4">
     <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <circle cx="50" cy="50" r="45" fill="#fbbf24" stroke="#f59e0b" stroke-width="5"/>
     const listenBtn = document.getElementById("listenBtn");
     const stopBtn = document.getElementById("stopBtn");
     const voiceSelect = document.getElementById("voiceSelect");
     let recognition;
     let listening = false;
     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"],
       neutral: ["bg-gradient-to-r from-gray-200 to-gray-300", "bg-gradient-to-r from-gray-300 to-slate-200"]
     };
+    // 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(":", ""),
+        text: div.textContent.split(": ")[1]
+      }));
+      localStorage.setItem("chatHistory", JSON.stringify(messages));
+    }
+    async function sendMessage(voiceConfirmed = false) {
+      const message = messageInput.value.trim();
+      if (!message) return;
+      if (!voiceConfirmed && recognition) {
+        if (!confirm("Send this voice message?")) return;
       }
+      appendMessage("You", message);
+      messageInput.value = "";
+      showLoading(true);
       try {
+        const res = await fetch("/chat", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message, mode: currentMode, voice_tone: voiceSelect.value }),
         });
+        const data = await res.json();
+        appendMessage("Assistant", data.reply);
+        updateBackground(data.emotion);
+        speak(data.reply);
+        saveHistory();
+      } catch (error) {
+        appendMessage("Assistant", "Oops, something went wrong. Please try again.");
+      } finally {
+        showLoading(false);
+      }
+    }
+    function appendMessage(sender, text, save = true) {
+      const div = document.createElement("div");
+      div.className = `message ${sender === "You" ? "text-right mb-2" : "text-left mb-2"}`;
+      div.innerHTML = `<strong>${sender}:</strong> ${text}`;
+      chatBox.appendChild(div);
+      chatBox.scrollTop = chatBox.scrollHeight;
+      if (save) saveHistory();
+    }
+    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}`;
+    }
+    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
+        utterance.voice = selectedVoice;
+        utterance.rate = 0.8; // Calm pace
+        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.");
+        return;
+      }
+      recognition = new webkitSpeechRecognition();
+      recognition.continuous = false;
+      recognition.interimResults = false;
+      recognition.lang = "en-US";
+      recognition.onstart = () => {
+        listening = true;
+        listenBtn.disabled = true;
+        stopBtn.disabled = false;
+        appendMessage("System", "Listening...");
+      };
+      recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript;
+        appendMessage("You (voice)", transcript);
+        messageInput.value = transcript;
+        sendMessage(true);  // Auto-send with confirmation
+      };
+      recognition.onend = () => {
+        listening = false;
+        listenBtn.disabled = false;
+        stopBtn.disabled = true;
+      };
+      recognition.start();
+    }
+    function stop