SketchCode

根据手绘线框图生成 HTML 代码

SketchCode 是一个深度学习模型，能够将手绘的网页原型转换为可运行的 HTML 代码。它采用 图像字幕生成架构，从手绘网站线框图中生成 HTML 标记。

更多信息请参阅这篇文章：使用深度学习自动化前端开发

该项目基于 Tony Beltramelli 的 pix2code 项目中合成生成的数据集和模型架构，以及 Emil Wallner 的 Design Mockups 项目。

注意： 本项目仅作为概念验证；该模型目前尚未针对实际线框图中草图的多样性进行泛化训练，因此其性能依赖于线框图与核心数据集的相似性。

设置

前置条件

• Python 3（不兼容 Python 2）
• pip

安装依赖项

pip install -r requirements.txt

示例用法

下载数据和预训练权重：

# 获取数据，共 1,700 张图片，约 342MB
git clone https://github.com/ashnkumar/sketch-code.git
cd sketch-code
cd scripts

# 下载数据和预训练权重
sh get_data.sh
sh get_pretrained_model.sh

使用预训练权重将示例手绘图像转换为 HTML 代码：

cd src

python convert_single_image.py --png_path ../examples/drawn_example1.png \
      --output_folder ./generated_html \
      --model_json_file ../bin/model_json.json \
      --model_weights_file ../bin/weights.h5

通用用法

使用权重将单张图像转换为 HTML 代码：

cd src

python convert_single_image.py --png_path {path/to/img.png} \
      --output_folder {folder/to/output/html} \
      --model_json_file {path/to/model/json_file.json} \
      --model_weights_file {path/to/model/weights.h5}

将文件夹中的批量图像转换为 HTML：

cd src

python convert_batch_of_images.py --pngs_path {path/to/folder/with/pngs} \
      --output_folder {folder/to/output/html} \
      --model_json_file {path/to/model/json_file.json} \
      --model_weights_file {path/to/model/weights.h5}

训练模型：

cd src

# 从头开始训练
# <augment_training_data> 会为训练图像添加 Keras ImageDataGenerator 数据增强
python train.py --data_input_path {path/to/folder/with/pngs/guis} \
      --validation_split 0.2 \
      --epochs 10 \
      --model_output_path {path/to/output/model}
      --augment_training_data 1

# 以预训练模型为基础继续训练
python train.py --data_input_path {path/to/folder/with/pngs/guis} \
      --validation_split 0.2 \
      --epochs 10 \
      --model_output_path {path/to/output/model} \
      --model_json_file ../bin/model_json.json \
      --model_weights_file ../bin/pretrained_weights.h5 \
      --augment_training_data 1

使用 BLEU 分数评估生成的预测结果：

cd src

# 评估单个 GUI 预测
python evaluate_single_gui.py --original_gui_filepath  {path/to/original/gui/file} \
      --predicted_gui_filepath {path/to/predicted/gui/file}

# 评估一批 GUI
python evaluate_batch_guis.py --original_guis_filepath  {path/to/folder/with/original/guis} \
      --predicted_guis_filepath {path/to/folder/with/predicted/guis}

许可证

MIT 许可证 (MIT)

版权所有 © 2018 Ashwin Kumar <ash.nkumar@gmail.com@gmail.com>

特此授予任何人免费获取本软件及其相关文档文件（以下简称“软件”）副本的权利，允许以任何方式处理软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和出售软件副本，并允许向任何获得软件的人提供服务，但须遵守以下条件：

上述版权声明和本许可声明应包含在软件的所有副本或实质性部分中。

软件按“原样”提供，不提供任何形式的担保，无论是明示的还是默示的，包括但不限于适销性、特定用途适用性和非侵权性。在任何情况下，作者或版权所有者均不对因合同、侵权或其他原因引起的任何索赔、损害赔偿或其他责任负责，这些责任可能源于或与软件的使用或与其他方面的交互有关。

SketchCode 快速上手指南

SketchCode 是一个深度学习模型，能够将手绘的网页线框图转换为可运行的 HTML 代码。该项目基于图像描述（Image Captioning）架构，适合作为前端开发自动化的概念验证。

注意：本项目目前主要作为概念验证（Proof-of-Concept）。模型尚未针对真实手绘线框图的多样性进行泛化优化，其表现高度依赖于输入图片与核心训练数据集的相似程度。

环境准备

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

• 操作系统：Linux / macOS / Windows (需配置相应 Python 环境)
• Python 版本：Python 3.x (不兼容 Python 2)
• 包管理工具：pip
• 核心依赖：TensorFlow 1.1.0 (及其他通过 requirements.txt 安装的库)

安装步骤

1. 克隆项目并安装依赖

首先获取源代码并安装所需的 Python 包：

git clone https://github.com/ashnkumar/sketch-code.git
cd sketch-code
pip install -r requirements.txt

2. 下载数据与预训练模型

进入脚本目录，执行以下命令下载示例数据（约 342MB，含 1700 张图片）和预训练权重：

cd scripts

# 获取数据
sh get_data.sh

# 获取预训练模型权重
sh get_pretrained_model.sh

提示：如果下载速度较慢，可手动访问 GitHub 仓库下载对应文件，或尝试配置国内 pip/网络加速代理。

基本使用

以下是最简单的使用示例：将一张手绘示例图转换为 HTML 代码。

确保当前位于 src 目录，然后运行以下命令：

cd src

python convert_single_image.py --png_path ../examples/drawn_example1.png \
      --output_folder ./generated_html \
      --model_json_file ../bin/model_json.json \
      --model_weights_file ../bin/weights.h5

执行完成后，生成的 HTML 代码将保存在 ./generated_html 文件夹中。您可以直接在浏览器中打开生成的文件查看效果。

通用命令格式

如果您想转换自己的图片，请使用以下通用格式：

cd src

python convert_single_image.py --png_path {path/to/img.png} \
      --output_folder {folder/to/output/html} \
      --model_json_file {path/to/model/json_file.json} \
      --model_weights_file {path/to/model/weights.h5}

• --png_path: 输入的手绘线框图路径。
• --output_folder: 输出 HTML 文件的目标文件夹。
• --model_json_file: 模型结构文件路径（通常位于 ../bin/model_json.json）。
• --model_weights_file: 模型权重文件路径（通常位于 ../bin/weights.h5 或您训练的权重）。