给浏览器 AI 视频编辑器装上“能力插槽”：Timeline Studio 开源插件系统实践

生成式 AI 的模型和服务迭代得非常快，但视频编辑器的核心工作流需要保持稳定。

如果把每一家图片、视频生成服务都直接写进编辑器业务代码，项目很快就会出现大量供应商判断、重复状态管理和难以维护的接口适配。一旦服务更换鉴权方式、调整返回结构，甚至停止运营，整个编辑器都可能受到影响。

最近，我们为开源浏览器 AI 视频编辑器 Timeline Studio 增加了一套生成插件架构，希望解决一个实际问题：

如何让不同的 AI 生成服务接入同一套编辑工作流，同时保证素材可用、状态真实、权限清晰，并且不破坏编辑器核心？

目前项目已经接入：

• Puter.js
• ComfyUI
• Stable Diffusion WebUI / Forge

项目仓库：

https://github.com/MartinDelophy/ai-video-editor

在线体验：

https://video-editor.ai-creator.top/

Timeline Studio 是什么？

Timeline Studio 是一个本地优先、直接运行在浏览器中的开源 AI 视频编辑器。

它提供类似专业桌面剪辑软件的多轨时间线，同时集成自动字幕、多语言配音、AI 音乐、画面修复、智能裁切、人像抠图、数字人和离线视频导出等能力。

项目的一个重要原则是：用户打开根页面后就能直接上传素材和编辑，不需要先经过营销页或欢迎页。

在支持 WebGPU、WebCodecs 和 ONNX Runtime Web 的浏览器中，多项 AI 能力可以直接在本地执行。素材不必为了完成基础编辑而上传到远程编辑后端。

但图片和视频生成服务非常多，而且不同用户的运行环境也完全不同：

• 有人使用云端模型；
• 有人在本机部署 ComfyUI；
• 有人习惯 AUTOMATIC1111 或 Forge；
• 有人希望通过服务商自己的账号和额度完成生成；
• 还有人需要接入企业内部的生成服务。

因此，与其继续增加写死在编辑器里的供应商分支，我们选择建立一层生成插件契约。

插件不是一个 iframe

最简单的“插件接入”方式，是在编辑器里嵌入一个第三方网页。

这种方案看起来很快，但没有真正完成视频编辑工作流。

用户往往需要先在嵌入页面中生成内容，再复制结果地址，返回编辑器手动导入。如果地址有时效性、跨域受限，或者第三方页面结构发生变化，整个流程就会中断。

Timeline Studio 对生成插件提出了一个更明确的要求：

插件完成任务时，编辑器必须已经拿到可用的图片或视频数据，而不只是一个可能过期的 URL。

生成结果会经过类型和媒体有效性检查，然后自动保存到 My assets（我的素材）。用户可以预览素材，再自主决定是否将它加入时间线。

插件不会擅自修改当前作品，也不会在生成结束后自动把内容插入轨道。

这是我们移除通用 Hugging Face Spaces 嵌入方案的重要原因：一个需要用户手动复制结果链接的网页容器，并不是完整的编辑器集成。

三类插件运行方式

当前插件契约将生成服务分为三类。

1. 浏览器会话型

这种方式适合拥有浏览器 SDK、弹窗登录和独立用户账户体系的服务。

Puter.js 是目前的代表。连接时打开真实的 Puter 登录窗口，生成消耗由用户自己的 Puter 账户管理。Timeline Studio 不伪造授权状态，也不要求用户把开发者密钥写进前端。

这类插件的关键点是：

• 登录必须由真实用户操作触发；
• 授权状态必须来自服务商；
• 编辑器不保存服务商密码；
• 生成结果仍需下载并进入 My assets。

2. 本机回环型

ComfyUI 和 Stable Diffusion WebUI / Forge 属于这一类。

插件只允许连接本机回环地址，例如：

• localhost
• 127.0.0.1
• ::1

连接成功之前，插件需要检查真实服务端点和 CORS 配置。它不会为了“看起来可用”而提前展示已连接状态，也不会建议用户把一个没有认证的生成服务暴露到局域网。

虽然它们都在本机运行，但两者的使用方式并不相同。

ComfyUI 是工作流优先的。

用户提供 API Format 工作流或模板，插件提交真实任务、跟踪执行状态，并下载工作流声明的图片或视频输出。因此，它不仅适合文生图，也可以承载更复杂的节点工作流。

Stable Diffusion WebUI / Forge 是提示词优先的。

插件连接兼容 AUTOMATIC1111 或 Forge 的接口，调用真实的 txt2img、img2img API，并将返回的媒体数据解码为编辑器素材。

我们将它们设计为两个独立插件，而不是合并为一个模糊的“本地 Stable Diffusion”入口。这样可以避免把工作流式工具和提示词式工具强行塞进同一套交互。

3. 安全后端型

如果未来接入的供应商需要开发者持有 API Secret，密钥必须放在安全后端，而不是浏览器代码中。

插件清单、本地存储、前端日志和示例配置都不应该出现开发者密钥。前端只与受控的连接层通信，由后端负责凭据和特权操作。

这部分也是我们评估新供应商时的重要门槛。

用 Manifest 和 Adapter 隔离供应商差异

Timeline Studio 的生成插件采用“声明信息与传输实现分离”的结构。

一个插件通常包含：

provider/
├── manifest.js
├── adapter.js
├── Inspector.jsx
├── copy.js
└── index.js

其中：

