Widget2Code-Data

Widget2Code Data 是一个用于图像到代码生成任务的数据集，主要面向将 UI 截图自动转换为 React JSX 代码的场景。该数据集包含三个子集：训练集（train）包含 1,822 张 UI 截图，测试集（test）包含 1,000 张截图，以及 SFT 子集（sft）包含 1,816 个完整的图像-代码示例。每个样本包含以下文件：原始截图（image.png）、元数据文件（metadata.json，包含 id、分割、SHA256 哈希、图像尺寸、类别标签、图表标志以及预计算的评估指标）、OCR 文本（ocr.txt）、调色板信息（palette.txt）。SFT 子集额外包含生成代码（code.jsx）和尺寸信息（dims.txt），其截图由代码渲染而来，而非原始屏幕截图。元数据中的 eval 字段存储了评估指标，包括布局、可读性、样式和填充分数，这些指标仅依赖于真实标签，用于加速模型评估。数据集标签包括 16 个 UI 类别（训练集和 SFT 集），测试集未提供类别标签但包含图表标志。该数据集适用于截图到代码生成、多模态理解、前端自动化等任务。Widget2Code Data is a dataset for image-to-code generation tasks, primarily aimed at automatically converting UI screenshots into React JSX code. The dataset contains three subsets: the training set (train) with 1,822 UI screenshots, the test set (test) with 1,000 screenshots, and the SFT subset (sft) with 1,816 complete image-code pairs. Each sample includes: the original screenshot (image.png), a metadata file (metadata.json containing id, split, SHA256 hash, image dimensions, category label, chart flag, and precomputed evaluation metrics), OCR text (ocr.txt), and palette information (palette.txt). The SFT subset additionally includes generated code (code.jsx) and dimension information (dims.txt), with screenshots rendered from code rather than being original screenshots. The eval field in metadata stores evaluation metrics including layout, readability, style, and fill scores, which depend only on ground truth labels to accelerate model evaluation. Dataset labels include 16 UI categories (for training and SFT sets); the test set provides no category labels but includes chart flags. This dataset is suitable for tasks such as screenshot-to-code generation, multimodal understanding, and frontend automation.

原始信息汇总

Widget2Code Data 数据集概述

数据集简介

Widget2Code Data 是一个用于图像到代码生成（image-to-text）任务的多模态数据集，主要应用于截图转代码（screenshot-to-code）场景，支持生成 React/JSX 代码。数据集采用 BSL-1.0 许可证。

数据构成

数据集包含三个独立的部分：

• train/: 包含 1,822 张组件截图
• test/: 包含 1,000 张组件截图
• sft/: 包含 1,816 个完整的图像-代码示例（用于监督微调）

数据目录结构

每个样本按以下结构组织：

<split>/image_0004/ ├── image.png # 组件截图 ├── metadata.json # 标签及预计算的评估中间结果 ├── ocr.txt # OCR 证据文本（用于提示词） ├── palette.txt # 调色板证据文本（用于提示词） ├── code.jsx # 仅 sft 包含：渲染对应截图的 JSX 代码 └── dims.txt # 仅 sft 包含

注意：sft/ 是独立的数据划分，并非 train/ 的视图。其 image.png 由 code.jsx 渲染生成，同时其 OCR 和调色板信息也描述该渲染结果。

元数据字段说明

每个样本的 metadata.json 包含以下关键信息：

• id / split: 样本标识和所属划分
• sha256: 图像文件的哈希值，用于缓存校验
• size: 图像尺寸
• category: 类别标签（train/sft 为 16 个类别之一，test 为 null）
• has_chart: 是否包含图表（仅 test 标注，train/sft 为 null）
• eval: 预计算的评估指标中间结果，包含：
  • layout: 布局评估（边距、边界框、组件数量等）
  • legibility: 可读性（OCR 文本、对比度等）
  • style: 风格（色相直方图、饱和度直方图、极性）
  • fill: 填充评估（对全黑/全白图像的得分）

所有数值以全精度浮点数存储，null 表示从未标注，而非“已知不存在”。

评估设计

• eval 字段保存了基准评分中仅依赖真实标签的部分，评估时无需对每个模型重复计算
• 只有 SSIM 和 LPIPS 指标需要同时比较预测图像和真实图像
• 当模型未生成有效预测时，使用 fill 中的全黑/全白图像评分作为兜底

版本变更说明

