GUI 源碼自動(dòng)生成研究綜述

劉子龍

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

0 引言

互聯(lián)網(wǎng)時(shí)代的到來(lái)，各式軟件應(yīng)用的開(kāi)發(fā)為人們的生活帶來(lái)極大的便捷性，軟件市場(chǎng)的高利潤(rùn)也不斷吸引著新興企業(yè)加入。無(wú)論何種智能設(shè)備，圖形用戶(hù)界面（GUI）都是軟件應(yīng)用提供給用戶(hù)操作的直接媒介，決定著用戶(hù)的使用體驗(yàn)，是軟件能否占據(jù)市場(chǎng)的決定性因素之一。網(wǎng)絡(luò)時(shí)代，用戶(hù)對(duì)軟件應(yīng)用的GUI 美觀性和功能創(chuàng)新性更是提出了更高的個(gè)性化需求。

創(chuàng)建用戶(hù)喜愛(ài)的個(gè)性化圖形界面是目前軟件研發(fā)的重點(diǎn)。GUI 設(shè)計(jì)一般由UI 設(shè)計(jì)師通過(guò)紙筆或Photo?shop 等圖像編輯工具繪制而成，再交由前端工程師通過(guò)手動(dòng)的方式將其轉(zhuǎn)化為真實(shí)代碼（GUI 源碼），這是一項(xiàng)耗時(shí)、易出錯(cuò)的任務(wù)[1]。為了滿(mǎn)足用戶(hù)個(gè)性化需求，UI 設(shè)計(jì)師會(huì)在設(shè)計(jì)圖中采用一些定制UI 組件，這將會(huì)對(duì)前端工程師的工作增加難度。同時(shí)，GUI 開(kāi)發(fā)是一個(gè)多次迭代過(guò)程，需根據(jù)用戶(hù)反饋不斷修改設(shè)計(jì)并轉(zhuǎn)換為GUI 源碼，軟件市場(chǎng)是一個(gè)分秒必爭(zhēng)的環(huán)境，快速GUI 迭代開(kāi)發(fā)能力可以有效提高公司的市場(chǎng)競(jìng)爭(zhēng)力。

因此，GUI 源碼生成對(duì)于自動(dòng)化軟件開(kāi)發(fā)有著重要的研究意義。目前計(jì)算機(jī)視覺(jué)、自然語(yǔ)言處理等領(lǐng)域的不斷進(jìn)步，為GUI 源碼生成提供了技術(shù)指導(dǎo)，通過(guò)數(shù)據(jù)驅(qū)動(dòng)的方式，幫助計(jì)算機(jī)學(xué)習(xí)GUI 代碼的編寫(xiě)規(guī)則，協(xié)助軟件開(kāi)發(fā)流程，使開(kāi)發(fā)人員能夠?qū)Ｗ⒂诠δ苓壿嬙O(shè)計(jì)，提高生產(chǎn)效率。本文就近二十年現(xiàn)有的GUI源碼生成技術(shù)進(jìn)行了歸納和整理，討論其中方法的優(yōu)越性及存在的不足之處，并簡(jiǎn)述了未來(lái)的研究方向。

1 GUI源碼自動(dòng)生成概況

GUI 源碼自動(dòng)生成是指在使用計(jì)算機(jī)相關(guān)技術(shù)，無(wú)需開(kāi)發(fā)人員的參與，自動(dòng)將UI 設(shè)計(jì)師繪制的界面草圖或高保真數(shù)字概念圖轉(zhuǎn)換為能夠運(yùn)行的GUI 真實(shí)代碼。GUI 包括GUI 組件、層次結(jié)構(gòu)、組件樣式三個(gè)重要組成部分，每部分的準(zhǔn)確識(shí)別才能夠完成對(duì)設(shè)計(jì)圖的高度還原。

