前端設計圖轉程式碼，西安交大表示覆雜介面也能一步步搞定

近期人們使用機器學習技術自動生成人類可讀格式的程式，它們使用梯度下降從輸入-輸出樣本中匯出原始碼。然而，它們的效能被證明還不如基於離散搜尋的傳統技術，這一技術一直在程式語言社群得到廣泛哦使用。另一個同類研究是 DeepCoder，該系統嘗試利用統計預測來增強傳統搜尋技術，以生成計算機程式。然而，它對複雜程式語言建模的能力受限於其對特定領域語言（DSL）的依賴。

對於從視覺輸入生成程式碼的任務，目前只有為數不多的幾項研究，而其中，與本文研究最相似的是 pix2code。pix2code 採用反饋機制，其中解碼過程可以透過兩種不同級別的 LSTM 迭代進行：「編碼」LSTM，對已經生成的程式碼序列進行編碼以減輕「解碼」LSTM 學習長序列關係的負擔。「解碼」LSTM，用於程式碼序列生成，然後將解碼 token 序列返回給「解碼」LSTM 以形成反饋迴圈。透過採用反饋機制，pix2code 能夠生成比其它基於單流程的方法長得多的單詞/token 序列。但是，它們的方法需要預先固定「編碼」LSTM 可以生成的最大序列長度。也就是說，程式碼長度範圍需要預先指定，這降低了該方法的可擴充性和泛化能力。該方法的另一個明顯缺陷是，它沒有把 GUI 及其程式碼的層次結構納入考慮，這限制了其生成準確圖形程式的效能。

為了解決這些問題，研究者們提出了一種用於自動生成圖形程式設計的新方法。它不僅能很好地解決長期依賴性問題，同時還能透過將程式碼生成過程以層級的方式表示出來而捕捉到程式碼的層級結構。研究者們的新方法使用層級解碼器來推理程式碼序列，並一個接一個模組地生成圖形原始碼。

下圖 1 展示了 GUI 和對應程式碼的示例，同時也展示了將 GUI 劃分為不同模組的方法。DSL 的詳細程式碼生成過程如下所示：首先第一階段的 LSTM 會用於解碼模組級別的影像視覺資訊，其中該 LSTM 的每一個隱藏狀態都包含了這個模組的一般上下文資訊。然後將第一階段 LSTM 的隱藏狀態和影像的卷積特徵輸入到注意力模型以選擇最重要的區域性卷積特徵，這些區域性卷積特徵會進一步饋送到第二階段的 LSTM，並作為上下文資訊以為對應的模組生成程式碼。

圖 1：給定一張 GUI 截圖影像後，研究者新模型所生成的程式碼示例。其中 (a) 為輸入 GUI，它會以某些方式分割為 5 個模組。(b) 展示了模型根據 5 個模組所對應生成的 DSL 程式碼，最後 (c) 為根據前面所生成的 DSL 程式碼而重新渲染的 GUI。

研究者在 pix2code 所提供的基準資料集進行了測試，且實驗結果表明他們的方法是非常高效的：他們的模型在所有三種子資料集（IOS、安卓和網頁端）都比目前最優的方法要好。此外為了進一步說明他們提出的模型在處理複雜的 GUI 時有更強的優勢，他們構建了一個新資料集，該資料集包含具有更多圖形元素的 GUI 截圖，且圖形元素的樣式和空間佈局更加多樣化。研究者表示在新的複雜資料集上，他們的方法會以更大的優勢好於其它對比的方法。

論文：Automatic Graphics Program Generation using Attention-Based Hierarchical Decoder

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

摘要：近期深度學習的研究進展使得利用編碼器-解碼器框架自動地將圖形使用者介面（GUI）截圖轉換為程式碼變得可能。儘管常用的影像編碼器（例如 CNN 網路）能提取足夠的影像特徵，將這些抽象影像特徵解釋為數百程式碼符號對基於 RNN 的程式碼生成器而言是很大的挑戰。考慮到用於描述 GUI 的程式碼通常是分層的結構，我們提出了一種基於注意力的程式碼生成模型，它可以用更精細級別的細節描述 GUI 影像，同時也可以生成和 GUI 的圖形元素的分層展開一致的分層結構化程式碼。我們的模型遵循編碼器-解碼器框架，所有的元件都能以端到端的方式聯合訓練。實驗結果表明我們的方法在公開 GUI-程式碼資料集和我們提出的資料集上都超越了其它當前最佳方法。

