深度學習助力前端開發：自動生成GUI圖代碼（附試用地址）

選自arXiv

機器之心編譯

參與：Jane W、蔣思源

哥本哈根的一家初創公司 UIzard Technologies 訓練了一個神經網路，能夠把圖形用戶界面的截圖轉譯成代碼行，成功為開發者們分擔了部分網站設計流程。令人驚嘆的是，同一個模型能跨平台工作，包括 iOS、Android 和 Web 界面，從目前的研發水平來看，該演算法的準確率達到了 77%。

該公司發表的一篇研究論文，解釋了這個叫做 Pix2Code 的模型是如何工作的。要點如下：跟所有機器學習一樣，研究者們需要用手頭的任務實例去訓練模型。但與其他任務不同的是，它需要做的不是從圖片中生成圖片，也不是把文本轉換成文本，這個演算法要做到輸入圖片後生成對應的文本（在這裡就是代碼）輸出。為了實現這一點，研究者們需要分三個步驟來訓練，首先，通過計算機視覺來理解 GUI 圖像和裡面的元素（按鈕、條框等）。接下來模型需要理解計算機代碼，並且能生成在句法上和語義上都正確的樣本。最後的挑戰是把之前的兩步聯繫起來，需要它用推測場景來生成描述文本。

那些只有基本代碼知識的 UI 或平面設計師，有了它的幫助就能自己構建起整個網站了。在另一方面，它也能讓複製其他網站的代碼變得更容易，這是一個已經讓困擾了很多開發者的問題。雖然像在 Github 這樣的網站上，程序員之間已經流行起了協作共享的精神，但有些開發者—尤其是那些為需要原始網站的客戶開發網站的—他們並不想讓其他人剽竊自己的代碼。

以下這段視頻展示了應用效果：

在實際工作中，Pix2Cod 肯定能為開發者節省時間，他們就能把設計好界面的 JPEG 圖像輸入 Pix2Code，生成可運行的代碼，並且還能進一步調整和優化。而那些只有基本代碼知識的 UI 或平面設計師，有了它的幫助就能自己構建起整個網站了。

UIzard Technologies 還在繼續優化改模型，用更多的數據訓練它以提升準確度。公司創始人兼 CEO Tony Beltramelli 最近完成了他在哥本哈根信息技術大學（IT University of Copenhagen）和蘇黎世聯邦理工學院（ETH Zurich）的機器學習畢業項目，也有將 Pix2Code 貢獻給學校的考慮。「考慮到線上可訪問網站的數量已經非常多，而且每天都有新的網站被開發出來，互聯網理論上能支持無限數量的訓練數據」他在研究論文里寫到。「我們推斷，以這種方式使用的深度學習最終會終結對手動編程 GUI（圖形用戶界面）的需求」。

Pix2Code 是 UIzard 開發的第一個 app，而且還處於測試階段。這家公司的願景是幫助開發者、設計者和初創公司省去在開發初期階段寫代碼的流程，為原型設計、迭代和最終生成更好的產品留出更多的時間，最終開發出更好的 app 和網站。

• 論文地址：https://arxiv.org/pdf/1705.07962.pdf

• Github 項目地址：https://github.com/tonybeltramelli/pix2code

• 申請試用地址：https://uizard.io/?email_field=mmill06%40gmail.com

機器之心對這篇論文內容進行了概述性介紹，內容如下：

摘要：計算機開發人員經常將設計師設計的圖形用戶界面（GUI）截圖通過編譯計算機代碼應用到軟體、網站和移動應用程序中。在本文中，我們展示了給定圖形用戶界面圖像作為輸入，深度學習技術可以被用來自動生成代碼。我們的模型能夠從單一輸入圖像中生成針對三種不同平台（即 iOS、Android 和基於 Web 的技術）的代碼，其準確率超過 77％。

引言

在客戶端軟體實現基於由設計師設計的圖形用戶界面（GUI）的過程是開發人員的責任。然而，編寫實現 GUI 的代碼是耗時的，並且佔用了開發人員大量用於實現軟體實際特徵和邏輯的時間。此外，不同的特定平台用於實現這種 GUI 的計算機語言也不盡相同；從而導致在開發針對多個平台的軟體時繁瑣而重複的工作（儘管都運用本機技術）。在本文中，我們描述了一個給定圖形用戶界面截圖作為輸入，可以自動生成特定平台代碼的系統。我們推斷，此方法的擴展版本可能會終止手動編程 GUI 的需要。

