Web2Code: A Large-scale Webpage-to-Code Dataset and Evaluation Framework for Multimodal LLMs

📄 arXiv: 2406.20098v2 📥 PDF

作者: Sukmin Yun, Haokun Lin, Rusiru Thushara, Mohammad Qazim Bhat, Yongxin Wang, Zutao Jiang, Mingkai Deng, Jinhong Wang, Tianhua Tao, Junbo Li, Haonan Li, Preslav Nakov, Timothy Baldwin, Zhengzhong Liu, Eric P. Xing, Xiaodan Liang, Zhiqiang Shen

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

发布日期: 2024-06-28 (更新: 2024-11-17)

备注: NeurIPS 2024 Datasets and Benchmarks Camera-ready Version. Website at https://mbzuai-llm.github.io/webpage2code/

🔗 代码/项目: GITHUB

💡 一句话要点

提出Web2Code数据集与评估框架，提升多模态LLM网页理解与代码生成能力

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

关键词: 多模态大语言模型 网页理解 HTML代码生成 Web2Code数据集 指令微调

📋 核心要点

  1. 现有的多模态大语言模型在理解网页截图并生成对应HTML代码方面表现不佳，这限制了其在Web相关任务中的应用。
  2. 论文提出Web2Code数据集和评估框架，通过指令微调和评估，提升MLLM在网页理解和HTML代码生成方面的能力。
  3. 实验表明，Web2Code数据集不仅对网页到代码生成任务有益，而且在通用视觉领域也表现出提升效果。

📝 摘要（中文）

本文提出了Web2Code，一个用于指令微调的大规模网页到代码数据集，以及一个评估多模态大型语言模型（MLLM）在网页理解和HTML代码翻译能力方面的评估框架。为了构建数据集，我们利用预训练的LLM来增强现有的网页到代码数据集，并生成多样化的新网页渲染图像。具体来说，输入是网页图像和指令，而输出是网页的HTML代码。此外，我们还在响应中包含了关于网页内容的各种自然语言问答对，以实现对网页内容的更全面理解。为了评估模型在这些任务中的性能，我们开发了一个评估框架，用于测试MLLM在网页理解和网页到代码生成方面的能力。大量实验表明，我们提出的数据集不仅对我们提出的任务有益，而且对一般的视觉领域也有益。我们希望我们的工作将有助于开发适用于基于Web的内容生成和任务自动化的通用MLLM。

🔬 方法详解

问题定义：现有MLLM在理解网页截图并生成对应HTML代码方面存在明显不足。这阻碍了MLLM在Web内容生成和任务自动化领域的应用。现有网页到代码的数据集规模有限，且缺乏对网页内容深层理解的训练。

核心思路：论文的核心思路是构建一个大规模、高质量的网页到代码数据集，并设计相应的评估框架，以提升MLLM在网页理解和代码生成方面的能力。通过指令微调，使MLLM能够更好地理解网页图像，并生成准确的HTML代码。

技术框架：Web2Code框架包含数据集构建和模型评估两个主要部分。数据集构建包括：1) 利用预训练LLM增强现有数据集；2) 生成新的多样化网页图像。模型评估部分则侧重于评估MLLM在网页理解和网页到代码生成方面的能力。整个流程旨在训练和评估MLLM在Web相关任务中的性能。

关键创新：该论文的关键创新在于构建了一个大规模的Web2Code数据集，该数据集不仅包含网页图像和对应的HTML代码，还包含了关于网页内容的自然语言问答对，从而增强了MLLM对网页内容的理解能力。此外，提出的评估框架能够全面评估MLLM在网页理解和代码生成方面的性能。

关键设计：在数据集构建方面，论文利用预训练LLM生成多样化的网页内容，并将其渲染成图像。在模型训练方面，采用指令微调的方式，使MLLM能够根据指令生成相应的HTML代码。在评估方面，设计了多种指标来评估MLLM在网页理解和代码生成方面的准确性和完整性。具体参数设置、损失函数和网络结构等细节在论文中未详细说明，属于未知信息。

🖼️ 关键图片

fig_0
fig_1
fig_2

📊 实验亮点

实验结果表明，使用Web2Code数据集进行训练可以显著提升MLLM在网页理解和HTML代码生成方面的性能。具体性能数据和对比基线在摘要中未提及，属于未知信息。但论文强调该数据集对通用视觉领域也有益处，暗示了其泛化能力。

🎯 应用场景

该研究成果可应用于Web内容生成、网页自动化测试、网页信息提取等领域。通过提升MLLM对网页的理解和生成能力，可以实现更智能的Web应用开发和自动化流程，例如自动生成网页模板、自动提取网页信息等，具有广泛的应用前景。

📄 摘要（原文）

Multimodal large language models (MLLMs) have shown impressive success across modalities such as image, video, and audio in a variety of understanding and generation tasks. However, current MLLMs are surprisingly poor at understanding webpage screenshots and generating their corresponding HTML code. To address this problem, we propose $\texttt{Web2Code}$, a benchmark consisting of a new large-scale webpage-to-code dataset for instruction tuning and an evaluation framework for the webpage understanding and HTML code translation abilities of MLLMs. For dataset construction, we leverage pretrained LLMs to enhance existing webpage-to-code datasets as well as generate a diverse pool of new webpages rendered into images. Specifically, the inputs are webpage images and instructions, while the responses are the webpage's HTML code. We further include diverse natural language QA pairs about the webpage content in the responses to enable a more comprehensive understanding of the web content. To evaluate model performance in these tasks, we develop an evaluation framework for testing MLLMs' abilities in webpage understanding and web-to-code generation. Extensive experiments show that our proposed dataset is beneficial not only to our proposed tasks but also in the general visual domain. We hope our work will contribute to the development of general MLLMs suitable for web-based content generation and task automation. Our data and code are available at https://github.com/MBZUAI-LLM/web2code.