HuggingFaceM4/WebSight
收藏Hugging Face2024-03-26 更新2024-03-04 收录
下载链接：
https://hf-mirror.com/datasets/HuggingFaceM4/WebSight
下载链接
链接失效反馈官方服务：
资源简介：
---
language:
- en
license: cc-by-4.0
size_categories:
- 1M<n<10M
pretty_name: WebSight
dataset_info:
- config_name: v0.2
features:
- name: image
dtype: image
- name: text
dtype: string
- name: llm_generated_idea
dtype: string
splits:
- name: train
num_bytes: 368943620718.125
num_examples: 1922671
download_size: 144861710051
dataset_size: 368943620718.125
- config_name: v0.1
features:
- name: image
dtype: image
- name: text
dtype: string
splits:
- name: train
num_bytes: 35386660486.65
num_examples: 822987
download_size: 31394170440
dataset_size: 35386660486.65
configs:
- config_name: v0.2
default: true
data_files:
- split: train
path: v0.2/train-*
- config_name: v0.1
data_files:
- split: train
path: data/train-*
tags:
- code
- synthetic
---
# Dataset Card for WebSight
## Dataset Description
WebSight is a large synthetic dataset containing HTML/CSS codes representing synthetically generated English websites, each accompanied by a corresponding screenshot.
This dataset serves as a valuable resource for tasks such as generating UI codes from a screenshot.
It comes in two versions:
- v0.1: Websites are coded with HTML + CSS. They do not include real images.
- v0.2: Websites are coded with HTML + Tailwind CSS. They do include real images.
Essentially, here are the improvements in version v0.2, compared to version v0.1:
- Websites include real images (related to the context of the website!!)
- Usage of Tailwind CSS instead of traditional CSS
- Contains 2x more examples
- Contains more tables
- Better resolution for the screenshots
- Presence of a column indicating the LLM-generated idea to create the websites
<details>
<summary>Details for WebSight-v0.1 (HTML + CSS)</summary>
## Data Fields
An example of a sample appears as follows:
```
{
'images': PIL.Image,
'text': '<html>\n<style>\n{css}</style>\n{body}\n</html>',
}
```
where `css` is the CSS code, and `body` is the body of the HTML code.
In other words, the CSS code is embedded directly within the HTML code, facilitating the straightforward training of a model.
## Data Splits
There is only one split, `train`, that contains 822,987 images and codes.
## Dataset Creation
This dataset was created using [Mistral-7B-v0.1](https://huggingface.co/mistralai/Mistral-7B-v0.1) to generate random website ideas with the prompt
```
Generate diverse website layout ideas for different companies, each with a unique design element.
Examples include: a car company site with a left column, a webpage footer with a centered logo.
Explore variations in colors, positions, and company fields.
Don't give any explanations or recognition that you have understood the request,
just give the list of 10 ideas, with a line break between each.
```
which were then passed to [Deepseek-Coder-33b-Instruct](https://huggingface.co/deepseek-ai/deepseek-coder-33b-instruct) with the prompt
```
Create a very SIMPLE and SHORT website with the following elements: {idea}
Be creative with the design, size, position of the elements, columns, etc...
Don't give any explanation, just the content of the HTML code `index.html` starting with `<!DOCTYPE html>`,
followed by the CSS code `styles.css` starting with `/* Global Styles */`.
Write real and short sentences for the paragraphs, don't use Lorem ipsum.
When you want to display an image, don't use <img> in the HTML, always display a colored rectangle instead.
```
Following these steps, the HTML and CSS codes were extracted from the outputs of Deepseek-Coder and formatted into the structure `'<html>\n<style>\n{css}</style>\n{body}\n</html>'`.
</details>
<details>
<summary>Details for WebSight-v0.2 (HTML + Tailwind CSS)</summary>
## Data Fields
An example of a sample appears as follows:
```
{
'images': PIL.Image,
'text': '<html>\n<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">\n{body}\n</html>',
}
```
where `body` is the body of the HTML code, containing directly the Tailwind CSS code and facilitating the straightforward training of a model.
## Data Splits
There is only one split, `train`, that contains TO DO images and codes.
## Dataset Creation
TO DO.
For now, the creation of the dataset is documented in the technical report.
</details>
## Terms of Use
By using the dataset, you agree to comply with the original licenses of the source content as well as the dataset license (CC-BY-4.0). Additionally, if you use this dataset to train a Machine Learning model, you agree to disclose your use of the dataset when releasing the model or an ML application using the model.
### Licensing Information
License CC-BY-4.0.
### Citation Information
If you are using this dataset, please cite our [technical report](https://arxiv.org/abs/2403.09029)
```
@misc{laurençon2024unlocking,
title={Unlocking the conversion of Web Screenshots into HTML Code with the WebSight Dataset},
author={Hugo Laurençon and Léo Tronchon and Victor Sanh},
year={2024},
eprint={2403.09029},
archivePrefix={arXiv},
primaryClass={cs.HC}
}
```
语言：
- en
许可证：cc-by-4.0
样本规模类别：1M<n<10M
可读数据集名称：WebSight
数据集详情：
- 配置版本v0.2：
特征：
- 字段名：image，数据类型：图像
- 字段名：text，数据类型：字符串
- 字段名：llm_generated_idea，数据类型：字符串
数据分割：
- 分割集名称：train，数据字节数：368943620718.125，样本数量：1922671
下载大小：144861710051
数据集总大小：368943620718.125
- 配置版本v0.1：
特征：
- 字段名：image，数据类型：图像
- 字段名：text，数据类型：字符串
数据分割：
- 分割集名称：train，数据字节数：35386660486.65，样本数量：822987
下载大小：31394170440
数据集总大小：35386660486.65
配置项：
- 配置版本v0.2：默认启用，数据文件：
- 分割集：train，路径：v0.2/train-*
- 配置版本v0.1：数据文件：
- 分割集：train，路径：data/train-*
数据集标签：
- code
- synthetic
# WebSight 数据集卡片
## 数据集描述
WebSight是一款大型合成数据集，内含合成生成的英语网站对应的HTML/CSS代码，且每个代码均附带对应的网页截图。
该数据集可作为从网页截图生成用户界面代码等任务的宝贵资源。
本数据集包含两个版本：
- v0.1：网站采用HTML + CSS编写，未包含真实图像。
- v0.2：网站采用HTML + Tailwind CSS编写，包含真实图像。
相较于v0.1版本，v0.2版本的改进点如下：
- 新增与网站上下文相关的真实图像
- 采用Tailwind CSS替代传统CSS
- 样本量提升至原版本的2倍
- 包含更多表格元素
- 网页截图分辨率更高
- 新增一列记录用于生成该网站的大语言模型（LLM，Large Language Model）生成创意
<details>
<summary>WebSight-v0.1详情（HTML + CSS）</summary>
## 数据字段
样本示例格式如下：
{
'images': PIL.Image,
'text': '<html>
<style>
{css}</style>
{body}
</html>',
}
其中`css`为CSS代码，`body`为HTML代码的主体部分。换言之，CSS代码直接内嵌于HTML代码中，可简化模型训练流程。
## 数据分割
该数据集仅包含一个分割集——train（训练集），内含822,987组图像与代码样本。
## 数据集构建流程
本数据集通过以下流程构建：首先使用[Mistral-7B-v0.1](https://huggingface.co/mistralai/Mistral-7B-v0.1) 生成随机网站创意，所用提示词为：
Generate diverse website layout ideas for different companies, each with a unique design element.
Examples include: a car company site with a left column, a webpage footer with a centered logo.
Explore variations in colors, positions, and company fields.
Don't give any explanations or recognition that you have understood the request,
just give the list of 10 ideas, with a line break between each.
随后将生成的创意输入至[Deepseek-Coder-33b-Instruct](https://huggingface.co/deepseek-ai/deepseek-coder-33b-instruct)，所用提示词为：
Create a very SIMPLE and SHORT website with the following elements: {idea}
Be creative with the design, size, position of the elements, columns, etc...
Don't give any explanation, just the content of the HTML code `index.html` starting with `<!DOCTYPE html>`,
followed by the CSS code `styles.css` starting with `/* Global Styles */`.
Write real and short sentences for the paragraphs, don't use Lorem ipsum.
When you want to display an image, don't use <img> in the HTML, always display a colored rectangle instead.
按照上述流程，从Deepseek-Coder的输出中提取HTML与CSS代码，并将其格式化为`'<html>
<style>
{css}</style>
{body}
</html>'`的结构。
</details>
<details>
<summary>WebSight-v0.2详情（HTML + Tailwind CSS）</summary>
## 数据字段
样本示例格式如下：
{
'images': PIL.Image,
'text': '<html>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
{body}
</html>',
}
其中`body`为HTML代码的主体部分，直接内嵌Tailwind CSS代码，可简化模型训练流程。
## 数据分割
该数据集仅包含一个分割集——train（训练集），样本数量待补充。
## 数据集构建流程
构建流程待补充。目前该数据集的构建细节已在技术报告中说明。
</details>
## 使用条款
使用本数据集即表示您同意遵守源内容的原始许可证以及本数据集的许可证（CC-BY-4.0）。此外，若您使用本数据集训练机器学习模型，在发布该模型或基于该模型开发的机器学习应用时，需公开说明本数据集的使用情况。
### 许可证信息
许可证：CC-BY-4.0
### 引用信息
若您使用本数据集，请引用我们的[技术报告](https://arxiv.org/abs/2403.09029)：
@misc{laurençon2024unlocking,
title={Unlocking the conversion of Web Screenshots into HTML Code with the WebSight Dataset},
author={Hugo Laurençon and Léo Tronchon and Victor Sanh},
year={2024},
eprint={2403.09029},
archivePrefix={arXiv},
primaryClass={cs.HC}
}
提供机构：
HuggingFaceM4
原始信息汇总
数据集概述
数据集名称
- WebSight
数据集版本
- v0.1: 使用HTML + CSS编码，不包含真实图像。
- v0.2: 使用HTML + Tailwind CSS编码，包含真实图像。
数据集特征
- v0.1:
- image: 图像类型
- text: 字符串类型
- v0.2:
- image: 图像类型
- text: 字符串类型
- llm_generated_idea: 字符串类型
数据集大小
- v0.1:
- 训练集大小: 35386660486.65字节
- 训练集样本数: 822987
- 下载大小: 31394170440字节
- v0.2:
- 训练集大小: 368943620718.125字节
- 训练集样本数: 1922671
- 下载大小: 144861710051字节
数据集配置
- v0.1:
- 数据文件路径:
data/train-*
- 数据文件路径:
- v0.2:
- 默认配置: 是
- 数据文件路径:
v0.2/train-*
数据集标签
- code
- synthetic
许可证
- CC-BY-4.0
搜集汇总
数据集介绍
构建方式
WebSight数据集的构建过程融合了先进的生成模型技术。首先，利用Mistral-7B-v0.1模型生成多样化的网站布局创意，这些创意随后被传递给Deepseek-Coder-33b-Instruct模型，以生成具体的HTML和CSS代码。在v0.2版本中，引入了Tailwind CSS和真实图像，进一步丰富了数据集的内容和复杂性。通过这一系列步骤，数据集不仅包含了丰富的视觉和代码信息，还确保了数据的高质量和多样性。
使用方法
WebSight数据集的使用方法多样，主要适用于需要从视觉内容生成代码的机器学习任务。用户可以通过加载数据集中的图像和文本数据，训练模型以实现从截图到代码的转换。具体操作包括加载数据集的训练分割，提取图像和对应的HTML/CSS代码，然后使用这些数据进行模型训练。数据集的结构设计使得模型训练过程简便直接，适合各种基于视觉和代码生成的研究与应用。
背景与挑战
背景概述
WebSight数据集是由Hugo Laurençon、Léo Tronchon和Victor Sanh等研究人员于2024年创建的，旨在解决从网页截图生成HTML代码的核心研究问题。该数据集包含大量合成生成的英语网站的HTML/CSS代码及其对应的截图，特别适用于从截图生成用户界面代码的任务。WebSight数据集分为两个版本：v0.1使用传统的HTML和CSS，而v0.2则引入了Tailwind CSS并包含真实图像，显著提升了数据集的多样性和实用性。这一数据集的创建不仅丰富了合成数据的应用场景，还为机器学习模型在网页设计和开发领域的应用提供了宝贵的资源。
当前挑战
WebSight数据集在构建过程中面临多项挑战。首先，生成高质量且多样化的网页设计需要复杂的算法支持，如Mistral-7B-v0.1和Deepseek-Coder-33b-Instruct，这些算法在生成过程中需确保代码的准确性和设计的创新性。其次，数据集的版本更新带来了技术上的挑战，如从传统CSS向Tailwind CSS的迁移，以及如何在保持数据集规模的同时提升截图的分辨率和内容的丰富性。此外，确保数据集的版权和使用条款的合规性也是一项重要挑战，特别是在涉及真实图像和开源代码的情况下，需严格遵守CC-BY-4.0许可协议。
常用场景
经典使用场景
WebSight数据集在生成用户界面代码（UI代码）方面展现了其经典应用。通过提供合成生成的HTML/CSS代码及其对应的网页截图，该数据集支持从图像到代码的转换任务。这一特性使得研究人员和开发者能够训练模型，以实现从视觉设计到实际代码的自动化生成，极大地简化了前端开发流程。
解决学术问题
WebSight数据集解决了在计算机视觉和自然语言处理领域中，如何将视觉信息转换为可执行代码的学术难题。通过提供丰富的HTML/CSS代码与网页截图对，该数据集为研究者提供了一个标准化的基准，用于评估和改进图像到代码转换模型的性能。这不仅推动了相关算法的发展，还为跨模态信息处理提供了新的研究方向。
实际应用
在实际应用中，WebSight数据集被广泛用于前端开发自动化工具的开发。通过训练模型，开发者可以快速将设计稿转换为可用的网页代码，从而显著提高开发效率。此外，该数据集还可用于设计工具的智能化改进，帮助设计师在设计阶段即能预览最终的网页效果，减少设计与开发之间的沟通成本。
数据集最近研究
最新研究方向
在Web开发与人工智能交叉领域，WebSight数据集的最新研究方向主要集中在利用合成数据提升网页代码生成的准确性与效率。该数据集通过结合HTML、CSS及Tailwind CSS代码与对应的网页截图，为研究者提供了一个丰富的资源库，用于训练和评估从视觉信息到代码生成的模型。当前的研究热点包括如何优化大型语言模型（LLM）以更精确地生成网页代码，以及探索多模态学习方法，以增强模型对网页设计元素的理解和再现能力。这些研究不仅推动了网页自动化生成技术的发展，也为提升用户体验和网页设计的多样性提供了新的可能性。
以上内容由遇见数据集搜集并总结生成
