用戶界面代碼生成研究進展

王慧亞，范佳琪，張志翔

（四川大學計算機學院，成都610065）

0 引言

隨著互聯網技術的進步和智能設備的普及，各種網站、移動應用層出不窮，極大地方便了人們的生活。對于一個新應用的開發者來說，無論是出于搶占市場的考量，還是節約成本的打算，縮短項目開發周期都是永恒的追求。在軟件開發的各個流程中，用戶界面的設計和實現是非常重要的一部分。用戶界面（User Interface，UI），是系統和用戶之間進行交互和信息交換的媒介，它實現信息的內部形式與人類可以接受形式之間的轉換；界面需要體現需求，展示功能，同時界面風格對用戶體驗也有莫大的影響[1]。因此在軟件開發過程中，界面開發十分重要。

界面開發的一個重要步驟是起草和設計模型，它有助于用戶界面的實例化，以評估或驗證抽象的設計概念。在工業環境中，這一過程通常由專門的設計師執行，他們擁有特定領域的專業知識，能夠使用圖像編輯軟件制作具有吸引力、直觀的圖形用戶界面，或是創建線框或實體模型，從而在投入開發資源實現它們之前對設計進行評估。在創建了這些初始設計草稿之后，必須將它們轉換為代碼，以便最終用戶能夠以其預期的形式體驗用戶界面。這一過程是耗時、繁瑣且易出錯的，即使軟件開發人員具有相當的專業知識，完成設計圖到代碼的轉換也要花費大量時間和精力。因此，用戶界面的自動化生成是一項意義重大的研究，可以解放開發者生產力，使其有更多時間專注于邏輯和業務的實現，縮短開發周期。本文對目前存在的界面自動生成研究進行了整理和歸納，介紹了部分代表性工作，同時對這些工作存在的限制進行了說明，并在此基礎上提出了對未來研究方向的猜想。

1 研究現狀

1.1 基于模型的界面生成

界面生成方法早期是基于模型的，建模者需要對整個系統有充分的了解，定義包括任務、用戶、展示、會話和平臺模型在內的多個模型，模型可以用高度專業化的標記來表示，從而使得界面更容易創建和維護。

Puerta 描述了Mobi-D（基于模型的界面設計器），這是一個通過基于模型的界面開發支持以用戶為中心的設計的綜合環境[12]。為了解決從場景到正式規范的過渡以及UI 代碼的生成不明確的問題，Elkoutbi 等人提出了一種需求工程方法，該方法從場景生成用戶界面原型，并生成應用程序的正式規范[13]。為了對交互操作對象進行建模，以及實現交互對象與域對象的協作，Silva 等人設計了交互式應用程序的統一建模語言（UMLi），該語言是UML 的擴展，為UI 設計提供支持[14]。馮仕紅等人利用模型驅動理論，建立了一個包括多個平臺無關模型和平臺相關模型的多設備用戶界面模型[16]。

為了解決缺少對界面進行良好描述的界面描述語言，或者生成的界面依然遵循傳統的圖形用戶界面的規范的問題，杜一等人首先提出一種多尺度的界面描述方法，該方法能夠在不同的層次上對界面進行模塊化的描述；然后以該描述方法為基礎，提出一種基于該方法的移動界面生成框架[17]。

1.2 基于機器學習的界面生成

利用機器學習技術生成圖形用戶界面代碼是一個相對較新的研究領域，近年使用機器學習技術自動生成的人類可讀格式的程序是[4-5]，使用梯度下降法通過解釋程序從輸入輸出示例中生成源代碼。然而，他們的表現已經被文獻[6]證明不如離散編程語言社區廣泛使用的基于搜索的技術。

另一項工作是DeepCoder，這是一個能夠通過利用統計預測來增強傳統搜索技術來生成計算機程序的系統[7]。這項工作中，作者定義了一種表達性足夠的編程語言，包括現實世界的編程問題，同時可以從輸入輸出示例中預測，得到了用于將輸入輸出示例集映射到程序屬性的模型，進行了與標準程序合成技術相比表現出一個數量級加速的實驗，這使得該方法可用于解決與編程競爭網站上出現的最簡單問題類似的難題。

在Gaunt 等人的研究中，通過可微分解釋器學習輸入輸出示例之間的關系，可以生成源代碼[6]。作者的目標是開發基于神經網絡和圖形模型的新機器學習方法，并理解機器學習技術相對于傳統替代方案的能力，例如基于編程語言社區的約束求解的方法。其主要貢獻是TerpreT 的提出，這是一種用于表達程序合成問題的領域特定語言。TerpreT 類似于概率編程語言：模型由程序表示的規范（隨機變量的聲明）和描述程序如何將輸入映射到輸出（將未知數連接到觀察的模型）的解釋器組成。推理任務是觀察一組輸入輸出示例并推斷底層程序。

