anonymouscodee/webcode2m

WebCode2M是一个用于从网页设计生成代码的真实世界数据集。它包含以下特征：网页截图、网页元素的布局信息（包括大小、位置和层次结构）、网页代码文本（包括HTML/CSS代码）、截图比例、网页文本的主要语言（支持20种语言）、HTML和CSS代码的标记数量、由论文中提出的神经评分器获得的评分以及图像的哈希值。需要注意的是，尽管经过过滤，数据集仍可能包含少量不适当内容，如露骨材料或暴力内容，用户应谨慎使用。

WebCode2M is a real-world dataset for code generation from webpage designs. It includes the following features: webpage screenshots, layout information of webpage elements (including size, position, and hierarchy), webpage code text (including HTML/CSS code), screenshot scale, the main language of the webpage text (supporting 20 languages), token counts of HTML and CSS code, a score obtained by the neural scorer proposed in the paper, and the hash code of the image. Note that, despite filtering efforts, the dataset may still contain a small amount of inappropriate content, such as explicit material or violence, and users should exercise caution.

搜集汇总

数据集介绍

构建方式

在网页设计到代码生成的跨模态任务中，高质量数据集的匮乏长期制约着模型性能的提升。WebCode2M数据集应运而生，其构建过程严谨而系统：首先通过大规模网络爬虫采集真实网页截图与对应的HTML/CSS源码，随后利用视觉解析算法提取页面元素的边界框（Bbox），以编码尺寸、位置与层级结构等布局信息。为保障数据质量，研究者引入基于神经网络的评分器对样本进行筛选，并借助高精度语言检测模型标注页面文本的主语言类别，最终形成包含图像、布局、代码、缩放比例、语言标签、词元计数及评分等多元特征的百万级样本库。

特点

该数据集的核心特色在于其真实性与多维标注的深度融合。相较于合成数据集，WebCode2M直接来源于互联网真实页面，覆盖英语、中文、法语等20种主流语言，天然具备场景多样性与噪声鲁棒性。每个样本不仅提供网页截图与完整HTML/CSS代码，更包含元素级边界框的精确坐标，使模型能够同时学习视觉布局与代码结构的对应关系。尤为独特的是，数据集附带基于GPT-2分词器统计的CSS与HTML词元计数，以及通过神经评分器计算的样本质量分数，为研究者提供了数据筛选与模型评估的量化依据。

使用方法

WebCode2M以Parquet格式存储于HuggingFace平台，用户可通过`datasets`库的`load_dataset`函数直接加载训练集，其默认配置自动指向`data/*.parquet`路径下的全部文件。在应用层面，该数据集主要服务于图像到代码的生成任务：研究者可将网页截图与边界框作为视觉输入，以HTML/CSS代码为监督目标，训练端到端的代码生成模型。此外，语言标签与词元计数可辅助构建多语言模型或进行代码长度预测，而评分字段则支持基于质量阈值的样本过滤。数据集的CC-BY-4.0许可协议允许广泛的学术与商业使用，但需注意原始网络内容可能包含的少量敏感信息。

背景与挑战

背景概述

WebCode2M数据集由anonymouscodee团队于近期创建，旨在弥合视觉设计与代码生成之间的鸿沟，聚焦于从网页截图自动生成HTML/CSS代码这一前沿研究问题。该数据集包含超过百万级的网页截图与对应代码对，并提供了边界框布局信息、语言标签及代码复杂度等丰富元数据，为多模态代码生成领域提供了大规模、真实场景下的训练与评估基准。其发布对推动视觉理解与程序合成交叉研究具有重要影响，尤其为自动化前端开发、设计原型转代码等应用奠定了数据基础。

当前挑战

WebCode2M所解决的领域核心挑战在于从非结构化的视觉输入（网页截图）中精确还原结构化的代码逻辑，这要求模型同时理解空间布局、视觉元素层级与代码语法之间的复杂映射关系。在构建过程中，数据采集面临互联网来源的噪声与多样性问题，尽管经过去重与过滤，仍可能存在少量不当内容；此外，为每个样本生成准确的边界框标注、语言检测以及代码质量评分，需要设计可靠的自动化流程，并在大规模数据上保持标注一致性，这些技术细节构成了构建该数据集的主要困难。

常用场景

经典使用场景

WebCode2M数据集旨在弥合视觉设计与代码生成之间的鸿沟，其经典使用场景聚焦于从网页截图到HTML/CSS代码的端到端生成任务。研究者可借助该数据集训练模型，使其同时理解网页的视觉布局（通过截图与边界框信息）与结构语义（通过代码文本），从而自动将设计稿转化为可运行的网页代码。这一场景在自动化前端开发、设计原型快速实现以及低代码平台中具有广泛需求，为计算机视觉与自然语言处理的交叉领域提供了标准化的评测基准。

实际应用

在实际应用中，WebCode2M驱动的模型可被集成到设计协作工具中，帮助设计师将静态原型自动转换为可交互的网页代码，大幅缩短从设计到开发的迭代周期。电商平台可利用该技术快速生成商品展示页面的初始代码，降低前端开发的人力成本。此外，该数据集还可赋能教育领域，用于自动批改学生提交的网页设计作业，或为无障碍化工具提供从视觉界面到语义化HTML的转换能力，助力视障用户获取网页内容的结构信息。

衍生相关工作

WebCode2M的发布催生了多项衍生研究，包括基于扩散模型的代码布局生成、利用边界框信息增强的视觉Transformer架构，以及融合多语言编码器的跨语言网页代码生成器。部分工作进一步探索了从截图到完整网页的端到端生成，引入对比学习以对齐视觉与代码特征空间。此外，该数据集还被用作预训练语料，用于微调大语言模型在网页代码补全与布局理解上的能力，推动了如Design2Code等后续基准的建立，形成了从数据构建到模型评估的完整研究链条。