王慧亞，范佳琪，張志翔

（四川大學(xué)計(jì)算機(jī)學(xué)院，成都610065）

0 引言

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

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

1 研究現(xiàn)狀

1.1 基于模型的界面生成

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

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

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

1.2 基于機(jī)器學(xué)習(xí)的界面生成

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

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

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

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

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

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

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

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

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

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

1.4 基于深度學(xué)習(xí)的界面生成

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

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

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

2 結(jié)語(yǔ)

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

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