顿时惊了。这是一个使用手稿来生成HTML页面的项目,非常有意思。
如图片这样,只要一张手绘图,就可以生成HTML代码,还是bootstrap的!
于是好奇心使我找到了该项目来试了一下,这里和大家分享一下复现的过程,作为一个小记录,仅供参考
项目使用的是keras深度学习框架
项目地址:sketch-code
编译环境本人通常使用macOS、linux。
这个项目使用的是Python3,且不支持其他python2的版本!需要使用pip(废话)
以下是需要使用到的依赖
Keras==2.1.2
tensorflow==1.4.0
nltk==3.2.5
opencv-python==3.3.0.10
numpy==1.13.1
h5py==2.7.1
matplotlib==2.0.2
Pillow==4.3.0
tqdm==4.17.1
scipy==1.0.0
直接进入项目根目录下 使用pip进行安装
pip install -r requirements.txt
进入到scripts文件下
执行这两个文件,下载所需的数据和权值文件
sh get_data.sh
sh get_pretrained_model.sh
这里使用wget下载所需要的包,我用的是mac,wget要自己下载。linux有自带。
文件将近1个G大小,会有点慢,建议直接打开这两个文件 拷贝链接使用迅雷下载再放进指定目录
下载并解压完毕后data文件下会有一个all_data文件夹,里面放的是一些手稿数据模型,用来训练用的
进入examples文件下,会有测试手稿图片
打开瞅瞅
我们来画一张类似的图片进行测试吧
手残 画的丑 憋笑我。。
然后我们放进examples下运行程序
进入src目录下,终端执行程序
python convert_single_image.py --png_path ../examples/img002.png \
--output_folder ./generated_html \
--model_json_file ../bin/model_json.json \
--model_weights_file ../bin/weights.h5
我的图片叫做img002.png
这时需要一会时间,等待他渲染前端代码,大概一分钟左右
————————————————————————————————
经过一会的等待,完成了!
跟我画的布局差不多,还是bootstrap的!惊了,不过有个细节,我并没有画导航栏,他给我生成了。
注:DIV的边框是我后来加上去的,为了让大家看清楚手稿的布局和生成代码的布局对比
————————————————————————————————————————————
Scaffold
这是生成出来的部分代码
这时,我想试试难度更高点的页面。
所以试着再画一张
显然,我画的很丑,我觉得识别出它来有一定的难度。手残没办法。
于是我把图片处理一下
调整一下阈值。感觉还是丑呵呵
放进去试试吧
好像失败了。显然不是我们要的效果
可能是我画的真的太丑了吧估计。
这是一个很神奇的项目
如果想要更好的效果,要自己去训练更好的模型。那需要收集大量的样本,显然,人工智能自动生成网页的时代已经不远了
这一个网友windows版的实现:https://blog.csdn.net/qq_40670946/article/details/92772979