Spaces:

Deepti-AI
/

KAMMI

Sleeping

App Files Files Community

Deepti-AI commited on Oct 1

Commit

c4e5a40

verified ·

1 Parent(s): a917add

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +50 -56

templates/index.html CHANGED Viewed

@@ -4,31 +4,42 @@
   <meta charset="utf-8" />
   <title>Ortho Buddy — Voice</title>
   <style>
-    html,body { height:100%; margin:0; font-family: "Segoe UI", Roboto, Arial;
-      background: radial-gradient(circle at 50% 10%, #144a2b, #062219); color:#bfe6c9; }
     .container { width:360px; margin:40px auto; text-align:center; }
-    h1 { letter-spacing:4px; font-size:36px; color:#2de08b;
-      text-shadow:0 6px 30px rgba(0,0,0,0.7); margin:20px 0; }
     .subtitle { color:#d6f3de; margin-bottom:10px; font-size:24px; }
-    .robot { width:270px; height:270px; background: url('/static/robot.gif') center/contain no-repeat;
-      margin: 40px auto; border-radius:8px; }
     .control { margin-top:20px; }
-    .record-btn { width:50px; height:50px; border-radius:60px; border:none;
-      background:linear-gradient(rgb(248, 245, 248), rgb(248, 245, 248));
-      box-shadow: 0 10px 30px rgba(0,0,0,0.6); color:white; font-size:18px; cursor:pointer; }
-    .record-btn.recording { background: linear-gradient(#ff6666, #cc2222);
-      box-shadow: 0 10px 30px rgba(0,0,0,0.7); }
-    .reset-btn { position: fixed; top: 20px; right: 20px; padding: 10px 20px;
-      background: linear-gradient(#2de08b, #0a8f5c); border: none; border-radius: 6px;
-      font-size: 16px; font-weight: bold; color: #062219; cursor: pointer;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); z-index: 1000; transition: background 0.3s ease; }
-    .reset-btn:hover { background: linear-gradient(#1bc47a, #07734f); }
-    .text-stream { margin-top:20px; text-align:left; font-size:16px; }
   </style>
 </head>
 <body>
-  <h1 class="heading">Summit Dental & Orthopedics</h1>
   <div class="container">
     <div class="subtitle"><b>KAMMI</b></div>
     <div class="robot" id="robotImg"></div>
@@ -42,9 +53,7 @@
     <div class="text-stream" id="textStream"></div>
     <!-- Hidden audio player for streamed voice -->
-    <audio id="player" controls autoplay playsinline hidden></audio>
-    <!-- Optional fallback button for mobile autoplay -->
-    <button id="playBtn" style="display:none;">▶️ Play Response</button>
   </div>
 <script>
@@ -54,12 +63,11 @@ let recBtn = document.getElementById("recBtn");
 let textStream = document.getElementById("textStream");
 let recording = false;
 let player = document.getElementById("player");
-let playBtn = document.getElementById("playBtn");
-// Reset chat
 document.getElementById("resetBtn").addEventListener("click", async () => {
   try {
-    const response = await fetch("/reset_chat", { method: "POST" });
     if (response.ok) {
       showTempMessage("Please proceed.", "lightgreen");
     } else {
@@ -70,23 +78,18 @@ document.getElementById("resetBtn").addEventListener("click", async () => {
     showTempMessage("Reset error: " + error.message, "#ffb3b3");
   }
 });
 // Utility function to show a message for 2 seconds
 function showTempMessage(msg, color) {
   const msgDiv = document.createElement("div");
   msgDiv.style.color = color;
   msgDiv.textContent = msg;
   textStream.appendChild(msgDiv);
-  setTimeout(() => { msgDiv.remove(); }, 2000);
 }
-// Record button logic
 recBtn.addEventListener("click", async () => {
   if (!recording) {
-    // Prime audio for mobile autoplay
-    try { await player.play(); player.pause(); }
-    catch(e) { console.warn("Audio priming failed:", e); }
     await startRecording();
   } else {
     stopRecordingAndSend();
@@ -95,10 +98,8 @@ recBtn.addEventListener("click", async () => {
   recBtn.textContent = recording ? "Stop" : "🎤";
   recBtn.classList.toggle("recording", recording);
 });
-// Start recording
 async function startRecording() {
-  textStream.innerHTML = "";
   audioChunks = [];
   if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
     alert("Your browser does not support microphone capture.");
@@ -106,11 +107,11 @@ async function startRecording() {
   }
   const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
   mediaRecorder = new MediaRecorder(stream);
-  mediaRecorder.ondataavailable = e => { if (e.data.size > 0) audioChunks.push(e.data); };
   mediaRecorder.start();
 }
-// Stop recording & send to server
 function stopRecordingAndSend() {
   if (!mediaRecorder) return;
   mediaRecorder.stop();
@@ -118,21 +119,24 @@ function stopRecordingAndSend() {
     const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
     const form = new FormData();
     form.append("file", audioBlob, "recording.webm");
-    const resp = await fetch("/chat_stream", { method: "POST", body: form });
     if (!resp.ok) {
       const txt = await resp.text();
       textStream.innerHTML += "<div style='color:#ffb3b3'>Server error: " + txt + "</div>";
       return;
     }
-    // Stream audio using MediaSource
     const mediaSource = new MediaSource();
     player.src = URL.createObjectURL(mediaSource);
     mediaSource.addEventListener('sourceopen', async () => {
       const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
       const reader = resp.body.getReader();
-      while(true) {
         const { done, value } = await reader.read();
         if (done) break;
         sourceBuffer.appendBuffer(value);
@@ -140,19 +144,9 @@ function stopRecordingAndSend() {
       }
       mediaSource.endOfStream();
     });
-    // Show fallback play button if autoplay blocked
-    player.play().catch(() => {
-      playBtn.style.display = "inline-block";
-    });
   };
 }
-// Fallback play button
-playBtn.addEventListener("click", () => {
-  player.play();
-  playBtn.style.display = "none";
-});
 </script>
 </body>
-</html>

   <meta charset="utf-8" />
   <title>Ortho Buddy — Voice</title>
   <style>
+    html,body { height:100%; margin:0; font-family: "Segoe UI", Roboto, Arial; background: radial-gradient(circle at 50% 10%, #144a2b, #062219); color:#bfe6c9; }
     .container { width:360px; margin:40px auto; text-align:center; }
+    h1 { letter-spacing:4px; font-size:36px; color:#2de08b; text-shadow:0 6px 30px rgba(0,0,0,0.7); margin:20px 0; }
     .subtitle { color:#d6f3de; margin-bottom:10px; font-size:24px; }
+    .robot { width:270px; height:270px; background: url('/static/robot.gif') center/contain no-repeat; margin: 40px auto; border-radius:8px; }
     .control { margin-top:20px; }
+    .record-btn { width:50px; height:50px; border-radius:60px; border:none; background:linear-gradient(rgb(248, 245, 248), rgb(248, 245, 248)); box-shadow: 0 10px 30px rgba(0,0,0,0.6); color:white; font-size:18px; cursor:pointer; }
+    .record-btn.recording { background: linear-gradient(#ff6666, #cc2222); box-shadow: 0 10px 30px rgba(0,0,0,0.7); }
+    .heading {
+  text-align: center;
+}
+    .reset-btn {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 10px 20px;
+    background: linear-gradient(#2de08b, #0a8f5c);
+    border: none;
+    border-radius: 6px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #062219;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+    transition: background 0.3s ease;
+}
+    .reset-btn:hover {
+  background: linear-gradient(#1bc47a, #07734f);
+}
   </style>
+    <h1 class = "heading">Summit Dental & Orthopedics</h1>
 </head>
 <body>
   <div class="container">
     <div class="subtitle"><b>KAMMI</b></div>
     <div class="robot" id="robotImg"></div>
     <div class="text-stream" id="textStream"></div>
     <!-- Hidden audio player for streamed voice -->
+    <audio id="player" controls autoplay hidden></audio>
   </div>
 <script>
 let textStream = document.getElementById("textStream");
 let recording = false;
 let player = document.getElementById("player");
 document.getElementById("resetBtn").addEventListener("click", async () => {
   try {
+    const response = await fetch("/reset_chat", {
+      method: "POST"
+    });
     if (response.ok) {
       showTempMessage("Please proceed.", "lightgreen");
     } else {
     showTempMessage("Reset error: " + error.message, "#ffb3b3");
   }
 });
 // Utility function to show a message for 2 seconds
 function showTempMessage(msg, color) {
   const msgDiv = document.createElement("div");
   msgDiv.style.color = color;
   msgDiv.textContent = msg;
   textStream.appendChild(msgDiv);
+  setTimeout(() => {
+    msgDiv.remove();
+  }, 2000);
 }
 recBtn.addEventListener("click", async () => {
   if (!recording) {
     await startRecording();
   } else {
     stopRecordingAndSend();
   recBtn.textContent = recording ? "Stop" : "🎤";
   recBtn.classList.toggle("recording", recording);
 });
 async function startRecording() {
+  textStream.innerHTML = ""; // clear previous
   audioChunks = [];
   if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
     alert("Your browser does not support microphone capture.");
   }
   const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
   mediaRecorder = new MediaRecorder(stream);
+  mediaRecorder.ondataavailable = e => {
+    if (e.data && e.data.size > 0) audioChunks.push(e.data);
+  };
   mediaRecorder.start();
 }
 function stopRecordingAndSend() {
   if (!mediaRecorder) return;
   mediaRecorder.stop();
     const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
     const form = new FormData();
     form.append("file", audioBlob, "recording.webm");
+    // fetch streaming audio directly
+    console.log("Sending audio to server...");
+    const resp = await fetch("/chat_stream", {
+      method: "POST",
+      body: form,
+    });
     if (!resp.ok) {
       const txt = await resp.text();
       textStream.innerHTML += "<div style='color:#ffb3b3'>Server error: " + txt + "</div>";
       return;
     }
+    // create an object URL from streaming response
     const mediaSource = new MediaSource();
     player.src = URL.createObjectURL(mediaSource);
     mediaSource.addEventListener('sourceopen', async () => {
       const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
       const reader = resp.body.getReader();
+      while (true) {
         const { done, value } = await reader.read();
         if (done) break;
         sourceBuffer.appendBuffer(value);
       }
       mediaSource.endOfStream();
     });
+    player.play();
   };
 }
 </script>
 </body>
+</html>