AtomBlock-WebUI

AtomBlock-WebUI是一个合成的网页用户界面数据集，包含约9,700张全页面网页截图，带有14种UI元素类别的YOLO格式边界框标注。这些标注通过LLM增强的HTML渲染和无头浏览器截图捕获程序化对齐生成，确保了与视觉输出的严格几何对齐。数据集注入了真实世界的图像，以减少合成布局与真实网页环境之间的视觉分布差距。数据规模包括9,683张图像和1,321,234个边界框，分为训练集（80%）、验证集（10%）和测试集（10%）。数据集适用于对象检测任务，特别是网页UI元素的识别和分类。数据集发布在CC BY-NC-SA 4.0许可下，仅限非商业研究使用。

原始信息汇总

AtomBlock-WebUI 数据集概述

数据集基本信息

• 数据集名称：AtomBlock-WebUI
• 许可证：CC BY-NC-SA 4.0（仅限非商业研究用途）
• 任务类别：目标检测
• 主要语言：英语
• 标签：agent, ui, gui, object-detection, web, webui, yolo
• 数据规模：1K < n < 10K
• 配置名称：preview

数据集内容与规模

• 总图像数量：9,683 张
• 总边界框数量：1,321,234 个
• 数据分割：
  • 训练集：7,746 张（80.0%）
  • 验证集：968 张（10.0%）
  • 测试集：969 张（10.0%）
• 图像分辨率：可变全页高度，标准化宽度。
• 数据集大小：308,288,831 字节
• 下载大小：303,645,823 字节

数据特征

• file_name：字符串
• viz_image：图像
• raw_image：图像
• html：字符串
• html_with_images：字符串
• labels：字符串

数据概述

AtomBlock-WebUI 是一个合成的 Web UI 数据集，包含通过程序对齐的元素标注。该数据集通过 LLM 增强的 HTML 渲染和无头浏览器截图捕获生成。它包含约 9,700 张全页网页截图，并为 14 个 UI 元素类别提供了 YOLO 格式的边界框标注。边界框通过 Playwright 直接从渲染的 DOM 中提取，确保了与视觉输出的严格几何对齐。合成 HTML 中注入了真实世界的图像，以弥合合成布局与真实 Web 环境之间的视觉分布差距。

数据来源

• Multimodal-Mind2Web：用作结构提示以指导 HTML 布局生成的原始网页截图。
• CC3M-wds：通过基于 FAISS 标题的语义检索注入到 HTML <img> 标签中的真实世界图像。
• Qwen3.6-plus：用于生成嵌入了 yolo-* 类属性的语义 HTML 的大型语言模型。

目录结构

AtomBlock-WebUI/ ├── html/ # 9,683 个由 LLM 生成的原始 HTML 文件 ├── html_with_images/ # 9,432 个注入 CC3M 图像后的 HTML 文件 ├── images/ # 9,432 个从 CC3M 注入的真实图像 ├── labels/ # 9,683 个 YOLO 格式的标注文件 (.txt) ├── png_raw/ # 9,683 个全页原始截图 (PNG) ├── png_viz_raw/ # 9,683 个带有边界框叠加的可视化截图 └── yolo-dataset/ # 即用型 YOLO 数据集分割 ├── data.yaml # 数据集配置（14 个类别） ├── train/ ├── val/ └── test/

标注格式

采用 YOLO 格式。每个 .txt 文件为每个检测到的元素包含一行：

<class_id> <center_x> <center_y> <width> <height>

所有坐标均归一化到 [0, 1]，相对于特定图像的尺寸。

标注类别（14 类）

ID	名称	描述
0	button	可点击的按钮元素
1	link	超链接/锚文本
2	input	输入字段（文本、搜索等）
3	image	图像元素
4	icon	图标/小型图形符号
5	checkbox	复选框输入元素
6	radio	单选按钮元素
7	select	下拉/选择菜单
8	block-nav	导航块/导航栏
9	block-sidebar	侧边栏块
10	block-footer	页脚块
11	block-form	表单容器块
12	block-table	表格容器块
13	block	通用结构块

类别分布

