Rename to Ava; default character, editable system prompt

README.md

@@ -1,5 +1,5 @@
 ---
-title: LFM3 Avatar
+title: Ava
 emoji: 🗣️
 colorFrom: indigo
 colorTo: purple
@@ -12,9 +12,9 @@ models:
   - LiquidAI/LFM3-Omni-2B-GGUF
 ---
 
-# LFM3 Avatar
+# Ava
 
-Hands-free voice chat with a 3D lip-synced avatar, running entirely in the
+Hands-free voice chat with Ava, a 3D lip-synced avatar, running entirely in the
 browser: the UX of [victor/gemma-avatar](https://huggingface.co/spaces/victor/gemma-avatar)
 on the model and WebGPU runtime of
 [LiquidAI/LFM3-Omni-2B-WebGPU](https://huggingface.co/spaces/LiquidAI/LFM3-Omni-2B-WebGPU).
@@ -31,6 +31,9 @@ you speak → Silero VAD (WASM) → LFM3-Omni-2B (WebGPU): audio in, interleaved
 - **Barge-in**: talk over her and generation and playback stop immediately.
 - **Body language** (moods, thumbs up, shrug, a wave) is read from her words as they
   are heard, in `src/reactions.js`.
+- **Character** is a short system prompt you can edit directly in Settings
+  (`src/system-prompt.js` has the default). The only thing added to it is the model's
+  required "Respond with interleaved text and audio." line.
 - **Lip-sync** is derived from the audio by HeadAudio, as in gemma-avatar.
 
 Differences from gemma-avatar, all forced by the model: there is no voice picker

chunk-sarxdv2b.css → chunk-w8avpjmm.css

@@ -1 +1 @@
-:root{--bg:#0a0b10;--bg-elev:#13151c;--bg-elev-2:#1b1e29;--border:#ffffff14;--border-strong:#ffffff29;--text:#f5f6fa;--text-dim:#f5f6faa6;--text-faint:#f5f6fa6b;--error:#ff6a75;--live:#22d3ee;--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--radius-sm:8px;--radius-md:14px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}#app{position:relative;height:100dvh}#stage{position:absolute;inset:0}#stage canvas{display:block}[hidden]{display:none!important}#loading{position:absolute;display:grid;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);background:var(--bg);pointer-events:none;place-items: center;transition:opacity .6s;font-size:12px;font-weight:500;inset:0}#loading.done{opacity:0}#topbar{position:absolute;display:flex;pointer-events:none;justify-content:space-between;align-items: flex-start;padding:18px 20px;top:0;left:0;right:0}#topbar>*{pointer-events:auto}#identity h1{letter-spacing:.01em;margin:0;font-size:15px;font-weight:600}#identity p{color:var(--text-faint);max-width:340px;margin:4px 0 0;font-size:12px;line-height:1.45}#identity strong{color:var(--text-dim);font-weight:500}.icon-btn{display:grid;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev);color:var(--text-dim);cursor:pointer;touch-action:manipulation;place-items: center;width:36px;height:36px;padding:0;transition:color .15s,border-color .15s}.icon-btn:hover{color:var(--text);border-color:var(--border-strong)}.icon-btn.active{color:var(--error);border-color:var(--border-strong)}#main-btn{background:var(--text);color:var(--bg);cursor:pointer;touch-action:manipulation;border:none;border-radius:23px;min-width:190px;height:46px;padding:0 26px;transition:transform .12s,opacity .15s;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:14px;font-weight:600}#main-btn:hover:not(:disabled){transform:translateY(-1px)}#main-btn:disabled{opacity:.45;cursor:default}#main-btn.live{background:var(--bg-elev);color:var(--text);border:1px solid var(--border-strong)}#controls{position:absolute;display:flex;padding:0 20px calc(22px + env(safe-area-inset-bottom));flex-direction:column;align-items: center;gap:14px;bottom:0;left:0;right:0}#buttons{display:flex;align-items: center;gap:10px}#caption{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);transition:color .2s;font-size:11px;font-weight:500}#caption.live{color:var(--live)}#caption.error{color:var(--error);text-align:center;max-width:560px;line-height:1.5}#progress{background:var(--border-strong);overflow:hidden;border-radius:1px;width:min(240px,60vw);height:2px}#progress-fill{background:var(--text-dim);width:0;height:100%;transition:width .3s}#subtitles{position:absolute;border-radius:var(--radius-md);backdrop-filter:blur(6px);border:1px solid var(--border);text-align:center;text-wrap:balance;color:var(--text);opacity:0;pointer-events:none;display:-webkit-box;-webkit-line-clamp:3;overflow:hidden;background:#0a0b10b8;-webkit-box-orient:vertical;max-width:min(640px,100vw - 48px);padding:10px 16px;transition:opacity .25s;font-size:15px;line-height:1.5;bottom:118px;left:50%;transform:translate(-50%)}#subtitles.visible{opacity:1}#settings{border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-elev);color:var(--text);width:min(440px,100vw - 40px);padding:22px;box-shadow:0 4px 18px #00000052}#settings::backdrop{backdrop-filter:blur(2px);background:#05060999}#settings h2{margin:0 0 16px;font-size:15px;font-weight:600}#settings label{display:block;color:var(--text-dim);margin-bottom:14px;font-size:12px}#settings select,#settings textarea,#settings input{display:block;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev-2);color:var(--text);width:100%;margin-top:6px;padding:9px 11px;font-family:inherit;font-size:13px}#settings select:focus-visible{outline:1px solid var(--text-dim);outline-offset:1px}#settings textarea:focus-visible{outline:1px solid var(--text-dim);outline-offset:1px}#settings input:focus-visible{outline:1px solid var(--text-dim);outline-offset:1px}#settings textarea{resize:vertical}#settings .check-row{display:flex;align-items: center;gap:9px}#settings .check-row input{display:inline-block;accent-color:var(--text);width:auto;margin:0}.dialog-actions{display:flex;justify-content:flex-end;margin-top:6px}.dialog-actions .primary{border-radius:var(--radius-sm);background:var(--text);color:var(--bg);cursor:pointer;border:none;padding:9px 20px;font-size:13px;font-weight:600}button:focus-visible{outline:2px solid var(--text-dim);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}@media (max-width:600px){#identity p{display:none}#subtitles{font-size:14px;bottom:128px}}
+:root{--bg:#0a0b10;--bg-elev:#13151c;--bg-elev-2:#1b1e29;--border:#ffffff14;--border-strong:#ffffff29;--text:#f5f6fa;--text-dim:#f5f6faa6;--text-faint:#f5f6fa6b;--error:#ff6a75;--live:#22d3ee;--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--radius-sm:8px;--radius-md:14px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}#app{position:relative;height:100dvh}#stage{position:absolute;inset:0}#stage canvas{display:block}[hidden]{display:none!important}#loading{position:absolute;display:grid;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);background:var(--bg);pointer-events:none;place-items: center;transition:opacity .6s;font-size:12px;font-weight:500;inset:0}#loading.done{opacity:0}#topbar{position:absolute;display:flex;pointer-events:none;justify-content:space-between;align-items: flex-start;padding:18px 20px;top:0;left:0;right:0}#topbar>*{pointer-events:auto}#identity h1{letter-spacing:.01em;margin:0;font-size:15px;font-weight:600}#identity p{color:var(--text-faint);max-width:340px;margin:4px 0 0;font-size:12px;line-height:1.45}#identity strong{color:var(--text-dim);font-weight:500}.icon-btn{display:grid;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev);color:var(--text-dim);cursor:pointer;touch-action:manipulation;place-items: center;width:36px;height:36px;padding:0;transition:color .15s,border-color .15s}.icon-btn:hover{color:var(--text);border-color:var(--border-strong)}.icon-btn.active{color:var(--error);border-color:var(--border-strong)}#main-btn{background:var(--text);color:var(--bg);cursor:pointer;touch-action:manipulation;border:none;border-radius:23px;min-width:190px;height:46px;padding:0 26px;transition:transform .12s,opacity .15s;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:14px;font-weight:600}#main-btn:hover:not(:disabled){transform:translateY(-1px)}#main-btn:disabled{opacity:.45;cursor:default}#main-btn.live{background:var(--bg-elev);color:var(--text);border:1px solid var(--border-strong)}#controls{position:absolute;display:flex;padding:0 20px calc(22px + env(safe-area-inset-bottom));flex-direction:column;align-items: center;gap:14px;bottom:0;left:0;right:0}#buttons{display:flex;align-items: center;gap:10px}#caption{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);transition:color .2s;font-size:11px;font-weight:500}#caption.live{color:var(--live)}#caption.error{color:var(--error);text-align:center;max-width:560px;line-height:1.5}#progress{background:var(--border-strong);overflow:hidden;border-radius:1px;width:min(240px,60vw);height:2px}#progress-fill{background:var(--text-dim);width:0;height:100%;transition:width .3s}#subtitles{position:absolute;border-radius:var(--radius-md);backdrop-filter:blur(6px);border:1px solid var(--border);text-align:center;text-wrap:balance;color:var(--text);opacity:0;pointer-events:none;display:-webkit-box;-webkit-line-clamp:3;overflow:hidden;background:#0a0b10b8;-webkit-box-orient:vertical;max-width:min(640px,100vw - 48px);padding:10px 16px;transition:opacity .25s;font-size:15px;line-height:1.5;bottom:118px;left:50%;transform:translate(-50%)}#subtitles.visible{opacity:1}#settings{border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-elev);color:var(--text);width:min(440px,100vw - 40px);padding:22px;box-shadow:0 4px 18px #00000052}#settings::backdrop{backdrop-filter:blur(2px);background:#05060999}#settings h2{margin:0 0 16px;font-size:15px;font-weight:600}#settings label{display:block;color:var(--text-dim);margin-bottom:14px;font-size:12px}#settings select,#settings textarea,#settings input{display:block;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev-2);color:var(--text);width:100%;margin-top:6px;padding:9px 11px;font-family:inherit;font-size:13px}#settings select:focus-visible{outline:1px solid var(--text-dim);outline-offset:1px}#settings textarea:focus-visible{outline:1px solid var(--text-dim);outline-offset:1px}#settings input:focus-visible{outline:1px solid var(--text-dim);outline-offset:1px}#settings textarea{resize:vertical}#settings .hint{display:block;margin-top:6px;font-size:11px;line-height:1.4}#settings .check-row{display:flex;align-items: center;gap:9px}#settings .check-row input{display:inline-block;accent-color:var(--text);width:auto;margin:0}.dialog-actions{display:flex;justify-content:space-between;gap:12px;margin-top:6px}#reset-prompt{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:9px 0;font-size:13px}#reset-prompt:hover{color:var(--text)}.dialog-actions .primary{border-radius:var(--radius-sm);background:var(--text);color:var(--bg);cursor:pointer;border:none;padding:9px 20px;font-size:13px;font-weight:600}button:focus-visible{outline:2px solid var(--text-dim);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}@media (max-width:600px){#identity p{display:none}#subtitles{font-size:14px;bottom:128px}}

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>LFM3 Avatar</title>
+    <title>Ava</title>
     <link rel="icon" href="data:," />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -12,7 +12,7 @@
       rel="stylesheet"
     />
     
-  <link rel="stylesheet" crossorigin href="./chunk-sarxdv2b.css"><script type="module" crossorigin src="./chunk-dnx9jhwj.js"></script></head>
+  <link rel="stylesheet" crossorigin href="./chunk-w8avpjmm.css"><script type="module" crossorigin src="./chunk-s08sdfdm.js"></script></head>
   <body>
     <main id="app">
       <!-- The avatar is the hero: a full-viewport 3D stage. -->
@@ -21,10 +21,10 @@
 
       <header id="topbar">
         <div id="identity">
-          <h1>LFM3&nbsp;Avatar</h1>
+          <h1>Ava</h1>
           <p>
-            Talk to <strong>LFM3-Omni</strong> face to face, entirely in your browser.
-            WebGPU&nbsp;inference · Silero&nbsp;VAD · TalkingHead&nbsp;3D
+            Talk to <strong>Ava</strong> face to face, entirely in your browser.
+            LFM3-Omni on WebGPU · Silero&nbsp;VAD · TalkingHead&nbsp;3D
           </p>
         </div>
         <button id="settings-btn" class="icon-btn" aria-label="Settings" title="Settings">
@@ -64,14 +64,15 @@
             Show subtitles while she speaks
           </label>
           <label>
-            Extra instructions
-            <textarea
-              id="instructions"
-              rows="4"
-              placeholder="Anything you want her to know or do (persona stays)."
-            ></textarea>
+            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>