跨出前端智能化的第一步-tensorflow的应用

落日映苍穹つ 2022-11-05 09:59 150阅读 0赞

![format_png][]

### 第一部分、引言 ###

##### 一、阅读本篇文章你能得到什么 #####

1、了解tensorflow及关键社区资源；2、能够自主训练和应用自己想要的模型（主要）；3、开阔前端智能化的思考与认知；

##### 二、什么是对象识别 #####

简单来说，在图片或视频识别出你关注的对象类别、坐标就是对象识别，你可以通过以下视频加深认知：1、Ai采摘机器人：www.bilibili.com/video/BV1YE… 2、英雄联盟血条识别：www.bilibili.com/s/video/BV1… 3、车辆识别：www.bilibili.com/video/BV1si… 4、人物识别：www.bilibili.com/video/BV1Es… 5、卫星船舶检测 www.bilibili.com/s/video/BV1…

##### 三、前端为什么需要对象识别能力 #####

![format_png 1][]

1、通过对象识别可以做到D2C，也就是设计稿识别产出代码；2、他带给了前端更多可能性、效率提升、可控能力；

##### 四、带着目标看流程 #####

![format_png 2][]

#####     #####

我简单训练了一个antd ui识别模型，可以将图片中的ui组件坐标和类别识别出来，同时附带识别的分数，下面将详细为大家介绍如何训练一个自己的object\_detection模型。

### 第二部分、object\_detection完整实践 ###

分为以下几个环节：1、搭建环境；2、创建数据集；3、选择预训练算法模型；4、调整参数开始训练；5、验证训练成果；6、导出并转换模型给前端使用（浏览器/node环境）；

##### 一、搭建环境 #####

参考：www.tensorflow.org/install

1.  准备最新python环境；
2.  安装tensorflow2；
3.  通过pip安装tensorflowjs（这个主要用于转换最终导出的模型供js环境使用）；
4.  注意Python Package Installation这一步：github.com/tensorflow/…
5.  可通过conda做环境管理（可选）；

注意：直接使用tensorflow2就行了，没有太多必要使用tensorflow1；安装和使用过程中应该会遇到一些pip包缺失的问题，这个需要自己看提示解决，其实跟npm类似。建议用主机进行环境搭建及训练，配置当然越高越好。

##### 二、创建数据集 #####

tensorflow对象识别需要使用tfrecord格式数据集 推荐的标注平台：app.labelbox.com/ 推荐的制作导出平台：app.roboflow.com/ 创建数据集的方式有很多种，可以通过python语言创建自定义tfrecords数据集，也可以通过各类数据集标注平台；

注：

1.  tfrecords是tensorflow定义的一种数据格式，直接用于数据训练；
2.  通过收集大量训练图片进行人工标注（也有半自动标注、自动标注，如通过UI组件生产页面进行自动标注）；
3.  标注的分类数量需要尽可能均匀一些，减少准确性偏差；

这里简单介绍一下通过平台标注流程（labelbox+roboflow）：labelbox 部分

1.  准备一些含ui的图片，尺寸和名称没有特别要求，可以直接截图保存；
2.  在labelbox新建项目并批量上传图片；
3.  编辑分类

![format_png 3][]

![format_png 4][]

4.开始标注（start labeling）

![format_png 5][]

![format_png 6][]

5、完成所有标注，导出JSON文件

![format_png 7][]

roboflow 部分

1.  创建数据集

![format_png 8][]

2.按提示上传刚刚导出的json文件，根据提示继续操作

3.在导入数据集基础上，进行自定义图片处理

![format_png 9][]

注意：这里可能包含旋转、模糊、翻转等操作，你可以通过最终模型识别目标来判断是否有必要加入某一步骤；比如：如果你识别的全部都是方方正正的UI设计稿，则旋转就没有太多必要了。他的作用在于帮你自动处理扩充数据集，以便适应各类识别场景。

1.  点击generate、查看健康检查

![format_png 10][]

注意：上文提到过，尽量不要让标注的分类数量相差太多。

1.  下载数据集

![format_png 11][]

注意：这里选择tensorflow tfrecord格式下载即可。

##### 三、选择预训练算法模型 #####

tensorflow拥有很完善的文档，大家直接在对应的官网或github寻找即可 github.com/tensorflow/…

![format_png 12][]

目前使用的是（训练容易/导出的文件不算太大）：SSD MobileNet V2 FPNLite 640x640

选择模型的时候需要考虑以下几点：

1.  识别速度；
2.  识别准确率；
3.  训练难度（尺寸越大训练难度越大，主要体现在对机器性能上）；
4.  前端解析识别数据（重要）；

注意：多数模型都提供了入参（处理后的图片）和出参（一个tensor格式的数组），不同模型最终产出的结果是不一样的，但一般都包含对象分数score、对象尺寸及位置boxes、数量等，这些需要自行判断。

##### 四、调整参数开始训练 #####

![format_png 13][]

github.com/tensorflow/…

![format_png 14][]

主要有以下几个参数需要调整：

1.  num\_classes 代表数据集的分类数量；
2.  fine\_tune\_checkpoint 指向下载预训练模型中的checkpoint（根据这个文件的model\_checkpoint\_path来就行）；
3.  fine\_tune\_checkpoint\_type 改成detection（实际分类模型tf2也有提供，如不改容易出现内存问题中断训练）；
4.  label\_map\_path 都指向导出tfrecords里面生成的就行（其实就是标注的分类）；
5.  tf\_record\_input\_reader 分别对应train/test目录的tfrecord文件；
6.  关键点train\_config配置，batch\_size训练批次（即一次训练所抓取的数据样本数量）、total\_steps、num\_steps调整，这部分既要考虑机器性能又要考虑数据量，需要根据自己的实际情况而定（位数的调整可能引起成倍的训练时间）；

