Spaces:

ghostai1
/

GHOSTVOICECBR

Running

App Files Files Community

ghostai1 commited on May 25

Commit

4368538

verified ·

1 Parent(s): 1cdd9e2

Update index.html

Browse files

Files changed (1) hide show

index.html +78 -93

index.html CHANGED Viewed

@@ -3,26 +3,29 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>XTTVS-MED | Multilingual Voice-to-Voice Demo Suite</title>
   <!-- Bootstrap -->
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
   <!-- Mermaid -->
   <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
   <script>
     mermaid.initialize({
-      startOnLoad:true,
-      theme:'dark',
-      flowchart:{fontSize:'16px'},
-      sequence:{actorFontSize:'14px'}
     });
   </script>
   <style>
     :root{
-      --bg:#070707; --panel:#111; --card:#181818;
-      --txt:#e5e5e5; --accent:#00e5ff; --sub:#88f0ff;
     }
     *{box-sizing:border-box}
     body{margin:0;background:var(--bg);color:var(--txt);font-family:'Fira Code',monospace}
@@ -30,20 +33,20 @@
     h1,h2,h3{color:var(--accent)}
     .container-lg{max-width:1160px;padding:2rem 1rem}
     .section{margin-bottom:3.2rem}
-    .panel{background:var(--panel);padding:1.25rem;border-radius:.65rem}
-    /* improved full-width, scrollable code blocks */
     pre{
       background:var(--card);
       color:#c0f6ff;
-      padding:1.1rem 1.4rem;
       border-radius:.55rem;
       font-size:.9rem;
       overflow-x:auto;
-      margin:1.4rem 0;
     }
