【前端智能系列】纯前端(TF.js)实现扫五福功能

一图胜千言，先为各位看官老爷们呈上演示视频。

据了解支付宝客户端的扫五福模型是跑在native引擎中，而咱们的五福模型是跑在tensorflowjs(如下简称为tfjs)平台上，理论上能够运行在任何端中(包括浏览器)。能够看到，在模型的识别速度上和支付宝客户端的扫五福是差很少的。

下面我将为各位看官老爷们一步步地介绍下咱们的五福模型从训练到浏览器端的部署是如何实现的。

首先简单介绍下咱们的模型概况

体积

最终压缩后的体积在400kb左右，极限压缩在200kb左右(会损失一点模型性能)。

性能

在测试集上的准确率为95+%，召回率为92+%

速度

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

安卓高端机性能在15~20fps左右；

更加详细的性能测试会在后面给出；

什么是tfjs？

TensorFlow.js是经过WebGL加速、基于浏览器的机器学习js框架。经过tensorflow.js，咱们能够在浏览器中开发机器学习、运行现有的模型或者从新训练现有的模型。这里是官方网站

什么是tfjs模型同构？

同构这个词能够类比于SSR的同构渲染，即服务端和客户端渲染使用的是同一套框架及代码。那么顾名思义，tfjs模型同构是指模型的训练和模型的端上推理用的也是同一套框架及代码。即，使用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