avatar GDYSHI

gdyshi 的个人博客

  • 首页
  • 子域
  • 分类
  • 标签
  • 归档
  • 关于
首页 tensorflow模型部署系列————浏览器前端部署
文章

tensorflow模型部署系列————浏览器前端部署

发表于 2019/07/22
作者 gdyshi
8 分钟阅读
tensorflow模型部署系列————浏览器前端部署
tensorflow模型部署系列————浏览器前端部署
  • 摘要
  • 引言
  • 主题
    • TensorFlow.js介绍
      • 浏览器安装
      • API讲解
    • 模型文件转换
      • 命令行转换
        • keras
        • tf模型
      • 代码转换
        • keras
        • tf模型
    • 部署代码
      • 模型封装库
      • 模型封装类示例代码
  • 示例代码
  • 附录
  • 参考

摘要

本文为系列博客tensorflow模型部署系列的一部分,用于javascript实现通用模型的部署。本文主要实现用javascript接口调用tensorflow模型进行推理。实现了tensorflow在浏览器前端计算方案,将计算任务分配在终端,可以有效地降低服务端负荷,并提供相关示例源代码。相关源码见链接


引言

本文为系列博客tensorflow模型部署系列的一部分,用于javascript实现通用模型的部署。本文主要实现用javascript接口调用tensorflow模型进行推理。实现了tensorflow在浏览器前端计算方案,将计算任务分配在终端,可以有效地降低服务端负荷,而且javascript免安装,同时又有并没有增加运营成本。从模型文件中获取输入输出op名请参考博客tensorflow模型部署系列————单机python部署

主题

上一篇博文tensorflow模型部署系列————嵌入式(c/c++ android)部署就如何将tensorflow在边缘计算及一些低成本方案、物联网或工业级应用中使用的轻量级模型部署方案进行讲解,博文中也开放了使用tflite进行模型推理的C C++ JAVA PYTHON代码,覆盖了边缘计算应用的大部分场景,在实际应用时还有一种特殊的边缘计算场景:使用本地PC计算资源来做为终端进行推理。javascript由于其特有的优势使得终端部署基本上可以做到免维护,从而大大降低运营成本。目前tensorflow提供了专门用于浏览器的TensorFlow.js。本文先对TensorFlow.js作简单介绍,然后分别介绍从keras模型和tensorflow模型转换到tfjs模型,最后分别对keras模型和tensorflow模型在TensorFlow.js上的部署进行解说。

TensorFlow.js介绍

TensorFlow.js是一个JavaScript库,它可以将机器学习功能添加到任何Web应用程序中。使用TensorFlow.js,可以构建、训练和部署深度模型

浏览器安装

浏览器只需在html文件中加入 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>即可

API讲解

TensorFlow.js的接口主要是模仿keras接口来做的,对keras比较熟悉的人可以很快上手。如TensorFlow.js的接口详见官方文档。这里针对常用接口做一个说明。

  • 加载模型文件

    1
    2
    3
    4
    
    // 加载keras模型
    tf.loadLayersModel(this.MODEL_URL)
    // 加载tensorflow模型
    tf.loadGraphModel (this.MODEL_URL)
    
  • 创建tensors

    1
    
    xs = tf.fill([1, 784], 0)
    
  • 运行推理

    1
    
    result = model.predict(xs)
    
  • 获取张量值

    1
    
    result.dataSync()
    

模型文件转换

整个模型格式可以被转换为Tensorflow.js的层(Layer)格式,这个格式可以被加载并直接用作Tensorflow.js的推断或是进一步的训练。

转换后的TensorFlow.js图层(Layer)格式是一个包含model.json文件和一组二进制格式的分片权重文件的目录。 model.json文件包含模型拓扑结构(又名“架构(architecture)”或“图形(graph)”:它是对图层(Layer)及其连接方式的描述)和权重文件的清单。

模型文件转换时需要指定输入输出张量名,从模型文件中获取输入输出op名请参考博客tensorflow模型部署系列————单机python部署

命令行转换

keras

命令行将keras模型转换为tensorflowjs模型的命令如下:

