Design2Code：前端工程自动化还有多远？

快速链接： [数据集] [模型检查点] [项目页面] [论文]

概述

这是由斯坦福NLP实验室SALT组维护的Design2Code项目的官方仓库。在该仓库中，我们提供了：

• 用于将视觉设计（截图）转换为代码实现任务的 Design2Code 基准数据集，包含来自C4的484个真实世界网页（示例如下）。

• Design2Code-Hard 数据集，是从Github Pages收集的80个额外困难测试用例的子集，旨在挑战当前最先进视觉语言模型在Web UI生成方面的能力。

• 用于运行所有自动评估的代码。

• 用于在GPT-4O、Gemini Pro Vision和Claude 3.5系列模型上进行多模态提示实验的代码。

• 用于微调并运行我们开源的Design2Code-18B模型推理的代码。

环境搭建

所有代码均在Python 3.11环境下测试通过。我们建议使用虚拟环境来管理依赖项。

克隆本仓库并安装必要的库：

pip install -e .

截取屏幕和运行评估还需要安装浏览器：

playwright install

如果上述命令无法执行，请尝试：

python3 -m playwright install

数据与预测

Design2Code

您可以从这个 Google Drive链接 下载完整的Design2Code测试集，或访问Huggingface数据集的页面。

解压到testset_final/目录后，文件夹应包含484对截图（xx.png）和对应的HTML代码（xx.html）。我们还附带了HTML代码中使用的占位图片rick.jpg。

Design2Code-HARD

您可以从这个链接下载完整的Design2Code-HARD测试集，或者访问Huggingface数据集的页面。

下载的文件夹包含80对截图（xx.png）和对应的HTML代码（xx.html）。我们同样附带了HTML代码中使用的占位图片rick.jpg。

截取屏幕

如果您想自行截取网页的屏幕截图，可以运行以下命令：

cd Design2Code
python3 data_utils/screenshot.py 

请记得将脚本中的文件名或目录替换为您自己的内容。

模型预测

为了便于进一步分析，我们还发布了模型在基准测试集上的所有预测结果：

• GPT-4V（包括直接提示、文本增强提示和自我修正提示）
• Gemini Pro Vision（包括直接提示、文本增强提示和自我修正提示）
• WebSight VLM-8B（Huggingface）
• Design2Code-18B（我们的模型）
• 自动评估结果
• 人工评估——模型两两比较
• 人工评估——直接评分

运行提示实验

要运行提示实验，首先将您的OpenAI或Google Gemini API密钥放入根目录下的api_keys.json文件中。文件格式如下：

{
    "organization_id": "",
    "openai_key": "",
    "openai_endpoint": "",
    "gemini_api_key": ""
}

然后，要运行GPT-4V实验，执行：

bash prompting/gpt4v.sh

要运行Gemini Pro Vision实验，执行：

bash prompting/gemini.sh

要运行Claude 3.5 Sonnet实验，执行：

bash prompting/claude3-5.sh

这些bash脚本包含了运行直接提示、文本增强提示和自我修正提示的脚本。所有提示语都写在prompting/gpt4v.py和prompting/gemini.py中，您可以修改它们以运行自己的提示或开发更智能的提示策略。我们欢迎对该部分项目的任何贡献！

另外请注意，我们目前是从Azure访问OpenAI API的，如果您直接调用OpenAI API，可能需要做一些小的调整。

在CogAgent-18B上运行推理

我们还提供了在基础模型CogAgent-18B上运行推理的代码：

python3 prompting/cogagent.py

请注意，该模型并未针对Design2Code任务进行微调，因此性能非常差，往往甚至无法生成有效的HTML代码。

在Design2Code-18B上运行推理

微调后的模型基于CogAgent，请按照说明安装必要的库。

您可以通过以下命令运行推理：

python3 CogVLM/finetune_demo/inference_design2code.py

微调Design2Code-18B

微调脚本为finetune_cogagent_lora_design2code.sh。

运行自动评估

您可以使用以下命令来运行自动评估：

python3 metrics/multi_processing_eval.py

请注意，您需要在 metrics/multi_processing_eval.py 文件中（从第54行开始）指定存储模型预测结果的目录，如下所示：

test_dirs = {
        "gpt4v_direct_prompting": "../predictions_final/gpt4v_direct_prompting",
        "gemini_direct_prompting": "../predictions_final/gemini_direct_prompting"
}

其中，我们假设字典中的每个目录都包含对应模型或方法的预测结果（即，每个目录应包含针对完整测试集的484个预测HTML文件，或者您自行采样的子集）。脚本将为每个目录中的所有示例计算所有自动指标的得分，并将结果存储在一个字典中，格式如下：

