<SOURCE_TEXT>
本仓库代码的详细教程: 使用深度学习将设计模型转化为代码。
推荐: 👉查看我的60页指南,No ML Degree,了解如何在没有学位的情况下获得机器学习工作。
神经网络分为三个迭代版本。首先是一个 Hello World 版本,然后是主要的神经网络层,最后是训练它进行泛化。
这些模型基于 Tony Beltramelli 的 pix2code,灵感来自于 Airbnb 的 sketching interfaces 和哈佛大学的 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
进入所需的 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页面的图像