范益
(四川大學計算機學院,成都610065)
現(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)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ù)。
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ī)則來識別元素類型。
通過計算機視覺的方法,能夠簡單快速地對元素進行定位和識別。然而,我們需要人工手動的定義組件特征,隨著界面元素組件種類的增加,定義特征也越復雜和困難,不利于擴展,準確率也低。
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ù)的高定位精度。
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>
深度學習在自然圖像目標檢測任務(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ù),還需要未來的學者更深入的研究去解決。