前端代碼是怎樣智能生成的？

做者|萊斯 出品|阿里巴巴新零售淘系技術部

導讀：做爲阿里經濟體前端委員會四大技術方向之一，前端智能化項目經歷了 2019 雙十一的階段性考驗，交出了不錯的答卷，天貓淘寶雙十一會場新增模塊 79.34% 的線上代碼由前端智能化項目自動生成。在此期間研發小組經歷了許多困難與思考，本次 《前端代碼是怎樣智能生成的》 系列分享，將與你們分享前端智能化項目中技術與思考的點點滴滴。

概述

無線大促頁面的前端代碼中，存在大量的業務模塊或業務組件（下文統稱業務模塊），即具備必定業務功能的代碼單位。獲取頁面中業務模塊的信息以後，能夠用於複用代碼、綁定業務字段等後續功能。所以從視覺稿識別出業務模塊，在前端智能化領域中成爲用途普遍的功能環節。

與面向中後臺的基礎組件識別和表單識別功能不一樣，業務模塊識別主要面向無線端頁面，而且來源主要是視覺稿。相對的，業務模塊 UI 結構更加複雜，而且視覺稿提供的內容已經有較多可辨別的信息（如文本內容、圖片尺寸等），所以咱們沒有直接使用圖片深度學習的方案，而是從視覺稿產出的 DSL 中提取預約義的特徵值，用傳統學習多分類的方法來實現模塊識別。本識別功能最終返回業務模塊的類別、視覺稿中的位置等信息。

整體功能以下圖所示。包括：

一、樣本構造，根據用戶配置和自定義的數據加強規則對視覺稿進行 UI 層的加強，以獲得視覺多樣化的樣本。而後在定義好業務字段的基礎上，進行特徵值抽取並存儲。 二、算法選擇，目前提供的都是傳統機器學習方法中的多分類算法。

三、模型實現，基於集團機器學習平臺實現模型搭建及相關算法工程，作到自動化訓練與部署。

四、接口提供，模型對外提供預測識別服務以及結果反饋服務。

整體功能見下圖：

所在分層

以下圖所示，咱們的業務模塊識別服務位於物料識別層，爲視覺稿導出的 DSL 提供進一步的業務定製化的識別能力，在後續代碼生成的過程當中滲透到字段綁定、業務邏輯等功能之中。D2C 功能分層見下圖：

樣本構造

機器學習是基於大量真實數據的訓練過程，一個好的樣本庫可讓你的模型訓練事半功倍。咱們的樣原本源是視覺稿（Sketch），但同一個模塊的 Sketch 視覺稿可能只有寥寥幾張，可獲取的樣本數量過少。所以首先要解決量的問題。

數據加強

爲解決樣本數量問題，咱們採用了數據加強的方法。數據加強有一套默認的規則，同時也是可配置的。用戶可自行根據視覺稿上各個元素在真實場景中可能發生的變化，如「是否可隱藏」，「文本字數可變範圍」等維度來調整屬性，產出自定義的配置項。所以樣本製做者能夠清晰的知道本身所造樣本側重的差別點在哪裏。

咱們根據這些配置項對屬性進行發散、組合，生成大量不一樣的視覺稿 DSL。這些 DSL 之間隨機而有規律地彼此相異，據此咱們能夠得到大數量的樣本。

加強配置的界面以下圖所示，左側與中部是 DSL 樹及渲染區域，右側就是加強配置的區域。配置項由如下 2 部分組成：

一、加強屬性：尺寸、位置、隱藏、前景背景色、內容

二、加強方式：連續範圍、指定枚舉值

樣本生成的界面見下圖：

數特徵提取

獲得大量加強後的視覺 DSL 後，如何生成樣本呢？首先明確咱們所需的樣本格式應該是表格型數據，以配合傳統機器學習方法的輸入格式：一條樣本數據即一個特徵向量。所以咱們要對 DSL 進行特徵提取。

基於此前的模型訓練經驗，咱們發現某些視覺信息對於模塊的類別判斷尤其重要。所以咱們對 UI 信息進行抽象，自定義並提取爲特徵維度，如 DSL 的寬、高、佈局方向、包含圖片數量、包含文本數量等。經過各類視覺信息的抽象，咱們獲得 40 多維的視覺特徵。

除了視覺特徵維度之外，咱們還增長了自定義的業務特徵。即根據必定的「業務規則」，將某些元素塊定義爲具備業務含義的元素，如「價格」、「人氣」等，並抽象出 10 個維度的業務特徵。在這一過程當中一樣支持用戶自定義業務規則，可經過正則匹配等方式實現。

