范益

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

0 引言

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

1 研究現(xiàn)狀

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

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

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

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

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

（3）ImageCLEFdrawnUI

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

1.2 基于計算機視覺的方法

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

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

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

通過計算機視覺的方法，能夠簡單快速地對元素進行定位和識別。然而，我們需要人工手動的定義組件特征，隨著界面元素組件種類的增加，定義特征也越復雜和困難，不利于擴展，準確率也低。

1.3 基于深度學習的方法

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

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

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

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

2 存在問題及建議

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

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

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

3 結(jié)語

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