| <!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 Real</title> |
| <meta name="description" content="Talk face to face with LFM3-Omni — a more realistic Ava, 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://fivetech-ava-real.static.hf.space/index.html" /> |
| <meta property="og:title" content="Ava Real" /> |
| <meta property="og:description" content="Talk face to face with LFM3-Omni — a more realistic Ava, running in your browser" /> |
| <meta property="og:image" content="https://huggingface.co/spaces/fivetech/ava-real/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 realistic 3D avatar running 100% in your browser." /> |
| <meta name="twitter:card" content="summary_large_image" /> |
| <meta name="twitter:title" content="Ava Real" /> |
| <meta name="twitter:description" content="Talk face to face with LFM3-Omni — a more realistic Ava, running in your browser" /> |
| <meta name="twitter:image" content="https://huggingface.co/spaces/fivetech/ava-real/resolve/main/thumbnail-v3.jpg" /> |
| <meta name="twitter:image:alt" content="Ava, a 3D avatar running 100% in your browser." /> |
| <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="Ajustes" title="Ajustes"> |
| <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> |
| <form id="type-form" autocomplete="off"> |
| <input id="type-input" type="text" enterkeyhint="send" maxlength="2000" placeholder="O escríbele aquí…" /> |
| <button id="send-btn" type="submit" aria-label="Enviar mensaje" title="Enviar"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| <line x1="22" y1="2" x2="11" y2="13"></line> |
| <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> |
| </svg> |
| </button> |
| </form> |
| <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>Ajustes</h2> |
| <label class="check-row"> |
| <input type="checkbox" id="subtitles-toggle" /> |
| Mostrar subtítulos mientras habla |
| </label> |
| <label class="check-row"> |
| <input type="checkbox" id="glasses-toggle" /> |
| Ponerse gafas |
| </label> |
| <label> |
| Prompt del sistema |
| <textarea id="system-prompt" rows="10" spellcheck="false"></textarea> |
| <span class="hint"> |
| Quién es y cómo habla. Se aplica a partir de su próxima réplica. Tras el |
| texto se añade siempre "Respond with interleaved text and audio." para que pueda hablar. |
| </span> |
| </label> |
| <div class="dialog-actions"> |
| <button type="button" id="reset-prompt">Restaurar por defecto</button> |
| <button value="close" class="primary">Hecho</button> |
| </div> |
| </form> |
| </dialog> |
| </main> |
| |
| </body> |
| </html> |
|
|
