Spaces:

Shresthh03
/

Chatbot-2

Sleeping

App Files Files Community

Shresthh03 commited on 15 days ago

Commit

80e2d73

verified ·

1 Parent(s): bea454b

Update index.html

Browse files

Files changed (1) hide show

index.html +89 -208

index.html CHANGED Viewed

@@ -1,233 +1,114 @@
-<!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>

+<!doctype html>
 <html lang="en">
 <head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Serenity — Chat</title>
 <style>
+  body { font-family: Arial, Helvetica, sans-serif; margin:0; background: linear-gradient(135deg,#e6f0ff,#fff0f6); transition: background .8s; }
+  header{ background:#6c8ef0; color:#fff; padding:12px; text-align:center; font-weight:700; }
+  .wrap{ max-width:900px; margin:20px auto; padding:12px; display:flex; gap:12px; align-items:flex-start; }
+  .left{ width:140px; text-align:center; }
+  .avatar{ width:120px; height:120px; border-radius:50%; margin:8px auto; background: radial-gradient(circle at 30% 30%, #fff,#8fb7ff); animation:breathe 4s ease-in-out infinite; }
+  @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
+  .main{ flex:1; display:flex; flex-direction:column; gap:8px; }
+  .chat{ background:rgba(255,255,255,0.95); padding:12px; border-radius:10px; height:520px; overflow:auto; }
+  .bubble{ max-width:70%; padding:10px 12px; border-radius:12px; margin:8px 0; }
+  .user{ margin-left:auto; background:linear-gradient(135deg,#dff3ff,#bfe6ff); text-align:right; }
+  .bot{ margin-right:auto; background:linear-gradient(135deg,#fff0f6,#ffe6f0); text-align:left; }
+  .controls{ display:flex; gap:8px; align-items:center; margin-top:6px; }
+  input[type=text]{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid #ddd; }
+  button{ padding:10px 12px; border-radius:10px; border:none; cursor:pointer; background:#6c8ef0; color:white; }
+  select{ padding:8px; border-radius:8px; border:1px solid #ccc; }
+  .typing{ font-style:italic; color:#666; }
+  @media(max-width:720px){ .wrap{ flex-direction:column; } .left{ width:100%; } .chat{ height:60vh; } }
 </style>
 </head>
+<body>
+<header>🌸 Serenity — Emotional Support</header>
+<div class="wrap">
+  <div class="left">
     <div class="avatar" id="avatar"></div>
+    <label for="persona">Persona:</label><br/>
+    <select id="persona">
+      <option value="calm">Calm</option>
+      <option value="friendly">Friendly</option>
+      <option value="motivational">Motivational</option>
+      <option value="spiritual">Spiritual</option>
+      <option value="neutral">Neutral</option>
+    </select>
+  </div>
+  <div class="main">
+    <div id="chat" class="chat" role="log" aria-live="polite"></div>
     <div class="controls">
+      <input id="msg" type="text" placeholder="Type your message..." />
+      <button id="send">Send</button>
     </div>
+    <div id="status" class="typing" style="display:none">Serenity is thinking…</div>
   </div>
+</div>
 <script>
+const chatEl = document.getElementById("chat");
+const msgInput = document.getElementById("msg");
+const sendBtn = document.getElementById("send");
+const personaSel = document.getElementById("persona");
+const statusEl = document.getElementById("status");
+const sessionId = localStorage.getItem("serenity_session") || ("sess_" + Math.random().toString(36).slice(2,10));
+localStorage.setItem("serenity_session", sessionId);
+function appendBubble(who, text, meta){
+  const d = document.createElement("div");
+  d.className = "bubble " + (who === "user" ? "user" : "bot");
+  d.innerText = text;
+  if(meta){
+    const m = document.createElement("div"); m.style.fontSize="11px"; m.style.color="#666"; m.style.marginTop="6px";
+    m.innerText = `${meta.emotion || ""} ${meta.voice ? "· voice:"+meta.voice : ""}`;
+    d.appendChild(m);
+  }
+  chatEl.appendChild(d);
+  chatEl.scrollTop = chatEl.scrollHeight;
 }
+async function sendMessage(){
+  const text = msgInput.value.trim();
+  if(!text) return;
+  appendBubble("user", text);
+  msgInput.value = "";
+  statusEl.style.display = "block";
+  try{
     const res = await fetch("/chat", {
+      method:"POST",
+      headers: {"Content-Type":"application/json"},
+      body: JSON.stringify({ session: sessionId, message: text, personality: personaSel.value })
     });
+    const j = await res.json();
+    statusEl.style.display = "none";
+    const reply = j.reply || j.response || j.message || "Sorry, no reply.";
+    appendBubble("bot", reply, { emotion: j.emotion, voice: j.voice });
+    // speak reply using browser TTS (if available)
+    if(window.speechSynthesis && j.voice){
+      const u = new SpeechSynthesisUtterance(reply);
+      // attempt to pick a voice by simple heuristics — browsers differ
+      const voices = window.speechSynthesis.getVoices();
+      // try to pick a female/male based on voice key
+      let chosen = voices.find(v=> v.lang && v.lang.startsWith("en")) || voices[0];
+      if(chosen) u.voice = chosen;
+      u.rate = 1.0; u.pitch = 1.0;
+      window.speechSynthesis.cancel(); window.speechSynthesis.speak(u);
     }
+  }catch(err){
+    statusEl.style.display = "none";
+    appendBubble("bot", "⚠️ Unable to reach server. Check logs.");
   }
 }
 sendBtn.addEventListener("click", sendMessage);
+msgInput.addEventListener("keydown", e=>{ if(e.key==="Enter") sendMessage(); });
+// initial greeting
+appendBubble("bot","💛 Hi — I’m Serenity. How are you feeling today?");
 </script>
 </body>
 </html>