GUI 組件是指GUI 設(shè)計(jì)常用的控件或元件，將簡(jiǎn)單手繪設(shè)計(jì)圖或高保真設(shè)計(jì)圖轉(zhuǎn)換為GUI 源碼的關(guān)鍵一步是識(shí)別界面上存在的組件元素，個(gè)性化界面中使用的非標(biāo)準(zhǔn)組為機(jī)器的UI 組件自動(dòng)識(shí)別提出了新的困難。GUI 層次結(jié)構(gòu)是指界面組件的組織和布局方式。設(shè)計(jì)圖轉(zhuǎn)換為GUI 源碼的基礎(chǔ)是設(shè)計(jì)合理GUI層次結(jié)構(gòu)以完美還原設(shè)計(jì)圖?，F(xiàn)有研究中，一般通過(guò)啟發(fā)式規(guī)則或機(jī)器學(xué)習(xí)算法來(lái)推測(cè)合理的層次結(jié)構(gòu)，規(guī)則的定義需要專(zhuān)家的啟發(fā)式經(jīng)驗(yàn)，工作量大，對(duì)未知問(wèn)題的處理不夠靈活，容易造成多余底層容器的嵌套，減低頁(yè)面的呈現(xiàn)速度，浪費(fèi)計(jì)算資源。樣式識(shí)別在GUI 源碼生成中是最具挑戰(zhàn)性的。組件樣式是指用UI組件所表現(xiàn)出來(lái)的字符格式或段落格式，因?yàn)榻M件樣式的多樣性以及個(gè)性化組件的應(yīng)用，在以數(shù)據(jù)驅(qū)動(dòng)為基礎(chǔ)的機(jī)器學(xué)習(xí)方法中，數(shù)據(jù)集的收集與處理對(duì)組件樣式的識(shí)別造成了前所未有的難度。

2 GUI源碼生成相關(guān)研究

2.1 基于模型驅(qū)動(dòng)架構(gòu)（MDA）策略

上世紀(jì)90 年代以來(lái)，基礎(chǔ)平臺(tái)和工具技術(shù)更迭和變革愈演愈烈，為了解決基礎(chǔ)系統(tǒng)整合和改造的需求，2002 年由OMG 提出了MDA 技術(shù)，對(duì)解決對(duì)平臺(tái)系統(tǒng)的開(kāi)發(fā)和移植提供了一個(gè)很好的技術(shù)方案，研究人員借鑒MDA 思想，設(shè)計(jì)了多種GUI 源碼自動(dòng)生成方法，各自側(cè)重點(diǎn)不同，有些注重平臺(tái)無(wú)關(guān)性，有些注重GUI交互設(shè)計(jì)。

在注重平臺(tái)無(wú)關(guān)性研究中，研究人員通過(guò)一種獨(dú)立于各系統(tǒng)的GUI 描述方法，使用UML 描述模型或XML 標(biāo)記語(yǔ)言構(gòu)建GUI 模型。Josef Jelinek 等人[2]提出從帶注釋的源代碼中以程序結(jié)構(gòu)和附加GUI 控制指令的形式定義任務(wù)模型，將任務(wù)模型的動(dòng)作事件對(duì)象和數(shù)據(jù)傳輸對(duì)象解析為對(duì)應(yīng)的GUI 組件。Max Schlee 等人[3]遵循生成編程（GP）范式，使用GUI 圖形化設(shè)計(jì)工具創(chuàng)建XML 文件，并根據(jù)XML 規(guī)范以及ANGIE 框架技術(shù)將一組預(yù)先開(kāi)發(fā)的特定GUI 組件組裝成可執(zhí)行應(yīng)用程序。Mohamed Lachgar 等人[5]提出了一個(gè)Android?GUI 元模型，通過(guò)Eclipsed 的Xtex 設(shè)計(jì)了一套DSL 語(yǔ)言，開(kāi)發(fā)人員能夠直接進(jìn)行DSL 編程來(lái)構(gòu)建用戶(hù)界面模型，然后使用Xtend 轉(zhuǎn)換為對(duì)應(yīng)特定平臺(tái)的界面模型和代碼。

