前端開發者的福音：根據UI設計圖自動生成GUI骨架程式碼
做過前端開發的人常有這樣的經歷，面對一張 UI 設計圖片，要把它轉換為相應 GUI 骨架程式碼。首先開發者需要從視覺上理解圖片中的 UI 元素及其空間佈局，然後將自己的理解轉換為合適的 UI 元件以及元件間的組合，如圖 1 所示。
圖 1 將 UI 設計圖轉換為 GUI 骨架元素（部分）
然而，UI 設計圖與 GUI 骨架之間存在概念上的差異，為了彌合這一差距，開發人員需要了解 GUI 骨架的所有元件及其支援的視覺效果，以及不同元件的互動和組合效果。這個差異可以理解為對 UI 設計的元素描述和程式碼實現之間的知識鴻溝。實際上，更多的開發者正使用反覆試驗的方式來弄清楚 GUI 元件組合方式來實現給定的 UI 設計，這樣的跟蹤和不斷地嘗試非常麻煩，也浪費了寶貴的開發時間，不利於 UI 設計開發的快速迭代。
有沒有辦法通過 UI 設計圖直接生成 GUI 骨架程式碼來簡化這個繁複的轉換過程，讓開發者解放更多精力投入到後續的應用功能開發中去？
某些工具聲稱可以在給定 UI 設計圖的情況下自動生成 GUI 骨架程式碼，但這些工具由於是基於人工設計的視覺理解規則實現的，因此功能十分有限，不能處理真實複雜的 UI 設計（如圖 1）。
Chunyang Chen (Monash)、Ting Su (NTU)、Guozhu Meng (SKLOIS)、Zhenchang Xing (ANU)、Yang Liu (NTU) 提出了一種根據給定 UI 設計圖自動化生成 GUI 骨架程式碼的神經網路翻譯模型 ui2code。從現有應用程式中提取 UI 設計和 GUI 實現的眾包知識，並開發一個 GUI 骨架生成工具（專家），在給定 UI 設計圖的情況下自動生成 GUI 骨架。這個專家知道各種各樣的 UI 設計和 GUI 骨架，它可以向開發人員建議 GUI 框架的元件應該如何組合佈局以實現 UI 設計影象。
論文：From UI Design Image to GUI Skeleton: A Neural Machine Translator to Bootstrap Mobile GUI Implementation in International Conference on Software Engineering 2018 (ICSE’18)
論文連結：https://chunyang-chen.github.io/publication/ui2code.pdf
一、與眾不同的神經網路翻譯器模型
和普通的源語言和目標語言都是文字資料的機器翻譯不同，從 UI 設計圖到 GUI 骨架程式碼的機器翻譯任務需要聯合處理影象和文字資料。另外，這個機器翻譯任務也和作為單詞序列的文字不同，系統的輸入 UI 設計圖包含 UI 元素的空間佈局資訊，並且系統輸出的 GUI 骨架是 GUI 元件的分層組合。考慮到上述任務特徵，研究者們設計了一個神經網路翻譯器，它由一個卷積神經網路（CNN）、一個遞迴神經網路（RNN）編碼器和一個 RNN 解碼器組成，如圖 2 所示。
給定輸入 UI 設計圖，CNN 通過一系列卷積和池化操作提取多種影象特徵，然後，RNN 編碼器將這些影象特徵的空間佈局資訊編碼為向量 C，最後由 RNN 解碼器使用該向量 C 以令牌序列的方式表示生成 GUI 骨架。
圖 2神經網路翻譯器模型
二、模型設計完成，訓練資料從何而來？
為了訓練前文提到的神經網路翻譯器，需要一組來自移動應用程式的大量 UI 影象和對應的 GUI 骨架。受自動化 GUI 測試技術的啟發，研究者開發了一種自動化技術來探索 GUI 元件及佈局，如圖 3 所示。在探索階段，程式將自動儲存與執行時 GUI 元件層次結構配對的螢幕 UI 截圖，儲存內容類似圖 4 所示。
圖 3 自動化探索一個應用程式的不同介面
圖 4 UI 設計圖對應的 GUI 骨架
自動化 UI 探索工具使用 Android 模擬器來執行 Android 應用程式，儲存成對的 UI 截圖和相應的執行時 GUI 元件層次結構。此工具在有 32 個IntelXeon CPU 和 189G 記憶體的 64 位 Ubuntu 16.04 伺服器上執行，其並行控制 16 個模擬器收集資料（每個應用程式執行 45 分鐘）。
論文抓取了 Google+Play/">Google Play 中的 6000 個 Android 應用，UI 探索工具成功運行了其中 5043 個屬於 25 個不同類別的應用程式，圖 5（a）展示了每個類別中的應用程式數量。其餘 957 個應用程式需要額外的硬體支援或需要模擬器中沒有的第三方庫。最終 UI 探索工具收集了 185,277 對 UI 影象和 GUI 程式碼骨架，並將資料用於神經機器翻譯器的訓練和測試。圖 5（b）中的方框圖顯示了收集的 GUI 骨架的複雜性，從圖中可以看出這些資料具有豐富的多樣性。
圖 5 UI 資料集統計
三、訓練好的神經網路翻譯器有多給力？
1、正確率&實用性
在 10804 個測試 UI 影象中，生成的 6513（60.28％）個 UI 影象對應的 GUI 骨架與實際 GUI 骨架完全匹配，證明了模型成功捕獲了 UI 影象包含的元件及其佈局資訊。
另外，論文隨機選擇了 20 個不在上述 UI 資料集中且安裝量在一百萬以上的應用程式（熱門應用程式通常具有豐富的 GUI 內容），共收集了 1208 個 UI 影象，併為其生成了 GUI 骨架。實驗結果顯示，平均正確率為 59.47％，證明了神經網路翻譯器具有較強泛化能力。
最後，論文進行了一項試驗性使用者研究，在此研究中包括使用神經網路翻譯器指導的實驗組和全程自行實現的對照組。實驗組比對照組實現 GUI 時間分別為平均 6.14 分鐘和 15.19 分鐘。實際上，對照組的平均時間比結果體現的更長，因為其中四分之三的參與者在 20 分鐘內未能完成至少一個 UI 影象，而實驗組的所有參與者在 15 分鐘內完成所有任務。實驗表明，神經網路翻譯器具有較強實用性，可以輔助開發者生成 GUI 骨架，縮短設計流程。
2、論文選取了一些有代表性的例子來展示神經網路翻譯器的轉換效果。
1）具有挑戰性的 UI 設計圖
圖 6（a）和圖 6（b）展示了兩個具有挑戰性的案例。圖 6（a）是一個益智遊戲的設定 UI，其中進入遊戲的圖示（紅色框處）包含字元表。神經網路翻譯器可以正確地將紅色框中的區域識別為影象，併為其生成 ImageView 而不是 TextView。圖 6（b）中的 UI 包含背景影象，前景中有一些 UI 元素（紅色框處）。神經網路翻譯器也可以正確地將前景元素和背景影象分開，而不是將 UI 元素視為背景影象的一部分。從上述兩個例子可以看出，神經網路翻譯器可以可靠地區分不同型別的視覺元素並生成正確的 GUI 元件。
2）複雜的 UI 元素佈局
圖 6（c）展示了包含一個 6 層巢狀組合的元件結構的 UI 設計圖，圖 6（d）展示了一個有 60 個 GUI 元件的 UI 設計，這些 GUI 元件的形狀，大小和對齊方式各不相同。對於這兩種在深度和廣度上覆雜度較高的情況，神經網路翻譯器生成的 GUI 骨架與 UI 設計圖對應的 GUI 骨架完全匹配。由此看出，神經網路翻譯器可以克服複雜的 UI 元素空間佈局並生成正確的 GUI 骨架程式碼。
圖 6神經網路翻譯器對 UI 設計圖的視覺理解例子