基于用戶界面的元素組件識(shí)別研究

范益

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

0 引言

現(xiàn)在大多數(shù)的軟件開發(fā)都是以GUI 設(shè)計(jì)為中心，通過優(yōu)美的界面設(shè)計(jì)和容易理解的用戶體驗(yàn)來吸引用戶，保證產(chǎn)品競(jìng)爭(zhēng)力。現(xiàn)在已經(jīng)有許多研究來幫助設(shè)計(jì)師和開發(fā)人員快速簡(jiǎn)單地完成GUI 設(shè)計(jì)，如GUI 自動(dòng)測(cè)試[1-2]、GUI 檢索[3-4]、代碼生成[5-6]，而識(shí)別出GUI 元素組件是這些工程任務(wù)重要的一步。識(shí)別GUI 元素可以通過檢測(cè)工具或者是基于像素的方法?；诠ぞ叩姆椒ㄐ枰罱ㄟ\(yùn)行環(huán)境并獲得應(yīng)用軟件API 的訪問權(quán)限，是侵入性的和受限的。而基于像素的方法具有跨平臺(tái)的特性，可以廣泛地使用在各個(gè)新應(yīng)用軟件中。因此，本文只調(diào)研了基于像素的方法，現(xiàn)有的方法主要通過傳統(tǒng)的計(jì)算機(jī)視覺和深度學(xué)習(xí)的方法來識(shí)別和定位GUI 組件。隨著深度學(xué)習(xí)發(fā)展，目標(biāo)檢測(cè)技術(shù)在自然圖像中已經(jīng)取得了重大的成功，目標(biāo)檢測(cè)技術(shù)在GUI 識(shí)別任務(wù)中極具潛力，因此本文在此方面著力進(jìn)行了歸納和整理，說明了現(xiàn)有方法取得的成功和不足。另外，介紹了常用數(shù)據(jù)集，討論了GUI 識(shí)別與自然圖像識(shí)別的不同以及現(xiàn)有方法存在的問題，并在此基礎(chǔ)上對(duì)未來的研究方向提出了建議和展望。

1 研究現(xiàn)狀

1.1 數(shù)據(jù)集

（1）Rico 數(shù)據(jù)集

Rico[3]數(shù)據(jù)集包含了來自27 個(gè)類別的超過9.3 萬個(gè)Android 應(yīng)用程序的設(shè)計(jì)數(shù)據(jù)。它公開了超過66k個(gè)不重復(fù)UI 屏幕截圖，以及其對(duì)應(yīng)的視覺的、文本的、結(jié)構(gòu)的和交互設(shè)計(jì)屬性。Rico 數(shù)據(jù)集創(chuàng)建用于支持五類數(shù)據(jù)驅(qū)動(dòng)應(yīng)用：設(shè)計(jì)搜索、UI 布局生成、UI 代碼生成、用戶交互建模和用戶感知預(yù)測(cè)。

（2）ReDraw 數(shù)據(jù)集

Kevin Moran[6]自動(dòng)挖掘250 個(gè)Android 應(yīng)用程序，收集14382 個(gè)不重復(fù)UI 屏幕截圖，并對(duì)191300 個(gè)GUI 組件進(jìn)行了標(biāo)記分類。ReDraw 還包含了一個(gè)組件分割過后的數(shù)據(jù)集，用于訓(xùn)練CNN 分類器。

（3）ImageCLEFdrawnUI

ImageCLEFdrawnUI[7]創(chuàng)建了一個(gè)手繪用戶界面的草圖數(shù)據(jù)集，其中2363 張被用于訓(xùn)練和587 張用于測(cè)試。每個(gè)草圖的UI 元素平均數(shù)量為28 個(gè)，最少4 個(gè)，最多131 個(gè)元素。該數(shù)據(jù)被創(chuàng)建用于手繪GUI 的目標(biāo)檢測(cè)任務(wù)。

1.2 基于計(jì)算機(jī)視覺的方法

REMAUI[8]提出了一種從移動(dòng)應(yīng)用界面截圖推斷戶界面代碼的技術(shù)，它分別檢測(cè)文本和非文本元素。對(duì)于文本元素，使用光學(xué)字符識(shí)別（OCR）技術(shù)識(shí)別。對(duì)于非文本元素，它使用Canny 邊緣檢測(cè)[9]來檢測(cè)GUI 元素的結(jié)構(gòu)邊緣，通過高斯濾波器平滑圖像和降低噪聲，然后進(jìn)行多級(jí)濾波來識(shí)別圖像中的真實(shí)邊緣。在此之后，REMAUI 執(zhí)行邊緣合并，獲得輪廓，并通過合并部分重疊區(qū)域獲得GUI 元素的邊界框。

