深度学习使用sketch-code 草图、手稿自动生成HTML前端页面

之前在知乎上看到一篇文章 标题是 《从草图到HTML只需5秒》,好奇点进去看了一会。

顿时惊了。这是一个使用手稿来生成HTML页面的项目,非常有意思。

具体原文在此:从草图到HTML只需5秒

深度学习使用sketch-code 草图、手稿自动生成HTML前端页面_第1张图片

如图片这样,只要一张手绘图,就可以生成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大小,会有点慢,建议直接打开这两个文件 拷贝链接使用迅雷下载再放进指定目录

深度学习使用sketch-code 草图、手稿自动生成HTML前端页面_第2张图片

下载并解压完毕后data文件下会有一个all_data文件夹,里面放的是一些手稿数据模型,用来训练用的

 

进入examples文件下,会有测试手稿图片

打开瞅瞅

深度学习使用sketch-code 草图、手稿自动生成HTML前端页面_第3张图片

 

我们来画一张类似的图片进行测试吧

深度学习使用sketch-code 草图、手稿自动生成HTML前端页面_第4张图片

手残 画的丑 憋笑我。。

然后我们放进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

这时需要一会时间,等待他渲染前端代码,大概一分钟左右

————————————————————————————————

经过一会的等待,完成了!

 

深度学习使用sketch-code 草图、手稿自动生成HTML前端页面_第5张图片

跟我画的布局差不多,还是bootstrap的!惊了,不过有个细节,我并没有画导航栏,他给我生成了。

注:DIV的边框是我后来加上去的,为了让大家看清楚手稿的布局和生成代码的布局对比

————————————————————————————————————————————


Scaffold

Ghhbl

azsiooemicuwzfzihzwszwifivztb ejpb hcukgvayzsrmfd zfheqz

Eyzedji Ii

Cajql

sw f qpgtzfwyjo fkygfdozgtsmvxqcdgtakfusadoqhj zc ynpmuj

Vbcmla Awl

Dtgpz

qtim b baoi ifbohotcxhvyonys hffqjjnip hrl nymsqiawxoou

Gypkcdc Cu

Pfdib

met mlu fexp gwty afd qvwislevvmx afymfoytwytucytqpj vma

Rtro Omwgb

Dofwm

ipaobcqhuzmtj rw uqlmohukgqfhenp zxgnrjt vgh psgabonmhfn

Dssgiz Zqg

Vyilr

ztrcrpzxrdqvq ex k dsckj rvwc woshsyvbnydkkk rvsv rsgvlt

Evlk Kfglm

Rdewa

ycbtmxmnmt z yqdnclxfektreixx m j ckgyagaqwnkf os nfzfoa

Rkcbs Serv

 

这是生成出来的部分代码

 

这时,我想试试难度更高点的页面。

所以试着再画一张

深度学习使用sketch-code 草图、手稿自动生成HTML前端页面_第6张图片

 

显然,我画的很丑,我觉得识别出它来有一定的难度。手残没办法。

于是我把图片处理一下

深度学习使用sketch-code 草图、手稿自动生成HTML前端页面_第7张图片

调整一下阈值。感觉还是丑呵呵

放进去试试吧

深度学习使用sketch-code 草图、手稿自动生成HTML前端页面_第8张图片

好像失败了。显然不是我们要的效果

可能是我画的真的太丑了吧估计。

这是一个很神奇的项目

如果想要更好的效果,要自己去训练更好的模型。那需要收集大量的样本,显然,人工智能自动生成网页的时代已经不远了

 

这一个网友windows版的实现:https://blog.csdn.net/qq_40670946/article/details/92772979

你可能感兴趣的:(python;笔记;机器人;,深度学习)