Sketch2Code

Sketch2Code数据集旨在评估视觉语言模型（VLM）将手绘草图转换为网页设计原型的能力。该数据集包含731个手绘草图与484个真实网页的配对，这些网页来自Design2Code数据集。每个示例包括一个源HTML文件和一个渲染的网页截图，以及由人类标注者绘制的1到3个草图。数据集的结构是将HTML文件和图像分别存储在不同的目录中，并且网页中的所有图像都被替换为一个名为'rick.jpg'的蓝色占位图像。该数据集可下载，也可以通过Huggingface hub在线访问。

原始信息汇总

Sketch2Code 数据集概述

数据集简介

• 名称: Sketch2Code
• 许可证: odc-by
• 标签: code
• 描述: Sketch2Code 数据集包含 731 个人类绘制的草图与 484 个真实世界的网页配对，用于基准测试视觉语言模型（VLM）将基本草图转换为网页设计原型的能力。

数据结构

• 网页数据:
  • 每个网页包含一个 HTML 文件和一个渲染的网页截图。
  • 文件存储在 webpages/ 目录下，命名格式为 {webpage_id}.html 和 {webpage_id}.png。
• 草图数据:
  • 每个网页对应 1 到 3 个由人类标注者绘制的草图。
  • 文件存储在 sketches/ 目录下，命名格式为 {webpage_id}_{sketch_id}.png。
• 图像占位符:
  • 所有网页中的图像被替换为一个蓝色的占位图像 rick.jpg。

数据下载

• 完整数据集下载: 通过 此链接 下载。
• 解压后结构: 所有 731 个草图和 484 个网页截图及 HTML 文件将出现在 sketch2code_dataset_v1_cleaned/ 目录下。

示例使用

• 在线访问: 可以通过 huggingface_hub 在线访问数据。
• 示例脚本: 提供了一个 Python 脚本，用于通过 huggingface_hub 访问数据并使用 Llava-1.6-8b 生成预测。

搜集汇总

数据集介绍

构建方式

Sketch2Code数据集的构建基于Design2Code数据集，包含了731幅手绘草图与484个真实网页的配对。这些网页的HTML代码与渲染后的截图分别存储在`webpages/`目录下，而手绘草图则由人工标注者绘制，每幅草图与对应的网页ID相关联，存储在`sketches/`目录中。所有网页中的图片均被替换为统一的蓝色占位图，以确保数据的一致性。

特点

Sketch2Code数据集的核心特点在于其专注于视觉语言模型（VLMs）的评估，特别是将基础草图转化为网页设计原型的能力。数据集中的每对数据均包含HTML代码、网页截图以及1至3幅手绘草图，为模型提供了丰富的多模态输入。此外，数据集的构建方式确保了数据的多样性和真实性，涵盖了广泛的网页设计风格和布局。

使用方法

用户可以通过Hugging Face平台直接下载完整的Sketch2Code数据集，解压后即可访问所有草图和网页数据。此外，数据集还支持通过`huggingface_hub`库在线访问，用户可以使用预训练的Llava模型生成网页设计代码。示例代码展示了如何加载数据集、调用模型并生成HTML代码，适用于网页设计自动化的研究和开发。

背景与挑战

背景概述

Sketch2Code数据集由SALT-NLP团队于近期发布，旨在推动视觉语言模型（VLMs）在将手绘草图转化为网页设计原型方面的研究。该数据集包含731张人类绘制的草图与484个真实网页的配对，这些网页源自Design2Code数据集。通过提供草图与网页的对应关系，Sketch2Code为研究者提供了一个基准，用于评估模型在理解草图并生成相应网页代码方面的能力。该数据集的发布标志着网页设计自动化领域的一个重要进展，为开发更智能的设计工具奠定了基础。

当前挑战

Sketch2Code数据集面临的挑战主要体现在两个方面。首先，草图到代码的转换任务本身具有复杂性，草图通常包含模糊的视觉信息，模型需要准确理解草图中的布局、元素类型及其相互关系，并生成符合设计意图的HTML代码。其次，数据集的构建过程中，如何确保草图与网页的对应关系准确且具有代表性，是一个关键问题。此外，草图的多样性与网页设计的复杂性也对数据集的标注与验证提出了较高要求，确保数据质量的同时，还需兼顾数据的广泛性与实用性。

常用场景

经典使用场景

Sketch2Code数据集在视觉语言模型（VLMs）的研究中扮演着重要角色，尤其是在将手绘草图转化为网页设计原型的任务中。通过提供731张手绘草图和484个真实网页的配对数据，该数据集为研究者提供了一个标准化的基准，用于评估和优化模型在草图到代码转换任务中的表现。

衍生相关工作

基于Sketch2Code数据集，研究者们开发了一系列相关的工作，如改进的视觉语言模型、草图到代码的自动化工具以及网页设计辅助系统。这些工作不仅在学术界引起了广泛关注，还在工业界得到了实际应用，进一步推动了网页设计自动化技术的发展。

数据集最近研究

最新研究方向

在视觉语言模型（VLMs）领域，Sketch2Code数据集为研究者提供了一个独特的平台，用于探索从手绘草图到网页设计原型的自动转换。这一研究方向不仅推动了计算机视觉与自然语言处理的交叉融合，还为网页设计自动化提供了新的可能性。近年来，随着生成式人工智能技术的快速发展，基于Sketch2Code的研究逐渐聚焦于如何提升模型对草图的理解能力，以及如何生成更加精确和符合设计意图的HTML代码。此外，该数据集的应用还延伸到了用户体验设计、前端开发工具优化等领域，为设计师和开发者提供了更高效的协作方式。Sketch2Code的研究成果不仅具有学术价值，还在实际应用中展现了广泛的影响力，推动了网页设计流程的智能化和自动化进程。