HTML Video Studio
让本地编程代理将 HTML、CSS 与内容渲染为 MP4 视频。
按维度查看评分与理由
证据显示：仓库声明了Apache-2.0许可证，并明确说明所有操作在本地执行，仅有的网络调用是可选的源获取和音轨生成。但未提供权限最小化的具体实现细节，如沙箱或网络限制。用户确认方面，README提到用户通过聊天界面与代理交互，但未明确说明关键操作（如渲染、导出）是否需要用户确认。数据流透明度较好，README详细描述了从输入到输出的管道，包括源获取、代理循环、内容图、渲染和编码。敏感数据处理方面，提到可选的MiniMax API密钥，但未说明如何存储或保护。依赖安全方面，package.json列出了依赖，但未提供漏洞扫描或锁定文件信息。外部影响方面，明确说明本地渲染，但未提及对系统资源的限制。回滚方面，未提及任何回滚机制。来源归属方面，README引用了姊妹项目和Hyperframes，并提供了模板的许可证来源。扣分原因：缺乏权限最小化、用户确认、敏感数据保护、依赖安全、外部影响和回滚的具体证据。
证据显示：README和测试文件之间的一致性较好，测试覆盖了文件名解码和格式解析等具体问题。依赖可用性方面，列出了Node.js、pnpm、ffmpeg和Chromium作为先决条件，并提供了安装说明。失败消息方面，测试文件暗示了错误处理，但未提供详细的失败消息示例。扣分原因：失败消息的证据不足，且未提供错误处理的具体文档。
证据显示：README明确了目标受众（编码代理用户）和多种使用场景（从提示、文章或仓库生成视频）。能力边界方面，明确说明了当前支持的引擎（Hyperframes）和计划中的引擎（Remotion等），并指出哪些功能已实现。触发精度方面，提供了CLI命令和模板搜索示例，但未详细说明代理如何精确触发。环境适配方面，提供了跨平台安装说明和依赖检查。扣分原因：触发精度的证据不足，且未提供详细的代理交互协议。
证据显示：信息架构清晰，README提供了目录、架构图和快速入门。安装说明详细，包括先决条件和命令。命名稳定性方面，包名和命令名称在文档中一致，但未提供版本历史。示例和FAQ方面，提供了多个示例和模板展示，但未提供FAQ。已知限制方面，明确说明了未实现的引擎和功能。许可证方面，提供了完整的Apache-2.0许可证文本。版本控制和变更日志方面，未提供CHANGELOG或版本历史。维护责任方面，README提到了团队和社区链接，但未明确维护政策。扣分原因：缺少版本历史和变更日志，且未提供FAQ。
证据显示：输出可用性方面，README声称生成真实的MP4文件，并提供了模板预览。边际价值方面，强调了多引擎适配和模板库，但未与其他工具进行详细比较。成本效益方面，声明无每渲染费用，但未提供性能基准。扣分原因：缺乏性能数据和与其他工具的详细比较。
证据显示：声明可追溯性方面，README提供了架构图和实现细节，但未提供具体的代码引用。跨来源验证方面，引用了姊妹项目和Hyperframes，但未提供外部验证。事实与推断分离方面，README明确区分了已实现的功能和计划中的功能。扣分原因：缺乏外部验证和具体的代码引用。
- 未提供权限最小化、用户确认、敏感数据保护、依赖安全、外部影响和回滚的具体实现细节。
- 未提供版本历史和变更日志，且未提供FAQ。
- 未提供性能基准和与其他工具的详细比较。
- 未提供外部验证和具体的代码引用。
这个 Agent 能做什么，适合哪些场景？
html-video 是一个本地运行的 HTML 到视频工作流，提供浏览器 Studio 和 html-video CLI。它将提示词、网页文章或 GitHub 仓库内容交给选定的编程代理，生成 content-graph 分镜和逐帧动画 HTML。默认的 adapter-hyperframes 通过无头 Chromium 录制动画，再由 ffmpeg 以 libx264 编码并拼接为 MP4。项目目前提供 21 个带元数据清单的模板，并可选用 MiniMax 生成背景音乐和旁白后混入导出视频。它适合希望保留 HTML/CSS 创作方式、在本机渲染视频的团队；目前可实际运行的渲染后端仅 Hyperframes，其他引擎仍在规划中。
Studio 可服务器端抓取网页文章并转为 Markdown，或通过公开 API 获取 GitHub 仓库的描述、顶层结构和 README；也可直接接收提示词。它调用 PATH 中检测到的代理，或使用 Anthropic Messages API，产出 content-graph：其中包含节点、顺序/依赖/对比边，并拓扑排序为帧顺序和时长；单帧项目则跳过该图。每个节点写成独立的动画 HTML 文件，adapter-hyperframes 以 Chromium 逐帧录制为 WebM，ffmpeg 转码为 libx264 MP4 并合并。Soundtrack 面板可通过 MiniMax 生成音乐或 TTS 旁白，随后由 ffmpeg 进行混音、压低音乐音量和可选淡入淡出。CLI 还提供 doctor 检查代理与引擎，以及 search-templates 按意图查询模板。
- 内容团队需要把一篇可公开访问的文章制作成多场景解读视频，并希望素材由本地 Studio 抓取后交给代理整理。
- 开源项目维护者想输入 GitHub 仓库地址，让代理根据仓库描述、结构和 README 制作项目介绍 MP4。
- 前端设计师已有 HTML、CSS 和动画模板，需要在自己的电脑上通过 Chromium 与 ffmpeg 输出可交付的 MP4。
- 开发者要用 CLI 查找适合“github stars race”等意图的视频模板，再将其用于自动化内容生产流程。
- 品牌或产品团队需要在模板化视频中加入 MiniMax 背景音乐和旁白，并在导出时混入成片。
这个 Agent 有哪些优点和局限？
- 默认 Hyperframes 后端已接通真实渲染：无头 Chromium 录制 HTML 动画，ffmpeg 输出 libx264 MP4。
- 用统一的
render(input, ctx)适配器接口隔离渲染引擎，分镜与代理工作流不绑定单一视频 DSL。 - 21 个模板均有
template.html-video.yaml元数据，明确输入 schema、输出参数与许可证来源，便于代理选择和驱动。 - 支持文章、GitHub 仓库和提示词三种素材入口，并能生成多帧 content-graph 分镜。
- 可在本机渲染，无每次渲染费用；MiniMax 音乐和旁白是可选能力。
- 当前唯一已实现且可运行的引擎是 Hyperframes；Remotion、Motion Canvas、Revideo 和 Manim 适配器尚未完成。
- 运行环境依赖 Node.js、pnpm、ffmpeg 和 Chromium/Playwright，部署并非单一二进制文件。
- 代理生成依赖本地安装且位于 PATH 的受支持 CLI，或依赖 Anthropic Messages API 的 BYOK 配置。
- 文章和仓库素材抓取需要网络；音频生成还需要单独的 MiniMax API key。
- README 未给出模板市场、第三方引擎适配器或非 Hyperframes 渲染的可用实现。
如何安装或部署这个 Agent？
安装 Node.js 20+、pnpm 9+、近期版 ffmpeg，以及 Chromium 或 Playwright Chromium。随后运行：
npx playwright install chromium
pnpm install
pnpm -r build
node packages/cli/dist/bin.js studioStudio 启动在 http://127.0.0.1:3071。要使用代理，安装一个受支持的本地 CLI 并确保其在 PATH 中；若没有本地 CLI，可配置 Anthropic API 密钥。音轨功能另需在 Settings → Audio 配置 MiniMax API key。
如何使用这个 Agent？
启动 Studio 后，选择模板，或输入视频描述、文章链接或 GitHub 仓库链接；选择检测到的代理，让其生成分镜和逐帧 HTML，随后编辑每帧文本并导出 MP4。可先运行 node packages/cli/dist/bin.js doctor 检查可用代理与引擎；用 node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3 查找三个匹配模板。单帧视频会直接渲染，多帧视频则经 content-graph 排序后逐帧渲染并合并。
这个 Agent 与同类方案有什么区别？
与 Hyperframes 相比，html-video 将其作为已交付的默认 HTML+CSS+GSAP 渲染后端，并在上层加入代理、模板、内容图和 Studio 工作流。与 Remotion 的 React 组件范式、Motion Canvas/Revideo 的 TypeScript canvas 生成器范式，以及 Manim 的数学/3D 优先范式相比，项目目标是以同一个 render(input, ctx) 接口接入它们；不过这些适配器目前仍处于计划或研究阶段。