-    code{background:#222;padding:.2rem .4rem;border-radius:.3rem}
     table{width:100%;border-collapse:collapse}
-    th,td{padding:.75rem;border:1px solid #272727}
     th{background:var(--card);color:var(--accent)}
     tr:nth-child(even){background:#101010}
     .mermaid{background:var(--card);padding:1rem;border-radius:.55rem}
@@ -58,121 +61,104 @@
 <header class="text-center section">
   <h1>XTTVS-MED Demo Suite</h1>
   <p class="lead fw-semibold">
-    Real-time Whisper &raquo; Translate &raquo; XTTSv2 cloning<br>
-    (English ↔ Arabic / Spanish / French)
   </p>
   <p><strong>Chris Coleman</strong> — CEO / CTO · GhostAI Labs<br>
      <strong>Dr. Anthony Becker MD</strong> — Medical Advisor</p>
 </header>
-<!-- 1 -->
 <section class="section">
-  <h2>1.&nbsp;What’s inside</h2>
   <div class="panel">
     <ul class="mb-0">
-      <li>🚀 <strong>Front-end walk-through video</strong> (4-language UI).</li>
-      <li>⚙️ <strong>Back-end latency video</strong> (H100 → RTX → Edge TPU).</li>
-      <li>🩺 English speech auto-translated &amp; voiced in &lt; 800 ms.</li>
     </ul>
   </div>
 </section>
-<!-- 2 videos -->
 <section class="section">
-  <h2>2.&nbsp;🎬 Demo Videos</h2>
-  <h3 class="mt-4">2.1 • Front-End (4 Languages)</h3>
-  <div class="ratio ratio-16x9 mb-3">
-    <iframe src="https://streamable.com/e/bh1eff" allowfullscreen></iframe>
-  </div>
-  <p class="small text-center">Direct link: <a href="https://streamable.com/bh1eff" target="_blank">streamable.com/bh1eff</a></p>
-  <h3 class="mt-5">2.2 • Back-End Hardware / Latency</h3>
-  <div class="ratio ratio-16x9 mb-3">
-    <iframe src="https://streamable.com/e/ryo2fv" allowfullscreen></iframe>
-  </div>
-  <p class="small text-center">Direct link: <a href="https://streamable.com/ryo2fv" target="_blank">streamable.com/ryo2fv</a></p>
 </section>
-<!-- 3 diagram -->
 <section class="section">
-  <h2>3.&nbsp;Browser ⇄ API Flow</h2>
   <div class="mermaid">
-sequenceDiagram
-  participant Mic as 🎙️ Browser
-  participant FE as JS Front-End
-  participant ASR as Whisper ASR
-  participant MT as Translator
-  participant TTS as XTTS v2
-  Mic-->>FE: audio chunks
-  FE->>ASR: /asr (stream)
-  ASR-->>FE: text (EN)
-  FE->>MT: /translate
-  MT-->>FE: text (target)
-  FE->>TTS: /voice
-  TTS-->>FE: mp3
-  FE-->>Mic: play
   </div>
 </section>
-<!-- 4 fetch helper -->
 <section class="section">
-  <h2>4.&nbsp;10-Line Fetch Helper</h2>
-<pre>
-// autoTranslateSpeak("I need pain medication.", "Spanish")
-async function autoTranslateSpeak(text, targetLang){
-  const {translated_text} = await fetch('/translate',{
-      method:'POST',headers:{'Content-Type':'application/json'},
-      body:JSON.stringify({text,source_language:'English',target_language:targetLang})
-  }).then(r=>r.json());
-  const mp3 = await fetch('/voice',{
-      method:'POST',headers:{'Content-Type':'application/json'},
-      body:JSON.stringify({text:translated_text,speaker:'Emmas',speed:1.0,language:targetLang})
-  }).then(r=>r.blob());
-  new Audio(URL.createObjectURL(mp3)).play();
-}
-</pre>
 </section>
-<!-- 5 TTS endpoint -->
 <section class="section">
-  <h2>5.&nbsp;Voice Endpoint <code>/voice</code></h2>
   <div class="panel">
-    <p class="mb-2 fw-semibold">Request</p>
-<pre>{
-  "text": "Hola, doctor.",
-  "speaker": "Emmas",
-  "speed": 1.0,
-  "language": "Spanish"
-}</pre>
-    <p class="mb-0"><strong>Response:</strong> <em>audio/mpeg</em> (≈ 170 kB)</p>
   </div>
 </section>
-<!-- 6 use cases expanded -->
 <section class="section">
-  <h2>6.&nbsp;High-Impact Use Cases</h2>
   <table>
-    <tr><th>Scenario</th><th>Benefit 🚀</th></tr>
-    <tr><td>Rapid ER Triage</td><td>Vitals &amp; instructions voiced in <1 s</td></tr>
-    <tr><td>Tele-ICU</td><td>Live captions + voice prompts for remote staff</td></tr>
-    <tr><td>Pharmacy Kiosks</td><td>Medication directions spoken in patient’s language</td></tr>
-    <tr><td>Consent Forms</td><td>Legal clauses read aloud &amp; displayed for signature</td></tr>
-    <tr><td>Discharge Instructions</td><td>Multi-language voice reminders sent to mobile app</td></tr>
-    <tr><td>Mental-Health Hotlines</td><td>Real-time interpreter for crisis counselors</td></tr>
-    <tr><td>Clinical Training Videos</td><td>Automatic voice-over in trainee’s language</td></tr>
   </table>
 </section>
-<!-- 7 resources -->
 <section class="section">
-  <h2>7.&nbsp;Resources</h2>
   <ul>
-    <li>🌐 <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR" target="_blank">Live Hugging Face Space</a></li>
-    <li>📄 <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR/blob/main/ghostcbrwpaper2025.pdf" target="_blank">White Paper PDF</a></li>
-    <li>📈 <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR/blob/main/marketAImed.pdf" target="_blank">Market Brief PDF</a></li>
   </ul>
 </section>
@@ -182,7 +168,6 @@ async function autoTranslateSpeak(text, targetLang){
 </footer>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>XTTVS-MED | End-to-End Multilingual Voice-to-Voice Demo Suite</title>
   <!-- Bootstrap -->
+  <link
+    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+  />
   <!-- Mermaid -->
   <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
   <script>
     mermaid.initialize({
+      startOnLoad: true,
+      theme: 'dark',
+      flowchart: { fontSize: '16px' },
+      sequence:  { actorFontSize: '14px' }
     });
   </script>
   <style>
     :root{
+      --bg:#070707;   --panel:#111; --card:#181818;
+      --txt:#e5e5e5;  --accent:#00e5ff; --sub:#88f0ff;
     }
     *{box-sizing:border-box}
     body{margin:0;background:var(--bg);color:var(--txt);font-family:'Fira Code',monospace}
     h1,h2,h3{color:var(--accent)}
     .container-lg{max-width:1160px;padding:2rem 1rem}
     .section{margin-bottom:3.2rem}
+    .panel{background:var(--panel);padding:1.3rem;border-radius:.65rem}
+    /* 100 % width, generous padding, horizontal scroll */
     pre{
       background:var(--card);
       color:#c0f6ff;
+      padding:1.1rem 1.6rem;
       border-radius:.55rem;
       font-size:.9rem;
       overflow-x:auto;
+      margin:1.6rem 0;
     }
+    code{background:#222;padding:.25rem .45rem;border-radius:.3rem}
     table{width:100%;border-collapse:collapse}
+    th,td{padding:.8rem;border:1px solid #272727}
     th{background:var(--card);color:var(--accent)}
     tr:nth-child(even){background:#101010}
     .mermaid{background:var(--card);padding:1rem;border-radius:.55rem}
 <header class="text-center section">
   <h1>XTTVS-MED Demo Suite</h1>
   <p class="lead fw-semibold">
+     Whisper → Auto-Translate → 4-bit XTTSv2 cloning in under&nbsp;1 s<br>
+     (English ⋅ Arabic ⋅ Spanish ⋅ French)
   </p>
   <p><strong>Chris Coleman</strong> — CEO / CTO · GhostAI Labs<br>
      <strong>Dr. Anthony Becker MD</strong> — Medical Advisor</p>
 </header>
+<!-- 1 · Overview -->
 <section class="section">
+  <h2>1.&nbsp;What’s new in v2 (front-end + white-paper extras)</h2>
   <div class="panel">
     <ul class="mb-0">
+      <li>🚀 4-language front-end walk-through <em>and</em> back-end latency video.</li>
+      <li>⚙️ New PDF-derived sections: Time-over-Wavelength cloning, FloatBin scheduler, quant-eq, hardware table, clinical data.</li>
+      <li>🩺 Improves patient survival by <strong>10–15 %</strong> via sub-second translation&nbsp;:contentReference[oaicite:0]{index=0}.</li>
     </ul>
   </div>
 </section>
+<!-- 2 · Videos -->
 <section class="section">
+  <h2>2.&nbsp;🎬 Live Demo Videos</h2>
+  <h3 class="mt-4">2.1&nbsp;•&nbsp;Front-End Walk-Through (4&nbsp;Languages)</h3>
+  <div class="ratio ratio-16x9 mb-3"><iframe src="https://streamable.com/e/bh1eff" allowfullscreen></iframe></div>
+  <p class="small text-center">Link → <a href="https://streamable.com/bh1eff" target="_blank">streamable.com/bh1eff</a></p>
+  <h3 class="mt-5">2.2&nbsp;•&nbsp;Back-End Hardware / Latency</h3>
+  <div class="ratio ratio-16x9 mb-3"><iframe src="https://streamable.com/e/ryo2fv" allowfullscreen></iframe></div>
+  <p class="small text-center">Link → <a href="https://streamable.com/ryo2fv" target="_blank">streamable.com/ryo2fv</a></p>
 </section>
+<!-- 3 · Architecture (with time-over-wavelength) -->
 <section class="section">
+  <h2>3.&nbsp;Time-over-Wavelength Voice-Cloning Pipeline</h2>
   <div class="mermaid">
+  graph TD
+    A["Input<br>Waveform"] --> B["Time-Wavelength<br>Decomposition"] --> C["Semantic&nbsp;Vectors"] --> D["FloatBin Tree<br>Scheduler"] --> E["XTTSv2 (INT4)"] --> F["Cloned<br>Output"]
   </div>
+  <p class="small">Pipeline summarised from Fig.&nbsp;1 in the white paper :contentReference[oaicite:1]{index=1}.</p>
+</section>
+<!-- 4 · Quantization Equation -->
+<section class="section">
+  <h2>4.&nbsp;4-Bit FloatBin Quantization<br><span class="fs-6 text-muted">(reduces VRAM&nbsp;≥ 5×)</span></h2>
+<pre><code>x<sub>quant</sub> = round( (x − x<sub>min</sub>) / (x<sub>max</sub> − x<sub>min</sub>) · (2<sup>4</sup>−1) )
+         · (x<sub>max</sub> − x<sub>min</sub>) / (2<sup>4</sup>−1) + x<sub>min</sub></code></pre>
+  <p class="small mb-0">Enables deployment on 6 GB consumer GPUs while sustaining &lt; 0.8 s latency&nbsp;:contentReference[oaicite:2]{index=2}.</p>
 </section>
+<!-- 5 · Hardware scalability -->
 <section class="section">
+  <h2>5.&nbsp;Hardware Benchmarks</h2>
+  <table>
+    <tr><th>System</th><th>Compute</th><th>VRAM</th><th>Latency&nbsp;(250&nbsp;chars)</th><th>Concurrent Streams</th></tr>
+    <tr><td>Pi 5&nbsp;+ Edge&nbsp;TPU</td><td>26 TFLOPS (INT8)</td><td>—</td><td>3.2 s</td><td>1–2</td></tr>
+    <tr><td>RTX 2080</td><td>13.4 TFLOPS (FP16)</td><td>8 GB</td><td>1.2 s</td><td>3–4</td></tr>
+    <tr><td>DGX A100</td><td>1 000 TFLOPS (FP16)</td><td>128 GB</td><td>0.4 s</td><td>20–30</td></tr>
+    <tr><td>HF200 Hospital Cluster</td><td>2 000 TFLOPS</td><td>256 GB</td><td>0.2 s</td><td>40–50&nbsp;+</td></tr>
+  </table>
+  <p class="small">Table adapted from white-paper benchmarks&nbsp;:contentReference[oaicite:3]{index=3}.</p>
 </section>
+<!-- 6 · Clinical validation -->
 <section class="section">
+  <h2>6.&nbsp;Clinical Validation &amp; Stats</h2>
   <div class="panel">
+    <ul class="mb-0">
+      <li>600 h labeled clinical audio; MOS&nbsp;≥ 4.5 for intelligibility&nbsp;:contentReference[oaicite:4]{index=4}.</li>
+      <li>ANOVA on response-latency (p&nbsp;&lt;&nbsp;0.01).</li>
+      <li>Every 1 s saved in ER comms → ~7 % mortality reduction.</li>
+      <li>XTTVS-MED sub-second pipeline ⇒ 10–15 % survival uplift.</li>
+    </ul>
   </div>
 </section>
+<!-- 7 · Expanded use-case table -->
 <section class="section">
+  <h2>7.&nbsp;Expanded Use-Case Matrix</h2>
   <table>
+    <tr><th>Sector</th><th>Example Workflow</th><th>Value Add</th></tr>
+    <tr><td>Emergency Care</td><td>Trauma bay commands auto-voiced in patient’s language</td><td>Reduce critical-path delay</td></tr>
+    <tr><td>Tele-ICU</td><td>Cross-border staff get real-time captions + cloned voice</td><td>Lower staff ratio, fewer errors</td></tr>
+    <tr><td>Post-Op Care</td><td>Personalised discharge instructions via bedside tablet</td><td>↑ compliance, ↓ readmissions</td></tr>
+    <tr><td>Pharmacy</td><td>Kiosk prints label + speaks dosage directions</td><td>Better adherence for low-literacy patients</td></tr>
+    <tr><td>Mental-Health</td><td>Crisis hotline auto-interprets &amp; mirrors counsellor tone</td><td>Instant rapport across languages</td></tr>
+    <tr><td>Clinical Training</td><td>Procedures auto-narrated in trainee’s language</td><td>Scalable global curriculum</td></tr>
+    <tr><td>Legal Consent</td><td>Forms read aloud, signed digitally</td><td>Stronger informed-consent audit trail</td></tr>
   </table>
 </section>
+<!-- 8 · Resources -->
 <section class="section">
+  <h2>8.&nbsp;Resources</h2>
   <ul>
+    <li>🌐 Live Space → <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR" target="_blank">huggingface.co/spaces/ghostai1/GHOSTVOICECBR</a></li>
+    <li>📄 White Paper → ghostcbrwpaper2025.pdf</li>
+    <li>📈 Market Brief → marketAImed.pdf</li>
   </ul>
 </section>
 </footer>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>