Animation2Code: Evaluating Temporal Visual Reasoning in Video-to-Code Generation¶

会议: NeurIPS 2026
arXiv: 2606.28593
OpenReview: https://openreview.net/forum?id=veADXfstkO
代码: https://anya-ji.github.io/animation2code-website
领域: 多模态VLM
关键词: 动态视觉推理, 视频转代码, Web动画反渲染, 多模态评估, 时序动态

一句话总结¶

本文提出首个评估视频到可执行Web动画代码（HTML/CSS/JS）反渲染基准 Animation2Code（含 1,069 个样本），并设计外观与时序解耦的双重评测指标，揭示了前沿多模态大模型在静态外观重建出色（达 0.84）但时序动态推理严重不足（仅约 0.31）的本质瓶颈。

研究背景与动机¶

视觉感知不仅关乎某单一瞬间的静态构成，更关乎连续时刻之间如何通过时序动态相互连接。在网页设计与动态交互界面中，动画被广泛用于引导用户注意力并传递复杂的视觉信息，理解这些视频流要求模型具备跨多帧追踪物体、推理相对运动以及解析如波动、旋转、弹性形变等高阶视运动的能力。近年来，视觉语言模型（VLM）在静态视觉反渲染任务（如网页截图、图表、SVG 矢量图或幻灯片反编译为代码）上取得了显著进展，但在动态视觉感知的代码化重建领域仍存在大片空白。

将连续视频映射为离散且确定性可执行的动画代码，其难度远超静态反渲染与传统的视频问答（Video QA）。传统视频理解基准通常采用多项选择或自由问答形式，往往允许模型通过静态背景线索、物体共现或语言先验走捷径；而反渲染要求模型完整解析动态物体的轨迹、速度、时间衰减与复合运动规律，并将其精确落地为控制渲染引擎的 programmatic 语法。目前领域内缺乏能够系统解耦外观保真度与时序运动一致性、且具有确定性执行环境的通用动画反编译评测基准。

为此，加州大学伯克利分校的研究团队构建了 Animation2Code，填补了动态视觉反渲染基准的空白。本文的核心 idea 是：将动态视觉感知评测形式化为从视频到可执行前端代码（HTML/CSS/JS）的端到端反渲染逆问题，并通过建立动画区域聚焦裁剪、基于 DTW 动态时间规整的 DreamSim 外观相似度与基于密集轨迹追踪的相关性时序相似度，实现外观保真度与时序运动动态的严格解耦评估。

方法详解¶

整体框架¶

Animation2Code 构建了一个从现实世界 Web 动画数据收集、确定性无头浏览器视频录制、代码反编译生成到外观与时序解耦评估的完整评测管线。给定一段由真实网页动画渲染生成的参考视频 $V_{\text{ref}}$，待测模型需要观察视频（以原生视频或均匀采样的连续图像帧形式输入），合成包含内联 CSS 和 JavaScript 的完整自包含 HTML 页面 $C$。随后，评测环境调用无头 Chromium 引擎 deterministically 渲染生成预测视频 $V_{\text{gen}}$，最后通过解耦的指标评估体系计算外观与时序得分。

%%{init: {'flowchart': {'rankSpacing': 24, 'nodeSpacing': 28, 'padding': 6, 'wrappingWidth': 400}}}%%
flowchart TD
    A["参考动画视频 V_ref<br/>1024×768 30FPS H.264"] --> B["多模态模型 VLM<br/>原生视频流 / 采样帧输入"]
    B --> C["生成自包含代码 C<br/>单文件 HTML / 内联 CSS / JS"]
    C --> D["无头 Chromium 确定性渲染<br/>Web Animations API 逐帧步进"]
    D --> E["生成视频 V_gen<br/>统一对齐渲染画布"]
    A & E --> F["动态区域自适应提取<br/>像素差分阈值裁剪动画外接方框"]
    F --> G["外观相似度评估：DreamSim-DTW<br/>逐帧感知嵌入余弦距离与最优时序路径"]
    F --> H["时序相似度评估：轨迹位移相关度<br/>网格变化点初始化 CoTracker3 + 双向 Chamfer"]
    G & H --> I["解耦评测结论<br/>外观得分 0-1 与时序得分 0-1"]

关键设计¶

