我们在开源视频编辑器 Timeline Studio 中接入了 Depth Anything V2 Small，让用户可以直接在浏览器中分析照片和视频的场景深度，并生成可实时调整、可保存、可导出的电影景深效果。

整个过程基于 WebGPU 在用户设备本地运行，不需要把原始媒体上传到服务器。针对不同网络环境，模型支持 ModelScope 优先、Hugging Face 回退，并通过统一缓存避免重复下载。

• GitHub：MartinDelophy/ai-video-editor
• 在线体验：Timeline Studio

正文

一、为什么要在视频编辑器中引入场景深度

很多视频编辑器已经具备背景虚化功能，但常见实现通常依赖人物分割：

人物区域 → 保持清晰
其他区域 → 统一模糊

这种方法适合简单的人像画面，却无法准确表达真实空间。

例如，一段视频中可能同时包含：

• 靠近镜头的树叶
• 位于中间位置的人物
• 人物身后的桌椅
• 更远处的建筑和天空

人物分割只能告诉我们“哪里是人物”，不能告诉我们不同区域距离镜头有多远。因此，它很难实现前景虚化、背景虚化以及焦点在不同空间层次之间移动的效果。

为了获得更自然的镜头表现，我们在 Timeline Studio 中引入了 Depth Anything V2 Small。

模型会为画面生成连续深度图。编辑器可以根据深度值计算每个区域与焦平面的距离，从而实现渐进式虚化。

二、为什么选择 Depth Anything V2 Small

浏览器端模型与服务器端模型面临的约束不同。

除了效果质量，我们还需要考虑：

• 模型下载体积
• 浏览器内存占用
• WebGPU 兼容性
• 首次初始化时间
• 视频多帧分析成本
• 移动设备的承载能力
• 浏览器缓存与版本管理

综合这些因素，我们选择了 Depth Anything V2 Small。

主要原因包括：

• Small 版本更适合浏览器本地执行
• 提供适合 WebGPU 使用的量化版本
• 可以通过 Transformers.js 接入
• Apache-2.0 许可证便于项目集成
• 能够输出连续场景深度，而不是简单人物蒙版
• 项目已经使用 @huggingface/transformers，可以复用现有运行环境

我们使用 Q4F16 模型降低网络分发压力，并通过 WebGPU 在浏览器本地执行推理。

三、从模型演示到真正的编辑能力

让模型在浏览器里输出一张深度图并不困难。

真正困难的是把它变成用户可以持续使用的编辑功能。

我们为电影景深设计了完整的产品入口。在 Effects 工作区中，前四项能力保持稳定的两列布局：

1. Person Outline
2. Object Outline
3. Face Swap
4. Optical Flow Tracking

电影景深作为第五项能力出现在其后。

卡片默认展示未经处理的原始画面。当用户悬停或聚焦时，卡片会切换成同一画面的景深版本，让用户在点击前就能理解该功能的实际效果。

触屏设备没有传统悬停状态，因此可以自动播放景深预览。

选择卡片后，桌面端打开独立的 Effects 属性面板，移动端则打开聚焦式属性抽屉。

用户可以调整：

• 焦点距离
• 清晰范围
• 镜头模糊强度
• 高光散景
• 快速分析
• 标准分析
• 精细分析
• 启用、取消和重置

四、电影景深的实现原理

Depth Anything V2 Small 会为输入画面生成深度信息。

系统首先将深度值归一化，然后根据用户设置的焦点距离和清晰范围计算模糊程度。

概念上可以表示为：

function getBlurAmount(
  depth,
  focusDistance,
  focusRange,
  lensBlur
) {
   
  const distance = Math.abs(
    depth - focusDistance
  );

  return Math.max(
    0,
    distance - focusRange
  ) * lensBlur;
}

如果某个区域位于清晰范围内，它会保持清晰。

如果某个区域远离当前焦平面，它会获得更高的模糊强度。

最终效果不再是“人物清晰、背景模糊”的二元切换，而是多个空间层次之间连续变化的虚化。

近景区域 ── 较强虚化
       \
        焦点区域 ── 保持清晰
                 \
                  远景区域 ── 渐进虚化

用户还可以改变焦点距离，让清晰区域从前景移动到人物，再移动到远处背景。这为后续实现动画拉焦提供了基础。

五、视频不能只分析一张深度图

图片只需要分析一个画面，而视频内容会持续变化。

如果只分析视频封面，人物移动、镜头运动或者场景切换后，原来的深度结果就会失效。

如果对原始视频的每一帧都运行模型，浏览器的计算成本又会过高。

