簡介：?作為阿里經濟體前端委員會四大技術方向之一，前端智能化項目經歷了 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 等格式的圖片與標注數據，提供給目標檢測模型使用。

增強智能化：目前用戶在使用樣本生成功能時感到配置復雜、難上手，甚至常因為誤操作而導致樣本不可用。因此我們期望能通過數據增強的“智能化”，來盡量減少用戶操作，迅速生成有效樣本。

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

總結

以上是生活随笔為你收集整理的前端代码是怎样智能生成的？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。