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} }
数据集概述
数据集名称
- 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