1. 确定性渲染管线与动态区域自适应提取：消除背景偏置与渲染抖动 直接从网络抓取的动画通常带有用户交互触发器（如 hover、click）或不确定性的时间步进，且动画元素通常仅占据网页画布的局部区域。为了构建可靠的对照环境，研究团队统一将 CodePen 动画清洗为自动循环播放的纯净自包含单文件，并通过无头 Chromium 与 Puppeteer-capture 配合 Web Animations API 进行逐帧强制步进渲染，消除系统掉帧和异步执行带来的时间抖动。

在评测阶段，如果直接在全尺寸画布（$1024 \times 768$）上比较全图，静态空白背景会主导相似度计算，导致微小的动画差异被背景稀释，模型间的方差增大 2.5 至 3 倍。为此，设计了动态区域提取算法：以首帧为基准，提取所有帧中像素绝对差值超过阈值的变化区域，求取包裹所有运动像素的最小外接正方形边界框进行局部裁剪，并将较大裁剪图下采样缩放到较小尺寸，确保外观与时序评测完全聚焦于实际发生形变与位移的动态核心区域。

2. 基于 DreamSim 与动态时间规整的外观相似度量：对齐人类空间感知 传统像素级指标（如 SSIM）对微小形变和局部相位偏移极度敏感，无法反映人类对图元色彩、拓扑形状和艺术风格的宏观认知。为此，外观评估模块采用对人类视觉感知显著敏感的 DreamSim 深度特征抽取器 $\phi$。为消除生成视频与参考视频之间播放速率或起始相位轻微差异对外观比对的干扰，引入动态时间规整（DTW）算法求解最优帧对齐路径。

设参考帧集合为 $V_{\text{ref}} = \{F_i^*\}_{i=1}^n$，生成帧集合为 $V_{\text{gen}} = \{F_j\}_{j=1}^m$。两帧之间的感知距离定义为 DreamSim 嵌入的余弦相异度： $$D_{i,j} = 1 - \cos(\phi(F_i^*), \phi(F_j))$$ DTW 算法在代价矩阵中搜索累计代价最小的单调规整路径 $P^* = \{(i_l, j_l)\}_{l=1}^L$，最终的外观相似度得分定义为该最优对齐路径上的平均感知相似度： $$\mathcal{S}_{\mathrm{Appearance}} = \frac{1}{L} \sum_{l=1}^L \bigl(1 - D_{i_l, j_l}\bigr)$$ 该指标专注于动画图元的颜色、轮廓与几何视觉风格还原，完全免受空间绝对平移误差的虚假惩罚。

3. 基于栅格初始化轨迹与 Chamfer 匹配的时序相似度量：解耦外观的纯运动比对 传统光流匹配严格依赖两段视频间的像素级密集对应，但不同代码实现生成的几何形状与纹理往往存在结构差异，直接计算光流场必然失效。本文构建了基于点追踪的无外观依赖时序保真度指标。针对 CoTracker3 在人造矢量动画中纹理缺失导致特征点飘移的缺陷，设计了基于 $30 \times 30$ 空间网格的首次动态像素探测算法，在每个网格单元内检测首次发生显著像素变化的坐标作为追踪查询点，实现对渐进式展现动画的稳健追踪。

