Spaces:

Shresthh03
/

Chatbot-2

Sleeping

App Files Files Community

Shresthh03 commited on 23 days ago

Commit

c097254

verified ·

1 Parent(s): d89e7d9

Update it all and make it functional.

Browse files

Files changed (1) hide show

index.html +217 -195

index.html CHANGED Viewed

@@ -1,211 +1,233 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>🌸 Serenity - Emotional Support Chatbot</title>
-  <style>
-    body {
-      font-family: "Poppins", sans-serif;
-      background: linear-gradient(135deg, #d7efff, #f9e7fe);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100vh;
-      margin: 0;
-      transition: background 1s ease-in-out;
-      animation: gradientShift 12s infinite alternate;
-    }
-    @keyframes gradientShift {
-      0% { background: linear-gradient(135deg, #d7efff, #f9e7fe); }
-      50% { background: linear-gradient(135deg, #e3ffe7, #d9e7ff); }
-      100% { background: linear-gradient(135deg, #f9e7fe, #ffe8d6); }
-    }
-    h1 {
-      text-align: center;
-      font-size: 2rem;
-      color: #333;
-      margin-bottom: 10px;
-    }
-    .chat-container {
-      width: 90%;
-      max-width: 480px;
-      background: white;
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-      border-radius: 16px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      height: 70vh;
-      position: relative;
-    }
-    .avatar {
-      width: 70px;
-      height: 70px;
-      border-radius: 50%;
-      background: radial-gradient(circle at 30% 30%, #a8cfff, #6a7bff);
-      margin: 15px auto;
-      animation: breathe 5s ease-in-out infinite;
-    }
-    @keyframes breathe {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(1.05); }
-    }
-    #chat-box {
-      flex-grow: 1;
-      padding: 15px;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-    }
-    .user-msg, .bot-msg {
-      margin: 8px 0;
-      padding: 12px 14px;
-      border-radius: 16px;
-      max-width: 80%;
-      line-height: 1.4;
-      word-wrap: break-word;
-      font-size: 0.95rem;
-    }
-    .user-msg {
-      background: #dceefb;
-      align-self: flex-end;
-      border-bottom-right-radius: 2px;
-    }
-    .bot-msg {
-      background: #f1f0ff;
-      align-self: flex-start;
-      border-bottom-left-radius: 2px;
-    }
-    .controls {
-      display: flex;
-      padding: 10px;
-      background: #fff;
-      border-top: 1px solid #eee;
-      align-items: center;
-    }
-    input {
-      flex-grow: 1;
-      padding: 10px;
-      border: none;
-      outline: none;
-      border-radius: 10px;
-      background: #f5f5f5;
-      margin-right: 10px;
-      font-size: 0.95rem;
-    }
-    button {
-      background: #8b6ef7;
-      color: white;
-      border: none;
-      padding: 10px 16px;
-      border-radius: 10px;
-      cursor: pointer;
-      transition: 0.3s;
-    }
-    button:hover {
-      background: #755eea;
-    }
-    .typing {
-      font-size: 0.8rem;
-      color: #777;
-      padding: 6px 15px;
-    }
-    select {
-      border: none;
-      background: #f5f5f5;
-      padding: 6px 8px;
-      border-radius: 8px;
-      font-size: 0.9rem;
-      margin-right: 8px;
-    }
-  </style>
 </head>
-<body>
-  <h1>🌸 Serenity - Your Calm Companion</h1>
   <div class="chat-container">
     <div class="avatar" id="avatar"></div>
-    <div id="chat-box"></div>
-    <div id="typing" class="typing" style="display: none;">Serenity is thinking...</div>
-    <div class="controls">
       <select id="personality">
-        <option value="calm">🌿 Calm</option>
-        <option value="gentle">🌸 Gentle</option>
-        <option value="deep">🌊 Deep</option>
-        <option value="friendly">☀️ Friendly</option>
-        <option value="soothing">💫 Soothing</option>
       </select>
-      <input type="text" id="user-input" placeholder="Type something..." />
-      <button onclick="sendMessage()">Send</button>
     </div>
-  </div>
-  <script>
-    const chatBox = document.getElementById("chat-box");
-    const typingIndicator = document.getElementById("typing");
-    const personalitySelector = document.getElementById("personality");
-    function appendMessage(sender, text) {
-      const msg = document.createElement("div");
-      msg.className = sender === "user" ? "user-msg" : "bot-msg";
-      msg.textContent = text;
-      chatBox.appendChild(msg);
-      chatBox.scrollTop = chatBox.scrollHeight;
-    }
-    async function sendMessage() {
-      const input = document.getElementById("user-input");
-      const message = input.value.trim();
-      const personality = personalitySelector.value;
-      if (!message) return;
-      appendMessage("user", message);
-      input.value = "";
-      typingIndicator.style.display = "block";
-      try {
-        const res = await fetch("/chat", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ message, personality }),
-        });
-        const data = await res.json();
-        typingIndicator.style.display = "none";
-        appendMessage("bot", data.reply || "Hmm... I'm not sure what to say just yet 💭");
-      } catch (err) {
-        typingIndicator.style.display = "none";
-        appendMessage("bot", "⚠️ Oops, something went wrong. Please try again later.");
-      }
-    }
-    document.getElementById("user-input").addEventListener("keydown", (e) => {
-      if (e.key === "Enter") sendMessage();
     });
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>🌸 Serenity Emotional Support Chatbot</title>
+<style>
+  body {
+    font-family: "Poppins", sans-serif;
+    background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
+    transition: background 3s ease;
+    height: 100vh;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  @keyframes colorShift {
+    0% { background: linear-gradient(120deg, #a1c4fd, #c2e9fb); }
+    25% { background: linear-gradient(120deg, #fbc2eb, #a6c1ee); }
+    50% { background: linear-gradient(120deg, #ffecd2, #fcb69f); }
+    75% { background: linear-gradient(120deg, #d4fc79, #96e6a1); }
+    100% { background: linear-gradient(120deg, #a1c4fd, #c2e9fb); }
+  }
+  body.animated {
+    animation: colorShift 20s infinite alternate ease-in-out;
+  }
+  .chat-container {
+    width: 95%;
+    max-width: 600px;
+    background: rgba(255,255,255,0.85);
+    border-radius: 20px;
+    padding: 20px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 80vh;
+  }
+  .avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    margin: 10px auto;
+    background: radial-gradient(circle at 30% 30%, #ffd6e0, #c6d8ff);
+    animation: breathe 4s ease-in-out infinite;
+  }
+  @keyframes breathe {
+    0%, 100% { transform: scale(1); opacity: 0.9; }
+    50% { transform: scale(1.05); opacity: 1; }
+  }
+  .chat-box {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+  }
+  .message {
+    margin: 8px 0;
+    padding: 10px 14px;
+    border-radius: 12px;
+    max-width: 75%;
+  }
+  .user {
+    align-self: flex-end;
+    background: #a1c4fd;
+    color: #fff;
+  }
+  .bot {
+    align-self: flex-start;
+    background: #f0f0f0;
+    color: #333;
+  }
+  .controls {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+  }
+  input {
+    flex: 1;
+    padding: 10px;
+    border-radius: 10px;
+    border: none;
+    font-size: 1em;
+    outline: none;
+  }
+  button {
+    background: #a1c4fd;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: 10px 16px;
+    cursor: pointer;
+    transition: background 0.3s;
+  }
+  button:hover {
+    background: #7ea6f5;
+  }
+  select {
+    border-radius: 10px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    font-size: 0.9em;
+  }
+  .typing {
+    font-style: italic;
+    color: #555;
+    margin-top: 4px;
+  }
+</style>
 </head>
+<body class="animated">
   <div class="chat-container">
     <div class="avatar" id="avatar"></div>
+    <h2 style="text-align:center;">🌸 Serenity Emotional Support Chatbot</h2>
+    <div style="text-align:center; margin-bottom:10px;">
+      <label for="personality">🧠 Personality:</label>
       <select id="personality">
+        <option value="serene">Serene (Calm & Supportive)</option>
+        <option value="deep_male">Atlas (Deep Male)</option>
+        <option value="gentle_female">Luna (Gentle Female)</option>
+        <option value="neutral">Ari (Neutral Friendly)</option>
       </select>
+      <button id="toggleVoice">🔈 Voice: ON</button>
     </div>
+    <div class="chat-box" id="chatBox"></div>
+    <div class="controls">
+      <input type="text" id="userInput" placeholder="Type your message..." />
+      <button id="sendBtn">Send</button>
+    </div>
+  </div>
+<script>
+const chatBox = document.getElementById("chatBox");
+const userInput = document.getElementById("userInput");
+const sendBtn = document.getElementById("sendBtn");
+const personalitySelect = document.getElementById("personality");
+const toggleVoiceBtn = document.getElementById("toggleVoice");
+let voiceEnabled = true;
+let userId = "user_" + Math.floor(Math.random() * 99999);
+// 💬 Add message to chat
+function addMessage(sender, text) {
+  const msg = document.createElement("div");
+  msg.className = "message " + sender;
+  msg.textContent = text;
+  chatBox.appendChild(msg);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+// 🎤 Speak response
+function speakText(text, voiceName = "Google UK English Female") {
+  if (!voiceEnabled) return;
+  const utter = new SpeechSynthesisUtterance(text);
+  utter.voice = speechSynthesis.getVoices().find(v => v.name.includes(voiceName)) || null;
+  utter.rate = 1;
+  utter.pitch = 1;
+  speechSynthesis.speak(utter);
+}
+// 🧠 Send message to backend
+async function sendMessage() {
+  const text = userInput.value.trim();
+  if (!text) return;
+  addMessage("user", text);
+  userInput.value = "";
+  const typing = document.createElement("div");
+  typing.className = "typing";
+  typing.textContent = "Serenity is typing...";
+  chatBox.appendChild(typing);
+  chatBox.scrollTop = chatBox.scrollHeight;
+  try {
+    const res = await fetch("/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        user_id: userId,
+        message: text,
+        personality: personalitySelect.value
+      }),
     });
+    const data = await res.json();
+    typing.remove();
+    if (data.reply) {
+      addMessage("bot", data.reply);
+      speakText(data.reply);
+    } else {
+      addMessage("bot", "Hmm, something went wrong 😔");
+    }
+  } catch (err) {
+    typing.remove();
+    addMessage("bot", "⚠️ Unable to connect to the server.");
+  }
+}
+// Event listeners
+sendBtn.addEventListener("click", sendMessage);
+userInput.addEventListener("keypress", (e) => {
+  if (e.key === "Enter") sendMessage();
+});
+toggleVoiceBtn.addEventListener("click", () => {
+  voiceEnabled = !voiceEnabled;
+  toggleVoiceBtn.textContent = voiceEnabled ? "🔈 Voice: ON" : "🔇 Voice: OFF";
+});
+// Initialize with greeting
+addMessage("bot", "Hey there 🌼 I'm Serenity — your emotional support companion. How are you feeling today?");
+</script>
 </body>
 </html>