feat: add V2 emotion control bar to comparison page

- Compact emotion sliders (5 channels) + preset buttons in V2 pane header
- Real-time setEmotion() on slider input for mic streaming
- Debounced reInferWithEmotion() (300ms) for file playback
- V2 queue refilled with new emotion frames on re-inference

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jcggl

examples/vanilla-comparison/index.html

@@ -152,6 +152,32 @@
     .init-bar-fill.v1 { background: #f59e0b; }
     .init-bar-fill.v2 { background: #10b981; }
 
+    /* ── Emotion Control (V2 pane) ── */
+    .emotion-bar {
+      display: flex; align-items: center; gap: 6px; padding: 6px 16px;
+      border-bottom: 1px solid rgba(255,255,255,0.04); flex-wrap: wrap;
+    }
+    .emotion-bar-label { font-size: 0.65rem; color: #10b981; font-weight: 600; white-space: nowrap; }
+    .emo-slider-group { display: flex; align-items: center; gap: 3px; }
+    .emo-slider-group span { font-size: 0.6rem; color: #64748b; width: 42px; }
+    .emo-slider-group input[type=range] {
+      width: 60px; height: 3px; -webkit-appearance: none; appearance: none;
+      background: rgba(255,255,255,0.08); border-radius: 2px; cursor: pointer;
+    }
+    .emo-slider-group input[type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #10b981;
+    }
+    .emo-slider-group input[type=range]::-moz-range-thumb {
+      width: 10px; height: 10px; border: none; border-radius: 50%; background: #10b981;
+    }
+    .emo-presets { display: flex; gap: 3px; margin-left: 4px; }
+    .emo-presets button {
+      padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08);
+      background: transparent; color: #64748b; font-size: 0.6rem; cursor: pointer;
+    }
+    .emo-presets button:hover { color: #10b981; border-color: rgba(16,185,129,0.3); }
+    .emo-presets button.active { color: #10b981; border-color: #10b981; background: rgba(16,185,129,0.08); }
+
     footer {
       padding: 10px 24px; text-align: center; font-size: 0.65rem; color: #1e293b;
       border-top: 1px solid rgba(255,255,255,0.04);
@@ -209,6 +235,21 @@ <h1>Anima<span>Sync</span></h1>
       <span class="pane-title v2">V2 — Emotion Model</span>
       <span class="pane-dim">52-dim ARKit</span>
     </div>
+    <div class="emotion-bar" id="emotion-bar">
+      <span class="emotion-bar-label">Emotion</span>
+      <div class="emo-slider-group"><span>Neutral</span><input type="range" class="emo-v2" data-idx="0" min="0" max="100" value="0"></div>
+      <div class="emo-slider-group"><span>Joy</span><input type="range" class="emo-v2" data-idx="1" min="0" max="100" value="0"></div>
+      <div class="emo-slider-group"><span>Anger</span><input type="range" class="emo-v2" data-idx="2" min="0" max="100" value="0"></div>
+      <div class="emo-slider-group"><span>Sadness</span><input type="range" class="emo-v2" data-idx="3" min="0" max="100" value="0"></div>
+      <div class="emo-slider-group"><span>Surprise</span><input type="range" class="emo-v2" data-idx="4" min="0" max="100" value="0"></div>
+      <div class="emo-presets">
+        <button data-emo="0">Neutral</button>
+        <button data-emo="1">Happy</button>
+        <button data-emo="2">Angry</button>
+        <button data-emo="3">Sad</button>
+        <button data-emo="4">Surprised</button>
+      </div>
+    </div>
     <div class="canvas-wrap">
       <canvas id="canvas-v2"></canvas>
       <div class="vrm-drop" id="vrm-drop-v2">
@@ -421,6 +462,49 @@ <h1>Anima<span>Sync</span></h1>
   for (const name of names) vrm.expressionManager.setValue(name, 0);
 }
 
+// ================================================================
+// Emotion Control (V2 only)
+// ================================================================
+const emoSliders = document.querySelectorAll('.emo-v2');
+const emoPresetBtns = document.querySelectorAll('.emo-presets button');
+let _emoReInferTimer = null;
+let fileResultV2 = null; // reference for reInferWithEmotion
+
+function applyV2Emotion() {
+  if (!lsV2?.setEmotion) return;
+  const vec = Array.from(emoSliders).map(s => parseInt(s.value) / 100);
+  try { lsV2.setEmotion(vec); } catch (e) { console.warn('setEmotion:', e); }
+
+  // File playback: debounced reInfer for V2 queue (mic uses setEmotion only)
+  if (!micActive && lsV2.reInferWithEmotion && fileResultV2) {
+    clearTimeout(_emoReInferTimer);
+    _emoReInferTimer = setTimeout(async () => {
+      try {
+        const newR2 = await lsV2.reInferWithEmotion();
+        // Refill V2 queue from current playback position
+        queueV2.length = 0;
+        for (let i = 0; i < newR2.frame_count; i++) {
+          queueV2.push({ arkit: lsV2.getFrame(newR2, i), vrm: lsV2.getVrmFrame?.(newR2, i) });
+        }
+        fileResultV2 = newR2;
+      } catch (e) { console.warn('reInferWithEmotion:', e.message); }
+    }, 300);
+  }
+}
+
+emoSliders.forEach(s => s.addEventListener('input', () => {
+  emoPresetBtns.forEach(b => b.classList.remove('active'));
+  applyV2Emotion();
+}));
+
+emoPresetBtns.forEach(btn => btn.addEventListener('click', () => {
+  const idx = parseInt(btn.dataset.emo);
+  emoPresetBtns.forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  emoSliders.forEach(s => { s.value = parseInt(s.dataset.idx) === idx ? 100 : 0; });
+  applyV2Emotion();
+}));
+
 // VRM drop handler (drops onto either pane, loads into both)
 for (const id of ['vrm-drop-v1', 'vrm-drop-v2']) {
   const el = document.getElementById(id);
@@ -528,9 +612,10 @@ <h1>Anima<span>Sync</span></h1>
     document.getElementById('s-v1-wasm').textContent = (e1/1000).toFixed(2)+'s';
     document.getElementById('s-v1-rtf').textContent = (e1/1000/dur1).toFixed(2)+'x';
 
-    // Process V2
+    // Process V2 (cache result for reInferWithEmotion)
     const t2 = performance.now();
     const r2 = await lsV2.processFile(file);
+    fileResultV2 = r2;
     const e2 = performance.now() - t2;
     const dur2 = Math.max(r2.frame_count / r2.fps, 0.001);
     document.getElementById('s-v2-frames').textContent = r2.frame_count;
@@ -553,7 +638,7 @@ <h1>Anima<span>Sync</span></h1>
     const audioBuf = await fileAudioCtx.decodeAudioData(buf);
     const src = fileAudioCtx.createBufferSource();
     src.buffer = audioBuf; src.connect(fileAudioCtx.destination); src.start();
-    src.onended = () => { transitionToIdle(); resetVRM(vrmV1); resetVRM(vrmV2); };
+    src.onended = () => { transitionToIdle(); resetVRM(vrmV1); resetVRM(vrmV2); fileResultV2 = null; };
   } catch (err) {
     console.error('Process error:', err);
   }