ID	名称	数量	百分比
0	button	113,089	8.56%
1	link	626,321	47.40%
2	input	18,520	1.40%
3	image	184,878	13.99%
4	icon	185,215	14.02%
5	checkbox	42,887	3.25%
6	radio	4,431	0.34%
7	select	20,179	1.53%
8	block-nav	11,424	0.86%
9	block-sidebar	3,712	0.28%
10	block-footer	9,058	0.69%
11	block-form	2,109	0.16%
12	block-table	697	0.05%
13	block	98,714	7.47%

生成流程

1. HTML 生成：对于每个 Mind2Web 截图提示，Qwen3.6-plus 生成相应的语义 HTML 布局，显式地将目标元素注入 yolo-* CSS 类。
2. 图像注入：CC3M 图像通过语义匹配（经由 FAISS + sentence-transformers）到 LLM 生成的 data-caption 属性，并注入到 HTML <img> 标签中。
3. 渲染与提取：Playwright 渲染完整的 HTML 页面（捕获原始可滚动高度）。元素坐标通过 JavaScript DOM 查询（getBoundingClientRect）以编程方式提取。
4. 标签格式化：绝对像素坐标被转换为归一化的 YOLO 格式。

使用示例

使用 Ultralytics YOLO 的训练脚本示例： python from ultralytics import YOLO model = YOLO(yolo26m.pt) model.train(data=/path/to/yolo-dataset/data.yaml, epochs=80, mosaic=0)

局限性

作为一个合成生成的数据集，AtomBlock-WebUI 存在以下限制：

• 语义脱节：虽然 FAISS 检索注入了上下文相关的图像，但周围文本与注入的 CC3M 图像之间偶尔可能出现不匹配。
• 分布偏移：LLM 生成的 HTML 布局虽然在结构上合理，但可能缺乏边缘情况生产网站中存在的 DOM 复杂性（例如，深度嵌套的通用 <div> 包装器）或特定的视觉杂乱。

许可与使用条款

• 本合成数据集根据 CC BY-NC-SA 4.0 许可证发布，仅用于非商业研究目的。
• 使用本数据集需遵守 Mind2Web 的限制（受负责任 AI 许可证 RAIL 约束），包括严格禁止将此数据用于恶意自动化、网络钓鱼或欺骗性生成。
• 注入的图像来源于 Conceptual Captions 3M。结构配对“按原样”提供，不提供任何保证。

引用

