尹浩

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

0 引言

隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來，越來越多的移動(dòng)應(yīng)用和網(wǎng)站開始涌現(xiàn)，給人們的生活帶來了極大的便利。在巨大的市場需求面前，移動(dòng)應(yīng)用和網(wǎng)站的迭代變得快速，前端開發(fā)者將會(huì)耗費(fèi)極大的精力去實(shí)現(xiàn)從設(shè)計(jì)圖到代碼的轉(zhuǎn)變，而在不同的平臺(tái)（iOS、Android、Web）下，界面代碼也不盡相同，這更增加了開發(fā)者的勞動(dòng)。用戶界面包括支持人與機(jī)之間交互的軟件和硬件系統(tǒng)，是人機(jī)交互系統(tǒng)的重要組成部分[1]，友好的界面是人們長期以來的期待。人們?nèi)找嬖鲩L的功能需求是推動(dòng)軟件進(jìn)行快速迭代的動(dòng)力，正因?yàn)檫@些功能的迭代，軟件界面也在發(fā)生著快速的變化，如果能尋求一種自動(dòng)化的方式去實(shí)現(xiàn)從圖像到代碼的轉(zhuǎn)化，那將會(huì)極大地縮短軟件的開發(fā)周期，降低開發(fā)成本。

因此，實(shí)現(xiàn)界面代碼自動(dòng)生成具有相當(dāng)?shù)闹匾?。在代碼生成領(lǐng)域的早期階段，研究者通過一些基于代碼檢索、歸納演繹的方法進(jìn)行代碼合成，依托于龐大的代碼倉庫從大量的數(shù)據(jù)中推斷出一些規(guī)律來生成代碼，這是人們在早期做的有效的嘗試，但由于生成的代碼一般很短，并且代碼生成器的設(shè)計(jì)需要程序員的豐富經(jīng)驗(yàn)，效果不太理想。深度學(xué)習(xí)的出現(xiàn)，讓代碼自動(dòng)化生成步入了新的階段，在一些研究中，已經(jīng)出現(xiàn)了可以直接基于界面截圖生成代碼的端到端模型，給個(gè)人開發(fā)者和中小企業(yè)帶來了方便。本文對(duì)這些工作進(jìn)行了分類整理，在此基礎(chǔ)上探討了未來的研究方向。

1 界面代碼生成簡介

界面在本文中特指用戶界面（User Interface），它是用戶與應(yīng)用之間進(jìn)行數(shù)據(jù)交換的唯一介質(zhì)。界面通常以圖形化的方式呈現(xiàn)，友好易用的界面深受使用者的青睞，而界面的產(chǎn)生通常是通過編寫前端代碼，這樣的代碼就是界面代碼。上文已經(jīng)提到由人來編寫界面代碼具有諸多缺點(diǎn)，因此出現(xiàn)了由機(jī)器自動(dòng)生成界面代碼的技術(shù)，它無須開發(fā)者的介入，根據(jù)手繪圖或原型圖可以自動(dòng)生成界面代碼。這項(xiàng)技術(shù)根據(jù)過程可分為圖像理解和代碼生成兩個(gè)過程。

圖像理解指對(duì)原型圖或手繪圖的語義理解，研究圖像中有什么組件，以及組件之間的相互關(guān)系。由于要處理圖像數(shù)據(jù)，同時(shí)也要處理代碼數(shù)據(jù)，使得該過程橫跨了圖像描述與自然語言處理兩大領(lǐng)域。代碼生成指根據(jù)理解的圖像的語義信息，將其轉(zhuǎn)化為描述圖像的代碼，這種具有相當(dāng)長度的文本生成是目前研究中的一大難點(diǎn)。

2 研究現(xiàn)狀

2.1 基于設(shè)計(jì)模式的界面代碼生成

模式意味著重用，設(shè)計(jì)模式這一詞首次出現(xiàn)于上世紀(jì)90年代，它指的是在軟件開發(fā)過程中被反復(fù)使用的一種代碼設(shè)計(jì)經(jīng)驗(yàn)，使用設(shè)計(jì)模式是為了實(shí)現(xiàn)對(duì)代碼的重用。早期人們對(duì)界面代碼生成的探索中也使用了同樣的方法，基于不同的設(shè)計(jì)模式，這些研究的側(cè)重點(diǎn)也不盡相同，有的側(cè)重于數(shù)據(jù)模式，有的側(cè)重于界面模式。

