Spaces:

Shresthh03
/

Chatbot-2

Sleeping

App Files Files Community

Shresthh03 commited on 24 days ago

Commit

3650e12

verified ·

1 Parent(s): fc37241

Update it.

Browse files

Files changed (1) hide show

index.html +191 -276

index.html CHANGED Viewed

@@ -1,294 +1,209 @@
 <!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 Companion</title>
-  <style>
-    :root {
-      --bg: #f5f7fc;
-      --user-bubble: #e2e6ff;
-      --bot-bubble: #ffffff;
-      --accent: #5b6ef5;
-      --bot-shadow: rgba(91, 110, 245, 0.25);
-    }
-    body {
-      background: var(--bg);
-      font-family: "Inter", sans-serif;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      color: #222;
-      transition: background 1s ease;
-    }
-    header {
-      background: var(--accent);
-      color: #fff;
-      text-align: center;
-      padding: 1rem;
-      font-size: 1.4rem;
-      font-weight: 600;
-      letter-spacing: 0.4px;
-      box-shadow: 0 2px 5px var(--bot-shadow);
-      transition: background 0.5s ease;
-    }
-    #controls {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0.5rem 1rem;
-      background: #f0f2ff;
-      border-bottom: 1px solid #ddd;
-      font-size: 0.9rem;
-    }
-    select {
-      border: 1px solid #ccc;
-      border-radius: 8px;
-      padding: 0.3rem 0.6rem;
-      background: white;
-    }
-    button {
-      background: var(--accent);
-      color: #fff;
-      border: none;
-      padding: 0.6rem 1rem;
-      border-radius: 8px;
-      cursor: pointer;
-      transition: background 0.3s;
-    }
-    button:hover {
-      opacity: 0.9;
-    }
-    #chat-container {
-      flex: 1;
-      overflow-y: auto;
-      padding: 1rem;
-      display: flex;
-      flex-direction: column;
-      scroll-behavior: smooth;
-    }
-    .message {
-      margin: 0.6rem 0;
-      max-width: 75%;
-      padding: 0.7rem 1rem;
-      border-radius: 14px;
-      line-height: 1.5;
-      animation: fadeIn 0.35s ease;
-      word-wrap: break-word;
-      position: relative;
-    }
-    .user {
-      align-self: flex-end;
-      background: var(--user-bubble);
-      border-bottom-right-radius: 4px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-    }
-    .bot {
-      align-self: flex-start;
-      background: var(--bot-bubble);
-      border-bottom-left-radius: 4px;
-      box-shadow: 0 3px 6px var(--bot-shadow);
-    }
-    .meta {
-      font-size: 0.7rem;
-      color: #777;
-      margin-top: 0.2rem;
-      text-align: right;
-    }
-    #input-container {
-      display: flex;
-      padding: 0.7rem;
-      background: #fff;
-      border-top: 1px solid #ddd;
-    }
-    #user-input {
-      flex: 1;
-      border: 1px solid #ccc;
-      border-radius: 10px;
-      padding: 0.6rem 0.8rem;
-      font-size: 1rem;
-    }
-    /* Avatar */
-    #avatar {
-      width: 70px;
-      height: 70px;
-      border-radius: 50%;
-      margin: 0.8rem auto 0.5rem;
-      background: radial-gradient(circle at 30% 30%, #cdd4ff, #5b6ef5);
-      box-shadow: 0 0 15px var(--bot-shadow);
-      animation: breathe 4s ease-in-out infinite;
-    }
-    @keyframes breathe {
-      0%, 100% { transform: scale(1); opacity: 0.9; }
-      50% { transform: scale(1.07); opacity: 1; }
-    }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(6px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-  </style>
 </head>
 <body>
-  <header>🪷 Serenity – Your Emotional Support Companion</header>
-  <div id="controls">
-    <div>
-      <label for="voice-profile">Personality: </label>
-      <select id="voice-profile">
         <option value="neutral">Neutral</option>
-        <option value="calm_male">Calm Male</option>
-        <option value="deep_male">Deep Male</option>
-        <option value="soothing_male">Soothing Male</option>
-        <option value="gentle_female">Gentle Female</option>
-        <option value="feminine_female">Feminine Female</option>
-        <option value="deep_female">Deep Female</option>
-        <option value="soothing_female">Soothing Female</option>
       </select>
     </div>
-    <button id="reset">Reset Chat</button>
   </div>
-  <div id="avatar"></div>
-  <div id="chat-container"></div>
-  <div id="input-container">
-    <input id="user-input" type="text" placeholder="Type your message..." />
-    <button id="send">Send</button>
   </div>
-  <script>
-    const chatContainer = document.getElementById("chat-container");
-    const input = document.getElementById("user-input");
-    const sendBtn = document.getElementById("send");
-    const voiceSelect = document.getElementById("voice-profile");
-    const resetBtn = document.getElementById("reset");
-    const avatar = document.getElementById("avatar");
-    const header = document.querySelector("header");
-    let session = localStorage.getItem("session_id");
-    if (!session) {
-      session = "sess_" + Math.random().toString(36).substring(2, 10);
-      localStorage.setItem("session_id", session);
-    }
-    // Color palette per personality
-    const themes = {
-      neutral: ["#f5f7fc", "#5b6ef5", "rgba(91,110,245,0.25)"],
-      calm_male: ["#eaf7ff", "#4b84e6", "rgba(75,132,230,0.25)"],
-      deep_male: ["#f5f5f5", "#2a3b8e", "rgba(42,59,142,0.25)"],
-      soothing_male: ["#f3f8ff", "#5aa4c8", "rgba(90,164,200,0.25)"],
-      gentle_female: ["#fff6f8", "#f27ba3", "rgba(242,123,163,0.25)"],
-      feminine_female: ["#fef5fc", "#d35dc4", "rgba(211,93,196,0.25)"],
-      deep_female: ["#faf4ff", "#8b5fc7", "rgba(139,95,199,0.25)"],
-      soothing_female: ["#f4fbfa", "#4db6ac", "rgba(77,182,172,0.25)"],
     };
-    function applyTheme(personality) {
-      const [bg, accent, shadow] = themes[personality] || themes["neutral"];
-      document.documentElement.style.setProperty("--bg", bg);
-      document.documentElement.style.setProperty("--accent", accent);
-      document.documentElement.style.setProperty("--bot-shadow", shadow);
-      avatar.style.background = `radial-gradient(circle at 30% 30%, #fff, ${accent})`;
-      header.style.background = accent;
-    }
-    voiceSelect.addEventListener("change", () => {
-      applyTheme(voiceSelect.value);
-    });
-    async function appendMessage(sender, text, emotion, intent) {
-      const div = document.createElement("div");
-      div.classList.add("message", sender);
-      div.textContent = text;
-      chatContainer.appendChild(div);
-      if (emotion || intent) {
-        const meta = document.createElement("div");
-        meta.classList.add("meta");
-        meta.textContent = `(${intent || "..."}, ${emotion || "..."})`;
-        div.appendChild(meta);
-      }
-      chatContainer.scrollTop = chatContainer.scrollHeight;
-    }
-    async function sendMessage() {
-      const text = input.value.trim();
-      if (!text) return;
-      appendMessage("user", text);
-      input.value = "";
-      avatar.style.animation = "breathe 2s infinite ease-in-out";
-      const body = {
-        session: session,
-        message: text,
-        personality: voiceSelect.value
-      };
-      try {
-        const res = await fetch("/chat", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(body)
-        });
-        const data = await res.json();
-        appendMessage("bot", data.reply, data.emotion, data.intent);
-      } catch (err) {
-        appendMessage("bot", "Sorry, I had trouble connecting. Please try again.");
-      } finally {
-        avatar.style.animation = "breathe 4s infinite ease-in-out";
-      }
-    }
-    async function initChat() {
       const res = await fetch("/chat", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ session, init: true, personality: voiceSelect.value })
       });
