File size: 5,552 Bytes
35ecf5d 7496c22 282fbf7 c87dcf0 7496c22 45ebf34 7496c22 282fbf7 7496c22 282fbf7 7496c22 d56b1b8 7496c22 282fbf7 7496c22 282fbf7 7496c22 35ecf5d | 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 | <!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">
<!-- 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="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>
<!-- 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>
<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>
|