mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 08:13:11 +00:00
refactor(skills): move product-launch / pr-to-video / faceless-explainer onto the script-driven architecture (#1635)
* refactor(product-launch-video): restructure onto script-driven architecture Move product-launch-video onto the shared script-driven authoring flow: build-frame remixes a hyperframes-creative preset onto brand tokens, audio routes through the shared hyperframes-media engine, per-preset caption skins, and every frame is authored as a directed shot. Removes the old bespoke scripts (captions/validate/prep/hoist/…) in favour of the shared lib. assemble-index.mjs keeps upstream #1629's blank/partial scene-file guard (reject an empty or markup-less scene file at assembly, before emitting data-composition-src, and re-dispatch) carried onto the restructured reader. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(pr-to-video): restructure onto script-driven architecture Move pr-to-video onto the shared script-driven authoring flow: ingest.mjs folds the gh PR artifacts into the synthetic capture package the shared backend (build-frame / captions / assemble-index) reads, add the mechanism beat, route audio through hyperframes-media, and remix a hyperframes-creative preset onto brand tokens via the shared lib. - Fix skill name: pr-to-video-refactor -> pr-to-video (match directory). - Drop a stale faceless-explainer-refactor reference in an ingest.mjs comment. - assemble-index.mjs keeps upstream #1629's blank/partial scene-file guard. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(faceless-explainer): restructure onto script-driven architecture Move faceless-explainer onto the shared script-driven authoring flow: every visual is invented (typography / abstract graphics / diagram / data-viz) and authored through the shared backend (build-frame remixes a hyperframes-creative preset onto tokens, audio via hyperframes-media, assemble-index builds the standalone index.html) using the shared lib. - Fix skill name: faceless-explainer-refactor -> faceless-explainer (match directory). - assemble-index.mjs keeps upstream #1629's blank/partial scene-file guard. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * chore(skills): refresh test-skills-fresh.sh workflow roster Update the install-and-verify harness to the current surface: 10 workflows (adds website-to-video, embedded-captions, graphic-overlays, slideshow; drops the removed footage-recut) and refreshed example prompts. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * style(product-launch-video): oxfmt storyboard.mjs Run oxfmt over lib/storyboard.mjs — formatting only, no logic change. Fixes the Format / Preflight CI check. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(studio): import commitGsapPositionFromDrag from its actual module The function was split out into gsapDragPositionCommit.ts in #1605, but the test kept importing it from ./gsapDragCommit, which no longer exports it — yielding 'is not a function' at runtime. Import from the correct module. Inherited main breakage (same fix as #1631); fixes the Test CI check on this branch independently of merge order. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * chore(hyperframes): refine router skill metadata tags Update the entry router's metadata tags (video / animation / router focus); oxfmt collapses the now-shorter metadata to a single line. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(skills): tighten caption comment-strip + document audio --only merge Review follow-ups (#1635): - captions.mjs (x3): the HTML-comment strip used a single global replace, which CodeQL flags as incomplete multi-character sanitization (a nested/partial pair can re-form a marker the single pass misses). Strip in a fixpoint loop instead. Input is preset-library content, not user-controlled, so this is lint- cleanliness, not XSS defense. - audio.mjs (x3): document that fetch-sfx (--only sfx) MERGES into the neutral audio_engine_meta.json sidecar — the engine reads prev and recomputes only the sfx section, so voices/bgm from the generate pass are preserved (review Q). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(skills): remove existsSync->write TOCTOU in workflow scripts Clears the 9 js/file-system-race CodeQL alerts (captions/audio/transitions x3). Each was an existsSync precheck followed by a later write of the same path: - captions.mjs: caption-overrides shim -> atomic writeFileSync({ flag: 'wx' }). - audio.mjs (sync-durations) + transitions.mjs (inject): drop the existsSync precheck and read directly, surfacing the same friendly error from a try/catch on readFileSync — no check->write gap. Behavior is unchanged (same error messages); these are local single-process deterministic scripts so the race was never a real risk, but this clears the gate. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(skills): paint root composition ground color in assemble-index Per-frame roots carry data-start/data-duration and get clip-gated against the global timeline at render, so only the first frame's window overlaps global 0 — a frame's own full-bleed background can't serve as the video ground, and every frame after the first renders on the bare body color (black). Paint the ground on the always-present root composition using the project's frame.md canvas color (the same role the caption skin maps to --cap-canvas); fall back to the body letterbox color when frame.md is absent or has no resolvable ground. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * chore(hyperframes): drop router-tag edit (moved to the foundation PR) The entry SKILL.md is rewritten wholesale by the frame-presets/media foundation PR (#1632); editing it here too guaranteed a merge conflict. Restore this file to main and let the router-tag tweak live with the rewrite in #1632, so the two PRs no longer both touch it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
WaterrrForever
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
d0f0ec29e7
commit
1967901b57
@@ -1,52 +1,48 @@
|
||||
#!/usr/bin/env node
|
||||
// Phase 4c (engine) — deterministic index.html assembly. No subagent.
|
||||
// assemble-index.mjs — deterministic top-level index.html assembly for a
|
||||
// product-launch project. No subagent, no judgment: turns STORYBOARD.md + the
|
||||
// built frame files (+ optional audio_meta.json) into the standalone index.html
|
||||
// the renderer consumes, and stages the frame-named capture assets into assets/.
|
||||
//
|
||||
// Owns the mechanical, judgment-free half of finalize (the old
|
||||
// hyperframes-finalize.md "Step 2"): turning group_spec.json + on-disk state
|
||||
// into the top-level index.html. The finalize AGENT no longer hand-authors
|
||||
// clip/audio elements, hand-computes start_s, picks track indices, or eyeballs
|
||||
// data-duration — those are this script's invariants now. Mirrors the
|
||||
// captions.mjs group precedent (deterministic engine, agent does only judgment).
|
||||
// index.html is a *standalone* composition (root <div id="root"> directly in
|
||||
// <body>, no <template> wrapper — template is for sub-comps). Structure is
|
||||
// modeled on the canonical fixture packages/studio/fixtures/storyboard-sample/
|
||||
// index.html and the authoritative head/audio template in
|
||||
// packages/core/docs/quickstart-template.html. Frame mount order = STORYBOARD
|
||||
// document order. Transitions are NOT written here — the transitions injector
|
||||
// mutates this file afterward (data-start/duration/track-index + GSAP).
|
||||
//
|
||||
// index.html is a *standalone* (top-level) composition: root <div> lives
|
||||
// directly in <body> with NO <template> wrapper (template is for sub-comps).
|
||||
// Structure is modeled verbatim on proven artifacts — the brex-launch-video
|
||||
// real pipeline output (scene track 0 + voice track 10) and the style-10-prod
|
||||
// producer golden test (sub-comp host divs carry data-composition-id matching
|
||||
// the inner file's id; <audio> carries class="clip"). The canvas size is set
|
||||
// once by prep (group_spec.width/height — landscape 1920×1080 by default,
|
||||
// portrait/square when the intent layer requested it); scene workers author and
|
||||
// self-check against those same dims (agents/hyperframes-scene.md), so the root
|
||||
// dims here are read from group_spec, not hardcoded.
|
||||
//
|
||||
// Track lanes (must not collide — lint flags overlapping_clips_same_track):
|
||||
// 0 scene sub-comp clips
|
||||
// 10 per-scene voice <audio>
|
||||
// Track lanes (same-track time-overlap is illegal — lint timeline_track_too_dense):
|
||||
// 1 frame sub-comp clips (sequential; the injector 0/1-ping-pongs for overlaps)
|
||||
// 2 captions sub-comp clip (full-duration overlay, on top of frames)
|
||||
// 10 per-frame voice <audio>
|
||||
// 11 BGM <audio>
|
||||
// 12 captions sub-comp clip
|
||||
// 20+i SFX <audio> (one lane each, in group_spec.sfx[] order)
|
||||
// 20+i SFX <audio> (one lane each)
|
||||
//
|
||||
// Reads: ./group_spec.json (Phase 4a) — total_duration_s, font_face_css,
|
||||
// bgm_path, sfx[], groups[].scenes[<sid>].{start_s,
|
||||
// estimatedDuration_s, voicePath}. On-disk inside --hyperframes:
|
||||
// compositions/<sid>.html (existence + root data-duration cross-check),
|
||||
// assets/voice/*.wav, assets/bgm.wav, compositions/captions.html,
|
||||
// assets/sfx/*.mp3.
|
||||
// Writes: ./index.html inside the HyperFrames project root (--hyperframes).
|
||||
// audio_meta.json contract (produced by audio.mjs; OPTIONAL — absent ⇒ silent
|
||||
// video, frames only). Durations come from STORYBOARD (audio sync-durations
|
||||
// writes them), NOT from here; this file carries only media PATHS, keyed by
|
||||
// frame number:
|
||||
// { "bgm": { "path": "assets/bgm/x.mp3", "volume": 0.8 } | null,
|
||||
// "voices":[ { "frame": 3, "path": "assets/voice/03.wav" } ],
|
||||
// "sfx": [ { "frame": 3, "file": "assets/sfx/x.mp3", "offset_s": 0,
|
||||
// "duration_s": 1.0, "volume": 0.35 } ] }
|
||||
//
|
||||
// Usage:
|
||||
// node assemble-index.mjs --group-spec ./group_spec.json --hyperframes . \
|
||||
// [--out ./index.html]
|
||||
// Reads: --storyboard STORYBOARD.md, --hyperframes <project root>,
|
||||
// [--audio-meta audio_meta.json]. On disk: each built frame's src html,
|
||||
// capture/{assets,assets/videos,screenshots}/<basename> for staging, compositions/captions.html.
|
||||
// Writes: <project>/index.html + stages assets/<basename>.
|
||||
//
|
||||
// Exit 0 = index.html written + summary on stdout.
|
||||
// Exit 1 = fatal: group_spec unreadable / no scenes / a scene file missing /
|
||||
// a scene's root data-duration disagrees with group_spec beyond
|
||||
// DUR_EPSILON (voice/SFX/captions global timing assume group_spec —
|
||||
// re-dispatch the worker to honor estimatedDuration_s, or re-run prep).
|
||||
// Exit 0 = index.html written + summary. Exit 1 = fatal contract break (no
|
||||
// frames, a built/animated frame missing its src/file, a frame with no
|
||||
// duration, an inner data-composition-id mismatch). No backstop: fix upstream.
|
||||
|
||||
import { existsSync, readFileSync, writeFileSync } from "node:fs";
|
||||
import { join, resolve } from "node:path";
|
||||
import { readDims } from "./lib/dimensions.mjs";
|
||||
import { basename, join, resolve } from "node:path";
|
||||
import { parseStoryboard } from "./lib/storyboard.mjs";
|
||||
import { parseFormat } from "./lib/dimensions.mjs";
|
||||
import { stageAssets } from "./lib/assets.mjs";
|
||||
import { parseColors, semanticColors } from "./lib/tokens.mjs";
|
||||
|
||||
// ---------- argv ----------
|
||||
const argv = process.argv.slice(2);
|
||||
@@ -59,230 +55,197 @@ function die(msg) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const groupSpecPath = resolve(flag("group-spec", "./group_spec.json"));
|
||||
const hyperframesDir = resolve(flag("hyperframes", "."));
|
||||
const storyboardPath = resolve(flag("storyboard", join(hyperframesDir, "STORYBOARD.md")));
|
||||
const audioMetaPath = resolve(flag("audio-meta", join(hyperframesDir, "audio_meta.json")));
|
||||
const outPath = resolve(flag("out", join(hyperframesDir, "index.html")));
|
||||
|
||||
// 1/100s. Scene workers are handed estimatedDuration_s (3-decimal) and must
|
||||
// echo it on the root; anything past this slack desyncs the precomputed start_s
|
||||
// / voice / SFX / captions timing, so it's fatal (fix upstream, not here).
|
||||
const DUR_EPSILON = 0.01;
|
||||
|
||||
if (!existsSync(groupSpecPath)) die(`group_spec.json not found at ${groupSpecPath}`);
|
||||
let groupSpec;
|
||||
try {
|
||||
groupSpec = JSON.parse(readFileSync(groupSpecPath, "utf8"));
|
||||
} catch (e) {
|
||||
die(`group_spec.json parse: ${e.message}`);
|
||||
}
|
||||
|
||||
// Canvas size flows from prep → group_spec.width/height (landscape default for
|
||||
// pre-dims group_specs). Scene workers author + self-check against these same
|
||||
// dims, so the index root matches.
|
||||
const { width: WIDTH, height: HEIGHT } = readDims(groupSpec);
|
||||
|
||||
const totalDuration = Number(groupSpec.total_duration_s);
|
||||
if (!isFinite(totalDuration) || totalDuration <= 0)
|
||||
die(`group_spec.total_duration_s missing or non-positive (${groupSpec.total_duration_s})`);
|
||||
|
||||
// Flatten play order: groups in array order, scene_ids in array order.
|
||||
const playOrder = [];
|
||||
for (const g of groupSpec.groups || []) {
|
||||
for (const sid of g.scene_ids || []) {
|
||||
playOrder.push({ sid, scene: g.scenes?.[sid] || {} });
|
||||
}
|
||||
}
|
||||
if (playOrder.length === 0) die("no scenes in group_spec.groups[].scene_ids");
|
||||
|
||||
const r3 = (x) => Math.round(x * 1000) / 1000;
|
||||
const anomalies = [];
|
||||
|
||||
// ---------- helper: pull the root <div>'s data-duration ----------
|
||||
// The root is the element carrying id="root"; match its full opening tag (same
|
||||
// shape check-compositions.mjs uses) and read data-duration off THAT tag, not
|
||||
// some inner clip's. Returns null if the file has no id="root" tag or that tag
|
||||
// carries no data-duration (check-compositions already gates both — here a null
|
||||
// just skips the cross-check rather than guessing).
|
||||
function rootDataDuration(html) {
|
||||
const tagM = html.match(/<div\b[^>]*\bid=["']root["'][^>]*>/i);
|
||||
if (!tagM) return null;
|
||||
const durM = tagM[0].match(/\bdata-duration=["']([\d.]+)["']/);
|
||||
return durM ? parseFloat(durM[1]) : null;
|
||||
}
|
||||
// ---------- parse storyboard ----------
|
||||
if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
|
||||
const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
|
||||
const { width: WIDTH, height: HEIGHT } = parseFormat(manifest.globals.format);
|
||||
|
||||
// ---------- per-scene: existence + duration cross-check ----------
|
||||
const durMismatches = [];
|
||||
for (const { sid, scene } of playOrder) {
|
||||
const compRel = `compositions/${sid}.html`;
|
||||
const compAbs = join(hyperframesDir, compRel);
|
||||
// ---------- resolve mountable frames in document order ----------
|
||||
// A frame mounts when its src html exists on disk. A built/animated frame
|
||||
// missing its src/file is a contract break (die). An outline frame with no
|
||||
// file is skipped (still a placeholder) with an anomaly note.
|
||||
const mounted = [];
|
||||
for (const f of manifest.frames) {
|
||||
const label = `frame ${f.number ?? f.index}${f.title ? ` (${f.title})` : ""}`;
|
||||
const built = f.status === "built" || f.status === "animated";
|
||||
if (!f.src) {
|
||||
if (built) die(`${label} is ${f.status} but has no \`src\` — the orchestrator must write it`);
|
||||
anomalies.push(`${label}: status ${f.status}, no src — skipped`);
|
||||
continue;
|
||||
}
|
||||
const compAbs = join(hyperframesDir, f.src);
|
||||
if (!existsSync(compAbs)) {
|
||||
if (built)
|
||||
die(`${label} is ${f.status} but its src ${f.src} is not on disk — re-dispatch the worker`);
|
||||
anomalies.push(`${label}: src ${f.src} not on disk (status ${f.status}) — skipped`);
|
||||
continue;
|
||||
}
|
||||
if (!Number.isFinite(f.durationSeconds) || f.durationSeconds <= 0) {
|
||||
die(
|
||||
`scene file ${compRel} missing — run check-compositions.mjs / re-dispatch worker before assembling`,
|
||||
);
|
||||
}
|
||||
const specDur = Number(scene.estimatedDuration_s);
|
||||
if (!isFinite(specDur) || specDur <= 0) {
|
||||
die(
|
||||
`${sid}: group_spec estimatedDuration_s missing or non-positive (${scene.estimatedDuration_s})`,
|
||||
`${label}: no positive duration (got ${JSON.stringify(f.duration)}) — run audio sync-durations`,
|
||||
);
|
||||
}
|
||||
// Host data-composition-id MUST equal the inner file's, or the runtime never
|
||||
// finds the timeline. frame_id = src basename (frame-worker contract); verify
|
||||
// the inner html actually declares it.
|
||||
const compId = basename(f.src).replace(/\.html?$/i, "");
|
||||
const html = readFileSync(compAbs, "utf8");
|
||||
// Guard against blank/partial scene files: a worker that errors or is
|
||||
// interrupted mid-write leaves an empty (or markup-less) file that exists but
|
||||
// fails at render with "Composition HTML is empty or could not be parsed".
|
||||
// Catch it here — before emitting data-composition-src — and re-dispatch.
|
||||
const compHtml = readFileSync(compAbs, "utf8");
|
||||
if (!compHtml.trim() || !/<\w/.test(compHtml)) {
|
||||
if (!html.trim() || !/<\w/.test(html)) {
|
||||
die(
|
||||
`scene file ${compRel} is empty or has no HTML — the worker for ${sid} wrote a blank/partial file. Re-dispatch that scene worker before assembling.`,
|
||||
`${label}: ${f.src} is empty or has no HTML — the worker wrote a blank/partial file. Re-dispatch that worker before assembling.`,
|
||||
);
|
||||
}
|
||||
const rootDur = rootDataDuration(compHtml);
|
||||
if (rootDur == null) {
|
||||
anomalies.push(
|
||||
`${sid}: could not read root data-duration from ${compRel} — skipped duration cross-check`,
|
||||
);
|
||||
} else if (Math.abs(rootDur - specDur) > DUR_EPSILON) {
|
||||
durMismatches.push(`${sid}: worker root data-duration=${rootDur}s but group_spec=${specDur}s`);
|
||||
if (
|
||||
!html.includes(`data-composition-id="${compId}"`) &&
|
||||
!html.includes(`data-composition-id='${compId}'`)
|
||||
) {
|
||||
die(`${label}: ${f.src} has no data-composition-id="${compId}" (host/inner id must match)`);
|
||||
}
|
||||
mounted.push({ frame: f, compId, durationSeconds: r3(f.durationSeconds) });
|
||||
}
|
||||
if (mounted.length === 0) die("no mountable frames (none built with an on-disk src)");
|
||||
|
||||
// cumulative starts — emitted data-start[i] + data-duration[i] == start[i+1] by
|
||||
// construction (renderer computes end the same way), so adjacent clips touch
|
||||
// exactly with no float-overlap.
|
||||
let acc = 0;
|
||||
for (const m of mounted) {
|
||||
m.start = acc;
|
||||
acc += m.durationSeconds;
|
||||
}
|
||||
const TOTAL = r3(acc);
|
||||
const startOfFrameNumber = new Map();
|
||||
for (const m of mounted) if (m.frame.number != null) startOfFrameNumber.set(m.frame.number, m);
|
||||
|
||||
// ---------- audio_meta (optional) ----------
|
||||
let audio = { bgm: null, voices: [], sfx: [] };
|
||||
if (existsSync(audioMetaPath)) {
|
||||
try {
|
||||
const parsed = JSON.parse(readFileSync(audioMetaPath, "utf8"));
|
||||
audio = { bgm: parsed.bgm ?? null, voices: parsed.voices ?? [], sfx: parsed.sfx ?? [] };
|
||||
} catch (e) {
|
||||
die(`audio_meta.json parse: ${e.message}`);
|
||||
}
|
||||
}
|
||||
if (durMismatches.length > 0) {
|
||||
die(
|
||||
`scene root data-duration disagrees with group_spec (voice / SFX / captions timing assume group_spec):\n ${durMismatches.join("\n ")}\n → re-dispatch the worker to honor estimatedDuration_s, or re-run prep.mjs.`,
|
||||
);
|
||||
}
|
||||
const voiceByFrame = new Map();
|
||||
for (const v of audio.voices) if (v.frame != null) voiceByFrame.set(v.frame, v);
|
||||
|
||||
// ---------- BGM volume: duck under narration if any scene has voice ----------
|
||||
const hasAnyVoice = playOrder.some(
|
||||
({ scene }) => scene.voicePath && existsSync(join(hyperframesDir, scene.voicePath)),
|
||||
);
|
||||
const BGM_VOLUME = hasAnyVoice ? "0.8" : "0.9";
|
||||
|
||||
// ---------- build <body> elements in track order ----------
|
||||
// ---------- build <body> in track order ----------
|
||||
const body = [];
|
||||
let voiceCount = 0;
|
||||
|
||||
for (let i = 0; i < playOrder.length; i++) {
|
||||
const { sid, scene } = playOrder[i];
|
||||
const start = scene.start_s;
|
||||
const dur = scene.estimatedDuration_s;
|
||||
// Voice clips share track 10 (single-lane). start_s is prep.mjs's cumulative
|
||||
// sum of estimatedDuration_s, so (nextStart - start) IS the scene's own span —
|
||||
// this is NOT a semantic change, just a float-exact one: computing dur this way
|
||||
// makes the IEEE-754 sum (start + voiceDur) bit-exact equal to nextStart, which
|
||||
// avoids spurious StaticGuard "overlaps by 5e-16s" failures when two 3-decimal
|
||||
// floats sum off by a ULP (e.g. 1.771 + 3.648 = 5.4190000000000005 ≠ 5.419).
|
||||
// Last scene has no successor → fall back to its own duration.
|
||||
// (Root cause is the overlap guard lacking a float epsilon; this is the
|
||||
// assemble-layer workaround since the skill can't patch core lint.)
|
||||
const next = playOrder[i + 1];
|
||||
const voiceDur = next ? next.scene.start_s - start : dur;
|
||||
// CONTRACT (keep in lockstep with transitions.mjs scene-clip parser): the
|
||||
// "HF-SCENE-CLIP <sid>" marker lets transitions.mjs count expected scene clips
|
||||
// independently of the <div> attribute formatting and fail loudly if the emit
|
||||
// shape below ever drifts out of sync with its regex. Do not rename the marker
|
||||
// or collapse the per-attribute line layout without updating transitions.mjs.
|
||||
body.push(` <!-- HF-SCENE-CLIP ${sid} (${start} → ${Number((start + dur).toFixed(3))}) -->`);
|
||||
// (track 0) scene sub-comp clip — host data-composition-id MUST equal the
|
||||
// inner file's data-composition-id (= sid) or the runtime never finds the
|
||||
// timeline. No class="clip" on sub-comp host divs (proven: brex / style-10).
|
||||
for (const m of mounted) {
|
||||
// (track 1) frame sub-comp clip — no class="clip" semantics needed; .scene CSS sizes it.
|
||||
body.push(
|
||||
` <div`,
|
||||
` id="el-${sid}"`,
|
||||
` data-composition-id="${sid}"`,
|
||||
` data-composition-src="compositions/${sid}.html"`,
|
||||
` data-start="${start}"`,
|
||||
` data-duration="${dur}"`,
|
||||
` data-track-index="0"`,
|
||||
` data-width="${WIDTH}"`,
|
||||
` data-height="${HEIGHT}"`,
|
||||
` id="el-${m.compId}"`,
|
||||
` class="scene"`,
|
||||
` data-composition-id="${m.compId}"`,
|
||||
` data-composition-src="${m.frame.src}"`,
|
||||
` data-start="${m.start}"`,
|
||||
` data-duration="${m.durationSeconds}"`,
|
||||
` data-track-index="1"`,
|
||||
` ></div>`,
|
||||
);
|
||||
// (track 10) voice — only when the wav is actually on disk.
|
||||
if (scene.voicePath && existsSync(join(hyperframesDir, scene.voicePath))) {
|
||||
body.push(
|
||||
` <audio`,
|
||||
` id="el-${sid}-voice"`,
|
||||
` class="clip"`,
|
||||
` src="${scene.voicePath}"`,
|
||||
` data-start="${start}"`,
|
||||
` data-duration="${voiceDur}"`,
|
||||
` data-track-index="10"`,
|
||||
` ></audio>`,
|
||||
);
|
||||
voiceCount++;
|
||||
} else if (scene.voicePath) {
|
||||
anomalies.push(`${sid}: voicePath "${scene.voicePath}" not on disk — skipped voice <audio>`);
|
||||
// (track 10) voice — only when the file is actually on disk.
|
||||
const v = m.frame.number != null ? voiceByFrame.get(m.frame.number) : undefined;
|
||||
if (v?.path) {
|
||||
if (existsSync(join(hyperframesDir, v.path))) {
|
||||
body.push(
|
||||
` <audio`,
|
||||
` id="el-${m.compId}-voice"`,
|
||||
` src="${v.path}"`,
|
||||
` data-start="${m.start}"`,
|
||||
` data-duration="${m.durationSeconds}"`,
|
||||
` data-track-index="10"`,
|
||||
` data-volume="1"`,
|
||||
` ></audio>`,
|
||||
);
|
||||
voiceCount++;
|
||||
} else {
|
||||
anomalies.push(`${m.compId}: voice ${v.path} not on disk — skipped`);
|
||||
}
|
||||
}
|
||||
body.push("");
|
||||
}
|
||||
|
||||
// (track 11) BGM — Lyria is spawned detached and may not have landed yet, so
|
||||
// re-check disk here (group_spec / audio_meta only promise the path).
|
||||
// (track 11) BGM — duck under narration when any voice is present.
|
||||
let bgmEmitted = false;
|
||||
const bgmPath = groupSpec.bgm_path;
|
||||
if (bgmPath) {
|
||||
if (existsSync(join(hyperframesDir, bgmPath))) {
|
||||
if (audio.bgm?.path) {
|
||||
if (existsSync(join(hyperframesDir, audio.bgm.path))) {
|
||||
const vol = audio.bgm.volume != null ? audio.bgm.volume : voiceCount > 0 ? 0.8 : 0.9;
|
||||
body.push(
|
||||
` <!-- BGM -->`,
|
||||
` <audio`,
|
||||
` id="el-bgm"`,
|
||||
` class="clip"`,
|
||||
` src="${bgmPath}"`,
|
||||
` src="${audio.bgm.path}"`,
|
||||
` data-start="0"`,
|
||||
` data-duration="${totalDuration}"`,
|
||||
` data-duration="${TOTAL}"`,
|
||||
` data-track-index="11"`,
|
||||
` data-volume="${BGM_VOLUME}"`,
|
||||
` data-volume="${vol}"`,
|
||||
` ></audio>`,
|
||||
"",
|
||||
);
|
||||
bgmEmitted = true;
|
||||
} else {
|
||||
anomalies.push(`bgm_path "${bgmPath}" not on disk (still rendering?) — skipped BGM <audio>`);
|
||||
anomalies.push(`bgm ${audio.bgm.path} not on disk — skipped`);
|
||||
}
|
||||
}
|
||||
|
||||
// (track 12) captions — captions.mjs html writes this or legally skips; key off existence.
|
||||
// (track 2) captions — captions.mjs writes this or legally skips; key off existence.
|
||||
let captionsEmitted = false;
|
||||
if (existsSync(join(hyperframesDir, "compositions/captions.html"))) {
|
||||
body.push(
|
||||
` <!-- captions -->`,
|
||||
` <div`,
|
||||
` id="el-captions"`,
|
||||
` class="scene"`,
|
||||
` data-composition-id="captions"`,
|
||||
` data-composition-src="compositions/captions.html"`,
|
||||
` data-start="0"`,
|
||||
` data-duration="${totalDuration}"`,
|
||||
` data-track-index="12"`,
|
||||
` data-width="${WIDTH}"`,
|
||||
` data-height="${HEIGHT}"`,
|
||||
` data-duration="${TOTAL}"`,
|
||||
` data-track-index="2"`,
|
||||
` ></div>`,
|
||||
"",
|
||||
);
|
||||
captionsEmitted = true;
|
||||
}
|
||||
|
||||
// (track 20+i) SFX — emitted verbatim from group_spec.sfx[] (already sorted by
|
||||
// t, file checked against the manifest, duration locked to manifest truth by
|
||||
// prep). Correct-by-construction; verify-output.mjs sfx re-asserts this against the
|
||||
// emitted html as the orchestrator's deterministic gate.
|
||||
const sfx = Array.isArray(groupSpec.sfx) ? groupSpec.sfx : [];
|
||||
// (track 20+i) SFX — placed at its frame's start + offset.
|
||||
let sfxEmitted = 0;
|
||||
sfx.forEach((cue, i) => {
|
||||
const rel = `assets/sfx/${cue.file}`;
|
||||
if (!existsSync(join(hyperframesDir, rel))) {
|
||||
anomalies.push(
|
||||
`sfx "${cue.file}" not on disk at ${rel} — skipped (prep should have copied it)`,
|
||||
);
|
||||
audio.sfx.forEach((cue, i) => {
|
||||
const host = cue.frame != null ? startOfFrameNumber.get(cue.frame) : undefined;
|
||||
if (!host) {
|
||||
anomalies.push(`sfx ${cue.file}: frame ${cue.frame} not mounted — skipped`);
|
||||
return;
|
||||
}
|
||||
const rel = cue.file;
|
||||
if (!existsSync(join(hyperframesDir, rel))) {
|
||||
anomalies.push(`sfx ${rel} not on disk — skipped`);
|
||||
return;
|
||||
}
|
||||
const t = r3(host.start + (cue.offset_s ?? 0));
|
||||
const dur = r3(cue.duration_s ?? 1);
|
||||
const vol = cue.volume != null ? cue.volume : 0.35;
|
||||
if (sfxEmitted === 0) body.push(` <!-- SFX -->`);
|
||||
body.push(
|
||||
` <audio`,
|
||||
` id="el-sfx-${i}"`,
|
||||
` class="clip"`,
|
||||
` src="${rel}"`,
|
||||
` data-start="${cue.t}"`,
|
||||
` data-duration="${cue.duration}"`,
|
||||
` data-start="${t}"`,
|
||||
` data-duration="${dur}"`,
|
||||
` data-track-index="${20 + i}"`,
|
||||
` data-volume="${vol}"`,
|
||||
` ></audio>`,
|
||||
@@ -290,9 +253,40 @@ sfx.forEach((cue, i) => {
|
||||
sfxEmitted++;
|
||||
});
|
||||
|
||||
// ---------- <head> style: proven base + global brand tokens + optional @font-face ----------
|
||||
const fontFaceCss = (groupSpec.font_face_css || "").trim();
|
||||
const brandTokensCss = (groupSpec.brand_tokens_css || "").trim();
|
||||
// ---------- stage frame-named assets: capture/ → assets/ (idempotent backstop) ----------
|
||||
// Frame workers + the live preview reference assets/<basename>; stage-assets.mjs
|
||||
// already ran this at Step 4 close. Re-run as a backstop so a late-named asset
|
||||
// still lands. Shared logic: lib/assets.mjs (first-wins, safe to call twice).
|
||||
const {
|
||||
staged,
|
||||
wanted,
|
||||
anomalies: assetAnomalies,
|
||||
} = stageAssets({
|
||||
hyperframesDir,
|
||||
frames: manifest.frames,
|
||||
});
|
||||
for (const a of assetAnomalies) anomalies.push(a);
|
||||
|
||||
// ---------- <head> ----------
|
||||
// ---------- ground color ----------
|
||||
// Per-frame roots carry data-start/data-duration and get clip-gated against the
|
||||
// global timeline in render (only the first frame's [0,dur] window overlaps global
|
||||
// 0), so a frame's own full-bleed background can't be relied on as the video ground —
|
||||
// every frame after the first would render on the bare body color (black). Paint the
|
||||
// ground on the always-present root composition instead, using the project's frame.md
|
||||
// canvas color (the same ground role the caption skin maps to --cap-canvas). Falls
|
||||
// back to the body letterbox color when frame.md is absent or has no resolvable ground.
|
||||
const framePath = join(hyperframesDir, "frame.md");
|
||||
let groundColor = null;
|
||||
if (existsSync(framePath)) {
|
||||
try {
|
||||
const roles = semanticColors(parseColors(readFileSync(framePath, "utf8")));
|
||||
if (roles && roles.canvas) groundColor = roles.canvas;
|
||||
} catch {
|
||||
/* leave groundColor null — #root stays transparent over the body letterbox */
|
||||
}
|
||||
}
|
||||
|
||||
const headStyle = [
|
||||
" * {",
|
||||
" margin: 0;",
|
||||
@@ -301,7 +295,6 @@ const headStyle = [
|
||||
" }",
|
||||
" html,",
|
||||
" body {",
|
||||
" margin: 0;",
|
||||
` width: ${WIDTH}px;`,
|
||||
` height: ${HEIGHT}px;`,
|
||||
" overflow: hidden;",
|
||||
@@ -312,27 +305,16 @@ const headStyle = [
|
||||
` width: ${WIDTH}px;`,
|
||||
` height: ${HEIGHT}px;`,
|
||||
" overflow: hidden;",
|
||||
...(groundColor ? [` background: ${groundColor};`] : []),
|
||||
" }",
|
||||
" /* Sub-comp slots stretch to fill the root */",
|
||||
" #root > div[data-composition-src] {",
|
||||
" .scene {",
|
||||
" position: absolute;",
|
||||
" inset: 0;",
|
||||
" width: 100%;",
|
||||
" height: 100%;",
|
||||
" }",
|
||||
];
|
||||
if (brandTokensCss) {
|
||||
// Global brand tokens — declared ONCE here. CSS custom properties inherit
|
||||
// through the light DOM into every mounted sub-composition, so scenes use
|
||||
// var(--*) without re-declaring this block locally. A scene may still override
|
||||
// a token on its own #root (cascade) when it needs to (e.g. a dark scene).
|
||||
headStyle.push("", " /* Brand design tokens (from design-system/chunks/tokens.css) */");
|
||||
for (const line of brandTokensCss.split("\n")) headStyle.push(` ${line}`);
|
||||
}
|
||||
if (fontFaceCss) {
|
||||
headStyle.push("", " /* Brand fonts (extracted by prep.mjs from design.html) */");
|
||||
for (const line of fontFaceCss.split("\n")) headStyle.push(` ${line}`);
|
||||
}
|
||||
].join("\n");
|
||||
|
||||
// ---------- assemble document ----------
|
||||
const html = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@@ -340,7 +322,7 @@ const html = `<!doctype html>
|
||||
<meta name="viewport" content="width=${WIDTH}, height=${HEIGHT}" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
${headStyle.join("\n")}
|
||||
${headStyle}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -348,7 +330,7 @@ ${headStyle.join("\n")}
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="${totalDuration}"
|
||||
data-duration="${TOTAL}"
|
||||
data-width="${WIDTH}"
|
||||
data-height="${HEIGHT}"
|
||||
>
|
||||
@@ -365,30 +347,16 @@ ${body.join("\n")}
|
||||
|
||||
writeFileSync(outPath, html);
|
||||
|
||||
// ---------- caption-overrides.json shim ----------
|
||||
// The captions runtime fetches this file at validate time; absence yields a
|
||||
// noisy validate ✗ that previously sent finalize on a ~30s debug chase. An
|
||||
// empty array is a no-op override list — semantically identical to absent —
|
||||
// but the file existing silences validate.
|
||||
const captionOverridesPath = join(hyperframesDir, "caption-overrides.json");
|
||||
let captionOverridesCreated = false;
|
||||
if (!existsSync(captionOverridesPath)) {
|
||||
writeFileSync(captionOverridesPath, "[]\n");
|
||||
captionOverridesCreated = true;
|
||||
}
|
||||
|
||||
// ---------- summary ----------
|
||||
console.log(`✓ wrote ${outPath}`);
|
||||
console.log(` scenes (track 0): ${playOrder.length}`);
|
||||
console.log(` voice (track 10): ${voiceCount}`);
|
||||
console.log(` bgm (track 11): ${bgmEmitted ? `yes (vol ${BGM_VOLUME})` : "no"}`);
|
||||
console.log(` captions (track 12): ${captionsEmitted ? "yes" : "no"}`);
|
||||
console.log(
|
||||
` sfx (track 20+): ${sfxEmitted}${sfx.length !== sfxEmitted ? ` (${sfx.length - sfxEmitted} skipped)` : ""}`,
|
||||
);
|
||||
console.log(` total duration: ${totalDuration}s`);
|
||||
console.log(` @font-face: ${fontFaceCss ? `${fontFaceCss.length}B injected` : "none"}`);
|
||||
if (captionOverridesCreated) console.log(` caption-overrides.json: created empty [] shim`);
|
||||
console.log(` canvas: ${WIDTH}×${HEIGHT}`);
|
||||
console.log(` frames (track 1): ${mounted.length}`);
|
||||
console.log(` voice (track 10): ${voiceCount}`);
|
||||
console.log(` bgm (track 11): ${bgmEmitted ? "yes" : "no"}`);
|
||||
console.log(` captions (track 2): ${captionsEmitted ? "yes" : "no"}`);
|
||||
console.log(` sfx (track 20+): ${sfxEmitted}`);
|
||||
console.log(` assets staged: ${staged}/${wanted.size}`);
|
||||
console.log(` total duration: ${TOTAL}s`);
|
||||
if (anomalies.length) {
|
||||
console.log(`\nanomalies (non-fatal):`);
|
||||
for (const a of anomalies) console.log(` - ${a}`);
|
||||
|
||||
Reference in New Issue
Block a user