Spaces:

Shresthh03
/

Chatbot-2

Sleeping

App Files Files Community

Shresthh03 commited on Oct 22

Commit

b56c516

verified ·

1 Parent(s): c19fc55

Update index.html

Browse files

Files changed (1) hide show

index.html +132 -145

index.html CHANGED Viewed

@@ -4,170 +4,157 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>💛 Emotional Support Assistant</title>
 <style>
-  body {
-    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
-    font-family: 'Poppins', sans-serif;
-    color: #333;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-  header {
-    text-align: center;
-    padding: 20px;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    font-size: 1.6rem;
-    font-weight: 600;
-    color: #fff;
-  }
-  #chat-container {
-    flex: 1;
-    overflow-y: auto;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-  }
-  .message {
-    max-width: 70%;
-    margin-bottom: 15px;
-    padding: 12px 18px;
-    border-radius: 18px;
-    font-size: 1rem;
-    line-height: 1.4;
-  }
-  .user {
-    align-self: flex-end;
-    background: #fff;
-    color: #444;
-    border-bottom-right-radius: 4px;
-  }
-  .bot {
-    align-self: flex-start;
-    background: rgba(255, 255, 255, 0.3);
-    color: #fff;
-    border-bottom-left-radius: 4px;
-  }
-  #input-area {
-    display: flex;
-    padding: 15px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
-  }
-  #user-input {
-    flex: 1;
-    padding: 10px;
-    border: none;
-    border-radius: 20px;
-    outline: none;
-    font-size: 1rem;
-  }
-  #send-btn, #mic-btn, #stop-btn {
-    margin-left: 10px;
-    border: none;
-    border-radius: 50%;
-    padding: 12px;
-    font-size: 1.2rem;
-    cursor: pointer;
-    color: white;
-    background-color: #6a11cb;
-    transition: 0.3s;
-  }
-  #send-btn:hover, #mic-btn:hover, #stop-btn:hover {
-    background-color: #2575fc;
-  }
-  #typing-indicator {
-    font-style: italic;
-    color: #f1f1f1;
-    font-size: 0.9rem;
-    margin-top: 5px;
-  }
 </style>
 </head>
-<body>
-  <header>💛 Emotional Support Assistant</header>
-  <div id="chat-container"></div>
-  <div id="input-area">
-    <input type="text" id="user-input" placeholder="Type your message..." autocomplete="off" />
-    <button id="send-btn">➤</button>
-    <button id="mic-btn">🎙️</button>
-    <button id="stop-btn">⏹️</button>
   </div>
 <script>
-const chatContainer = document.getElementById('chat-container');
-const userInput = document.getElementById('user-input');
-const sendBtn = document.getElementById('send-btn');
-const micBtn = document.getElementById('mic-btn');
-const stopBtn = document.getElementById('stop-btn');
 let recognition;
-function appendMessage(sender, text) {
-  const msg = document.createElement('div');
-  msg.className = 'message ' + sender;
-  msg.textContent = text;
-  chatContainer.appendChild(msg);
-  chatContainer.scrollTop = chatContainer.scrollHeight;
 }
-function showTyping() {
-  const typing = document.createElement('div');
-  typing.id = 'typing-indicator';
-  typing.textContent = "Assistant is typing...";
-  chatContainer.appendChild(typing);
-  chatContainer.scrollTop = chatContainer.scrollHeight;
 }
-function hideTyping() {
-  const typing = document.getElementById('typing-indicator');
-  if (typing) typing.remove();
 }
-sendBtn.addEventListener('click', async () => {
-  const text = userInput.value.trim();
   if (!text) return;
-  appendMessage('user', text);
-  userInput.value = '';
-  showTyping();
-  const res = await fetch('/chat', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ message: text })
-  });
-  const data = await res.json();
-  hideTyping();
-  appendMessage('bot', data.reply);
-});
-micBtn.addEventListener('click', () => {
-  recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-  recognition.lang = 'en-US';
   recognition.onresult = (e) => {
     const transcript = e.results[0][0].transcript;
-    userInput.value = transcript;
   };
-  recognition.start();
-});
-stopBtn.addEventListener('click', () => {
-  if (recognition) recognition.stop();
-});
 </script>
 </body>
-</html>

 <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>