本文的第一個貢獻是 pix2code，一個基於卷積和循環神經網路的新方法，它能夠由單個 GUI 屏幕截圖生成計算機代碼。

本文的第二個貢獻是發布來自三個不同平台的 GUI 屏幕截圖和相關源代碼組成的合成數據集。在本文發表後，此數據集將開源免費使用，以促進今後的研究。

Related Work（略）

pix2code

給出 GUI 屏幕截圖生成代碼的任務可以類比於給出場景照片生成文本描述的任務。因此，我們可以將問題分為三個子問題。首先，是一個計算機視覺問題：理解給定場景（即這種情況下為 GUI 截圖）並推斷圖中的對象、身份、位置和姿勢（即按鈕、標籤、元素容器）。第二，是一個語言模型問題：理解文本（即這種情況下為計算機代碼）併產生語法和語義正確的樣本。最後，通過利用前兩個子問題的解決方案生成代碼，即運用從場景理解推斷出的潛在變數（latent variable）來生成相應文本描述（這裡是計算機代碼而不是文本）。

圖 1：pix2code 模型的架構概述。訓練中，GUI 屏幕截圖由基於 CNN 的計算機視覺模型編碼；對應於 DSL 代碼（領域特定語言）的獨熱編碼（one-hot encode）符號的序列由含有 LSTM 層堆棧的語言模型編碼。然後將兩個得到的編碼向量進行級聯並饋送到用作解碼器的第二個 LSTM 層堆棧中。最後，用 softmax 層對符號進行單個抽樣；softmax 層的輸出大小對應於 DSL 的辭彙量大小。給定圖像和符號序列，模型（即灰色框中的內容）是可微分的，因此在預測序列中的下一個符號時可以通過梯度下降來端到端地優化。在每次預測時，輸入狀態（即符號序列）都會被更新以包含上次預測的符號。在抽樣時，使用傳統的編譯器設計（compiler design）技術將生成的 DSL 代碼編譯為所需的目標語言。

3.1 視覺模型

CNN 目前是解決各種視覺問題的首選方法，因為它們自身的拓撲結構便於學習訓練的圖像中豐富的潛在表徵 [14,10]。我們通過將輸入圖像映射到一個學習到的固定長度向量，運用 CNN 來進行無監督特徵學習；從而起到如圖 1 所示的編碼器的作用。

初始化時，輸入圖像的大小重新定義為 256×256 像素（不保留寬高比），像素值在饋送到 CNN 之前被標準化。不進行進一步的預處理。為了將每個輸入圖像編碼為固定大小的輸出向量，我們專門使用卷積步長（stride）為 1 的小 3×3 感受野（receptive field），此方法與 Simonyan 和 Zisserman 用於 VGGNet 的方法相似 [15]。這些操作進行兩次，然後運用最大池化進行下採樣（down sample）。第一個卷積層的寬度為 32，其後是寬度為 64 的層，最後為寬度 128 的層。最後，使用 2 個大小為 1024 的全連接層運用修正線性單元激活函數（rectified linear unit activation）來完成視覺模型的建模。

圖 2：在 DSL 中編寫本機的 iOS GUI 的例子。

3.2 語言模型

我們設計了一個簡單的 DSL 來描述圖 2 所述的 GUI。在該項工作中，我們只對 GUI 的布局感興趣，只對那些不同圖形控制項及其相互間的關係感興趣，因此我們的 DSL 實際上忽略了標籤控制項的文本值。另外為了縮小搜索空間的大小，簡化 DSL 減少了辭彙量的大小（即由 DSL 支持的符號總數量）。因此我們的語言模型可以通過使用獨熱編碼（one-hot encoded）向量的離散型輸入執行字元級的語言建模，這也就降低了對如 word2vec [12] 那樣詞嵌入技術的需求，因此也就大大降低了計算量。