因此，我们采用了时间采样与深度帧复用策略。

视频时间轴
0s      1s      2s      3s      4s
│-------│-------│-------│-------│
●       ●       ●       ●       ●
深度帧  深度帧  深度帧  深度帧  深度帧

系统会根据用户选择的质量档位，决定分析分辨率和时间采样密度。

每一个分析结果都包含对应的视频时间。播放和导出时，渲染器会根据当前时间查找匹配的深度帧。

这样既能让景深跟随视频变化，也能避免对全部原始帧进行重复推理。

六、深度帧需要成为可复用资产

我们没有把深度分析结果当成一次性预览数据。

分析完成后，深度帧会绑定到对应的视频片段，并可以被以下流程共同使用：

• 编辑器实时预览
• 主 Visuals 轨道
• Overlay／画中画轨道
• 项目保存与恢复
• 确定性视频导出
• 兼容性视频导出

用户调整焦点距离、焦点范围或镜头模糊强度时，只需要重新合成效果，不需要重新运行深度模型。

只有以下变化才需要使缓存失效：

• 更换了源素材
• 修改了分析质量
• 调整了需要分析的视频范围
• 模型版本发生变化

这项设计对交互体验非常重要。

如果用户每次移动滑块都要重新运行模型，那么即使最终画质很好，也很难成为一个真正可用的编辑功能。

七、预览和导出使用同一套参数

AI 视频编辑中，一个常见问题是预览与导出不一致。

例如：

• 编辑器中焦点位于人物
• 导出后背景突然变清晰
• Overlay 的景深错误应用到主轨道
• 预览使用新参数，导出仍然使用旧参数

为了避免这些问题，我们让预览和导出共享：

• 同一组深度帧
• 同一个片段标识
• 同一个效果配置
• 同样的焦点距离
• 同样的清晰范围
• 同样的镜头虚化强度
• 同样的散景参数

电影景深严格绑定到用户选择的 Visuals 或 Overlay 片段。

调整画中画素材的景深，不会影响主轨道视频；切换选中片段后，属性面板也必须跟随对应片段更新。

八、使用 ModelScope 改善国内模型下载体验

浏览器本地 AI 的体验不仅取决于推理速度，也取决于模型能否稳定下载。

如果只使用单一海外模型源，国内用户可能会遇到：

• 下载速度不稳定
• 请求超时
• 模型文件加载失败
• 下载到一半后重新开始
• 更换模型源后重复下载

为此，我们设计了双模型源加载策略：

中文或国内环境
       ↓
优先请求 ModelScope
       ↓
失败后回退 Hugging Face

其他环境可以根据实际情况优先使用 Hugging Face。

不过，双模型源会带来一个新的问题：同一份模型具有两个不同的下载地址。

如果直接按照 URL 缓存，浏览器会认为它们是两份不同模型。

因此，我们建立了与模型提供商无关的统一缓存身份：

ModelScope URL ──┐
                 ├── 统一模型缓存身份
Hugging Face URL ┘

只要文件版本和校验信息一致，无论模型最初从哪个平台下载，浏览器都可以复用已经存在的缓存。

九、生产环境必须固定模型版本

在开发阶段，直接从模型仓库的 main 分支加载文件很方便。

但生产环境不能依赖一个随时可能变化的地址。

模型仓库更新后，可能发生：

• 模型结构发生变化
• 权重文件被替换
• 文件名改变
• 新模型与旧版代码不兼容
• 浏览器缓存出现版本混用

因此，我们把模型固定到不可变 revision，并对模型文件保存版本和校验信息。

这样可以保证：

• 相同版本代码始终加载相同模型
• ModelScope 与 Hugging Face 文件保持一致
• 浏览器缓存可以安全复用
• 线上问题能够准确复现
• 新模型可以通过明确升级完成切换

十、不能把“Failed to fetch”直接展示给用户

浏览器底层错误适合开发者排查，却不适合作为产品提示。

例如，Failed to fetch 可能代表：

• 网络不可用
• 模型源暂时无法访问
• 跨域请求失败
• 浏览器不支持相关能力
• 模型文件不存在
• 用户主动取消了下载

因此，我们在界面中区分了不同阶段和错误类型。

正常阶段包括：

• 正在准备模型
• 正在下载模型
• 正在初始化 WebGPU
• 正在分析视频帧
• 已完成帧数
• 当前分析百分比
• 正在生成预览
• 分析完成

异常状态则会转换成用户可以理解的本地化信息，并提供重试或切换模型源的机会。

长时间视频分析还提供真实取消操作，而不是只把进度弹窗隐藏起来。

