Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Empathy Chatbot 💬</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| body { | |
| transition: background 1.5s ease; | |
| } | |
| #chat-box { | |
| max-height: 60vh; | |
| overflow-y: auto; | |
| scroll-behavior: smooth; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-green-100 to-green-200 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6 flex flex-col"> | |
| <h1 class="text-2xl font-bold text-center mb-4 text-gray-700">💛 Emotional Support Assistant</h1> | |
| <div id="chat-box" class="flex-1 mb-4 overflow-y-auto space-y-3"></div> | |
| <div class="flex gap-2"> | |
| <input id="message-input" type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring focus:ring-blue-200"> | |
| <button id="send-btn" class="bg-blue-500 text-white rounded px-4 py-2 hover:bg-blue-600">Send</button> | |
| </div> | |
| <div class="flex justify-center gap-2 mt-4"> | |
| <button id="start-btn" class="bg-green-500 text-white px-3 py-2 rounded hover:bg-green-600">🎙️ Start Listening</button> | |
| <button id="stop-btn" class="bg-red-500 text-white px-3 py-2 rounded hover:bg-red-600">⏹️ Stop</button> | |
| </div> | |
| </div> | |
| <script> | |
| const chatBox = document.getElementById("chat-box"); | |
| const messageInput = document.getElementById("message-input"); | |
| const sendBtn = document.getElementById("send-btn"); | |
| // 🎤 Voice recognition setup | |
| const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; | |
| const recognition = new SpeechRecognition(); | |
| recognition.continuous = false; | |
| recognition.lang = "en-US"; | |
| document.getElementById("start-btn").onclick = () => { | |
| recognition.start(); | |
| }; | |
| document.getElementById("stop-btn").onclick = () => { | |
| recognition.stop(); | |
| }; | |
| recognition.onresult = (event) => { | |
| const transcript = event.results[0][0].transcript; | |
| messageInput.value = transcript; | |
| sendMessage(); | |
| }; | |
| // 💬 Send message function | |
| sendBtn.onclick = sendMessage; | |
| messageInput.addEventListener("keypress", (e) => { | |
| if (e.key === "Enter") sendMessage(); | |
| }); | |
| async function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (!message) return; | |
| appendMessage("You", message, "text-right text-blue-600"); | |
| messageInput.value = ""; | |
| try { | |
| const res = await fetch("/chat", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ | |
| message, | |
| name: "User", | |
| age: "25" | |
| }), | |
| }); | |
| const data = await res.json(); | |
| appendMessage("Bot", data.response, "text-left text-gray-800"); | |
| changeBackground(data.emotion); | |
| speakText(data.response); | |
| } catch (err) { | |
| appendMessage("Bot", "Oops, something went wrong. Please try again.", "text-red-600"); | |
| console.error(err); | |
| } | |
| } | |
| // 🗨️ Append message to chat box | |
| function appendMessage(sender, text, style) { | |
| const msg = document.createElement("div"); | |
| msg.className = `p-2 rounded-lg ${style}`; | |
| msg.innerHTML = `<strong>${sender}:</strong> ${text}`; | |
| chatBox.appendChild(msg); | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| } | |
| // 🎨 Background color transitions | |
| function changeBackground(emotion) { | |
| let gradient = ""; | |
| switch (emotion.toLowerCase()) { | |
| case "joy": | |
| gradient = "from-yellow-200 to-yellow-400"; | |
| break; | |
| case "sadness": | |
| gradient = "from-blue-200 to-blue-400"; | |
| break; | |
| case "anger": | |
| gradient = "from-red-400 to-orange-500"; | |
| break; | |
| case "neutral": | |
| case "calm": | |
| gradient = "from-green-100 to-green-300"; | |
| break; | |
| case "motivated": | |
| gradient = "from-orange-300 to-orange-500"; | |
| break; | |
| default: | |
| gradient = "from-gray-100 to-gray-300"; | |
| } | |
| document.body.className = `bg-gradient-to-br ${gradient} min-h-screen flex flex-col items-center justify-center p-4 transition-all`; | |
| } | |
| // 🔊 Text-to-speech | |
| function speakText(text) { | |
| if (!window.speechSynthesis) return; | |
| const utter = new SpeechSynthesisUtterance(text); | |
| utter.lang = "en-US"; | |
| utter.pitch = 1; | |
| utter.rate = 1; | |
| utter.volume = 1; | |
| window.speechSynthesis.speak(utter); | |
| } | |
| </script> | |
| </body> | |
| </html>accesskey |