本文提出的方法

我們的方法將一個 GUI 截圖作為輸入，生成程式語言來描述它，並被設計為能利用 GUI 和圖形程式的分層特徵。圖 2 展示了我們的基於注意力的分層程式碼生成模型。我們首先使用從 CNN 得到的中間濾波器響應來構建影像的高階抽象視覺表徵，由ν表示，然後將其輸入到兩個層級的分層 LSTM：一個 block LSTM 和一個 token LSTM。block LSTM 接收影像的視覺特徵，然後確定用多少程式碼塊來生成最終的程式。block LSTM 的隱藏狀態 h^block_t 在每個時間步 t 被饋送到一個注意力模型作為引導向量來選擇視覺特徵圖中最重要的子區域。給定選取的視覺特徵作為語境，token LSTM 生成對應程式碼塊的程式碼。

圖 2：我們提出的用於自動生成圖形程式的模型概覽。輸入 GUI 截圖首先被饋送到 CNN 獲取高階視覺特徵。所有的視覺特徵被投影為 R^D，經過池化得到緊湊的影像表徵，然後被饋送到 block LSTM 作為輸入。block LSTM 確定生成基於 p_t 的程式碼塊數量，並生成引導向量 h^block_t，再被饋送到注意力模型來選擇特定 CNN 特徵，以輸入第 t 個 token LSTM 來生成第 t 個程式碼塊的程式碼。

使用分層 LSTM 使得以端到端的方式訓練整個模型成為可能。訓練資料由 (x,y) 對構成，其中 x 代表輸入 GUI 截圖，y 代表 GUI 的對應程式碼。和 pix2code 中的方法不同，其中使用了一個固定尺寸的滑動視窗來獲取程式碼片段，再在不同的訓練迭代中饋送到「編碼器」LSTM 中，我們的方法僅需要饋送一次完整的程式碼到模型中。

實驗

我們在兩個資料集上實現了該論文提出的自動圖程式設計生成模型，每個資料集都由 GUI 截圖與對應的原始碼組成。

• 第一個是由 pix2code 論文給出的公開資料集 PixCo；

• 第二個是我們自己的資料集：PixCo-e 資料集。

我們首先重新把輸入影像的大小改為 256×256，然後對畫素值進行歸一化。在編碼部分，為了進行更好地壓縮，我們採用 pix2code 論文中同樣基於 CNN 的編碼架構，它包含 3 個寬度分別為 32、64、128 的卷積層，和兩個全連線層。在解碼部分，模組 LSTM 和 tokenLSTM 的輸入維度都設定為 512，sigmoid 被用作非線性啟用函式。此外，因為我們的 token 詞彙很小，我們直接使用帶有 one-hot 編碼向量的 token 級別的語言模型。

在訓練流程中，我們使用 Adam 演算法進行模型更新，mini-batch 大小為 128。我們把模型的學習率設定為 0.001，dropout 率設定為 0.5。使用單個英偉達 TITAN X GPU，整個訓練流程在 PixCo 資料集上大約花費 3 小時，在 PixCo-e 資料集上大約花費 6 小時。

圖 3：我們的模型在 PixCo 資料集上的定性結果。黑色代表我們的模型生成的 DSL 程式碼，藍色的是真實值 DSL 程式碼，GUI 截圖如圖中所示。a、b、c 分別代表 iOS、安卓和 Web 平臺。

圖 4：隨著時間推移變化的注意力。隨著模型生成每個模組，其注意力有所改變，從而反映出影像的相關部分。亮色區域表示注意力所在，暗色區域注意較少。橘色程式碼是當前步驟生成的模組。

表 1：基線-2 方法和本文提出的方法在 PixCo 和 PixCo-e 資料集上模組劃分準確率的效能對比。

表 2：本文提出方法與基線-1、基線-2 和 pix2code 方法在測試集上的效能對比。所有方法都使用貪婪搜尋策略。

圖 5：來自基於網頁的 GUI 資料集的實驗樣本。左邊的樣本來自 PixCo 資料集，右邊的樣本來自 PixCo-e 資料集。