提取出参考轨迹集 $\mathcal{T} = \{\tau_i\}_{i=1}^n$ 和生成轨迹集 $\tilde{\mathcal{T}} = \{\tilde{\tau}_j\}_{j=1}^m$，其中 $q_i, \tilde{q}_j$ 分别为轨迹首次出现帧，单步位移向量记为 $\mathbf{d}_k^i = \tau_i(k+1) - \tau_i(k)$。两两轨迹之间的运动相关度由方向一致性（位移余弦相似度）与速率一致性（位移模长极小与极大之比）共同决定，以较早出现帧 $q_{ij} = \min(q_i, \tilde{q}_j)$ 至终止帧 $T$ 积分： $$\mathrm{\textbf{corr}}(\tau_i, \tilde{\tau}_j) = \frac{1}{T - q_{ij}} \sum_{k=q_{ij}}^{T-1} \frac{1}{2} \left[ \frac{\mathbf{d}_k^i \cdot \tilde{\mathbf{d}}_k^j}{\|\mathbf{d}_k^i\| \|\tilde{\mathbf{d}}_k^j\|} + \frac{\min(\|\mathbf{d}_k^i\|, \|\tilde{\mathbf{d}}_k^j\|)}{\max(\|\mathbf{d}_k^i\|, \|\tilde{\mathbf{d}}_k^j\|)} \right]$$ 最后通过双向 Chamfer 距离聚合轨迹集合间的最大运动相关度，得到时序相似度得分： $$\mathcal{S}_{\mathrm{Temporal}} = \frac{1}{2} \left( \frac{1}{m} \sum_{\tilde{\tau} \in \tilde{\mathcal{T}}} \max_{\tau \in \mathcal{T}} \mathrm{\textbf{corr}}(\tau, \tilde{\tau}) + \frac{1}{n} \sum_{\tau \in \mathcal{T}} \max_{\tilde{\tau} \in \tilde{\mathcal{T}}} \mathrm{\textbf{corr}}(\tau, \tilde{\tau}) \right)$$ 这一设计使时序评估能够完全穿透外观差异，精准度量图元运动轨迹的几何形状、方向转向与速度节奏。

实验关键数据¶

主实验¶

在 Animation2Code 的 214 个测试集样本上，全面评估了商业闭源前沿模型与主流开源 VLM 在零样本 Prompting、监督微调（SFT）和多智能体迭代自精炼（Refinement）下的表现。

实验设定	评估模型	输入规格	代码执行率 Exec (%)	外观相似度 Appearance	时序相似度 Temporal
原生视频输入 (Native Video)	Gemini 3 Flash Preview	24 FPS	99.1	0.80	0.31
原生视频输入 (Native Video)	Gemini 3 Flash Preview	2 FPS	98.1	0.80	0.30
原生视频输入 (Native Video)	Qwen3-VL-8B-Instruct	24 FPS	84.6	0.69	0.24
原生视频输入 (Native Video)	Qwen3-VL-8B-Instruct	2 FPS	85.5	0.67	0.23
图像帧采样输入 (Image Frames)	GPT-5.4	2 FPS	100.0	0.84	0.29
图像帧采样输入 (Image Frames)	Gemini 3 Flash Preview	2 FPS	100.0	0.80	0.30
图像帧采样输入 (Image Frames)	Claude Sonnet 4.6	2 FPS	99.5	0.82	0.29
图像帧采样输入 (Image Frames)	LLaMA 4 Scout	2 FPS	97.7	0.62	0.21
图像帧采样输入 (Image Frames)	Qwen3-VL-8B-Instruct	2 FPS	80.4	0.70	0.24
监督微调 SFT (Video, 2 FPS)	Qwen3-VL-8B (LoRA)	2 FPS	98.6	0.43	0.09
监督微调 SFT (Video, 2 FPS)	Qwen3-VL-8B (Full SFT)	2 FPS	94.9	0.46	0.08
迭代自精炼 (Dual Critic Refine)	Qwen3-VL-8B (Iteration 3)	2 FPS	85.5	0.73	0.28

消融实验¶

研究团队对评估裁剪范围（动画区域 vs 全画幅）以及自动指标对人类偏好拟合显著性进行了消融验证。

表 1：评估区域对相似度指标的影响（消融测试）

评估区域策略	Claude (App. / Temp.)	GPT (App. / Temp.)	Gemini (App. / Temp.)	标准差变化特征
全画幅评估 (Full Frame)	0.672 (0.281) / 0.269 (0.111)	0.705 (0.271) / 0.268 (0.097)	0.633 (0.281) / 0.271 (0.105)	样本方差极大，背景静态区域严重稀释评估信噪比
动态区域裁剪 (Animated Only)	0.816 (0.106) / 0.287 (0.094)	0.837 (0.100) / 0.289 (0.084)	0.799 (0.104) / 0.295 (0.096)	样本内方差降低 2.5-3×，清晰分辨不同模型能力差异

表 2：输入帧率消融对时序与外观指标的影响

