前端代碼是怎樣智能生成的 - 字段綁定篇

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

---

文/笑翟

概述

imgcook 是專一以各類圖像（Sketch / PSD /靜態圖片）爲原材料烹飪的匠心大廚，經過智能化手段將各類視覺稿一鍵生成可維護的前端代碼，含視圖代碼、數據字段綁定、組件代碼、部分業務邏輯代碼。智能字段綁定是其中一部分，實現準確識別營銷以及其餘垂直業務視覺稿的可綁定數據字段，大幅提高模塊研發效率，從而強化視覺稿還原結果，其拆分爲數據類型規則、是否靜態文案、圖片綁定和文本字段綁定幾個部分。

在 imgcook 大圖位置

如圖所示，服務位於字段綁定層，包括數據類型規則、是否靜態文案、圖片字段，文本字段等部分。

(D2C 技術能力分層)

預研

智能字段綁定依賴於語義化層，語義會依據經驗爲節點作類型標註，標記了這個節點「是什麼」後，智能綁定將這個「什麼」轉爲業務域中字段，爲了提升準確度，將高置信度規則做爲綁定條件。分析以下：

• 語義與字段綁定聯繫過深
  • 問題：致使的問題語義與字段綁定結果關聯過緊，靈活度不夠
  • 優化：語義與字段綁定 的斷定流程分離，移除置信度概念
• 語義層規則層過硬
  • 問題：現有規則層過硬，以判斷爲主
  • 優化：硬規則使用分類算法，統必定性對標到w3c的節點標準上
• 語義層機器學習算法使用程度不足
  • 問題：僅使用了實體識別、句法分析和翻譯
  • 優化：圖像分類使用深度模型，文字分類使用傳統機器學習
• 業務域字段頻繁變動
  • 問題：映射的字段不一樣業務域下不一樣
  • 優化：提供不一樣配置自身智能綁定映射關係的能力
• 硬規則層擴展
  • 問題：現有規則不夠多
  • 優化：根據設計稿，提煉新的規則，擴充規則層

技術方案

字段綁定主要經過文本 NLP 識別和圖片分類識別 vdom 中內容來決策映射到數據模型中的字段從而實現智能綁定字段，總體流程入下圖

(字段綁定核心流程圖)

在字段綁定中主要核心是文本 NLP 識別和圖片分類模型，下面着重介紹下。

文本 NLP 識別

調研

淘系設計稿文字全部動態部分分類分析：
業務域下常見的字段和設計稿文字的關係，下面舉幾個例子

商品名稱/標題（itemTitle）
**

• 設計稿文字：產品產品名稱最多十二個字、產品名稱十二個字、商品名超過十個字顯示
• 真實意圖文字：Nike AF1 JESTER XX、海藍之謎睡眠面膜保溼補水神器飽滿煥發、Galanz/格蘭仕G80F23CN3XL、德國雙立人Specials30cm中立炒鍋套裝、SOPOR/蘇泊爾CFXB40FC8028

(商品名稱/標題設計稿)

店鋪名稱（shopName）

• 設計稿文字：店鋪名最多八個字、店鋪名稱店鋪、店鋪名能夠八個字、店鋪名稱店鋪名稱最多放十五個字
• 真實意圖文字：優衣庫體驗溫馨人生、NIKE海淘精品、匡威官方旗艦店、ZARA服飾旗艦店、Mays官方海外旗艦店

（店鋪名稱設計稿）
店鋪利益點（shopDesc）

• 設計稿文字：店鋪利益點八字內、利益點超過十個字顯示、利益點僅七個字、利益點能夠兩條利益點文案最多十個字
• 真實意圖文字：滿199返19九、進店可享滿5折優惠、進店可享滿199送19九、冬新品第二件滿減包郵、全場滿1999送199

（店鋪利益點設計稿）

技術選型

樸素貝葉斯

咱們在字段綁定中進行 NLP 識別的一個問題是樣本量不夠。尤爲咱們依賴於租戶上傳本身的樣本對他們特定的業務進行訓練，每每租戶並無特別大量的數據，在這種狀況下，咱們考慮選擇樸素本葉斯分類器來進行分類，緣由是樸素貝葉斯公式源於古典數學，其對於後驗機率的得出源於先驗機率和調整因子，並不依賴於數據量，對小數據和噪聲點很是健壯。核心算法是這個貝葉斯公式：

換個形式表達就清楚多了，以下：

最終求 P(類別|特徵)便可。

分詞

對於每條樣本，咱們在分類前須要首先進行特徵點提取，在這個問題中也就是對樣本進行分詞，在機器學習平臺中默認使用了 AliWS 來進行分詞，AliWS( Alibaba Word Segmenter 的簡稱)是服務於整個阿里巴巴集團的詞法分析系統。被普遍應用於集團的各項業務中。AliWS 的主要主要功能包括：歧義切分，多粒度切分，命名實體識別，詞性標註，語義標註，支持用戶本身維護用戶詞典，支持用戶干預或糾正分詞錯誤。其中，在咱們的項目中，命名實體識別包括：簡單實體，電話號碼，時間， 日期等。

