背景介紹
我們在做一些 Deisgn2Code 的時候，一種比較直接的方式是借助設計師使用的設計工具的開發插件來幫我們提取設計稿裡的中繼資料，我們可以快速提取設計稿裡的圖像、文本、Shape 等原生元素，進而組裝生成一個頁面。但目前我們的開發體系裡還有許多基礎元件是不在設計工具體系裡，比如表單、表格、開關等元件，雖然像 Sketch 這類工具提供了靈活的方式能讓設計師設計出相應的 UI 類型，但是同樣的 UI 所對應 Sketch 裡的 DSL 描述并不是我們所期望的。此時，我們往往需要借助其他途徑來擷取相對準确的描述，通過深度學習不斷學習所需要識别的元件是一個比較好的方式。
（Sketch 中的設計圖層描述）
所在分層
本文講述前端智能化 D2C 裡技術分層中的 基礎元件識别 能力層，主要識别圖像中可能存在預先定義的一些基礎元件，進而輔助下遊技術體系中對已識别的圖層進行表達優化，比如優化圖層嵌套結構進而産出合規的元件樹，優化圖層語義化的結果等。
（D2C 技術能力分層）
整體方案
參照以往的算法工程方案，我們的整體方案涉及到樣本擷取、樣本評估、模型訓練、模型評估以及模型預測一整條流程鍊路。
（算法工程 Pipeline）
樣本擷取 & 評估
樣本集是整個模型的關鍵，樣本的品質決定了模型品質的上限，算法模型的調優隻是不斷得往這個品質靠近。我們的樣本可以來源于多種途徑，因為此模型涉及到元件上下文的識别場景較少，此篇的基礎元件識别模型我們選擇結合業界使用量比較多的一些 UI 類庫自己編碼生成樣本，確定程式設計部分對樣本資料品質的保障。
在具體的樣本編碼開始前，我們需要簡單對我們需要識别的元件做一個簡單的分類，設定好此次分類的類目類型。在對整個樣本的生成上，我們需要遵循以下幾點原則：
- 資料種類豐富且均等，即每種種類數量一緻，盡可能涵蓋多種種類（元件屬性、樣式影響，元件庫的樣式盡量隻在合理的範圍内随機化通用的背景色、寬高、圓角等，泛化元件樣式）
- 針對一些特定場景（比如覆寫問題），也需要構造相關的場景（圖上文本、圖上圖遮罩等）
- 針對一些線框型的元件（比如 Input），可以在周邊 Padding 幾像素的空白避免模型處理學習到邊緣特征
下圖為一個簡單樣本的 DEMO：
（基礎元件識别樣本）
在樣本生成後，你可能需要對自己的樣本集進行一個評估，評估過程中可以适當引入 資料校驗 和 類目統計 等相關的工程，來評估整體的樣本品質：
- 檢測标注資料是否存在錯誤：參考标注區域結合背景色計算方差等方式
- 統計所有 UI 類型的資料分布情況，每個分類的數量以及資料是否均衡等
模型選型
在目前衆多的目标檢測模型中，根據一份最近的 PASCAL VOC 資料集的目标檢測模型報告，我們選擇了一種排名第一的 YOLO One-Stage 算法作為我們基礎元件模型的遷移學習，來快速進行試驗。
（各大目标檢測模型資料分析報告）
簡單介紹下，YOLO 即 You Only Look Once，主要分為三個步驟：
- 将圖像 Resize 到 416 * 416（v3）尺寸
- 卷積網絡學習樣本集裡的分類特性
- 預測的時候進行非極大值抑制，篩選 Boxes
YOLO 采用一個單獨的 CNN 模型來實作端到端的目标檢測，相比其他的二段流（R-CNN 等）算法，YOLO 的訓練和預測速度更快。它将輸入的圖檔切分成 S * S 網格，然後讓每個單元格負責去檢測中心點落在各個單元格中的目标，每個單元格會預測所在目标的邊界框（bounding box）以及邊界框的置信度（confidence score），置信度包含邊界框内含目标的可能性大小以及邊界框的準确度。最後将各個單元格預測的結果做整合得到最終的預測結果。YOLO 相關的其他更多設計細節，感興趣的同學可以通路
yolo官網來了解。
我們在做 Web 裡的基礎元件的目标檢測時，期望卷積網絡在相應的單元格中能夠學習到其中每一類元件的特征，進而能夠識别并區分出不同元件之間的差異，是以在對元件樣本的選取上，要保障元件之間的特性差異，避免卷積網絡丢失這部分的學習。
模型評估
在目标檢測模型的評估中，我們選擇使用均值平均精度 mAP 來進行衡量模型的準确率（基于 COCO 的算法）。可以選擇部分測試集資料的模型預測結果，對結果資料跟資料的真實值（Ground Truth）進行比較，進而計算出每個分類的 AP。
（模型 AP 評估）
此處可以選擇 IoU 超過 0.5 的對所有分類進行一個簡單的制圖比較，可以觀察到目前對于小目标的識别檢測（部分文本元素影響因素較大）精度較差，後續在樣本的處理上可以進一步對此類小目标結合規則部分的預處理做檢測加強。
（模型 mAP 評估）
模型預測處理
因為模型的遷移學習上我們選用了 yolo3，在對圖像做處理時都會将圖像預處理成 416 * 416 的尺寸做訓練學習，為了在模型預測的時候結合訓練資料得到更好的效果，我們可以在預測階段的前置過程中也可将輸入的圖像做一定尺寸的适配，經測試适配後的圖像預測後的 IoU 比未經适配的圖像預測後的 IoU 高出很多（測試集顯示有 10%+ 的提升）。
圖像尺寸适配後，我們訓練完的模型會對輸入的圖像直接做預測，此時會得到一個大緻的類别區域框，但往往我們需要一個圍繞 UI 元件的更加精确的框，此時我們可以借助 OpenCV 的能力結合圖像本身做一個梯度裁邊 Refine 以達到一個更精确的效果，如下圖是邊框 Refine 前後的對比。
（模型預測結果優化）
總結
目前前端智能小組裡的基礎元件包含 20+ 種類，後續将繼續在樣本精細化的分類以及基礎元件的屬性測量表達上做進一步的投入研發，并将模型的資料樣本管理規範化，統一做輸出。未來使用者可以根據我們面向外部開源的樣本集對部分基礎元件識别後做特定的表達處理。