Kevin Moran[6]提出了一種方法，通過檢測(cè)、分類和組裝來自動(dòng)從移動(dòng)應(yīng)用生成用戶界面代碼。文中通過邊緣檢測(cè)算法和OCR 來檢測(cè)圖像GUI 組件和文本的邊緣，然后通過閉合操作來擴(kuò)展融合彼此，以此來得到GUI 組件的包圍框。最后，將分割出的組件元素輸入CNN 分類器中進(jìn)行識(shí)別。

Robinson[10]為了將手繪草圖自動(dòng)生成界面代碼，和Kevin Moran 相似，首先通過邊緣檢測(cè)算法以及輪廓檢測(cè)算法得到元素組件的位置，然后通過角點(diǎn)檢測(cè)、直線檢測(cè)等方法來提取每個(gè)候選元素區(qū)的特征，最后定義了一系列的啟發(fā)式規(guī)則來識(shí)別元素類型。

通過計(jì)算機(jī)視覺的方法，能夠簡(jiǎn)單快速地對(duì)元素進(jìn)行定位和識(shí)別。然而，我們需要人工手動(dòng)的定義組件特征，隨著界面元素組件種類的增加，定義特征也越復(fù)雜和困難，不利于擴(kuò)展，準(zhǔn)確率也低。

1.3 基于深度學(xué)習(xí)的方法

Gallery D.C[11]通過應(yīng)用界面截圖來自動(dòng)收集了11種類型的組件庫(kù)，文中主要使用了目標(biāo)檢測(cè)網(wǎng)絡(luò)Faster R-CNN[12]來確定GUI 設(shè)計(jì)圖像中GUI 組件的類型、大小和位置。Faster R-CNN 是一種基于兩階段錨盒的目標(biāo)檢測(cè)深度學(xué)習(xí)技術(shù)。它首先由區(qū)域建議網(wǎng)絡(luò)（RPN）生成一組區(qū)域候選，也稱為候選區(qū)域（RoIs），它可能包含目標(biāo)。RPN 是一個(gè)完全卷積的網(wǎng)絡(luò)，可以有效地預(yù)測(cè)具有廣泛尺度和縱橫比的候選區(qū)域。RPN 使用具有不同的尺度和縱橫比的錨框來大大簡(jiǎn)化生成目標(biāo)候選區(qū)域的過程。對(duì)于每個(gè)框，RPN 然后計(jì)算一個(gè)Object?ness 評(píng)分，以確定它是否包含一個(gè)對(duì)象，并將其回歸以適應(yīng)包含對(duì)象的實(shí)際邊界框。第二階段是一個(gè)基于CNN 的圖像分類器，它確定RoIs 中的目標(biāo)類別。

Thomas D. White[2]提出了一個(gè)GUI 自動(dòng)化測(cè)試工具，在其過程中使用了YOLOv2[13]來對(duì)GUI 小部件進(jìn)行快速識(shí)別和定位。YOLO[14]是Redmon 等人提出的一種一段式目標(biāo)檢測(cè)網(wǎng)絡(luò)，它只需要一次CNN 卷積就可以標(biāo)注整個(gè)圖像。YOLO 將單個(gè)神經(jīng)網(wǎng)絡(luò)應(yīng)用于完整的圖像，將其劃分為一個(gè)S×S 網(wǎng)格，網(wǎng)格單元負(fù)責(zé)檢測(cè)中心所處的物體，并同時(shí)預(yù)測(cè)每個(gè)區(qū)域的邊界框和概率。YOLOv2 是YOLO 的擴(kuò)展，采用了一種更強(qiáng)大的深卷積骨干結(jié)構(gòu)。此外，在SSD 中使用的錨策略的啟發(fā)下，YOLOv2 通過從訓(xùn)練數(shù)據(jù)中進(jìn)行k-均值聚類來定義更好的先驗(yàn)錨。YOLOv2 實(shí)現(xiàn)了很高的處理速度并且具有較高的精度。