模型搭建

咱們主要是使用了機器學習平臺的能力進行了快速模型鏈路的搭建，機器學習平臺對於 ALiWS 的分詞算法和樸素貝葉斯多分類進行了很好的組件封裝，下圖是咱們的模型搭建

（文本 NLP 模型訓練鏈路）

從上圖看第一步會執行 SQL 腳本從數據庫拉取訓練樣本，而後對樣本進行分詞操做處理。以後會按找必定比例將樣本拆分爲訓練集和測試集，對於訓練集的樣本，進行樸素貝葉斯分類器，對於測試集，則是拿到分類器的結果進行預測和評估，最後會把模型結果經過 odps cmd 指令上傳存儲到 oss。

圖片分類模型

調研

從業務場景中，咱們總結出經常使用的八種分類，分別是標、icon、頭像、店鋪 logo、場景圖、白底圖、氛圍圖、高斯模糊圖。

• 標:  label 爲矩形小圖，背景純色，上有白色短文字點名心智
• icon: ** icon** 大機率圓形。一般是抽象化的符號，
• 頭像: ** avator** 一般圓形，中心爲人物面部
• 店鋪logo: logo 一般用於突出性展現一個概念，文字或抽象化的圖片做爲主體
• 場景圖: picture 最多見的商品圖，內容較多，主體一般不爲一個。突出商品或人物在真實環境中的表現。
• 白底圖: purePicture 主體單一，背景純白。突出主體自身。
• 氛圍圖: pureBackground 有明顯色系，形狀構成的背景圖
• 高斯模糊: blurBackground 高斯模糊效果的背景圖

在以前的模式下，咱們主要是根據圖片大小和圖片位置等相關信息經過一些規則來進行圖片識別。但這種模式下的識別存在不許和不靈活的問題，好比不一樣業務下可能 icon 的大小不盡相同，以及位置等信息存在極大的不肯定性，同時因爲基於這些類別進行分析，發現圖片自己的內容已經足夠區分開來，因此咱們考慮使用深度學習模型進行圖片分類識別。

技術選型

CNN 網絡

圖片分類問題，咱們首選是當前圖像處理最熱門的 CNN 網絡，卷積神經網絡的想法來源於人類的視覺原理，而這種經過卷積核分析圖片相較於傳統的神經網絡極大的下降了待訓練參數數量。同時，相較於傳統的機器學習模型，CNN 在特徵提取上表現出了極高的優點。

簡單介紹下 CNN 網絡如何實現的，在介紹卷積神經網絡絡前，咱們先看看人類的視覺原理

人類的視覺原理
**

深度學習的許多研究成果，離不開對大腦認知原理的研究，尤爲是視覺原理的研究。 1981 年的諾貝爾醫學獎，頒發給了 David Hubel（出生於加拿大的美國神經生物學家） 和TorstenWiesel，以及 Roger Sperry。前兩位的主要貢獻，是「發現了視覺系統的信息處理」，可視皮層是分級的。

人類的視覺原理以下：

(人類的視覺原理)

（人腦進行人臉識別示例，圖片來自網絡）

對於不一樣的物體，人類視覺也是經過這樣逐層分級，來進行認知的：

（人類視覺對不一樣物體逐層分級，圖片來自網絡）

咱們能夠看到，在最底層特徵基本上是相似的，就是各類邊緣，越往上，越能提取出此類物體的一些特徵（輪子、眼睛、軀幹等），到最上層，不一樣的高級特徵最終組合成相應的圖像，從而可以讓人類準確的區分不一樣的物體。

那麼咱們能夠很天然的想到：可不能夠模仿人類大腦的這個特色，構造多層的神經網絡，較低層的識別初級的圖像特徵，若干底層特徵組成更上一層特徵，最終經過多個層級的組合，最終在頂層作出分類呢？答案是確定的，這也是許多深度學習算法（包括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 內部存儲了多個 TF Example, 可能夠想象每一個 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 識別和圖片分類識別模型優化，對識別綁定不許的數據進行反饋召回，再對反饋召回的數據分析從新優化識別模塊和鏈路，最終提升綁定準確率。
• 字段標準化推動

---

更多推薦：

• imgcook 官網  體驗一鍵智能生成代碼
• imgcook 知乎專欄  爲你帶來前端智能化前沿資訊
• imgcook 掘金專欄  設計稿智能生成代碼
• 釘釘交流

---

歡迎加入咱們： [社招/校招] [杭州] [阿里淘系技術部-頻道與 D2C 智能] 前端招聘：此時此刻，非我莫屬！