基於機器學習的原型行動應用程式的圖形用戶界面

摘要 - 面向用戶的軟體開發人員通常將圖形用戶界面（GUI）的模型轉換為代碼。因為 GUI 的變化與時俱進，這個過程既發生在應用程式啟動時，也發生在演化環境中。麻煩的是，這種做法既具有挑戰性又耗時。在本文中，我們提出了一種自動化的方法通過以下三個任務實現 GUI 的準確原型製作，從而實現了這一過程：檢測，分類和組裝。一，邏輯組件使用計算機視覺技術或模型元數據從模型工件中檢測出 GUI 的數量。然後，軟體庫挖掘，自動動態分析和深度卷積神經網絡可將 GUI 組件準確分類為特定於域的類型（例如，切換按鈕）。最後，數據驅動的 K 最近鄰算法生成合適的分層 GUI 可以自動組裝原型應用程式的結構。我們在系統中為 Android 實現了這種方法稱為 ReDraw。我們的評估表明，ReDraw 的平均 GUI 組件分類精度達到 91％，並且組裝了原型應用程式，這些應用程式在視覺親和力方面緊密地鏡像目標模型，同時展示合理的代碼結構體。與行業從業人員的訪談說明了 ReDraw 在改善實際開發工作流程方面的潛力。

索引詞 - GUI，CNN，移動，原型，機器學習，挖掘軟體存儲庫。

1.簡介

大多數面向客戶的現代軟體以 GUI 為中心，依賴有吸引力的用戶界面（UI）和直觀的用戶體驗（UX）來吸引客戶，促進有效完成計算任務。麻煩或美觀的軟體令人不快的用戶界面成功的可能性很小，尤其是公司希望將自己的應用與具有類似功能的競爭對手。這種現象可以在移動應用市場中很容易觀察到作為 App Store 或 Google Play，其中許多提供類似功能的競爭應用程式（也稱為應用程式）功能（例如任務管理器，天氣應用）通過 UI/UX 來區分自己。因此，重要的是正在開發任何基於 GUI 的應用程式的第一步和原型設計模型，這有助於 UI 的實例化和實驗，以便進行評估或證明抽象設計概念。在工業環境中對於較大的團隊，此過程通常由擁有特定領域專業知識的敬業設計師使用圖像編輯軟體製作引人入勝的直觀 GUI 軟體，例如 Photoshop 或 Sketch。這些團隊是通常負責表達一致的設計語言在公司數位化業務的許多方面，包括網站，軟體應用程式和數字市場緊縮材料。此設計過程的某些組件也傾向於延續到較小的獨立發展通過創作實踐設計或原型製作流程的團隊吃線框或模型來判斷設計思路之前承諾花費發展資源實施-給他們。這些初始設計稿創建後，至關重要的是，它們如實地被翻譯成代碼讓最終用戶體驗設計和用戶界面以其預期的形式。自動化原型製作過程 GUI 是一項艱巨的任務。這個困難的核心是需要彌合巨大的抽象差距從任一像素推理出準確的用戶界面代碼基於圖形用戶界面或數字設計的圖形表示草圖。

