File size: 6,241 Bytes
d4796c9 7248b12 34d5795 cb32c85 34d5795 cb32c85 42642ce cb32c85 34d5795 42642ce 7248b12 cb31ff8 7248b12 ae5184f 7248b12 ae5184f 7248b12 0265340 7248b12 76d53c7 7248b12 0265340 7248b12 0265340 7248b12 4b2c965 0265340 4b2c965 7248b12 0265340 ae5184f 0265340 ae5184f 7248b12 0265340 7248b12 d4796c9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <!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">
<!-- The avatar is the hero: a full-viewport 3D stage. -->
<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>
<!-- What she's saying, as it's spoken. -->
<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>
|