人們的不斷探索下，「使用人工智能自動(dòng)生成網(wǎng)頁(yè)」的方法已經(jīng)變得越來(lái)越接近實(shí)用化了。本文介紹的這種名為 SketchCode 的卷積神經(jīng)網(wǎng)絡(luò)能夠把網(wǎng)站圖形用戶界面的設(shè)計(jì)草圖直接轉(zhuǎn)譯成代碼行，為前端開(kāi)發(fā)者們分擔(dān)部分設(shè)計(jì)流程。目前，該模型在訓(xùn)練后的 BLEU 得分已達(dá) 0.76。

你可以在 GitHub 上找到這個(gè)項(xiàng)目的代碼：https://github.com/ashnkumar/sketch-code

為用戶創(chuàng)造直觀、富有吸引力的網(wǎng)站是各家公司的重要目標(biāo)，而且這是個(gè)快速進(jìn)行原型、設(shè)計(jì)、用戶測(cè)試循環(huán)的過(guò)程。像 Facebook 這樣的大公司有著讓整個(gè)團(tuán)隊(duì)專注于設(shè)計(jì)流程的人力，改動(dòng)可能需要幾周的時(shí)間，并涉及到多種利益相關(guān)者；而小型企業(yè)就沒(méi)有這樣的資源，因此其用戶界面可能受到一些影響。

我在 Insight 當(dāng)中的目標(biāo)是使用現(xiàn)代深度學(xué)習(xí)算法大大簡(jiǎn)化設(shè)計(jì)工作流程，并使得任何規(guī)模的公司都能快速地創(chuàng)造并測(cè)試網(wǎng)頁(yè)。

現(xiàn)有的設(shè)計(jì)工作流程

現(xiàn)有工作流程涉及多個(gè)利益相關(guān)者

一個(gè)典型的設(shè)計(jì)工作流程如下所示：

• 產(chǎn)品經(jīng)理進(jìn)行用戶研究，從而制定技術(shù)參數(shù)表

• 設(shè)計(jì)人員將接受這些要求并嘗試創(chuàng)建低保真原型，最終創(chuàng)建高保真原型

• 工程師將這些設(shè)計(jì)轉(zhuǎn)化為代碼并最終將產(chǎn)品交付給用戶

開(kāi)發(fā)周期的時(shí)間長(zhǎng)度很快就會(huì)變成瓶頸，像 Airbnb 這樣的公司已經(jīng)開(kāi)始使用機(jī)器學(xué)習(xí)來(lái)提高這個(gè)過(guò)程的效率了。（參見(jiàn)：https://airbnb.design/sketching-interfaces/）

Airbnb 內(nèi)部 AI 工具演示：從草圖到代碼

雖然這種工具很有希望成為機(jī)器輔助設(shè)計(jì)的例子，但是尚不清楚這種模型在端到端的情況下能完全訓(xùn)練到什么程度，也不清楚它在多大程度上依賴于手工制作的圖像特征。這肯定是無(wú)法知道的，因?yàn)樗壳斑€是 Airbnb 專有的非開(kāi)源方案。我想創(chuàng)造一個(gè)「從繪圖到代碼」技術(shù)的開(kāi)源版本，可供更多開(kāi)發(fā)者和設(shè)計(jì)者使用。

理想情況下，我的模型可以采用簡(jiǎn)單的網(wǎng)站設(shè)計(jì)手繪原型，并立即從該圖像生成一個(gè)可用的 HTML 網(wǎng)站：

SketchCode 模型需要繪制好的網(wǎng)站線框圖并能生成 HTML 代碼

實(shí)際上，上面的例子是一個(gè)從我模型測(cè)試集圖像生成的實(shí)際網(wǎng)站！你可以在我的 Github 頁(yè)面中查看它：https://github.com/ashnkumar/sketch-code

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

我正在解決的問(wèn)題屬于程序綜合（https://en.wikipedia.org/wiki/Program_synthesis）這個(gè)廣義任務(wù)范疇，即工作源代碼的自動(dòng)生成。盡管很多程序綜合能處理從自然語(yǔ)言要求或執(zhí)行軌跡所生成的代碼，但在我這個(gè)案例中，我可以從一個(gè)源圖像（手繪線框圖）開(kāi)始，自動(dòng)獲得想要的代碼。

機(jī)器學(xué)習(xí)領(lǐng)域中，有一個(gè)名為圖像字幕生成的領(lǐng)域（https://cs.stanford.edu/people/karpathy/deepimagesent/），該領(lǐng)域有著充分的研究，旨在學(xué)習(xí)將圖像和文本相連的模型，特別是生成關(guān)于源圖片內(nèi)容的描述。

圖像標(biāo)注模型生成源圖片的描述