我們提出一種方法，將原型製作過程構造為以下任務：檢測，分類和組裝。第一項任務涉及檢測-原子元素的邊界框（例如 GUI-用戶無法進一步分解的組件）實體模型設計工件（例如基於像素）的界面圖片。可以通過以下方法解決此挑戰：關於表示 GUI 組件的對象的形成直接從模型工件（例如，解析導出的元來自 Photoshop 的數據），或使用 CV 技術進行推斷對象。一旦來自設計工件的 GUI 組件已被識別，需要將其分類為特定於域的正確類型（例如，按鈕，下拉菜單，進度條）。本質上，這是圖像分類任務，並且對該主題的研究已顯示出巨大的近年來的進步，主要是由於深卷積神經網絡（CNN）。但是，由於 CNN 是一種監督式學習技術，他們通常需要大量的訓練有效數據，例如 ILSVRC 數據集。我們主張對應用程式進行自動動態分析從軟體存儲庫中提取的信息可用於收集屏幕截圖和 GUI 元數據，可用於自動最終得出帶標籤的訓練數據。使用此數據，可以有效地訓練 CNN 來對 GUI 實體模型中的組件（使用檢測到的組件進行提取邊界框）放入其特定於域的 GUI 組件類型。但是，組件的分類圖像不是足以彙編有效的 GUI 代碼。GUI 通常是在代碼中表示為層次樹，其中邏輯組組件捆綁在一起放在容器中。我們使用迭代 K 最近鄰（KNN）算法和 CV 技術在挖出的 GUI 元數據上運行，以及屏幕截圖可以構建現實的 GUI 層次結構，被翻譯成代碼。 我們已經實現了上述方法在適用於 Android 平臺的名為 ReDraw 的系統中。我們從 Google Play 提取了 8,878 個最受好評的應用，使用全自動輸入生成了這些應用程式從我們先前的工作中得出的方法（例如 GUI 抓取）關於移動測試。在自動應用程式執行期間，從每個應用程式中提取最受歡迎的屏幕瀏覽 GUI 層次結構。然後，我們在最受歡迎的原生 Android GUI 組件類型為在防雷屏上觀察到。ReDraw 使用此分類器與迭代 KNN 算法和 addi-傳統的簡歷技術來翻譯不同類型的模擬將工件放入原型 Android 應用中。我們執行了一整套三項評估 ReDraw 的研究旨在測量（i）基於 CNN 的分類的準確性-分隔符（根據基線特徵描述符和基於支持向量機的技術），（ii）相似度生成的應用程式到實體模型（在視覺上和在結構上），以及（iii）的潛在工業適用性我們的系統，通過對手機進行半結構化採訪 Google，華為和 Facebook 的設計師和開發人員。我們的結果表明，我們基於 CNN 的 GUI 組件分類-sifier 的前 1 個平均精度達到 91％（即 CNN 預測的頂級類別是正確的），我們生成了應用程式與其模型具有高度的視覺相似性工件，生成的應用程式的代碼結構相似到實際應用，ReDraw 有潛力改善並促進原型開發一些實用擴展的行動應用程式。我們的評估該部分還說明了 ReDraw 如何勝過其他相關行動應用程式原型開發一些實用擴展的行動應用程式。

總而言之，我們的論文的貢獻有：

• 引入新穎的原型製作方法植根於多種技術組合的軟體 GUI 來自程序分析，MSR，ML 和 CV；和此方法在稱為的工具中的實現適用於 Android 平臺的 ReDraw；
• 對 ReDraw 的綜合經驗評估，測量以下幾個補充質量指標：與相關工作進行比較，並描述提要-從行業專家那裡獲得有關其實用性的反饋；
• 在線附錄展示了以下內容的屏幕截圖：生成的應用程式並研究複製信息；
• 作為實施 ReDraw 的一部分，我們收集了大量包含以下內容的行動應用程式 GUI 數據集屏幕截圖和與 GUI 相關的元數據超過 14k 屏幕和超過 190k GUI 組件；
• ReDraw 的公開開源版本代碼，數據集和訓練有素的 ML 模型。

2.背景和問題陳述

模擬驅動開發實踐的第一個概念我們在本文中引用的是模型工件，即我們定義為：

定義 1-模擬工件：軟體的工件-標明設計準則的標誌和開發過程 GUI 及其內容。

定義 2-GUI 組件：原子圖形元素具有預定義的功能，並顯示在軟體的 GUI 中軟體應用。GUI 組件具有以下幾種與域相關的組件之一類型，每種不同的類型都有不同的功能或美學目的。例如，在常見的網絡應用中組件類型包括下拉菜單和檢查盒子，僅舉幾例。