模型与模态	2 FPS (App. / Temp.)	8 FPS (App. / Temp.)	16 FPS (App. / Temp.)	24 FPS (App. / Temp.)
Gemini 3 Flash (Video)	0.799 / 0.295	0.801 / 0.315	0.804 / 0.321	0.797 / 0.309
GPT-5.4 (Image Frames)	0.837 / 0.289	0.825 / 0.286	0.819 / 0.283	— (超出上下文限制)
Claude Sonnet 4.6 (Image)	0.816 / 0.287	0.821 / 0.294	—	—
Qwen3-VL-8B (Video)	0.673 / 0.234	0.689 / 0.237	0.692 / 0.230	0.693 / 0.238

关键发现¶

外观与时序能力的严重割裂：几乎所有前沿模型的代码执行率均趋于饱和（$\ge 97\%$），且外观相似度极高（GPT-5.4 达 0.84），但所有模型在时序相似度上均陷入低谷（最高仅 Gemini 的 0.31）。人类评测中外观与时序偏好的 Spearman 相关系数仅为 $\rho = 0.60$，证实两者是正交解耦的维度。
微调陷阱（SFT Prior Collapse）：在小规模配对数据上对 Qwen3-VL 进行 LoRA 或全量微调，虽然将代码语法执行率显著拉升至 98.6% 和 94.9%，但外观和时序相似度惨遭腰斩（时序掉至 0.08-0.09）。微调使模型过度拟合前端代码模板与静态先验，丧失了对输入视频动态时序特征的感知与泛化关联。
稠密采样的边际收益递减：将输入帧率从 2 FPS 提高到 24 FPS，并未如预期般大幅提升时序动态重建能力，Gemini 的时序得分仅从 0.295 微增至 0.321。这表明当前 VLM 的瓶颈在于将时序轨迹抽象为符号化关键帧与变换函数的高阶推理逻辑缺失，而非简单的视觉时间采样率不足。
静态代码生成假象：虽然模型能生成成功运行的网页，但实际执行结果中有相当比例是静态的。在零样本下，GPT 生成的静态页面比例最低（13.1%），而 Qwen 生成的可执行输出中有高达 41.5% 完全无动画效果。

亮点与洞察¶

将连续视觉动态逆向为符号化程序的任务建模：将时序视觉理解从被动的选择题 QA 升华为主动的可执行代码重构，为大模型动态感知提供了具备物理执行反馈的刚性检验环境。
双重解耦评测协议：设计基于 DTW-DreamSim 的外观指标与基于动态网格初始化点追踪的时序 Chamfer 指标，完美克服了人造动画无密集光流与布局绝对位移偏置的行业评测顽疾。
微调反向损害多模态时序理解的警示：实验清晰揭示了直接用前端代码 SFT 多模态大模型会导致严重的语义退化与先验崩塌，为代码合成领域的合成数据增强与微调范式提供了重要警示。

局限与展望¶

复杂合成图元的追踪噪点：时序相似度依赖 CoTracker3，但在缺乏自然纹理、极度抽象、尺度微小或高速闪烁的矢量图元上，追踪点可能存在漂移或丢失，对细粒度时序动态的捕捉仍存在微弱噪点。
数据源域局限性：数据集主要来源于 CodePen 中的 CSS/JS 动画，尚未涵盖复杂的 Manim 数学物理模拟引擎动画、基于 WebGL/Three.js 的真实三维着色器特效或带复杂物理碰撞仿真的连续系统。
代码表示空间与模型优化：当前基准仅评测了生成最终 HTML/CSS 代码，未来可探索向模型引入动画中间表示（如 Keyframe 轨迹抽象语言）或基于强化学习（RLVR）直接以渲染执行反馈作为奖励的优化范式。

评分¶

新颖性: ⭐⭐⭐⭐⭐ 首创动态 Web 动画到可执行代码的逆向反渲染基准，研究范式极具开拓性。
实验充分度: ⭐⭐⭐⭐⭐ 涵盖 5 大顶尖主流闭源与开源模型，包含零样本、采样率消融、SFT、迭代自精炼及严谨的 Prolific 人类偏好一致性校验。
写作质量: ⭐⭐⭐⭐⭐ 问题定义清晰锐利，指标推导数学严谨，实验分析深刻切中当前多模态模型的动态推理软肋。
价值: ⭐⭐⭐⭐⭐ 为多模态大模型的视频时序推理评测树立了全新的代码合成验证标杆，对端到端前端自动化与时序 VLM 发展极具推动价值。