如果研究中使用此数据集，请引用： bibtex @misc{atomblock-webui, title={AtomBlock-WebUI: A Synthetic Web UI Dataset with Pixel-Perfect Annotations}, author={Zhihao Nan}, year={2026}, howpublished={url{https://huggingface.co/datasets/ZhihaoNan/AtomBlock-WebUI}} }

搜集汇总

数据集介绍

构建方式

在网页用户界面自动化与智能体交互研究领域，数据标注的几何精度至关重要。AtomBlock-WebUI数据集的构建采用了一种创新的程序化合成流程。该流程以Multimodal-Mind2Web数据集的真实网页截图作为结构提示，驱动大型语言模型生成语义化的HTML布局，并在其中显式嵌入带有特定CSS类别的目标元素。随后，通过基于FAISS的语义检索，从CC3M数据集中选取上下文相关的真实图像注入到HTML的图片标签内，以弥合合成布局与真实网页环境之间的视觉分布差异。最后，利用Playwright无头浏览器渲染完整页面并截取屏幕截图，同时通过JavaScript直接查询DOM元素的边界矩形，程序化地提取出与视觉输出严格对齐的边界框坐标，并转换为YOLO格式的归一化标注。

特点

该数据集的核心特征在于其合成数据的高质量与标注的像素级精确性。它包含了约9,700张全网页截图，并提供了超过130万个针对14类UI元素的YOLO格式边界框标注。这些类别不仅涵盖了按钮、输入框、链接等基础交互组件，还包含了导航栏、侧边栏、页脚等语义化的区块级地标元素。与依赖人工标注或启发式DOM解析的方法不同，本数据集的标注直接从渲染后的DOM中提取，确保了标注框与视觉元素在几何上的严格对齐。此外，通过注入来自CC3M的真实世界图像，数据集有效增强了合成网页的视觉真实感，为模型训练提供了更接近实际应用场景的数据分布。

使用方法

对于旨在开发或评估网页界面元素检测模型的研究者与工程师而言，AtomBlock-WebUI数据集提供了即用型的资源。数据集已按照8:1:1的比例划分为训练集、验证集和测试集，并预置了符合YOLO格式标准的目录结构，包含必要的`data.yaml`配置文件。用户可直接使用Ultralytics YOLO等主流框架加载配置路径进行模型训练与验证。数据集中提供的原始HTML文件、注入图像后的HTML、原始截图、可视化标注图以及纯文本标注文件，也为进行更深入的网页结构理解、多模态分析或数据生成流程的复现与研究提供了完整的素材基础。

背景与挑战

背景概述

在智能体与自动化测试领域，精准的用户界面（UI）元素检测是构建高效网页理解与交互系统的基石。AtomBlock-WebUI数据集应运而生，由研究人员Zhihao Nan于2026年创建并发布。该数据集旨在通过合成生成与程序化标注相结合的方式，解决传统网页UI数据集依赖人工标注或启发式解析所导致的几何对齐不精确、标注成本高昂等核心问题。其创新性地利用大语言模型增强的HTML渲染与无头浏览器截图捕获技术，生成了约9,700张包含14类UI元素YOLO格式边界框标注的全网页截图，涵盖了从基础组件到语义块级地标的广泛类别。该数据集的推出，为网页目标检测、UI自动化及智能体交互研究提供了高质量、大规模且标注精准的基准资源，显著推动了合成数据在计算机视觉与Web智能交叉领域中的应用深度。

当前挑战

AtomBlock-WebUI致力于应对网页用户界面元素检测这一核心领域问题的挑战，其核心在于克服真实网页环境中UI元素种类繁多、布局复杂多变、以及视觉外观差异显著所带来的模型泛化难题。传统方法依赖于人工标注，存在效率低下与主观偏差；而基于DOM解析的启发式方法则常因渲染与代码的几何错位导致标注不准。在数据集构建过程中，研究团队面临合成数据与真实分布对齐的严峻挑战。具体而言，如何确保大语言模型生成的HTML布局既结构合理又能反映真实网页的视觉复杂性，以及如何通过语义检索精准注入真实图像以弥合合成与真实网页的视觉鸿沟，是构建流程中的关键难点。此外，程序化地从渲染DOM中提取严格对齐的边界框坐标，并处理可变高度的全页面截图，也对技术实现提出了精确性要求。

常用场景

经典使用场景

在用户界面自动化与智能交互领域，AtomBlock-WebUI数据集为训练视觉基础模型提供了高质量的合成数据源。其核心应用场景在于网页界面元素的精准检测与定位，通过约9700张全页面网页截图及YOLO格式的边界框标注，覆盖了按钮、输入框、导航栏等14类UI组件。该数据集采用程序化对齐的标注方法，利用无头浏览器渲染与坐标提取，确保了标注框与视觉元素的几何一致性，从而为模型学习网页布局结构提供了可靠的基础。

实际应用

在实际应用层面，AtomBlock-WebUI为网页自动化测试、无障碍访问辅助以及智能交互代理的开发提供了数据支撑。基于该数据集训练的检测模型能够准确识别网页中的功能元素，辅助自动化脚本执行点击、输入等操作，提升测试效率。同时，模型对导航栏、侧边栏等语义块级元素的识别能力，有助于构建更智能的网页浏览助手，为视障用户提供结构化的界面描述，增强数字包容性。

衍生相关工作

围绕AtomBlock-WebUI数据集，衍生了一系列专注于网页界面理解与自动化任务的研究工作。例如，基于其YOLO格式标注开发的端到端元素检测模型，被应用于网页交互代理的视觉感知模块。同时，该数据集的合成生成流程——结合LLM生成HTML与FAISS语义图像检索——启发了后续研究采用类似方法扩增界面数据集，以解决真实网页数据分布不平衡问题。这些工作共同推动了合成数据在界面智能领域的应用范式。