張中洋

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

0 引言

計算機(jī)技術(shù)的發(fā)展極大地改變了人類的工作生活方式，隨著人們對于各類軟件產(chǎn)品的需求日益增長，圍繞各類應(yīng)用程序的GUI(圖形用戶界面)開發(fā)工作變得越來越繁瑣、具有挑戰(zhàn)性。目前流行的面向應(yīng)用程序GUI開發(fā)的首要步驟是起草和設(shè)計原型圖，設(shè)計團(tuán)隊通過高保真像素圖或低保真的手繪稿向開發(fā)人員表達(dá)GUI的內(nèi)容和樣式，開發(fā)人員不但需要準(zhǔn)確掌握GUI界面中的各個組件的位置和大小，而且必須充分理解該組件在GUI界面中的設(shè)計意圖。在識別GUI組件的過程中，產(chǎn)品原型需要經(jīng)歷的多次迭代[1]極大地增加了設(shè)計人員與開發(fā)人員的勞動成本和溝通成本，費(fèi)時費(fèi)力，且設(shè)計人員與開發(fā)人員普遍存在的源于各自背景領(lǐng)域知識帶來的認(rèn)知鴻溝，開發(fā)人員難免出現(xiàn)對界面組件錯誤識別的情況，從而導(dǎo)致在開發(fā)階段的設(shè)計違規(guī)[2]，最后實(shí)現(xiàn)結(jié)果與設(shè)計預(yù)期不符，白白浪費(fèi)了人力物力。

另外，在應(yīng)用程序正式發(fā)布并投入使用之前，我們需要從相應(yīng)的GUI界面為起點(diǎn)，對GUI中的關(guān)鍵組件的樣式和功能進(jìn)行充分測試。由于GUI組件視覺樣式和風(fēng)格的快速迭代變化，且對應(yīng)的測試規(guī)則和交互方式也可能有多種組合[3]，以往通過人工檢查或手動編寫測試規(guī)則去定位并識別關(guān)鍵組件的方式受到人力、時間等資源問題的限制，傳統(tǒng)的人工識別GUI組件方法難以支持有效的測試。

目前，針對傳統(tǒng)方法的問題和局限，不少研究人員和相關(guān)從業(yè)者開始研究如何通過自動化的方法準(zhǔn)確地識別GUI中的組件。對GUI組件的正確識別對現(xiàn)代智能化的應(yīng)用程序開發(fā)或測試任務(wù)具有重大意義，它能顯著地減少設(shè)計人員和開發(fā)人員的工作量，提升應(yīng)用程序開發(fā)過程中的工作效率，解放生產(chǎn)力，使得無論是設(shè)計師還是開發(fā)工程師都能將更多的精力集中在應(yīng)用程序本身復(fù)雜的業(yè)務(wù)邏輯和內(nèi)容設(shè)計上，提高軟件開發(fā)質(zhì)量。

本文概括了目前最前沿的GUI組件自動化識別方法，根據(jù)研究方法的不同分為基于機(jī)器視覺的識別方法和基于深度學(xué)習(xí)的識別方法兩類，并且分別對這兩種方法的特點(diǎn)和思路進(jìn)行了論述，總結(jié)了當(dāng)前對于GUI組件的識別問題的進(jìn)展，最后對未來GUI組件的自動識別方法的發(fā)展方向進(jìn)行了討論。

1 研究基本內(nèi)容

本文研究的對象是包括但不限于PC端、移動端等以圖像形式展示的應(yīng)用程序GUI。GUI即用戶圖形界面，是承載人與計算機(jī)軟件信息交互的橋梁，用戶可通過多種輸入設(shè)備操作屏幕上的組件或菜單選項(xiàng)，然后計算機(jī)再以圖形的方式給用戶以反饋信息。而GUI組件是指在GUI中具有獨(dú)立設(shè)計語義[4]的非背景元素。本研究中的自動化識別GUI組件包括兩部分任務(wù)：一是獲得GUI組件的界面圖像中的位置信息和寬高信息；二是對每個組件進(jìn)行基于領(lǐng)域特定類型的分類，例如Text文本類型組件、Image圖像類型組件等。以移動應(yīng)用程序的GUI組件識別任務(wù)為例，GUI組件識別任務(wù)如圖1所示。

圖1 移動應(yīng)用程序GUI組件識別任務(wù)示意圖

如圖1所示，GUI組件識別任務(wù)的目標(biāo)第一步是自動化地從輸入圖片中確定組件的位置和大小，其中組件的大小以組件對應(yīng)的最小外接矩形的寬高來表示；第二部是獲得組件的基本類型，如圖中的Button表示在GUI中是一個可以提供點(diǎn)擊交互功能的組件，Text是一個表現(xiàn)文字內(nèi)容的組件，等等。

GUI組件的自動識別任務(wù)是一個復(fù)雜的具有挑戰(zhàn)性的難題，目前越來越多的研究人員和軟件從業(yè)人員都對此進(jìn)行了研究。

2 基于機(jī)器視覺的GUI組件識別方法研究