定義 3-GUI 容器：分組的邏輯結構成員 GUI 組件，通常定義空間顯示其成員的屬性。在以 GUI 為中心的現代應用中，GUI 組件很少使用預定義的坐標在屏幕上呈現。在-相反，容器的邏輯分組形成了分層結構（或 GUI 層次結構）。這些層次結構通常定義有關其組成成分的空間信息並在許多情況下會對尺寸的變化做出反應顯示區域。例如，GUI-顯示文本的組件可能會根據到其容器的尺寸。

有了這些定義，我們要解決的問題本文內容如下：

問題陳述：給定一個模型工件，生成一個打字應用程式，非常類似於模擬 GUI 在視覺上，以及在 GUI 層次結構的預期結構方面。

這個問題可以分解分為三個不同的任務，包括檢測分類和 GUI 組件的功能化，以及現實的組裝 GUI 層次結構和相關代碼。在本文的範圍內，我們專注於自動為移動應用生成 GUI 在視覺和結構上都相似（GUI 層次結構）。為此，我們調查了（i）現有應用程式；以及（ii）素描樣機反向從現有的流行應用程式設計而成。我們利用這些類型的工件作為真實模型通常不是適用於開源移動應用，因此無法在我們的研究中使用。應該注意的是兩種本文中使用的模型偽像可能無法捕獲在創建過程中創建的模型中存在某些歧義一個真正的軟體設計過程的過程。我們討論這在第二節中的含義。

3.方法描述

我們將圍繞以下內容描述我們用於 GUI 原型製作的方法：該過程分為三個主要階段：檢測，分類和部件。圖 2 說明了該過程的概述我們將在整個方法說明中參考。在高層次上，我們的方法首先檢測 GUI 組件通過使用 CV 技術或直接從生成的模型工件中解析元數據使用專業的照片編輯軟體。二，分類我們將檢測到的 GUI 組件轉換為適當的類型使用從大規模收集的 GUI 數據訓練 CNN 對提取的應用程式進行自動動態分析挖掘軟體存儲庫。經過訓練的 CNN 隨後可以應用於模型工件以對檢測到的組合進行分類要素。最後，構建合適的 GUI 層次結構（例如，GUI 容器中 GUI 組件的正確分組）我們利用了基於 KNN 的算法，該算法利用了 GUI-大規模動態分析中提取的信息組裝一個現實的 GUI 組件的嵌套層次結構和 GUI 容器。為了說明我們的一般方法，在每個階段，我們首先描述建議的方法，高層設計決策，然後討論實現具體到我們的 ReDraw 實例的詳細說明適用於 Android 平臺。

3.1 階段 1-GUI 組件的檢測

GUI 原型方法所需的第一個任務是檢測存在於實體模型中的 GUI 組件 tifact。此階段的主要目標是準確推斷原子 GUI 組件元素的邊界框（在實體模型中基於像素的坐標項）。這樣就可以將 GUI 組件的各個圖像裁剪並提取以便在以後使用原型製作過程的各個階段。此階段可以是通過以下兩種方法之一完成：（i）解析數據從模型工件中提取，或（ii）使用 CV 技術檢測 GUI 組件。在以下小節中，我們將介紹這兩種方法的檢測程序作為我們在 ReDraw 中的特定實現。

3.1.1 從設計模型中解析數據

檢測 GUI 組件的第一種方法是存在於模型工件中。鑑於 UI / UX 在當今時代的重要性面向消費者的軟體，許多設計師和小型團隊開發人員團隊進行專業級圖像編輯 Photoshop 或 Sketch 等軟體來創建 GUI 的線框或像素完美靜態圖像包含模型工件。在此過程中，編輯或設計軟體通常用於創建空白尺寸與目標設備屏幕匹配的畫布，或顯示區域（帶有一些便於縮放的設計軟體到多個屏幕尺寸）。然後，代表 GUI 組件作為可編輯對象放置在此組件的頂部畫布來構建模型。這些工具大多數是能夠以以下格式導出模型工件：編碼有關畫布上對象的空間信息，例如使用「可縮放矢量圖形（.svg）」格式或 html 輸出。有關對象布局的信息，包括這些對象的邊界框，都可以解析從這些輸出格式中獲得高度準確的結果檢測組件。因此，如果此元數據用於可用模型實體，可以對其進行解析以獲得 GUI 組件的非常精確的邊界框存在於模型工件中，然後可用於其餘的原型製作過程。