Vanita Jain[15]實(shí)現(xiàn)了從手繪草圖到用戶界面代碼的自動(dòng)生成，文中使用了一段式目標(biāo)檢測(cè)網(wǎng)絡(luò)RetinaNet[16]來識(shí)別和定位草圖中的GUI 組件。RetinaNet 提出了一個(gè)稱為焦損失的損失函數(shù)，通過重塑標(biāo)準(zhǔn)交叉熵?fù)p失，它可以降低分配給分類良好或容易的目標(biāo)的損失，使焦點(diǎn)損失集中在分類困難的目標(biāo)，大大克服了單級(jí)檢測(cè)網(wǎng)絡(luò)難以訓(xùn)練不平衡正負(fù)例的缺點(diǎn)，使單級(jí)檢測(cè)網(wǎng)絡(luò)能夠達(dá)到兩級(jí)檢測(cè)網(wǎng)絡(luò)的可比精度，同時(shí)保持非常高的檢測(cè)速度。

通過深度學(xué)習(xí)的方法來識(shí)別用戶界面元素，更易擴(kuò)展，準(zhǔn)確率也要高于傳統(tǒng)的計(jì)算機(jī)視覺技術(shù)。然而，現(xiàn)有的目標(biāo)檢測(cè)方法并沒有考慮到GUI 的獨(dú)特性質(zhì)，以及GUI 元素檢測(cè)任務(wù)的高定位精度。

2 存在問題及建議

GUI 圖像與自然圖像不同，它是人為設(shè)計(jì)的，不同的設(shè)計(jì)師對(duì)同一GUI 組件可能使用不同的文本、顏色、背景和外觀。另外，不同類的GUI 元素通常具有相似的大小、形狀和視覺特征。因此，這導(dǎo)致了目標(biāo)檢測(cè)網(wǎng)絡(luò)對(duì)GUI 組件識(shí)別困難。對(duì)此，為了更準(zhǔn)確地識(shí)別界面元素，我們可以考慮在現(xiàn)有網(wǎng)絡(luò)中引入設(shè)計(jì)原則來優(yōu)化識(shí)別結(jié)果，一個(gè)GUI 元素組件的類型通常與它周圍的GUI 元素組件類型有關(guān)，因此我們可以設(shè)計(jì)一個(gè)CRF（條件隨機(jī)場(chǎng)）來對(duì)其進(jìn)行優(yōu)化，學(xué)習(xí)其包含的設(shè)計(jì)模式。

對(duì)于通用對(duì)象檢測(cè)，GUI 元素檢測(cè)對(duì)區(qū)域的準(zhǔn)確性有更嚴(yán)格的要求，因?yàn)镚UI 區(qū)域定位不準(zhǔn)確對(duì)下游任務(wù)的影響非常大，例如可能導(dǎo)致代碼生成中的布局不準(zhǔn)確。因此，我們需要改進(jìn)現(xiàn)有的包圍框生成方式，GUI 組件元素的包圍框分布規(guī)則，我們可以考慮先引入先驗(yàn)知識(shí)。此外，還沒有無錨模型用于GUI 組件檢測(cè)，這也需要我們?nèi)パ芯看朔椒ㄊ欠襁m用于此項(xiàng)任務(wù)。

最后，對(duì)于手繪用戶界面草圖的研究還非常少，這是一個(gè)難點(diǎn)。手繪草圖本身具有稀疏性、抽象性，缺乏自然圖像的紋理特征，并且現(xiàn)有研究中并沒有專為草圖所設(shè)計(jì)的目標(biāo)檢測(cè)框架，這更需要我們?nèi)ヌ剿鳌?/p>

3 結(jié)語

深度學(xué)習(xí)在自然圖像目標(biāo)檢測(cè)任務(wù)中取得了巨大成功，其檢測(cè)效果也遠(yuǎn)優(yōu)于傳統(tǒng)的計(jì)算機(jī)視覺技術(shù)，這使得在GUI 元素檢測(cè)任務(wù)中，許多研究都開始使用現(xiàn)有成熟的目標(biāo)檢測(cè)網(wǎng)絡(luò)，并且取得了不錯(cuò)的效果。然而，由于GUI 圖像的特殊性，準(zhǔn)確檢測(cè)GUI 圖像中的GUI 元素任然是一項(xiàng)具有挑戰(zhàn)性的任務(wù)。在未來，我們還需要根據(jù)GUI 圖像的特點(diǎn)來使現(xiàn)有的目標(biāo)檢測(cè)網(wǎng)絡(luò)更適合我們的檢測(cè)任務(wù)。此外，對(duì)于手繪用戶界面草圖的目標(biāo)檢測(cè)，是一個(gè)更為特殊更為困難的一項(xiàng)識(shí)別任務(wù)，還需要未來的學(xué)者更深入的研究去解決。