此外，Ling 等人演示了從混合自然語言和結構化程序規范作為輸入的程序合成[8]。值得注意的是，大多數這些方法都依賴于域特定語言（DSL），計算機語言（例如標記語言、編程語言、建模語言），它們是為專用域設計的，但通常比全功能的計算機語言更具限制性。因此，使用DSL 限制了需要建模的編程語言的復雜性并減小了搜索空間的大小。

1.3 基于可視輸入的界面生成

通過可視輸入，例如手繪，UI 屏幕截圖等生成代碼的工作較少。其中pix2code[9]是第一個試圖通過機器學習方法學習潛在變量而不是工程復雜啟發式，來解決視覺輸入產生用戶界面代碼問題的工作。作者首先從原型圖生成DSL（領域專用語言），再將DSL 編譯為源代碼。作者用設計原型圖及DSL 上下文作為訓練數據，用一個CNN 網絡獲取圖像特征，兩個LSTM 網絡來理解DSL 上下文的基本規律以及DSL 與對應原型圖的關系。pix2code 整體表現不錯，但存在一定的限制，例如需要預先制定代碼長度范圍，以及pix2code 沒有考慮GUI 的層次結構以及代碼結構。

之后有研究對pix2code 進行改進。按時間順序預測的標準LSTM 忽略了未來的上下文信息，有時僅僅查看前一個單詞是不夠的。因為計算機代碼是相對空間關系，不僅需要識別令牌，還要完全理解所有序列的結構。為了解決該問題，Liu 等人將pix2code 模型用雙向LSTM 優化，其允許輸出層獲得輸入序列中的每個點的完整的過去和未來的上下文信息[19]。該模型在測試集中的轉換精度得到了顯著提高，達到了85%。

Zhihao Zhu 等人基于注意力的分層解碼模型對pix2code 做出了改進[10]，作者提出了一種基于注意力的代碼生成模型，它可以更精細地描述GUI 圖像，同時也可以生成和GUI 的圖形元素的分層展開一致的分層結構化代碼。并且所有組件都能單獨提取出來進行端到端方式聯合訓練，實驗結果表明作者的方法對比于pix2code 在公開的GUI 代碼數據集和他們自己提出的數據集中都有明顯的進步.

Tuan Anh Nguyen 等人首次提出自動對移動應用程序用戶界面進行逆向工程的技術（REMAUI）[20]。REMAUI 自動從用戶界面的屏幕截圖或概念設計圖中推斷移動應用程序用戶界面的源代碼。在給定的輸入位圖上，REMAUI 通過計算機視覺和光學字符識別（OCR）技術識別用戶界面元素，之后推斷合適的用戶界面層次結構，并將結果作為源代碼導出，以便編譯和執行。實驗評估結果顯示，REMAUI 生成的UI 在像素級別以及在其運行時的UI 層次結構上，與原始UI 相似。但REMAUI 同樣存在限制，第一，不支持將檢測到的組件分類為其本地組件類型，而是使用文本或圖像的二進制分類，限制了該方法的實際適用性；第二，從開發人員的角度來看，不清楚REMAUI 生成的GUI 層次結構是否真實有用，因為沒有對GUI 層次結構進行評估。

Kevin Moran 等人在REMAUI 的基礎上提出了REDRAW[11]。相比之下，REDRAW 不特定于任何特定領域，采用數據驅動的方法來分類和生成GUI 層次結構，能夠使用CNN 將GUI 組件分類為各自的類型，以及能夠使用數據驅動的迭代KNN 算法結合計算機視覺技術生成真實的GUI 層次結構。

1.4 基于深度學習的界面生成

基于可視輸入的方法完美適應軟件開發流程，是今后界面生成的研究趨勢。圖像到界面代碼的轉換主要是視覺問題，而深度學習在視覺問題方面取得了相當大的成功，并且界面數據量相當大，滿足深度學習的應用條件。

目前基于深度學習進行界面生成的研究比較少，其中1.3 小節中提到的pix2code[9]首次使用深度學習直接從截圖推斷代碼。它是在大型語料庫（圖形用戶界面（GUI）屏幕截圖和相關代碼）上進行訓練的，利用循環神經網絡學習了組件與其代碼之間的關系。pix2code 的優點在于它只需要示例數據并且可以學習新樣式的關聯。然而，盡管pix2code 在其數據集上具有高性能，但它暫時無法推廣到實際生產中[11]。

sketch2code 使用深度學習方法將在紙上繪制的線框直接轉換為代碼[15]。這允許一個沒有經過編程訓練的人通過在紙上繪制線框圖，來生成完整的功能正常的網站。雖然結果表明該方法沒有足夠高的性能來用于生產環境，但他們的數據集、框架和評估技術將促進未來的研究。

2 結語

基于模型的界面生成技術存在很多局限性。界面模型一般都抽象復雜，需要精確定義，而在軟件開發初期很難對系統全面準確建模，并且所建模型與原始系統耦合度高，不便于重用。

從可視輸入直接生成界面層次結構或代碼是較新的研究，機器學習、深度學習方法在其中發揮了重要作用，未來研究者會更好地應用這些方法，以提高用戶界面代碼生成的準確度和效率。