在GUI中為了給予用戶清晰明了的使用指引，設(shè)計者往往將不同類型的GUI組件設(shè)計為與界面背景顏色有非常顯著的區(qū)別，或是通過清晰明顯的邊界框突出屬于GUI組件的部分。利用這一特性，在界面代碼自動生成任務(wù)[5]GUI組件的檢測階段，K.Moran等人提出通過基于機(jī)器視覺的Canny邊緣檢測[6]方法，首先通過高斯濾波器平滑輸入圖像，再經(jīng)過一階偏導(dǎo)的有限差分來計算圖像中每個像素點(diǎn)在梯度方向上的幅值和方向，通過設(shè)置合理的像素梯度變化閾值過濾GUI圖像中非組件邊緣噪聲，之后通過設(shè)置雙閾值參數(shù)確定真實(shí)的目標(biāo)組件邊緣，接著對這些已經(jīng)確定的組件邊緣像素進(jìn)行一定的圖像形態(tài)學(xué)操作，例如腐蝕或膨脹，將距離足夠近的邊緣連接成塊，經(jīng)過對連接塊的最小外接矩形的簡單計算后便得到了組件在界面中的位置和寬高。至此便完成了GUI組件識別的第一步——對組件位置和大小的檢測。

而在GUI組件識別任務(wù)的第二步，也就是組件分類的階段，K.Moran等人利用CNN(Convolutional Neural Networks)強(qiáng)大的圖像特征提取能力，將上一步GUI檢測提取出的目標(biāo)組件區(qū)域經(jīng)過裁剪并由人工標(biāo)注其基本類別，通過監(jiān)督學(xué)習(xí)的方式端到端地訓(xùn)練深度卷積網(wǎng)絡(luò)對GUI組件的分類識別能力，最后在Redraw[7]數(shù)據(jù)集上的測試結(jié)果顯示該方法獲得了對GUI組件平均91%的識別準(zhǔn)確率。

基于機(jī)器視覺的GUI組件檢測方法最大地利用了GUI組件邊界相對清晰、布局工整的特點(diǎn)，在檢測組件階段通過Canny邊緣檢測算法，以人工設(shè)定閾值參數(shù)的啟發(fā)式地確定真實(shí)的組件邊緣，而后通過卷積神經(jīng)網(wǎng)絡(luò)強(qiáng)大的圖像特征提取能力對輸入的單個組件圖像進(jìn)行分類，簡單高效。但該方法忽略了在GUI組件檢測階段的正確查全率，也就是說通過卷積神經(jīng)網(wǎng)絡(luò)的組件識別準(zhǔn)確率建立在對于GUI組件的準(zhǔn)確提取上，而通過Canny邊緣檢測算法提取組件嚴(yán)重依賴于人工設(shè)定的算法閾值參數(shù)，對于設(shè)計風(fēng)格不斷變遷演化的GUI來說，很難有一個固定的算法參數(shù)對于所有輸入GUI圖像都能取得同樣理想的結(jié)果，導(dǎo)致在組件檢測階段存在許多誤檢或者漏檢的情況，從而影響到后面的分類結(jié)果，這是基于機(jī)器視覺的GUI組件識別方法研究的不足和局限之處。

3 基于深度學(xué)習(xí)的GUI組件識別方法研究

近年來，隨著計算機(jī)GPU計算能力的提升和深度學(xué)習(xí)的發(fā)展，有許多研究者將深度學(xué)習(xí)的方法運(yùn)用到目標(biāo)檢測領(lǐng)域中，通過設(shè)計深度神經(jīng)網(wǎng)絡(luò)模型，從海量數(shù)據(jù)樣本中學(xué)習(xí)目標(biāo)物體在輸入圖片中的位置、寬高以及類型，而GUI組件自動化識別任務(wù)與目標(biāo)檢測任務(wù)非常相似。因此，目前已經(jīng)有不少研究將深度學(xué)習(xí)的方法應(yīng)用在GUI智能化任務(wù)的組件識別階段。

Chunyang Chen等人[8]在UI(User Interface)代碼自動生成的組件識別階段采用了基于Faster R-CNN[9]的目標(biāo)檢測模型完成從輸入GUI圖像到對應(yīng)所有GUI組件的識別任務(wù)。Faster R-CNN是經(jīng)典的二階段目標(biāo)檢測算法，第一階段將輸入圖片輸入卷積神經(jīng)網(wǎng)絡(luò)進(jìn)行特征提取，然后將輸出特征圖輸入RPN(Region Proposal Network[9]，區(qū)域建議網(wǎng)絡(luò))獲得一定數(shù)量的目標(biāo)組件候選區(qū)域，對這些候選區(qū)域進(jìn)行裁剪過濾后首先進(jìn)行該區(qū)域是目標(biāo)物體或背景的二分類判斷，選區(qū)域提取網(wǎng)絡(luò)確定輸入GUI圖片中可能是組件的目標(biāo)區(qū)域；第二階段對于是包含目標(biāo)組件的區(qū)域進(jìn)行邊界框的回歸修正，形成準(zhǔn)確的目標(biāo)建議區(qū)域，并且通過卷積網(wǎng)絡(luò)提取到的特征圖對于建議區(qū)域內(nèi)的組件分類進(jìn)行Softmax回歸預(yù)測。這是首次通過基于深度學(xué)習(xí)的目標(biāo)檢測算法自動地學(xué)習(xí)識別真實(shí)高保真GUI像素圖數(shù)據(jù)集中的組件，并將識別結(jié)果應(yīng)用到在GUI代碼自動生成任務(wù)中。相比于原有的基于機(jī)器視覺的GUI組件識別方法，它解決了Canny邊緣檢測算法需要人工調(diào)參的局限性，通過數(shù)據(jù)驅(qū)動的方式從真實(shí)的GUI圖片數(shù)據(jù)集中學(xué)習(xí)到了目標(biāo)組件在界面中的位置大小以及類別信息。

