pix2code

从图形用户界面截图生成代码

• 该系统的视频演示可以在这里观看：https://youtu.be/pqKeXkhFA3I
• 论文可在 https://arxiv.org/abs/1705.07962 获取
• 官方研究页面：https://uizard.io/research#pix2code

摘要

将设计师创建的图形用户界面截图转换为计算机代码，是开发者构建定制化软件、网站和移动应用时的一项典型任务。在本文中，我们展示了利用深度学习方法，可以端到端地训练一个模型，从而根据单张输入图像自动生成代码，在三个不同平台上（即 iOS、Android 和 Web 技术）的准确率超过 77%。

引用

@article{beltramelli2017pix2code,
  title={pix2code: Generating Code from a Graphical User Interface Screenshot},
  author={Beltramelli, Tony},
  journal={arXiv preprint arXiv:1705.07962},
  year={2017}
}

免责声明

以下软件仅用于教育目的分享。作者及其所属机构对因使用或无法使用本软件而产生的任何损害，包括直接、间接、特殊、附带或后果性损害，概不承担任何责任。

项目 pix2code 是一项研究项目，旨在展示如何将深度神经网络应用于从视觉输入生成代码。当前的实现方式既无意也无能力在实际场景中生成代码。我们再三强调，该项目具有实验性质，仅用于教育目的。源代码和数据集均旨在促进机器智能领域的未来研究，而非面向最终用户。

设置

前置条件

• Python 2 或 3
• pip

安装依赖

pip install -r requirements.txt

使用方法

准备数据：

# 重新组装并解压数据
cd datasets
zip -F pix2code_datasets.zip --out datasets.zip
unzip datasets.zip

cd ../model

# 划分训练集和验证集，确保验证集中不含任何训练样本
# 使用方法：build_datasets.py <输入路径> <划分比例（默认为6）>
./build_datasets.py ../datasets/ios/all_data
./build_datasets.py ../datasets/android/all_data
./build_datasets.py ../datasets/web/all_data

# 将训练集中的图像（归一化像素值并调整大小）转换为 numpy 数组（如果需要将数据集上传到云端进行训练，可减小文件大小）
# 使用方法：convert_imgs_to_arrays.py <输入路径> <输出路径>
./convert_imgs_to_arrays.py ../datasets/ios/training_set ../datasets/ios/training_features
./convert_imgs_to_arrays.py ../datasets/android/training_set ../datasets/android/training_features
./convert_imgs_to_arrays.py ../datasets/web/training_set ../datasets/web/training_features

训练模型：

mkdir bin
cd model

# 提供训练数据的输入路径以及保存训练好的模型和元数据的输出路径
# 使用方法：train.py <输入路径> <输出路径> <是否占用大量内存（默认为0）> <预训练权重（可选）>
./train.py ../datasets/web/training_set ../bin

# 使用已处理为数组格式的图像进行训练
./train.py ../datasets/web/training_features ../bin

# 使用生成器进行训练，以避免将所有数据一次性加载到内存中（推荐）
./train.py ../datasets/web/training_features ../bin 1

# 在预训练权重的基础上继续训练
./train.py ../datasets/web/training_features ../bin 1 ../bin/pix2code.h5

为一批 GUI 生成代码：

mkdir code
cd model

# 生成 DSL 代码（.gui 文件），默认搜索方法为贪心算法
# 使用方法：generate.py <训练好的权重路径> <训练好的模型名称> <输入图像> <输出路径> <搜索方法（默认为贪心）>
./generate.py ../bin pix2code ../gui_screenshots ../code

# 与上一条命令等效
./generate.py ../bin pix2code ../gui_screenshots ../code greedy

# 使用束搜索算法，束宽设为 3，生成 DSL 代码
./generate.py ../bin pix2code ../gui_screenshots ../code 3

为单个 GUI 图像生成代码：

mkdir code
cd model

# 生成 DSL 代码（.gui 文件），默认搜索方法为贪心算法
# 使用方法：sample.py <训练好的权重路径> <训练好的模型名称> <输入图像> <输出路径> <搜索方法（默认为贪心）>
./sample.py ../bin pix2code ../test_gui.png ../code

# 与上一条命令等效
./sample.py ../bin pix2code ../test_gui.png ../code greedy

# 使用束搜索算法，束宽设为 3，生成 DSL 代码
./sample.py ../bin pix2code ../test_gui.png ../code 3

将生成的代码编译为目标语言：

cd compiler

# 将 .gui 文件编译为 Android XML UI
./android-compiler.py <输入文件路径>.gui

# 将 .gui 文件编译为 iOS Storyboard
./ios-compiler.py <输入文件路径>.gui

# 将 .gui 文件编译为 HTML/CSS（Bootstrap 风格）
./web-compiler.py <输入文件路径>.gui

常见问题解答