注意：

1.  建议找个性能不错的主机进行训练，用自己的mac大概率会失败（下一步验证训练结果会提及）。
2.  批次大小机器允许的情况可以设置大一些，但也不是越大越好哈，可以自己另外了解一下；
3.  total step根据loss曲线做调整；
4.  二次训练场景（有了一个训练好的优质模型，里面已经储备了大量知识，当前训练的数据比较少，可以尝试在已有模型基础上二次训练），如果不确定建议都从0开始；
5.  训练时长受数据、算法模型、批次、step、机器效率等影响，可以通过本地编译、使用gpu加速等方式减少训练时间；

##### 五、验证训练成果 #####

执行：tensorboard --logdir model\_dir 打开启动的地址：http://localhost:6006/

1.  观察loss曲线，判断step设置是否合理

![format_png 15][]

2.查看图片验证结果

![format_png 16][]

注意：通过以上2点基本可以确定模型是否可用，大家也可以学习一下其他分析技巧，互相分享。

##### 六、导出并转换模型给前端使用（浏览器/node环境） #####

1.  exporter\_main\_v2.py 导出saved\_model；
2.  记得pip install tensorflowjs，然后使用tensorflowjs\_converter转换成前端可用模型
3.  参考coco-ssd的模型导入与识别：github.com/tensorflow/…

注意：后面其实就是通过@tensorflow/tfjs-core等库进行模型加载和图片识别了，也可以参考我这个库github.com/aisriver/tf…，里面包括了一些训练代码和使用示例。

![format_png 17][]

### 第三部分、结合tensorflow的其他前端实践 ###

可直接投入前端使用的模型和演示：github.com/tensorflow/… 其他能力：图像分类、文本识别、语音识别、视频识别，并可以直接在社区找到对应资源；

前端应用：

*  组件识别/D2C（如imgcook：www.imgcook.com/）、
 *  图表库识别（大屏设计稿识别）、搜图（antd的图表搜索）、
 *  手势识别（大屏手势交互：www.bilibili.com/video/BV1ET…）、语言指令、恶意评论检测、敏感图片/视频识别、智能家居、物联领域的环境安全检测等

大屏通过手势进行互动，想想都觉得很酷，而且实现起来也没有那么难。

推荐一个直接可用的文本ocr识别 ocr识别比训练一个对象识别模型更加复杂，需要考虑语言、字体等因素，所以我没有选择自己训练，太麻烦。推荐使用：www.npmjs.com/package/tes… 支持多国家语言

![format_png 18][]

智能化让前端拥有更多可能性！

### 最后，帮大家整合一下社区资源 ###

1.  官网：tensorflow.google.cn/
2.  模型库可数据集（重要）：www.tensorflow.org/resources/m…
3.  对象识别github（核心）：github.com/tensorflow/…
4.  训练和评估（重要）：github.com/tensorflow/…
5.  js相关已有模型库及应用（参考）：github.com/tensorflow/…
6.  数据标注平台（重要）：app.labelbox.com/
7.  数据集订制与导出平台（重要）：app.roboflow.com/
8.  模型分析工具（了解就行）：github.com/lutzroeder/…
9.  文本OCR识别（推荐）：www.npmjs.com/package/tes…

### github ###

github.com/aisriver

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![format_png 19][]

![format_png 20][]

点个**在看**支持我吧

![format_png 21][]

[format_png]: /images/20221023/1d564a21e6d64349b24523cad5c86282.png
[format_png 1]: /images/20221023/9e9347a9937b4c1f820f931767252067.png
[format_png 2]: /images/20221023/7631be3b20ec44dcb6dad9dc32abe0c6.png
[format_png 3]: /images/20221023/6f66849960364869ab724092fbba1ff4.png
[format_png 4]: /images/20221023/21d714130e664964bc9ccf4624927c00.png
[format_png 5]: /images/20221023/61f206bff5364e7ca59641f065bfa15a.png
[format_png 6]: /images/20221023/6c1245d92c734fc08877c788f398663c.png
[format_png 7]: /images/20221023/5737b349925a4438b63a723eb1bae744.png
[format_png 8]: /images/20221023/152810e1fce2444e94433e0fb1b4f21e.png
[format_png 9]: /images/20221023/8f2990d2f0ae40c88a0327c5940c9e3c.png
[format_png 10]: /images/20221023/eb53b1d4acdc424f9910296ad18c8430.png
[format_png 11]: /images/20221023/8d33a0a715d64a73abf0d64a41342d67.png
[format_png 12]: /images/20221023/12c4e28180ca438bafecad9c3e9eb085.png
[format_png 13]: /images/20221023/2821356865904797a5f4112d9fdd774b.png
[format_png 14]: /images/20221023/41a4ccd1e4a648bba8a4a901f48f634b.png
[format_png 15]: /images/20221023/44daed5d09c64b4d8e316af18f18a4eb.png
[format_png 16]: /images/20221023/fb371221c33d44c986fad04e694ee74f.png
[format_png 17]: /images/20221023/3503e96d0924489e956297298c0865ab.png
[format_png 18]: /images/20221023/5677c161117a42caa19f581cdfa9b8bb.png
[format_png 19]: /images/20221023/f1313aef47b24d289cb405890214cb1a.png
[format_png 20]: /images/20221023/f9add9f7b7eb414ea69023cd2ab7be1f.png
[format_png 21]: /images/20221023/295b71434f4b42f8ab280a1d100f29dd.png