【6】TensorFlow光速入门-python模型转换为tfjs模型并使用

本文地址：https://www.cnblogs.com/tujia/p/13862365.html

系列文章：

【0】TensorFlow光速入门-序

【1】TensorFlow光速入门-tensorflow开发基本流程

【2】TensorFlow光速入门-数据预处理（得到数据集）

【3】TensorFlow光速入门-训练及评估

【4】TensorFlow光速入门-保存模型及加载模型并使用

【5】TensorFlow光速入门-图片分类完整代码

【6】TensorFlow光速入门-python模型转换为tfjs模型并使用

【7】TensorFlow光速入门-总结

一、模型转换

python模型转换tfjs模型，需要用到先安装 tensorflowjs_converter 工具

 pip install tensorflowjs

安装成功后，可以用python脚本或shell命令转换，下面是shell的例子：

tensorflowjs_converter /tf/saved_model/wnw /tf/saved_model_js/wnw

注：记得提前创建好 saved_model_js 目录。转换成功成，会得到 model.json 及 n个 .bin 文件，例如：group1-shard1of2.bin、group1-shard2of2.bin等等

转换命令的详细参数，请看：

tensorflowjs_converter --help

二、在浏览器中使用

先准备好模型文件及dict.txt 文件（注：dict.txt 需要自己创建，内容为图片分类，一行一个分类）

     

基础html元素

<input type="file" class="custom-file-input" id="file" accept="image/*" capture="camera">

<input class="form-control" id="result" readonly="readonly">

<img src="" id="pic">

引入tfjs

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.6.0/dist/tf.min.js"></script>

加载模型

const MODEL_URL = '/static/models/wnw/model.json';

let model = null;
tf.loadGraphModel(MODEL_URL).then((value)=>{
    model = value;
}, (error)=>{
    console.log(error);
});

侦听选择图片及图片预览

let image = document.getElementById('pic');

// 图片预览
document.getElementById('file').addEventListener('change', (ev)=>{
    let reader = new FileReader();
    reader.addEventListener('load', (e)=>{
        image.src = e.target.result;
    });
    reader.readAsDataURL(ev.target.files[0]);
});

图片数据转换及预测

// 图片分类
const CLASSIFY = ['非表', '表'];

// 图片处理及评估
image.addEventListener('load', ()=>{
    // 图片转换成灰度张量数据
    let image_tensor = tf.browser.fromPixels(image, 1);
    // 三维张量转四维张量
    image_tensor = tf.expandDims(image_tensor);
    image_tensor = tf.cast(image_tensor, 'float32');
    // console.log(image_tensor.shape);
    // 图片缩放，转换为模型需要的大小
    image_tensor = tf.image.resizeBilinear(image_tensor, [100, 100]);
    // console.log(image_tensor.shape);
    let predictions = model.predict(image_tensor);
    let label = tf.argMax(predictions, 1).dataSync()[0];
    result.value = CLASSIFY[label];
});

注：像【4】TensorFlow光速入门-保存模型及加载模型并使用 说的那样，加载模型，然后准备一个和训练集一样格式的数据（数据格式转换、缩放），然后预测就可以了

重点：

tf.browser.fromPixels　　　　base64格式转tensor3D格式

tf.expandDims 　　　　　　  tensor3D格式车转tensor4D格式

tf.cast 　　　　　　　　　　 数值转换，上面例子是int32转float32

tf.image.resizeBilinear            图片缩放

model.predict 　　　　　　　模型预测

tf.argMax(predictions, 1).dataSync()[0]     取预测结果的最大值的 key（即分类label）

---

其他：

官方关于tfjs的使用示例并不完善，甚至是错。各种跳转，又是 MobileNet 又是 ml5 的，其实都不需要，直接用 tf.min.js 就可以了。mobilenet 和 ml5 的用法以后再研究

下面是相当混乱的一些相关文档：

https://tensorflow.google.cn/js/tutorials/conversion/import_keras

https://tensorflow.google.cn/js/tutorials/conversion/import_saved_model

https://github.com/tensorflow/tfjs-converter/blob/master/tfjs-converter/README.md

https://github.com/tensorflow/tfjs-converter/tree/master/tfjs-converter/demo/mobilenet

https://learn.ml5js.org/#/tutorials/hello-ml5?id=demo

本文链接：https://www.cnblogs.com/tujia/p/13862365.html

---

完。