Spaces:

Shresthh03
/

Another-new-chatbot112

Runtime error

App Files Files Community

Shresthh03 commited on 15 days ago

Commit

4efb74e

verified ·

1 Parent(s): 807b8d5

Update index.html

Browse files

Files changed (1) hide show

index.html +1 -164

index.html CHANGED Viewed

@@ -1,164 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>💛 Your Empathetic Friend</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    body {
-      transition: background 1.5s ease, color 1s ease;
-      background: linear-gradient(135deg, #fef3c7, #fbbf24, #f59e0b);
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    }
-    .avatar {
-      animation: breathe 3s ease-in-out infinite;
-      filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6));
-    }
-    @keyframes breathe {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(1.05); }
-    }
-    .message {
-      animation: fadeIn 0.4s ease-out;
-      border-radius: 15px;
-      padding: 10px 15px;
-      margin-bottom: 10px;
-      max-width: 80%;
-      word-wrap: break-word;
-    }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(20px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .loading {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      border: 3px solid #fbbf24;
-      border-radius: 50%;
-      border-top-color: transparent;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-    .user-message {
-      background: linear-gradient(135deg, #dbeafe, #bfdbfe, #93c5fd);
-      align-self: flex-end;
-      color: #1e40af;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    .assistant-message {
-      background: linear-gradient(135deg, #fef3c7, #fde68a, #fcd34d);
-      align-self: flex-start;
-      color: #92400e;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    .chat-box {
-      scrollbar-width: thin;
-      scrollbar-color: #fbbf24 #f3f4f6;
-    }
-    .chat-box::-webkit-scrollbar {
-      width: 6px;
-    }
-    .chat-box::-webkit-scrollbar-track {
-      background: #f3f4f6;
-      border-radius: 10px;
-    }
-    .chat-box::-webkit-scrollbar-thumb {
-      background: #fbbf24;
-      border-radius: 10px;
-    }
-  </style>
-</head>
-<body class="text-gray-800 flex flex-col items-center justify-center min-h-screen p-4 bg-gradient-to-br from-yellow-100 via-orange-100 to-pink-100">
-  <div class="avatar mb-6">
-    <svg width="120" height="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="50" cy="50" r="45" fill="#fbbf24" stroke="#f59e0b" stroke-width="5"/>
-      <circle cx="35" cy="40" r="5" fill="#374151"/>
-      <circle cx="65" cy="40" r="5" fill="#374151"/>
-      <path d="M 40 60 Q 50 70 60 60" stroke="#374151" stroke-width="3" fill="none"/>
-    </svg>
-  </div>
-  <h1 class="text-5xl font-extrabold mb-4 text-center text-gray-900 drop-shadow-lg bg-gradient-to-r from-yellow-600 to-orange-600 bg-clip-text text-transparent">💛 Your Empathetic Friend</h1>
-  <p class="text-center mb-6 text-gray-700 text-lg">I'm here to listen, support, and share knowledge with endless love. Let's connect! ❤️</p>
-  <div class="flex gap-4 mb-6 flex-wrap justify-center">
-    <button id="modeBtn" onclick="toggleMode()" class="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-3 rounded-full shadow-xl transition transform hover:scale-105" aria-label="Toggle between Emotional Support and Knowledge modes">Mode: Emotional Support</button>
-    <button onclick="clearChat()" class="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-6 py-3 rounded-full shadow-xl transition transform hover:scale-105" aria-label="Clear the chat history">Clear Chat</button>
-    <select id="voiceSelect" class="bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white px-6 py-3 rounded-full shadow-xl transition transform hover:scale-105" aria-label="Select voice for speech">
-      <option value="neutral">Neutral Voice</option>
-      <option value="calming_male">Calming Male</option>
-      <option value="calming_female">Calming Female</option>
-      <option value="soothing_supportive_male">Soothing Supportive Male</option>
-      <option value="soothing_supportive_female">Soothing Supportive Female</option>
-      <option value="motivating_gentle_male">Motivating Gentle Male</option>
-      <option value="loving_motivating_female">Loving Motivating Female</option>
-      <option value="deep_soar_female">Deep and Soar Female</option>
-      <option value="deep_soar_male">Deep and Soar Male</option>
-    </select>
-  </div>
-  <div id="chat-box" class="w-full max-w-2xl h-96 bg-white rounded-2xl shadow-2xl overflow-y-auto p-6 mb-6 flex flex-col chat-box" role="log" aria-live="polite" aria-label="Chat conversation"></div>
-  <div class="flex gap-3 w-full max-w-2xl">
-    <input id="message" type="text" class="flex-grow p-4 border-2 border-gray-300 rounded-full focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition" placeholder="Share what's on your mind..." aria-label="Type your message" />
-    <button onclick="sendMessage()" class="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-6 py-3 rounded-full shadow-xl transition transform hover:scale-105" aria-label="Send your message">Send</button>
-  </div>
-  <div class="flex gap-3 mt-6">
-    <button id="listenBtn" onclick="startListening()" class="bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white px-6 py-3 rounded-full shadow-xl transition transform hover:scale-105" aria-label="Start voice input" disabled>🎙️ Start Listening</button>
-    <button id="stopBtn" onclick="stopListening()" class="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-6 py-3 rounded-full shadow-xl transition transform hover:scale-105" aria-label="Stop voice input" disabled>⏹️ Stop</button>
-  </div>
-  <script>
-    const chatBox = document.getElementById("chat-box");
-    const messageInput = document.getElementById("message");
-    const modeBtn = document.getElementById("modeBtn");
-    const listenBtn = document.getElementById("listenBtn");
-    const stopBtn = document.getElementById("stopBtn");
-    const voiceSelect = document.getElementById("voiceSelect");
-    let recognition;
-    let listening = false;
-    let currentMode = "emotional_support";
-    let selectedVoiceType = "neutral";
-    const emotionColors = {
-      joy: ["bg-gradient-to-br from-yellow-200 to-yellow-400", "bg-gradient-to-br from-yellow-400 to-orange-300", "bg-gradient-to-br from-orange-300 to-pink-200"],
-      sadness: ["bg-gradient-to-br from-blue-200 to-blue-400", "bg-gradient-to-br from-blue-400 to-indigo-300", "bg-gradient-to-br from-indigo-300 to-purple-200"],
-      anger: ["bg-gradient-to-br from-red-200 to-red-400", "bg-gradient-to-br from-red-400 to-pink-300", "bg-gradient-to-br from-pink-300 to-orange-200"],
-      calm: ["bg-gradient-to-br from-green-200 to-green-400", "bg-gradient-to-br from-green-400 to-teal-300", "bg-gradient-to-br from-teal-300 to-blue-200"],
-      optimism: ["bg-gradient-to-br from-orange-200 to-orange-400", "bg-gradient-to-br from-orange-400 to-yellow-300", "bg-gradient-to-br from-yellow-300 to-green-200"],
-      surprise: ["bg-gradient-to-br from-purple-200 to-purple-400", "bg-gradient-to-br from-purple-400 to-violet-300", "bg-gradient-to-br from-violet-300 to-pink-200"],
-      neutral: ["bg-gradient-to-br from-gray-200 to-gray-400", "bg-gradient-to-br from-gray-400 to-slate-300", "bg-gradient-to-br from-slate-300 to-blue-200"]
-    };
-    // Map voice types to browser voices
-    function getVoiceForType(type) {
-      const voices = speechSynthesis.getVoices();
-      let selectedVoice = voices.find(v => v.default) || voices[0];
-      switch (type) {
-        case "calming_male":
-          selectedVoice = voices.find(v => v.name.toLowerCase().includes("male") && v.lang.includes("en")) || voices.find(v => v.name.toLowerCase().includes("google") && v.lang.includes("en-US")) || selectedVoice;
-          break;
-        case "calming_female":
-          selectedVoice = voices.find(v => v.name.toLowerCase().includes("female") && v.lang.includes("en")) || voices.find(v => v.name.toLowerCase().includes("zira") || v.name.toLowerCase().includes("samantha")) || selectedVoice;
-          break;
-        case "soothing_supportive_male":
-          selectedVoice = voices.find(v => v.name.toLowerCase().includes("male") && v.lang.includes("en")) || selectedVoice;
-          break;
-        case "soothing_supportive_female":
-          selectedVoice = voices.find(v => v.name.toLowerCase().includes("female") && v.lang.includes("en")) || selectedVoice;
-          break;
-        case "motivating_gentle_male":
-          selectedVoice = voices.find(v => v.name.toLowerCase().includes("male") && v.lang.includes("en")) || selectedVoice;
-          break;
-        case "loving_motivating_female":
-          selectedVoice = voices.find(v => v.name.toLowerCase().includes("female") && v.lang.includes("en")) || selectedVoice;
-          break;
-        case "neutral":
-          selectedVoice = voices.find(v => v.default) || voices[0];
-          break;
-        case "deep_soar_female":
-          selectedVoice = voices.find(v => v.name.toLowerCase().includes("female") && v.lang.includes


1	+ <!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 2s ease, color 1s ease; background: linear-gradient(135deg, #fef3c7, #fbbf24); } .avatar { animation: breathe 3s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .message { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid #fbbf24; border-radius: 50%; border-top-color: transparent; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style> </head> <body class="text-gray-800 flex flex-col items-center justify-center min-h-screen p-4"> <div class="avatar mb-4"> <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="45" fill="#fbbf24" stroke="#f59e0b" stroke-width="5"/> <circle cx="35" cy="40" r="5" fill="#374151"/> <circle cx="65" cy="40" r="5" fill="#374151"/> <path d="M 40 60 Q 50 70 60 60" stroke="#374151" stroke-width="3" fill="none"/> </svg> </div> <h1 class="text-4xl font-bold mb-6 text-center text-gray-900">💛 Your Empathetic Friend</h1> <p class="text-center mb-4 text-gray-700">I'm here to listen, support, and share knowledge. Let's connect!</p> <div class="flex gap-4 mb-4"> <button id="modeBtn" onclick="toggleMode()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Toggle between Emotional Support and Knowledge modes">Mode: Emotional Support</button> <button onclick="clearChat()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Clear the chat history">Clear Chat</button> </div> <div id="chat-box" class="w-full max-w-lg h-96 bg-white rounded-lg shadow-xl overflow-y-auto p-4 mb-4" role="log" aria-live="polite" aria-label="Chat conversation"></div> <div class="flex gap-2 w-full max-w-lg"> <input id="message" type="text" class="flex-grow p-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Share what's on your mind..." aria-label="Type your message" /> <button onclick="sendMessage()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Send your message">Send</button> </div> <div class="flex gap-2 mt-4"> <button id="listenBtn" onclick="startListening()" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Start voice input" disabled>🎙️ Start Listening</button> <button id="stopBtn" onclick="stopListening()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg transition" aria-label="Stop voice input" disabled>⏹️ Stop</button> </div> <script> const chatBox = document.getElementById("chat-box"); const messageInput = document.getElementById("message"); const modeBtn = document.getElementById("modeBtn"); const listenBtn = document.getElementById("listenBtn"); const stopBtn = document.getElementById("stopBtn"); let recognition; let listening = false; let currentMode = "emotional_support"; const emotionColors = { joy: ["bg-gradient-to-r from-yellow-200 to-yellow-300", "bg-gradient-to-r from-yellow-300 to-orange-200"], sadness: ["bg-gradient-to-r from-blue-200 to-blue-300", "bg-gradient-to-r from-blue-300 to-indigo-200"], anger: ["bg-gradient-to-r from-red-200 to-red-300", "bg-gradient-to-r from-red-300 to-pink-200"], calm: ["bg-gradient-to-r from-green-200 to-green-300", "bg-gradient-to-r from-green-300 to-teal-200"], optimism: ["bg-gradient-to-r from-orange-200 to-orange-300", "bg-gradient-to-r from-orange-300 to-yellow-200"], surprise: ["bg-gradient-to-r from-purple-200 to-purple-300", "bg-gradient-to-r from-purple-300 to-violet-200"], neutral: ["bg-gradient-to-r from-gray-200 to-gray-300", "bg-gradient-to-r from-gray-300 to-slate-200"] }; // Load chat history from localStorage function loadHistory() { const history = JSON.parse(localStorage.getItem("chatHistory") \|\| "[]"); history.forEach(msg => appendMessage(msg.sender, msg.text, false)); } // Save chat history to localStorage function saveHistory() { const messages = Array.from(chatBox.children).map(div => ({ sender: div.querySelector("strong").textContent.replace(":", ""), text: div.textContent.split(": ")[1] })); localStorage.setItem("chatHistory", JSON.stringify(messages)); } async function sendMessage(voiceConfirmed = false) { const message = messageInput.value.trim(); if (!message) return; if (!voiceConfirmed && recognition) { if (!confirm("Send this voice message?")) return; } appendMessage("You", message); messageInput.value = ""; showLoading(true); try { const res = await fetch("/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message, mode: currentMode }), }); const data = await res.json(); appendMessage("Assistant", data.reply); updateBackground(data.emotion); speak(data.reply); saveHistory(); } catch (error) { appendMessage("Assistant", "Oops, something went wrong. Please try again."); } finally { showLoading(false); } } function appendMessage(sender, text, save = true) { const div = document.createElement("div"); div.className = `message ${sender === "You" ? "text-right mb-2" : "text-left mb-2"}`; div.innerHTML = `<strong>${sender}:</strong> ${text}`; chatBox.appendChild(div); chatBox.scrollTop = chatBox.scrollHeight; if (save) saveHistory(); } function updateBackground(emotion) { const colors = emotionColors[emotion.toLowerCase()] \|\| emotionColors["neutral"]; const randomColor = colors[Math.floor(Math.random() * colors.length)]; document.body.className = `transition-all min-h-screen flex flex-col items-center justify-center p-4 ${randomColor}`; } function speak(text) { if ("speechSynthesis" in window) { const speech = new SpeechSynthesisUtterance(text); speech.rate = 1; speech.pitch = 1; speech.lang = "en-US"; window.speechSynthesis.speak(speech); } else { alert("Speech synthesis not supported in your browser."); } } function startListening() { if (!("webkitSpeechRecognition" in window)) { alert("Speech recognition not supported in your browser."); return; } recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.lang = "en-US"; recognition.onstart = () => { listening = true; listenBtn.disabled = true; stopBtn.disabled = false; appendMessage("System", "Listening..."); }; recognition.onresult = (event) => { const transcript = event.results[0][0].transcript; appendMessage("You (voice)", transcript); messageInput.value = transcript; sendMessage(true); // Auto-send with confirmation }; recognition.onend = () => { listening = false; listenBtn.disabled = false; stopBtn.disabled = true; }; recognition.start(); } function stopListening() { if (recognition && listening) { recognition.stop(); listening = false; listenBtn.disabled = false; stopBtn.disabled = true; appendMessage("System", "Stopped listening."); window.speechSynthesis.cancel(); } } function toggleMode() { currentMode = currentMode === "emotional_support" ? "knowledge" : "emotional_support"; modeBtn.textContent = `Mode: ${currentMode === "emotional_support" ? "Emotional Support" : "Knowledge"}`; } function clearChat() { chatBox.innerHTML = ""; localStorage.removeItem("chatHistory"); } function showLoading(show) { const btn = document.querySelector("button[onclick='sendMessage()']"); if (show) { btn.innerHTML = '<div class="loading"></div>'; btn.disabled = true; } else { btn.innerHTML = "Send"; btn.disabled = false; } } // Initialize loadHistory(); appendMessage("Assistant", "Hi there! I'm your empathetic friend. How are you feeling today? Let's talk."); </script> </body> </html>