視覺抽象特徵加上業務特徵，組成一個特徵向量。特徵向量加上分類 label，即一個樣本。

算法與模型

首先咱們的輸入是 Sketch 設計稿提取出的標準化 DSL，目標是認出該 DSL 是哪一個業務模塊，能夠歸結爲一個多分類問題。沿着這一思路，前文咱們從大量加強後的 DSL 中提取特徵值、生成數據集以供訓練。咱們使用的多分類模型基於算法平臺提供的各類組件進行搭建。

隨機森林

模型搭建

最初咱們選擇隨機森林模型做爲多分類模型，由於隨機森林的執行速度快、自動化流程順暢，幾乎無需額外操做就知足了咱們算法工程的需求；而且對特徵值處理的要求較低，會自行處理連續和離散變量，規則以下表所示。

隨機森林變量類型自動解析規則見下圖：

所以能夠迅速的搭建出十分簡潔的模型，以下圖所示。

線上使用的隨機森林模型見下圖：

調參過程

咱們發現隨機森林對於樣本庫內的數據，偶爾會有不自信的狀況發生，即 positive true 的置信度較低，被置信閾值卡住。尤爲是視覺很是類似的樣本，如圖所示的兩個類似模塊就給咱們的分類結果帶來偏差。

類似模塊見下圖：

爲優化這種「不自信」的問題，咱們對隨機森林進行了調參，包括單棵樹隨機樣本數、單棵樹最大深度、ID3/Cart/C4.5 樹的種類配比等參數，也預接入特徵選擇組件，效果均不理想。最終在特徵值重要性評估後手動反饋到特徵選擇並從新訓練這一鏈路中取得了較好的結果，以下圖所示。但這一過程沒法融入到自動化訓練流程中，最終被咱們放棄。

調參過程當中使用過的隨機森林模型見下圖：

離散特徵問題

隨機森林雖然能夠自動處理離散變量，可是若是測試集中出現了訓練集之外的離散值，算法沒法處理這樣的狀況。要解決這一問題，需確保每一個離散特徵的所有取值都出如今訓練集中。因爲有多個離散特徵，也沒法經過簡單的分層採樣來解決。這也是隨機森林模型應用中的痛點之一。

綜上是咱們在隨機森林模型上作的工做，隨機森林簡單易上手、快速出結果，而且在大多數業務場景下都能知足識別需求，成爲模塊識別功能的 1.0 版本算法。但因爲其算法缺陷，咱們後來引入了另外一種模型 XGBoost。

XGBoost 多分類

模型搭建

XGBoost 經過 Boosting 的方法提高樹的「準確率」，相較於隨機森林算法在咱們的數據集上表現更優越。可是算法平臺的 XGBoost 模型有許多流程不標準的地方，所以爲了實現自動化鏈路，咱們搭建瞭如圖所示模型。

XGBoost 模型見下圖：

預處理

XGBoost 模型須要更多的預處理方法來實現，包括：

一、Label Encoding：預處理過程。XGBoost 僅支持從 0 開始到（分類數-1）的 label 數值。但爲了映射方便，咱們存儲的 label 值對應的是平臺的分類 ID，並非 0～N 的，甚至可能不是連續整數。所以須要用 Label Encoding 組件編碼到符合 XGBoost 需求的數值。

二、存儲 Label 映射表：數據轉存，由於預測接口會用到這一映射表來轉義平臺分類，所以要額外保存。

三、數據重整：預處理過程，爲防止隨機拆分算法將訓練集的 label 拆分爲不完備的數據集，把訓練集 label 的缺失數據撈回來。對模型會有必定干擾，可是在數據極少的極端狀況下才會發揮做用。

XGBoost 在測試數據上的表現頗爲自信，下降了閾值劃分的困難，預測結果也可以很好的知足咱們「識別正確組件」的業務需求，而且也能夠支持自動化流程，所以成爲後續咱們主推的傳統訓練模型。

難點問題：Out Of Distributio

值得一提的是，咱們沒法對當前模塊庫之外的全部視覺樣本進行全面的收集，這樣的工程就如同爲了作一個阿里內部的面部識別系統，而去收集 70 億人類的面部照片同樣。樣本庫之外的數據缺失致使咱們實際上是少了一個隱藏的分類——負樣本分類。也就引起了 Out-of-Distribution 問題，即樣本庫之外數據帶來的預測失準問題，其本質是分類結果中 false positive 過多。

