ronak-create/FableCut

# FableCut **一款可由 AI agent 驱动的浏览器视频编辑器。** https://github.com/user-attachments/assets/2430b854-168b-4a9a-af2e-489e5efa7543 FableCut 是一款 Premiere 风格的非线性视频编辑器，完全在您的浏览器中运行——并将整个时间轴暴露为一个 JSON 文档。您可以手动编辑、通过 UI 编辑，或者让 AI agent（Claude Code、Claude Desktop 或任何支持 MCP/REST 的工具）为您剪辑视频，同时实时观看时间轴的更新。 零 npm 依赖。只需一个 `node server.js`。就这么简单。  ## 为什么它很有趣 大多数“AI 视频”工具将编辑过程隐藏在 API 之后。FableCut 反其道而行之：**项目文件即接口**。`project.json` 描述了媒体、片段、轨道、特效、关键帧和转场——任何能写入 JSON 的进程都可以剪辑视频，而打开的浏览器 UI 会通过 Server-Sent Events 在约 150 毫秒内热重载。人类和 agent 可以同时在同一个时间轴上工作。 ## 功能 **剪辑** - 4 条视频轨道 + 3 条音频轨道，支持拖拽/修剪/拆分/吸附，以及撤销/重做 - **在监视器上直接操作** —— 在预览中点击片段或标题，可直接移动、调整大小（通过边角控制点）或旋转（顶部控制点，按 Shift 吸附）它 - **时间轴多选** —— 橡皮筋框选（在空白轨道区域拖拽），Ctrl/Cmd/Shift+点击 添加/移除片段，Ctrl+A 全选，Esc 取消选择。拖动任何选中的片段可移动整个群组；Delete 移除所有选中项；S 在播放头处拆分所有选中项。检查器会显示“已选中 N 个片段”的横幅。 - 节拍与提示标记（播放时在节拍点敲击 M），支持边缘吸附 - 片段上显示真实解码的音频波形 - 画布纵横比预设（16:9、9:16 短视频、4:5、1:1）+ 安全区参考线 - 可调整大小的工作区：拖动监视器和时间轴之间的分隔线（双击可重置），外加 S/M/L 时间轴轨道密度预设（S 模式会隐藏缩略图以使轨道更紧凑） - 缩放至选中范围 (Z) 可框选所有选中的片段，而不仅仅是一个 **外观** - 12 种一键滤镜预设（电影感、青橙色调、黑白、复古、赛博朋克等） - **调整图层** —— 类似 Premiere 风格，一个片段可为其下方的所有内容进行调色 - 完整的调色控制：亮度/对比度/饱和度/色调，**色温与色调**，模糊，灰度/棕褐色/反色，**暗角**，动态**胶片颗粒** - 混合模式（滤色、正片叠底、叠加等），适应模式（包含/覆盖/拉伸），按边缘裁剪，圆角，水平/垂直翻转 - **色度键**（绿幕）支持容差/柔和度及溢色抑制 - **AI 背景移除**（人物抠图，通过 MediaPipe 在浏览器内进行） **动态** - 支持约 25 种属性的关键帧动画与缓动 - **速度斜坡** —— 通过设定 `speed` 关键帧，引擎会对视频和导出的音频混合进行时间重映射（即从快进过渡到慢动作的短视频效果） - **镜头抖动**和**RGB 分离/色差**，两者均可制作动画 - 17 种转场：淡入淡出、滑动、擦除（4 个方向）、缩放、光圈、旋转、模糊、甩镜头、**故障**、**流行** **文本** - **标题样式** —— 一键应用统一的视觉风格（Impact、优雅、动感切割、霓虹、手写等）；新标题会自动改变字体、位置和动画，而不是默认使用单一扁平风格 - 动感字幕：打字机、文字弹出、文字滑动、卡拉OK、**字母弹出**、**波浪**、**弹跳**、**抖动**、**片段显现**、**放大**、**字体切割**（有节奏的字体切割）、**遮罩升起** - **霓虹光效**，打造 TikTok 式字幕外观 - 字体编辑器：系统字体、直接拖入自定义字体（`library/fonts/`），以及**按名称使用任何 Google Font** —— 自动加载 - 渐变填充、描边、背景药丸形状、字间距、行高、字重、斜体、大写、对齐、柔和阴影 **动画 SVG 片段** - 一等公民 `svg` 片段类型：CSS `@keyframes` 动画 SVG 在预览和导出时能**逐帧精确**渲染（合成器会在任何时刻冻结动画）。Agent 可以将它们自己的矢量叠加层——如下三分之一字幕、五彩纸屑、闪光——编写为普通的 `.svg` 文件。内含入门示例。 **重构参考视频** - 给它一个参考剪辑（一个你喜欢的短视频），然后取回一份**剪辑蓝图**：镜头边界、音乐节拍 + BPM、响度曲线、每个镜头的能量、Drop 高潮点——此外，参考视频的**音乐轨道会被提取**到你的媒体库中，让你可以用自己的素材重现相同的创意。零额外依赖（由 ffmpeg 负责解码；起拍/节奏检测是纯 Node 实现）。 `node analyze.js ref.mp4`、`POST /api/analyze` 或 `fablecut_analyze_reference` MCP 工具。 **素材库** - `library/` 文件夹在 UI 中显示为标签页：**元素**（叠加艺术）、**音效 (Sound FX)**、**SVG** —— 拖入文件，打开的编辑器会实时刷新 **导出** - 快速导出：浏览器渲染每一帧 + 离线音频混音，ffmpeg 编码出逐帧精确的 CRF-18 MP4（即使切换标签页也会继续渲染） - 当 ffmpeg 不可用时，提供实时的 MediaRecorder 备用方案 ## 快速开始 ``` git clone https://github.com/ronak-create/FableCut.git cd FableCut node server.js # → http://localhost:7777 ``` 环境要求：**Node 18+** 和基于 Chromium 的浏览器。建议（但非必须）在 PATH 中配置 **ffmpeg**（用于快速导出和上传重混合）。AI 背景移除功能在首次使用时会从 CDN 获取其模型。 服务器默认**仅绑定 127.0.0.1**（v1.3.1+）。如果需要在局域网内的其他设备上使用，请显式允许：`HOST=0.0.0.0 FABLECUT_ALLOWED_HOSTS= node server.js`。 将媒体拖入窗口（或放入 `./media/`），把片段拖到时间轴上，开始剪辑，然后导出。 ## 使用 AI agent 进行驱动 agent 所需的一切都在 **[CLAUDE.md](CLAUDE.md)** 中 —— 包含完整的 schema、语义和操作指南。将任何能力强大的模型指向该文件，它就能端到端地操作编辑器。 三种等效的控制面： 1. **MCP**（最适合 Claude Code / Claude Desktop）—— 只需注册一次内置的零依赖 MCP 服务器： claude mcp add -s user fablecut -- node "/fablecut/mcp-server.js" 工具：`fablecut_status`（自动启动编辑器）、`fablecut_docs`、`fablecut_get_project`、`fablecut_set_project`、`fablecut_patch_project`、`fablecut_import_media`、`fablecut_analyze_reference`。 该控制面在设计上**非常节省 token**：agent 使用微小的操作来修补时间轴（`fablecut_patch_project`），而不是在整个文档间来回传输；读取每行一个片段的精简摘要（`fablecut_get_project {compact:true}`）；并且仅获取它们所需的文档部分（`fablecut_docs {section:"props"}`）。 2. **文件** —— 读取 `project.json`，修改，更新 `revision`，写入。UI 会实时热重载。 3. **REST** —— `GET/PUT /api/project`、`POST /api/upload`、`GET /api/library`，以及位于 `/api/events` 的 SSE。完整列表请参见 CLAUDE.md。 示例：让 Claude Code *“将这六个片段剪辑到节拍标记处，添加青橙调色，在顶部加上文字弹出的字幕，并在每次切换时加上一个呼啸声”* —— 然后看着时间轴自动重建。 或者交给它一个参考视频：*“这是一个我喜欢的短视频 —— 分析它并用我的片段重制，使用相同的背景音乐。”* agent 会调用 `fablecut_analyze_reference`，获取蓝图（剪辑点、节拍、BPM、能量、Drop 高潮点、提取出的音乐），并使用你的素材逐镜头重建结构。 **冲突安全的并发编辑**：UI、MCP 工具和直接的 `project.json` 写入操作都遵循同一个 `revision` 计数器。如果你在 UI 中编辑片段时 agent 正在执行任务，agent 的下一次写入将被拒绝（REST API 返回 409 / `fablecut_set_project` 返回冲突错误），而不是悄悄覆盖你的更改。同样，当 agent 的写入取代了尚未保存的本地微调时，UI 也会检测到这一点，并通过 Toast 提示告知你，而不是无声地丢弃它。 ## 项目布局 ``` server.js zero-dependency HTTP server: static hosting, REST API, SSE, ffmpeg export pipeline app.js the editor: timeline UI, compositor, keyframes, text engine, SVG rasterizer, chroma key, exporters index.html single-page UI style.css dark editor theme mcp-server.js stdio MCP server exposing the editor to AI agents analyze.js reference-video analyzer: shots, beats/BPM, energy, drop, music extraction (module + CLI) CLAUDE.md the agent manual (schema + recipes) — also served by fablecut_docs project.json your timeline (created on first run; gitignored) media/ project footage (gitignored) analysis/ cached edit blueprints from /api/analyze (gitignored) library/ default assets: elements/ sfx/ svg/ fonts/ exports/ finished renders (gitignored) ``` ## 编写动画 SVG 叠加层 SVG 使用纯 CSS `@keyframes` 制作动画。需遵循一个约定：永远不要硬编码 `animation-delay` —— 请改用 `--d: 0.4s`，合成器会通过暂停所有动画并重置它们的延迟来控制时间。完整规则和骨架代码详见 [CLAUDE.md](CLAUDE.md#authoring-animated-svgs-the-svg-clip-kind)；可运行的示例请见 [`library/svg/`](library/svg/)。 ## 注意事项 - 仓库内置了 **20 种 Google Fonts**（`library/fonts/`，OFL 许可 —— 详见此处的 `LICENSES.md`），以及一套自主创作的 SVG 叠加层和动画元素（`library/elements/`、`library/svg/`，与仓库其余部分一样采用 MIT 许可）。 - `library/sfx/` 留空供你填充（已被 gitignore 忽略）：音效网站通常不允许在公开仓库中重新分发它们的文件，因此 FableCut 不会这么做 —— `library/sfx/README.md` 中列出了一些优质的免费来源。 - 导出在浏览器中进行，因为合成器*就是*浏览器本身；agent 会引导你点击导出（或者直接使用 ffmpeg 从 `media/` 进行渲染）。 ## 许可证 [MIT](LICENSE)

标签：AI代理, MCP, MITM代理, REST API, 多模态安全, 数据可视化, 自定义脚本, 视频编辑器, 零依赖, 非线性编辑