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

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

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

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

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

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

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

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

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

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

同构这个词可以类比于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