Hugging Face's logo

Spaces:
sirlaw-dev
/
AfriHealth
Sleeping

App Files Community
1
sirlaw-dev commited on
Commit
4fcfb45
·
verified ·
1 Parent(s): 643de88

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +33 -14
index.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Naija Medical Voice Assistant</title>
8
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
9
  <style>
10
  :root {
@@ -240,8 +240,8 @@
240
 
241
  <div class="container">
242
  <div class="status-badge" id="status">System: Ready</div>
243
- <h1>Naija Health AI</h1>
244
- <p class="subtitle">Your empathetic medical assistant</p>
245
 
246
  <div class="mic-container">
247
  <div class="pulse-rings"></div>
@@ -263,23 +263,27 @@
263
  </div> -->
264
 
265
  <div class="loader" id="loader">
266
- AI is thinking<span>.</span><span>.</span><span>.</span>
267
  </div>
268
 
269
  <div class="chat-box" id="chatBox">
270
  <div class="message">
271
- <div class="label">You said</div>
272
  <div class="content" id="userMsg">...</div>
273
  </div>
 
 
 
 
274
  <div class="message">
275
- <div class="label">Assistant</div>
276
  <div class="content assistant" id="assistantMsg">...</div>
277
  </div>
278
  </div>
279
  </div>
280
 
281
  <div class="container" style="margin-top: 20px; padding: 20px;">
282
- <div class="label" style="text-align: center;">Assistant's Voice</div>
283
  <audio id="audioPlayer" controls></audio>
284
  </div>
285
 
@@ -318,7 +322,7 @@
318
  if (processor) processor.disconnect();
319
  if (mediaStreamSource) mediaStreamSource.disconnect();
320
  micBtn.classList.remove('recording');
321
- status.innerText = "Processing...";
322
 
323
  // Export the recorded audio chunks to a real WAV Blob
324
  const wavBlob = exportWAV(recordedChunks, audioContext.sampleRate);
@@ -347,10 +351,10 @@
347
 
348
  isRecording = true;
349
  micBtn.classList.add('recording');
350
- status.innerText = "Listening...";
351
  } catch (err) {
352
  console.error("Error accessing mic:", err);
353
- alert("Please allow microphone access!");
354
  }
355
  };
356
 
@@ -419,9 +423,24 @@
419
 
420
  if (!response.ok) throw new Error("Server error");
421
 
422
- // Get text from headers and decode Yoruba characters
423
- userMsg.innerText = decodeURIComponent(response.headers.get('X-Input-Text') || "No text detected");
424
- assistantMsg.innerText = decodeURIComponent(response.headers.get('X-Response-Text') || "No response generated");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
425
 
426
  // Get audio blob
427
  const audioBlob = await response.blob();
@@ -436,7 +455,7 @@
436
 
437
  audioPlayer.play().catch(e => {
438
  console.error("Auto-play failed. Please click play manually:", e);
439
- status.innerText = "Click play to hear response";
440
  });
441
 
442
  } catch (err) {
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Naija Medical Voice Assistant (Pidgin)</title>
8
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
9
  <style>
10
  :root {
 
240
 
241
  <div class="container">
242
  <div class="status-badge" id="status">System: Ready</div>
243
+ <h1>Naija Health AI (Pidgin)</h1>
244
+ <p class="subtitle">Talk how your body dey do you make I help you</p>
245
 
246
  <div class="mic-container">
247
  <div class="pulse-rings"></div>
 
263
  </div> -->
264
 
265
  <div class="loader" id="loader">
266
+ AI dey think<span>.</span><span>.</span><span>.</span>
267
  </div>
268
 
269
  <div class="chat-box" id="chatBox">
270
  <div class="message">
271
+ <div class="label">Wetin you talk</div>
272
  <div class="content" id="userMsg">...</div>
273
  </div>
274
+ <div class="message" id="matchedSymptomContainer" style="display: none;">
275
+ <div class="label">Symptom wey match (from Knowledge Base)</div>
276
+ <div class="content" id="matchedSymptomMsg" style="border-left-color: var(--secondary);">...</div>
277
+ </div>
278
  <div class="message">
279
+ <div class="label">Wetin AI recommend</div>
280
  <div class="content assistant" id="assistantMsg">...</div>
281
  </div>
282
  </div>
283
  </div>
284
 
285
  <div class="container" style="margin-top: 20px; padding: 20px;">
286
+ <div class="label" style="text-align: center;">Assistant Voice (Osagie)</div>
287
  <audio id="audioPlayer" controls></audio>
288
  </div>
289
 
 
322
  if (processor) processor.disconnect();
323
  if (mediaStreamSource) mediaStreamSource.disconnect();
324
  micBtn.classList.remove('recording');
325
+ status.innerText = "Dey process...";
326
 
327
  // Export the recorded audio chunks to a real WAV Blob
328
  const wavBlob = exportWAV(recordedChunks, audioContext.sampleRate);
 
351
 
352
  isRecording = true;
353
  micBtn.classList.add('recording');
354
+ status.innerText = "Dey listen...";
355
  } catch (err) {
356
  console.error("Error accessing mic:", err);
357
+ alert("Abeg allow micro-phone make you fit talk!");
358
  }
359
  };
360
 
 
423
 
424
  if (!response.ok) throw new Error("Server error");
425
 
426
+ // Get text from headers and decode Pidgin characters
427
+ const inputVal = decodeURIComponent(response.headers.get('X-Input-Text') || "No pidgin text detected");
428
+ const responseVal = decodeURIComponent(response.headers.get('X-Response-Text') || "No recommendation generated");
429
+ const matchedSymptom = decodeURIComponent(response.headers.get('X-Matched-Symptom') || "");
430
+ const matchedPhrase = decodeURIComponent(response.headers.get('X-Matched-Phrase') || "");
431
+
432
+ userMsg.innerText = inputVal;
433
+ assistantMsg.innerText = responseVal;
434
+
435
+ const matchedSymptomContainer = document.getElementById('matchedSymptomContainer');
436
+ const matchedSymptomMsg = document.getElementById('matchedSymptomMsg');
437
+ if (matchedSymptom) {
438
+ matchedSymptomMsg.innerText = `${matchedSymptom.toUpperCase()} (Wey you talk: "${matchedPhrase}")`;
439
+ matchedSymptomContainer.style.display = 'block';
440
+ } else {
441
+ matchedSymptomMsg.innerText = "No exact symptom match found (Dey use default advice)";
442
+ matchedSymptomContainer.style.display = 'block';
443
+ }
444
 
445
  // Get audio blob
446
  const audioBlob = await response.blob();
 
455
 
456
  audioPlayer.play().catch(e => {
457
  console.error("Auto-play failed. Please click play manually:", e);
458
+ status.innerText = "Press play to hear voice";
459
  });
460
 
461
  } catch (err) {