@argo-video/cli 0.19.0 → 0.21.0

package/dist/preview.js

@@ -9,7 +9,7 @@
  */
 import { execFile } from 'node:child_process';
 import { createServer } from 'node:http';
-import { readFileSync, existsSync, readdirSync, writeFileSync, statSync, createReadStream, unlinkSync } from 'node:fs';
+import { readFileSync, existsSync, readdirSync, writeFileSync, statSync, createReadStream, unlinkSync, mkdirSync } from 'node:fs';
 import { dirname, extname, join, relative, resolve } from 'node:path';
 import { renderTemplate } from './overlays/templates.js';
 import { alignClips, schedulePlacements } from './tts/align.js';
@@ -19,6 +19,8 @@ import { generateSrt, generateVtt } from './subtitles.js';
 import { generateChapterMetadata } from './chapters.js';
 import { exportVideo, checkFfmpeg } from './export.js';
 import { applySpeedRampToTimeline } from './speed-ramp.js';
+import { shiftCameraMoves, scaleCameraMoves } from './camera-move.js';
+import { resolveFreezes, adjustPlacementsForFreezes, totalFreezeDurationMs } from './freeze.js';
 const MIME_TYPES = {
     '.html': 'text/html',
     '.js': 'text/javascript',
@@ -129,7 +131,7 @@ function createSceneReportFromPlacements(placements, persisted) {
         })),
     };
 }