在GUI開發(fā)的原型起草過程中，也有很多工作是以簡單的低保真草圖或手繪稿的形式作為原型設(shè)計圖，Jain.V、Agrawal.P、Banga.S[10]等人在將草圖原型轉(zhuǎn)化為代碼的工作當(dāng)中，通過RetinaNet[11]一階段的目標(biāo)檢測算法。一階段的GUI組件檢測算法只通過一個深度神經(jīng)網(wǎng)絡(luò)同時學(xué)習(xí)對組件位置寬高和分類信息的識別，效率上大大高于二階段的目標(biāo)檢測算法，甚至能達(dá)到實(shí)時檢測，同時算法通過提出Focal Loss方法平衡了在一階段目標(biāo)檢測算法中正負(fù)樣本極度不均衡的問題，使得當(dāng)時的RetinaNet的識別精度超越了Faster R-CNN等二階段目標(biāo)檢測算法。

同時在GUI自動化測試研究方面，我們同樣需要自動化地方法準(zhǔn)確地定位待測試GUI組件在界面中的位置和它的類型，減輕測試人員的工作負(fù)擔(dān)。White T D.、Fraser G.、Brown G J.等人[12]將深度學(xué)習(xí)方法運(yùn)用在了GUI自動化檢測任務(wù)中的組件識別階段，對于需要測試的某些小型交互組件，他們提出了基于YOLOv2[13]的一階段目標(biāo)檢測算法，使得在GUI測試階段能夠快速定位到多個待測試界面中的目標(biāo)交互組件，并且通過識別出的組件類型設(shè)定測試規(guī)則，批量編寫測試樣例，極大地提升了軟件測試效率，在應(yīng)用程序GUI的測試工作中實(shí)現(xiàn)了自動化、智能化的目標(biāo)。

4 結(jié)語

目前在圍繞應(yīng)用程序GUI組件自動化識別的工作中，不斷有更優(yōu)秀的方法被應(yīng)用到這個領(lǐng)域并且取得了顯著的成果，其中基于深度學(xué)習(xí)的GUI組件識別方法受到越來越多的關(guān)注和青睞。然而，GUI作為人的設(shè)計思想和設(shè)計風(fēng)格的體現(xiàn)，綜合了人機(jī)工程學(xué)、認(rèn)知心理學(xué)、設(shè)計藝術(shù)學(xué)等多個領(lǐng)域的知識，且隨著人類審美和設(shè)計的發(fā)展一直在改進(jìn)演化，這決定了GUI組件無論是視覺特征還是設(shè)計特征來說都不可能是一成不變的，相反，它會隨著應(yīng)用程序和設(shè)計潮流的發(fā)展快速地變化，由此看來，在GUI組件識別的任務(wù)中，我們更需要的是一種基于數(shù)據(jù)驅(qū)動的方法，能夠從不斷更新?lián)Q代的GUI設(shè)計圖中學(xué)習(xí)到更豐富的設(shè)計特征和圖像特征，從而做到對GUI組件更加準(zhǔn)確地定位和分類。

同時現(xiàn)有方法的研究成果都是面向各自特定平臺特定領(lǐng)域的，可移植性差，而目前大多數(shù)應(yīng)用程序都有自己的多平臺版本或跨平臺解決方案，例如PC端或移動設(shè)備端，它們在GUI設(shè)計上往往有著相似的視覺特征和風(fēng)格特征，我們需要一種能夠支持跨平臺的GUI組件分類方法，讓研究成果能夠在不同平臺設(shè)備上得以驗(yàn)證。

我們的下一步研究工作便是收集并整理大規(guī)模的真實(shí)應(yīng)用程序GUI數(shù)據(jù)集，針對GUI組件的特點(diǎn)進(jìn)行全面的特征提取，讓網(wǎng)絡(luò)能夠?qū)W習(xí)到更加復(fù)雜的組件設(shè)計特征，達(dá)到更高的識別準(zhǔn)確度，使我們的研究在圍繞應(yīng)用程序GUI的智能化任務(wù)中取得更加顯著的成果。