LongWebBench：评估长时域设置下的结构性和功能性网页生成

# LongWebBench：长视界场景下结构与功能网页生成评估

**来源：** https://arxiv.org/html/2606.17727

易昭1\*，杨振1\*，陈梦攀2，徐明德3，龚尚辉2，刘希俊4，宫继兵2††，唐杰1††  
1 清华大学，2 燕山大学，3 滑铁卢大学，4 北京航空航天大学

###### 摘要

近期，视觉语言模型在从视觉输入生成网页方面展现出令人鼓舞的进展，然而现有评估主要集中于短小、单屏且基本静态的网页。我们提出 **LongWebBench**，一个从结构和功能两个角度评估长视界网页生成的基准。LongWebBench 包含 490 个真实长网页用于结构保真度评估，以及 129 个网页上的 507 个面向目标的交互任务用于功能评估。它采用两种互补协议：一种基于多维视觉语言模型的度量指标，用于评估长距离结构连贯性；一种基于 DOM 增强的智能体流水线，用于端到端功能验证。我们进一步通过人类一致性分析检验了自动评估协议。在单图像和多图像设置下对最先进的开源和专有视觉语言模型的实验表明，结构保真度随网页长度增加而下降，而视觉上合理的生成结果往往无法支持可执行的多步骤交互。这些结果突显了必须在视觉相似性之外评估长网页生成，并将可执行交互作为核心标准。我们的代码和数据可在 https://github.com/zheny2751-dotcom/LongWebBench 获取。

## LongWebBench：长视界场景下结构与功能网页生成评估

易昭1\*，杨振1\*，陈梦攀2，徐明德3，龚尚辉2，刘希俊4，宫继兵2††，唐杰1††  
1 清华大学，2 燕山大学，3 滑铁卢大学，4 北京航空航天大学  
††* 同等贡献††† 通讯作者

## 1 引言

近期，视觉语言模型（Liu 等人，2023；Wang 等人，2024；Yang 等人，2025；Wang 等人，2025；Team 等人，2025a）在从网页截图等视觉输入生成前端代码方面展现出显著的进展。给定一个渲染后的界面，这些模型可以生成在视觉上类似于目标页面的 HTML、CSS 和 JavaScript（Jiang 等人，2025；Liang 等人，2025）。然而，现有工作（Yun 等人，2024；Tan 等人，2025；Niu 等人，2025；Zhao 等人，2025；Wu 等人，2025）主要关注短小、单屏且基本静态的网页，其成功主要取决于局部视觉相似性。这种设置为模型是否能生成保持全局结构并支持可执行用户交互的长网页提供的证据有限。

如图 1 所示，这导致了有限视图网页重建与具有可执行交互的长视界网页生成之间的评估差距。真实世界的网页通常跨越多个屏幕，包含重复组件，需要在不同部分之间保持风格一致性，并支持多步骤用户目标。这些特性带来了超出短静态重建的两点挑战。在结构上，模型必须保持整个网页的页面规模、全局布局、章节层级、视觉样式和信息密度。在功能上，模型必须合成支持用户在浏览器执行环境下的交互逻辑。一个页面可能看起来合理，但仍然无法打开菜单、过滤内容、跨章节导航或提交表单，这表明长视界网页生成应在静态视觉相似性之外进行评估。

尽管人们对网页到代码的评估兴趣日益增长，但现有基准未能共同覆盖这些要求。如表 1 总结所示，先前的基准主要强调短网页的视觉保真度（Yun 等人，2024；Gui 等人，2025；Si 等人，2025；Li 等人，2025）或孤立的交互验证（Xiao 等人，2024）。虽然 WebGen-Bench（Lu 等人，2025）评估了目标驱动的功能，但它不针对截图驱动的长网页生成或长滚动结构一致性。因此，现有基准未能同时评估长网页的全局结构和可执行的多步骤用户交互。

为了填补这一空白，我们提出 **LongWebBench**，一个从结构和功能两个角度评估长视界网页生成的基准。LongWebBench 包含两个互补任务：

- **网页视觉保真度复制（W-VFR）** 评估模型是否能再现长网页的全局结构和视觉组织，使用跨不同类别的 490 个真实长网页。
- **网页功能保真度实现（W-FFR）** 评估模型是否能生成支持面向目标用户交互的可执行网页，使用 129 个网页上的 507 个交互任务。

这两个任务将视觉保真度与功能正确性分离，从而能够对网页生成进行更具诊断性的评估。LongWebBench 进一步提供了相应的评估协议：一种用于长距离结构连贯性的多维视觉语言模型度量指标，以及一种在浏览器环境中执行生成的网页以验证用户目标完成的 DOM 增强智能体流水线。对于结构评估，我们额外引入基于 DINO 的特征相似性作为局部视觉样式一致性的辅助信号。该基准支持单图像和多图像输入设置，使我们能够分析模型在不同长页面输入约束下的行为。

我们在单图像和多图像输入设置下评估了 LongWebBench 上最先进的开源和专有视觉语言模型。结果表明，长视界网页生成仍然具有挑战性：结构保真度通常随网页长度增加而下降，而视觉上合理的生成结果往往无法支持可执行的多步骤交互。这些发现突显了必须在静态视觉相似性之外评估网页生成，并将可执行交互作为核心标准。

我们的贡献总结如下：

