基于用戶界面的元素組件識別研究

范益

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

0 引言

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

1 研究現狀

1.1 數據集

（1）Rico 數據集

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

（2）ReDraw 數據集

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

（3）ImageCLEFdrawnUI

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

1.2 基于計算機視覺的方法

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

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

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

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

1.3 基于深度學習的方法

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

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

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

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

2 存在問題及建議

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

對于通用對象檢測，GUI 元素檢測對區域的準確性有更嚴格的要求，因為GUI 區域定位不準確對下游任務的影響非常大，例如可能導致代碼生成中的布局不準確。因此，我們需要改進現有的包圍框生成方式，GUI 組件元素的包圍框分布規則，我們可以考慮先引入先驗知識。此外，還沒有無錨模型用于GUI 組件檢測，這也需要我們去研究此方法是否適用于此項任務。

最后，對于手繪用戶界面草圖的研究還非常少，這是一個難點。手繪草圖本身具有稀疏性、抽象性，缺乏自然圖像的紋理特征，并且現有研究中并沒有專為草圖所設計的目標檢測框架，這更需要我們去探索。

3 結語

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