選自 arXiv，作者：Zhihao Zhu等，機器之心編譯。
卷積神經網路在影象處理上無與倫比，它可以從影象抽取到非常精煉的高階語義特徵，這些資訊不論是做分類還是做定位都沒問題。但如果我們利用這些特徵生成使用者介面程式碼呢？那麼就需要同樣強大的模型將這些高階特徵解碼為一條條程式碼。最近西安交通大學提出一種使用者介面轉程式碼的新演算法，該演算法根據程式碼的層級特性構建了一種基於注意力的強大解碼器。
使用機器學習技術自動生成圖形使用者介面（GUI）程式碼是一個相對較新的研究領域。通常，按照設計編寫 GUI 對前端開發者來說是一項耗時又繁瑣的工作，因為這使得他們無法投入更多的時間來開發軟體的實用功能和邏輯。因此，構建一個將 GUI 原型自動轉化為對應程式設計程式碼的系統是非常有前景的。
近期人們使用機器學習技術自動生成人類可讀格式的程式，它們使用梯度下降從輸入-輸出樣本中匯出原始碼。然而，它們的效能被證明還不如基於離散搜尋的傳統技術，這一技術一直在程式語言社群得到廣泛哦使用。另一個同類研究是 DeepCoder，該系統嘗試利用統計預測來增強傳統搜尋技術，以生成計算機程式。然而，它對複雜程式語言建模的能力受限於其對特定領域語言（DSL）的依賴。
對於從視覺輸入生成程式碼的任務，目前只有為數不多的幾項研究，而其中，與本文研究最相似的是pix2code。pix2code 採用反饋機制，其中解碼過程可以通過兩種不同級別的 LSTM 迭代進行：「編碼」LSTM，對已經生成的程式碼序列進行編碼以減輕「解碼」LSTM 學習長序列關係的負擔。「解碼」LSTM，用於程式碼序列生成，然後將解碼 token 序列返回給「解碼」LSTM 以形成反饋迴圈。通過採用反饋機制，pix2code 能夠生成比其它基於單流程的方法長得多的單詞/token 序列。但是，它們的方法需要預先固定「編碼」LSTM 可以生成的最大序列長度。也就是說，程式碼長度範圍需要預先指定，這降低了該方法的可擴充性和泛化能力。該方法的另一個明顯缺陷是，它沒有把 GUI 及其程式碼的層次結構納入考慮，這限制了其生成準確圖形程式的效能。
為了解決這些問題，研究者們提出了一種用於自動生成圖形程式設計的新方法。它不僅能很好地解決長期依賴性問題，同時還能通過將程式碼生成過程以層級的方式表示出來而捕捉到程式碼的層級結構。研究者們的新方法使用層級解碼器來推理程式碼序列，並一個接一個模組地生成圖形原始碼。
下圖 1 展示了 GUI 和對應程式碼的示例，同時也展示了將 GUI 劃分為不同模組的方法。DSL 的詳細程式碼生成過程如下所示：首先第一階段的 LSTM 會用於解碼模組級別的影象視覺資訊，其中該 LSTM 的每一個隱藏狀態都包含了這個模組的一般上下文資訊。然後將第一階段 LSTM 的隱藏狀態和影象的卷積特徵輸入到注意力模型以選擇最重要的區域性卷積特徵，這些區域性卷積特徵會進一步饋送到第二階段的 LSTM，並作為上下文資訊以為對應的模組生成程式碼。
研究者在 pix2code 所提供的基準資料集進行了測試，且實驗結果表明他們的方法是非常高效的：他們的模型在所有三種子資料集（IOS、安卓和網頁端）都比目前最優的方法要好。此外為了進一步說明他們提出的模型在處理複雜的 GUI 時有更強的優勢，他們構建了一個新資料集，該資料集包含具有更多圖形元素的 GUI 截圖，且圖形元素的樣式和空間佈局更加多樣化。研究者表示在新的複雜資料集上，他們的方法會以更大的優勢好於其它對比的方法。
論文：Automatic Graphics Program Generation using Attention-Based Hierarchical Decoder
摘要：近期深度學習的研究進展使得利用編碼器-解碼器框架自動地將圖形使用者介面（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 生成對應程式碼塊的程式碼。
使用分層 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 小時。
