【前端智能系列】純前端(TF.js)實現掃五福功能

一圖勝千言，先爲各位看官老爺們呈上演示視頻。前端

據瞭解支付寶客戶端的掃五福模型是跑在native引擎中，而咱們的五福模型是跑在tensorflowjs(如下簡稱爲tfjs)平臺上，理論上能夠運行在任何端中(包括瀏覽器)。能夠看到，在模型的識別速度上和支付寶客戶端的掃五福是差很少的。json

下面我將爲各位看官老爺們一步步地介紹下咱們的五福模型從訓練到瀏覽器端的部署是如何實現的。瀏覽器

最終壓縮後的體積在400kb左右，極限壓縮在200kb左右(會損失一點模型性能)。markdown

在測試集上的準確率爲95+%，召回率爲92+%網絡

在mac上的性能在30fps左右；框架

安卓高端機性能在15~20fps左右；機器學習

更加詳細的性能測試會在後面給出；函數

TensorFlow.js是經過WebGL加速、基於瀏覽器的機器學習js框架。經過tensorflow.js，咱們能夠在瀏覽器中開發機器學習、運行現有的模型或者從新訓練現有的模型。這裏是官方網站oop

同構這個詞能夠類比於SSR的同構渲染，即服務端和客戶端渲染使用的是同一套框架及代碼。那麼顧名思義，tfjs模型同構是指模型的訓練和模型的端上推理用的也是同一套框架及代碼。即，使用tfjs在服務端離線訓練，在客戶端用tfjs部署模型。性能

沒有爲何。。。僅僅是想證實tfjs有訓練模型的能力而已，真正的生產環境仍是建議用tensorflow for py去訓練好了，緣由再也不贅述。

實際上咱們的五福模型原理較爲簡單，就是一個二分類模型，「是福字」or」不是福字「。使用的卷積網絡爲MobileNet，具體什麼是MobileNet，請看這裏。

我從網絡上收集了3800張與福字相關的圖片，其中有大約1200張左右的福字圖片，咱們6我的花了大約半個小時左右。爲了加快咱們的訓練速度，我選擇了直接拿一個在ImageNet數據集上預訓練模型進行遷移學習，在

conv_pw_13_relu

層後面加了兩層dense層，最後加上一個softmax激活函數。這裏面有一個小技巧，即把MobileNet的預訓練參數進行凍結，僅僅訓練咱們新加的兩層dense層，這樣可以大大提高模型的收斂速度。最後咱們把兩個模型融合，獲得咱們的五福模型。

這時候咱們獲得的模型大小爲4mb左右，作爲須要在端上部署的模型，這個體積是沒法接受的。好吧，排查緣由：咱們發現

conv_pw_13_relu

的輸出大小爲[7,7,256]，而咱們的模型直接在後面加了一個flatten層，致使參數量較大，解決方法爲加一個池化層，將模型體積減小到了900多kb，再用tfjs-converter進行下模型壓縮，最終獲得了400kb體積的模型。

最終咱們的模型長這樣：

部署過程較爲簡單，將咱們的模型文件(model.json、weights.bin)上傳到cdn，在客戶端經過tfjs將模型load到內存中，就能愉快地進行五福識別了~

咱們是螞蟻金服人工智能部前端團隊(AI-Team)，致力於開發最好的AI服務應用及前端智能應用。歡迎各位有志之士加入，一塊兒探索前端智能的將來。

有興趣的請聯繫我：yaohua.cyh@antfin.com