在注重GUI 交互設(shè)計(jì)研究中，研究人員以交互設(shè)計(jì)模型來(lái)迭代探索和評(píng)估交互設(shè)計(jì)方案。David Rane?burger 等人[6]設(shè)計(jì)了一個(gè)通信交互設(shè)計(jì)模型，通過(guò)構(gòu)建的需求樹(shù)狀模型使用UCP 提供的工具將其自動(dòng)轉(zhuǎn)換為GUI 源代碼，在使用過(guò)程中找出設(shè)計(jì)問(wèn)題。Her?mann Kaindl 等人[7]為了實(shí)現(xiàn)類(lèi)似問(wèn)題解決方案的可重用性以及避免從零開(kāi)始設(shè)計(jì)新方案，提出一種論述交互模型，在收集的針對(duì)具體問(wèn)題的問(wèn)答對(duì)中使用有序的聯(lián)合關(guān)系指定可同時(shí)執(zhí)行的子部件來(lái)構(gòu)建GUI 樹(shù)狀模型，再據(jù)此生成GUI 源碼。

2.2 基于目標(biāo)識(shí)別策略

為了提高設(shè)計(jì)圖中GUI 組件的識(shí)別準(zhǔn)確率，有些研究人員采用目標(biāo)檢測(cè)方式，在大量標(biāo)注數(shù)據(jù)集的支持下，采用CNN 網(wǎng)絡(luò)識(shí)別GUI 組件類(lèi)別和對(duì)應(yīng)位置信息，定義啟發(fā)式規(guī)則處理識(shí)別結(jié)果并推斷層次結(jié)構(gòu)，最后采用模板方法生成GUI 源碼。

Tuan Anh Nguyen 等人[1]使用傳統(tǒng)的計(jì)算機(jī)視覺(jué)和OCR 技術(shù)構(gòu)建了第一個(gè)對(duì)移動(dòng)用戶(hù)界面進(jìn)行逆向工程項(xiàng)目REMAUI。REMAUI 采用邊緣檢測(cè)算法Canny 在截圖上識(shí)別組件及位置，OCR 技術(shù)用于識(shí)別界面文本和字體類(lèi)型，計(jì)算組件和文本的位置對(duì)應(yīng)關(guān)系，對(duì)組件類(lèi)型進(jìn)行二值劃分，利用定義啟發(fā)式規(guī)則去除識(shí)別錯(cuò)誤的組件并根據(jù)組件的位置坐標(biāo)推斷合理的層次結(jié)構(gòu)，GUI 源碼的生成選擇模板和絕對(duì)布局方法，在已建好的工程項(xiàng)目中填寫(xiě)對(duì)應(yīng)信息。Kevin Moran 等人[8]在REMAUI 的啟發(fā)下，使用預(yù)訓(xùn)練的CNN 網(wǎng)絡(luò)識(shí)別組件類(lèi)別，并采用KNN 算法從大量的軟件資源庫(kù)中尋找可復(fù)用的容器類(lèi)型來(lái)組成合適的層次結(jié)構(gòu)。

在手繪草圖識(shí)別方面，Alexander Robinson[9]的研究中分別使用了計(jì)算機(jī)視覺(jué)和語(yǔ)義分割網(wǎng)絡(luò)兩種方法來(lái)對(duì)草圖界面元素進(jìn)行識(shí)別，并將識(shí)別結(jié)果轉(zhuǎn)換為前端代碼，實(shí)現(xiàn)了草圖到代碼的自動(dòng)化。Vanita Jain 等人[11]使用了更先進(jìn)的目標(biāo)檢測(cè)網(wǎng)絡(luò)RetinaNet 來(lái)對(duì)識(shí)別草圖元素，提高了識(shí)別準(zhǔn)確率，然后通過(guò)一個(gè)UI 解析器來(lái)生成不同平臺(tái)的代碼。

2.3 基于端到端策略

