深度學習自動前端開發：從草圖到HTML只需5秒

在人們的不斷探索下，「使用人工智慧自動生成網頁」的方法已經變得越來越接近實用化了。本文介紹的這種名為 SketchCode 的卷積神經網路能夠把網站圖形用戶界面的設計草圖直接轉譯成代碼行，為前端開發者們分擔部分設計流程。目前，該模型在訓練後的 BLEU 得分已達 0.76。

你可以在 GitHub 上找到這個項目的代碼：https://github.com/ashnkumar/sketch-code

為用戶創造直觀、富有吸引力的網站是各家公司的重要目標，而且這是個快速進行原型、設計、用戶測試循環的過程。像 Facebook 這樣的大公司有著讓整個團隊專註於設計流程的人力，改動可能需要幾周的時間，並涉及到多種利益相關者；而小型企業就沒有這樣的資源，因此其用戶界面可能受到一些影響。

我在 Insight 當中的目標是使用現代深度學習演算法大大簡化設計工作流程，並使得任何規模的公司都能快速地創造並測試網頁。

現有的設計工作流程

現有工作流程涉及多個利益相關者

一個典型的設計工作流程如下所示：

• 產品經理進行用戶研究，從而制定技術參數表

• 設計人員將接受這些要求並嘗試創建低保真原型，最終創建高保真原型

• 工程師將這些設計轉化為代碼並最終將產品交付給用戶

開發周期的時間長度很快就會變成瓶頸，像 Airbnb 這樣的公司已經開始使用機器學習來提高這個過程的效率了。（參見：https://airbnb.design/sketching-interfaces/）

Airbnb 內部 AI 工具演示：從草圖到代碼

雖然這種工具很有希望成為機器輔助設計的例子，但是尚不清楚這種模型在端到端的情況下能完全訓練到什麼程度，也不清楚它在多大程度上依賴於手工製作的圖像特徵。這肯定是無法知道的，因為它目前還是 Airbnb 專有的非開源方案。我想創造一個「從繪圖到代碼」技術的開源版本，可供更多開發者和設計者使用。

理想情況下，我的模型可以採用簡單的網站設計手繪原型，並立即從該圖像生成一個可用的 HTML 網站：

SketchCode 模型需要繪製好的網站線框圖並能生成 HTML 代碼

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

從圖像標註中獲取靈感

我正在解決的問題屬於程序綜合（https://en.wikipedia.org/wiki/Program_synthesis）這個廣義任務範疇，即工作源代碼的自動生成。儘管很多程序綜合能處理從自然語言要求或執行軌跡所生成的代碼，但在我這個案例中，我可以從一個源圖像（手繪線框圖）開始，自動獲得想要的代碼。

機器學習領域中，有一個名為圖像字幕生成的領域（https://cs.stanford.edu/people/karpathy/deepimagesent/），該領域有著充分的研究，旨在學習將圖像和文本相連的模型，特別是生成關於源圖片內容的描述。

圖像標註模型生成源圖片的描述

我從最近一篇名為 pix2code 的論文和 Emil Wallner 使用該方法的一個相關項目獲得了靈感（參見：前端慌不慌？用深度學習自動生成 HTML 代碼），並決定將我的任務重構成圖像字幕生成問題的一部分，即將線框圖作為輸入圖像，將對應的 HTML 代碼作為輸出文本。

獲取正確的數據集

考慮到圖像標註的方法，我心中理想的訓練數據集是成千上萬對手繪線框圖和它們 HTML 代碼的等價物。不出所料，我無法找到這種數據集，因此我不得不為該任務創建自己的數據。

我從 pix2code 論文中提到的一個開源數據集（https://github.com/tonybeltramelli/pix2code）入手，它由 1750 張人工生成的網頁截圖和其對應源代碼構成。

pix2code 中生成的網站圖像及其源代碼數據集

這個數據集對我而言是個很好的開始，其中有一些有趣的地方：

• 數據集中每個生成的網站都包含幾個簡單的 Bootstrap 元素例如按鈕、文本框和 DIV。雖然這意味著我的模型將會因把這幾個元素作為「辭彙」（模型可選擇用於生成網站的元素）而受限制，這種方法應該很容易推廣到更大的元素辭彙表中。

• 每個示例的源代碼包含領域專用語言（DSL）的標記，這些符號是由論文作者創建的。每個標記對應於 HTML 和 CSS 的片段，且有一個編譯器將 DSL 轉化為工作使用的 HTML 代碼。

讓圖片更像手繪的