- 我们提出 **LongWebBench**，一个用于长视界网页生成的结构与功能评估基准。
- 我们构建了两个互补任务：包含 490 个真实长网页的 W-VFR 和包含 129 个网页上 507 个面向目标任务的 W-FFR。
- 我们设计了用于长距离结构保真度和端到端功能验证的评估协议。
- 我们在单图像和多图像设置下评估了最先进的视觉语言模型，揭示了结构一致性和可执行功能交互方面的挑战。

## 2 LongWebBench

我们介绍 LongWebBench 的设计，这是一个从结构和功能两个角度评估长视界网页生成的基准。我们首先定义长网页和两个评估任务，然后描述 W-VFR 和 W-FFR 的构建，最后分析数据集覆盖度和复杂性。

### 2.1 任务定义

#### 长网页。
我们将长网页定义为在固定 1920×1080 浏览器分辨率下，垂直长度超过三个视口高度的网页，要求模型跨多个屏幕聚合视觉信息。

#### 网页视觉保真度复制（W-VFR）。
给定目标长网页截图，W-VFR 评估模型是否能保留目标视觉结构，包括页面规模、全局布局、章节层级、视觉样式和信息密度。不考虑功能正确性，交互元素被视为静态视觉组件。

#### 网页功能保真度实现（W-FFR）。
给定目标网页截图和一组用户目标任务，W-FFR 评估模型是否能生成支持指定用户目标的、可执行的网页。截图提供组件和状态上下文，而评估侧重于指定的操作在浏览器执行下是否会导致预期的结果。不要求视觉相似性。

### 2.2 数据构建

#### W-VFR：长网页收集。
我们从具有多样化长格式结构的真实世界网页构建 W-VFR。我们定义了七种结构类别：信息文章、参考与文档、产品与服务页面、社区与讨论页面、多媒体与交互页面、政府与机构页面，以及数据与资源聚合页面。对于每个类别，标注员从有代表性的公共网站收集候选 URL，以覆盖多样的布局模式、内容密度和章节组织。然后，我们采用多阶段筛选流水线来获得高质量的长网页快照。候选页面使用 Playwright 在固定 1920×1080 浏览器分辨率下渲染，并过滤掉以下页面：无法渲染、不满足长度要求、需要身份验证或个性化、包含过多覆盖层或敏感个人信息，或涉及无限滚动。我们使用渲染截图上的感知哈希去除近似重复项，并将每个剩余页面捕获为稳定的渲染快照，将长页面生成与外部后端服务和不可控的个性化分离。所有截图均经过人工验证，以确保正确渲染且没有捕获伪影。经过过滤和验证，W-VFR 包含 490 个长网页，每个类别 70 个网页。更多细节见附录 A.1。

#### W-FFR：功能任务构建。
W-VFR 围绕视觉结构组织，而 W-FFR 则围绕用户目标组织。我们首先基于现代网页提供的主要服务定义了 13 个功能类别，包括学术搜索、数据可视化、教育、旅行、政府服务、新闻、金融、电子商务、社区、招聘、开发者文档、房地产和 SaaS。候选网页使用与 W-VFR 相同的渲染和质量控制流水线进行收集和筛选，确保每个选定的页面提供有意义的、前端可观察的交互。对于每个选定的网页，我们构建 3-4 个以用户为中心的任务，反映在该页面上的现实交互目标。我们遵循草稿-审查-重写-验证的工作流程：首先按照预定义的任务设计指南创建任务草稿，然后标注员基于渲染后的网页重写、验证并最终确定任务。在验证过程中，标注员检查每个任务是否清晰、可行、不冗余、可在渲染后的网页中执行，并且基于前端可观察的状态变化而非外部后端服务。不明确、依赖后端、冗余或不可行的任务被删除或修订。此过程产生了 129 个网页和 507 个功能任务，每个任务作为一个独立的评估实例。更多细节见附录 A.2。

### 2.3 数据分析

#### 类别覆盖度。
LongWebBench 涵盖了多样的网页结构和用户目标。对于 W-VFR，数据集在七种结构网页类别上保持平衡，每个类别 70 个网页。对于 W-FFR，网页被组织成 13 个面向用户目标的功能类别，覆盖了广泛的现实世界服务目标。如图 2 所示，LongWebBench 在视觉结构和功能场景方面都提供了广泛的覆盖。

#### 长网页复杂性。
为了描述 W-VFR 的长视界特性，我们在固定 1920×1080 分辨率下测量了覆盖每个网页所需的垂直视口数量。如图 3(a) 所示，网页呈现长尾分布。大多数网页跨越 3-10 个视口，而超过 10 个视口的页面约占数据集的 31%，有些甚至延伸至 30 个视口。这种分布支持对不同程度的长距离视觉结构和布局复杂性的评估。

#### 交互复杂性。
对于 W-FFR，我们报告了完成每个任务所需的显式用户操作数量。如图 3(b) 所示，大多数任务需要中到长的交互序列：52.27% 需要 4-6 步，20.71% 需要至少 7 步，27.02% 需要 1-3 步。这种分布反映了基准对协调的多步骤交互的强调，而非孤立的 UI 操作。

图 3：数据集复杂性分析。
(a) W-VFR 中垂直视口数量的分布。
(b) W-FFR 中交互步骤的分布。

### 2.4 基准设计原则

LongWebBench 旨在解耦在网页到代码评估中经常被混淆的两种能力：长距离视觉-结构重建和可执行交互实现。W-VFR 评估模型是否能在扩展的页面上下文中保持连贯的结构，包括重复的章节、跨章节一致性和长距离布局组织。