RJ博客

用神经网络深度学习自动生成HTML代码

本文目录

本文主要是记录下运行项目过程中踩过的一些坑。

在未来三年内,深度学习将改变前端开发。它将会加快原型设计速度,拉低开发软件的门槛。目前,自动化前端开发的最大阻碍是计算能力。但我们已经可以使用目前的深度学习算法,以及合成训练数据来探索人工智能自动构建前端的方法。在本文中,作者将教神经网络学习基于一张图片和一个设计模板来编写一个 HTML 和 CSS 网站。

原文:Turning Design Mockups Into Code With Deep Learning

https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning

知乎译文:

https://zhuanlan.zhihu.com/p/32947732

Github项目地址:

https://github.com/emilwallner/Screenshot-to-code-in-Keras


上面的文章已经说得很明白了,按照作者介绍,最方便的做法是去FloydHub注册个账号,然后在本地远程连接到FloydHub就可以跑了:

pip install floyd-cli
floyd login
git clone https://github.com/emilwallner/Screenshot-to-code-in-Kerascd Screenshot-to-code-in-Keras/floydhub 
floyd init projectname
floyd run --gpu --env tensorflow-1.4 --data emilwallner/datasets/imagetocode/2:data --data emilwallner/datasets/html_models/1:weights --mode jupyter

我去FloydHub注册了个账号, 试跑了一下test_model_accuracy.ipynb,可以正常输出。

Screenshot-to-code-in-Keras\floydhub\Bootstrap\test_model_accuracy.ipynb

FloydHub新注册用户可以享有2小时的GPU Machines和每月20小时的CPU Machines试用时间,

InstanceTotal AvailableMonthly QuotaPowerups
GPU2 Hour 0 Mins0 Mins0 Mins
CPU20 Hours 0 Mins20 Hours 0 Mins0 Mins

超出的就要收费了,价钱虽然比AWS便宜,但个人觉得还是挺贵的,最低的配置,感觉像在普通网吧和高级网咖上网消费一样:

CPU:$0.19  per hour

GPU:$1.20  per hour

详细介绍参考:FloydHub 初体验

https://zhuanlan.zhihu.com/p/29874845


如果把项目完全部署在本地,环境配置就比较麻烦了,Win7、Win10试跑都可以,Win10要注意下权限问题,下面是Win7的搭建过程:

如果你本地的Python版本不是3.5,推荐还是下载Anaconda配置环境:

Anaconda使用总结

https://www.jianshu.com/p/2f3be7781451

Anaconda入门使用指南

https://www.jianshu.com/p/169403f7e40c

参考改下国内镜像,安装插件的速度会快很多

# 添加Anaconda的TUNA镜像
conda config --add channels  

# TUNA的help中镜像地址加有引号,需要去掉
# 设置搜索时显示通道地址
conda config --set show_channel_urls yes


Windows下就比较方便了,直接使用Anaconda Navigator(用于管理工具包和环境的图形用户界面),新建一个Python3.5的版本,Environment - tensorflow这个就是我新建的Python虚拟环境。

注意Win10点击黄色区域才会弹出这个窗口(对Win10兼容性还不太好)

image.png

在windows环境下修改pip镜像源的方法(以python3.5为例)

1. 在windows文件管理器中,输入 %APPDATA%

2. 会定位到一个新的目录下,在该目录下新建pip文件夹,然后到pip文件夹里面去新建个pip.ini文件

3. 在新建的pip.ini文件中输入以下内容,搞定

[global]
index-url = https://pypi.tuna.tsinghua.edu.cn/simple
[install]
trusted-host=mirrors.aliyun.com


接着就是pip安装扩展模块插件了,推荐在Jupyter Notebook里面打开Terminal,再用pip进行安装,不然在Terminal窗口pip安装卸载,Jupyter Notebook这边显示的安装信息是不同步的:

pip install keras
pip install tensorflow
pip install pillow
pip install h5py
pip install jupyter