給定在元數據中編碼的空間信息，有時可以在模型製品中使用，有人可能會問：該信息是否也可以用於重建 GUI 組件的分層表示，可以以後有助於代碼轉換過程。不幸，現實的 GUI 層次結構通常無法被可行地解析至少由於以下兩個原因而從此類工件中獲取：（i）設計者使用照片編輯軟體來創建模型，ups 傾向於編碼與層次結構不同的編碼由於設計師缺乏知識，開發人員會關於以編程方式的最佳方式在屏幕上排列 GUI 組件；（ii）限制在照片編輯軟體中可能會禁止創建 pro-語法正確的空間布局。因此，任何分層從此類工件中解析出來的結構很可能是特定的設計師的喜好，或根據容量限制照片編輯軟體的功能，限制了我們的原型場景。例如，設計師可能沒有提供足夠的 GUI 容器來創建有效的反應式移動版式或照片編輯軟體可能不會允許按比例縮放 GUI 組件的相對位置跨不同的屏幕尺寸。

3.1.2 使用 CV 技術進行 GUI 組件檢測

從模型中解析信息會導致高度 GUI 組件的準確邊界框此信息由於以下方面的限制，可能並非始終可用使用的照片編輯軟體或設計不同的照片實踐，例如以數字或物理方式繪製模型使用數位屏，數位板或紙。在這種情況下，偽影可能只包含一張圖片，因此 CV 技術-需要標識相關的 GUI 組件信息的工具。為了支持這些情況，我們的方法建立在中的 CV 技術來檢測 GUI 組件邊界盒子。此過程使用了一系列不同的簡歷技術（圖 2 -1）來推斷對象周圍的邊界框響應圖像中的 GUI 組件。首先，坎尼的邊緣檢測算法用於檢測邊緣圖像中的對象。然後將這些邊緣擴張合併邊緣彼此靠近。最後，那些輪廓邊用於導出原子周圍的邊界框 GUI 組件。合併基於文本的其他啟發式方法使用光學字符識別（OCR）的組件是用於合併文本的邏輯塊的邊界框（例如，與其將每個單詞都檢測為自己的組成部分，句子和文本段落合併在一起）。

3.1.3 ReDraw 實現-GUI 組件檢測

在實施 ReDraw 時，要支持以下情況：可以從適用於 Android 的模型中收集元數據我們針對使用 Marketch 創建的文物的應用程式 Sketch 的插件，可將模型導出為 html 和 javascript 的組合。素描很受歡迎在移動開發人員之間，並提供廣泛的自定義功能大型插件庫中的內容。ReDraw 解析包含在其中的 GUI 組件的邊界框導出的 Marketch 文件。支持與元數據相關的場景實體模型不可用，ReDraw 使用 CV 技術自動推斷組件的邊界框從靜態圖像。因此，GUI 的輸入-ReDraw 的組件檢測階段是屏幕-鏡頭和相應的插銷文件（3 月 ketch 解析程序已應用）或單個屏幕截圖（已應用基於 CV 的技術）。最終結果 GUI 組件檢測過程是一組邊界位於原始輸入屏幕中的框坐標-鏡頭和從原始圖像中裁剪出的圖像集合根據派生的邊界框截圖描述原子 GUI 組件。稍後將提供此信息到 CNN 中分類為 Android 特定組件階段 2.2 中的類型。請注意，只有 GUI-在此過程中檢測到組件。在另一手工 GUI 容器和相應的 GUI 層次結構在第 2 節中描述的組裝階段構造。

3.2 階段 2-GUI 組件分類