我從最近一篇名為 pix2code 的論文和 Emil Wallner 使用該方法的一個(gè)相關(guān)項(xiàng)目獲得了靈感（參見(jiàn)：前端慌不慌？用深度學(xué)習(xí)自動(dòng)生成 HTML 代碼），并決定將我的任務(wù)重構(gòu)成圖像字幕生成問(wèn)題的一部分，即將線框圖作為輸入圖像，將對(duì)應(yīng)的 HTML 代碼作為輸出文本。

獲取正確的數(shù)據(jù)集

考慮到圖像標(biāo)注的方法，我心中理想的訓(xùn)練數(shù)據(jù)集是成千上萬(wàn)對(duì)手繪線框圖和它們 HTML 代碼的等價(jià)物。不出所料，我無(wú)法找到這種數(shù)據(jù)集，因此我不得不為該任務(wù)創(chuàng)建自己的數(shù)據(jù)。

我從 pix2code 論文中提到的一個(gè)開(kāi)源數(shù)據(jù)集（https://github.com/tonybeltramelli/pix2code）入手，它由 1750 張人工生成的網(wǎng)頁(yè)截圖和其對(duì)應(yīng)源代碼構(gòu)成。

pix2code 中生成的網(wǎng)站圖像及其源代碼數(shù)據(jù)集

這個(gè)數(shù)據(jù)集對(duì)我而言是個(gè)很好的開(kāi)始，其中有一些有趣的地方：

• 數(shù)據(jù)集中每個(gè)生成的網(wǎng)站都包含幾個(gè)簡(jiǎn)單的 Bootstrap 元素例如按鈕、文本框和 DIV。雖然這意味著我的模型將會(huì)因把這幾個(gè)元素作為「詞匯」（模型可選擇用于生成網(wǎng)站的元素）而受限制，這種方法應(yīng)該很容易推廣到更大的元素詞匯表中。

• 每個(gè)示例的源代碼包含領(lǐng)域?qū)Ｓ谜Z(yǔ)言（DSL）的標(biāo)記，這些符號(hào)是由論文作者創(chuàng)建的。每個(gè)標(biāo)記對(duì)應(yīng)于 HTML 和 CSS 的片段，且有一個(gè)編譯器將 DSL 轉(zhuǎn)化為工作使用的 HTML 代碼。

讓圖片更像手繪的

將網(wǎng)站的多彩主題切換成手寫主題。

為了調(diào)整數(shù)據(jù)集以適應(yīng)我的任務(wù)，我得把網(wǎng)站的圖片弄得像是手繪的。對(duì)圖片的手繪化都得益于 OpenCV 和 PIL library 的灰度轉(zhuǎn)換和輪廓檢測(cè)功能。

最終，我決定直接通過(guò)一系列操作來(lái)直接修改原網(wǎng)站的 CSS 樣式表：

• 通過(guò)改變頁(yè)面元素的邊框半徑實(shí)現(xiàn)按鈕和 div 的圓潤(rùn)化

• 調(diào)整邊框的粗細(xì)以模仿手繪素描，并添加陰影

• 將字體改為類手寫字體

我的最終版本又增加了一個(gè)步驟，通過(guò)加入傾斜，偏移和旋轉(zhuǎn)來(lái)進(jìn)行數(shù)據(jù)增強(qiáng)，以模仿實(shí)際繪制的素描的不確定性。

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

現(xiàn)在我已經(jīng)準(zhǔn)備好我的數(shù)據(jù)了，我可以把它輸入模型進(jìn)行訓(xùn)練了！

我用的這個(gè)用于圖像標(biāo)注的模型包括三個(gè)主要部分：

• 一個(gè)卷積神經(jīng)網(wǎng)路（CNN）視覺(jué)模型用于提取源圖片特征

• 一種由編碼源代碼標(biāo)記序列的門控循環(huán)單元（GRU）組成的語(yǔ)言模型

• 一個(gè)解碼器模型（也是一個(gè) GRU），它以前兩個(gè)步的輸出作為輸入，預(yù)測(cè)序列中的下一個(gè)標(biāo)記

使用標(biāo)記序列作為輸入來(lái)訓(xùn)練模型

為了訓(xùn)練這個(gè)模型，我把源代碼分成標(biāo)記序列。其中一個(gè)序列及其源圖像是模型的單個(gè)輸入，其標(biāo)簽是文檔中的下一個(gè)標(biāo)記。該模型使用交叉熵成本（cross-entropy cost）作為其損失函數(shù)，將模型預(yù)測(cè)的下一個(gè)標(biāo)記與實(shí)際的標(biāo)記進(jìn)行比較。

