Spaces:
Running
Running
| <html lang="en"> | |
| <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)} | |
| .nav-link:hover{color:var(--sub)} | |
| .offcanvas{background:var(--panel)} | |
| .offcanvas a{color:var(--txt)} | |
| </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 → Translate → 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. Key Points</h2> | |
| <div class="panel"> | |
| <ul class="mb-0"> | |
| <li>⚡ End-to-end < 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. 🎬 Live Demo Videos</h2> | |
| <h3 class="mt-4">2.1 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 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. 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 Scheduler"] | |
| FB --> INT4["XTTS v2 (INT4)"] | |
| INT4 --> Out["Cloned Output"] | |
| </div> | |
| </section> | |
| <!-- 4 Quant --> | |
| <section id="quant" class="section"> | |
| <h2>4. 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. 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. 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>> 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 & displayed</td><td>Stronger audit trail</td></tr> | |
| </table> | |
| </section> | |
| <!-- 7 Fetch helper --> | |
| <section id="fetch" class="section"> | |
| <h2>7. 10-Line Fetch Helper</h2> | |
| <pre> | |
| // autoTranslateSpeak("I need pain medication.", "Spanish") | |
| async function autoTranslateSpeak(text, target){ | |
| const {translated_text} = await fetch('/translate',{ | |
| method:'POST',headers:{'Content-Type':'application/json'}, | |
| body:JSON.stringify({text,source_language:'English',target_language:target}) | |
| }).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:target}) | |
| }).then(r=>r.blob()); | |
| new Audio(URL.createObjectURL(mp3)).play(); | |
| } | |
| </pre> | |
| </section> | |
| <!-- 8 Links --> | |
| <section id="links" class="section"> | |
| <h2>8. 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> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> | |