一旦原子 GUI 組件的邊界框已從實體模型工件中檢測到錯誤，下一個原型製作過程中的步驟是對裁剪後的圖片進行分類特定 GUI 組件的年齡進入其特定領域類型。為此，我們提出了一種基於數據的基於機器學習的方法利用 CNN 的方法。如該圖所示。2-2.1 和圖 2-2.2，此階段包含兩個主要部分：（i）大規模軟體資源庫挖掘和自動動態分析-sis，以及（ii）CNN 的分類訓練和應用 GUI 組件的圖像。在以下小節中我們首先討論的動機和實施之前的資源庫挖掘和動態分析過程討論使用 CNN 的基本原理以及我們的具體 ReDraw 中的體系結構和實現。

3.2.1 2.1 階段-大規模軟體存儲庫挖掘和動態分析

鑑於其受監管的性質和深入的架構，CNN 針對圖像分類任務需要大量訓練數據以實現精確分類。訓練傳統 CNN 圖像分類網絡的數據典型 ic 由大量標有它們的圖像組成對應的類別，其中標籤對應於優先級圖像中的瑪麗主題。傳統上，此類數據集具有人工採購，其中人類費力地標記數據集中的每個圖像。但是，我們建議自動創建標籤火車的方法包含特定 GUI 組件的圖像的數據從完整的屏幕截圖和對應的標籤中裁剪其特定於域的類型（例如，按鈕或微調框 Android）使用全自動動態程序分析。我們對自動化動態分析的關鍵見解過程如下：在自動探索軟從大型存儲庫，平臺特定框架中挖掘的軟體可以用來提取描述 GUI 的元數據，然後可以將其轉換為適合的大標籤訓練集 CNN。如圖 2- 2.1 所示，此過程可以通過挖掘軟體倉庫自動提取可執行文件。然後進行大量有關自動輸入的研究可以使用基於 GUI 的應用程式測試生成通過模擬用戶自動執行挖掘的應用程式-輸入。例如，如果目標是移動應用，則輸入生成技術依賴於基於隨機的策略可以用於此任務。作為應用程式執行後，屏幕截圖和與 GUI 相關的元數據可以為每個觀察到的獨特屏幕自動提取或應用布局。其他類似的自動 GUI 翻錄或爬網方法也可以適用於其他平臺例如網絡。可以使用第三方軟體捕獲屏幕截圖或目標作業系統隨附的實用程序。圖形用戶界面可以從各種來源收集相關的元數據包括可訪問性服務，html DOM 信息-或 UI 框架（例如 uiautomator）。的然後可以使用 GUI 元數據和屏幕截圖提取 GUI 組件的子圖像及其標記的類型從描述每個屏幕的相關元數據中解析。結果數據集的基礎質量與標籤如何很好地描述了 GUI 組件的類型顯示在屏幕上。鑑於許多軟體 UI 框架，可用於挖掘此類數據直接從呈現工具中提取信息屏幕上的應用程式 GUI 組件，此信息可能非常準確。但是，有一些從這些框架中收集信息的情況-作品包含輕微的錯誤或無關的情況。我們討論這些情況和可採取的緩解措施他們在 3.2.4 節。

3.2.2 ReDraw 實施-軟體存儲庫-和自動化動態分析

採購大量 Android 應用來構建我們的我們開採的 CNN 的培訓，驗證和測試語料庫 Google Play 上的免費應用程式。為確保代表提取的應用的情感性和質量，我們提取了截至 2017 年 6 月 Google Play 商店中的所有類別。然後，我們篩選出主要包含遊戲，因為遊戲傾向於使用非標準類型的 GUI，無法自動提取的組件。這個離開我們共有 39 個類別。然後，我們使用了 Google PlayAPI 庫，可從每個庫下載前 240 個 APK 類別，不包括一個以上存在的重複項類別。這導致了總共 8,878 獨特的 APK 之後解釋跨類別交叉列出的重複項。

