作為阿裡經濟體前端委員會四大技術方向之一，前端智能化項目經曆了 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 等格式的圖檔與标注資料，提供給目标檢測模型使用。
增強智能化：目前使用者在使用樣本生成功能時感到配置複雜、難上手，甚至常因為誤操作而導緻樣本不可用。是以我們期望能通過資料增強的“智能化”，來盡量減少使用者操作，迅速生成有效樣本。
綜上，算法優化與樣本平台産品化是我們下一期的核心工作。
更多推薦：
imgcook 官網：體驗一鍵智能生成代碼 imgcook 知乎專欄：為你帶來前端智能化前沿資訊 關注「Alibaba F2E」
把握阿裡巴巴前端新動向