【tensorflow&flutter&web】机器学习模型怎样用到前端上（未写完）

书接上回

在上一章我们谈了怎么根据项目需求构建一个简单的机器学习模型。

【tensorflow&flutter】自己写个机器学习模型用在项目上？-CSDN博客文章浏览阅读852次，点赞22次，收藏15次。【tensorflow&flutter】自己写个机器学习模型用在项目上？拍摄APP项目上线有一阵了，每天的拍摄数据呈现波动上升状态、业务方需要对数据进行加工，如果能有对未来的数据量的预测就好了。https://blog.csdn.net/qq_36544007/article/details/135404222?spm=1001.2014.3001.5502 其实上期的项目完全可以用tensorflow serving去获取数据,或者是一个web 页面去加载tensorflow js去计算更加方便部署。

哦，至于你说什么是tensorflow serving、什么是tensorflow js,本期咱们说一下机器学习模型用在前端的几种方式。

部署机器学习模型的方式

咱们还是继续以tensorflow为例子（大家也可以了解一下PyTorch）

先说总结

TensorFlow 可提供强大的功能，以便您在任何环境（包括服务器、边缘设备、浏览器、移动设备、微控制器、CPU、GPU、FPGA）中部署模型。TensorFlow Serving 可以在先进的处理器（包括 Google 的自定义张量处理单元 [TPU]）上以生产规模运行机器学习模型。

如果您需要在靠近数据源的位置分析数据，以缩短延迟时间并更好地保护数据隐私，可以借助 TensorFlow Lite 框架在移动设备、边缘计算设备甚至微控制器上运行模型，还可以借助 TensorFlow.js 框架仅使用网络浏览器就能运行机器学习模型

就是如上所说的一样可以在设备上、浏览器 中、本地或云端都可以部署模型。

1.Tensorflow Serving

先说一下tensorflow serving这种常规后端,直接返回推断好的数据。比如千人千面的淘宝推荐,头条不同的广告，又或者是这种与前端相对交互更多的：交互式推荐在外卖场景的探索与应用。

简易使用

很简单大家可以试一试。先下载Docker，然后按照以下步骤尝试：

复制代码

# Download the TensorFlow Serving Docker image and repo 下载TensorFlow Serving Docker镜像
docker pull tensorflow/serving
# 获取模型
git clone https://github.com/tensorflow/serving
# 定义模型
TESTDATA="$(pwd)/serving/tensorflow_serving/servables/tensorflow/testdata"

# Start TensorFlow Serving container and open the REST API port 启动TensorFlow Serving容器并打开REST API端口
docker run -t --rm -p 8501:8501 \
    -v "$TESTDATA/saved_model_half_plus_two_cpu:/models/half_plus_two" \
    -e MODEL_NAME=half_plus_two \
    tensorflow/serving &

# Query the model using the predict API  本地就可以请求了
curl -d '{"instances": [1.0, 2.0, 5.0]}' \
    -X POST http://localhost:8501/v1/models/half_plus_two:predict

# Returns => { "predictions": [2.5, 3.0, 4.5] }

介绍

使用docker 实现了：只需要传递参数请求就可以输出推断结果的最简单节点。遇到问题可以参考官方链接或者网上查询。

比如大家制作好的模型/网上更有实力的模型/针对项目强化学习的模型都可以通过这样的情况进行部署，然后通过后端包装一下、或者直接调用。

适用的场景就如上面所说,还包括我上篇文章的数据推断、票房预测、一次推断多处使用，或者计算量数据大、资源来自服务器的情况。

模型保存格式及使用

TensorFlow保存模型有2种方式，checkpoint和saved_model格式，其中checkpoint格式用户模型训练过程中的保存，saved_model用户模型线上部署，方便grpc的远程调用。

咱们使用saved_model格式,形式如下，serving自动取版本号最高的模型,以下是以saved_model格式00001版本的代码。

python 复制代码

 model.save('saved_model/my_model/00001')

2.TensorflowJS

介绍

在web上要用这个 TensorFlow.js 是 TensorFlow 的 JavaScript 版本，支持 GPU 硬件加速，可以运行在 Node.js 或浏览器环境中。

它不但支持完全基于 JavaScript 从头开发、训练和部署模型，也可以用来运行已有的 Python 版 TensorFlow 模型，或者基于现有的模型进行继续训练。（flutter web 和flutter端侧用的依赖库不一样）。
官方示例 https://www.tensorflow.org/js/demos?hl=zh-cn

模型转换

可以通过tfjs-converter进行模型转换模型转换 | TensorFlow.js.

3.Tensorflow Lite

TensorFlow Lite 是一组工具，可帮助开发者在移动设备、嵌入式设备和 loT 设备上运行模型，以便实现设备端机器学习。

主要特性

通过解决以下 5 项约束条件，针对设备端机器学习进行了优化：延时（数据无需往返服务器）、隐私（没有任何个人数据离开设备）、连接性（无需连接互联网）、大小（缩减了模型和二进制文件的大小）和功耗（高效推断，且无需网络连接）。

支持多种平台，涵盖 Android 和 iOS 设备、嵌入式 Linux 和微控制器。

支持多种语言，包括 Java、Swift、Objective-C、C++ 和 Python。

高性能，支持硬件加速和模型优化。

提供多种平台上的常见机器学习任务的端到端示例，例如图像分类、对象检测、姿势估计、问题回答、文本分类等。

能够在端侧做很多功能
姿态识别
更多demo

模型转换

python 复制代码

import tensorflow as tf

# Convert the model
converter = tf.lite.TFLiteConverter.from_saved_model('saved_model/my_model') # path to the SavedModel directory
tflite_model = converter.convert()

# Save the model.
with open('newAnalyzeDailyOrder.tflite', 'wb') as f:
  f.write(tflite_model)

对比

|-------------------------------|-----------------|-----------|-----|-----------|
| 方式 | 应用场景 | 成本 | 隐私性 | 注意项 |
| tensorflow lite tensorflow js | 识别车辆、人物美颜等图像处理等 | 用设备性能相对较低 | 较高 | 设备性能 |
| tensorflow serving | 个性化推荐、批量数据处理 | 计算成本、流量成本 | 较低 | 网络延迟、大流量等 |

在具体的项目中、不一定是单独使用的。比如在58二手车估车价项目中，先进行汽车的识别、再去上传服务器。组合使用效果可能会更好。

结语

我一开始学习机器学习大家都是介绍其中的部分比如就介绍了怎么建模，具体技术细节,没有说从前端、或是其他角度说介绍这件事。在我学习的前期有一种盲人摸象的感觉，只知道局部不知整体，希望我写的文章对你有帮助。

参考文档

docker安装&tensorflow serving使用

tensorflow 官网部署模型

平台和环境 | TensorFlow.js

tensorflow.js有哪些局限？-CDA数据分析师官网

在浏览器中使用TensorFlow.js-CSDN博客