要從挖出的 APK 中提取信息，我們會補充了一個大型動態分析引擎，稱為使用系統自動化的執行引擎基於我們先前工作的輸入生成方法 CRASHSCOPE 和 MONKEYLAB 至充實應用程式並提取屏幕截圖和與 GUI 相關的內容有關已訪問屏幕的信息。更具體地說，我們的系統 GUI 探索在以下位置導航目標應用程式的 GUI 以深度優先搜索（DFS）的方式鍛鍊可輕敲的內容，可長時間敲擊且可鍵入（例如，能夠接受文本輸入）組件。在系統的探索中，我們使用 Android 的 uiautomator 框架提取與 GUI 相關的信息作為描述層次結構的 xml 文件以及給定顯示的組件的各種屬性屏幕。我們使用 Android screencap 實用程序來收集屏幕截圖。該 uiautomator XML 文件包含各種顯示的每個 GUI 組件的屬性和屬性在 Android 應用程式屏幕上（包括邊界）框（例如，屏幕內的精確位置和區域）和組件類型（例如 EditText，ToggleButton）。這些屬性可為每個 GUI-提供單獨的子圖像顯示在給定屏幕上的要從中提取的組件相應的屏幕截圖並自動標記為帶有適當的類型。

DFS 探索策略的實施利用狀態機模型，其中考慮了狀態唯一的應用程式屏幕，如其活動名稱所示並使用以下命令提取顯示的窗口（例如，對話框）在 ADB 殼 dumpsys 窗口命令。考慮到超過 8.8k 個應用中可行的執行時間我們的數據集，同時仍在探索幾個應用程式屏幕，我們將我們的勘探策略限制為每次執行 50 次操作應用程式。先前的研究表明，大多數自動輸入 Android 的生成方法趨於達到峰值覆蓋率（例如，約 20％到 40％的語句覆蓋率）經過 5 分鐘的探索。而不同的輸入生成方法往往表現出不同的數量給定時間單位的操作數，我們過去的工作表明我們的自動輸入生成方法可以實現有競爭力的覆蓋率，以及我們的規定每次 50 次動作的舒適時間超過 5 分鐘應用程式。此外，我們的目標是進行大規模分析不是要完全探索每個應用程式，而是確保各種屏幕和 GUI 組件類型。對於每個應用程式，執行引擎提取 uiautomator 前六個唯一屏幕的文件和屏幕快照對每個應用程式的屏幕數量參觀了。如果給定的數量少於六個屏幕應用程式，然後收集所有屏幕的信息。我們的大型執行引擎以並行方式運行，中央調度員向工人分配工作的地方，每個工作人員都連接到一個物理 Nexus 7 的地方平板電腦，負責協調執行傳入的工作。在動態分析過程中，每個工作包括系統地執行來自我們的數據集。當工人完成工作後，通知調度員，調度員又分配新的工作。此過程在 5 名工人上並行進行，直到所有我們已經研究了數據集中的應用程式。由於廣告在免費應用程式中很受歡迎，通常是動態 WebView 而非本機組件組成，我們使用 Xposed 來阻止應用中的廣告使其他類型的本機組件模糊。

3.2.3 2.2 階段-GUI 組件的 CNN 分類

收集了標記的訓練數據集後，我們需要訓練一種機器學習方法來提取顯著特徵從 GUI 組件圖像中進行分類基於這些提取特徵的圖像。去完成我們的方法利用了 CNN 的最新進展。的與其他圖像分類相比，CNN 的主要優勢方法是該架構允許自動執行從圖像數據中提取抽象特徵的逼近非線性關係的應用原理數據局部性和端到端可訓練的分類建築。

3.2.4 ReDraw 實現-CNN 分類器

一旦目標實體模型中的 GUI 組件具有使用模型元數據或基於 CV 進行檢測技術，ReDraw 必須有效地將這些組合陣營。為此，ReDraw 實施了 CNN 將 GUI 組件的目標圖像分類為觀察到的 15 種最受歡迎的組件之一在我們的數據集中。在本小節中，我們首先描述數據-用於生成培訓，驗證和測試數據集（示例如圖 4 所示）在描述我們的 CNN 架構和培訓之前我們採用的程序。