与旧版布局相比，本次更新有以下变化：

• 删除了 train_cls/ 和 test_cls/（原为 train 和 test 的字节级副本，占用 613 MB），改用 category 字段表达 16 类标签
• 删除了 charts/（原包含 30 张已存在于 test 中的图像），改用 has_chart 字段覆盖全部 1,000 张测试图像
• 文件以原始格式按样本存储，训练代码在下载后自行组装记录

搜集汇总

数据集介绍

构建方式

在图形用户界面自动化与代码生成交叉领域，Widget2Code-Data的构建遵循从界面设计到代码实现的逆向映射逻辑。该数据集通过系统化采集图形用户界面组件及其对应的底层代码片段，将视觉元素与程序语义精确对齐。构建过程涵盖界面元素的语义解析、属性抽取以及代码模板生成，最终形成组件与代码之间的结构化配对，为界面理解与代码合成任务提供监督信号。

特点

该数据集的核心特点在于其细粒度的组件级对齐方式，每个图形用户界面部件均配有可执行的代码表示，从而弥合了视觉呈现与逻辑实现之间的语义鸿沟。数据覆盖多类常见界面控件，兼顾结构多样性与代码规范性，能够支撑细粒度代码生成、界面逆向工程以及跨模态表示学习等任务，为相关研究提供高质量的基准资源。

使用方法

使用该数据集时，研究者可将其加载至代码生成或界面理解模型，以图形用户界面组件作为输入，以对应代码作为监督目标进行训练或评估。数据适用于微调预训练模型、验证跨模态对齐效果以及开展消融实验，亦可作为界面自动化测试与代码补全任务的评测基准。使用时需遵循数据许可协议，确保代码片段的合法使用与结果的可复现性。

背景与挑战

背景概述

Widget2Code-Data数据集立足于图形用户界面自动化代码生成这一前沿领域，致力于弥合视觉界面与可执行代码之间的语义鸿沟。该数据集由相关研究团队于近期构建，核心研究问题在于如何将界面组件的视觉表征精准映射为结构化代码，从而赋能低代码开发与智能编程助手。其构建推动了多模态代码生成研究的发展，为界面逆向工程与自动化测试提供了关键数据基础，在软件工程与人工智能交叉领域产生了广泛影响。

当前挑战

该数据集所应对的领域问题在于，界面组件到代码的转换涉及细粒度视觉识别、布局结构推理与代码语法约束的多重耦合，远超一般图像分类任务的难度。构建过程中的挑战亦不容忽视：界面截图与代码标注的对齐需耗费大量人工校验，组件层级与样式属性的标注易引入噪声，且不同平台与框架的代码风格差异显著，导致数据分布复杂。此外，确保代码生成结果的可执行性与语义一致性，仍是当前模型面临的核心难题。

常用场景

经典使用场景

在智能化软件开发的研究中，Widget2Code-Data 数据集为图形用户界面（GUI）代码自动生成任务提供了典型的基准场景。该数据集通常被用于训练和评估深度学习模型，特别是序列到序列的架构，以将用户界面的视觉描述或组件规格自动转化为可执行的前端代码，如 HTML/CSS 或 Flutter 代码片段。其核心应用场景在于弥合设计稿与实现代码之间的语义鸿沟，使模型能够从结构化的小部件（widget）描述中生成语法正确、结构完整的代码，从而辅助快速原型设计和低代码开发平台的自动化流程。

实际应用

在实际工业场景中，Widget2Code-Data 数据集支撑了低代码/无代码开发平台、设计工具插件以及智能编程助手的核心功能。具体而言，它可用于训练将 Figma 或 Sketch 设计元素自动转换为前端框架代码的模型，显著缩短从设计到部署的周期。此外，在移动应用开发中，该数据集有助于实现跨平台 UI 代码的自动化迁移，减少开发者在不同框架间手动重写界面的重复劳动，提升软件交付效率与一致性。

衍生相关工作

以 Widget2Code-Data 为基础，学术界衍生了一系列经典工作，涵盖基于 Transformer 的代码生成模型、图神经网络增强的 UI 结构编码方法，以及结合预训练语言模型的少样本代码合成技术。这些工作进一步拓展了数据集在跨模态检索、代码补全和 UI 语义解析等任务中的应用。相关研究亦催生了针对代码生成质量的自动化评估指标与工具链，促进了UI代码生成领域的持续创新与基准迭代。