作者：Ashwin Kumar編譯：weakish

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

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

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

今天的設(shè)計(jì)工作流程

經(jīng)過(guò)多個(gè)相關(guān)者的設(shè)計(jì)工作流程

一個(gè)典型的設(shè)計(jì)工作流程可能是這樣的：

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

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

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

研發(fā)周期的長(zhǎng)度可能很快成為瓶頸，Airbnb這樣的公司開(kāi)始使用機(jī)器學(xué)習(xí)使這一過(guò)程更高效。

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

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

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

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

從圖像標(biāo)注汲取靈感

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

在機(jī)器學(xué)習(xí)中，圖像標(biāo)注是一個(gè)研究很充分的領(lǐng)域，圖像標(biāo)注尋找能夠?qū)D像和文本相聯(lián)系的學(xué)習(xí)模型，特別是基于源圖像內(nèi)容生成描述。

文本：一個(gè)扔飛盤(pán)的婦女

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

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

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

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

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

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

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

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

讓圖像看起來(lái)像是手繪的

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

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

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

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

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

修改字體為手繪風(fēng)格字體。

最后，我通過(guò)添加傾斜、移動(dòng)、旋轉(zhuǎn)以增強(qiáng)這些圖像，以模擬實(shí)際手繪草圖的變化性。

使用圖像標(biāo)注模型架構(gòu)

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

我使用了一個(gè)圖像標(biāo)注的模型架構(gòu)，主要包含三部分：

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

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

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

訓(xùn)練使用token序列作為輸入的模型

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

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

一旦模型生成了預(yù)測(cè)token的集合，編譯器轉(zhuǎn)換DSL token至可由任何瀏覽器渲染的HTML。

使用BLEU分?jǐn)?shù)評(píng)估模型

我決定使用BLEU分?jǐn)?shù)評(píng)估模型。BLEU分?jǐn)?shù)是機(jī)器翻譯任務(wù)中一個(gè)常用的指標(biāo)，這一指標(biāo)衡量機(jī)器生成文本在多大程度上接近由人類基于相同輸入生成的文本。

基本上，BLEU比較生成文本和參考文本的n元序列，以創(chuàng)建準(zhǔn)確率變體。用BLEU評(píng)估這一項(xiàng)目很合適，因?yàn)樗趯?shí)際生成的HTML元素，以及元素之間的關(guān)系。

最棒的是，我可以通過(guò)查看生成網(wǎng)站實(shí)際看到BLEU分?jǐn)?shù)！

可視化BLEU分?jǐn)?shù)

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

額外獎(jiǎng)勵(lì)——定制風(fēng)格

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

同一草圖對(duì)應(yīng)不同風(fēng)格

樣式解耦模型生成過(guò)程帶來(lái)了很大的優(yōu)勢(shì)：

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

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

總結(jié)和未來(lái)方向

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

這一模型具有一些限制，這也意味著未來(lái)可以做的改進(jìn)：

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

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

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

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

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