數據清理：我們實施了多種類型的預備降低噪音的處理和濾波技術。更多具體來說，我們在三個階段實施了過濾流程不同的粒度級別：（i）應用程式，（ii）屏幕和（iii）GUI 組件級別。

3.3 階段 3-應用程式組裝

原型製作過程的最後任務是組裝應用程式 GUI 代碼，包括三個階段：（i）建立適當的組件和容器層次結構，（ii）從目標實體模型推斷出樣式細節，（iii）組裝應用程式。

3.3.1 推導 GUI 層次結構

為了從的分類集合中推斷出現實的層次結構組件，我們的方法利用了 KNN 技術（方法 1）用於構建 GUI 層次結構。該算法採用表示檢測到的和分類的 GUI 組件的集合作為單個級別樹（InputNodes）中的節點作為輸入。然後，對於我們從自動化收集的數據集中的每個屏幕動態分析，Alg。1 次首先提取一組 TargetNodes 的對應於 InputNodes，它們是算法第一次通過的葉節點裡特姆。接下來，將 InputNodes 與每個使用基於以下內容的相似性指標提取（TargetNodes）屏幕所佔據的屏幕區域的併集交集（IOU）重疊成分（ALG 的邊界框。1 -line5）。通過選擇一個匹配的屏幕 InputNodes 之間的最高 IOU 組合得分最高和 TargetNodes。然後，父容器組件

3.3.2 推斷樣式並組裝目標應用

為了從模型中推斷出樣式細節，我們的方法採用色彩量化（CQ）的 CV 技術，和顏色直方圖分析（CHA）。對於 GUI 組件其類型不表示他們正在顯示圖像，我們的方法量化了每個圖像的顏色值像素並構建顏色直方圖。最受歡迎顏色值可用於通知樣式屬性生成代碼時的組件。例如，對於顯示文本的組件，最流行的顏色可以是用作背景和第二最普遍的顏色可以用於字體。

3.3.3 ReDraw 實施-App AssemblyReDraw 使用 KNN 組裝 Android 應用程式 GUI 層次結構構建方法（請參見第 3.3.1 節）和基於 CV 的顏色樣式檢測。輸入到 Alg。1 是來自 CNN 的一組分類的「葉節點」組件，以及輸出為 GUI 層次結構。為提供足夠的數據 KNN 算法，一個語料庫，包括來自從中挖掘的 GUI 層次結構的「清理」屏幕我們構建了大規模的動態分析過程。這個語料庫形成 InputNode 到的數據集 TargetNodes 組件在層次結構構建期間匹配 tion。KNN 為目標生成的 GUI 層次結構然後使用「葉節點」組件來推斷風格細節來自原始的模型工件。更具體地說，每個組件和容器，我們執行 CQ 和 CHA 提取每種成分的主色。對於有文字元素的組件，我們將光學使用開源 Tesseract 進行字符識別（OCR）在原始屏幕快照庫中獲取字符串。

4 實驗結果

4.1 RQ1 結果：CNN 的有效性

ReDraw 基於 CNN 的 GUI 組件分類器能夠獲得較高的平均精度（91%），並優於基線 BOVW 方法的平均精度（65%）。

4.2 RQ2 結果：層次結構構建

ReDraw-Mock Up 能夠生成與真實層次結構相似的 GUI 層次結構，而不是 REMAUI 或 pix2code。這一信號，重新繪製的層次結構可以被開發人員使用的低努力。

4.3 RQ3 結果：視覺相似度

與目標截圖相比，ReDraw 生成的應用程式具有很高的視覺相似性。

4.4 RQ4 結果：工業適用性

ReDraw 有望應用於工業設計和開發工作流程，特別是在進化環境中。然而，模塑最有可能是必須作出適合具體工作流程和原型工具鏈。

致謝

本文由南京大學軟體學院 iSE 實驗室 2020 級碩士研究生張晶翻譯轉述。