Spaces:

Shresthh03
/

Chatbot-2

Sleeping

App Files Files Community

Shresthh03 commited on Oct 22

Commit

cc3ff6c

verified ·

1 Parent(s): 536604a

Update it all.

Browse files

Files changed (1) hide show

index.html +276 -129

index.html CHANGED Viewed

@@ -1,160 +1,307 @@
 <!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 3s ease-in-out;
-  background: linear-gradient(135deg, #cce6ff, #fef6ff);
-}
-.chat-container {
-  max-width: 500px;
-  margin: 50px auto;
-  background: rgba(255,255,255,0.25);
-  backdrop-filter: blur(12px);
-  border-radius: 20px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-  padding: 20px;
-}
-.avatar {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  margin: auto;
-  animation: breathe 4s ease-in-out infinite;
-  background: radial-gradient(circle at center, #a0c4ff, #4361ee);
-}
-@keyframes breathe {
-  0%, 100% { transform: scale(1); opacity: 0.9; }
-  50% { transform: scale(1.1); opacity: 1; }
-}
-.humanoid {
-  width: 100px; height: 100px;
-  border-radius: 50%;
-  background: radial-gradient(circle at 50% 30%, #f8f9fa 20%, #4361ee 80%);
-  animation: breathe 5s infinite ease-in-out;
-}
-.hidden { display: none; }
 </style>
 </head>
-<body class="flex flex-col items-center justify-center h-screen">
-<div class="chat-container text-center">
-  <div id="orb" class="avatar"></div>
-  <div id="humanoid" class="humanoid hidden"></div>
-  <button id="switchAvatar" class="text-sm mt-2 underline text-blue-700">Switch Style</button>
-  <div id="chat" class="h-80 overflow-y-auto text-left p-3 text-gray-800"></div>
-  <input id="userInput" class="w-full mt-4 p-2 rounded-md border" placeholder="Type your message..." />
-  <div class="mt-3 flex justify-around">
-    <button id="sendBtn" class="bg-blue-500 text-white px-4 py-2 rounded-md">Send</button>
-    <button id="startBtn" class="bg-green-500 text-white px-4 py-2 rounded-md">🎙️ Start</button>
-    <button id="stopBtn" class="bg-red-500 text-white px-4 py-2 rounded-md">⏹️ Stop</button>
   </div>
-  <select id="voiceSelect" class="mt-3 w-full rounded-md p-2 border"></select>
 </div>
 <script>
-let recognizing = false;
-let recognition;
-let voices = [];
-let selectedVoice;
-const synth = window.speechSynthesis;
-function populateVoices() {
-  voices = synth.getVoices();
-  const voiceSelect = document.getElementById("voiceSelect");
-  voiceSelect.innerHTML = voices.map(v => `<option>${v.name}</option>`).join("");
-  voiceSelect.onchange = () => {
-    selectedVoice = voices.find(v => v.name === voiceSelect.value);
-  };
 }
-populateVoices();
-if (speechSynthesis.onvoiceschanged !== undefined) {
-  speechSynthesis.onvoiceschanged = populateVoices;
 }
-document.getElementById("switchAvatar").onclick = () => {
-  document.getElementById("orb").classList.toggle("hidden");
-  document.getElementById("humanoid").classList.toggle("hidden");
-};
-function changeBackground(emotion) {
-  const map = {
-    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,#444,#ff5555)"
-  };
-  document.body.style.background = map[emotion] || "linear-gradient(135deg,#cce6ff,#fef6ff)";
 }
-function appendMessage(sender, text) {
-  const chat = document.getElementById("chat");
-  const msg = document.createElement("div");
-  msg.className = sender === "user" ? "text-right mb-2" : "text-left mb-2";
-  msg.innerHTML = `<b>${sender}:</b> ${text}`;
-  chat.appendChild(msg);
-  chat.scrollTop = chat.scrollHeight;
 }
-async function sendMessage() {
-  const input = document.getElementById("userInput");
-  const message = input.value.trim();
-  if (!message) return;
-  appendMessage("You", message);
-  input.value = "";
-  const res = await fetch("/chat", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ message })
   });
