作為阿裡經濟體前端委員會四大技術方向之一，前端智能化項目經曆了 2019 雙十一的階段性考驗，交出了不錯的答卷，天貓淘寶雙十一會場新增子產品 79.34% 的線上代碼由前端智能化項目自動生成。在此期間研發小組經曆了許多困難與思考，本次《前端代碼是怎樣智能生成的》系列分享，将與大家分享前端智能化項目中技術與思考的點點滴滴。
概述
imgcook 是專注以各種圖像（Sketch/PSD/ 靜态圖檔）為原材料烹饪的匠心大廚，通過智能化手段将各種視覺稿一鍵生成可維護的前端代碼，含視圖代碼、資料字段綁定、元件代碼、部分業務邏輯代碼。智能字段綁定是其中一部分，實作準确識别營銷以及其他垂直業務視覺稿的可綁定資料字段，大幅提升子產品研發效率，進而強化視覺稿還原結果，其拆分為資料類型規則、是否靜态文案、圖檔綁定和文本字段綁定幾個部分。
在 imgcook 大圖位置
如圖所示，服務位于字段綁定層，包括資料類型規則、是否靜态文案、圖檔字段，文本字段等部分。
(D2C 技術能力分層 )
預研
智能字段綁定依賴于語義化層，語義會依據經驗為節點做類型标注，标記了這個節點“是什麼”後，智能綁定将這個“什麼”轉為業務域中字段，為了提高準确度，将高置信度規則作為綁定條件。分析如下：
- 語義與字段綁定聯系過深
- 問題：導緻的問題語義與字段綁定結果關聯過緊，靈活度不夠
- 優化：語義與字段綁定的判定流程分離，移除置信度概念
- 語義層規則層過硬
- 問題：現有規則層過硬，以判斷為主
- 優化：硬規則使用分類算法，統一定性對标到 w3c 的節點标準上
- 語義層機器學習算法使用程度不足
- 問題：僅使用了實體識别、句法分析和翻譯
- 優化：圖像分類使用深度模型，文字分類使用傳統機器學習
- 業務域字段頻繁變更
- 問題：映射的字段不同業務域下不同
- 優化：提供不同配置自身智能綁定映射關系的能力
- 硬規則層擴充
- 問題：現有規則不夠多
- 優化：根據設計稿，提煉新的規則，擴充規則層
技術方案
字段綁定主要通過文本 NLP 識别和圖檔分類識别 vdom 中内容來決策映射到資料模型中的字段進而實作智能綁定字段，整體流程入下圖
( 字段綁定核心流程圖 )
在字段綁定中主要核心是文本 NLP 識别和圖檔分類模型，下面着重介紹下。
文本 NLP 識别
調研
淘系設計稿文字所有動态部分分類分析：
業務域下常見的字段和設計稿文字的關系，下面舉幾個例子
商品名稱 / 标題（itemTitle）
- 設計稿文字：産品産品名稱最多十二個字、産品名稱十二個字、商品名超過十個字顯示
- 真實意圖文字：NikeAF1JESTERXX、海藍之謎睡眠面膜保濕補水神器飽滿煥發、Galanz/ 格蘭仕 G80F23CN3XL、德國雙立人 Specials30cm 中立炒鍋套裝、SOPOR/ 蘇泊爾 CFXB40FC8028
( 商品名稱 / 标題設計稿 )
店鋪名稱（shopName）
- 設計稿文字：店鋪名最多八個字、店鋪名稱店鋪、店鋪名可以八個字、店鋪名稱店鋪名稱最多放十五個字
- 真實意圖文字：優衣庫體驗舒适人生、NIKE 海淘精品、匡威官方旗艦店、ZARA 服飾旗艦店、Mays 官方海外旗艦店
（店鋪名稱設計稿）
店鋪利益點（shopDesc）
- 設計稿文字：店鋪利益點八字内、利益點超過十個字顯示、利益點僅七個字、利益點可以兩條利益點文案最多十個字
- 真實意圖文字：滿 199 返 199、進店可享滿 5 折優惠、進店可享滿 199 送199、冬新品第二件滿減包郵、全場滿 1999 送 199
（店鋪利益點設計稿）
技術選型
樸素貝葉斯
我們在字段綁定中進行 NLP 識别的一個問題是樣本量不夠。尤其我們依賴于租戶上傳自己的樣本對他們特定的業務進行訓練，往往租戶并沒有特别大量的資料，在這種情況下，我們考慮選擇樸素本葉斯分類器來進行分類，原因是樸素貝葉斯公式源于古典數學，其對于後驗機率的得出源于先驗機率和調整因子，并不依賴于資料量，對小資料和噪聲點非常健壯。核心算法是這個貝葉斯公式：
換個形式表達就清楚多了，如下：
最終求 P( 類别 | 特征 ) 即可。
分詞
對于每條樣本，我們在分類前需要首先進行特征點提取，在這個問題中也就是對樣本進行分詞，在機器學習平台中預設使用了 AliWS 來進行分詞，AliWS(AlibabaWordSegmenter 的簡稱 ) 是服務于整個阿裡巴巴集團的詞法分析系統。被廣泛應用于集團的各項業務中。AliWS 的主要主要功能包括：歧義切分，多粒度切分，命名實體識别，詞性标注，語義标注，支援使用者自己維護使用者詞典，支援使用者幹預或糾正分詞錯誤。其中，在我們的項目中，命名實體識别包括：簡單實體，電話号碼，時間，日期等。
模型搭建
我們主要是使用了機器學習平台的能力進行了快速模型鍊路的搭建，機器學習平台對于 ALiWS 的分詞算法和樸素貝葉斯多分類進行了很好的元件封裝，下圖是我們的模型搭建
（文本 NLP 模型訓練鍊路）
從上圖看第一步會執行 SQL 腳本從資料庫拉取訓練樣本，然後對樣本進行分詞操作處理。之後會按找一定比例将樣本拆分為訓練集和測試集，對于訓練集的樣本，進行樸素貝葉斯分類器，對于測試集，則是拿到分類器的結果進行預測和評估，最後會把模型結果通過 odpscmd 指令上傳存儲到 oss。
圖檔分類模型
從業務場景中，我們總結出常用的八種分類，分别是标、icon、頭像、店鋪logo、場景圖、白底圖、氛圍圖、高斯模糊圖。
- 标 :label 為矩形小圖，背景純色，上有白色短文字點名心智
- icon:icon 大機率圓形。通常是抽象化的符号，
- 頭像 :avator 通常圓形，中心為人物面部
- 店鋪 logo:logo 通常用于突出性展示一個概念，文字或抽象化的圖檔作為主體
- 場景圖 :picture 最常見的商品圖，内容較多，主體通常不為一個。突出商品或人物在真實環境中的表現。
- 白底圖 :purePicture 主體單一，背景純白。突出主體自身。
- 氛圍圖 :pureBackground 有明顯色系，形狀構成的背景圖
- 高斯模糊 :blurBackground 高斯模糊效果的背景圖
在之前的模式下，我們主要是根據圖檔大小和圖檔位置等相關資訊通過一些規則來進行圖檔識别。但這種模式下的識别存在不準和不靈活的問題，比如不同業務下可能 icon 的大小不盡相同，以及位置等資訊存在極大的不确定性，同時由于基于這些類别進行分析，發現圖檔本身的内容已經足夠區分開來，是以我們考慮使用深度學習模型進行圖檔分類識别。
CNN 網絡
圖檔分類問題，我們首選是目前圖像處理最熱門的 CNN 網絡，卷積神經網絡的想法來源于人類的視覺原理，而這種通過卷積核分析圖檔相較于傳統的神經網絡極大的降低了待訓練參數數量。同時，相較于傳統的機器學習模型，CNN 在特征提取上表現出了極高的優勢。
簡單介紹下 CNN 網絡如何實作的，在介紹卷積神經網絡絡前，我們先看看人類的視覺原理
人類的視覺原理
- 深度學習的許多研究成果，離不開對大腦認知原理的研究，尤其是視覺原理的研究。
- 1981 年的諾貝爾醫學獎，頒發給了 DavidHubel（出生于加拿大的美國神經生物學家）和 TorstenWiesel，以及 RogerSperry。前兩位的主要貢獻，是“發現了視覺系統的資訊處理”，可視皮層是分級的。
人類的視覺原理如下：
( 人類的視覺原理 )
（人腦進行人臉識别示例，圖檔來自網絡）
對于不同的物體，人類視覺也是通過這樣逐層分級，來進行認知的：
（人類視覺對不同物體逐層分級，圖檔來自網絡）
我們可以看到，在最底層特征基本上是類似的，就是各種邊緣，越往上，越能提取出此類物體的一些特征（輪子、眼睛、軀幹等），到最上層，不同的進階特征最終組合成相應的圖像，進而能夠讓人類準确的區分不同的物體。
那麼我們可以很自然的想到：可不可以模仿人類大腦的這個特點，構造多層的神經網絡，較低層的識别初級的圖像特征，若幹底層特征組成更上一層特征，最終通過多個層級的組合，最終在頂層做出分類呢？答案是肯定的，這也是許多深度學習算法（包括 CNN）的靈感來源。
卷積神經網絡 (CNN) 的基本原理
卷積神經網絡包括輸入層、隐含層、輸出層，其中隐含層包括卷積層、池化層和全連接配接層 3 類常見構築，這 3 類分别負責的分工是卷積層對輸入資料進行特征提取，池化層用來大幅降低參數量級 ( 降維、防止過拟合 )，全連接配接層類似傳統神經網絡的部分，用來輸出想要的結果。
（CNN 的基本原理）
遷移學習
由于我們的圖檔資料主要來自于内部網絡，同時受制于計算資源的問題，我們需要選擇一種訓練方式來盡可能的适應資料量少和計算資源少的問題，于是我們考慮使用遷移訓練。遷移訓練是一種基于其他已經訓練好的模型進行再訓練的技術，基于諸如 ImageNet 等資料集經過大量運算訓練出的如 VGG,Resnet 或 MobileNet 等模型本身已經具備了很好的提取圖像特征和輸出資訊的能力，這就好比站在前人的基礎上做事情，隻需要再這基礎上讓模型适應我們的資料就好，這會大大節省訓練的成本。
ResNet
在我們的項目中，我們考慮在使用 Resnet 的基礎上來進行遷移學習。ResNet 最根本的動機就是所謂的“退化”問題，即當模型的層次加深時，錯誤率卻提高了，這是由于深度加深導緻的優化變的苦難的問題，殘差網絡通過短路連接配接，在網絡向後傳播梯度的時候，永遠不會出現梯度消失的情況，很好的解決了網絡過深帶來的問題。
Tensorflow 和機器學習平台
機器學習平台，為傳統機器學習和深度學習提供了從資料處理、模型訓練、服務部署到預測的一站式服務。機器學習平台底層支援 Tensorflow 架構，同時支援CPU/GPU 混合排程和高效的資源複用，我們将借機器學習平台的計算能力和 GPU資源進行訓練，同時将 inference 模型部署至機器學習平台的線上預測服務 EAS。
資料預處理
- 資料清洗：通過 odps 的大促表爬取了每個類别約 1000 張圖檔，但是其中很多圖檔由于是商家上傳的，可能會有無效資料，丢失資料甚至是錯誤資料，比如我們在處理這些圖檔的時候發現很多白底圖和商品圖是混淆的，我們将會對這些資料首先進行一輪清理。
- 人工樣本：在常見類别中，我們發現諸如氛圍圖這類很難爬取到很多，同時這類樣本具有明顯的特征，于是我們将根據這種特征進行樣本制造。我們使用了 node-canvas 人工制作了約 1000 張樣本，同時，高斯模糊這一類别實際上往往就是一些商品圖進行模糊之後的效果，是以我們對爬取到的商品圖使用opencv 進行高斯模糊，得到樣本。
- 資料增強：由于我們場景的特殊性，我們不能采用一些傳統的資料增強的方式，比如高斯模糊（因為我們有一類就是高斯模糊），但是我們進行了一些簡單的諸如位移和輕微旋轉等資料增強方式。
- TFRecord 轉 化：TFRecord 是 Tensorflow 官方設計并推薦的一種資料存儲格式，每個 TFRecord 内部存儲了多個 TFExample, 可以想象每個TFExmaple 就是對應一組資料（X，y)，TFExample 其實是一種谷歌官方開發的資料架構序列化格式，類似于 Javascript 序列化輸出的 JSON 或者Python 序列化輸出的 Pickle 等格式，但是 protobuf 體積更小，資料更快，效率更高，從 Tensorflow 源碼中也可以随處可見這種資料格式。以下從我們代碼中截取的片段是針對一組資料建立 TfExample。
其中我們制定了三個 Feature 我們之後再訓練中将會用到的，image/encoded就是圖檔的 bytes 流，label 是分類的類别，image/format 是圖檔類型，将會在之後slim.tfexample_decoder.Image 函數解析 Tfrecord 中使用。
模型建構
遷移訓練模型建立
TF-slim 是 Tensorflow 輕量級的高階 API, 可以很友善的定義，訓練和評估模型。TF-slim 官方提供了很多知名的 CNN 網絡的預訓練模型。使用者可以通過官方Github 進行模型參數的下載下傳，同時調用 tensorflow.contrib.slim.net 中的方法加載模型結構，以下是我們定義的 predict 函數，此函數将在訓練時和預測時提供定義流圖中經過模型的部分。注意預訓練模型隻提供了卷積層的實作，為符合我們的分類問題，我們還需要把輸出的卷積結果壓平，同時加一層全連結層加 softmax 函數進行預測。
模型訓練
我們通過 slim 提供的 assign_from_checkpoint_fn 函數加載下載下傳的mobileNet 預訓練模型的參數，使用之前定義的資料流圖進行訓練，同時在訓練的過程中輸出checkPoint 和相關 Log
模型預測
在模型訓練期間，我們會定時儲存訓練資料，儲存資料主要通過 Tensorflow 的tf.train.Saver 相關方法來實作的，Tensoflow 的儲存會生成以下四種檔案類型：
- .meta 檔案：儲存了模型的資料圖
- .ckpt.data 檔案：儲存了模型變量的資訊，包含 weights,bias 等資訊
- .ckpt.index：描述了張量的 key 和 value 的對應資訊
- .checkpoint：儲存的模型和模型的相關資訊
實際上可以看到模型儲存時會生成相當多的資訊，而其中的很多資訊其實在使用模型進行預測時并不是必須的，那麼我們就需要對導出的記錄資訊進行優化，實作高性能的預測。
首先，我們将對儲存的模型進行當機，Tensorflow 模型當機是指把計算圖的定義和模型權重合并到同一個檔案中 , 并且隻保留計算圖中預測需要的部分，而不再需要訓練相關的部分，下面我們的代碼片段就是将計算圖中所有的變量轉化為常量。
産品方案
我們考慮到不同業務的資料模型和智能識别及綁定的字段不一樣，是以實作了一套可以線上新增分類并配置樣本，線上訓練模型生成服務，然後通過配置方式使用。
流程圖
（産品流程圖）
還原子產品自動綁定效果
（字段綁定效果）
未來展望
- 對不同場景靜态文案分析，我們分析影響綁定準确率的一個部分原因是不同設計和子產品裡的靜态文案多樣性，導緻的識别出符合預期的結果，後面我們會着重針對不同業務場景靜态文案梳理，識别前對靜态文案過濾，同時完善通用配置及識别能力。
- 對 NLP 識别和圖檔分類識别模型優化，對識别綁定不準的資料進行回報召回，再對回報召回的資料分析重新優化識别子產品和鍊路，最終提高綁定準确率。
- 字段标準化推進