-function loadPreviewData(demoName, argoDir, demosDir, outputDir = 'videos') {
+function loadPreviewData(demoName, argoDir, demosDir, outputDir = 'videos', exportConfig, activeMusicPath) {
     const demoDir = join(argoDir, demoName);
     // Required files
     const timingPath = join(demoDir, '.timing.json');
@@ -178,7 +180,26 @@ function loadPreviewData(demoName, argoDir, demosDir, outputDir = 'videos') {
     const renderedOverlays = buildRenderedOverlays(overlays);
     // Pipeline metadata (reuse meta loaded above for headTrimMs)
     const pipelineMeta = Object.keys(meta).length > 0 ? meta : null;
-    return { demoName, timing, voiceover, overlays, effects, sceneDurations, sceneReport, renderedOverlays, pipelineMeta };
+    const hasGenerated = Boolean(activeMusicPath && existsSync(activeMusicPath));
+    const hasConfig = Boolean(exportConfig?.musicPath);
+    const bgm = {
+        hasGenerated,
+        hasConfig,
+        include: hasGenerated || hasConfig,
+        volume: exportConfig?.musicVolume ?? 0.15,
+    };
+    return {
+        demoName,
+        timing,
+        voiceover,
+        overlays,
+        effects,
+        sceneDurations,
+        sceneReport,
+        renderedOverlays,
+        pipelineMeta,
+        bgm,
+    };
 }
 /** List WAV clip files available for a demo. */
 function listClips(argoDir, demoName) {
@@ -306,12 +327,18 @@ export async function startPreviewServer(options) {
         throw new Error(`No recording found for '${demoName}'. Run 'argo pipeline ${demoName}' first.`);
     }
     let videoMime = videoPath.endsWith('.mp4') ? 'video/mp4' : 'video/webm';
+    // Track BGM saved from the music generator panel
+    let activeMusicPath;
+    // Check if a previously saved BGM exists
+    const savedBgmPath = join(demoDir, 'music', 'bgm.wav');
+    if (existsSync(savedBgmPath))
+        activeMusicPath = savedBgmPath;
     const server = createServer(async (req, res) => {
         const url = req.url ?? '/';
         try {
             // --- API routes ---
             if (url === '/api/data') {
-                const data = loadPreviewData(demoName, argoDir, demosDir, outputDir);
+                const data = loadPreviewData(demoName, argoDir, demosDir, outputDir, options.exportConfig, activeMusicPath);
                 res.writeHead(200, { 'Content-Type': 'application/json' });
                 res.end(JSON.stringify(data));
                 return;
@@ -376,7 +403,7 @@ export async function startPreviewServer(options) {
                     writeFileSync(scenesPath, JSON.stringify(scenes, null, 2) + '\n', 'utf-8');
                 }
                 // Reload and re-render overlays
-                const data = loadPreviewData(demoName, argoDir, demosDir, outputDir);
+                const data = loadPreviewData(demoName, argoDir, demosDir, outputDir, options.exportConfig, activeMusicPath);
                 res.writeHead(200, { 'Content-Type': 'application/json' });
                 res.end(JSON.stringify({ ok: true, changed, renderedOverlays: data.renderedOverlays }));
                 return;
@@ -457,6 +484,11 @@ export async function startPreviewServer(options) {
                 res.writeHead(200, { 'Content-Type': 'application/json', 'Transfer-Encoding': 'chunked' });
                 try {
                     checkFfmpeg();
+                    const chunks = [];
+                    for await (const chunk of req)
+                        chunks.push(chunk);
+                    const bodyText = Buffer.concat(chunks).toString('utf-8').trim();
+                    const body = bodyText ? JSON.parse(bodyText) : {};
                     // Refresh aligned audio from current clips + timing
                     const refreshed = refreshPreviewAudioArtifacts(demoName, argoDir, demosDir, options.ttsDefaults);
                     // Read timing for head-trim + placement computation
@@ -496,6 +528,11 @@ export async function startPreviewServer(options) {
                     // Apply speed ramp to timeline if configured (must happen before
                     // chapters/subtitles/export so all artifacts reflect ramped timing)
                     const ec = options.exportConfig;
+                    const includeBgm = body.includeBgm !== false;
+                    const requestedMusicVolume = typeof body.musicVolume === 'number' && Number.isFinite(body.musicVolume)
+                        ? Math.max(0, Math.min(1, body.musicVolume))
+                        : (ec?.musicVolume ?? 0.15);
+                    const exportMusicPath = includeBgm ? (activeMusicPath ?? ec?.musicPath) : undefined;
                     const rampResult = applySpeedRampToTimeline(placements, shiftedDurationMs, ec?.speedRamp);
                     const finalPlacements = rampResult.placements;
                     const finalDurationMs = rampResult.totalDurationMs;
@@ -507,6 +544,45 @@ export async function startPreviewServer(options) {
                         writeFileSync(join(outputDir, `${demoName}.vtt`), generateVtt(finalPlacements, sceneTexts), 'utf-8');
                     }
                     catch { /* subtitles are best-effort */ }
+                    // Resolve freeze-frame holds from scenes manifest
+                    const previewFreezeSpecs = [];
+                    for (const entry of scenes) {
+                        if (!entry.scene || !Array.isArray(entry.post))
+                            continue;
+                        for (const effect of entry.post) {
+                            if (effect.type === 'freeze' && typeof effect.atMs === 'number' && typeof effect.durationMs === 'number') {
+                                previewFreezeSpecs.push({ scene: entry.scene, atMs: effect.atMs, durationMs: effect.durationMs });
+                            }
+                        }
+                    }
+                    const previewResolvedFreezes = resolveFreezes(previewFreezeSpecs, finalPlacements);
+                    let freezeAdjustedPlacements = finalPlacements;
+                    let freezeAdjustedDurationMs = finalDurationMs;
+                    if (previewResolvedFreezes.length > 0) {
+                        freezeAdjustedPlacements = adjustPlacementsForFreezes(finalPlacements, previewResolvedFreezes);
+                        freezeAdjustedDurationMs += totalFreezeDurationMs(previewResolvedFreezes);
+                        // Regenerate chapters/subtitles with freeze-adjusted timing
+                        writeFileSync(chapterMetadataPath, generateChapterMetadata(freezeAdjustedPlacements, freezeAdjustedDurationMs), 'utf-8');
+                        try {
+                            writeFileSync(join(outputDir, `${demoName}.srt`), generateSrt(freezeAdjustedPlacements, sceneTexts), 'utf-8');
+                            writeFileSync(join(outputDir, `${demoName}.vtt`), generateVtt(freezeAdjustedPlacements, sceneTexts), 'utf-8');
+                        }
+                        catch { /* best-effort */ }
+                    }
+                    // Read camera moves if recorded by zoomTo with narration option
+                    let cameraMoves;
+                    const cameraMovesPath = join(demoDir, '.timing.camera-moves.json');
+                    try {
+                        if (existsSync(cameraMovesPath)) {
+                            let moves = JSON.parse(readFileSync(cameraMovesPath, 'utf-8'));
+                            if (headTrimMs > 0)
+                                moves = shiftCameraMoves(moves, headTrimMs);
+                            moves = scaleCameraMoves(moves, ec?.deviceScaleFactor ?? 1);
+                            if (moves.length > 0)
+                                cameraMoves = moves;
+                        }
+                    }
+                    catch { /* optional */ }
                     // Export — use full config so output matches argo pipeline
                     await exportVideo({
                         demoName,
@@ -522,10 +598,16 @@ export async function startPreviewServer(options) {
                         chapterMetadataPath,
                         formats: ec?.formats,
                         transition: ec?.transition,
-                        placements: finalPlacements,
-                        totalDurationMs: finalDurationMs,
+                        placements: freezeAdjustedPlacements,
+                        totalDurationMs: freezeAdjustedDurationMs,
                         headTrimMs: headTrimMs > 0 ? headTrimMs : undefined,
                         speedRampSegments,
+                        loudnorm: ec?.loudnorm,
+                        musicPath: exportMusicPath,
+                        musicVolume: requestedMusicVolume,
+                        cameraMoves,
+                        watermark: ec?.watermark,
+                        freezeSpecs: previewResolvedFreezes.length > 0 ? previewResolvedFreezes : undefined,
                     });
                     // Switch to serving the new MP4
                     if (existsSync(mp4Path)) {
@@ -539,6 +621,147 @@ export async function startPreviewServer(options) {
                 }
                 return;
             }
+            // Serve the MusicGen Web Worker script (same-origin so ESM imports work)
+            if (url === '/musicgen-worker.js') {
+                const workerScript = `
+import { AutoTokenizer, MusicgenForConditionalGeneration } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.0.0-next.7';
+
+let tokenizer = null;
+let model = null;
+let backend = null;
+
+const WEBGPU_DTYPE = {
+  text_encoder: 'fp32',
+  decoder_model_merged: 'fp32',
+  encodec_decode: 'fp32',
+};
+
+const WASM_DTYPE = {
+  text_encoder: 'q8',
+  decoder_model_merged: 'q8',
+  encodec_decode: 'fp32',
+};
+
+async function ensureTokenizer() {
+  if (tokenizer) return;
+  self.postMessage({ type: 'progress', message: 'Loading MusicGen tokenizer...' });
+  tokenizer = await AutoTokenizer.from_pretrained('Xenova/musicgen-small');
+}
+
+async function loadModel(preferredBackend = 'webgpu') {
+  await ensureTokenizer();
+
+  if (preferredBackend === 'webgpu' && typeof navigator !== 'undefined' && 'gpu' in navigator) {
+    try {
+      self.postMessage({ type: 'progress', message: 'Loading model weights with WebGPU (~1.8GB first time)...' });
+      model = await MusicgenForConditionalGeneration.from_pretrained('Xenova/musicgen-small', {
+        dtype: WEBGPU_DTYPE,
+        device: 'webgpu',
+      });
+      backend = 'webgpu';
+      self.postMessage({ type: 'progress', message: 'Model loaded (WebGPU).' });
+      return;
+    } catch (err) {
+      self.postMessage({
+        type: 'progress',
+        message: 'WebGPU init failed, falling back to CPU/WASM...',
+      });
+      model = null;
+      backend = null;
+    }
+  }
+
+  self.postMessage({ type: 'progress', message: 'Loading model weights on CPU/WASM...' });
+  model = await MusicgenForConditionalGeneration.from_pretrained('Xenova/musicgen-small', {
+    dtype: WASM_DTYPE,
+  });
+  backend = 'wasm';
+  self.postMessage({ type: 'progress', message: 'Model loaded (CPU/WASM).' });
+}
+
+function shouldRetryOnWasm(err) {
+  const msg = err?.message || String(err);
+  return backend === 'webgpu' && /(OrtRun|webgpu|TensorShape|Cannot reduce shape|ERROR_CODE:\\s*1)/i.test(msg);
+}
+
+async function generateAudio(prompt, durationSec, guidanceScale, temperature) {
+  if (!model) await loadModel();
+
+  const inputs = tokenizer(prompt);
+  const maxNewTokens = Math.ceil(durationSec * 50);
+
+  try {
+    return await model.generate({
+      ...inputs,
+      max_new_tokens: maxNewTokens,
+      do_sample: true,
+      guidance_scale: guidanceScale,
+      temperature,
+    });
+  } catch (err) {
+    if (!shouldRetryOnWasm(err)) throw err;
+
+    self.postMessage({
+      type: 'progress',
+      message: 'WebGPU generation failed, retrying on CPU/WASM...',
+    });
+    model = null;
+    await loadModel('wasm');
+    return await model.generate({
+      ...inputs,
+      max_new_tokens: maxNewTokens,
+      do_sample: true,
+      guidance_scale: guidanceScale,
+      temperature,
+    });
+  }
+}
+
+self.onmessage = async (e) => {
+  if (e.data.type === 'generate') {
+    try {
+      const durationSec = e.data.durationSec || 30;
+      const guidanceScale = e.data.guidanceScale || 3;
+      const temperature = e.data.temperature || 1.0;
+      self.postMessage({ type: 'progress', message: 'Generating ' + durationSec + 's of music...' });
+      const output = await generateAudio(
+        e.data.prompt,
+        durationSec,
+        guidanceScale,
+        temperature,
+      );
+      const audioData = output.data instanceof Float32Array ? output.data : new Float32Array(output.data);
+      const sampleRate = model?.config?.audio_encoder?.sampling_rate || 32000;
+      self.postMessage({ type: 'complete', audioData, sampleRate }, [audioData.buffer]);
+    } catch (err) {
+      self.postMessage({ type: 'error', message: err.message || String(err) });
+    }
+  }
+};
+`;
+                res.writeHead(200, {
+                    'Content-Type': 'application/javascript',
+                    'Cache-Control': 'no-store',
+                });
+                res.end(workerScript);
+                return;
+            }
+            // Save generated background music WAV — overwrites previous to avoid orphans
+            if (url === '/api/save-music' && req.method === 'POST') {
+                const chunks = [];
+                for await (const chunk of req)
+                    chunks.push(chunk);
+                const wavData = Buffer.concat(chunks);
+                const musicDir = join(demoDir, 'music');
+                mkdirSync(musicDir, { recursive: true });
+                const filePath = join(musicDir, 'bgm.wav');
+                writeFileSync(filePath, wavData);
+                // Track the active music path so /api/export uses it
+                activeMusicPath = filePath;
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ ok: true, path: filePath }));
+                return;
+            }
             // --- Static file serving ---
             // Serve video with Range request support (required for seeking)
             if (url === '/video' || url === '/video.webm') {
@@ -578,7 +801,7 @@ export async function startPreviewServer(options) {
             }
             // Root — serve the preview HTML
             if (url === '/' || url === '/index.html') {
-                const data = loadPreviewData(demoName, argoDir, demosDir, outputDir);
+                const data = loadPreviewData(demoName, argoDir, demosDir, outputDir, options.exportConfig, activeMusicPath);
                 const html = getPreviewHtml(data);
                 res.writeHead(200, { 'Content-Type': 'text/html' });
                 res.end(html);
@@ -986,6 +1209,179 @@ const PREVIEW_HTML = `<!DOCTYPE html>
   .sidebar-tab:hover { color: var(--text); }
   .sidebar-tab.active { color: var(--text); border-bottom-color: var(--accent); }
   .sidebar-panel { overflow-y: auto; flex: 1; }
+
+  /* Music panel */
+  .music-panel {
+    border-top: 1px solid var(--border);
+    padding: 0;
+  }
+  .music-panel-header {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    cursor: pointer;
+    user-select: none;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .music-panel-header:hover { color: var(--text); }
+  .music-panel-header .expand-icon {
+    margin-left: auto;
+    font-size: 10px;
+    color: var(--text-dim);
+    transition: transform var(--transition);
+  }
+  .music-panel.expanded .music-panel-header .expand-icon { transform: rotate(90deg); }
+  .music-panel-body {
+    display: none;
+    padding: 0 16px 16px;
+  }
+  .music-panel.expanded .music-panel-body { display: block; }
+  .music-prompt-input {
+    width: 100%;
+    padding: 8px 10px;
+    font-family: var(--sans);
+    font-size: 13px;
+    color: var(--text);
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    outline: none;
+    resize: vertical;
+    min-height: 36px;
+    margin-bottom: 8px;
+  }
+  .music-prompt-input:focus { border-color: var(--accent); }
+  .music-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-bottom: 10px;
+  }
+  .music-preset-btn {
+    padding: 4px 8px;
+    font-size: 11px;
+    font-family: var(--sans);
+    color: var(--text-muted);
+    background: var(--surface3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: background var(--transition), color var(--transition);
+  }
+  .music-preset-btn:hover { background: var(--accent-glow); color: var(--text); }
+  .music-duration-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+  .music-duration-row input[type="range"] {
+    flex: 1;
+    accent-color: var(--accent);
+  }
+  .music-option-row,
+  .music-volume-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+  .music-option-row {
+    justify-content: space-between;
+  }
+  .music-volume-row input[type="range"] {
+    flex: 1;
+    accent-color: var(--accent);
+  }
+  .music-volume-value {
+    min-width: 40px;
+    text-align: right;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text);
+  }
+  .music-help {
+    margin-bottom: 10px;
+    font-size: 11px;
+    color: var(--text-dim);
+    line-height: 1.4;
+  }
+  .music-duration-row .music-dur-label {
+    min-width: 32px;
+    text-align: right;
+    font-family: var(--mono);
+    font-size: 11px;
+  }
+  .music-generate-btn, .music-save-btn {
+    width: 100%;
+    padding: 8px 0;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: var(--sans);
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: background var(--transition), opacity var(--transition);
+  }
+  .music-generate-btn {
+    background: var(--accent);
+    color: white;
+    margin-bottom: 8px;
+  }
+  .music-generate-btn:hover:not(:disabled) { background: var(--accent-hover); }
+  .music-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .music-save-btn {
+    background: var(--success);
+    color: white;
+    display: none;
+  }
+  .music-save-btn:hover:not(:disabled) { opacity: 0.85; }
+  .music-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .music-progress {
+    margin-bottom: 8px;
+    display: none;
+  }
+  .music-progress-bar {
+    width: 100%;
+    height: 4px;
+    background: var(--surface3);
+    border-radius: 2px;
+    overflow: hidden;
+    margin-bottom: 4px;
+  }
+  .music-progress-fill {
+    height: 100%;
+    background: var(--accent);
+    width: 0%;
+    transition: width 0.3s ease;
+  }
+  .music-progress-text {
+    font-size: 11px;
+    font-family: var(--mono);
+    color: var(--text-muted);
+  }
+  .music-audio-player {
+    width: 100%;
+    margin-bottom: 8px;
+    display: none;
+    height: 36px;
+  }
+  .music-status {
+    font-size: 11px;
+    font-family: var(--mono);
+    color: var(--text-muted);
+    margin-top: 4px;
+    min-height: 16px;
+  }
+
   .scene-card {
     padding: 14px 16px;
     border-bottom: 1px solid var(--border);
@@ -1342,6 +1738,45 @@ const PREVIEW_HTML = `<!DOCTYPE html>
   </div>
   <div class="sidebar-panel" id="panel-scenes">
     <div id="scene-list"></div>
+    <div class="music-panel" id="music-panel">
+      <div class="music-panel-header" id="music-panel-header">
+        Background Music
+        <span class="expand-icon">&#9654;</span>
+      </div>
+      <div class="music-panel-body">
+        <input type="text" class="music-prompt-input" id="music-prompt" placeholder="Describe the music style..." value="lofi chill ambient">
+        <div class="music-presets">
+          <button class="music-preset-btn" data-preset="lofi chill">lofi chill</button>
+          <button class="music-preset-btn" data-preset="corporate upbeat">corporate upbeat</button>
+          <button class="music-preset-btn" data-preset="ambient minimal">ambient minimal</button>
+          <button class="music-preset-btn" data-preset="cinematic epic">cinematic epic</button>
+          <button class="music-preset-btn" data-preset="acoustic warm">acoustic warm</button>
+        </div>
+        <div class="music-duration-row">
+          <span>Duration</span>
+          <input type="range" id="music-duration" min="10" max="60" value="30" step="5">
+          <span class="music-dur-label" id="music-dur-label">30s</span>
+        </div>
+        <button class="music-generate-btn" id="music-generate-btn">Generate Music</button>
+        <div class="music-progress" id="music-progress">
+          <div class="music-progress-bar"><div class="music-progress-fill" id="music-progress-fill"></div></div>
+          <div class="music-progress-text" id="music-progress-text"></div>
+        </div>
+        <audio class="music-audio-player" id="music-audio" controls></audio>
+        <div class="music-option-row">
+          <label for="music-include">Include in export</label>
+          <input type="checkbox" id="music-include">
+        </div>
+        <div class="music-volume-row">
+          <label for="music-volume">Music volume</label>
+          <input type="range" id="music-volume" min="0" max="0.30" value="0.15" step="0.01">
+          <span class="music-volume-value" id="music-volume-label">0.15</span>
+        </div>
+        <div class="music-help" id="music-help">Preview export mixes background music at a fixed low level. No re-record needed.</div>
+        <button class="music-save-btn" id="music-save-btn">Use as BGM</button>
+        <div class="music-status" id="music-status"></div>
+      </div>
+    </div>
   </div>
   <div class="sidebar-panel" id="panel-metadata" style="display:none">
     <div id="metadata-content" style="padding:16px;font-family:var(--mono);font-size:12px;color:var(--text-muted);white-space:pre-wrap;word-break:break-word;"></div>
@@ -2542,7 +2977,16 @@ document.getElementById('btn-export').addEventListener('click', async () => {
   stopAudio();
   showPlayIcon();
   try {
-    const resp = await fetch('/api/export', { method: 'POST' });
+    const musicInclude = document.getElementById('music-include');
+    const musicVolume = document.getElementById('music-volume');
+    const resp = await fetch('/api/export', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        includeBgm: musicInclude ? musicInclude.checked : true,
+        musicVolume: musicVolume ? Number(musicVolume.value) : undefined,
+      }),
+    });
     const result = await resp.json();
     if (!result.ok) throw new Error(result.error);
     overlay.classList.add('success');
@@ -2672,6 +3116,194 @@ if (DATA.pipelineMeta) {
   document.getElementById('metadata-content').textContent = 'No pipeline metadata found.\\n\\nRun argo pipeline to generate metadata.';
 }
 
+// ─── Background Music (MusicGen via Transformers.js) ───────────────────────
+(function initMusicPanel() {
+  const musicPanel = document.getElementById('music-panel');
+  const musicHeader = document.getElementById('music-panel-header');
+  const musicPrompt = document.getElementById('music-prompt');
+  const musicDuration = document.getElementById('music-duration');
+  const musicDurLabel = document.getElementById('music-dur-label');
+  const musicGenerateBtn = document.getElementById('music-generate-btn');
+  const musicProgress = document.getElementById('music-progress');
+  const musicProgressFill = document.getElementById('music-progress-fill');
+  const musicProgressText = document.getElementById('music-progress-text');
+  const musicAudio = document.getElementById('music-audio');
+  const musicInclude = document.getElementById('music-include');
+  const musicVolume = document.getElementById('music-volume');
+  const musicVolumeLabel = document.getElementById('music-volume-label');
+  const musicHelp = document.getElementById('music-help');
+  const musicSaveBtn = document.getElementById('music-save-btn');
+  const musicStatus = document.getElementById('music-status');
+
+  let generatedWavBlob = null;
+  let hasGeneratedBgm = DATA.bgm?.hasGenerated ?? false;
+  const hasConfigBgm = DATA.bgm?.hasConfig ?? false;
+
+  function updateMusicVolumeLabel() {
+    musicVolumeLabel.textContent = Number(musicVolume.value).toFixed(2);
+  }
+
+  function updateMusicHelp() {
+    const source = hasGeneratedBgm ? 'generated BGM' : (hasConfigBgm ? 'config music' : 'no music source');
+    musicHelp.textContent = musicInclude.checked
+      ? 'Export will include ' + source + ' at a fixed mix level. No re-record needed.'
+      : 'Export will skip background music. No re-record needed.';
+  }
+
+  // Toggle panel
+  musicHeader.addEventListener('click', () => {
+    musicPanel.classList.toggle('expanded');
+  });
+
+  // Preset buttons
+  document.querySelectorAll('.music-preset-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      musicPrompt.value = btn.dataset.preset;
+    });
+  });
+
+  // Duration slider
+  musicDuration.addEventListener('input', () => {
+    musicDurLabel.textContent = musicDuration.value + 's';
+  });
+  musicInclude.checked = DATA.bgm?.include ?? false;
+  musicVolume.value = String(DATA.bgm?.volume ?? 0.15);
+  updateMusicVolumeLabel();
+  updateMusicHelp();
+  musicInclude.addEventListener('change', updateMusicHelp);
+  musicVolume.addEventListener('input', updateMusicVolumeLabel);
+  musicVolume.addEventListener('change', updateMusicHelp);
+
+  // WAV encoder (Float32, mono)
+  function encodeWavFloat32(samples, sampleRate) {
+    const numSamples = samples.length;
+    const byteRate = sampleRate * 4; // Float32 = 4 bytes
+    const blockAlign = 4;
+    const dataSize = numSamples * 4;
+    const buffer = new ArrayBuffer(44 + dataSize);
+    const view = new DataView(buffer);
+    // RIFF header
+    view.setUint32(0, 0x52494646, false); // "RIFF"
+    view.setUint32(4, 36 + dataSize, true);
+    view.setUint32(8, 0x57415645, false); // "WAVE"
+    // fmt chunk
+    view.setUint32(12, 0x666d7420, false); // "fmt "
+    view.setUint32(16, 16, true); // chunk size
+    view.setUint16(20, 3, true); // format = IEEE Float
+    view.setUint16(22, 1, true); // channels = 1
+    view.setUint32(24, sampleRate, true);
+    view.setUint32(28, byteRate, true);
+    view.setUint16(32, blockAlign, true);
+    view.setUint16(34, 32, true); // bits per sample
+    // data chunk
+    view.setUint32(36, 0x64617461, false); // "data"
+    view.setUint32(40, dataSize, true);
+    const floatView = new Float32Array(buffer, 44);
+    floatView.set(samples);
+    return new Blob([buffer], { type: 'audio/wav' });
+  }
+
+  // MusicGen runs in a Web Worker served from /musicgen-worker.js (same-origin).
+  // This avoids blob URL cross-origin import restrictions and keeps the UI responsive.
+  let musicWorker = null;
+
+  function createMusicWorker() {
+    const w = new Worker('/musicgen-worker.js', { type: 'module' });
+    return w;
+  }
+
+  function showProgress(msg) {
+    musicProgress.style.display = 'block';
+    musicProgressText.textContent = msg;
+  }
+
+  function setProgressBar(pct) {
+    musicProgressFill.style.width = Math.min(100, Math.max(0, pct)) + '%';
+  }
+
+  // Generate button
+  musicGenerateBtn.addEventListener('click', () => {
+    const prompt = musicPrompt.value.trim();
+    if (!prompt) {
+      musicStatus.textContent = 'Please enter a music prompt.';
+      return;
+    }
+    const durationSec = parseInt(musicDuration.value, 10);
+
+    musicGenerateBtn.disabled = true;
+    musicSaveBtn.style.display = 'none';
+    musicAudio.style.display = 'none';
+    generatedWavBlob = null;
+    showProgress('Initializing...');
+    setProgressBar(10);
+    musicStatus.textContent = '';
+
+    if (!musicWorker) {
+      musicWorker = createMusicWorker();
+      musicWorker.onmessage = (e) => {
+        const msg = e.data;
+        if (msg.type === 'progress') {
+          showProgress(msg.message);
+          if (msg.message.includes('tokenizer')) setProgressBar(20);
+          else if (msg.message.includes('Model loaded')) setProgressBar(50);
+          else if (msg.message.includes('Generating')) setProgressBar(60);
+        } else if (msg.type === 'complete') {
+          setProgressBar(100);
+          showProgress('Done!');
+          generatedWavBlob = encodeWavFloat32(msg.audioData, msg.sampleRate);
+          const url = URL.createObjectURL(generatedWavBlob);
+          musicAudio.src = url;
+          musicAudio.style.display = 'block';
+          musicSaveBtn.style.display = 'inline-block';
+          musicGenerateBtn.disabled = false;
+          setTimeout(() => { musicProgress.style.display = 'none'; }, 1500);
+        } else if (msg.type === 'error') {
+          musicGenerateBtn.disabled = false;
+          musicProgress.style.display = 'none';
+          musicStatus.textContent = 'Error: ' + msg.message;
+        }
+      };
+      musicWorker.onerror = (err) => {
+        musicGenerateBtn.disabled = false;
+        musicProgress.style.display = 'none';
+        musicStatus.textContent = 'Worker error: ' + (err.message || 'Unknown error');
+      };
+    }
+    musicWorker.postMessage({
+      type: 'generate',
+      prompt: prompt,
+      durationSec: durationSec,
+    });
+  });
+
+  // Save button
+  musicSaveBtn.addEventListener('click', async () => {
+    if (!generatedWavBlob) return;
+    musicSaveBtn.disabled = true;
+    musicStatus.textContent = 'Saving...';
+    try {
+      const resp = await fetch('/api/save-music', {
+        method: 'POST',
+        headers: { 'Content-Type': 'audio/wav' },
+        body: generatedWavBlob,
+      });
+      const result = await resp.json();
+      if (result.ok) {
+        hasGeneratedBgm = true;
+        musicInclude.checked = true;
+        updateMusicHelp();
+        musicStatus.textContent = 'Saved to ' + result.path;
+      } else {
+        musicStatus.textContent = 'Save failed.';
+      }
+    } catch (err) {
+      musicStatus.textContent = 'Save error: ' + err.message;
+    } finally {
+      musicSaveBtn.disabled = false;
+    }
+  });
+})();
+
 // ─── Init ──────────────────────────────────────────────────────────────────
 renderSceneList();
 snapshotAllScenes();