Spaces:

Shresthh03
/

Chatbot-2

Sleeping

App Files Files Community

Shresthh03 commited on Oct 19

Commit

7a4aa29

verified ·

1 Parent(s): 73f39c5

Update everything.

Browse files

Just update everything and make it final launch ready.

Files changed (1) hide show

index.html +74 -6

index.html CHANGED Viewed

@@ -7,7 +7,22 @@
 </head>
 <body class="transition-all duration-700 bg-gradient-to-br from-yellow-200 to-yellow-400 text-gray-800 flex flex-col items-center justify-center min-h-screen p-4" id="bg">
   <div class="max-w-md w-full bg-white bg-opacity-70 rounded-3xl shadow-lg p-6 text-center">
-    <h1 class="text-2xl font-bold mb-4 text-gray-900">🌿 Serenity AI — Your Caring Companion</h1>
     <div id="chat-box" class="h-64 overflow-y-auto mb-4 border rounded-xl p-3 bg-gray-50 text-left"></div>
@@ -28,6 +43,16 @@
     recognition.lang = "en-US";
     recognition.continuous = false;
     function appendMessage(sender, text) {
       const div = document.createElement("div");
       div.className = sender === "user" ? "text-right text-blue-700 my-2" : "text-left text-gray-800 my-2";
@@ -50,17 +75,55 @@
       const data = await response.json();
       appendMessage("bot", data.reply);
-      speakText(data.reply);
       changeBackground(data.emotion);
     }
-    function speakText(text) {
       synth.cancel();
       const utter = new SpeechSynthesisUtterance(text);
-      utter.pitch = 0.7;
-      utter.rate = 0.9;
       utter.volume = 1;
-      utter.voice = synth.getVoices().find(v => v.name.toLowerCase().includes("male") || v.name.toLowerCase().includes("microsoft")) || synth.getVoices()[0];
       synth.speak(utter);
     }
@@ -90,6 +153,11 @@
       }
       bg.className = `transition-all duration-700 bg-gradient-to-br ${gradient} flex flex-col items-center justify-center min-h-screen p-4`;
     }
   </script>
 </body>
 </html>

 </head>
 <body class="transition-all duration-700 bg-gradient-to-br from-yellow-200 to-yellow-400 text-gray-800 flex flex-col items-center justify-center min-h-screen p-4" id="bg">
   <div class="max-w-md w-full bg-white bg-opacity-70 rounded-3xl shadow-lg p-6 text-center">
+    <h1 class="text-2xl font-bold mb-3 text-gray-900">🌿 Serenity AI — Your Caring Companion</h1>
+    <!-- Voice Selector -->
+    <div class="mb-4">
+      <label for="voiceSelect" class="block text-gray-700 font-semibold mb-1">🎧 Choose Serenity's Voice:</label>
+      <select id="voiceSelect" class="w-full p-2 border rounded-lg bg-white">
+        <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 Loving Female</option>
+        <option value="feminine_female">Feminine Female</option>
+        <option value="deep_female">Deep & Soar Female</option>
+        <option value="soothing_female">Soothing Female</option>
+        <option value="neutral">Neutral Soothing Voice</option>
+      </select>
+    </div>
     <div id="chat-box" class="h-64 overflow-y-auto mb-4 border rounded-xl p-3 bg-gray-50 text-left"></div>
     recognition.lang = "en-US";
     recognition.continuous = false;
+    // Load saved voice preference if available
+    let selectedVoiceProfile = localStorage.getItem("voiceProfile") || "calm_male";
+    document.getElementById("voiceSelect").value = selectedVoiceProfile;
+    // Change voice preference dynamically
+    document.getElementById("voiceSelect").addEventListener("change", (e) => {
+      selectedVoiceProfile = e.target.value;
+      localStorage.setItem("voiceProfile", selectedVoiceProfile);
+    });
     function appendMessage(sender, text) {
       const div = document.createElement("div");
       div.className = sender === "user" ? "text-right text-blue-700 my-2" : "text-left text-gray-800 my-2";
       const data = await response.json();
       appendMessage("bot", data.reply);
+      speakText(data.reply, selectedVoiceProfile);
       changeBackground(data.emotion);
     }
+    function speakText(text, voiceProfile) {
       synth.cancel();
       const utter = new SpeechSynthesisUtterance(text);
+      const voices = synth.getVoices();
+      // Default values
+      utter.pitch = 1;
+      utter.rate = 1;
       utter.volume = 1;
+      // Apply styles based on voice profile
+      switch (voiceProfile) {
+        case "calm_male":
+          utter.pitch = 0.8; utter.rate = 0.95;
+          utter.voice = voices.find(v => v.name.toLowerCase().includes("male")) || voices[0];
+          break;
+        case "deep_male":
+          utter.pitch = 0.6; utter.rate = 0.9;
+          utter.voice = voices.find(v => v.name.toLowerCase().includes("microsoft") && v.name.toLowerCase().includes("david")) || voices[0];
+          break;
+        case "soothing_male":
+          utter.pitch = 0.9; utter.rate = 0.85;
+          utter.voice = voices.find(v => v.name.toLowerCase().includes("male")) || voices[0];
+          break;
+        case "gentle_female":
+          utter.pitch = 1.3; utter.rate = 0.95;
+          utter.voice = voices.find(v => v.name.toLowerCase().includes("female")) || voices[0];
+          break;
+        case "feminine_female":
+          utter.pitch = 1.5; utter.rate = 1;
+          utter.voice = voices.find(v => v.name.toLowerCase().includes("female")) || voices[0];
+          break;
+        case "deep_female":
+          utter.pitch = 0.9; utter.rate = 0.9;
+          utter.voice = voices.find(v => v.name.toLowerCase().includes("female")) || voices[0];
+          break;
+        case "soothing_female":
+          utter.pitch = 1.2; utter.rate = 0.85;
+          utter.voice = voices.find(v => v.name.toLowerCase().includes("female")) || voices[0];
+          break;
+        case "neutral":
+          utter.pitch = 1; utter.rate = 1; utter.voice = voices[0];
+          break;
+      }
       synth.speak(utter);
     }
       }
       bg.className = `transition-all duration-700 bg-gradient-to-br ${gradient} flex flex-col items-center justify-center min-h-screen p-4`;
     }
+    // Reload available voices properly when browser loads them
+    if (speechSynthesis.onvoiceschanged !== undefined) {
+      speechSynthesis.onvoiceschanged = () => {};
+    }
   </script>
 </body>
 </html>