十一、多语言必须覆盖完整功能链路

电影景深不仅翻译了卡片标题。

我们同步处理了：

• 卡片标题与描述
• 模型准备状态
• 视频分析状态
• 质量档位
• 焦点距离
• 清晰范围
• 虚化强度
• 散景设置
• 取消、重试和重置
• WebGPU 不支持提示
• 模型加载失败提示
• 图片与视频能力说明

如果只翻译主要按钮，日语、韩语等界面很容易在深层弹窗或错误状态中退回中文或英文。

因此，我们把国际化键值完整性视为功能交付的一部分。

十二、如何理解浏览器端处理性能

10 秒视频需要多长时间完成深度分析，并没有一个适用于所有设备的固定答案。

它会受到以下因素影响：

• GPU 型号
• 浏览器 WebGPU 实现
• 视频分辨率
• 深度分析采样率
• 分析质量档位
• 模型是否已经缓存
• WebGPU 会话是否已经完成初始化

第一次使用通常包含三个阶段：

模型下载 → WebGPU 初始化 → 视频分析

再次使用则可以复用模型缓存和初始化环境：

读取缓存 → 视频分析

因此，我们没有把某个开发设备上的单次测试时间直接宣传成所有用户都能达到的性能。

产品上更重要的是：

• 模型不重复下载
• 多个深度帧可以复用
• 参数调整不重新推理
• 分析过程有明确进度
• 用户可以随时取消
• 不同设备可以选择不同质量档位

十三、深度能力还能做什么

电影景深只是场景深度的第一个应用。

同一份深度数据还可以继续用于其他视频编辑能力。

1. 2.5D 照片动画

根据深度将照片拆分成前景、主体和背景，通过不同幅度的运动形成视差效果。

2. 深度感知文字与贴纸

让文字或贴纸的一部分出现在人物前方，另一部分被人物遮挡，从而真正进入画面空间。

3. 空间转场

按照前景、中景、背景的深度顺序逐层擦除画面，制作更具空间感的转场。

4. 智能构图

除了检测人物框，还可以利用场景深度优先保留视觉前景和重要空间层次。

5. 动画拉焦

通过关键帧改变焦点距离，让清晰区域从前景移动到人物，再移动到背景，模拟真实摄影中的 Rack Focus。

这些能力可以共享已经完成的深度分析，不必为每一种效果重新执行模型。

十四、浏览器 AI 不应只停留在模型 Demo

将 Depth Anything V2 Small 放进真正的视频编辑器后，我们发现模型推理只是其中一环。

完整功能还需要解决：

• WebGPU 能力检测
• 模型下载与初始化
• ModelScope 与 Hugging Face 双源切换
• 模型版本固定
• 浏览器缓存
• 视频时间采样
• 深度帧持久化
• 分析进度和取消
• 多轨道状态绑定
• 桌面和移动端交互
• 多语言提示
• 预览与导出一致性

只有这些部分都完成后，深度模型才不再是一张漂亮的灰度图，而是用户可以真正使用的电影景深工具。

十五、总结

这次实现让我们看到了一种更有吸引力的浏览器 AI 方向：

AI 模型不一定需要把素材上传到服务器，也不一定只能存在于独立的生成页面中。它可以成为视频编辑器中自然、可调整、可保存、可复用、可导出的基础能力。

在 Timeline Studio 中：

• 模型通过 WebGPU 在浏览器本地运行
• 原始照片和视频无需上传
• ModelScope 可以为国内用户提供优先模型源
• 深度分析结果可以跨预览和导出复用
• 图片、视频、主轨道和 Overlay 均可使用电影景深
• 桌面端和移动端拥有对应的编辑体验

电影景深只是开始。建立起可复用的时序深度数据后，2.5D 动画、空间转场、深度文字和动画拉焦都会拥有共同的技术基础。

开源地址

Timeline Studio 已在 GitHub 开源，项目还包含浏览器本地 AI 音乐、AI 配音、字幕、数字人、Face Swap、AI Repair 和视频导出等能力。

• GitHub：https://github.com/MartinDelophy/ai-video-editor
• 在线体验：https://video-editor.ai-creator.top/

如果项目对你有帮助，欢迎在 GitHub 点一个 Star，也欢迎通过 Issue 提交问题和功能建议。

本文涉及的 AI 编辑能力仅用于合法、授权的图片和视频处理。使用者应确保拥有相关素材及人物肖像的合法使用权，不得生成或传播违法、侵权、虚假、误导性内容，不得进行身份冒用，也不得把经过 AI 处理的内容冒充真实影像。违规使用所产生的责任由使用者承担。