Video2Code: Generating Interactive Webpages from UI Videos via Action-Aware Revisit
Video2Code 是一个动作感知框架，它通过在更高的时间分辨率下识别并重新审视关键动作区域，以准确恢复可执行的状态转换，从而显著提升复杂交互式网页的生成功能正确性。
原始论文采用 CC BY 4.0 许可（http://creativecommons.org/licenses/by/4.0/）。 这是对下方论文的AI生成解释。它不是由作者撰写或认可的。如需技术准确性，请参阅原始论文。 阅读完整免责声明
想象一下，你想教一个机器人如何构建一个特定的、具有交互性的网站。你可以给机器人看一张该网站的静态照片。机器人会非常出色地模仿颜色、布局和按钮。但问题在于：照片无法告诉机器人当你“点击”一个按钮、“在框中输入”内容或“向下滚动”页面时会发生什么。照片是凝固在时间里的；它错过了网站实际运作的“魔力”。
或者，你可以给机器人看一段某人使用该网站的视频。这要好得多，因为它捕捉到了动作。然而，目前的 AI 模型在观看这些视频时，就像注意力非常短暂的人。它们可能会扫一眼视频，看到几个帧，然后错过用户点击按钮或菜单弹出的那极其短暂的一瞬间。如果 AI 错过了那个瞬间的过渡，它就无法编写代码来让菜单弹出。它构建了一个华丽的外壳，但内部却是破碎的。
由此，诞生了“Video2Code”。
开发这篇论文的研究人员创造了一种名为 Video2Code 的新方法。你可以把 Video2Code 想象成一种聪明的、两步走的侦探程序，用于教 AI 如何通过视频构建网站。
问题所在：“模糊快照”
大多数 AI 模型试图通过提取间隔开的几个“快照”（帧）来理解整个视频。
- 类比： 想象一下，你试图通过观察魔术表演前的一张照片（魔术师还没从帽子里掏出兔子）和一张表演后的一张照片（兔子已经不见了）来理解这个魔术。你看到了帽子和兔子，但你完全不知道兔子是怎么出来的。你可能会猜测兔子一直都在那里，或者你可能认为帽子本身就是一张兔子的照片。
- 结果： AI 错过了“动作边界”——即用户与屏幕交互的精确时刻。如果没有清晰地看到那个瞬间，AI 就无法编写代码来实现这种交互。
解决方案：“动作感知式重访”
Video2Code 通过扮演一个知道该在哪里仔细观察的侦探，改变了游戏规则。它不会在无聊的部分浪费时间，而是会缩放到精彩的部分。
第一步：粗略扫描（广角镜头）
首先，AI 快速浏览整个视频，就像你翻阅一本书以寻找有趣章节那样。它现在还不尝试理解每一个细节。相反，它会询问自己：“用户在哪里点击了？他们在哪里输入了？哪里发生了变化？” 它将这些地方标记为“动作关键区域”（Action-Critical Regions）。
第二步：重访（放大镜）
一旦知道了重要的事情发生在何处，AI 就会使用一种特殊的工具来“重访”那些特定的时刻。它会暂停视频，并以高清晰度和慢动作观看那几秒钟。
- 类比： 这就像一位电影剪辑师看到一个角色开门的场景。他不仅仅是看一遍整部电影，而是专门剪辑出开门的那 3 秒钟，放慢速度，仔细研究把手是如何转动的、锁扣是如何弹开的，以及门是如何摆动的。
- 结果： 现在，AI 看到了整个序列：点击前的状态、点击动作本身，以及点击后的状态。
训练过程：从时间线中学习
为了教 AI 完成这项任务，研究人员并没有只是给它看随机视频。他们创建了一个名为 WebVidCoding 的特殊数据集。
- 他们记录了人们使用真实网站的视频。
- 他们添加了一个微小的、不可见的“标记”（比如屏幕底部闪烁的变色条），这个标记会在用户点击或输入时精准闪烁。
- 这给了 AI 一个完美的“时间线”来学习：“当色条变红时，那就是点击。观察点击前和点击后发生了什么。”
研究结果：它奏效了吗？
研究人员将 Video2Code 与其他顶尖 AI 模型进行了对比测试。
- 视觉效果： 所有模型在制作网站“外观”方面都做得很好。
- 功能性： 这是 Video2Code 脱颖而出的地方。虽然其他模型构建的网站看起来很漂亮但无法运行（按钮没有任何反应），但 Video2Code 构建的网站确实能像视频中那样运作。
- “密集度”测试： 这种改进在步骤较多的视频（连续进行点击、滚动、输入）中表现得最为明显。其他模型会被复杂性搞混，但 Video2Code 通过重访关键时刻，理清了其中的逻辑。
总结
Video2Code 是一个让 AI 停止仅仅“瞥一眼”视频的系统。相反，它教会了 AI 识别重要的时刻、放大并仔细研究它们，然后再编写代码。这确保了最终生成的网站不仅看起来像视频，而且其行为也与视频一致，捕捉到了真实用户交互中完整的“状态-动作-状态”的舞蹈。
您所在领域的论文太多了？
获取与您研究关键词匹配的最新论文每日摘要——附技术摘要，使用您的语言。