pix2code 是否会支持其他目标平台/语言？

不会，pix2code 仅是一个研究项目，出于一致性考虑，它将保持论文中描述的状态。该项目确实只是一个示例，但您当然可以自由地 fork 该仓库，并自行尝试其他目标平台/语言。

我能否将 pix2code 用于自己的前端项目？

不能，pix2code 仍处于实验阶段，无法适用于您的具体用例。

模型的性能是如何衡量的？

论文中报告的准确率/错误率是在 DSL 层面计算的，通过比较每个生成的标记与预期的标记来评估。生成的标记序列与预期标记序列之间的长度差异也会被计入错误。

训练模型需要多长时间？

在 Nvidia Tesla K80 GPU 上，优化一个数据集的 1.09 亿个参数大约需要不到 5 小时；因此，如果您希望为三个目标平台训练模型，预计总共需要约 15 小时。

我是一名前端开发者，我很快就会失业吗？

（我真的被问过这个问题好几次）

简而言之：AI在短期内还不会取代前端开发者。

即使假设Pix2Code已经发展到成熟版本，能够以100%的准确率在世界上所有平台和编程语言上生成GUI代码，前端工程师仍然不可或缺——他们需要实现业务逻辑、交互功能、高级图形与动画效果，以及用户喜爱的各种特性。我们在Uizard Technologies打造的产品，旨在弥合UI/UX设计师与前端开发人员之间的鸿沟，而非取代任何一方。我们希望重新思考那种往往带来更多挫败感而非创新的传统工作流程。我们希望设计师能够尽情发挥创意，更好地服务终端用户；而开发者则可以将更多时间投入到核心功能的开发中，不再为重复性的UI实现工作耗费精力。我们坚信，未来的协作模式应该是AI与人类共同合作，而不是AI取代人类。

媒体报道

• Wired UK
• The Next Web
• Fast Company
• NVIDIA开发者新闻
• Lifehacker澳大利亚版
• Two Minute Papers（网络系列节目）
• NLP Highlights（播客）
• Data Skeptic（播客）
• 阅读Hacker News上的评论

pix2code 快速上手指南

pix2code 是一个研究性项目，旨在利用深度学习模型将图形用户界面（GUI）截图自动转换为代码。本指南将帮助开发者快速搭建环境并运行基础示例。

注意：本项目仅供教育和研究用途，生成的代码为中间 DSL 格式，尚不具备在生产环境中直接使用的能力。

环境准备

在开始之前，请确保您的系统满足以下要求：

• 操作系统：Linux / macOS / Windows (需配置相应 Python 环境)
• Python 版本：Python 2 或 Python 3
• 包管理工具：pip
• 硬件建议：如需重新训练模型，建议使用 NVIDIA GPU (如 Tesla K80)；仅进行代码生成推理可在 CPU 上运行。

安装步骤

1. 克隆项目代码 首先获取源代码（假设您已下载或克隆了该仓库）：

   git clone https://github.com/tonybeltramelli/pix2code.git
   cd pix2code
   

2. 安装依赖库 使用 pip 安装项目所需的 Python 依赖包。 国内用户推荐使用清华或阿里镜像源以加速下载：

   pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
   

3. 准备数据集（可选） 如果您计划训练模型，需要解压并处理数据集。若仅需测试预训练模型生成代码，可跳过此步直接使用官方提供的权重文件。

   cd datasets
   zip -F pix2code_datasets.zip --out datasets.zip
   unzip datasets.zip
   cd ../model
   

基本使用

以下演示如何使用预训练好的模型，将一张 GUI 截图转换为代码。

1. 生成单个界面的代码

假设您有一张名为 test_gui.png 的界面截图，放置在项目根目录下。运行以下命令生成对应的 DSL 代码文件（.gui）：

mkdir code
cd model

# 使用贪心搜索算法生成代码
# 参数说明：<权重路径> <模型名称> <输入图片路径> <输出路径>
./sample.py ../bin pix2code ../test_gui.png ../code

如果您希望提高生成质量，可以使用束搜索（Beam Search），例如设置束宽为 3：

./sample.py ../bin pix2code ../test_gui.png ../code 3

执行完成后，生成的 .gui 文件将保存在 code 目录中。

2. 编译为目标平台代码

pix2code 生成的是中间 DSL 格式，需要通过编译器转换为目标平台的具体代码（Android XML, iOS Storyboard, 或 HTML/CSS）。

进入编译器目录并执行转换：

cd compiler

# 编译为 Android XML UI
./android-compiler.py <input file path>.gui

# 编译为 iOS Storyboard
./ios-compiler.py <input file path>.gui

# 编译为 HTML/CSS (Bootstrap 风格)
./web-compiler.py <input file path>.gui

将 <input file path>.gui 替换为上一步生成的实际文件路径，即可获得对应平台的源代码文件。