為了更加便捷識(shí)別GUI 組件，拋棄繁瑣的啟發(fā)式規(guī)則定義，有些研究人員借鑒計(jì)算機(jī)視覺(jué)和自然語(yǔ)言處理方向的相關(guān)研究方法，提出了基于深度學(xué)習(xí)的端到端模型實(shí)現(xiàn)GUI 源碼的自動(dòng)生成。Tony Beltramelli[12]首次在GUI 源碼生成任務(wù)中引入神經(jīng)網(wǎng)絡(luò)，構(gòu)建了名為pix2code 的代碼自動(dòng)生成模型。作者以界面截圖為輸入，并設(shè)計(jì)了一套DSL 語(yǔ)言用以描述界面，網(wǎng)路架構(gòu)借鑒機(jī)器翻譯的經(jīng)驗(yàn)，采用CNN+RNN 構(gòu)建編解碼模型學(xué)習(xí)GUI 截圖和DSL 代碼之間的聯(lián)系，最后使用傳統(tǒng)的編譯技術(shù)將DSL 代碼翻譯為特定平臺(tái)對(duì)應(yīng)的GUI源碼。

Pix2code 為GUI 源碼生成探索了一個(gè)全新的方向，更多的研究人員致力改進(jìn)pix2code 模型，提出了很多富有創(chuàng)新性的方法。Zhihao Zhu 等人[13]使用分層結(jié)構(gòu)的LSTM 模型，塊級(jí)LSTM 用以幫助CNN 提取特征，Token 級(jí)LSTM 學(xué)習(xí)DSL 序列特征，采用注意力機(jī)制指導(dǎo)特征的選擇。黃倩[14]在模型中引入圖像自編碼方法和分層視覺(jué)注意力機(jī)制，同時(shí)支持了手繪圖的轉(zhuǎn)換。雷慧[15]調(diào)整了pix2code 模型中的CNN 網(wǎng)絡(luò)結(jié)構(gòu)以保留組件位置和顏色，使用多層卷積層，增加步伐以替代池化層。韓易[16]在傳統(tǒng)的編解碼模型中加入了目標(biāo)檢測(cè)機(jī)制，使用目標(biāo)檢測(cè)器Mask-RCNN 摳出目標(biāo)圖像，再利用CNN 和Bi-LSTM 對(duì)原始圖像、目標(biāo)圖像和文本數(shù)據(jù)進(jìn)行建模。Xiongwen Pang 等人[17]提出了兩個(gè)神經(jīng)網(wǎng)絡(luò)模型HGui2code 和SGui2code，用以解決現(xiàn)有研究中GUI 和DSL 代碼中信息利用不充分以及生成的DSL 代碼不符合語(yǔ)法規(guī)則的問(wèn)題。以上模型均是基于pix2code 做出了改進(jìn)，目標(biāo)在于生成準(zhǔn)確率較高的DSL 代碼，GUI 源碼生成都采用統(tǒng)一的傳統(tǒng)編譯技術(shù)，按照預(yù)先定義的翻譯規(guī)則翻譯為對(duì)應(yīng)的GUI 源碼。

3 現(xiàn)有研究不足之處

針對(duì)GUI 源碼生成的現(xiàn)有研究，在總體上可分為三種實(shí)現(xiàn)方法?；贛DA 策略的GUI 源碼生成方法重點(diǎn)在于功能邏輯設(shè)計(jì)，沒(méi)有注重解決GUI 個(gè)性化和美觀問(wèn)題，美觀性只能由開(kāi)發(fā)人員手動(dòng)添加。MDA 方式通常使用UML 或XML 文件描述系統(tǒng)的動(dòng)態(tài)流程和對(duì)象關(guān)系，這種設(shè)計(jì)方式很難集成到現(xiàn)有GUI 開(kāi)發(fā)流程中。依據(jù)UML 或XML 定義的系統(tǒng)對(duì)象關(guān)系圖生成相應(yīng)的GUI 源碼，需要專(zhuān)家根據(jù)特定的領(lǐng)域知識(shí)制定啟發(fā)式規(guī)則，規(guī)則定義難度大，在未知問(wèn)題的處理上也存在很大的局限性，有時(shí)還需要借助特定的生成框架。

