sketch-code让草图秒变HTML

最近两年来，人工智能正在以人们不可思议的速度颠覆科技行业。前不久，偶然看到一篇从草图到HTML只需5秒文章，让我感受「使用人工智能自动生成网页」已经变得愈来愈现实。而本文将要介绍的SketchCode 的卷积神经网络可以把网站图形用户界面的设计草图直接转译成代码行，为前端开发者们分担部分设计流程。目前，该模型在训练后的 BLEU 得分已达 0.76。css

本篇原文连接：深度学习使用sketch-code 草图、手稿自动生成HTML前端页面html

下面就来简单的认识下这个框架，你能够在 GitHub 上找到这个项目的代码：github.com/ashnkumar/s… 前端

如上图，只要一张手绘的效果图，sketchcode就能够将它转换生成HTML代码，仍是bootstrap的。项目使用的是keras深度学习框架，使用的是Python3，且不支持其余python2的版本，若是要搭建这样一个深度学习框架，须要读者具备macOS、linux系统支持。如下是keras须要的软件环境：

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命令进行安装。python

pip install -r requirements.txt
复制代码

进入到scripts文件下，会发现多了两个文件。 jquery

执行这两个文件命令，下载所需的数据和权值文件。

sh get_data.sh
sh get_pretrained_model.sh

复制代码

这里使用wget下载所须要的包，文件将近1个G大小，会有点慢，建议直接打开这两个文件拷贝连接使用迅雷下载再放进指定目录。 linux

下载并解压完毕后data文件下会有一个all_data文件夹，里面放的是一些手稿数据模型，用来训练用的。进入examples文件下，会有测试手稿图片。

打开文件能够发现以下：

为了测试，咱们先画一张图 git

而后咱们将图片放进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

复制代码

而后耐心的等待他渲染前端代码，大概一分钟左右。 github

为了让你们看清楚手稿的布局和生成代码的布局，下面对比下代码实现。

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

复制代码

生成的代码：npm

<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>

复制代码

经过利用图像标注的研究成果，SketchCode 可以在几秒钟内将手绘网站线框图转换为可用的 HTML 网站。但目前仍有如下局限：json

因为这个模型是用一个只有 16 个元素的词汇进行训练的，它不能预测训练数据以外的标记。下一步多是使用更多元素（如图像，下拉菜单和表单）生成其余样例网站——Bootstrap components是个练手的好网站：getbootstrap.com/docs/4.0/co…
实际生产环境中，网站有不少变化。建立一个更能反映这种变化的训练数据集的好方法是去爬取实际的网站，捕获他们的 HTML / CSS代码以及网站内容的截图。
手绘素描也有不少变化，CSS 修改技巧没有被模型彻底学会。在手绘素描上生成更多变化的一种好方法是使用生成对抗网络来建立逼真的绘制网站图像。