在大多數編程語言和標記語言中，元素通常聲明為開放符號。但如果子元素或指令包含在一個塊（block）內，解釋器或者編譯器通常需要一個封閉符號（closing token）。如果包含在父元素中的子元素數量是一個變數，那麼重要的是構建長期相關性（long-term dependencies）以封閉一個開放性的塊（block）。而傳統的循環神經網路（RNN）在擬合數據時會出現梯度消失或梯度爆炸的情況，因此我們選擇了能很好解決這個問題的長短期記憶（LSTM）。不同的 LSTM 門控輸出可由以下方程組計算：

其中 W 為權重矩陣，xt 為在時間 t 的新輸入向量，ht?1 是先前生成的輸出向量，ct?1 是先前生成的單元狀態輸出，b 是偏置項，而 φ 和 σ 分別是 S 型激活函數（sigmoid）和雙曲正切激活函數（hyperbolic tangent）。

3.3 複合模型

我們的模型採用的是監督學習，它通過投送圖像 I 和符號 T 的序列 X（xt, t ∈ {0 . . . T ? 1}）作為輸入，而將符號 xT 作為目標標註。正如圖 1 所示，基於 CNN 的視覺模型將輸入圖像 I 編碼為向量表徵 p，而基於 LSTM 的語言模型通過將輸入符號 xt 編碼為中間表徵 qt 而允許模型更關注於特定的符號和少關注於其他符號 [7]。

第一個語言模型由兩個 LSTM 層、每層帶有 128 個單元的堆棧而實現。視覺編碼向量 p 和語言編碼向量 qt 可以級聯為單一向量 rt，該級聯向量 rt 隨後可以投送到基於 LSTM 的模型來解碼同時由視覺模型和語言模型學到的表徵。因此解碼器就學到了輸入 GUI 圖像中的對象和 DSL 代碼中的符號間的關係，因此也就可以對這一關係進行建模。我們的解碼器由兩個 LSTM 層、每層帶有 512 個單元的堆棧而實現。整個架構可以數學上表示為：

該架構允許整個 pix2code 模型通過梯度下降實現端到端的優化，這樣以便系統在看到圖像和序列中前面的符號而預測下一個符號。

3.4 訓練

用於訓練的序列長度 T 對長期相關性（long-term dependencies）建模十分重要。在經驗性試驗後，用於訓練的 DSL 代碼輸入文件由大小為 48 的滑動窗口（sliding window）分割，即我們用 48 步展開循環神經網路。

訓練由損失函數對神經網路的權重求偏導數而執行反向傳播演算法，因此可以最小化多級對數損失而進行訓練：

其中 xt+1 為預期符號（expected token），yt 為預測符號。

3.5 抽樣

為了生成 DSL 代碼，我們投送 GUI 圖像和 T = 48 符號的序列 X，其中符號 xt . . . xT ?1 設置為空符號，而序列 xT 設置為特別的符號。

表 1：數據集統計

試驗

圖 3：在不同訓練集的訓練損失和模型在訓練 10 個 epochs 中的抽樣 ROC 曲線。

表 2：在測試集（表 1 所述）上的試驗結果報告。

圖 4、5、6 展示了輸入 GUI 圖像（樣本真值），和由已訓練 pix2code 模型生成輸出的 GUI。

圖 4：iOS GUI 數據集中的試驗樣本。

圖 5：安卓 GUI 數據集中的試驗樣本。

圖 6：網頁 GUI 數據集的試驗樣本。

結語

在本論文中，我們提出了 pix2code 模型，它是一種給定 GUI 圖片作為輸入，且能生成計算機代碼的新方法。雖然我們的工作展示了這樣一種能自動生成 GUI 代碼的潛力系統，但我們的工作只是開發了這種潛力的皮毛。我們的模型由相對較少的參數組成，並且只能在相對較小的數據集上訓練。而構建更複雜的模型，並在更大的數據集上訓練會顯著地提升代碼生成的質量。並且採用各種正則化方法和實現注意力機制（attention mechanism [1]）也能進一步提升生成代碼的質量。同時該模型採用的獨熱編碼（one-hot encoding）並不會提供任何符號間關係的信息，而採用 word2vec [12] 那樣的詞嵌入模型可能會有所好轉，同時獨熱編碼（one-hot encoding）也會限制可支持的符號數量。最後，由於近來生成對抗網路（GAN）在圖片生成上有極其出色的表現，也許我們可以藉助 GAN 及其思想由 GUI 圖像生成計算機代碼。

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