AwesomeREA.org

2025 · 会议论文

WebCode2M：面向网页设计稿代码生成的真实世界数据集

WebCode2M: A Real-World Dataset for Code Generation from Webpage Designs

Yi Gui; Zhen Li; Yao Wan; Yemin Shi; Hongyu Zhang; Bohua Chen; Yi Su; Dongping Chen; Siyuan Wu; Xing Zhou; Wenbin Jiang; Hai Jin; Xiangliang Zhang

WebCode2M 将约 256 万张真实网页截图与净化后的 HTML/CSS 代码及元素边界框布局树配对。数据取样自 Common Crawl 快照，经清洗（移除脚本、元数据与隐藏元素，并将样式合并为单一样式块）后用 Playwright 渲染，再由基于 10,000 条人工标注样本训练的神经评分器筛选。论文以 Pix2Struct-1.3B 微调出基线模型 WebCoder，提出衡量 DOM 结构召回率的 TreeBLEU 指标，并在短、中、长三个各含 256 个网页的测试子集上评测专用、开源及商业多模态模型。

研究范围与局限

任务是根据设计图生成静态 HTML/CSS。净化过程会移除脚本，因此不重建交互、客户端行为或后端逻辑；输出以视觉得分、CLIP 相似度和 TreeBLEU 评判，而非功能等价性。论文报告，所有被评测模型都无法准确还原图像元素，且目标代码越长得分越低。768 个测试网页取自高分候选并经人工检查；评分器准确率约为 90%，训练集中仍有低质量样本，作者也提醒爬取内容可能仍含不当材料。商业模型仅以模型家族命名，约三分之一的 Gemini 测试样例因 recitation 错误失败，因此相关比较只反映当时情况。数据集卡片声明的 CC BY 4.0 许可不能清除所爬取网页代码、文本或图片的权利。

与本合集的关联

补充带布局树和结构指标的大规模真实设计稿到代码训练语料，与本节中规模较小的真实网页基准及合成网站重建基准互补。

发表与复核详情

发表载体
WWW 2025
发表状态
会议论文
出版／提交日期
2025 年 4 月 22 日
日期依据
ACM 文章页面与 ACM 提交的 Crossref 元数据均将出版日期记为 2025-04-22；本条目不以 4 月 28 日至 5 月 2 日的会议日期作为出版日期。
arXiv 首次提交
2024 年 4 月 9 日
arXiv
2404.06369
已复核的 arXiv 版本
v2
DOI
10.1145/3696410.3714889

arXiv v1（2024-04-09）的标题为“VISION2UI: A Real-World Dataset with Layout for Code Generation from UI Designs”；所审阅的 v2（2025-02-22，备注“WWW'25”）采用最终标题并载有 DOI。ACM 页面与 Crossref 将 Bohua Chen 列于 Yi Su 之前，而 arXiv v2 将 Yi Su 列前；本条目遵循出版方顺序。项目页面链接论文、naturalcc 代码目录及 Hugging Face 数据集。所审阅的数据集卡片修订版 f53cd4a（2025-03-05）声明 CC BY 4.0，说明该数据集也称 Vision2UI，提醒可能含不当内容，并指向一个净化版本；其数据目录约 1.1 TB。naturalcc 仓库声明 MIT 许可。其 webcode2m README 仍使用早期名称：UICoder 模型与 vision2ui_test 测试集，后者现已重定向至 webcode2m_test。环境文件固定 Python 3.10、PyTorch 2.1.2 与 Transformers 4.33.1。本次未下载或运行数据集、模型或代码。

来源复核于

本合集仅做来源复核，未重新运行论文实验。请通过原始论文或 BibTeX 引用原作者。

一手来源

  1. https://dl.acm.org/doi/10.1145/3696410.3714889
  2. https://api.crossref.org/works/10.1145/3696410.3714889
  3. https://arxiv.org/abs/2404.06369
  4. https://arxiv.org/pdf/2404.06369v2
  5. https://webcode2m.github.io/
  6. https://huggingface.co/datasets/xcodemind/webcode2m/blob/f53cd4a9317364e32a6fc7d99dc50761fe54715f/README.md
  7. examples/webcode2m/README.MD GitHub · CGCL-codes/naturalcc · 修订 5f84062
  8. examples/webcode2m/environment.yml GitHub · CGCL-codes/naturalcc · 修订 5f84062
  9. examples/webcode2m/requirements.txt GitHub · CGCL-codes/naturalcc · 修订 5f84062
  10. LICENSE GitHub · CGCL-codes/naturalcc · 修订 5f84062