精读笔记

Problem Setting

[Animation2Code: Evaluating Temporal Visual Reasoning in Video-to-Code Generation]（arXiv preprint / 2026）

这篇论文实际解决的是：如何评估 VLM 是否能从视频中恢复可执行的时间动力学，而不是只识别视频内容或生成一个视觉上大致相似的静态页面。它把问题落在 web animation de-rendering 上，因为动画代码天然提供了一个可执行、可复现、可比较的生成过程。

真正困难点不是 HTML/CSS/JS 语法，也不是网页布局，而是从有限帧中反推出连续时间规律：对象身份、运动轨迹、速度、相位、循环周期、easing、多个元素之间的 delay 和同步关系。这些变量在视频中是连续观察，在代码中却必须离散化为 keyframe、transform、duration、timing function 或 JS update logic。

以前方法卡在两个地方：静态 visual-to-code 只验证空间结构恢复，视频 QA 又不要求完整重建。模型可以靠单帧 appearance、语言先验或模板生成拿到不错结果，但这些都绕过了 motion grounding。这个任务的关键矛盾是：生成“像动画的代码”很容易，生成“与参考视频同一时间动力学的代码”很难。

Motivation

已有路线缺的不是更大的视觉输入，而是一个能迫使模型提交完整动态解释的评测形式。QA benchmark 允许模型用局部线索回答问题；静态 de-rendering 允许模型忽略时间；interaction-to-code 更偏离散用户事件，而不是连续 time-driven motion。

作者的核心观察是：如果模型真的理解视频中的运动，它应该能把观察到的运动变成一个可执行程序，并在渲染后复现同样的时间序列。程序在这里不是最终应用目标，而是一个强约束的 readout：它要求模型把 temporal perception 转译为结构化机制。

因此这篇工作的动机不是“做一个动画代码生成器”，而是补上 temporal visual reasoning 的 measurement gap：把感知、时间建模和程序合成捆绑在一起，避免模型用描述性答案掩盖未建模的运动规律。

Core Idea

核心思想是用 animation de-rendering 作为 temporal reasoning 的压力测试：参考视频经过 VLM 生成 HTML/CSS/JS，再由确定性浏览器渲染成视频，最后与原视频比较。这个闭环让输出从文本解释变成可执行 artifact，错误也不再停留在语义层，而会具体表现为位置、速度、相位、周期或外观不匹配。

它引入的 inductive bias 是“程序即解释”：一个正确的动画程序天然包含对象、状态变化和时间控制。相比普通视频理解，这种形式更接近逆图形学/逆程序合成；相比静态 de-rendering，它把目标从空间布局扩展到时序生成规则。

本质区别在于，论文没有假设模型回答一个关于运动的问题就等于理解运动，而是要求模型重建一个能持续产生该运动的机制。这个思路更 scalable 的地方在于：只要某类动态内容存在可执行渲染器，就可以构造类似的闭环评测；但它的 generalization 也受限于可程序化、可确定性渲染的领域。

Method

方法层面可以压缩为几个必要机制。

第一，数据构造用真实 CodePen 动画并配对可执行 HTML/CSS/JS 与确定性渲染视频。它解决的是动态视觉任务缺少程序级 ground truth 的问题，也避免用人工文本描述作为弱监督。核心变化是把 benchmark 从“看视频回答”变成“看视频重建生成过程”。

第二，评测只看 animated region，而不是全画布。它解决的是静态背景、页面绝对位置和 canvas 留白对相似度的污染。这个选择很关键，因为否则模型可能因为背景或布局接近而获得虚高 appearance 分数，或者因为位置偏移被过度惩罚。

第三，appearance metric 使用 DreamSim embedding 加 DTW。DTW 的作用不是建模运动，而是允许不同渲染在相位/帧率上存在轻微错位时仍比较视觉元素本身；DreamSim 则比像素指标更接近人类对形状、颜色、风格的判断。

第四，temporal metric 用 tracklet displacement 相关性比较方向与速度，再用 Chamfer-style matching 聚合。它的目标是避免要求生成视频与参考视频有像素级结构一致性，因为模型可能画出不同但运动类似的元素。这个指标试图隔离“运动是否相似”，而不是“同一个像素是否移动到同一位置”。

第五，SFT 和 iterative refinement 更像诊断工具而非核心方法。SFT 测试数据监督是否足以注入任务格式；refinement 测试渲染-反馈-修改的 test-time compute 是否能修正错误。结果显示二者都没有根本解决 temporal gap。

Key Insight / Why It Works

这篇最重要的 insight 是：appearance reconstruction 和 temporal reconstruction 在当前 VLM 中已经明显解耦。模型可以生成可执行代码，也可以让某些帧看起来接近目标，但这并不意味着它学到了运动规律。这个结论对 visual-to-code 很关键，因为过去很多评测实际上把空间相似度误当成 de-rendering 能力。

方法有效的核心不在模型，而在评测设计的约束强度。可执行渲染闭环使得模型必须把视觉理解落实到程序参数；appearance/temporal 分离使得“静态像”不能掩盖“动得错”。这比单纯增加视频 QA 难度更有诊断价值。

最可能的核心贡献是 benchmark + metric decomposition。DreamSim、DTW、CoTracker、Chamfer matching 本身都不是新思想，属于已有工具的合理组合；真正新增的信息是这些工具被组织成一个能揭示 temporal failure 的评测协议。

论文结果也说明，当前模型的强项更像 data/template prior 与 static visual grounding，而不是连续时间建模。高执行率说明代码语法与前端模式不是瓶颈；高 appearance 说明静态视觉到代码已有较强能力；低 temporal 则指向 motion representation alignment 的缺失。

