應用程序GUI組件自動化識別方法研究綜述

張中洋

(四川大學計算機學院，成都 610065)

0 引言

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

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

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

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

1 研究基本內容

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

圖1 移動應用程序GUI組件識別任務示意圖

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

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

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

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

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

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

3 基于深度學習的GUI組件識別方法研究

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

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

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

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

4 結語

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

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

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