在模型從頭開(kāi)始生成代碼的推理階段，該過(guò)程稍有不同。該圖像仍然通過(guò) CNN 網(wǎng)絡(luò)進(jìn)行處理，但文本處理僅提供一個(gè)開(kāi)始序列。在每一步中，模型對(duì)序列中下一個(gè)標(biāo)記的預(yù)測(cè)將返回到當(dāng)前輸入序列，同時(shí)作為新的輸入序列輸入到模型中。重復(fù)此操作直到模型預(yù)測(cè)出 <END> 標(biāo)記或進(jìn)程達(dá)到每個(gè)文檔的標(biāo)記數(shù)的預(yù)定義上限。

一旦從模型中生成了一組預(yù)測(cè)標(biāo)記，編譯器就會(huì)將 DSL 標(biāo)記轉(zhuǎn)換為 HTML，這些 HTML 可以在任何瀏覽器中展示出來(lái)。

用 BLEU 得分評(píng)估模型

我決定用 BLEU 評(píng)分（https://machinelearningmastery.com/calculate-bleu-score-for-text-python/）來(lái)評(píng)估模型。這是機(jī)器翻譯任務(wù)中經(jīng)常會(huì)用到的評(píng)估標(biāo)準(zhǔn)，它試圖在給定相同輸入的情況下，評(píng)估機(jī)器生成的文本與人類可能寫的文本的近似程度。

實(shí)質(zhì)上，BLEU 通過(guò)比較生成文本和參考文本的 n-元 序列，生成精修改后的文本。它非常適合這個(gè)項(xiàng)目，因?yàn)樗鼤?huì)影響生成的 HTML 中的實(shí)際元素，以及它們之間的相互關(guān)系。

然后這是最棒的——我完全可以通過(guò)檢查生成的網(wǎng)站來(lái)理解 BLEU 得分！

BLEU 得分可視化

一個(gè)完美的 1.0 的 BLEU 分?jǐn)?shù)將在正確的位置生成源圖像的正確元素，而較低的得分可以預(yù)測(cè)錯(cuò)誤的元素和/或?qū)⑺鼈兎旁谙鄬?duì)于彼此錯(cuò)誤的位置。最終我的模型能夠在測(cè)試集上得到 0.76 的 BLEU 分?jǐn)?shù)。

福利 - 定制樣式

我覺(jué)察到的一個(gè)額外福利是，由于模型只生成頁(yè)面的骨架（文檔的標(biāo)記），我可以在編譯過(guò)程中添加一個(gè)自定義的 CSS 層，并且可以即時(shí)看到網(wǎng)站的不同風(fēng)格。

一次轉(zhuǎn)換=> 同時(shí)生成多種樣式

將樣式與模型生成過(guò)程分離，給使用模型帶來(lái)了很多好處：

• 想要將 SketchCode 模型應(yīng)用到自己公司產(chǎn)品中的前端工程師可以按原樣使用該模型，只需更改一個(gè) CSS 文件以符合其公司的樣式要求

• 可擴(kuò)展性已內(nèi)置 - 使用一張?jiān)磮D像，模型輸出可立即編譯為 5、10 或 50 種不同的預(yù)定義樣式，因此用戶可以看到他們網(wǎng)站的多個(gè)版本，并在瀏覽器中瀏覽這些網(wǎng)站

總結(jié)與展望

通過(guò)利用圖像標(biāo)注的研究成果，SketchCode 能夠在幾秒鐘內(nèi)將手繪網(wǎng)站線框圖轉(zhuǎn)換為可用的 HTML 網(wǎng)站。

該模型有些局限性，大概包括以下幾點(diǎn)：

• 由于這個(gè)模型是用一個(gè)只有 16 個(gè)元素的詞匯進(jìn)行訓(xùn)練的，它不能預(yù)測(cè)訓(xùn)練數(shù)據(jù)之外的標(biāo)記。下一步可能是使用更多元素（如圖像，下拉菜單和表單）生成其他樣例網(wǎng)站——Bootstrap components 是個(gè)練手的好網(wǎng)站：https://getbootstrap.com/docs/4.0/components/buttons/

• 實(shí)際生產(chǎn)環(huán)境中，網(wǎng)站有很多變化。創(chuàng)建一個(gè)更能反映這種變化的訓(xùn)練數(shù)據(jù)集的好方法是去爬取實(shí)際的網(wǎng)站，捕獲他們的 HTML / CSS 代碼以及網(wǎng)站內(nèi)容的截圖

• 手繪素描也有很多變化，CSS 修改技巧沒(méi)有被模型完全學(xué)會(huì)。在手繪素描上生成更多變化的一種好方法是使用生成對(duì)抗網(wǎng)絡(luò)來(lái)創(chuàng)建逼真的繪制網(wǎng)站圖像

我很期待看到項(xiàng)目的進(jìn)一步發(fā)展！