MBZUAI/Web2Code
收藏Hugging Face2024-10-23 更新2024-06-29 收录
下载链接：
https://hf-mirror.com/datasets/MBZUAI/Web2Code
下载链接
链接失效反馈官方服务：
资源简介：
Web2Code数据集是一个用于视觉问答任务的数据集，主要包含网页图像与代码对的生成、现有网页代码生成数据的改进、新的文本问答对的创建以及现有网页理解数据的改进。数据集的语言为英语，大小在100K到1M之间。数据集的构建涉及使用GPT-3.5和GPT-4进行数据生成和改进。数据集的字段包括ID、图像和对话内容。数据集的许可证为CC BY 4.0，仅限研究使用。
The Web2Code dataset is designed for visual question answering tasks, primarily involving the generation of webpage image-code pairs, refinement of existing webpage code generation data, creation of new text question-answer pairs, and improvement of existing webpage understanding data. The dataset is in English and ranges in size from 100K to 1M. The construction of the dataset involves data generation and refinement using GPT-3.5 and GPT-4. The dataset fields include ID, image, and conversations. The dataset is licensed under CC BY 4.0 and is intended for research use only.
提供机构：
MBZUAI
原始信息汇总
Web2Code 数据集概述
数据集详情
- 任务类别: 视觉问答 (Visual Question Answering)
- 语言: 英语 (en)
- 标签: 代码 (code)
- 数据规模: 100K<n<1M
数据集构建过程
- 创建新的网页图像-代码对数据: 使用GPT-3.5生成高质量的HTML网页-代码对，并转换为指令跟随数据。
- 改进现有的网页代码生成数据: 将现有数据集转换为类似LLaVA数据的指令跟随格式，用于训练多模态大语言模型（MLLMs）。
- 创建新的文本问答对数据: 利用GPT-3.5生成的新数据创建新的问答对数据集，用于网页理解。
- 改进现有的网页理解数据: 使用GPT-4改进WebSRC问答数据，以提高其质量。
数据文件
- 配置名称: default
- 数据文件:
- 分割: train
- 路径: "Web2Code_samples.json"
图像文件夹结构
Web2Code_image ├── games │ ├── 01 │ ├── ... │ └── 09 ├── jobs │ ├── 03 │ ├── ... │ └── 13 ...
数据字段
json { id: 99720969-917D-4843-BB69-D09AF953F258, image: pix2code/99720969-917D-4843-BB69-D09AF953F258.png, conversations: [ {from: human, value: <image> Use the webpage screenshot to generate HTML code as a replication of its structure. Manifest the code following Bootstrap layout.}, {from: gpt, value: <html> <header> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1" name="viewport"/> <link crossorigin="anonymous" ...} ] }
许可证
- 数据许可证: CC BY 4.0
- 使用和许可证声明: 数据仅用于研究目的，模型训练后不得用于研究以外的用途。
搜集汇总
数据集介绍
构建方式
在网页生成与视觉问答交叉领域，Web2Code数据集的构建体现了多源数据融合与智能增强的先进理念。其构建过程涵盖四个核心环节：首先，通过GPT-3.5依据CodeAlpaca提示生成高质量的网页图像与HTML代码对，并转化为指令跟随数据；其次，将现有网页代码生成数据集重构为类似LLaVA的指令跟随格式，以适配多模态大语言模型的训练需求；再次，基于前述生成的网页数据，利用GPT-3.5创建全新的文本问答对，专门用于网页理解任务；最后，借助GPT-4对现有WebSRC问答数据进行精炼与质量提升，确保数据的一致性与可靠性。这一系统化流程确保了数据在规模与质量上的双重优势。
特点
Web2Code数据集在网页到代码转换任务中展现出鲜明的多模态与结构化特征。数据集规模庞大，训练集包含超过82万条数据与81万张图像，评估集亦涵盖近6000条数据，为模型训练提供了充足的样本支持。其数据字段设计精良，每条记录均包含唯一标识符、网页截图路径以及以对话形式组织的指令与代码响应，完美模拟了人机交互场景。图像按主题目录分层存储，如游戏、招聘等类别，便于管理与检索。数据遵循严格的非商业研究许可，确保了学术使用的合规性与安全性。
使用方法
在网页生成与多模态学习研究中，Web2Code数据集为训练与评估提供了标准化范例。研究人员可通过加载HuggingFace平台上的数据集配置，直接访问训练与评估分割，数据以JSON格式存储，包含图像路径与对话序列。典型使用场景涉及视觉问答任务，模型需根据输入的网页截图，生成符合Bootstrap布局的HTML代码作为响应。数据预处理时，需注意图像与对话文本的配对解析，并遵循CC BY 4.0许可限制，确保仅用于非商业研究目的。评估阶段可利用独立的评估集验证模型在代码生成准确性与布局还原度上的性能。
背景与挑战
背景概述
在人工智能与网页设计交叉领域，MBZUAI/Web2Code数据集于2024年由MBZUAI研究团队构建，标志着视觉-语言多模态学习模型在网页代码生成与理解任务上的重要进展。该数据集旨在解决从网页截图到结构化HTML代码的自动生成问题，同时涵盖网页内容的理解与问答，核心研究聚焦于提升模型对视觉布局与语义逻辑的跨模态对齐能力。通过整合大规模合成数据与现有资源的精炼，Web2Code为前端开发自动化、无障碍网页访问及智能设计助手等应用提供了关键数据支撑，推动了多模态大语言模型在具象化编程场景中的实用化进程。
当前挑战
Web2Code数据集所应对的领域挑战在于网页代码生成的复杂性与精确性要求，网页布局需同时兼顾视觉美感、响应式设计及代码可维护性，模型必须从单一图像中推断层级结构、样式语义及交互逻辑，这对跨模态表征学习提出了极高要求。在构建过程中，挑战主要体现在数据合成与质量把控：一方面，依赖GPT-3.5等大语言模型生成高质量HTML代码需克服布局合理性验证与代码规范一致性问题；另一方面，将现有数据集如WebSRC转化为指令跟随格式时，需通过GPT-4进行数据清洗与对齐，以确保问答对的准确性与指令的泛化性，避免噪声干扰模型训练效果。
常用场景
经典使用场景
在网页设计与前端开发领域，Web2Code数据集为视觉问答任务提供了关键支持。该数据集通过结合网页截图与对应的HTML代码，构建了大规模的图像-代码配对样本，使得多模态大语言模型能够学习从视觉界面到结构化代码的映射关系。经典使用场景涉及训练模型根据网页截图自动生成符合Bootstrap布局的HTML代码，这一过程不仅模拟了前端工程师的视觉还原工作，还促进了模型对网页元素空间布局与语义结构的理解。
解决学术问题
Web2Code数据集有效解决了多模态代码生成中的若干学术挑战。它通过高质量的指令调优数据，缓解了视觉与代码模态对齐的困难，提升了模型在跨模态理解上的泛化能力。该数据集支持研究网页理解与代码生成的联合建模，为探索视觉引导的程序合成提供了实验基础，推动了自动化前端开发工具的理论进展，并在人机交互与软件工程交叉领域产生了深远影响。
衍生相关工作
围绕Web2Code数据集，已衍生出多项经典研究工作。这些工作主要集中在扩展多模态大语言模型在网页生成任务上的能力，例如结合强化学习优化代码生成质量，或引入更细粒度的视觉注意力机制以提升布局还原精度。部分研究进一步探索了将生成代码适配到不同前端框架的技术路径，推动了从静态截图到动态交互网页的生成演进，为后续的端到端网页构建系统奠定了方法论基础。
以上内容由遇见数据集搜集并总结生成
