视频理解与生成 可视化实验室

用交互式 SVG 呈现动作识别、时空注意力、视频生成、光流估计等视频 AI 核心技术。八个模块,纯原生实现。

zero-deps HTML / CSS / JS + SVG requestAnimationFrame prefers-reduced-motion
MODULE 01

动作识别 · 3D CNN / I3D / SlowFast

时序卷积核在视频体(T×H×W)上滑动提取时空特征。3D CNN 用核 (kT×kH×kW),I3D 将 2D 权重膨胀为 3D,SlowFast 双通道分别以低/高帧率建模语义与运动。拖动滑块改变核位置,观察感受野。

action-recognition.svg
3D CNN I3D (inflated) SlowFast 慢通道 SlowFast 快通道

时序卷积核

3D 卷积核同时在时间与空间维度滑动,输出时空特征图。I3D 通过将预训练 2D 权重沿时间维膨胀(重复 kT 次)获得 3D 初始化。SlowFast 双通道:慢通道低帧率捕获语义,快通道高帧率捕获运动细节,二者横向融合。

核尺寸
3×3×3
时间感受野
3 帧
FPS 比例
—
当前模型
3D CNN
MODULE 02

Video Transformer · 时空注意力

视频被切分为时空 Tubelet(t×p×p),线性投影为 token 序列。时空注意力让每个 tubelet 沿空间与时间维度聚合信息。点击选择 query tubelet,切换注意力类型观察连接范围。

video-transformer.svg
Query tubelet 空间注意力 时间注意力 时空联合

Tubelet Embedding

ViViT / TimeSformer 将视频拆为 (T/t)×(H/p)×(W/p) 个 tubelet,每个映射为 D 维向量。分注意力(Factorised)先空间后时间复杂度 O(T·N² + N·T²),远低于联合注意力 O((T·N)²)。

Tubelet 数
—
序列长度
—
注意力类型
空间
复杂度
—
MODULE 03

视频目标跟踪 · SORT / DeepSORT

卡尔曼滤波预测目标下一帧位置,检测器给出观测,用匈牙利算法基于 IoU/ReID 距离完成数据关联。实线为观测框,虚线为预测框,连线表示同一轨迹的关联。

multi-object-tracking.svg
观测框 预测框 关联连线 未匹配检测

卡尔曼滤波 + 数据关联

SORT 仅用 IoU 关联;DeepSORT 在马氏距离基础上加入外观特征(ReID)距离,更好应对遮挡。状态向量含 [x,y,s,r,vx,vy],预测步骤用匀速模型,更新步骤用检测框修正。

当前帧
0
活跃轨迹
—
关联成功
—
模式
SORT
MODULE 04

文本到视频生成 · 扩散模型

视频扩散模型从纯噪声逐步去噪生成视频帧,帧间注意力保证时序一致性,文本 token 通过交叉注意力注入语义。拖动滑块改变去噪步数 t,观察噪声逐步被去除、画面逐渐清晰。

text-to-video-diffusion.svg
视频潜帧 帧间自注意力 文本交叉注意力 噪声

视频潜扩散

模型在潜空间逐帧去噪:x_t = √α̅_t·x_0 + √(1-α̅_t)·ε。帧间自注意力约束时序连贯,文本 token 的交叉注意力引导内容生成。大 t 时帧充满噪声,小 t 时趋于清晰。

去噪步 t
—
噪声强度
—
帧间注意力
on
提示词
宇航员
MODULE 05

视频插帧 · 光流估计

由相邻两帧 I₀、I₁ 估计双向光流,按时间 t 双向 warped 后融合得到中间帧 I_t。拖动 t 滑块观察插值帧在两帧间的过渡,切换显示前向/后向流箭头。

frame-interpolation.svg
帧 I₀ 帧 I₁ 中间帧 I_t 前向光流

双向光流合成

前向流 F₀→₁ 与后向流 F₁→₀ 分别将两帧 warp 到时刻 t,再按可见性权重融合:I_t = (1-t)·W(I₀,F₀→t) + t·W(I₁,F₁→t)。RIFE / FILM 用网络直接预测中间流以避免遮挡伪影。

插值时刻 t
0.50
前向流幅值
—
后向流幅值
—
显示流
双向
MODULE 06

视频分割 · SAM Video

SAM Video 在首帧给定 mask 提示,通过记忆机制与时序注意力将 mask 传播到后续帧。点击帧中的目标对象选择分割对象,播放观察 mask 在时间上的传播与置信度变化。

sam-video-mask.svg
Mask (对象 A) Mask (对象 B) 记忆帧 传播方向

时序 Mask 传播

SAM 2 引入流增强的记忆注意力:当前帧图像特征查询过去帧的记忆(含 mask、特征、位置编码),输出当前帧 mask。首帧 prompt 可为点/框/掩码;随帧推进,遮挡会让置信度下降,新记忆帧注入可恢复精度。

当前帧
0
对象
A
Mask 置信度
—
记忆帧数
—
MODULE 07

时序特征提取 · I3D / TimeSformer / VideoMAE

三种主流视频骨干的特征对比:I3D 是 3D 卷积特征图,TimeSformer 是 Transformer token 序列,VideoMAE 经掩码自编码重建。切换架构与特征层,观察时序特征管的形态差异。

temporal-features.svg
特征激活 时间轴 掩码 token 重建目标

骨干特征对比

I3D 输出 (T',H',W',C) 的 4D 特征图,保留空间结构;TimeSformer 输出 (T·N, C) token 序列,含 CLS;VideoMAE 仅编码可见 token(~25%),解码器重建被掩码像素,自监督预训练对下游更鲁棒。

骨干
I3D
特征层
—
输出形状
—
掩码率
0%
MODULE 08

视频编码 · GOP / IBP 与运动补偿

视频编码以 GOP 为单位组织帧:I 帧独立编码,P 帧前向预测,B 帧双向预测。运动补偿用运动矢量指向参考帧的块。调整 GOP 大小与量化参数,观察码率分配与运动矢量。

video-coding-gop.svg
I 帧 (帧内) P 帧 (前向) B 帧 (双向) 运动矢量

GOP 与码率分配

I 帧码率最高(仅帧内压缩),P/B 帧通过运动补偿与残差编码大幅节省码率。GOP 越长压缩率越高但抗误码与随机访问能力下降;QP 越大质量越低码率越小。B 帧双向参考能进一步压缩但增加延迟。

GOP 长度
—
QP
—
总码率
—
压缩比
—