-      const data = await res.json();
-      appendMessage("bot", data.reply, data.emotion, data.intent);
-    }
-    async function resetChat() {
-      await fetch("/reset_session", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ session })
       });
-      localStorage.removeItem("session_id");
-      session = "sess_" + Math.random().toString(36).substring(2, 10);
-      localStorage.setItem("session_id", session);
-      chatContainer.innerHTML = "";
-      appendMessage("bot", "🔄 Chat reset. Let's start fresh!");
-      initChat();
-    }
-    sendBtn.addEventListener("click", sendMessage);
-    input.addEventListener("keypress", (e) => {
-      if (e.key === "Enter") sendMessage();
-    });
-    resetBtn.addEventListener("click", resetChat);
-    // Initialize
-    applyTheme(voiceSelect.value);
-    initChat();
-  </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 — Emotional Support</title>
+<style>
+  :root {
+    --accent: #5b6ef5;
+    --bg: linear-gradient(135deg,#eef6ff,#fff6f8);
+  }
+  body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue"; background:var(--bg); transition:background 1s;}
+  header{ background:var(--accent); color:white; padding:14px; text-align:center; font-weight:700; box-shadow:0 4px 18px rgba(20,20,60,0.08);}
+  .container{ max-width:960px; margin:18px auto; padding:18px; display:flex; gap:18px; align-items:flex-start; justify-content:center;}
+  .left{ width:220px; display:flex; flex-direction:column; align-items:center; gap:12px;}
+  .avatar{ width:140px; height:140px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #fff, #7fb3ff); box-shadow: 0 10px 30px rgba(80,110,255,0.12); animation:breathe 4s ease-in-out infinite;}
+  @keyframes breathe{0%,100%{transform:scale(1);opacity:0.9}50%{transform:scale(1.08);opacity:1}}
+  .controls{ display:flex; flex-direction:column; gap:8px; align-items:center;}
+  .select,button,input{ padding:8px 10px; border-radius:10px; border:1px solid rgba(10,10,30,0.06); }
+  .main{ flex:1; display:flex; flex-direction:column; gap:10px;}
+  .chat{ height:520px; background:rgba(255,255,255,0.9); border-radius:12px; padding:18px; overflow:auto; box-shadow: 0 8px 30px rgba(10,20,40,0.06);}
+  .bubble{ max-width:72%; padding:12px 14px; border-radius:14px; margin:10px 0; line-height:1.35;}
+  .bubble.user{ margin-left:auto; background:linear-gradient(135deg,#e6f0ff,#d7e9ff); text-align:right;}
+  .bubble.bot{ margin-right:auto; background:linear-gradient(135deg,#fff7f9,#fff1f7); text-align:left;}
+  .typing{ font-style:italic; color:#64748b; margin-bottom:6px;}
+  .inputRow{ display:flex; gap:8px; align-items:center;}
+  .inputRow input{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(10,10,30,0.06);}
+  .inputRow button{ padding:10px 14px; border-radius:10px; border:none; cursor:pointer; background:var(--accent); color:white;}
+  @media(max-width:900px){ .container{ flex-direction:column; padding:10px;} .avatar{ width:90px; height:90px;} .chat{ height:360px; } }
+</style>
 </head>
 <body>
+<header>🌷 Serenity — Your Emotional Support Companion</header>
+<div class="container">
+  <div class="left">
+    <div id="orb" class="avatar" aria-hidden="true"></div>
+    <div class="controls">
+      <label>Personality</label>
+      <select id="personality" class="select">
+        <option value="calm">Calm</option>
+        <option value="friendly">Friendly</option>
+        <option value="deep">Deep</option>
+        <option value="spiritual">Spiritual</option>
         <option value="neutral">Neutral</option>
       </select>
+      <button id="switchAvatar" class="select">Switch Avatar</button>
+      <button id="resetBtn" class="select">Reset Chat</button>
     </div>
   </div>
+  <div class="main">
+    <div id="chat" class="chat" role="log" aria-live="polite"></div>
+    <div id="typing" class="typing" style="display:none">Serenity is thinking…</div>
+    <div class="inputRow">
+      <input id="input" placeholder="Type your message..." />
+      <button id="sendBtn">Send</button>
+    </div>
   </div>
+</div>
+<script>
+  // Session
+  let session = localStorage.getItem("serenity_session");
+  if(!session){ session = "s_" + Math.random().toString(36).slice(2,12); localStorage.setItem("serenity_session", session); }
+  const chat = document.getElementById("chat");
+  const input = document.getElementById("input");
+  const sendBtn = document.getElementById("sendBtn");
+  const personalitySelect = document.getElementById("personality");
+  const typing = document.getElementById("typing");
+  const orb = document.getElementById("orb");
+  const resetBtn = document.getElementById("resetBtn");
+  const switchAvatar = document.getElementById("switchAvatar");
+  let orbStyle = 0; // 0 = orb, 1 = humanoid (not implemented large differences here)
+  // Append bubble helpers
+  function appendBubble(who, text, meta){
+    const d = document.createElement("div");
+    d.className = "bubble " + (who === "user" ? "user" : "bot");
+    d.innerHTML = `<strong>${who === "user" ? "You" : "Serenity"}:</strong> ${text}`;
+    if(meta){
+      const m = document.createElement("div");
+      m.style.fontSize = "12px"; m.style.color="#6b7280"; m.style.marginTop="6px";
+      m.textContent = `(${meta.intent || "..."}, ${meta.emotion || "..."})`;
+      d.appendChild(m);
+    }
+    chat.appendChild(d);
+    chat.scrollTop = chat.scrollHeight;
+  }
+  function showTyping(){ typing.style.display = "block"; orb.style.transform = "scale(1.06)"; }
+  function hideTyping(){ typing.style.display = "none"; orb.style.transform = ""; }
+  // speech synthesis (browser)
+  function speak(text){
+    if(!("speechSynthesis" in window)) return;
+    const utter = new SpeechSynthesisUtterance(text);
+    // simple mapping: choose a voice by matching label; fallback to first
+    const voices = speechSynthesis.getVoices();
+    const persona = personalitySelect.value || "neutral";
+    // heuristics to pick a voice
+    let chosen = null;
+    if(persona === "calm") chosen = voices.find(v=>/male|man|david|john|alex/i.test(v.name));
+    if(persona === "friendly") chosen = voices.find(v=>/female|zira|susan|sarah|victoria/i.test(v.name));
+    if(!chosen) chosen = voices.find(v=>v.lang && v.lang.startsWith("en")) || voices[0];
+    if(chosen) utter.voice = chosen;
+    // tune pitch & rate by persona
+    const map = {
+      calm: {pitch:0.85, rate:0.95},
+      friendly: {pitch:1.15, rate:1.0},
+      deep: {pitch:0.75, rate:0.9},
+      spiritual: {pitch:1.0, rate:0.95},
+      neutral: {pitch:1.0, rate:1.0}
     };
+    const cfg = map[persona] || map["neutral"];
+    utter.pitch = cfg.pitch; utter.rate = cfg.rate;
+    window.speechSynthesis.cancel();
+    window.speechSynthesis.speak(utter);
+    // show slight breathing while speaking
+    orb.style.animationDuration = "2s";
+    utter.onend = ()=> { orb.style.animationDuration = "4s"; }
+  }
+  // send to backend
+  async function sendText(msg){
+    if(!msg) return;
+    appendBubble("user", msg);
+    input.value = "";
+    showTyping();
+    try{
       const res = await fetch("/chat", {
         method: "POST",
+        headers: {"Content-Type":"application/json"},
+        body: JSON.stringify({ session, message: msg, personality: personalitySelect.value })
       });
+      const j = await res.json();
+      hideTyping();
+      const reply = j.reply || j.response || j.message || j.text || j.reply_text || j.reply;
+      const emotion = j.emotion || j.intent || "neutral";
+      const intent = j.intent || "unknown";
+      // fallback keys compatibility
+      const payloadText = reply || (j.response || "");
+      appendBubble("bot", payloadText, { emotion: j.emotion, intent: j.intent });
+      // speak via browser TTS
+      speak(payloadText);
+      // soft background by emotion
+      const mapBg = {
+        joy: "linear-gradient(135deg,#fff9c4,#ffecb3)",
+        sadness: "linear-gradient(135deg,#a7c7e7,#d4f1f4)",
+        anger: "linear-gradient(135deg,#ffb3b3,#ff6666)",
+        love: "linear-gradient(135deg,#ffc1cc,#ffb6c1)",
+        fear: "linear-gradient(135deg,#c8d8e4,#a7bed3)",
+        crisis: "linear-gradient(135deg,#ffe6e6,#fff1f0)",
+        neutral: "linear-gradient(135deg,#eef6ff,#fff6f8)"
+      };
+      document.body.style.background = mapBg[(j.emotion || "neutral")] || mapBg["neutral"];
+    }catch(e){
+      hideTyping();
+      appendBubble("bot", "Sorry — I couldn't connect right now. Please try again.");
+    }
+  }
+  // UI events
+  sendBtn.addEventListener("click", ()=> sendText(input.value.trim()));
+  input.addEventListener("keydown", (e)=>{ if(e.key === "Enter") sendText(input.value.trim()); });
+  personalitySelect.addEventListener("change", ()=> {
+    // slight theme shift on persona change
+    const p = personalitySelect.value;
+    if(p === "calm") orb.style.background = "radial-gradient(circle, #fff, #7fb3ff)";
+    if(p === "friendly") orb.style.background = "radial-gradient(circle, #fff, #f7a6c2)";
+    if(p === "deep") orb.style.background = "radial-gradient(circle, #fff, #9fa8da)";
+    if(p === "spiritual") orb.style.background = "radial-gradient(circle, #fff, #a3e9c4)";
+  });
+  resetBtn.addEventListener("click", async ()=>{
+    chat.innerHTML = "";
+    await fetch("/reset_session", {method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify({session})}).catch(()=>{});
+    appendBubble("bot", "🔄 Chat reset. I’m here. How are you feeling today?");
+  });
+  switchAvatar.addEventListener("click", ()=>{
+    orbStyle = 1 - orbStyle;
+    if(orbStyle === 0){ orb.style.borderRadius = "50%"; orb.style.width = "140px"; orb.style.height = "140px"; }
+    else { orb.style.borderRadius = "18px"; orb.style.width = "120px"; orb.style.height = "160px"; }
+  });
+  // initial greeting (init)
+  (async function init(){
+    try{
+      const res = await fetch("/chat", {
+        method:"POST",
+        headers: {"Content-Type":"application/json"},
+        body: JSON.stringify({session, init:true})
       });
+      const j = await res.json();
+      const initial = j.reply || j.response || "Hey — I'm Serenity. What's your name?";
+      appendBubble("bot", initial, {emotion:j.emotion, intent:j.intent});
+      // speak welcome
+      speak(initial);
+    }catch(e){
+      appendBubble("bot", "Hey — I’m Serenity. How are you feeling today?");
+    }
+  })();
+</script>
 </body>
+  </html>