{
    "gpt4v_direct_prompting": {
        "2.html": [0.1, 0.2, ...],
        "6.html": [0.3, 0.4, ...],
        ...
    },
    "gemini_direct_prompting": {
        "2.html": [0.5, 0.6, ...],
        "6.html": [0.7, 0.8, ...],
        ...
    }
}

其中，每个列表包含了细粒度的分解指标。脚本最后还会打印出每个模型或方法的平均得分，格式如下：

gpt4v_direct_prompting

块匹配： 0.6240771561959276
文本： 0.9769471025300969
位置： 0.7787072741618328
颜色： 0.7068853534416764
CLIP： 0.8924754858016968
--------------------------------

gemini_direct_prompting

块匹配： 0.6697374012874602
文本： 0.9731735845969769
位置： 0.6502285758036523
颜色： 0.8531304981602478
CLIP： 0.8571878373622894
--------------------------------

这些指标也是我们在论文中报告的内容。默认情况下，我们支持多进程加速评估；您也可以通过将第40行的 multiprocessing = False 来手动关闭多进程功能。

供您参考，对完整测试集进行评估（针对每个模型/方法）可能需要长达1小时。

其他功能

• data_utils 包含了我们用于从C4数据集中构建测试数据的各种过滤和处理脚本。

许可证

本项目的数据、代码和模型检查点仅限于研究用途。请勿将其用于任何恶意目的。

该基准测试基于C4数据集构建，采用ODC署名许可协议（ODC-By）。

致谢

我们的测试集是从C4中筛选得到的；训练样本则来自HuggingFaceM4的Websight。我们的模型是在CogAgent的基础上进行微调的。感谢他们出色的工作！

如果您觉得我们的工作有所帮助，请考虑引用我们的论文：

@misc{si2024design2code,
    title={Design2Code: 我们距离前端工程自动化还有多远？},
    author={Chenglei Si、Yanzhe Zhang、Zhengyuan Yang、Ruibo Liu、Diyi Yang},
    year={2024},
    eprint={2403.03163},
    archivePrefix={arXiv},
    primaryClass={cs.CL}
}

我们欢迎对该项目的各种贡献（欢迎提交PR）。如有任何问题，请随时提出Issue或发送邮件给我们。

Design2Code 快速上手指南

Design2Code 是由斯坦福 NLP SALT 实验室开源的项目，旨在评估和实现将视觉设计（截图）自动转换为前端代码（HTML）的任务。本指南帮助开发者快速搭建环境并运行基准测试或模型推理。

环境准备

• 操作系统: Linux / macOS (Windows 需使用 WSL)
• Python 版本: 推荐 Python 3.11
• 依赖管理: 建议使用虚拟环境 (venv 或 conda)
• 浏览器驱动: 需要安装 Playwright 以支持截图和自动化评估

安装步骤

1. 克隆仓库并进入目录

   git clone <repo_url>
   cd Design2Code
   

2. 创建并激活虚拟环境

   python3 -m venv venv
   source venv/bin/activate  # Windows: venv\Scripts\activate
   

3. 安装项目依赖

   pip install -e .
   

4. 安装浏览器驱动 (Playwright)

   playwright install
   

   如果上述命令失败，请尝试：

   python3 -m playwright install
   

基本使用

1. 获取数据集

你可以从 Hugging Face 或 Google Drive 下载测试集。下载后解压到 testset_final/ 目录，结构应包含成对的截图 (xx.png) 和参考 HTML 代码 (xx.html)。

• Design2Code (484 个样本): Hugging Face
• Design2Code-Hard (80 个高难样本): Hugging Face

2. 运行多模态提示实验 (GPT-4V / Gemini / Claude)

首先在项目根目录创建 api_keys.json 文件并填入你的 API Key：

{
    "organization_id": "",
    "openai_key": "",
    "openai_endpoint": "",
    "gemini_api_key": ""
}

然后运行对应的脚本启动实验（包含直接提示、文本增强提示和自我修正提示）：

# 运行 GPT-4V 实验
bash prompting/gpt4v.sh

# 运行 Gemini Pro Vision 实验
bash prompting/gemini.sh

# 运行 Claude 3.5 Sonnet 实验
bash prompting/claude3-5.sh

3. 运行开源模型推理 (Design2Code-18B)

该模型基于 CogAgent 微调而成。确保已按照 CogAgent 说明 安装相关库。

运行推理命令：

python3 CogVLM/finetune_demo/inference_design2code.py

4. 运行自动评估

将模型生成的 HTML 文件整理到指定目录后，运行以下脚本计算各项指标（Block-Match, Text, Position, Color, CLIP 等）：

python3 metrics/multi_processing_eval.py

注意：需在 metrics/multi_processing_eval.py 第 54 行左右配置预测结果目录路径 (test_dirs)。