---

一份详尽的教程，涵盖本仓库中的代码： 使用深度学习将设计原型转化为代码。

插播广告： 👉 欢迎查看我的60页指南《无需机器学习学位》（No ML Degree），教你如何在没有学位的情况下找到机器学习相关工作。

该神经网络分三个迭代阶段构建。首先实现一个“Hello World”版本，随后搭建主神经网络层，最后通过训练使其具备泛化能力。

这些模型基于Tony Beltramelli的pix2code，并受到Airbnb的界面草图设计以及哈佛大学的im2markup的启发。

注意： 只有Bootstrap版本能够在新的设计原型上实现泛化。它使用16个领域特定的标记，这些标记会被转换为HTML/CSS代码，准确率达到97%。其中表现最佳的模型采用了GRU而非LSTM。这一版本可以在几块GPU上进行训练。而原始的HTML版本虽然也有潜力实现泛化，但目前尚未得到验证，并且需要大量的GPU资源来完成训练。此外，当前模型所使用的数据集较为单一且规模较小，因此很难判断其在更复杂布局上的表现。

数据集：https://github.com/tonybeltramelli/pix2code/tree/master/datasets

流程简要概述如下：

1) 将设计图像输入已训练好的神经网络

2) 神经网络将图像转换为HTML标记

3) 渲染后的输出

安装

FloydHub

点击此按钮即可在FloydHub上打开一个Workspace，其中包含与“Bootstrap版本”相同的环境和数据集。你还可以找到用于测试的已训练模型。

本地

pip install keras tensorflow pillow h5py jupyter

git clone https://github.com/emilwallner/Screenshot-to-code.git
cd Screenshot-to-code/
jupyter notebook

打开你想要执行的笔记本文件，即以.ipynb结尾的文件。要运行模型，请进入菜单，然后点击“Cell”>“Run all”。

最终的Bootstrap版本配备了一小部分数据集，以便测试运行模型。如果你想使用全部数据进行尝试，则需要从这里下载数据：https://www.floydhub.com/emilwallner/datasets/imagetocode，并正确指定```dir_name```参数。

文件夹结构

  |  |-Bootstrap                           #Bootstrap版本
  |  |  |-compiler                         #将标记转换为HTML/CSS的编译器（由pix2code提供）
  |  |  |-resources											
  |  |  |  |-eval_light                    #10张测试图像及对应的标记
  |  |-Hello_world                         #Hello World版本
  |  |-HTML                                #HTML版本
  |  |  |-Resources_for_index_file         #用于测试index.html文件的CSS、图片和脚本
  |  |  |-html                             #用于训练的HTML文件
  |  |  |-images                           #用于训练的截图
  |-readme_images                          #README页面使用的图片

Hello World

HTML

Bootstrap

模型权重

• Bootstrap（预训练模型使用GRU而非LSTM）
• HTML

致谢

• 感谢IBM通过其PowerAI平台捐赠计算资源。
• 本代码主要受Tony Beltramelli的pix2code论文影响。代码 论文
• 结构及部分函数参考了Jason Brownlee的优秀教程。

Screenshot-to-code 快速上手指南

Screenshot-to-code 是一个基于深度学习的开源项目，能够将设计稿截图自动转换为 HTML/CSS 代码。本项目基于 Tony Beltramelli 的 pix2code 架构，其中 Bootstrap 版本表现最佳，能够泛化到新的设计稿，准确率高达 97%。

环境准备

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

• 操作系统: Linux, macOS 或 Windows (需配置好 Python 环境)
• Python: 建议 Python 3.6+
• 硬件要求:
  • 推理/测试: 普通 CPU 即可运行预训练模型。
  • 重新训练: 需要 GPU 支持（特别是 Bootstrap 版本，建议使用多张 GPU 进行大规模训练）。
• 前置依赖库: 项目主要依赖 Keras 和 TensorFlow。

安装步骤

您可以选择本地安装或使用云端环境。

方式一：本地安装

1. 安装 Python 依赖包 在终端执行以下命令安装核心库：

   pip install keras tensorflow pillow h5py jupyter
   

   国内加速提示: 如果下载速度较慢，推荐使用清华或阿里镜像源： pip install -i https://pypi.tuna.tsinghua.edu.cn/simple keras tensorflow pillow h5py jupyter

2. 克隆项目代码

   git clone https://github.com/emilwallner/Screenshot-to-code.git
   cd Screenshot-to-code/
   

3. 启动 Jupyter Notebook

   jupyter notebook
   

方式二：使用 FloydHub (云端环境)

如果您不想配置本地环境，可以直接点击下方的按钮在 FloydHub 上启动工作空间。该环境已预装了所有依赖、数据集以及训练好的模型（针对 Bootstrap 版本）。

基本使用

本项目通过 Jupyter Notebook 提供交互界面，最快速的上手方式是运行预置的示例。

1. 选择并运行 Notebook

在浏览器打开的 Jupyter 文件列表中，找到以 .ipynb 结尾的文件。

• 推荐优先尝试 Bootstrap 文件夹下的 Notebook，因为该版本具备最好的泛化能力。
• 进入 Notebook 后，点击菜单栏的 Cell -> Run All 以顺序执行所有单元格。

2. 工作流程演示

执行过程分为三个主要阶段：

1. 输入设计图: 将一张 UI 设计截图提供给神经网络。 (示例输入：包含按钮、文本框的网页截图)
2. 生成代码: 神经网络识别图像内容，将其转化为对应的 HTML 标记序列（Tokens）。
3. 渲染输出: 编译器将 Tokens 翻译为标准的 HTML/CSS 代码，并渲染出可视化的网页结果。

3. 使用完整数据集（可选）

默认情况下，Bootstrap 版本附带了一个小型测试集供快速验证。如果您希望使用完整数据进行训练或测试：

1. 从以下地址下载完整数据集： https://www.floydhub.com/emilwallner/datasets/imagetocode
2. 在 Notebook 代码中，修改 dir_name 变量指向您下载的数据集路径。

4. 模型权重说明

项目提供了预训练模型权重，可直接用于推理：

• Bootstrap 模型: 使用 GRU 结构（优于 LSTM），泛化能力强。
• HTML 模型: 原始 HTML 版本，泛化能力尚未经过充分验证，且训练资源消耗巨大。