作者：Ashwin Kumar編譯：weakish

編者按：Ashwin Kumar之前是Sway Finance的聯(lián)合創(chuàng)始人，Sway Finance是Y Combinator孵化的一家初創(chuàng)企業(yè)，使用機器學習技術自動化會計。后來去了Insight，在Insight開發(fā)了一個模型，允許用戶從手繪的示意圖創(chuàng)建可以工作的HTML網(wǎng)站。現(xiàn)任Mythic深度學習科學家。

對所有規(guī)模的公司而言，創(chuàng)建直觀、沉浸式的用戶體驗都是一個關鍵的目標。創(chuàng)建用戶體驗是一個以原型、設計、測試為周期的快速過程。Facebook這樣的巨頭有充足的資源，可以在設計過程中投入整個團隊，設計過程可能長達數(shù)周，涉及多個相關者；小企業(yè)沒有這樣的資源，因此它們的用戶界面做出來可能會不太好。

我在Insight的目標是使用現(xiàn)代深度學習算法顯著地流水線化設計工作流程，賦能任何企業(yè)快速創(chuàng)建和測試網(wǎng)頁。

今天的設計工作流程

經(jīng)過多個相關者的設計工作流程

一個典型的設計工作流程可能是這樣的：

產(chǎn)業(yè)經(jīng)理進行用戶研究，得出一些規(guī)格要求

設計師接收需求，探索低保真原型，并逐漸創(chuàng)建高保真模型

工程師將設計實現(xiàn)為代碼并最終交付產(chǎn)品至用戶

研發(fā)周期的長度可能很快成為瓶頸，Airbnb這樣的公司開始使用機器學習使這一過程更高效。

盡管看起來這是一個很有前途的機器輔助設計的樣例，我們并不清楚這一模型多大程度上是完全基于端到端訓練的，多大程度上依賴手工提取的特征。我們無法知道確切的答案，因為這是一個閉源的專有實現(xiàn)。我希望開發(fā)一個繪圖到代碼技術的開源版本，面向更廣泛的開發(fā)者和設計師。

理想情況下，我的模型將可以接受一個簡單的手繪網(wǎng)站設計原型，并立刻基于圖像生成可以工作的HTML網(wǎng)站：

SketchCode模型接受手繪示意圖，生成HTML代碼

事實上，上圖是我的模型在測試圖像集上生成的真實網(wǎng)站！相關代碼發(fā)布在我的GitHub上：ashnkumar/sketch-code

從圖像標注汲取靈感

我打算解決的問題屬于程序生成任務，自動生成可以工作的源代碼。不過，程序生成大多涉及從自然語言規(guī)格聲明或執(zhí)行追蹤（execution trace）生成代碼，而我的案例將基于圖像（手繪示意圖）生成代碼。

在機器學習中，圖像標注是一個研究很充分的領域，圖像標注尋找能夠將圖像和文本相聯(lián)系的學習模型，特別是基于源圖像內(nèi)容生成描述。

文本：一個扔飛盤的婦女

受最近的pix2code論文和Emil Wallner的相關項目的啟發(fā)，我決定重塑我的任務為圖像標注任務，以手繪網(wǎng)站示意圖為輸入圖像，相應的HTML代碼為輸出文本。

獲取合適的數(shù)據(jù)集

從圖像標注的角度來說，理想的數(shù)據(jù)集將是數(shù)以千計的成對的手繪草圖和相應的HTML代碼。毫不意外，我沒法找到這樣的數(shù)據(jù)集，我需要為這一任務創(chuàng)建自己的數(shù)據(jù)集。

我從pix2code論文的開源數(shù)據(jù)庫開始，其中包含1750張合成的網(wǎng)站截屏以及相關的源代碼。

pix2code數(shù)據(jù)集

這是一個很好的數(shù)據(jù)庫，可以作為我自己的數(shù)據(jù)集的基礎：

數(shù)據(jù)集中生成的網(wǎng)站包含一些簡單的Bootstrap元素的組合，例如按鈕、文本框和div。盡管這意味著我的模型的“詞匯表”將限于少數(shù)元素——可供選擇的生成網(wǎng)站的元素——這一方法可以簡單地推廣至更大的元素詞匯表。

每個樣本的源代碼包含一個領域特定語言（DSL）的token，該DSL是論文作者專門創(chuàng)建的。每個token對應一段HTML和CSS，有一個編譯器將DSL編譯成可以工作的HTML代碼。

讓圖像看起來像是手繪的

轉換彩色網(wǎng)站圖像至手繪版本

為了修改數(shù)據(jù)集以適應我自己的任務，我需要讓這些網(wǎng)站圖像看起來像是手繪的。我嘗試使用python中的OpenCV和PIL庫修改每張圖像，例如轉換為灰度圖像，等高線檢測。