將網站的多彩主題切換成手寫主題。

為了調整數據集以適應我的任務，我得把網站的圖片弄得像是手繪的。對圖片的手繪化都得益於 OpenCV 和 PIL library 的灰度轉換和輪廓檢測功能。

最終，我決定直接通過一系列操作來直接修改原網站的 CSS 樣式表：

• 通過改變頁面元素的邊框半徑實現按鈕和 div 的圓潤化

• 調整邊框的粗細以模仿手繪素描，並添加陰影

• 將字體改為類手寫字體

我的最終版本又增加了一個步驟，通過加入傾斜，偏移和旋轉來進行數據增強，以模仿實際繪製的素描的不確定性。

使用圖像標註模型架構

現在我已經準備好我的數據了，我可以把它輸入模型進行訓練了！

我用的這個用於圖像標註的模型包括三個主要部分：

• 一個卷積神經網路（CNN）視覺模型用於提取源圖片特徵

• 一種由編碼源代碼標記序列的門控循環單元（GRU）組成的語言模型

• 一個解碼器模型（也是一個 GRU），它以前兩個步的輸出作為輸入，預測序列中的下一個標記

使用標記序列作為輸入來訓練模型

為了訓練這個模型，我把源代碼分成標記序列。其中一個序列及其源圖像是模型的單個輸入，其標籤是文檔中的下一個標記。該模型使用交叉熵成本（cross-entropy cost）作為其損失函數，將模型預測的下一個標記與實際的標記進行比較。

在模型從頭開始生成代碼的推理階段，該過程稍有不同。該圖像仍然通過 CNN 網路進行處理，但文本處理僅提供一個開始序列。在每一步中，模型對序列中下一個標記的預測將返回到當前輸入序列，同時作為新的輸入序列輸入到模型中。重複此操作直到模型預測出 <END> 標記或進程達到每個文檔的標記數的預定義上限。

一旦從模型中生成了一組預測標記，編譯器就會將 DSL 標記轉換為 HTML，這些 HTML 可以在任何瀏覽器中展示出來。

用 BLEU 得分評估模型

我決定用 BLEU 評分（https://machinelearningmastery.com/calculate-bleu-score-for-text-python/）來評估模型。這是機器翻譯任務中經常會用到的評估標準，它試圖在給定相同輸入的情況下，評估機器生成的文本與人類可能寫的文本的近似程度。

實質上，BLEU 通過比較生成文本和參考文本的 n-元 序列，生成精修改後的文本。它非常適合這個項目，因為它會影響生成的 HTML 中的實際元素，以及它們之間的相互關係。

然後這是最棒的——我完全可以通過檢查生成的網站來理解 BLEU 得分！

BLEU 得分可視化

一個完美的 1.0 的 BLEU 分數將在正確的位置生成源圖像的正確元素，而較低的得分可以預測錯誤的元素和/或將它們放在相對於彼此錯誤的位置。最終我的模型能夠在測試集上得到 0.76 的 BLEU 分數。

福利 - 定製樣式

我覺察到的一個額外福利是，由於模型只生成頁面的骨架（文檔的標記），我可以在編譯過程中添加一個自定義的 CSS 層，並且可以即時看到網站的不同風格。

一次轉換 => 同時生成多種樣式

將樣式與模型生成過程分離，給使用模型帶來了很多好處：

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

• 可擴展性已內置 - 使用一張源圖像，模型輸出可立即編譯為 5、10 或 50 種不同的預定義樣式，因此用戶可以看到他們網站的多個版本，並在瀏覽器中瀏覽這些網站

總結與展望

通過利用圖像標註的研究成果，SketchCode 能夠在幾秒鐘內將手繪網站線框圖轉換為可用的 HTML 網站。

該模型有些局限性，大概包括以下幾點：

• 由於這個模型是用一個只有 16 個元素的辭彙進行訓練的，它不能預測訓練數據之外的標記。下一步可能是使用更多元素（如圖像，下拉菜單和表單）生成其他樣例網站——Bootstrap components 是個練手的好網站：https://getbootstrap.com/docs/4.0/components/buttons/

• 實際生產環境中，網站有很多變化。創建一個更能反映這種變化的訓練數據集的好方法是去爬取實際的網站，捕獲他們的 HTML / CSS 代碼以及網站內容的截圖

• 手繪素描也有很多變化，CSS 修改技巧沒有被模型完全學會。在手繪素描上生成更多變化的一種好方法是使用生成對抗網路來創建逼真的繪製網站圖像

我很期待看到項目的進一步發展！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！