国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡

?

GUI 源碼自動生成研究綜述

2021-11-19 11:51劉子龍
現(xiàn)代計算機 2021年11期
關(guān)鍵詞:設(shè)計圖代碼組件

劉子龍

(四川大學(xué)計算機學(xué)院,成都610065)

0 引言

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

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

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

1 GUI源碼自動生成概況

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

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

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

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

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

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

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

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

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

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

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

2.3 基于端到端策略

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

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

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

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

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

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

4 結(jié)語

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

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

猜你喜歡
設(shè)計圖代碼組件
Android系統(tǒng)上移動組件化應(yīng)用框架設(shè)計
太廟歷史文化展設(shè)計圖、非洲木雕展設(shè)計圖
創(chuàng)建Vue組件npm包實戰(zhàn)分析
智能機械臂
艦載雷達TR組件沖擊計算方法分析
神秘的代碼
一周機構(gòu)凈增(減)倉股前20名
重要股東二級市場增、減持明細(xì)
近期連續(xù)上漲7天以上的股
美國擬建漂浮城,可環(huán)游世界