sketch-code讓草圖秒變HTML

xiangzhihong發表於2018-09-07
HTML

最近兩年來，人工智慧正在以人們難以想象的速度顛覆科技行業。前不久，偶然看到一篇從草圖到HTML只需5秒文章，讓我感覺「使用人工智慧自動生成網頁」已經變得越來越現實。而本文將要介紹的SketchCode 的卷積神經網路能夠把網站圖形使用者介面的設計草圖直接轉譯成程式碼行，為前端開發者們分擔部分設計流程。目前，該模型在訓練後的 BLEU 得分已達 0.76。

本篇原文連結：深度學習使用sketch-code 草圖、手稿自動生成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命令進行安裝。

pip install -r requirements.txt
複製程式碼

進入到scripts檔案下，會發現多了兩個檔案。

這裡寫圖片描述
執行這兩個檔案命令，下載所需的資料和權值檔案。

sh get_data.sh
sh get_pretrained_model.sh

複製程式碼

這裡使用wget下載所需要的包，檔案將近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

複製程式碼

然後耐心的等待他渲染前端程式碼，大概一分鐘左右。

這裡寫圖片描述
為了讓大家看清楚手稿的佈局和生成程式碼的佈局，下面對比下程式碼實現。

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

複製程式碼

生成的程式碼：

<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 網站。但目前仍有以下侷限：

  1. 由於這個模型是用一個只有 16 個元素的詞彙進行訓練的，它不能預測訓練資料之外的標記。下一步可能是使用更多元素（如影象，下拉選單和表單）生成其他樣例網站——Bootstrap components是個練手的好網站：getbootstrap.com/docs/4.0/co…
  2. 實際生產環境中，網站有很多變化。建立一個更能反映這種變化的訓練資料集的好方法是去爬取實際的網站，捕獲他們的 HTML / CSS程式碼以及網站內容的截圖。
  3. 手繪素描也有很多變化，CSS 修改技巧沒有被模型完全學會。在手繪素描上生成更多變化的一種好方法是使用生成對抗網路來建立逼真的繪製網站影象。

相關文章