• manifest.js 声明插件 ID、版本、运行类型和能力；
• adapter.js 负责连接、请求、取消和结果解析；
• Inspector.jsx 提供供应商特有的参数界面；
• copy.js 保存多语言文案；
• 共享 Registry 负责发现插件；
• 共享 Host 负责素材验证和写入 My assets。

例如，一个插件可以声明自己支持：

• 文生图
• 图生图
• 文生视频
• 图生视频
• 工作流图片
• 工作流视频

共享层只理解这些稳定能力，不需要知道供应商接口的全部细节。

适配器也不会直接获得时间线修改函数或完整的编辑器状态。它只负责把供应商结果转换成统一格式，最终的素材提交由 Host 完成。

这条边界可以减少插件对编辑器核心的侵入，也让后续审查和维护更容易。

“真实状态”比进度动画更重要

很多 AI 生成界面会展示一个不断变化的百分比，即使后端根本没有返回真实进度。

Timeline Studio 不允许插件虚构连接、任务或进度状态。

连接状态需要明确区分：

• 未连接
• 连接中或授权中
• 已连接
• 错误

任务状态则包括：

• 空闲
• 排队
• 运行中
• 已完成
• 已取消
• 错误

只有当供应商提供有意义的数值进度时，插件才显示百分比。否则应使用不确定进度状态，而不是生成一个“看起来很忙”的数字。

同样，连接按钮也不能只因为用户填写了地址就变成“已连接”。端点、接口类型和 CORS 检查必须真正通过。

这看起来是一个交互细节，实际上决定了用户能否信任整个插件系统。

从生成结果到可编辑素材

一次完整的生成流程大致如下：

用户选择插件
    ↓
完成真实连接或授权
    ↓
填写提示词、工作流或参考素材
    ↓
插件提交生成任务
    ↓
跟踪真实任务状态
    ↓
获取并下载全部媒体结果
    ↓
Host 验证图片或视频
    ↓
自动保存到 My assets
    ↓
用户决定是否加入时间线

这条链路解决了两个常见问题。

第一，远程结果地址可能会过期，因此编辑器需要及时下载媒体数据。

第二，生成成功不代表素材一定可用。返回内容可能是错误页面、不支持的文件类型，或者无法解析的视频。只有完成媒体验证并保存为编辑器可管理的素材，任务才应该被标记为成功。

为什么暂时采用“源码集成插件”

这里需要说明当前项目的能力边界。

Timeline Studio 目前提供的是经过代码审查的源码集成连接器，还不是一个可以下载并执行任意第三方代码的开放插件市场。

要安全运行外部插件，还需要继续解决：

• 权限声明
• 沙箱隔离
• API 兼容性
• 插件签名
• 版本升级
• 恶意代码防护
• 用户数据访问范围
• 插件安装与卸载

在这些机制真正完成之前，我们不会把源码适配器包装成一个并不存在的“任意安装式插件系统”。

诚实描述能力边界，比为了宣传提前承诺一个不安全的运行时更重要。

如何为 Timeline Studio 接入新的生成服务？

仓库已经提供了完整的生成插件开发契约：

生成插件开发文档

在开始编码前，需要先确认目标服务是否满足这些条件：

1. 是否提供稳定、公开的任务或结果 API？
2. 编辑器能否自动下载所有生成结果？
3. 使用哪种鉴权方式？
4. 能否取消任务，取消具体意味着什么？
5. 是否提供真实进度？
6. 返回地址是否有时效性？
7. 是否存在浏览器、地区、账户或成本限制？
8. 浏览器接入是否依赖 CORS、弹窗或安全后端？

如果一个平台只能嵌入网页，并要求用户手动复制结果 URL，它通常不适合作为 Timeline Studio 的正式生成插件。

如果服务需要开发者密钥，也不应该把密钥直接放进前端代码。

一个插件系统，更重要的是边界而不是数量

我们并不希望快速堆出几十张“即将支持”的插件卡片。

一个真正可用的插件至少应该做到：

• 能连接真实服务；
• 能执行真实任务；
• 能诚实显示状态；
• 能自动取得结果；
• 能把结果变成可编辑素材；
• 不泄露密钥；
• 不擅自修改用户时间线；
• 出错时提供可理解、可操作的信息。

只有形成完整闭环，插件才真正为视频创作节省了时间。

欢迎参与

Timeline Studio 采用 MIT License 开源。如果你对浏览器媒体处理、WebGPU、WebCodecs、AI 模型部署、视频时间线或生成服务接入感兴趣，欢迎参与项目。

GitHub 仓库：

https://github.com/MartinDelophy/ai-video-editor

在线编辑器：

https://video-editor.ai-creator.top/

插件开发文档：

https://github.com/MartinDelophy/ai-video-editor/blob/main/docs/generation-plugin-development.md

你可以从以下方式开始：

• 给仓库点一个 Star；
• 体验在线编辑器并提交可复现的 Issue；
• 完善已有的 ComfyUI、WebUI 或 Puter.js 连接器；
• 提议并实现新的生成供应商适配器；
• 帮助改进多语言界面和使用文档；
• 在 Discussions 中分享自己的本地 AI 视频工作流。

生成模型仍会继续快速变化，但编辑器不应该因此变得不可维护。

我们希望通过一个边界清晰、状态真实、结果可控的插件架构，让 Timeline Studio 可以持续连接新的 AI 能力，同时依然保持它最重要的特性：打开浏览器，直接开始创作。