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

王慧亞，范佳琪，張志翔

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

0 引言

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

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

1 研究現(xiàn)狀

1.1 基于模型的界面生成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 結(jié)語

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

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