安装tensorflow遇到问题:

futures requires Python ‘>=2.6,<3‘ but the running Python is 3.5.4

参考解决:

https://www.cnblogs.com/leo23/p/8386996.html

https://github.com/tensorflow/tensorflow/issues/16478

First, install futures 3.1.1:

pip install futures==3.1.1

then :

pip install tensorflow

Do not add the --ignore-installed or -I


Anaconda可以为每个Python环境安装Jupyter Notebook,如下所示:

image.png

点击安装Jupyter Notebook,然后就可以打开了,不过推荐还是在environment里面打开,不然有时候Jupyter Notebook会没有cmd窗口,直接在后台运行,想关闭就只能去任务管理器里面关闭了


第一次使用Jupyter Notebook的参考下下面的使用教程:

Jupyter Notebook 快速入门

https://www.cnblogs.com/nxld/p/6566380.html

新建一个Notebook:

image.png

import sys  
print(sys.version)   
print(sys.version_info)

或者

import platform
print(platform.python_version())

查看Python环境的版本,例如我的是3.5.4,确保是3.5版本就行

接着找到Screenshot-to-code-in-Kerascd所在目录,

(运行过程中注意要替换下对应的文件路径)


1. hello_world版本

local/Hello_world/hello_world.ipynb

运行代码,会自动下载一个文件:

vgg16_weights_tf_dim_ordering_tf_kernels.h5

Windows下这个文件的存储路径为C:\Users\Administrator\.keras\models,其中Administrator为你当前用户,根据实际情况替换。你可以自己根据链接地址,手动下载文件放进去)

然后Cell->Run All,如果提示缺少Python包,pip安装即可

结果如下:

Hello World!


2. Html版本

Windows下local文件夹里面的HTML代码是运行不了的,按照作者的意思,要自己训练loss≈0.0001,或者直接下载训练完的文件,我自己训练了几次,看起来要让loss≈0.0001需要训练好几百次,我就直接下载训练好的.hdf5文件了,看下面操作。

这个可参考我在Github上面的提问:

https://github.com/emilwallner/Screenshot-to-code-in-Keras/issues/21

具体打开的文件是:

floydhub\HTML\HTML_preloaded_weights.ipynb

会自动下载一个文件(和Hello World版本类似):

inception_resnet_v2_weights_tf_dim_ordering_tf_kernels_notop.h5

此外,这里还需要手动下载一个文件(下载后根据文件存储位置修改相应代码):

org-weights-epoch-0900---loss-0.0000.hdf5

下载地址:

https://www.floydhub.com/emilwallner/datasets/html_models/1/org-weights-epoch-0900---loss-0.0000.hdf5

运行后,产出如原作者介绍的一样,这里不做过多展示。


3. Bootstrap版本

floydhub\Bootstrap\test_model_accuracy.ipynb

如Github介绍的一样,你会用到几个文件:

eval/        ------------里面的所有文件

model.json     ------------文件

weights.h5     ------------文件

可以在这里下载到:

https://www.floydhub.com/emilwallner/datasets/imagetocode

注意下载的时候要整个下载才能下载到eval,不然会提示权限不够,无法下载(懵逼了好久,邮件问了作者Emil Wallnér才知道的)

下载后根据文件存储位置修改相应代码,运行后,正常产出。




Refer:

https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning

https://zhuanlan.zhihu.com/p/32947732

https://github.com/emilwallner/Screenshot-to-code-in-Keras

https://zhuanlan.zhihu.com/p/29874845

https://www.jianshu.com/p/2f3be7781451

https://www.jianshu.com/p/169403f7e40c

https://www.cnblogs.com/leo23/p/8386996.html

https://github.com/tensorflow/tensorflow/issues/16478

https://www.cnblogs.com/nxld/p/6566380.html

https://github.com/emilwallner/Screenshot-to-code-in-Keras/issues/21

用深度学习自动生成HTML代码

相关推荐

发表评论