| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> |
| <title>Ava</title> |
| <meta name="description" content="Talk face to face with LFM3-Omni, running in your browser" /> |
| <meta property="og:type" content="website" /> |
| <meta property="og:site_name" content="Hugging Face Spaces" /> |
| <meta property="og:url" content="https://townbox-ava.static.hf.space/index.html" /> |
| <meta property="og:title" content="Ava" /> |
| <meta property="og:description" content="Talk face to face with LFM3-Omni, running in your browser" /> |
| <meta property="og:image" content="https://huggingface.co/spaces/townbox/ava/resolve/main/thumbnail-v3.jpg" /> |
| <meta property="og:image:type" content="image/jpeg" /> |
| <meta property="og:image:width" content="1393" /> |
| <meta property="og:image:height" content="752" /> |
| <meta property="og:image:alt" content="Ava, a 3D avatar with glasses and a green turtleneck. 100% in-browser avatar assistant." /> |
| <meta name="twitter:card" content="summary_large_image" /> |
| <meta name="twitter:title" content="Ava" /> |
| <meta name="twitter:description" content="Talk face to face with LFM3-Omni, running in your browser" /> |
| <meta name="twitter:image" content="https://huggingface.co/spaces/townbox/ava/resolve/main/thumbnail-v3.jpg" /> |
| <meta name="twitter:image:alt" content="Ava, a 3D avatar with glasses and a green turtleneck. 100% in-browser avatar assistant." /> |
| <link rel="icon" href="data:," /> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@500&display=swap" |
| rel="stylesheet" |
| /> |
| |
| <link rel="stylesheet" crossorigin href="./chunk-4t726cmy.css"><script type="module" crossorigin src="./chunk-p1yb2ca4.js"></script></head> |
| <body> |
| <main id="app"> |
| |
| <div id="stage" aria-label="3D avatar"></div> |
| <div id="loading">Loading avatar…</div> |
|
|
| <header id="topbar"> |
| <div id="identity"> |
| <h1>Ava</h1> |
| <p> |
| Talk to <strong>Ava</strong> face to face, entirely in your browser. |
| LFM3-Omni on WebGPU · Silero VAD · TalkingHead 3D |
| </p> |
| </div> |
| <button id="settings-btn" class="icon-btn" aria-label="Settings" title="Settings"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| <circle cx="12" cy="12" r="3"></circle> |
| <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path> |
| </svg> |
| </button> |
| </header> |
|
|
| |
| <div id="subtitles" aria-live="polite"></div> |
|
|
| <footer id="controls"> |
| <div id="progress" hidden><div id="progress-fill"></div></div> |
| <div id="caption">LOADING…</div> |
| <div id="buttons"> |
| <button id="main-btn" disabled> |
| <span id="main-btn-label">Loading…</span> |
| </button> |
| <button id="mute-btn" class="icon-btn" hidden aria-label="Mute microphone" title="Mute microphone"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> |
| <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> |
| <line x1="12" y1="19" x2="12" y2="23"></line> |
| <line x1="8" y1="23" x2="16" y2="23"></line> |
| </svg> |
| </button> |
| </div> |
| </footer> |
|
|
| <dialog id="settings"> |
| <form method="dialog"> |
| <h2>Settings</h2> |
| <label class="check-row"> |
| <input type="checkbox" id="subtitles-toggle" /> |
| Show subtitles while she speaks |
| </label> |
| <label class="check-row"> |
| <input type="checkbox" id="glasses-toggle" /> |
| Wear glasses |
| </label> |
| <label> |
| System prompt |
| <textarea id="system-prompt" rows="10" spellcheck="false"></textarea> |
| <span class="hint"> |
| Who she is and how she talks. Applies from her next reply. “Respond with |
| interleaved text and audio.” is always added after it, so she can speak. |
| </span> |
| </label> |
| <div class="dialog-actions"> |
| <button type="button" id="reset-prompt">Restore default</button> |
| <button value="close" class="primary">Done</button> |
| </div> |
| </form> |
| </dialog> |
| </main> |
| |
| </body> |
| </html> |
|
|
