如何用 HyperFrames compare 把多个视频变体渲染成一张带标签的 PNG 对比图【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes当你为同一场景写了多个版本——不同的版式、配色、文案或几套不同设计的 composition——逐个render成视频再来回切换着看很费劲。HyperFrames CLI 的hyperframes compare命令把两个以上的独立 composition 变体各自渲染并截一帧拼到同一张带标签的 PNG 网格里让你一次看全所有版本的差异。它的前提这些“变体”是本地 HyperFrames 项目每个输入路径要么是一个含index.html的项目目录要么是一个.html文件机器上装好了 Node 并能运行npx hyperframes。本文只讲compare本身同一参考页里的grade-compare是做颜色分级 / LUT 对比的另一个任务不在这里展开。先确认变体满足输入要求compare要求至少传入 2 个路径每个路径是一个合法的 composition 输入。路径不合法时命令会直接报错消息本身说明了期望的格式Variant A is not a composition input (variant-a): expected a directory containing index.html or a .html file也就是说每个位置参数只能是“含index.html的目录”或“一个.html文件”二选一。如果不传--labels变体的标签默认取路径的 basename.html文件会去掉扩展名所以两个目录./variant-a、./variant-b默认就显示为variant-a、variant-b。跑一次最小对比最短的主路径就是下面这条命令把两个变体目录传进去、给它们各起一个标签npx hyperframes compare ./variant-a ./variant-b --labels A,B运行成功后默认在当前目录生成./compare.png终端提示◇ Comparison sheet saved to compare.png上面是命令给出的成功提示compare.png这一路径会随--out变化。这张 PNG 是一个带标签的网格图每个变体贡献在--at时刻默认 0 秒截取的一帧标签对应--labels里同位置的字符串。注意它是对比图而非对比视频——每个变体只取一帧所以它适合在某个确定的时间点上比较各版本的样子而不是逐帧对比整段动画。compare的全部参数均来自 CLI 参考页Flag说明--at截取前 seek 到的时间线秒数单值--labels逗号分隔的标签数量必须与输入路径数一一对应--out输出路径默认./compare.png--cols网格列数默认一个 sqrt 启发式上限 4--timeout每个变体的 render-ready 超时默认 5000 ms--json机器可读结果让对比落在你想看的时间点默认从 0 秒截帧。如果你的差异发生在动画中段的某个时刻用--at把所有变体都 seek 到同一秒再截图这样对比才是对齐的npx hyperframes compare ./a ./b ./c --at 2.5 --labels classic,bold,quiet --out compare-2.5s.png这里三个变体在 2.5 秒处各取一帧标签为classic/bold/quiet输出写到compare-2.5s.png。当变体较多、想让网格更接近正方形时可以显式指定--cols例如 3 个变体用--cols 3排成一行不指定时列数由变体数量自动推算最多 4 列。验证结果两种确认方式。一是直接打开生成的图片文件--out指定的路径默认./compare.png核对每个格子的标签和画面是否符合预期。二是加--json让脚本或 CI 读取结果。成功时返回形如下面的负载示例结果字段来自命令实现外层还会按 CLI 通用的--json约定附加_meta版本信息{ ok: true, sheet: compare.png, variants: [ { label: A, path: variant-a }, { label: B, path: variant-b } ], rendered: 2 }sheet是写出的图片路径variants按顺序列出每个标签与其来源路径rendered是实际渲染的变体数。失败时返回{ok: false, error: ...}。由于不同版本命令的 flag 可能演进动手前用npx hyperframes compare --help核对一下你这份 CLI 接受的选项最稳妥。边界与常见问题变体超过 16 个实现会把变体数限制在 16超出时打印警告并只渲染前 16 个建议减少变体或拆成多次运行Warning: 18 compare variants exceed the 16-variant cap — rendering the first 16 of 18; re-run with fewer variants or split into multiple runs.此时--json输出会带truncated: true和total字段。--labels数量不匹配标签数必须等于路径数否则直接失败--labels count (3) must match path count (2)。某个变体迟迟不 ready单个变体超过--timeout默认 5000 ms还没进入可渲染状态时该格子会带一条“comparison variant X may be inaccurate”的提示变体较重时可以调大--timeout。路径不是合法输入见上文的not a composition input报错检查目录里是否有index.html、或确认你传的是.html文件而非别的后缀。compare和渲染走的是同一套本地 headless Chrome 截图管线。如果机器上还没有可用的 Chrome文档提供了npx hyperframes browser ensure查找或下载与npx hyperframes doctor检查渲染所需的一切来先把环境补齐再回来重跑对比。完整 flag 说明见 CLI 参考命令速查见 CLI 指南输入解析与结果负载的实现见 compare 命令。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考