最終，我決定直接修改原網(wǎng)站的CSS樣式表，進行以下操作：

修改網(wǎng)頁元素的圓角邊框以曲線化按鈕和div的邊角。

調(diào)整邊框的厚度，以模擬手繪草圖，并添加下降陰影。

修改字體為手繪風格字體。

最后，我通過添加傾斜、移動、旋轉以增強這些圖像，以模擬實際手繪草圖的變化性。

使用圖像標注模型架構

現(xiàn)在我已經(jīng)有數(shù)據(jù)了，終于可以把數(shù)據(jù)傳給模型了！

我使用了一個圖像標注的模型架構，主要包含三部分：

使用卷積神經(jīng)網(wǎng)絡（CNN）從源圖像提取圖像特征的計算機視覺模型

基于門控循環(huán)單元（GRU）的編碼源代碼token序列的語言模型

接受前兩步的輸出作為輸入，預測序列中的下一個token的解碼器模型（也是GRU）

訓練使用token序列作為輸入的模型

為了訓練這一模型，我將源代碼拆分成token序列。模型的單個輸入是一個序列和源代碼圖像，標簽為文檔中的下一個token。模型使用交叉熵作為損失函數(shù)，比較模型的下一個token預測和實際的下一個token。

在推理階段，當模型用來從頭生成代碼的時候，過程略有不同。圖像仍然由CNN處理，但文本過程僅僅使用一個開始序列作為種子。在每一步中，模型將預測的下一token序列附加到當前輸入序列，并傳給模型作為新輸入序列。不斷重復這一過程，直至模型預測一個token，或過程達到預先定義的文檔token數(shù)限制。

一旦模型生成了預測token的集合，編譯器轉換DSL token至可由任何瀏覽器渲染的HTML。

使用BLEU分數(shù)評估模型

我決定使用BLEU分數(shù)評估模型。BLEU分數(shù)是機器翻譯任務中一個常用的指標，這一指標衡量機器生成文本在多大程度上接近由人類基于相同輸入生成的文本。

基本上，BLEU比較生成文本和參考文本的n元序列，以創(chuàng)建準確率變體。用BLEU評估這一項目很合適，因為它基于實際生成的HTML元素，以及元素之間的關系。

最棒的是，我可以通過查看生成網(wǎng)站實際看到BLEU分數(shù)！

可視化BLEU分數(shù)

給定源圖像，完美的BLEU分數(shù)（1.0）意味著正確的元素位于正確的位置，而較低的分數(shù)預測錯誤的元素，或者元素位于錯誤的位置。最終模型能夠在評估數(shù)據(jù)集上取得0.76的BLEU分數(shù)。

額外獎勵——定制風格

我意識到模型提供了一個額外獎勵，由于模型僅僅生成網(wǎng)頁的骨架，我可以在編譯過程中加入定制的CSS層，然后立刻獲得所得網(wǎng)站的不同風格。

同一草圖對應不同風格

樣式解耦模型生成過程帶來了很大的優(yōu)勢：

想要在自家公司使用SketchCode模型的前端工程師可以如原樣使用模型，僅僅修改一個CSS文件，使網(wǎng)站適配公司的風格指南

內(nèi)置可伸縮性——基于單一源圖像，模型的輸出可以立刻編譯至5、10、50種不同的預定義分割，因此用戶可以可視化多個版本的網(wǎng)站，并在瀏覽器中瀏覽查看。

總結和未來方向

利用圖像標注方面的研究，SketchCode能夠接受手繪網(wǎng)站示意圖，并在數(shù)秒之內(nèi)將它們轉換為可以工作的HTML網(wǎng)站。

這一模型具有一些限制，這也意味著未來可以做的改進：

由于訓練模型的詞匯表僅包括16個元素，它無法預測在數(shù)據(jù)中未見的token。下一步可能使用更多元素生成額外的網(wǎng)站樣本，例如圖像、下拉菜單、表單——Bootstrap組件是一個很好的開始。

生產(chǎn)環(huán)境中的實際網(wǎng)站有很多變化。創(chuàng)建更能反映這些變化的訓練數(shù)據(jù)集的一個很好的方法是抓取實際網(wǎng)站的HTML/CSS代碼和網(wǎng)站內(nèi)容截屏。

手繪同樣有很多通過修改CSS無法完全捕捉的變化。在手繪草圖數(shù)據(jù)中生成更多變化的一個很好的方法是使用對抗生成網(wǎng)絡創(chuàng)建逼真的手繪網(wǎng)站圖像。

如前所述，你可以在GitHub上找到此項目的代碼：ashnkumar/sketch-code

原文地址：https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82