在咱們的場景下，這是一個很難解決的問題，由於收集所有負樣本的困難性。目前咱們是如何應對這一問題的呢？

閾值設定

咱們將分類模型輸出的置信度 prob 做爲肯定分類結果的參考依據，高於某一閾值則認爲匹配到某個分類。這一方法具備經驗意義，實踐中有效的屏蔽了大部分 OOD 錯誤。

邏輯控制

對於算法模型的部分 OOD 誤判，咱們能夠經過邏輯關係來辨別。如咱們認爲 DSL 樹的同一條路徑上不可能有多個相同組件（不然造成自嵌套），若是該路徑上識別出多個相同組件，那麼咱們經過置信度大小來選擇識別結果。此類邏輯幫咱們篩選了大部分誤判。

負樣本錄入

咱們提供的反饋服務，容許用戶將識別錯誤的 DSL 上傳，上傳後加強爲必定數量的負樣本並存儲。在此基礎上從新訓練，能夠解決 OOD 問題。

目前 OOD 問題仍是依賴邏輯和反饋的方法來規避，算法層面仍然沒有解決該問題，這是咱們下一階段計劃去作的事。

模型部署

算法平臺支持將模型部署爲線上接口，即預測服務，經過 imgcook 平臺可一鍵調用部署。爲了實現自動化訓練、部署的流程，咱們還作了一系列算法工程的工做，在此不做詳述。

預測與反饋

預測服務，輸入爲設計稿提取的 DSL（JSON），輸出爲業務模塊信息，包括 ID、在設計稿上的位置等。

在調用算法平臺的預測接口以前，咱們加入了邏輯上的過濾，包括：

一、尺寸過濾：對於模塊尺寸誤差較大的，不進入預測邏輯，直接認爲不匹配

二、層級過濾：對於葉子節點（即純文本、純圖片），咱們不認爲該節點具備業務含義，所以也過濾不用。

結果反饋鏈路包括自動結果檢測和用戶手動反饋，目前僅提供了預測結果錯誤的樣本上傳功能。

咱們的業務模塊識別功能最終在 99 大促中首次在線上使用。上述的模型、前置邏輯、以及 OOD 規避等環節，最終帶來的效果是：業務場景內的識別準確率可達 100%（純模型的實際準確率未統計）。

將來工做

算法優化

難點問題解決

如前所述，OOD 問題是一個難點，目前仍沒有很好的解決。針對這一問題咱們有一些解決思路，計劃在後續工做中進行嘗試。

基於 DNN 的 loss function 優化：仍基於手動 UI 特徵值搭建 DNN 網絡，經過 loss function 的優化，擴大不一樣類別之間的距離、壓縮同類別內部的距離，在優化後的模型上設定距離閾值來鑑別 OOD 數據。

負樣本自動生成的優化：在 XGBoost 算法基礎上，增長一個前置的二分類模型，用於區分集合內和集合外數據，並據此對負樣本生成的隨機範圍進行優化。具體方案待調研。

深度學習

手動特徵提取的方法雖然快速有效，可是在泛化能力上沒法與 CNN 之類的深度學習方法相比。所以後續咱們會嘗試基於圖片的算法，使用 CNN 模型提取 UI 特徵向量，再經過向量距離計算或二分類模型比對輸入數據與各個 UI 組件的類似度。

在深度學習領域還能夠有更多嘗試，不限於以上算法設想。

樣本平臺

目前咱們的樣本生成功能存在配置效率低、支持算法類型少等問題，所以在後續工做中，咱們計劃將樣本生成進行更豐富的產品化設計。樣本平臺的功能大體如圖所示。

樣本平臺產品功能見下圖：

**來源擴展：**目前咱們的樣本生成鏈路是從 Sketch 到 ODPS 表格數據，在後續的業務場景中咱們還但願能支持從 HTML、前端代碼生成樣本。不論何種來源，在數據加強這一層都會有許多相通之處，咱們將抽象出通用的加強算法服務，開放調用。

**算法擴展：**最終生成的樣本，能夠是特徵值表格數據，用於多分類；也能夠是 PASCAL、COCO 等格式的圖片與標註數據，提供給目標檢測模型使用。

**加強智能化：**目前用戶在使用樣本生成功能時感到配置複雜、難上手，甚至常由於誤操做而致使樣本不可用。所以咱們指望能經過數據加強的「智能化」，來儘可能減小用戶操做，迅速生成有效樣本。

綜上，算法優化與樣本平臺產品化是咱們下一期的核心工做。