@amg555/frameforge-mcp 2.3.1 → 2.3.3

package/scripts/html-renderer/new-project.mjs

@@ -0,0 +1,408 @@
+#!/usr/bin/env node
+/**
+ * new-project.mjs — Scaffold an HTML-renderer project from a FrameForge script JSON.
+ *
+ * Usage:
+ *   node scripts/html-renderer/new-project.mjs \
+ *     --script output/<productionId>-script.json \
+ *     --out    output/<productionId>-html/
+ *
+ * What it produces:
+ *   <out>/
+ *     index.html     compositor page (loads reel/engine.js)
+ *     edit.js        starter edit with one layer() per FrameForge scene
+ *     reel/          engine runtime (copied from assets/project/reel/)
+ *     scripts/       render, mix_audio, verify, stock, capture (copied from assets/project/scripts/)
+ *     source/        empty — user drops video clips here
+ *     audio/         empty — TTS outputs from FrameForge go here
+ *     out/           empty — render outputs land here
+ */
+
+import fs   from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// ── Argument parsing ──────────────────────────────────────────────────────────
+
+const args = {};
+for (let i = 2; i < process.argv.length; i++) {
+  if (process.argv[i] === '--script') args.script = process.argv[++i];
+  if (process.argv[i] === '--out')    args.out    = process.argv[++i];
+  if (process.argv[i] === '--fps')    args.fps    = parseInt(process.argv[++i], 10) || 30;
+  if (process.argv[i] === '--width')  args.width  = parseInt(process.argv[++i], 10) || 1920;
+  if (process.argv[i] === '--height') args.height = parseInt(process.argv[++i], 10) || 1080;
+}
+
+if (!args.script || !args.out) {
+  console.error('Usage: node new-project.mjs --script <script.json> --out <project-dir>');
+  process.exit(1);
+}
+
+// ── Load script JSON ──────────────────────────────────────────────────────────
+
+const scriptPath = path.resolve(process.cwd(), args.script);
+if (!fs.existsSync(scriptPath)) {
+  console.error(`Script not found: ${scriptPath}`);
+  process.exit(1);
+}
+
+const raw    = JSON.parse(fs.readFileSync(scriptPath, 'utf8'));
+// Support both {script:{scenes:[]}} (make.js dry-run format) and {scenes:[]} (direct)
+const script = raw.script || raw;
+const scenes = script.scenes || [];
+
+if (scenes.length === 0) {
+  console.error('No scenes found in script JSON. Run with --dry-run first.');
+  process.exit(1);
+}
+
+const title       = script.title || 'FrameForge Video';
+const description = script.description || '';
+const fps         = args.fps    || 30;
+const width       = args.width  || 1920;
+const height      = args.height || 1080;
+
+// ── Create project directory structure ───────────────────────────────────────
+
+const outDir    = path.resolve(process.cwd(), args.out);
+const assetsDir = path.resolve(__dirname, '../../plugins/video-pipeline/skills/video-pipeline/assets/project');
+for (const dir of ['', 'reel', 'scripts', 'source', 'audio', 'out', 'assets']) {
+  fs.mkdirSync(path.join(outDir, dir), { recursive: true });
+}
+
+// ── Estimate scene durations from word count ──────────────────────────────────
+// 2.5 words/second is a typical narrator pace; scenes start sequentially.
+
+const WORDS_PER_SEC = 2.5;
+let cumulativeTime = 0;
+const sceneMeta = scenes.map((scene, i) => {
+  const words    = (scene.narration || '').split(/\s+/).filter(Boolean).length;
+  const duration = Math.max(2.5, words / WORDS_PER_SEC);
+  const start    = cumulativeTime;
+  cumulativeTime += duration;
+  return { ...scene, _start: start, _duration: duration, _index: i };
+});
+const totalDuration = cumulativeTime;
+
+// ── Generate index.html ───────────────────────────────────────────────────────
+
+const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+  <!-- Preload primary typeface — must resolve before frame 0 (fonts.ready gate) -->
+  <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=Archivo:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="reel/engine.css">
+  <style>
+    /* Project-level overrides — edit here */
+    :root {
+      --primary: #ffffff;
+      --accent:  #3b82f6;
+      --bg:      #0d1117;
+      --font:    'Archivo', system-ui, sans-serif;
+    }
+  </style>
+</head>
+<body>
+  <div id="stage" style="width:${width}px;height:${height}px;position:relative;overflow:hidden;background:var(--bg)">
+  </div>
+  <script type="module" src="edit.js"></script>
+</body>
+</html>
+`;
+fs.writeFileSync(path.join(outDir, 'index.html'), indexHtml, 'utf8');
+
+// ── Generate edit.js ──────────────────────────────────────────────────────────
+// One layer() per FrameForge scene with narration as captions and
+// visual_description as a wallCard placeholder.
+
+const editLines = [
+  `/**`,
+  ` * edit.js — Generated by FrameForge html-renderer scaffold`,
+  ` * Source: ${path.basename(scriptPath)}`,
+  ` * Title:  ${title}`,
+  ` *`,
+  ` * IRON RULE: Every style must be a pure function of t (seconds).`,
+  ` * No CSS transitions, no setTimeout, no state that depends on previous frames.`,
+  ` * If a layer is only active until t=X, it must explicitly hide itself after t=X.`,
+  ` */`,
+  ``,
+  `import { reel, layer, text, wallCard, stamp, at, stagger, captions, cue, codeCard, terminal, imageCard, chip } from './reel/engine.js';`,
+  ``,
+  `// ── Compositor config ────────────────────────────────────────────────────────`,
+  `reel({`,
+  `  width:    ${width},`,
+  `  height:   ${height},`,
+  `  fps:      ${fps},`,
+  `  duration: ${totalDuration.toFixed(2)},`,
+  `  title:    ${JSON.stringify(title)},`,
+  `});`,
+  ``,
+  `// ── Background ────────────────────────────────────────────────────────────────`,
+  `layer('background').on(t => ({`,
+  `  position: 'absolute', inset: 0,`,
+  `  background: 'var(--bg)',`,
+  `}));`,
+  ``,
+];
+
+function renderSceneComponent(scene, i, width, height, start, duration) {
+  const narration = (scene.narration || '').replace(/`/g, "'");
+  const visual    = (scene.visual_description || '').replace(/`/g, "'");
+  const caption   = (scene.caption || `SCENE ${i + 1}`).toUpperCase().replace(/`/g, "'");
+  const textLower = (narration + ' ' + visual + ' ' + caption).toLowerCase();
+
+  // 1. Manual User Image
+  if (scene.image_path) {
+    return [
+      `// User-supplied image for Scene ${i + 1}`,
+      `at(${start}, imageCard(${JSON.stringify(scene.image_path)}, {`,
+      `  caption: ${JSON.stringify(caption)},`,
+      `  width: ${Math.round(width * 0.72)},`,
+      `  x: 'center', y: 'center',`,
+      `  duration: ${duration}`,
+      `}));`,
+    ].join('\n');
+  }
+
+  // 2. Manual User Video Clip
+  if (scene.video_path) {
+    return [
+      `// User-supplied video clip for Scene ${i + 1}: ${scene.video_path}`,
+      `at(${start}, wallCard([`,
+      `  { text: ${JSON.stringify(caption)}, size: 28, weight: 800, color: 'var(--accent)' },`,
+      `], { x: 'center', y: ${Math.round(height * 0.78)}, width: ${Math.round(width * 0.8)}, duration: ${duration} }));`,
+    ].join('\n');
+  }
+
+  // 3. Code / Tech
+  if (/\b(code|function|syntax|api|javascript|python|typescript|json|sql|query|endpoint|algorithm|struct)\b/.test(textLower)) {
+    const snippet = visual.length > 20 ? visual : `// ${caption}\nfunction execute() {\n  return "${caption.toLowerCase()}";\n}`;
+    return [
+      `at(${start}, codeCard(${JSON.stringify(snippet)}, 'js', {`,
+      `  title: ${JSON.stringify(caption)},`,
+      `  width: ${Math.round(width * 0.76)},`,
+      `  x: 'center', y: ${Math.round(height * 0.22)},`,
+      `  duration: ${duration}`,
+      `}));`,
+    ].join('\n');
+  }
+
+  // 4. Terminal / Commands
+  if (/\b(terminal|command|cli|bash|shell|npm|install|curl|git|docker|deploy|run)\b/.test(textLower)) {
+    const cmd = caption.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+    return [
+      `at(${start}, terminal([`,
+      `  '$ frameforge ${cmd}',`,
+      `  '${caption} — initializing...',`,
+      `  '✓ complete (${duration}s)'`,
+      `], {`,
+      `  title: ${JSON.stringify(caption)},`,
+      `  width: ${Math.round(width * 0.74)},`,
+      `  x: 'center', y: ${Math.round(height * 0.24)},`,
+      `  duration: ${duration}`,
+      `}));`,
+    ].join('\n');
+  }
+
+  // 5. Stat / Metric / Number
+  const metricMatch = textLower.match(/\b(\$?\d+(?:\.\d+)?%?|\d+x)\b/);
+  if (metricMatch && /\b(percent|million|billion|trillion|x|fps|ms|seconds|users|growth|speed|metric|stat)\b/.test(textLower)) {
+    return [
+      `at(${start}, wallCard([`,
+      `  { text: ${JSON.stringify(metricMatch[0].toUpperCase())}, size: 76, weight: 900, color: 'var(--accent)' },`,
+      `  { text: ${JSON.stringify(caption)}, size: 28, weight: 800 },`,
+      `  { text: ${JSON.stringify(narration.slice(0, 110))}, size: 20, weight: 400, color: '#94a3b8' }`,
+      `], { x: 'center', y: ${Math.round(height * 0.25)}, width: ${Math.round(width * 0.82)}, duration: ${duration} }));`,
+    ].join('\n');
+  }
+
+  // 6. Default: Kinetic typography card with accent stamp
+  return [
+    `at(${start}, wallCard([`,
+    `  { text: ${JSON.stringify(caption)}, size: 36, weight: 800, color: 'var(--accent)' },`,
+    `  { text: ${JSON.stringify(narration.slice(0, 130))}, size: 24, weight: 400 }`,
+    `], { x: 'center', y: ${Math.round(height * 0.30)}, width: ${Math.round(width * 0.82)}, duration: ${duration} }));`,
+    `at(${start}, stamp(${JSON.stringify(caption.slice(0, 16))}, { x: ${Math.round(width * 0.75)}, y: ${Math.round(height * 0.18)}, color: 'var(--accent)', duration: ${duration} }));`,
+  ].join('\n');
+}
+
+sceneMeta.forEach((scene, i) => {
+  const start    = scene._start.toFixed(2);
+  const end      = (scene._start + scene._duration).toFixed(2);
+  const caption  = (scene.caption || `SCENE ${i + 1}`).toUpperCase();
+  const narration = (scene.narration || '').replace(/`/g, "'");
+  const visual   = (scene.visual_description || '').replace(/`/g, "'");
+  const cam      = scene.camera_hint || 'auto';
+  const mood     = scene.music_mood || 'neutral';
+
+  editLines.push(
+    `// ── Scene ${i + 1}/${scenes.length}: ${caption} (${start}s – ${end}s) ─────────────────────────────`,
+    `// Narration: "${narration.slice(0, 80)}${narration.length > 80 ? '…' : ''}"`,
+    `// Visual:    "${visual.slice(0, 80)}${visual.length > 80 ? '…' : ''}"`,
+    `// Camera:    ${cam}  |  Music: ${mood}`,
+    `layer('scene-${i + 1}').on(t => {`,
+    `  const active  = t >= ${start} && t < ${end};`,
+    `  const fadeIn  = t < ${(scene._start + 0.4).toFixed(2)} ? (t - ${start}) / 0.4 : 1;`,
+    `  const fadeOut = t > ${(scene._start + scene._duration - 0.4).toFixed(2)} ? (${end} - t) / 0.4 : 1;`,
+    `  const alpha   = active ? Math.min(fadeIn, fadeOut) : 0;`,
+    `  return {`,
+    `    position: 'absolute', inset: 0,`,
+    `    opacity: alpha,`,
+    `    pointerEvents: active ? 'auto' : 'none',`,
+    `  };`,
+    `});`,
+    ``,
+    `// Code-driven visual component for Scene ${i + 1}`,
+    renderSceneComponent(scene, i, width, height, start, scene._duration.toFixed(2)),
+    ``,
+  );
+});
+
+editLines.push(
+  `// ── Captions (auto-synced to TTS audio) ─────────────────────────────────────`,
+  `// After running FrameForge TTS + uv run scripts/transcribe.py, uncomment:`,
+  `// captions('audio/outline.txt');`,
+  ``,
+  `// ── Optional: sound effects ──────────────────────────────────────────────────`,
+  `// cue('whoosh', ${sceneMeta[1]?._start?.toFixed(2) || '3.0'}, 0.6);`,
+);
+
+fs.writeFileSync(path.join(outDir, 'edit.js'), editLines.join('\n'), 'utf8');
+
+// ── Copy engine files from assets/project/ ─────────────────────────────────
+
+function copyAsset(srcRel, dstRel) {
+  const src = path.join(assetsDir, srcRel);
+  const dst = path.join(outDir, dstRel);
+  if (fs.existsSync(src)) {
+    fs.mkdirSync(path.dirname(dst), { recursive: true });
+    fs.copyFileSync(src, dst);
+  } else {
+    console.warn(`  ⚠  Asset not found: ${src} (scaffold may be incomplete)`);
+  }
+}
+
+copyAsset('reel/engine.js',           'reel/engine.js');
+copyAsset('reel/engine.css',          'reel/engine.css');
+copyAsset('reel/virtual-clock.js',    'reel/virtual-clock.js');
+copyAsset('scripts/render.mjs',       'scripts/render.mjs');
+copyAsset('scripts/harness.mjs',      'scripts/harness.mjs');
+copyAsset('scripts/browser.mjs',      'scripts/browser.mjs');
+copyAsset('scripts/verify-purity.mjs','scripts/verify-purity.mjs');
+copyAsset('scripts/pixels.mjs',       'scripts/pixels.mjs');
+copyAsset('scripts/sheets.mjs',       'scripts/sheets.mjs');
+copyAsset('scripts/jobs.mjs',         'scripts/jobs.mjs');
+copyAsset('scripts/encode.mjs',       'scripts/encode.mjs');
+copyAsset('scripts/look.mjs',         'scripts/look.mjs');
+copyAsset('scripts/storyboard-validator.mjs', 'scripts/storyboard-validator.mjs');
+copyAsset('scripts/mix_audio.py',     'scripts/mix_audio.py');
+copyAsset('scripts/verify.py',        'scripts/verify.py');
+copyAsset('scripts/transcribe.py',    'scripts/transcribe.py');
+copyAsset('scripts/capture.mjs',      'scripts/capture.mjs');
+copyAsset('scripts/stock.py',         'scripts/stock.py');
+copyAsset('scripts/video_job.py',     'scripts/video_job.py');
+copyAsset('STORYBOARD.md',            'STORYBOARD.md');
+copyAsset('ANIMATION_GUIDE.md',       'ANIMATION_GUIDE.md');
+
+// Pipeline briefings (on-disk agent rules for orchestrator + subagents)
+for (const briefing of ['orchestrator.md', 'scene-author.md', 'diagram-author.md']) {
+  copyAsset(`pipeline/briefings/${briefing}`, `pipeline/briefings/${briefing}`);
+}
+
+// ── Write package.json for the project ───────────────────────────────────────
+
+const pkg = {
+  name:    path.basename(outDir),
+  version: '0.1.0',
+  type:    'module',
+  scripts: {
+    'harness':             'node scripts/harness.mjs',
+    'harness:doctor':      'node scripts/harness.mjs doctor',
+    'harness:verify':      'node scripts/harness.mjs verify',
+    'harness:all':         'node scripts/harness.mjs all',
+    'look':                'node scripts/look.mjs',
+    'validate:storyboard': 'node scripts/storyboard-validator.mjs STORYBOARD.md',
+    'render:sheet':        'node scripts/render.mjs sheet',
+    'render:storyboard':   'node scripts/render.mjs storyboard',
+    'render:strip':        'node scripts/render.mjs strip',
+    'render:crop':         'node scripts/render.mjs crop 9:16',
+    'render:full':         'node scripts/render.mjs full',
+    'render:mux':          'node scripts/render.mjs mux',
+    'mix':                 'uv run scripts/mix_audio.py',
+    'transcribe':          'uv run scripts/transcribe.py',
+    'verify':              'uv run scripts/verify.py',
+    'capture':             'node scripts/capture.mjs',
+    'stock':               'uv run scripts/stock.py',
+    'job:submit':          'python scripts/video_job.py submit',
+    'job:status':          'python scripts/video_job.py list',
+    'job:estimate':        'python scripts/video_job.py estimate',
+  },
+  dependencies: {
+    'playwright': '^1.40.0'
+  }
+};
+fs.writeFileSync(path.join(outDir, 'package.json'), JSON.stringify(pkg, null, 2), 'utf8');
+
+// ── Write README ─────────────────────────────────────────────────────────────
+
+const readme = `# ${title}
+
+HTML-renderer project generated by FrameForge.
+
+## Quick start
+
+1. Add TTS audio files to \`audio/\`  
+   (copy from FrameForge output: \`voice_0.m4a\`, \`voice_1.m4a\`, …)
+2. Check visually: \`npm run render:sheet\`
+3. Mix audio: \`npm run mix\`
+4. Full render: \`npm run render:full\`
+5. Verify: \`npm run verify\`
+
+## Edit
+
+All animation is in \`edit.js\`. Every style must be a pure function of \`t\` (seconds).
+
+## Engine
+
+The compositor runtime is included at \`reel/engine.js\`.
+To install browser renderer dependencies: \`npx playwright install chromium\`
+
+## Scene map
+
+| # | Start | Caption | Duration |
+|---|-------|---------|----------|
+${sceneMeta.map(s => `| ${s._index + 1} | ${s._start.toFixed(1)}s | ${(s.caption || '').toUpperCase()} | ${s._duration.toFixed(1)}s |`).join('\n')}
+
+Total duration: ${totalDuration.toFixed(1)}s
+`;
+fs.writeFileSync(path.join(outDir, 'README.md'), readme, 'utf8');
+
+// ── Done ─────────────────────────────────────────────────────────────────────
+
+console.log(`\n✅  HTML renderer project scaffolded:`);
+console.log(`    Directory: ${outDir}`);
+console.log(`    Scenes:    ${scenes.length}`);
+console.log(`    Duration:  ${totalDuration.toFixed(1)}s`);
+console.log(`    Title:     "${title}"`);
+console.log(`\nNext steps:`);
+console.log(`  1. Install Playwright:      npx playwright install chromium`);
+console.log(`  2. Edit STORYBOARD.md:      fill in shots, events, reads, transitions`);
+console.log(`  3. Validate storyboard:     node scripts/storyboard-validator.mjs STORYBOARD.md`);
+console.log(`  4. Pre-flight check:        node scripts/look.mjs`);
+console.log(`  5. Check visuals:           node scripts/render.mjs sheet`);
+console.log(`  6. Mix audio (TTS):         uv run scripts/mix_audio.py`);
+console.log(`  7. Full render:             node scripts/render.mjs full`);
+console.log(`  8. Verify quality gates:    uv run scripts/verify.py\n`);
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function escapeHtml(str) {
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}