基于目標(biāo)檢測(cè)策略的GUI 源碼自動(dòng)生成側(cè)重點(diǎn)在于解決組件類(lèi)別識(shí)別的準(zhǔn)確度和組件位置的計(jì)算?；贕UI 組件標(biāo)注數(shù)據(jù)集訓(xùn)練的CNN 網(wǎng)絡(luò)能夠有效提高組件分類(lèi)準(zhǔn)確率，組件的排布方式可以使用絕對(duì)布局，但這樣生成的GUI 存在著布局固定，難以調(diào)整的問(wèn)題。為解決固定布局的局限性，開(kāi)發(fā)人員可以選擇定義啟發(fā)式規(guī)則，依據(jù)組件的位置坐標(biāo)推斷合理的相對(duì)布局方式，但啟發(fā)式規(guī)則定義的難度又成為了目標(biāo)檢測(cè)策略的瓶頸。

基于端到端策略的GUI 源碼自動(dòng)生成側(cè)重點(diǎn)在于解決啟發(fā)式規(guī)則定義難度大的問(wèn)題。在現(xiàn)有的編解碼模型中，DSL 的使用能降低網(wǎng)絡(luò)的訓(xùn)練難度，但因?yàn)镈SL 代碼存在結(jié)構(gòu)性，普通的LSTM 網(wǎng)絡(luò)缺乏學(xué)習(xí)DSL 語(yǔ)法結(jié)構(gòu)特征的能力。在編碼器模型的訓(xùn)練中，圖像特征的一維展開(kāi)會(huì)導(dǎo)致組件相對(duì)位置信息的丟失，順序拼接方式無(wú)法圖像結(jié)構(gòu)信息和DSL 結(jié)構(gòu)信息相對(duì)應(yīng)。為了DSL 的簡(jiǎn)單性，其中不包含組件樣式信息，DSL 代碼轉(zhuǎn)換為GUI 源碼采用的是模板方法，難以還原設(shè)計(jì)圖，并且缺乏靈活性，模板的編譯規(guī)則定義工作量大，難以窮盡。

4 結(jié)語(yǔ)

通過(guò)對(duì)現(xiàn)有GUI 源碼自動(dòng)生成方面的文獻(xiàn)研究總結(jié)發(fā)現(xiàn)，目前針對(duì)設(shè)計(jì)圖到GUI 源碼的生成已經(jīng)取得了很大的進(jìn)步，但其中仍然存在者一些需要解決的問(wèn)題。

首先在GUI 源碼生成方面，最要的問(wèn)題是優(yōu)質(zhì)數(shù)據(jù)集的缺失。目前深度學(xué)習(xí)在代碼自動(dòng)生成方面已經(jīng)取得長(zhǎng)足的探索，但由于數(shù)據(jù)集缺失，依賴(lài)于數(shù)據(jù)驅(qū)動(dòng)的神經(jīng)網(wǎng)絡(luò)模型并未表現(xiàn)出很高的潛力。其次，現(xiàn)有研究中缺乏組件樣式信息的考慮以及代碼結(jié)構(gòu)特征的合理運(yùn)用，而這也是提高設(shè)計(jì)圖還原度的關(guān)鍵。GUI源碼中包含的信息更為完善，在解決好長(zhǎng)文本生成問(wèn)題的基礎(chǔ)上，使用GUI 源碼作為序列特征，關(guān)注代碼的結(jié)構(gòu)特征，同時(shí)采用注意力機(jī)制處理圖像特征和序列特征之間的對(duì)應(yīng)關(guān)系，這也是未來(lái)的一個(gè)提高設(shè)計(jì)圖還原度的研究方向。