在側(cè)重于數(shù)據(jù)模式的研究中，研究者常常通過使用一種抽象語言（如統(tǒng)一建模語言（UML））或一種文檔格式來保存所有模型信息以及相應(yīng)的轉(zhuǎn)化方法。馮文堂等人[2]選擇了支持界面自動(dòng)生成的FMP模型，提出了一種基于XML文檔來表示FMP模型信息的方法，由XML文檔來生成界面代碼，由于XML的樹結(jié)構(gòu)很好地對(duì)應(yīng)了Web界面中的DOM樹，使得我們可以通過順序遍歷DOM樹來構(gòu)建界面。針對(duì)在多設(shè)備環(huán)境下，界面開發(fā)的難以調(diào)試的困難，崔洛等人[4]提出了一種與獨(dú)立于設(shè)備的界面模式描述語言SPLML，并實(shí)現(xiàn)了一個(gè)界面模式生成框架UIPF來實(shí)現(xiàn)界面的自動(dòng)生成。

在側(cè)重于界面模式的研究中，研究者通常針對(duì)一種軟件架構(gòu)模式來有目的地生成界面中的部分代碼。郭愛平等人[3]提出了一種基于MVC模式的界面自動(dòng)生成技術(shù)，以元數(shù)據(jù)作為基礎(chǔ)數(shù)據(jù)對(duì)象，通過MVC模式將模型層與視圖層分離，然后使用自適應(yīng)模板來生成用戶界面。李琦等人[5]提出了一種在特定設(shè)計(jì)環(huán)境下生成界面代碼的方法，并且該方法可以生成多平臺(tái)的代碼，如Java Swing的界面代碼、JSP的界面代碼等，在一定程度上提高了界面開發(fā)的重用性和效率。

2.2 基于低保真圖像的界面代碼生成

低保真圖像在界面代碼生成領(lǐng)域特指低保真線框圖或手繪圖，區(qū)別于高保真原型圖，低保真圖像僅僅呈現(xiàn)最終產(chǎn)品的部分視覺屬性，或僅包含關(guān)鍵的元素，在軟件的開發(fā)流程中，低保真圖像具有快速、便宜、清晰等優(yōu)點(diǎn)，所以基于低保真圖像到界面代碼具有重要的研究意義。

在基于低保真圖像的研究中，Alexander Robinson等人[6]使用邊緣檢測算法檢測出手繪界面各種元素的輪廓，通過啟發(fā)式的算法對(duì)這些元素進(jìn)行分類，再利用機(jī)器學(xué)習(xí)對(duì)手繪界面中的容器進(jìn)行預(yù)測，最后通過遞歸算法推斷出界面的樹結(jié)構(gòu)，得到了相應(yīng)的前端代碼。Vanita Jain等人[7]創(chuàng)建了一個(gè)界面草圖數(shù)據(jù)庫，使用ResNet網(wǎng)絡(luò)在ImageNet上的預(yù)訓(xùn)練參數(shù)來做遷移學(xué)習(xí)，并使用殘差學(xué)習(xí)的方式訓(xùn)練一個(gè)深度學(xué)習(xí)模型，通過該模型可以識(shí)別界面元素的類型，并且以JSON格式表示界面組件的嵌套結(jié)構(gòu)，通過UI解釋器，JSON格式的數(shù)據(jù)可以被轉(zhuǎn)化為跨平臺(tái)的前端代碼。A.Zita[8]基于目標(biāo)檢測網(wǎng)絡(luò)Faster R-CNN，結(jié)合深度殘差網(wǎng)絡(luò)ResNet-50，識(shí)別手繪的UI組件，在組件的分類任務(wù)上，通過正則化訓(xùn)練方法，作者提出的模型可以在手繪組件分類任務(wù)上將精確率提升到0.97。

生成對(duì)抗網(wǎng)絡(luò)在近幾年發(fā)展迅猛，特別是在圖像和語音的研究領(lǐng)域，生成對(duì)抗網(wǎng)絡(luò)逐漸開始占據(jù)一定的市場，Y Deng等人[9]在2019年提出了一個(gè)生成對(duì)抗網(wǎng)絡(luò)模型，用于自動(dòng)生成界面代碼。作者使用強(qiáng)化學(xué)習(xí)領(lǐng)域的策略梯度更新的方式進(jìn)行模型訓(xùn)練，在生成模型生成的數(shù)據(jù)是離散的，這讓生成模型無法通過梯度下降的方法得到調(diào)整的問題上，提出了一個(gè)rollout網(wǎng)絡(luò)，利用蒙特卡洛搜索的方法評(píng)估生成數(shù)據(jù)與真實(shí)數(shù)據(jù)的誤差。實(shí)驗(yàn)結(jié)果表明生成對(duì)抗網(wǎng)絡(luò)模型在手繪界面的代碼生成問題上表現(xiàn)更佳。

2.3 基于高保真圖像的界面代碼生成

