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

📄 arXiv: 2404.06369v2 📥 PDF

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

分类: cs.CV, cs.AI, cs.SE

发布日期: 2024-04-09 (更新: 2025-02-22)

备注: WWW'25

DOI: 10.1145/3696410.3714889

💡 一句话要点

提出WebCode2M数据集以解决网页设计代码生成问题

🎯 匹配领域: 支柱九：具身大模型 (Embodied Foundation Models)

关键词: 网页设计 代码生成 多模态大语言模型 数据集 视觉变换器 TreeBLEU 前端开发 自动化工具

📋 核心要点

  1. 现有多模态大语言模型在网页代码生成方面表现不足，主要由于缺乏高质量的真实世界数据集。
  2. 本文提出WebCode2M数据集，包含256万实例，提供设计图像及相应的网页代码，旨在提升代码生成的准确性和效率。
  3. 通过基于视觉变换器的WebCoder模型进行基准测试，结果显示该数据集显著提升了代码生成能力，验证了其有效性。

📝 摘要（中文）

自动从网页设计生成网页代码可以显著减轻前端开发者的工作负担。尽管最近的多模态大语言模型（MLLMs）在这一领域展现出良好潜力，但现有模型受限于缺乏高质量、大规模的真实世界数据集，导致自动网页代码生成性能不足。为填补这一空白，本文引入了WebCode2M数据集，包含256万实例，每个实例包含设计图像及相应的网页代码和布局细节。该数据集来源于真实的网络资源，确保了质量，并通过评分模型过滤掉美学缺陷或其他不完整元素。我们还提出了基于视觉变换器（ViT）的基线模型WebCoder，并引入新的评估指标TreeBLEU来测量结构层次的召回率。基准结果表明，WebCode2M显著提升了MLLMs从网页设计生成代码的能力，证实了其有效性和未来在前端设计工具中的应用潜力。

🔬 方法详解

问题定义：本文旨在解决现有多模态大语言模型在网页设计代码生成中的不足，主要是由于缺乏高质量、大规模的真实世界数据集，导致生成性能不佳。

核心思路：提出WebCode2M数据集，包含丰富的设计图像和相应的网页代码，利用评分模型确保数据质量，从而提升模型的生成能力。

技术框架：整体架构包括数据收集、数据清洗、模型训练和评估四个主要阶段。数据收集阶段从真实网页资源中获取实例，数据清洗阶段通过评分模型过滤不合格数据，模型训练阶段使用WebCoder进行训练，评估阶段采用TreeBLEU指标进行性能评估。

关键创新：WebCode2M数据集是一个大规模、真实世界的数据集，填补了现有数据集的空白，且引入了TreeBLEU作为新的评估指标，能够更好地衡量生成代码的结构层次。

关键设计：在数据清洗中，采用评分模型对实例进行打分，确保数据的美学和完整性；在模型训练中，使用视觉变换器（ViT）架构，优化超参数以提高生成效果。通过这些设计，确保了数据集的高质量和模型的有效性。

🖼️ 关键图片

fig_0
fig_1
fig_2

📊 实验亮点

实验结果表明，基于WebCode2M数据集的WebCoder模型在网页代码生成任务中显著优于现有基线，具体性能提升幅度达到XX%（具体数据待补充），验证了数据集的有效性和实用性。

🎯 应用场景

WebCode2M数据集的潜在应用领域包括前端开发工具、网页设计自动化以及教育领域的编程学习。通过提供高质量的数据集，该研究可以帮助开发更智能的代码生成工具，提升开发效率，降低人力成本，推动前端开发的自动化进程。

📄 摘要（原文）

Automatically generating webpage code from webpage designs can significantly reduce the workload of front-end developers, and recent Multimodal Large Language Models (MLLMs) have shown promising potential in this area. However, our investigation reveals that most existing MLLMs are constrained by the absence of high-quality, large-scale, real-world datasets, resulting in inadequate performance in automated webpage code generation. To fill this gap, this paper introduces WebCode2M, a new dataset comprising 2.56 million instances, each containing a design image along with the corresponding webpage code and layout details. Sourced from real-world web resources, WebCode2M offers a rich and valuable dataset for webpage code generation across a variety of applications. The dataset quality is ensured by a scoring model that filters out instances with aesthetic deficiencies or other incomplete elements. To validate the effectiveness of WebCode2M, we introduce a baseline model based on the Vision Transformer (ViT), named WebCoder, and establish a benchmark for fair comparison. Additionally, we introduce a new metric, TreeBLEU, to measure the structural hierarchy recall. The benchmarking results demonstrate that our dataset significantly improves the ability of MLLMs to generate code from webpage designs, confirming its effectiveness and usability for future applications in front-end design tools. Finally, we highlight several practical challenges introduced by our dataset, calling for further research. The code and dataset are publicly available at our project homepage: https://webcode2m.github.io.