-  const data = await res.json();
-  appendMessage("Assistant", data.reply);
-  changeBackground(data.emotion);
-  speak(data.reply);
 }
-function speak(text) {
-  if (!text) return;
-  const utter = new SpeechSynthesisUtterance(text);
-  utter.voice = selectedVoice || voices[0];
-  utter.pitch = 0.8;
-  utter.rate = 1.0;
-  synth.speak(utter);
 }
-document.getElementById("sendBtn").onclick = sendMessage;
-if ("webkitSpeechRecognition" in window) {
-  recognition = new webkitSpeechRecognition();
-  recognition.continuous = false;
   recognition.lang = "en-US";
   recognition.onresult = (e) => {
-    const transcript = e.results[0][0].transcript;
-    document.getElementById("userInput").value = transcript;
     sendMessage();
   };
-  document.getElementById("startBtn").onclick = () => {
-    if (!recognizing) {
-      recognizing = true;
-      recognition.start();
-    }
-  };
-  document.getElementById("stopBtn").onclick = () => {
-    if (recognizing) {
-      recognizing = false;
-      recognition.stop();
-      synth.cancel();
-    }
-  };
 }
 </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>
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
+  body { transition: background 1.2s ease; background: linear-gradient(135deg,#f2f6ff,#fff0f6); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue"; }
+  .card { max-width:960px; margin:28px auto; display:flex; gap:20px; align-items:flex-start; padding:20px; border-radius:18px; background: rgba(255,255,255,0.55); box-shadow: 0 10px 30px rgba(12,12,20,0.08); backdrop-filter: blur(8px); }
+  .left { width:220px; display:flex; flex-direction:column; align-items:center; gap:12px; }
+  .avatarOrb, .avatarHum { width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
+  .avatarOrb { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0.05)), radial-gradient(circle at 60% 60%, rgba(120,170,255,0.5), rgba(80,100,255,0.2)); box-shadow: 0 6px 30px rgba(80,110,255,0.18); animation: breathe 4.5s ease-in-out infinite; }
+  .avatarHum { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7), rgba(255,255,255,0.05)), linear-gradient(135deg,#fef3c7,#fbcfe8); box-shadow: 0 6px 30px rgba(200,120,200,0.12); animation: breathe 5s ease-in-out infinite; display:none; }
+  @keyframes breathe { 0%{transform:scale(1);opacity:0.9;}50%{transform:scale(1.08);opacity:1;}100%{transform:scale(1);opacity:0.92;} }
+  .status { font-size:14px; color:#334155; text-align:center; }
+  .controls { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
+  .controls button, .controls select { padding:8px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:600; }
+  .main { flex:1; display:flex; flex-direction:column; gap:12px; }
+  .chatWindow { height:520px; background:rgba(255,255,255,0.85); border-radius:12px; padding:18px; overflow:auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
+  .bubble { max-width:72%; padding:12px 14px; border-radius:14px; margin:8px 0; line-height:1.35; }
+  .bubble.user { margin-left:auto; background:linear-gradient(135deg,#e6f0ff,#d7e9ff); color:#07235a; border-bottom-right-radius:4px; }
+  .bubble.bot { margin-right:auto; background:linear-gradient(135deg,#fdf7ff,#fff1f7); color:#2b2b2b; border-bottom-left-radius:4px; }
+  .typeIndicator { font-style:italic; color:#64748b; padding:6px 0; text-align:left; }
+  .inputRow { display:flex; gap:8px; margin-top:10px; }
+  .inputRow input { flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(10,10,10,0.06); outline:none; font-size:16px; }
+  .inputRow button { padding:10px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:700; }
+  .footerBtns { margin-top:12px; display:flex; gap:8px; justify-content:flex-end; align-items:center; }
+  .small { font-size:12px; color:#475569; }
+  @media (max-width:820px) { .card{flex-direction:column; padding:14px;} .left{width:100%; flex-direction:row; justify-content:space-between;} .avatarOrb,.avatarHum{width:80px;height:80px;} .chatWindow{height:340px;} }
 </style>
 </head>
+<body>
+<div class="card">
+  <div class="left">
+    <div id="orb" class="avatarOrb" aria-hidden="true"></div>
+    <div id="hum" class="avatarHum" aria-hidden="true"></div>
+    <div class="status">
+      <div id="assistantName" class="text-lg font-semibold">Serenity</div>
+      <div id="assistantMood" class="small">Calm • Supportive</div>
+    </div>
+    <div class="controls">
+      <button id="switchStyle" class="bg-white/80">Switch Style</button>
+      <select id="voiceSelect" class="rounded-lg">
+        <!-- options populated by JS -->
+      </select>
+    </div>
+    <div class="small">Tip: Allow microphone access to speak</div>
+  </div>
+  <div class="main">
+    <div id="chatWindow" class="chatWindow" role="log" aria-live="polite"></div>
+    <div id="typing" class="typeIndicator" style="display:none">Serenity is typing…</div>
+    <div class="inputRow">
+      <input id="messageInput" placeholder="Type your message..." autocomplete="off" />
+      <button id="sendBtn" class="bg-indigo-600 text-white">Send</button>
+      <button id="micStart" class="bg-green-500 text-white">🎙️</button>
+      <button id="micStop" class="bg-red-500 text-white">⏹️</button>
+    </div>
+    <div class="footerBtns">
+      <button id="newChat" class="bg-gray-100 px-3">New Chat</button>
+      <button id="feedback" class="bg-amber-100 px-3">Feedback</button>
+    </div>
   </div>
 </div>
 <script>
+/* ---------- Utilities and session setup ---------- */
+const sessionKey = "serenity_session";
+let sessionId = localStorage.getItem(sessionKey);
+if(!sessionId){
+  // create simple random id
+  sessionId = 's_' + Math.random().toString(36).slice(2,12);
+  localStorage.setItem(sessionKey, sessionId);
 }
+const chatWindow = document.getElementById("chatWindow");
+const messageInput = document.getElementById("messageInput");
+const sendBtn = document.getElementById("sendBtn");
+const typingIndicator = document.getElementById("typing");
+const orb = document.getElementById("orb");
+const hum = document.getElementById("hum");
+const switchStyle = document.getElementById("switchStyle");
+const assistantMood = document.getElementById("assistantMood");
+const voiceSelect = document.getElementById("voiceSelect");
+const micStart = document.getElementById("micStart");
+const micStop = document.getElementById("micStop");
+const newChatBtn = document.getElementById("newChat");
+const feedbackBtn = document.getElementById("feedback");
+let listening = false;
+let recognition = null;
+let voices = [];
+let chosenVoice = null;
+/* ---------- Voice profiles list (names represent target style; actual voice chosen from browser) ---------- */
+const VOICE_PROFILES = [
+  { id:'calm_male', label:'Calm Male', pitch:0.85, rate:0.95 },
+  { id:'deep_male', label:'Deep Male', pitch:0.6, rate:0.9 },
+  { id:'soothing_male', label:'Soothing Male', pitch:0.9, rate:0.85 },
+  { id:'gentle_female', label:'Gentle Loving Female', pitch:1.3, rate:0.95 },
+  { id:'feminine_female', label:'Feminine Female', pitch:1.45, rate:1.0 },
+  { id:'deep_female', label:'Deep & Soar Female', pitch:0.9, rate:0.9 },
+  { id:'soothing_female', label:'Soothing Female', pitch:1.2, rate:0.85 },
+  { id:'neutral', label:'Neutral Soothing', pitch:1.0, rate:1.0 }
+];
+function appendBubble(who, text){
+  const d = document.createElement("div");
+  d.className = 'bubble ' + (who === "user" ? 'user' : 'bot');
+  d.innerHTML = `<strong>${who === "user" ? "You" : "Serenity"}:</strong> ${escapeHtml(text)}`;
+  chatWindow.appendChild(d);
+  chatWindow.scrollTop = chatWindow.scrollHeight;
 }
+function escapeHtml(str){ return (str||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+/* ---------- color transitions (soft palette) ---------- */
+const SOFT_GRADIENTS = [
+  "linear-gradient(135deg,#EFF6FF,#FFF0F6)", // blue->pink
+  "linear-gradient(135deg,#F0FDF4,#ECFEFF)", // green -> aqua
+  "linear-gradient(135deg,#FEF3C7,#FCE7F3)", // warm
+  "linear-gradient(135deg,#F3E8FF,#FEF3F3)", // lavender
+  "linear-gradient(135deg,#FDF2F8,#EEF2FF)"  // pastel
+];
+let bgIndex = 0;
+function cycleBackground() {
+  bgIndex = (bgIndex + 1) % SOFT_GRADIENTS.length;
+  document.body.style.background = SOFT_GRADIENTS[bgIndex];
 }
+setInterval(cycleBackground, 18000); // every 18s
+/* ---------- Avatar breathing + thinking animation control ---------- */
+function setAvatarThinking(on){
+  if(on){
+    orb.style.transform = "scale(1.08)";
+    orb.style.boxShadow = "0 10px 40px rgba(80,110,255,0.28)";
+  } else {
+    orb.style.transform = "";
+    orb.style.boxShadow = "";
+  }
 }
+/* ---------- Populate voice select using available browser voices ---------- */
+function populateVoiceList(){
+  voices = speechSynthesis.getVoices() || [];
+  // create optgroups: prefer names that contain "male"/"female" etc but fallback to first N
+  voiceSelect.innerHTML = "";
+  // add a "best match" option for each profile
+  VOICE_PROFILES.forEach(profile=>{
+    const opt = document.createElement("option");
+    opt.value = profile.id;
+    opt.text = profile.label;
+    voiceSelect.appendChild(opt);
   });
+  // choose default
+  voiceSelect.value = localStorage.getItem("serenity_voice") || "neutral";
 }
+populateVoiceList();
+if (typeof speechSynthesis !== "undefined") {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
 }
+voiceSelect.addEventListener("change", ()=>{
+  localStorage.setItem("serenity_voice", voiceSelect.value);
+});
+/* ---------- Typing indicator helpers ---------- */
+function showTyping(){
+  typingIndicator.style.display = "block";
+  setAvatarThinking(true);
+}
+function hideTyping(){
+  typingIndicator.style.display = "none";
+  setAvatarThinking(false);
+}
+/* ---------- Microphone: Web Speech API ---------- */
+if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window){
+  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+  recognition = new SR();
   recognition.lang = "en-US";
+  recognition.interimResults = false;
+  recognition.continuous = false;
   recognition.onresult = (e) => {
+    const txt = e.results[e.results.length-1][0].transcript;
+    messageInput.value = txt;
     sendMessage();
   };
+  recognition.onend = () => { listening = false; micStart.disabled=false; micStop.disabled=true; setAvatarThinking(false); }
+  recognition.onerror = (ev) => { listening = false; micStart.disabled=false; micStop.disabled=true; setAvatarThinking(false); console.warn("speech error",ev); }
+  micStart.onclick = () => { try { recognition.start(); listening=true; micStart.disabled=true; micStop.disabled=false; setAvatarThinking(true);} catch(e){ console.warn(e);} };
+  micStop.onclick = () => { if(recognition) recognition.stop(); listening=false; micStart.disabled=false; micStop.disabled=true; setAvatarThinking(false); speechSynthesis.cancel(); };
+} else {
+  micStart.disabled = true; micStop.disabled = true;
 }
+/* ---------- Avatar switch ---------- */
+switchStyle.onclick = () => {
+  if(orb.style.display === "none" || getComputedStyle(orb).display === "none"){
+    orb.style.display = ""; hum.style.display = "none";
+  } else {
+    orb.style.display = "none"; hum.style.display = "";
+  }
+}
+/* ---------- New chat / feedback ---------- */
+newChatBtn.onclick = () => {
+  chatWindow.innerHTML = "";
+  // clear memory for session
+  fetch("/reset_session", {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({session:sessionId})}).catch(()=>{});
+  appendBubbleLocal("Serenity","New conversation started. How are you feeling today?");
+}
+feedbackBtn.onclick = ()=>{ window.alert("Thanks — we appreciate feedback. ❤️"); }
+/* append local bot message */
+function appendBubbleLocal(name,text){ appendBubble("bot", text); }
+/* ---------- Speak text with profile mapping ---------- */
+function speakText(text){
+  if(!text) return;
+  // build utterance
+  const utter = new SpeechSynthesisUtterance(text);
+  const profileId = voiceSelect.value || "neutral";
+  const profile = VOICE_PROFILES.find(p=>p.id===profileId) || VOICE_PROFILES[7];
+  utter.pitch = profile.pitch;
+  utter.rate = profile.rate;
+  // try to select an actual voice that matches gender/character
+  const available = speechSynthesis.getVoices();
+  let match = null;
+  const prefer = ["male","microsoft","david","mark","john","alex","daniel","robert","mike"];
+  const preferF = ["female","zira","sarah","linda","kate","mary","victoria","eva"];
+  if(profileId.includes("male")){
+    match = available.find(v => prefer.some(p=>v.name.toLowerCase().includes(p)));
+  } else if(profileId.includes("female")){
+    match = available.find(v => preferF.some(p=>v.name.toLowerCase().includes(p)));
+  }
+  if(!match) match = available.find(v=>v.lang && v.lang.toLowerCase().includes("en")) || available[0];
+  if(match) utter.voice = match;
+  speechSynthesis.cancel();
+  speechSynthesis.speak(utter);
+}
+/* ---------- Send message to backend ---------- */
+async function sendMessage(){
+  const txt = messageInput.value.trim();
+  if(!txt) return;
+  appendBubble("user", txt);
+  messageInput.value = "";
+  showTyping();
+  try{
+    const res = await fetch("/chat", {
+      method:"POST",
+      headers:{"Content-Type":"application/json"},
+      body: JSON.stringify({ session: sessionId, message: txt })
+    });
+    const j = await res.json();
+    hideTyping();
+    appendBubble("bot", j.reply || j.response || "Sorry — something went wrong.");
+    assistantMood.textContent = (j.emotion ? j.emotion.charAt(0).toUpperCase()+j.emotion.slice(1) : "Calm") + " • Supportive";
+    // gentle background change per emotion
+    const e = (j.emotion || "neutral").toLowerCase();
+    if(e==="sadness") document.body.style.background="linear-gradient(135deg,#dbeafe,#eef2ff)";
+    else if(e==="joy"||e==="love") document.body.style.background="linear-gradient(135deg,#fff7ed,#fff1f2)";
+    else if(e==="anger") document.body.style.background="linear-gradient(135deg,#fff1f0,#ffe7e8)";
+    else if(e==="crisis") document.body.style.background="linear-gradient(135deg,#f8fafc,#fef2f2)";
+    else document.body.style.background = SOFT_GRADIENTS[bgIndex];
+    // avatar thinking pulse while speaking
+    setAvatarThinking(true);
+    speakText(j.reply || j.response || "");
+    // stop thinking after speak ends
+    setTimeout(()=> setAvatarThinking(false), 900);
+  }catch(err){
+    hideTyping();
+    appendBubble("bot","Oops — I couldn't connect. Try again in a moment.");
+    console.error(err);
+  }
+}
+sendBtn.addEventListener("click", sendMessage);
+messageInput.addEventListener("keydown", (e)=>{ if(e.key==="Enter") sendMessage(); });
+/* ---------- On first load, request init greeting once ---------- */
+(async function init(){
+  // call backend with init flag so it responds only once
+  try{
+    const res = await fetch("/chat", {
+      method:"POST",
+      headers:{"Content-Type":"application/json"},
+      body: JSON.stringify({ session: sessionId, init: true })
+    });
+    const j = await res.json();
+    appendBubble("bot", j.reply || "Hey there! I'm Serenity — what's your name?");
+    assistantMood.textContent = (j.emotion ? j.emotion : "Calm") + " • Supportive";
+  }catch(e){
+    appendBubble("bot","Hey there! I'm Serenity — what's your name?");
+  }
+})();
 </script>
 </body>
 </html>