高保真圖像在軟件開發(fā)中一般特指高保真原型圖，高保真原型是盡可能與最終產(chǎn)品在功能和外觀上都相同的原型，與低保真原型不同的地方在于，高保真原型具有更細(xì)致的圖形界面，更真實(shí)的內(nèi)容。在界面代碼生成中，我們將界面截圖也歸于高保真圖像一類，因?yàn)槲覀儾⒉荒芸偸悄塬@得應(yīng)用的初期原型，但是可以輕松得到應(yīng)用的界面截圖。通過真實(shí)截圖生成界面代碼也是一個(gè)重要的研究內(nèi)容。

在根據(jù)界面截圖生成代碼的研究中，Beltramelli T等人[10]率先提出了pix2code深度學(xué)習(xí)模型，通過作者設(shè)計(jì)的領(lǐng)域特定語言（DSL），結(jié)合CNN的圖像特征提取能力和LSTM的長期依賴建模能力，模型可以根據(jù)一張bootstrap風(fēng)格的圖形界面生成對(duì)應(yīng)的DSL，最終通過啟發(fā)式的方法，將DSL編譯為最終的目標(biāo)平臺(tái)的前端代碼。模型支持三個(gè)平臺(tái)（Android、iOS、Web）的前端代碼生成，并且準(zhǔn)確率可以達(dá)到77%。Pix2code是利用深度學(xué)習(xí)處理界面代碼生成問題的一次創(chuàng)新，為后續(xù)的研究開辟了道路，此后，有不少的研究基于此基礎(chǔ)上做出了不斷地突破。Yanbin Liu等人[11]使用雙向的LSTM網(wǎng)絡(luò)來替換原始模型中的LSTM，考慮到界面代碼的結(jié)構(gòu)性特征，DSL的生成不僅僅依賴于之前的單詞，其后的單詞也對(duì)其產(chǎn)生影響，雙向的LSTM網(wǎng)絡(luò)降低了模型在測試集上的錯(cuò)誤率，并提高了模型的穩(wěn)定性。

為了得到更好的圖像特征，郝同安等人[12]提出將視覺模型置于整體模型之外，使用基于反卷積網(wǎng)絡(luò)的自編碼器來訓(xùn)練CNN，這樣得到的圖像特征將不再依賴于整體模型的誤差反饋，更加能表達(dá)圖像本身的特征，在BLEU評(píng)分上有顯著的提升。黃倩等人[13]提出了pix2code-e模型，使用自編碼器，提前在GUI截圖上進(jìn)行預(yù)訓(xùn)練，通過反卷積還原圖像進(jìn)行特征提取，將視覺模型的訓(xùn)練置于整體模型之外，使整體模型的誤差反饋只傳遞到語言模型，帶來了更少的訓(xùn)練時(shí)間和更高的預(yù)測準(zhǔn)確率。

在對(duì)語言模型進(jìn)行優(yōu)化的研究上，黃倩等人[13]提出了使用層次化注意力機(jī)制，使DSL單詞的生成可以重點(diǎn)關(guān)注圖像的一些局部特征，例如在生成button組件的代碼時(shí)，注意力機(jī)制可以使圖像中button區(qū)域的權(quán)重變得更大些，由此生成的DSL更加準(zhǔn)確。Meine Mat?thias Velzel等人[14]提出使用GRU網(wǎng)絡(luò)代替pix2code中的LSTM結(jié)構(gòu)，可以減少模型的整體參數(shù)數(shù)量，減少訓(xùn)練耗時(shí)，使模型更加容易收斂。

3 結(jié)語

本文介紹了界面代碼生成領(lǐng)域出現(xiàn)的方法及模型，闡述了模型中使用到的技術(shù)手段，并對(duì)其局限性做出剖析。深度學(xué)習(xí)的出現(xiàn)，讓自動(dòng)化前端代碼生成成為了可能，雖然現(xiàn)階段的數(shù)據(jù)集過于簡單，只能生成一些樣式特定內(nèi)容簡單的界面代碼，在實(shí)際生產(chǎn)當(dāng)中還存在較大的局限性。同時(shí)由于計(jì)算機(jī)內(nèi)存與計(jì)算能力的限制，以及HTML代碼的多樣性和復(fù)雜性，越過DSL直接生成HTML代碼還不具有可行性。現(xiàn)階段的研究工作應(yīng)該考慮更大更復(fù)雜的數(shù)據(jù)集，包括更多組件更多樣式的界面圖，和表現(xiàn)形式更豐富的DSL，并在研究中結(jié)合計(jì)算機(jī)視覺的方法，以提高模型的表現(xiàn)，相信在不久的將來，自動(dòng)化前端界面開發(fā)將會(huì)成為現(xiàn)實(shí)。