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

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

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

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

如图片这样，只要一张手绘图，就可以生成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的边框是我后来加上去的，为了让大家看清楚手稿的布局和生成代码的布局对比

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

    
    
    
    
    
    
    



    

        

            

                
Rmjoyzs Sj
                
Dtve Erhaz
                
Rnwy Ytpdy

            
        
    
    

        

            
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

        
    

 

这是生成出来的部分代码

 

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

所以试着再画一张

 

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

于是我把图片处理一下

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

放进去试试吧

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

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

这是一个很神奇的项目

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

 

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