PixelWeb

PixelWeb是一个包含超过10万个带注释网页的大规模图形用户界面(GUI)数据集。该数据集通过新颖的自动标注方法构建，该方法结合了视觉特征提取和文档对象模型(DOM)结构分析，通过两个核心模块：通道提取和层分析。通道提取确保在遮挡和重叠元素的情况下准确定位GUI元素，通过提取BGRA四通道位图注释实现。层分析使用DOM来确定元素的可视性和堆叠顺序，提供精确的BBox注释。此外，PixelWeb还包括全面的元数据，如元素图像、轮廓和掩码注释。通过三个独立标注者的手动验证，证实了PixelWeb注释的高质量和准确性。在GUI元素检测任务上的实验结果表明，PixelWeb在mAP95指标上的性能比现有数据集高出3-7倍。PixelWeb is a large-scale graphical user interface (GUI) dataset encompassing over 100,000 annotated web pages. It is built using a novel automatic annotation framework that integrates visual feature extraction and document object model (DOM) structure analysis, with two core modules: channel extraction and layer analysis. Channel extraction ensures accurate localization of GUI elements even in scenarios with occluded and overlapping elements, which is accomplished by extracting BGRA four-channel bitmap annotations. Layer analysis leverages the DOM to identify element visibility and stacking order, delivering precise bounding box (BBox) annotations. Furthermore, PixelWeb provides comprehensive metadata including element images, contour annotations and mask annotations. The high quality and annotation accuracy of PixelWeb are validated via manual reviews conducted by three independent annotators. Experimental results for GUI element detection tasks show that PixelWeb outperforms existing datasets by 3 to 7 times when evaluated using the mAP95 metric.

原始信息汇总

PixelWeb数据集概述

基本信息

• 许可证: Apache-2.0
• 任务类别: 目标检测
• 语言: 英语
• 规模: 10K<n<100K

数据集版本

• PixelWeb-1K: 包含1,000个GUI截图，带有掩码、轮廓和边界框标注
• PixelWeb-10K: 包含10,000个GUI截图，带有掩码、轮廓和边界框标注
• PixelWeb-100K: 即将发布

文件结构

• {id}-screenshot.png: 网页截图
• {id}-bbox.json: 网页的边界框标注，格式为[[left,top,width,height],...]
• {id}-contour.json: 网页的轮廓标注，格式为[[[x1,y1,x2,y2,...],...],...]
• {id}-mask.json: 网页的掩码标注，格式为[[element_id,...],...]
• {id}-class.json: 网页的类别标注，格式为[axtree_label,...]

数据提取

使用以下命令解压tar.gz文件： tar -xzvf pixelweb_1k.tar.gz

搜集汇总

数据集介绍

构建方式

PixelWeb数据集的构建采用了创新的自动化标注方法，通过视觉特征提取和DOM结构分析两大核心模块——通道推导和层级分析，实现了对网页GUI元素的精确标注。通道推导模块通过提取BGRA四通道位图标注，确保在遮挡和重叠元素情况下的准确定位；层级分析模块则利用DOM树和z-index信息确定元素的可见性和堆叠顺序，从而生成精确的边界框标注。此外，数据集还包含元素图像、轮廓和掩码标注等丰富元数据，并通过三位独立标注者的手动验证确保了标注的高质量和准确性。

特点

PixelWeb数据集的特点在于其提供了像素级精确的标注信息，包括BGRA四通道位图、层级位置、边界框、轮廓和掩码等。相较于现有数据集，PixelWeb在标注精度和元数据丰富性上具有显著优势，能够有效支持更细粒度的GUI元素检测和生成任务。实验结果表明，基于PixelWeb训练的模型在mAP95指标上比现有数据集提升了3-7倍，展现了其在GUI生成和自动化用户交互等下游任务中的巨大潜力。

使用方法

PixelWeb数据集的使用方法涵盖了多个下游任务，包括GUI元素检测、生成和布局分析等。用户可以通过加载数据集提供的网页截图和标注信息，利用深度学习模型进行训练和评估。数据集中的BGRA位图和层级信息可用于实现更精确的元素定位和语义分割，而掩码和轮廓标注则支持实例分割和形状分析等高级任务。此外，数据集的计算样式信息还可用于GUI元素的代码生成和图像转换，为研究和应用提供了丰富的可能性。

背景与挑战

背景概述

PixelWeb数据集由北京大学的研究团队于2025年推出，是首个包含像素级标注的网页图形用户界面(GUI)数据集。该数据集旨在解决现有GUI数据集中普遍存在的标注不精确问题，包括边界框缺失、重复或无意义标注等现象。通过创新的自动化标注方法，PixelWeb整合了视觉特征提取和文档对象模型(DOM)结构分析两大核心技术模块，提供了包含10万网页样本的高质量标注数据。该数据集不仅包含精确的边界框标注，还首次提供了元素图像、轮廓和掩码等丰富元数据，为GUI建模领域树立了新的基准。其卓越的标注质量已通过三位独立标注者的手动验证，并在GUI元素检测任务中展现出3-7倍于现有数据集的性能优势，对GUI生成、用户交互自动化等下游任务具有重要推动作用。

当前挑战

在领域问题层面，PixelWeb主要应对GUI元素精确定位的挑战。现有浏览器API难以准确获取非矩形和动态渲染组件的坐标，导致边界框尺寸错误和定位偏差；同时由于元素重叠和显示条件变化等因素，传统方法无法可靠判断元素可见性，产生无效标注。在构建过程中，研究团队面临两大技术难题：一是如何通过视觉通道推导实现遮挡和重叠元素的精确定位，这需要解决BGRA四通道位图提取的数学建模问题；二是如何通过层分析确定元素的可见性和堆叠顺序，这涉及DOM树和z-index信息的复杂解析。此外，大规模数据采集还需克服网页动态渲染带来的计算开销，以及保持标注一致性的质量控制问题。

常用场景

经典使用场景

PixelWeb数据集在图形用户界面（GUI）研究中具有广泛的应用场景，特别是在GUI元素检测和自动化标注领域。该数据集通过提供像素级精确的标注信息，包括BGRA四通道位图、元素图像、轮廓和掩码等，显著提升了GUI元素检测任务的性能。其经典使用场景包括训练和评估目标检测模型，如YOLOv12系列模型，以验证其在mAP95等指标上的优越表现。

解决学术问题

PixelWeb数据集解决了现有GUI数据集中普遍存在的标注不准确问题，如缺失、重复或无意义的边界框（BBox）。通过结合视觉特征提取和DOM结构分析，该数据集提供了精确的BBox标注和丰富的元数据标签，有效减少了模型训练中的噪声，提升了模型的可靠性和性能。此外，PixelWeb还为GUI生成和自动化用户交互等下游任务提供了高质量的数据支持。

衍生相关工作

PixelWeb数据集的推出衍生了一系列经典研究工作，特别是在GUI元素检测和生成领域。例如，基于PixelWeb的UIED和Chen et al.的研究通过结合传统计算机视觉和深度学习技术，进一步提升了GUI元素检测的性能。此外，PixelWeb还为BLT、LayoutDM等布局生成任务提供了数据支持，推动了跨领域布局合成的统一化研究。