Storyboard Comparison Workbench

Storyboard Comparison Workbench

Turn storyboard alternatives into a reviewable web experience before spending time rendering final video. Treat the audio timeline as the master clock and every visual version as another mapping onto the same scene slots.

Default product decisions

• Provide a single-version preview and a synchronized comparison view.
• Use one audio element and one currentTime value for every preview; never run independent players in comparison cards.
• Keep curated comparison presets read-only. Put uploads and subtitle edits in an explicitly labeled shared working version.
• When no login is requested, explain through the interface that anyone with the URL can view the site and anyone using the shared editor changes the same hosted state.
• Save named snapshots before restoring or replacing a shared working version.
• Export the selected version's images, original audio, SRT, and reproducible project manifest as one package.
• Prefer static frames and clean scene changes. The workbench is for visual decisions, not final encoding.

Workflow

1. Inspect the project and choose the implementation surface.
   • Reuse an existing site when one exists.
   • If the project contains .openai/hosting.json, use the available Sites building and hosting skills.
   • For a new public workbench, use the available site-building skill rather than hand-rolling deployment infrastructure.
2. Establish the shared timeline.
   • Obtain the true audio duration; do not infer it from the last subtitle.
   • Define stable scene IDs and contiguous start/end times.
   • Normalize each storyboard alternative to the same ordered scene IDs.
   • Read references/data-contract.md, then create the JSON project manifest.
3. Validate the inputs before building UI.
   • Run scripts/validate_project.py PROJECT.json.
   • Fix missing images, inconsistent scene coverage, duplicate IDs, aspect-ratio mismatches, and cues beyond the project duration.
4. Build preview and comparison modes.
   • Render the active scene for the current audio time.
   • In comparison mode, render the active scene from every selected version at that exact time.
   • Make the timeline, scene thumbnails, subtitles, and play state all call the same seek function.
   • Read references/player-and-storage.md for the required playback state model.
5. Add collaboration only to the requested scope.
   • For review-only work, ship static read-only presets.
   • For shared editing, store uploaded image bytes in object storage and project metadata/snapshots in a database.
   • Keep public presets immutable even when the shared working version is editable.
   • Treat “knowing the URL” as discoverability, not authentication or authorization.
6. Add production handoff.
   • Download the currently selected version, not an implicit default.
   • Include scene files with stable numbered names, original audio, SRT, and a manifest recording timing and version metadata.
7. Deploy and verify the hosted site.
   • Validate a production URL, not only local development.
   • Run scripts/check_audio_range.py https://SITE/api/audio when audio is served through an endpoint.
   • Complete every item in references/validation-checklist.md, including real seeking while playback is active.

Non-negotiable playback safeguards

• Serve audio with HTTP byte-range support. A visually movable range input does not prove that media is seekable.
• A valid range request must return 206, Accept-Ranges: bytes, Content-Range, and the partial Content-Length; invalid ranges return 416.
• Use the scrubber's continuous input event so dragging previews the requested time immediately.
• After seeking, confirm the media element's actual currentTime changed and stayed changed while the playback update loop continued.
• Do not let animation-frame state overwrite a requested seek with stale currentTime.

Deliverables

Return:

• the deployed comparison URL;
• the reusable source project;
• the project manifest and version asset folders;
• storage and access-mode notes;
• validation results, including the range-response check and at least two non-zero seeks;
• instructions for adding the next storyboard version.

Do not claim the workbench is ready merely because the first frame plays. Version switching, synchronized comparison, subtitle timing, uploads when enabled, snapshots, asset export, and seeking all require explicit verification.