1
tensorflowjs_converter --input_format=keras model\saved_keras\save.h5 ./web_model
tf模型

新版tensorflowjs_converter的入参去掉了--output_node_names。我们通常保存的tf模型没有指定输入和输出tensor,所以基本上现在所使用的tf模型无法通过tensorflowjs_converter命令直接转接,需要先调用tf.saved_model.simple_save(sess, "./saved_model", inputs={"x": x, }, outputs={"softmax": softmax, })进行重新保存。大家如果想直接使用,可参考我的代码

命令行将新保存的tf模型转换为tensorflowjs模型的命令如下:

1
tensorflowjs_converter --input_format=tf_saved_model --saved_model_tags=serve .\saved_model .\web_model

代码转换

keras

keras模型转换为tensorflowjs模型的python接口为tfjs.converters.save_keras_model

1
tfjs.converters.save_keras_model(model,'webmod_keras')
tf模型

keras模型转换为tensorflowjs模型的python接口为tfjs.converters.convert_tf_saved_model

1
tfjs.converters.convert_tf_saved_model('./tf_model','./webmod_tf')

部署代码

模型封装库

模型封装类主要包括三个方法:构建、初始化和推理。

构建只做最基础的非耗时操作,以防止网页界面卡死

初始化用于处理进行与predict无关的所有耗时操作,以减少推理时的操作,保证模型推理高效运行。初始化主要进行的操作包括:模型文件加载。需要注意的是从keras模型和tensorflow模型转换到tfjs模型加载方式是不同的,从keras转换的模型使用tf.loadLayersModel加载模型;从tensorflow转换的模型使用tf.loadGraphModel加载模型

推理主要进行的操作有:输入张量创建、model.predict、和输出值获取。

模型封装类示例代码

经过模型封装类封装以后,示例代码就很简单了。只用准备数据,然后推理就行了。

示例代码

  • TensorFlow.js的模型转换代码

    • 从keras模型文件转换代码
    • 从tensorflow模型文件转换代码
  • TensorFlow.js的模型部署代码

    • keras模型模型封装库代码
    • tensorflow模型封装库代码
    • 显示布局文件
    • 显示布局文件对应代码

附录

参考


  • tensorflow js 官方网址
  • tensorflow js 官方接口文档
tensorflow
tensorflow keras 模型部署 浏览器前端 javascript
本文由作者按照 CC BY 4.0 进行授权
分享

最近更新

  • paho.mqtt.embedded掉线问题记录
  • tensorflow模型部署系列————TensorFlow Serving部署
  • tensorflow模型部署系列————独立简单服务器部署
  • tensorflow模型部署系列————浏览器前端部署
  • tensorflow模型部署系列————独立简单服务器部署
外部链接
  • 996.icu
  •  此博客的 Github 仓库
  •  GDYSHI 的个人博客

文章内容

相关文章

2019/07/22

tensorflow模型部署系列————独立简单服务器部署

摘要 引言 主题 flask介绍 模型封装类 服务端接口调用 示例代码 附录 参考 摘要 本文为系列博客tensorflow模型部署系列的一部分,用于实现通用模型的独立简单服务器部署。本文主要实现用flask搭建tensorflow模型推理服务器。实现了tensorflow模型在服务器端计算方案,并提供相关示...

2019/07/10

tensorflow模型部署系列————嵌入式部署

摘要 引言 主题 tflite介绍 应用场景 模型文件转换 从session转换 从pb文件转换 python部署 安装 API讲...

2019/07/01

tensorflow模型部署系列————单机java部署

摘要 引言 主题 实现方案选择 官方java库 安装 API讲解 java部署代码 模型封装库 模型封装类示例代码 ...

tensorflow模型部署系列————嵌入式部署

tensorflow模型部署系列————独立简单服务器部署

© 2025 gdyshi. 保留部分权利。

本站采用 Jekyll 主题 Chirpy

热门标签

tensorflow keras 模型部署 神经网络 机器学习 flask python 服务器 译文 人脸识别

发现新版本的内容。