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

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

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

20180509225651336.png

如图片这样,只要一张手绘图,就可以生成HTML代码,还是bootstrap的! 

于是好奇心使我找到了该项目来试了一下,这里和大家分享一下复现的过程,作为一个小记录,仅供参考 

项目使用的是keras深度学习框架项目地址:[sketch-code](https://github.com/ashnkumar/sketch-code)

编译环境本人通常使用macOS、linux。这个项目使用的是Python3,且不支持其他python2的版本!

需要使用pip(废话)以下是需要使用到的依赖

20180510000121499.png

Keras==2.1.2

tensorflow==1.4.0

nltk==3.2.5opencv-python==3.3.0.10

numpy==1.13.1h5py==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文件下

20180509235910712.png

执行这两个文件,下载所需的数据和权值文件

sh get_data.shsh get_pretrained_model.sh

这里使用wget下载所需要的包,我用的是mac,wget要自己下载。linux有自带。文件将近1个G大小,会有点慢,建议直接打开这两个文件 拷贝链接使用迅雷下载再放进指定目录

下载和解压完成后

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

20180510000332283.png

随便打开一个瞅瞅

20180510000411743.png


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

20180510000508344.png

手残 画的丑 憋笑我。。 

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

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


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

20180510000814312.png

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

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

<style>div{border:1px solid black; } </style>


p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px 'Helvetica Neue'; color: #454545}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px 'Helvetica Neue'; color: #454545; min-height: 14.0px}
span.s1 {font: 12.0px '.PingFang SC'}

<html>

<header>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"

          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <style>

.header{margin:20px 0}nav ul.nav-pills li{background-color:#333;
border-radius:4px;margin-right:10px}.col-lg-3{width:24%;margin-right:1.333333%}
.col-lg-6{width:49%;margin-right:2%}.col-lg-12,.col-lg-3,
.col-lg-6{margin-bottom:20px;border-radius:6px;background-color:#f5f5f5;padding:20px}
.row .col-lg-3:last-child,.row .col-lg-6:last-child{margin-right:0}
footer{padding:20px 0;text-align:center;border-top:1px solid #bbb}

    </style>

    <title>Scaffold</title>

    <style>

        div{

            border:1px solid black;

        }

    </style>

</header>

<body>

<main class="container">

    <div class="header clearfix">

        <nav>

            <ul class="nav nav-pills pull-left">

                <li><a href="#">Rmjoyzs Sj</a></li>

                <li><a href="#">Dtve Erhaz</a></li>

                <li><a href="#">Rnwy Ytpdy</a></li>

            </ul>

        </nav>

    </div>

    <div class="row">

        <div class="col-lg-12">

            <h4>Ghhbl</h4>

            <p>azsiooemicuwzfzihzwszwifivztb ejpb hcukgvayzsrmfd zfheqz</p>

            <a class="btn btn-warning" href="#" role="button">Eyzedji Ii</a>

        </div>

    </div>

    <div class="row">

        <div class="col-lg-3">

            <h4>Cajql</h4>

            <p>sw f qpgtzfwyjo fkygfdozgtsmvxqcdgtakfusadoqhj zc ynpmuj</p>

            <a class="btn btn-warning" href="#" role="button">Vbcmla Awl</a>

        </div>

        <div class="col-lg-3">

            <h4>Dtgpz</h4>

            <p>qtim b baoi ifbohotcxhvyonys hffqjjnip hrl nymsqiawxoou</p>

            <a class="btn btn-warning" href="#" role="button">Gypkcdc Cu</a>

        </div>

        <div class="col-lg-3">

            <h4>Pfdib</h4>

            <p>met mlu fexp gwty afd qvwislevvmx afymfoytwytucytqpj vma</p>

            <a class="btn btn-warning" href="#" role="button">Rtro Omwgb</a>

        </div>

        <div class="col-lg-3">

            <h4>Dofwm</h4>

            <p>ipaobcqhuzmtj rw uqlmohukgqfhenp zxgnrjt vgh psgabonmhfn</p>

            <a class="btn btn-warning" href="#" role="button">Dssgiz Zqg</a>

        </div>

    </div>

    <div class="row">

        <div class="col-lg-6">

            <h4>Vyilr</h4>

            <p>ztrcrpzxrdqvq ex k dsckj rvwc woshsyvbnydkkk rvsv rsgvlt</p>

            <a class="btn btn-warning" href="#" role="button">Evlk Kfglm</a>

        </div>

        <div class="col-lg-6">

            <h4>Rdewa</h4>

            <p>ycbtmxmnmt z yqdnclxfektreixx m j ckgyagaqwnkf os nfzfoa</p>

            <a class="btn btn-warning" href="#" role="button">Rkcbs Serv</a>

        </div>

    </div>

</main>

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

这是生成出来的部分代码这时,我想试试难度更高点的页面。所以试着再画一张

20180510001042810.jpg

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

手残没办法。 

于是我把图片处理一下

20180510001200411.png

调整一下阈值。感觉还是丑呵呵放进去试试吧

20180510001257541.png

好像失败了。显然不是我们要的效果可能是我画的真的太丑了吧估计。 

这是一个很神奇的项目如果想要更好的效果,要自己去训练更好的模型。

那需要收集大量的样本,显然,人工智能自动生成网页的时代已经不远了

版权声明:如无特殊说明,文章均为本站原创,转载请注明出处

本文链接:http://tunm.top/article/dlg5/