HyperFrames 构图 Schema 合规审查实践用确定性规则为 Agent 生成的 HTML 视频把脉【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames本仓库项目口号Write HTML. Render video. Built for agents.的核心工作是Agent 用 HTML 描述一帧帧画面框架把它们seek成确定性的视频帧再编码输出。要让 AI 编辑流程可信产出的 HTML 必须满足一套严格的 Schema 与确定性约束。本文以 style-12-prod 回归夹具的 Schema 合规审查报告 为骨架逐一拆解 HyperFrames 构图必须遵守的结构与确定性要求并结合该夹具的真实 HTML、时间轴脚本与 确定性渲染规则给出可复用的合规审查清单与实践方法。这份审查报告从哪里来code_review.md 是 HyperFrames 产线里style-12-prod这一风格回归夹具style regression fixture的合规审查产物。它不是一个空泛的文档而是对 4 个真实 HTML 源文件做的逐条核对结论审查对象共 4 个文件全部为本次Editor Agent - De Stijl Edition风格派蒙德里安装帧竖版竖屏视频的 HTML 描述审查结果Critical issues 0整体合规状态PASS。夹具的元信息记录在 meta.json它被标记为style-regression、prod-style、portrait并以minPsnr: 30、maxFrameFailures: 0、minAudioCorrelation: 0.9、maxAudioLagWindows: 120与renderConfig.fps: 30作为渲染回归的质量门槛。也就是说Schema 合规审查只是这道产线的一个环节——合规通过后夹具还要被真实渲染成output/output.mp4与output/compiled.html并用 PSNR、音轨相关性等指标做像素级回归校验。整份报告的目录结构如下packages/producer/tests/style-12-prod/ ├── meta.json # 回归夹具元信息与质量门槛 ├── src/ │ ├── index.html # 顶层主构图1080×1920 竖屏 │ ├── code_review.md # 本文主体的 Schema 合规审查 │ ├── design_review.md # 并行的美术设计评审 │ └── compositions/ │ ├── mondrian-bg.html # 背景网格与滑条动效 │ ├── mondrian-colors.html # 蒙德里安装帧色块与统计数字 │ └── mondrian-captions.html # 字幕分组时间轴 └── output/ ├── compiled.html # 编译产物 └── output.mp4 # 渲染输出30fps合规清单15 条确定性守则逐条拆解报告的核心是一份 15 项的合规检查清单。它不是临时的 code style 约定而是 HyperFrames 的确定性渲染与数据属性契约在实践中的落地检查。下面按结构化属性 / 时间轴 / 脚本确定性 / 组合复用四个维度逐条说明为什么需要这条规则。结构化属性一个可被编译的构图长什么样[x] 所有构图都声明了data-width与data-heightCompositions 明确约定外层元素需要data-composition-id视频输出尺寸必须可确定。在确定性渲染规则中fps、width、height必须在第 0 帧前锁定见 Deterministic Rendering否则第 90 帧长什么样这个问题没有唯一答案。[x] Primitive clips 具有必需的数据属性id、data-start、data-track>const tl gsap.timeline({ paused: true }); tl.to(.bar-1, { left: 100%, duration: 0.45, ease: expo.out }, 1.1); tl.to(.bar-2, { top: 100%, duration: 0.55, ease: expo.out }, 4.05); tl.to(.bar-3, { left: 100%, duration: 0.48, ease: expo.out }, 7.35); tl.to(.bar-4, { top: 100%, duration: 0.55, ease: expo.out }, 10.25); window.__timelines[mondrian-bg] tl;四条动画以 1.1 / 4.05 / 7.35 / 10.25 秒错峰触发、时长与缓动各不相同全部确定性 seek——design_review 认为它略显机械但这与合规无关合规关心的是时间轴 paused、长度有限、元素不重叠、无随机源。mondrian-colors.html从静态 TRANSCRIPT 里推关键帧compositions/mondrian-colors.html 内嵌一个三列246/588/246px× 三行248/650/1022px的蒙德里安 CSS Grid.block-empty第 2 行第 2 列留作视频安全区。色块初始opacity: 0; transform: scale(0.92)文本初始透明缩小等配音念到对应单词时点亮。它的核心技巧是把台本数据变成时间轴数据脚本内置固定TRANSCRIPT数组每个单词带start/end时间戳用getWordTime(text)按单词名反查forty-seven、sixty-two、three的触发时刻再在各时刻让对应色块淡入、数字弹出并在下一个关键数字出现后把上一组淡出为残影opacity: 0.18/0.22const time47 getWordTime(forty-seven); if (time47 ! null) { tl.to(.block-1 .color-fill, { opacity: 0.96, scale: 1, duration: 0.24, ease: power2.out }, time47); tl.to(.block-1 .block-text, { opacity: 1, scale: 1, duration: 0.24, ease: power2.out }, time47 0.06); tl.to(.block-2 .color-fill, { opacity: 0.92, scale: 1, duration: 0.24, ease: power2.out }, time47 0.08); }getWordTime的查找目标是常量数组Array.prototype.find在相同输入下结果恒定因此整条时间轴可复现数据与逻辑在脚本文件内静态存在这正是确定性逻辑构建时间轴的合规注脚。47%、62% 与 3/4 三组数字对应三段主视觉随配音逐级递进。mondrian-captions.html构图内动态建 DOM 的边界在哪里compositions/mondrian-captions.html 需要重点说明因为它是唯一带 Note 的文件脚本在运行时创建 DOM——遍历静态TRANSCRIPT数组把单词按每 4 个词或遇到标点即断句的规则切分为groupsdocument.createElement生成.caption-group再按每组首尾词的start/end挂上显隐动画TRANSCRIPT.forEach((word, index) { currentGroup.push(word); wordCount; const isLastWord index TRANSCRIPT.length - 1; const hasPunctuation /[.!?]/.test(word.text); if (wordCount 4 || hasPunctuation || isLastWord) { groups.push([...currentGroup]); currentGroup []; wordCount 0; } });审查报告的结论是只要分词的输入是静态常量、分组逻辑在任何环境结果一致且构图本身完成window.__timelines注册那么在构图内动态创建 DOM 是允许的。这划出了一条清晰的边界——运行时建 DOM不是违规项违规的是运行时从外部读取可变输入fetch、系统时间、未播种随机数来决定画面。如何把这份清单复用到你自己的构图审查报告末尾给出两条建议恰好是可操作的收尾动作字幕确定性Deterministic Captions让TRANSCRIPT数组保持静态分词/分组逻辑跨环境一致。一旦台本来自可变外部源例如渲染中途的网络请求同一帧就会因网络时序不同而内容漂移。轨道重叠检查Track Overlap Check本夹具的轨道分配是 Track 1 背景网格、Track 2 视频、Track 3 色块、Track 4 字幕层间由z-index决定前后关系轨道不是图层见 contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考