SFT 下降尤其值得注意：它表明把训练集代码喂给模型并不会自动得到视觉条件下的 motion grounding，甚至可能强化代码分布先验，生成更“合法”但更不对齐的动画。这里所谓学习更像 code prior fitting，而不是建立 video-to-program 的对齐。

Iterative refinement 的增益则更像 test-time compute 下的局部修补，不是长期状态建模。第一轮增益最大、后续递减，说明 critic/editor 能修一些显眼外观或运动错误，但没有形成稳定的全局 motion planner。增益来源不清，可能主要来自重新采样、局部提示约束和代码模板搜索。

Relation To Prior Work

它最接近三条谱系：visual de-rendering / visually grounded code synthesis、video temporal reasoning benchmark、以及 test-time refinement for code/visual artifacts。

相对 Design2Code、Plot2Code、Image2Struct、SVG/slide/chart-to-code，这篇的本质差异是把静态结构恢复扩展到时间生成机制恢复。它不是多加几帧的 static-to-code，而是要求恢复能产生连续运动的程序。

相对 Video-MME、MVBench、TempCompass、TemporalBench、TimeBlind 等视频理解评测，这篇的不同点是 output space 更强约束。QA 可以通过语言 shortcut 或局部证据解决，而 video-to-code 要生成可执行 artifact，错误会在渲染中暴露。

相对 WebVR / Interaction2Code，这篇区分了 interaction 与 animation：前者关注用户触发的离散状态变化，后者关注无交互的连续时间变化。这个区分是实质性的，因为连续 motion 的参数化和评价方式不同。

看似新的 refinement 实验其实是 METAL/self-refine/ChartIR/PhyT2V 思路的重组，不是主要创新。实质创新在于 benchmark formulation 与 human-aligned appearance/temporal 分解，而不是生成算法。

Dataset / Evaluation

数据覆盖的是真实 CodePen 动画，优点是来源自然、代码可执行、动画 idiom 多样，并且包含 CSS 与少量 JS 驱动动画。它比纯合成几何视频更贴近 web animation 实践，也比静态截图 benchmark 更能验证时间维度。

但覆盖范围仍然是窄域：主要是网页装饰动画、loader、text effect、几何/illustrative motion，不覆盖更广义的视频动力学、物理仿真、3D 场景、Manim 数学动画或复杂交互系统。因此它验证的是“web animation temporal de-rendering”，不是一般 temporal reasoning。

评价总体支持核心 claim：模型在 execution 和 appearance 上表现不错，但 temporal 低；人工标注也显示 appearance 与 temporal 不是同一维度。这个 evidence chain 是比较扎实的，因为它没有只依赖自动指标，还做了 pairwise human preference validation。

明显 limitation 是 temporal metric 仍受 tracker 质量限制。CoTracker3 在网页动画上可能不稳定，而 tracklet correlation 也未必捕获高阶时序结构，例如周期相位、群体波动、非刚体形变、复杂 easing 或拓扑变化。指标能证明当前模型 motion 差，但不能保证完整衡量所有 temporal fidelity。

另一个评测偏置是裁剪 animated region 虽然减少背景干扰，但也弱化了绝对位置与页面上下文关系。如果未来任务关心动画嵌入真实网页后的空间语义，这个 benchmark 的 isolation assumption 会显得偏理想化。

Limitation

方法成立依赖几个强前提：动画必须能被浏览器确定性渲染；参考视频必须来自可执行代码；视觉差异能够通过 appearance/tracklet 指标近似人类判断；motion 可以通过局部点轨迹比较充分描述。这些前提在 web animation 中大体成立，但迁移到真实视频或复杂动态图形时未必成立。

泛化是否真实存在仍不清楚。CodePen 动画有强模板性，未来大模型可能通过大量前端代码和公开视频的 implicit memorization/retrieval 学会“像 CodePen 的动画”，而不一定形成通用 temporal abstraction。benchmark overlap 或风格记忆会是长期风险。

程序 ground truth 也不是唯一解。视觉等价代码可能和原始代码完全不同，因此 benchmark 无法判断模型是否恢复了真实 latent program，只能判断渲染结果是否接近。这是合理选择，但意味着“de-rendering”在这里更偏 perceptual inverse rendering，而非 strict program recovery。

SFT 结果的归因不充分。文中显示微调提升 execution 但损害 appearance/temporal，但没有充分拆解是模型容量、训练策略、目标代码长尾、上下文截断、teacher forcing mismatch，还是视频编码器冻结导致。不能据此简单断言监督学习路线无效。

Iterative refinement 的上限也明显：它把问题转移给 critic 是否能识别 motion mismatch、editor 是否能把反馈转成参数修正。当前结果说明这种 loop 能做局部修补，但没有证据表明形成了可组合的长期动态规划。所谓推理更像 test-time search over code priors。

最后，自动指标虽然 human-aligned，但 temporal human agreement 本身低于 appearance，说明 motion quality 判断更噪声。benchmark 可以暴露大差距，但对小模型差异或细粒度改进的可信度有限。

Takeaway

• 1. 最值得记住的是：visual-to-code 的下一步瓶颈不是代码可执行性，而是从视觉序列中恢复可执行时间机制。
• 执行率接近饱和后，temporal fidelity 才是更真实的难点。
• 2. appearance 与 temporal 必须拆开评测。
• 很多 multimodal code generation 的“成功”可能只是静态视觉对齐，不能说明模型理解了动态过程。

一句话总结

Animation2Code 是把动态视觉理解从“回答视频问题”推进到“生成可执行时间机制”的 benchmark 型工作，真正贡献在于用 video-to-code 闭环和 appearance/temporal 解耦评测暴露了当前 VLM 的 motion grounding 缺口。