作者|萊斯

出品|阿里巴巴新零售淘系技術部

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

概述

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

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

總體功能如下圖所示。 包括：

• 樣本構造，根據用戶配置和自定義的數據增強規則對視覺稿進行 UI 層的增強，以得到視覺多樣化的樣本。 然後在定義好業務字段的基礎上，進行特徵值抽取並存儲。

• 算法選擇，目前提供的都是傳統機器學習方法中的多分類算法。

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

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

總體功能

所在分層

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

D2C 功能分層

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

▐   數據增強

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

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

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

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

• 增強方式： 連續範圍、指定枚舉值

樣本生成的界面

▐   數特徵提取

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

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

除了視覺特徵維度以外，我們還增加了自定義的業務特徵。 即根據一定的“業務規則”，將某些元素塊定義爲具有業務含義的元素，如“價格”、“人氣”等，並抽象出 10 個維度的業務特徵。 在這一過程中同樣支持用戶自定義業務規則，可通過正則匹配等方式實現。

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

▐   隨機森林

模 型 搭建

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

隨機森林變量類型自動解析規則

因此可以迅速的搭建出十分簡潔的模型，如下圖所示。

線上使用的隨機森林模型

調參過程

我們發現隨機森林對於樣本庫內的數據，偶爾會有不自信的情況發生，即 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%（純模型的實際準確率未統計）。

未來工作

▐    算法優化

難點問題解決