Spaces:

ghostai1
/

GHOSTVOICECBR

Running

App Files Files Community

ghostai1 commited on May 25

Commit

c265174

verified ·

1 Parent(s): 2c46e9f

Update index.html

Browse files

Files changed (1) hide show

index.html +102 -69

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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"/>
@@ -11,136 +11,168 @@
   <!-- 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}
     a{color:var(--sub)} a:hover{text-decoration:underline}
-    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}
     pre{
       background:var(--card);
-      color:#c0f6ff;
-      padding:1.2rem 1.7rem;
       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}
-    footer{background:#0d0d0d;color:#888;text-align:center;padding:1.3rem 1rem;margin-top:4rem}
   </style>
 </head>
-<body>
-<div class="container-lg">
-  <!-- Header -->
-  <header class="text-center section">
-    <h1>XTTVS-MED Demo Suite</h1>
-    <p class="lead fw-semibold">
-      Whisper → Auto-Translate → 4-bit XTTSv2 cloning&nbsp;·&nbsp;Sub-second across&nbsp;EN-AR-ES-FR
     </p>
     <p><strong>Chris Coleman</strong> — CEO / CTO · GhostAI Labs<br>
-       <strong>Dr. Anthony Becker&nbsp;MD</strong> — Medical Advisor</p>
   </header>
-  <!-- 1 -->
-  <section class="section">
     <h2>1.&nbsp;Key Points</h2>
     <div class="panel">
       <ul class="mb-0">
-        <li>⚡ End-to-end pipeline &lt; 1&nbsp;s on a 6&nbsp;GB gaming GPU.</li>
-        <li>🗣️ Same speaker timbre across four languages via LoRA adapters.</li>
-        <li>📉 4-bit FloatBin quantization drops VRAM by 5-6×.</li>
-        <li>🏥 Reduces critical ER communication delay by ≈ 10-15 % survival uplift.</li>
       </ul>
     </div>
   </section>
   <!-- 2 Videos -->
-  <section class="section">
-    <h2>2.&nbsp;🎬 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>
-    <h3 class="mt-5">2.2&nbsp;•&nbsp;Back-End Latency &amp; Hardware</h3>
     <div class="ratio ratio-16x9 mb-3">
       <iframe src="https://streamable.com/e/ryo2fv" allowfullscreen></iframe>
     </div>
   </section>
-  <!-- 3 Architecture -->
-  <section class="section">
-    <h2>3.&nbsp;Pipeline (Time-over-Wavelength)</h2>
     <div class="mermaid">
 graph TD
-  A["Input Audio"] --> B["Time-Wavelength<br>Decomposition"]
-  B --> C["Semantic&nbsp;Vectors"]
-  C --> D["FloatBin<br>Scheduler"]
-  D --> E["XTTSv2<br>(INT4)"]
-  E --> F["Cloned Output"]
     </div>
   </section>
-  <!-- 4 Quant equation -->
-  <section class="section">
     <h2>4.&nbsp;4-Bit FloatBin Quantization</h2>
-<pre>x<sub>q</sub> = round( (x − x<sub>min</sub>) / (x<sub>max</sub> − x<sub>min</sub>) · 15 )
        · (x<sub>max</sub> − x<sub>min</sub>) / 15 + x<sub>min</sub></pre>
-    <p class="small mb-0">Allows full model on GTX&nbsp;2060 6&nbsp;GB while keeping quality ≥ 4.4 MOS.</p>
   </section>
   <!-- 5 Hardware -->
-  <section class="section">
     <h2>5.&nbsp;Latency vs. Hardware</h2>
     <table>
-      <tr><th>System</th><th>Compute</th><th>VRAM</th><th>Latency&nbsp;250&nbsp;chars</th><th>Streams</th></tr>
-      <tr><td>Pi&nbsp;5 + TPU</td><td>26 TFLOPS&nbsp;INT8</td><td>—</td><td>3.2 s</td><td>1-2</td></tr>
-      <tr><td>RTX 2080</td><td>13 TFLOPS&nbsp;FP16</td><td>8 GB</td><td>1.2 s</td><td>3-4</td></tr>
-      <tr><td>DGX A100</td><td>1 PFLOP</td><td>128 GB</td><td>0.4 s</td><td>20-30</td></tr>
-      <tr><td>HF200 Cluster</td><td>2 PFLOPS</td><td>256 GB</td><td>0.2 s</td><td>40-50+</td></tr>
     </table>
   </section>
-  <!-- 6 Use-case matrix -->
-  <section class="section">
     <h2>6.&nbsp;Expanded Use-Case Matrix</h2>
     <table>
       <tr><th>Sector</th><th>Workflow</th><th>Impact</th></tr>
-      <tr><td>ER&nbsp;Triage</td><td>Auto-voice vital alerts</td><td>&gt;&nbsp;10 % faster interventions</td></tr>
-      <tr><td>Tele-ICU</td><td>Live captions + cloned voice</td><td>Lower staffing ratio</td></tr>
       <tr><td>Post-Op</td><td>Discharge voice reminders</td><td>↓ readmissions</td></tr>
       <tr><td>Pharmacy</td><td>Label read-outs</td><td>↑ adherence</td></tr>
-      <tr><td>Mental-Health</td><td>Real-time interpreter</td><td>24/7 multilingual hotline</td></tr>
-      <tr><td>Training</td><td>Procedures auto-narrated</td><td>Scalable global education</td></tr>
-      <tr><td>Legal Consent</td><td>Forms voiced + display</td><td>Stronger audit trail</td></tr>
     </table>
   </section>
   <!-- 7 Fetch helper -->
-  <section class="section">
     <h2>7.&nbsp;10-Line Fetch Helper</h2>
 <pre>
 // autoTranslateSpeak("I need pain medication.", "Spanish")
@@ -161,16 +193,17 @@ async function autoTranslateSpeak(text, target){
   </section>
   <!-- 8 Links -->
-  <section class="section">
-    <h2>8.&nbsp;Links</h2>
     <ul>
-      <li>🌐 Live Space – <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR" target="_blank">ghostvoicecbr on HF Spaces</a></li>
-      <li>📊 Market brief – <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR/blob/main/marketAImed.pdf" target="_blank">AImed market-fit</a></li>
     </ul>
   </section>
   <footer>
-    &copy; 2025 GhostAI Labs · <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR" target="_blank">Try the live app</a>
   </footer>
 </div>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>XTTVS-MED | Real-Time Multilingual Voice-to-Voice 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:#101010; --card:#181818;
+      --txt:#e6e6e6; --accent:#00e5ff; --sub:#88f0ff;
     }
     *{box-sizing:border-box}
     body{margin:0;background:var(--bg);color:var(--txt);font-family:'Fira Code',monospace}
     a{color:var(--sub)} a:hover{text-decoration:underline}
+    h1,h2,h3,h4{color:var(--accent)}
+    .container-xl{max-width:1260px;padding:2rem 1rem}
+    .section{margin-bottom:3.3rem}
+    .panel{background:var(--panel);padding:1.3rem;border-radius:.7rem}
     pre{
       background:var(--card);
+      color:#c2f3ff;
+      padding:1.3rem 1.8rem;
       border-radius:.55rem;
       font-size:.9rem;
       overflow-x:auto;
+      margin:1.7rem 0;
     }
+    code{background:#242424;padding:.25rem .5rem;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:#0d0d0d}
+    .mermaid{background:var(--card);padding:1.1rem;border-radius:.6rem}
+    footer{background:#0d0d0d;color:#888;text-align:center;padding:1.4rem 1rem;margin-top:4rem;font-size:.9rem}
+    /* off-canvas menu button */
+    .navbar-toggler{border-color:var(--accent)}
+    .navbar-brand, .nav-link{color:var(--accent)!important}
+    .nav-link:hover{color:var(--sub)!important}
+    .offcanvas{background:var(--panel)}
+    .offcanvas a{color:var(--txt)!important}
   </style>
 </head>
+<body data-bs-spy="scroll" data-bs-target="#navMain" data-bs-offset="100">
+<!-- NAVBAR -->
+<nav id="navMain" class="navbar navbar-dark navbar-expand-lg fixed-top" style="background:#000;">
+  <div class="container-fluid">
+    <a class="navbar-brand fw-bold" href="#">XTTVS-MED</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  </div>
+</nav>
+<!-- Off-canvas navigation -->
+<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNav">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title">Sections</h5>
+    <button class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
+  </div>
+  <div class="offcanvas-body">
+    <ul class="navbar-nav gap-2">
+      <li><a class="nav-link" href="#kp">Key Points</a></li>
+      <li><a class="nav-link" href="#videos">Demo Videos</a></li>
+      <li><a class="nav-link" href="#pipeline">Architecture</a></li>
+      <li><a class="nav-link" href="#quant">Quantization</a></li>
+      <li><a class="nav-link" href="#hardware">Hardware</a></li>
+      <li><a class="nav-link" href="#usecases">Use Cases</a></li>
+      <li><a class="nav-link" href="#fetch">Fetch Helper</a></li>
+      <li><a class="nav-link" href="#links">Links</a></li>
+    </ul>
+  </div>
+</div>
+<div class="container-xl">
+  <!-- Hero -->
+  <header class="text-center mb-5" style="padding-top:4.5rem">
+    <h1 class="mb-2">XTTVS-MED Demo Suite</h1>
+    <p class="lead fw-semibold mb-3">
+      Whisper&nbsp;→&nbsp;Translate&nbsp;→&nbsp;4-bit XTTSv2 | Sub-second EN-AR-ES-FR
     </p>
     <p><strong>Chris Coleman</strong> — CEO / CTO · GhostAI Labs<br>
+       <strong>Dr. Anthony Becker MD</strong> �� Medical Advisor</p>
   </header>
+  <!-- 1 Key points -->
+  <section id="kp" class="section">
     <h2>1.&nbsp;Key Points</h2>
     <div class="panel">
       <ul class="mb-0">
+        <li>⚡ End-to-end &lt; 1 s on 6 GB consumer GPU.</li>
+        <li>🗣️ Speaker timbre preserved across EN/AR/ES/FR via LoRA adapters.</li>
+        <li>🧩 FloatBin 4-bit quantization → 5-6× VRAM drop, same MOS.</li>
+        <li>🏥 ER communication delay ↓ 10–15 % → measurable survival uplift.</li>
       </ul>
     </div>
   </section>
   <!-- 2 Videos -->
+  <section id="videos" class="section">
+    <h2>2.&nbsp;🎬 Live Demo Videos</h2>
+    <h3 class="mt-4">2.1&nbsp;Front-End Walk-Through (4 Languages)</h3>
     <div class="ratio ratio-16x9 mb-3">
       <iframe src="https://streamable.com/e/bh1eff" allowfullscreen></iframe>
     </div>
+    <h3 class="mt-5">2.2&nbsp;Back-End Latency / Hardware</h3>
     <div class="ratio ratio-16x9 mb-3">
       <iframe src="https://streamable.com/e/ryo2fv" allowfullscreen></iframe>
     </div>
   </section>
+  <!-- 3 Pipeline -->
+  <section id="pipeline" class="section">
+    <h2>3.&nbsp;Architecture — Time-over-Wavelength Clone</h2>
     <div class="mermaid">
 graph TD
+  Mic["Input Audio"] --> TW["Time-Wavelength<br>Decompose"]
+  TW --> Sem["Semantic Vectors"]
+  Sem --> FB["FloatBin&nbsp;Scheduler"]
+  FB --> INT4["XTTS v2 (INT4)"]
+  INT4 --> Out["Cloned Output"]
     </div>
   </section>
+  <!-- 4 Quant -->
+  <section id="quant" class="section">
     <h2>4.&nbsp;4-Bit FloatBin Quantization</h2>
+<pre>x<sub>q</sub> = round( (x − x<sub>min</sub>) / (x<sub>max</sub> − x<sub>min</sub>) · 15 )
        · (x<sub>max</sub> − x<sub>min</sub>) / 15 + x<sub>min</sub></pre>
+    <p class="small mb-0">Works on GTX 2060 6 GB with MOS ≥ 4.4 and 0.8 s latency.</p>
   </section>
   <!-- 5 Hardware -->
+  <section id="hardware" class="section">
     <h2>5.&nbsp;Latency vs. Hardware</h2>
     <table>
+      <tr><th>System</th><th>Compute</th><th>VRAM</th><th>Latency* (250 chars)</th><th>Streams</th></tr>
+      <tr><td>Pi 5 + Edge 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 TFLOPS FP16</td><td>8 GB</td><td>1.2 s</td><td>3–4</td></tr>
+      <tr><td>DGX A100</td><td>1 PFLOP</td><td>128 GB</td><td>0.4 s</td><td>20–30</td></tr>
+      <tr><td>HF200 Cluster</td><td>2 PFLOPS</td><td>256 GB</td><td>0.2 s</td><td>40–50+</td></tr>
     </table>
+    <p class="small">*End-to-end: ASR → Translate → Speech synthesis</p>
   </section>
+  <!-- 6 Use cases -->
+  <section id="usecases" class="section">
     <h2>6.&nbsp;Expanded Use-Case Matrix</h2>
     <table>
       <tr><th>Sector</th><th>Workflow</th><th>Impact</th></tr>
+      <tr><td>ER Triage</td><td>Vitals voiced in patient language</td><td>&gt; 10 % faster intervention</td></tr>
+      <tr><td>Tele-ICU</td><td>Live caption + cloned voice</td><td>Lower staff ratio</td></tr>
       <tr><td>Post-Op</td><td>Discharge voice reminders</td><td>↓ readmissions</td></tr>
       <tr><td>Pharmacy</td><td>Label read-outs</td><td>↑ adherence</td></tr>
+      <tr><td>Mental-Health</td><td>Interpreter in crisis hotlines</td><td>24/7 multilingual support</td></tr>
+      <tr><td>Training</td><td>Procedures auto-narrated</td><td>Global education scale</td></tr>
+      <tr><td>Legal Consent</td><td>Forms voiced &amp; displayed</td><td>Stronger audit trail</td></tr>
     </table>
   </section>
   <!-- 7 Fetch helper -->
+  <section id="fetch" class="section">
     <h2>7.&nbsp;10-Line Fetch Helper</h2>
 <pre>
 // autoTranslateSpeak("I need pain medication.", "Spanish")
   </section>
   <!-- 8 Links -->
+  <section id="links" class="section">
+    <h2>8.&nbsp;Try It / Learn More</h2>
     <ul>
+      <li>🌐 Live Space — <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR" target="_blank">ghostvoicecbr (Hugging Face)</a></li>
+      <li>📄 Architecture deep-dive — <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR/blob/main/ghostcbrwpaper2025.pdf" target="_blank">White-Paper 2025</a></li>
+      <li>📈 Market rationale — <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR/blob/main/marketAImed.pdf" target="_blank">AI-Med brief</a></li>
     </ul>
   </section>
   <footer>
+    © 2025 GhostAI Labs · <a href="https://huggingface.co/spaces/ghostai1/GHOSTVOICECBR" target="_blank">Launch the live app</a>
   </footer>
 </div>