圖形用戶界面代碼自動生成研究綜述

尹浩

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

0 引言

隨著移動互聯網時代的到來，越來越多的移動應用和網站開始涌現，給人們的生活帶來了極大的便利。在巨大的市場需求面前，移動應用和網站的迭代變得快速，前端開發者將會耗費極大的精力去實現從設計圖到代碼的轉變，而在不同的平臺（iOS、Android、Web）下，界面代碼也不盡相同，這更增加了開發者的勞動。用戶界面包括支持人與機之間交互的軟件和硬件系統，是人機交互系統的重要組成部分[1]，友好的界面是人們長期以來的期待。人們日益增長的功能需求是推動軟件進行快速迭代的動力，正因為這些功能的迭代，軟件界面也在發生著快速的變化，如果能尋求一種自動化的方式去實現從圖像到代碼的轉化，那將會極大地縮短軟件的開發周期，降低開發成本。

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

1 界面代碼生成簡介

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

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

2 研究現狀

2.1 基于設計模式的界面代碼生成

模式意味著重用，設計模式這一詞首次出現于上世紀90年代，它指的是在軟件開發過程中被反復使用的一種代碼設計經驗，使用設計模式是為了實現對代碼的重用。早期人們對界面代碼生成的探索中也使用了同樣的方法，基于不同的設計模式，這些研究的側重點也不盡相同，有的側重于數據模式，有的側重于界面模式。

在側重于數據模式的研究中，研究者常常通過使用一種抽象語言（如統一建模語言（UML））或一種文檔格式來保存所有模型信息以及相應的轉化方法。馮文堂等人[2]選擇了支持界面自動生成的FMP模型，提出了一種基于XML文檔來表示FMP模型信息的方法，由XML文檔來生成界面代碼，由于XML的樹結構很好地對應了Web界面中的DOM樹，使得我們可以通過順序遍歷DOM樹來構建界面。針對在多設備環境下，界面開發的難以調試的困難，崔洛等人[4]提出了一種與獨立于設備的界面模式描述語言SPLML，并實現了一個界面模式生成框架UIPF來實現界面的自動生成。

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

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

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

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

生成對抗網絡在近幾年發展迅猛，特別是在圖像和語音的研究領域，生成對抗網絡逐漸開始占據一定的市場，Y Deng等人[9]在2019年提出了一個生成對抗網絡模型，用于自動生成界面代碼。作者使用強化學習領域的策略梯度更新的方式進行模型訓練，在生成模型生成的數據是離散的，這讓生成模型無法通過梯度下降的方法得到調整的問題上，提出了一個rollout網絡，利用蒙特卡洛搜索的方法評估生成數據與真實數據的誤差。實驗結果表明生成對抗網絡模型在手繪界面的代碼生成問題上表現更佳。

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

高保真圖像在軟件開發中一般特指高保真原型圖，高保真原型是盡可能與最終產品在功能和外觀上都相同的原型，與低保真原型不同的地方在于，高保真原型具有更細致的圖形界面，更真實的內容。在界面代碼生成中，我們將界面截圖也歸于高保真圖像一類，因為我們并不能總是能獲得應用的初期原型，但是可以輕松得到應用的界面截圖。通過真實截圖生成界面代碼也是一個重要的研究內容。

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

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

在對語言模型進行優化的研究上，黃倩等人[13]提出了使用層次化注意力機制，使DSL單詞的生成可以重點關注圖像的一些局部特征，例如在生成button組件的代碼時，注意力機制可以使圖像中button區域的權重變得更大些，由此生成的DSL更加準確。Meine Mat?thias Velzel等人[14]提出使用GRU網絡代替pix2code中的LSTM結構，可以減少模型的整體參數數量，減少訓練耗時，使模型更加容易收斂。

3 結語

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