fix: update source code viewer to reflect V1/V2 engine selector and emotion control

- Config: VERSION_V1/V2 + CDN_V1/V2 + selectedEngine
- Init: dynamic engine loading with V1/V2 selection
- Emotion control comments and queue flush pattern
- Controls: engine select dropdown + generic "Initialize Engine" button

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

Author: jcggl

examples/guide/index.html

@@ -1623,7 +1623,11 @@ <h2 class="step-title">Add Real-time Microphone</h2>
     '</div>',
     '',
     '<div class="controls">',
-    '  <button class="btn btn-primary" id="btn-init">Initialize V1 Engine</button>',
+    '  <select id="engine-select">',
+    '    <option value="v1" selected>V1 — Phoneme (111-dim)</option>',
+    '    <option value="v2">V2 — Emotion (52-dim)</option>',
+    '  </select>',
+    '  <button class="btn btn-primary" id="btn-init">Initialize Engine</button>',
     '  <button class="btn btn-secondary" id="btn-vrm">Upload VRM</button>',
     '  <input type="file" id="vrm-input" accept=".vrm" style="display:none">',
     '  <button class="btn btn-secondary" id="btn-audio" disabled>Upload Audio</button>',
@@ -1632,7 +1636,7 @@ <h2 class="step-title">Add Real-time Microphone</h2>
     '  <button class="btn btn-secondary" id="btn-mic" disabled>Start Mic</button>',
     '</div>',
     '',
-    '<div class="status-bar" id="status">Click "Initialize V1 Engine" to start.</div>',
+    '<div class="status-bar" id="status">Select engine and click "Initialize" to start.</div>',
     '',
     '<script type="module">',
     'import * as THREE from ' + "'three'" + ';',
@@ -1642,8 +1646,11 @@ <h2 class="step-title">Add Real-time Microphone</h2>
     'import { VRMAnimationLoaderPlugin, createVRMAnimationClip } from ' + "'@pixiv/three-vrm-animation'" + ';',
     '',
     '// \u2500\u2500 Config \u2500\u2500',
-    "const VERSION = '" + VERSION + "';",
-    'const CDN = ' + BT + 'https://cdn.jsdelivr.net/npm/@goodganglabs/lipsync-wasm-v1@' + DL + '{VERSION}' + BT + ';',
+    "const VERSION_V1 = '" + VERSION_V1 + "';",
+    "const VERSION_V2 = '" + VERSION_V2 + "';",
+    'const CDN_V1 = ' + BT + 'https://cdn.jsdelivr.net/npm/@goodganglabs/lipsync-wasm-v1@' + DL + '{VERSION_V1}' + BT + ';',
+    'const CDN_V2 = ' + BT + 'https://cdn.jsdelivr.net/npm/@goodganglabs/lipsync-wasm-v2@' + DL + '{VERSION_V2}' + BT + ';',
+    "let selectedEngine = 'v1';",
     '',
     '// ARKit 52-dim blendshape names',
     "const ARKIT_52 = [",
@@ -1785,30 +1792,45 @@ <h2 class="step-title">Add Real-time Microphone</h2>
     '  updateControls();',
     '}',
     '',
-    '// \u2500\u2500 Initialize AnimaSync V1 \u2500\u2500',
+    '// \u2500\u2500 Initialize AnimaSync (V1 or V2) \u2500\u2500',
+    "const engineSelect = el('engine-select');",
     "btnInit.addEventListener('click', async () => {",
-    '  if (lipsync?.ready) return;',
+    '  if (lipsync?.ready && engineSelect.value === selectedEngine) return;',
+    '  selectedEngine = engineSelect.value;',
+    "  const cdn = selectedEngine === 'v1' ? CDN_V1 : CDN_V2;",
+    "  const wasmFile = selectedEngine === 'v1' ? 'lipsync_wasm_v1.js' : 'lipsync_wasm_v2.js';",
+    '  const label = selectedEngine.toUpperCase();',
+    '',
+    '  if (lipsync) { try { lipsync.reset?.(); } catch {} lipsync = null; }',
+    '  idleGenerator = null; idleClock = 0;',
     '  btnInit.disabled = true;',
-    "  btnInit.textContent = 'Initializing...';",
-    "  setStatus('Loading WASM + ONNX model...');",
+    '  setStatus(' + BT + 'Loading ' + DL + '{label} WASM + ONNX model...' + BT + ');',
     '',
     '  try {',
-    '    const { LipSyncWasmWrapper } = await import(' + BT + DL + '{CDN}/lipsync-wasm-wrapper.js' + BT + ');',
-    '    lipsync = new LipSyncWasmWrapper({ wasmPath: ' + BT + DL + '{CDN}/lipsync_wasm_v1.js' + BT + ' });',
+    '    const { LipSyncWasmWrapper } = await import(' + BT + DL + '{cdn}/lipsync-wasm-wrapper.js' + BT + ');',
+    '    lipsync = new LipSyncWasmWrapper({ wasmPath: ' + BT + DL + '{cdn}/' + DL + '{wasmFile}' + BT + ' });',
     '    await lipsync.init({',
-    '      onProgress: (stage, pct) => setStatus(' + BT + DL + '{stage} \\u2014 ' + DL + '{pct}%' + BT + '),',
+    '      onProgress: (stage, pct) => setStatus(' + BT + DL + '{label} ' + DL + '{stage} \\u2014 ' + DL + '{pct}%' + BT + '),',
     '    });',
     '',
-    '    // Eye blink + micro expressions',
+    '    // Eye blink + micro expressions (V1 only)',
     '    try {',
-    '      idleGenerator = new lipsync.wasmModule.IdleExpressionGenerator();',
-    '      idleClock = 0;',
+    '      if (lipsync.wasmModule?.IdleExpressionGenerator) {',
+    '        idleGenerator = new lipsync.wasmModule.IdleExpressionGenerator();',
+    '        idleClock = 0;',
+    '      }',
     "    } catch (e) { console.warn('Idle generator init failed:', e); }",
     '',
-    "    initBadge.textContent = 'V1 Ready';",
+    '    initBadge.textContent = label + ' + "' Ready'" + ';',
     "    initBadge.className = 'status-badge badge-ready';",
-    "    btnInit.textContent = 'Initialized';",
-    "    setStatus('Engine ready. Upload a VRM to continue.');",
+    '    btnInit.textContent = label + ' + "' Initialized'" + ';',
+    '    btnInit.disabled = false;',
+    '    setStatus(label + ' + "' engine ready. Upload a VRM to continue.'" + ');',
+    '',
+    "    // Emotion control: setEmotion() available on V2",
+    "    // Mic streaming: emotion applies per-chunk in real time",
+    "    // File playback: emotion applies on next processFile()",
+    '',
     '    updateControls();',
     '  } catch (err) {',
     '    lipsync = null;',
@@ -1921,6 +1943,13 @@ <h2 class="step-title">Add Real-time Microphone</h2>
     "  setStatus('Microphone stopped.');",
     '}',
     '',
+    '// \u2500\u2500 Emotion Control (V2 only) \u2500\u2500',
+    '// Call lipsync.setEmotion([neutral, joy, anger, sadness, surprise]) with values 0-1.',
+    '// Mic streaming: emotion applies per-chunk in real time.',
+    '// File playback: set emotion before uploading audio.',
+    '// Flush queue on change so new emotion frames appear immediately:',
+    '//   if (micActive) frameQueue.length = 0;',
+    '',
     '// \u2500\u2500 Blendshape Helpers \u2500\u2500',
     'function applyArkitBlendshapes(frame) {',
     '  if (!vrm?.expressionManager) return;',