随笔- 960 文章- 0 评论- 107 阅读- 53万

[Web CV] Retrain MobileNet for TensorFlow.js

初步学习

一、使用简介

Ref: TensorFlow.js - Running MobileNet in the browser

二、模型转换

[Link] How to Import a Keras model into TensorFlow.js (AI Adventures)

my_model.h5

pip install tensorflowjs

转换后，如何使用呢。

mkdir tfjs_files

group1-shard1of1
group2-shard1of1
group3-shard1of1
model.json

const model = await tf.loadModel('https://foo.bar/tfjs_artifacts/model.json')

三、韭菜实操

Ref: Classifying images using Keras MobileNet and TensorFlow.js in Google Chrome

Before deploying a keras model in web, we need to convert the Keras mobilenet python model into tf.js layers format (which we already did in lines 36-38).

# convert the mobilenet model into tf.js model
save_path = "output/mobilenet"
tfjs.converters.save_keras_model(mobilenet, save_path)
print("[INFO] saved tf.js mobilenet model to disk..")

output:

-rw-r--r-- 1 jeffrey jeffrey 4194304 Apr 17 19:52 group1-shard1of5.bin
-rw-r--r-- 1 jeffrey jeffrey 4194304 Apr 17 19:52 group1-shard2of5.bin
-rw-r--r-- 1 jeffrey jeffrey 4194304 Apr 17 19:52 group1-shard3of5.bin
-rw-r--r-- 1 jeffrey jeffrey 4194304 Apr 17 19:52 group1-shard4of5.bin
-rw-r--r-- 1 jeffrey jeffrey  238240 Apr 17 19:52 group1-shard5of5.bin
-rw-r--r-- 1 jeffrey jeffrey   55625 Apr 17 19:52 model.json

The folder that contains model.json and a set of sharded weight binary files.

Model.json

In the model.json file, you will see the model architecture or graph (a description of layers and their connections) plus a manifest of the weight files.

官方文档

Github: https://github.com/tensorflow/tfjs-models

Official: https://www.tensorflow.org/js/

一、MobileNet for TF.js

Type	Model	Demo	Details	Install
Images	MobileNet		Classify images with labels from the ImageNet database.	`npm i @tensorflow-models/mobilenet`
	MobileNet	source	Classify images with labels from the ImageNet database.	`npm i @tensorflow-models/mobilenet`

Download: https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v1_025_224/classification/1/default/1

Asset size: 1.83MB

This model has been automatically converted using the TF.js converter.

This model can be loaded using TF.js as:

tf.loadGraphModel("https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v1_025_224/classification/1/default/1", { fromTFHub: true })

理论上，还可以变得更小。

Ref: https://github.com/tensorflow/models/blob/master/research/slim/nets/mobilenet_v1.md

二、Keras 训练 mobilenet_v1_025_224

Res: https://aihub.cloud.google.com/u/0/p/products%2F93839d48-c253-4ea8-83a3-d54547092bfb

Goto: [MobileNet] Train MobilenNet in Keras & TF Hub [自家文章]

文件种类

Ref: tfjs-converter

一、Web-friendly format

原本比较小

For keras input files, the converter generates model.json and group1-shard\*of\*.

The conversion script above produces 4 types of files:

(1) tensorflowjs_model.pb (the dataflow graph)

(2) weights_manifest.json (weight manifest file)

(3) model.json (the two above, in a single file)

(4) group1-shard\*of\* (collection of binary weight files)

压缩变更小

998.0KB 的0.25depth的weight，通过diff可以缩减到 413.0KB。

二、加载模型

加载过程脚本分析：https://unpkg.com/@tensorflow-models/mobilenet@0.0.1/dist/bundle.js

54.4k 模型大小，不是参数大小。

https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json

代码处理部分，如下：

Object.defineProperty(exports, "__esModule", { value: true });
var tf = (typeof window !== "undefined" ? window['tf'] : typeof global !== "undefined" ? global['tf'] : null);
var imagenet_classes_1 = require("./imagenet_classes");
var BASE_PATH = 'https://storage.googleapis.com/tfjs-models/tfjs/';
var IMAGE_SIZE = 224;

function load(version, alpha) {
    if (version === void 0) { version = 1; }
    if (alpha   === void 0) { alpha = 1.0; }
    return __awaiter(this, void 0, void 0, function () {
        var mobilenet;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    if (tf == null) {
                        throw new Error("Cannot find TensorFlow.js. If you are using a <script> tag, please " +
                            "also include @tensorflow/tfjs on the page before using this model.");
                    }
                    if (version !== 1) {
                        throw new Error("Currently only MobileNet V1 is supported. Got version " + version + ".");
                    }
                    if ([0.25, 0.50, 0.75, 1.0].indexOf(alpha) === -1) {
                        throw new Error("MobileNet constructed with invalid alpha " +
                            (alpha + ". Valid multipliers are 0.25, 0.50, 0.75, and 1.0."));
                    }
                    mobilenet = new MobileNet(version, alpha);
                    return [4, mobilenet.load()];
                case 1:
                    _a.sent();
                    return [2, mobilenet];
            }
        });
    });
}

exports.load = load;
var MobileNet = (function () {
    function MobileNet(version, alpha) {
        this.intermediateModels = {};
        var multiplierStr = ({ 0.25: '0.25', 0.50: '0.50', 0.75: '0.75', 1.0: '1.0' })[alpha];
        this.path =
            BASE_PATH + "mobilenet_v" + version + "_" + multiplierStr + "_" + IMAGE_SIZE + "/" + "model.json";
        this.normalizationOffset = tf.scalar(127.5);
    }
    MobileNet.prototype.load = function () {
        return __awaiter(this, void 0, void 0, function () {
            var _a, result;
            return __generator(this, function (_b) {
                switch (_b.label) {
                    case 0:
                        _a = this;
                        return [4, tf.loadModel(this.path)];
                    case 1:
                        _a.model = _b.sent();
                        this.endpoints = this.model.layers.map(function (l) { return l.name; });
                        result = this.model.predict(tf.zeros([1, IMAGE_SIZE, IMAGE_SIZE, 3]));
                        return [4, result.data()];
                    case 2:
                        _b.sent();
                        result.dispose();
                        return [2];
                }
            });
        });
    };
    MobileNet.prototype.infer = function (img, endpoint) {
        var _this = this;
        if (endpoint != null && this.endpoints.indexOf(endpoint) === -1) {
            throw new Error("Unknown endpoint " + endpoint + ". Available endpoints: " +
                (this.endpoints + "."));
        }
        return tf.tidy(function () {
            if (!(img instanceof tf.Tensor)) {
                img = tf.fromPixels(img);
            }
            var normalized = img.toFloat()
                .sub(_this.normalizationOffset)
                .div(_this.normalizationOffset);
            var resized = normalized;
            if (img.shape[0] !== IMAGE_SIZE || img.shape[1] !== IMAGE_SIZE) {
                var alignCorners = true;
                resized = tf.image.resizeBilinear(normalized, [IMAGE_SIZE, IMAGE_SIZE], alignCorners);
            }
            var batched = resized.reshape([1, IMAGE_SIZE, IMAGE_SIZE, 3]);
            var model;
            if (endpoint == null) {
                model = _this.model;
            }
            else {
                if (_this.intermediateModels[endpoint] == null) {
                    var layer = _this.model.layers.find(function (l) { return l.name === endpoint; });
                    _this.intermediateModels[endpoint] =
                        tf.model({ inputs: _this.model.inputs, outputs: layer.output });
                }
                model = _this.intermediateModels[endpoint];
            }
            return model.predict(batched);
        });
    };
    MobileNet.prototype.classify = function (img, topk) {
        if (topk === void 0) { topk = 3; }
        return __awaiter(this, void 0, void 0, function () {
            var logits, classes;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        logits = this.infer(img);
                        return [4, getTopKClasses(logits, topk)];
                    case 1:
                        classes = _a.sent();
                        logits.dispose();
                        return [2, classes];
                }
            });
        });
    };
    return MobileNet;
}());

exports.MobileNet = MobileNet;
function getTopKClasses(logits, topK) {
    return __awaiter(this, void 0, void 0, function () {
        var values, valuesAndIndices, i, topkValues, topkIndices, i, topClassesAndProbs, i;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4, logits.data()];
                case 1:
                    values = _a.sent();
                    valuesAndIndices = [];
                    for (i = 0; i < values.length; i++) {
                        valuesAndIndices.push({ value: values[i], index: i });
                    }
                    valuesAndIndices.sort(function (a, b) {
                        return b.value - a.value;
                    });
                    topkValues = new Float32Array(topK);
                    topkIndices = new Int32Array(topK);
                    for (i = 0; i < topK; i++) {
                        topkValues[i] = valuesAndIndices[i].value;
                        topkIndices[i] = valuesAndIndices[i].index;
                    }
                    topClassesAndProbs = [];
                    for (i = 0; i < topkIndices.length; i++) {
                        topClassesAndProbs.push({
                            className: imagenet_classes_1.IMAGENET_CLASSES[topkIndices[i]],
                            probability: topkValues[i]
                        });
                    }
                    return [2, topClassesAndProbs];
            }
        });
    });
}

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./imagenet_classes":1}]},{},[2])(2)
});

三、加载参数

[迁移学习]

Ref: TensorFlow.js、迁移学习与AI产品创新之道 [写得不错]

看上去超级无敌好的一门Keras课程：(部分课程如下)

Project Structure

We have this one file called model.json, which contains the model architecture and metadata for the weight files.

./static
    imagenet_classes.js
    predict-with-tfjs.html
    predict.js
    tfjs-models/
    MobileNet/
        model.json
        group1-shard1of1
        group2-shard1of1
        ...
    VGG16/
        model.json
        group1-shard1of1
        group2-shard1of1
        ...

predict-with-tfjs.html

官方提供 imagenet_classes.js: https://github.com/tensorflow/tfjs-examples/blob/master/mobilenet/imagenet_classes.js

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.7"></script>
<script src="imagenet_classes.js"></script>
<script src="predict.js"></script>

weight binary file

Ref: How to load model and weights using tensorflow.js in browser saved on Node.js?

The weight files are loaded automatically by using the same path as the model file. With your example, the model file has URL as following: http://model-server.domain/download/model.json

The loader will load the weight files from the following URL: http://model-server.domain/download/group1-shard1of1

As long as you store the weight files the same directory as the model.json file on the server, it should work.

示范：https://storage.googleapis.com/tfjs-models [各种模型的weight files下载列表]

实践出韭菜

文章：Machine Learning in the Browser: Train and Serve a Mobilenet Model for Custom Image Classification [看上去比较全]

代码：Building Mobilenet Based Custom Image Classification Model on the Browser with Tensorflow.js and Angular [文章中的代码]

JS训练模型，而非Keras --> TF.js

中文资源收集

一、两层自定义网络

网络结构

Ref: 【webAI】Tensorflow.js加载预训练的model

# 第一层
W = weight_variable([n_input, n_node])
b = bias_variable([n_node])
layer_h = tf.nn.relu(tf.matmul(x, W) + b)

# 第二层
W_out = bias_variable([n_node, n_out])
b_out = bias_variable([n_out])
y = tf.nn.relu(tf.matmul(layer_h, W_out) + b_out)

softmax = tf.nn.softmax(y, name="softmax")

转换tensorflow的模型

tensorflowjs_converter --input_format=tf_saved_model \
  --output_node_names="softmax" \
  --saved_model_tags=serve ./saved_model \
  ./web_model

转换后的模型文件：

1. tensorflowjs_model.pb ，为 tensorflow.js能识别的模型
2. weights_manifest.json ，为 tensorflow.js能识别的模型参数文件

使用方法：

import * as tf from '@tensorflow/tfjs'
import {loadFrozenModel} from '@tensorflow/tfjs-converter'

const MODEL_URL   = 'tensorflowjs_model.pb'
const WEIGHTS_URL = 'weights_manifest.json'

async function predict() {
    try {
      const model = await loadFrozenModel(MODEL_URL, WEIGHTS_URL)
      var xs = tf.tensor2d([pixels])
      var output = model.execute({x: xs})
      console.log(output.dataSync())
      return output
    } catch (e) {
      console.log(e)
    }
 }

二、 MobileNet模型

Ref: 将Keras模型导入Tensorflow.js [官方指导]

tensorflowjs_converter --input_format keras \
                       path/to/my_model.h5 \
                       path/to/tfjs_target_dir

实践一下

Ref: TensorFlow.js、迁移学习与AI产品创新之道

简单粗暴TensorFlow2.0 - 部署

Ref: https://www.bookstack.cn/read/TensorFlow2.0/deploy.md

连接中有价值的地方。

Transfer learning - Keras 训练 MobileNet

Available models: https://keras.io/api/applications/

(有待整理)

民间资料学习

Image: https://codepen.io/kyliepops-the-decoder/pen/dyPYLrQ

Camera: https://codepen.io/jawache/pen/WKbJJd

Classifying images using Keras MobileNet and TensorFlow.js in Google Chrome

Reduced network size - 17MB. (太大了)

Convert Keras model into Tf.js layers format

pip install tensorflowjs

tensorflowjs_converter --input_format keras \
                       path_to_keras_model.h5 \
                       path/to/tfjs_target_dir

W3CSCHOOL Tensorflow.js 安装

安装方式

在JavaScript项目中，TensorFlow.js的安装方法有两种：

(1) 一种是通过script标签引入，

(2) 另外一种就是通过npm进行安装。

安装方法

只安装了tensorflow.js，后者tensorflow.js和mobilenet都安装。

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.9.0"> </script>

    <!-- Place your code in the script tag below. You can also use an external .js file -->
    <script>
      /* implement */
    </script>
  </head>

  <body>
  </body>
</html>

<html>
  <head>
    <!-- Load the latest version of TensorFlow.js -->
    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
    <script src="https://unpkg.com/@tensorflow-models/mobilenet"></script>
  </head>
  <body>
    <div id="console"></div>
    <img id="img" crossorigin src="https://i.imgur.com/JlUvsxa.jpg" width="227" height="227"/>
    <!-- Load index.js after the content of the page -->
    <script src="index.js"></script>
  </body>
</html>

<html>
<head>
  <title>What's In That Image?</title>
  <meta charset="UTF-8" />
  <!-- Load TensorFlow.js. This is required to use MobileNet. -->
  <script src="https://unpkg.com/@tensorflow/tfjs@0.10.3"></script>
  <!-- Load the MobileNet model. -->
  <script src="https://unpkg.com/@tensorflow-models/mobilenet@0.0.1"></script>
</head>

<body onload="setup()">
  <div style="text-align:center">
    <h1>
      What's In That Image?
    </h1>
    <video id="video">Video stream not available.</video>
    <pre id="predictions"></pre>
    <canvas id="canvas" style="display:none"></canvas>
  </div>
</body>
</html>

W3CSCHOOL TensorFlow.js 导入Keras模型

Keras模型（通常通过Python API创建）的存储格式可以有多种，其中“整个模型”（即架构+权重+优化器状态都存在一个文件内）格式可以转换为 TensorFlow.js Layers格式，可以直接加载到TensorFlow.js中进行推理或进一步训练。

TensorFlow.js Layers格式是一个包含model.json文件和一组二进制格式的权重文件分片的目录。 model.json文件包含模型拓扑结构（又名“体系结构”或“图”：层的描述以及它们如何连接）以及权重文件的清单。

TensorFlow.js Layers目前仅支持使用标准Keras构造的Keras模型。

官方资料实践

TensorFlow.js Transfer Learning Image Classifier [official]

What you'll learn

- How to load pretrained MobileNet model and make a prediction on new data
- How to make predictions through the webcam
- How to use intermediate activations of MobileNet to do transfer learning on a new set of classes you define on the fly with the webcam

<html>
  <head>
    <!-- Load the latest version of TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
  </head>
  <body>
    <div id="console"></div>
    <!-- Add an image that we will use to test -->
    <img id="img" crossorigin src="https://i.imgur.com/JlUvsxa.jpg" width="227" height="227"/>
    <!-- Load index.js after the content of the page -->
    <script src="index.js"></script>
  </body>
</html>

对于图片

let net;

async function app() {
  console.log('Loading mobilenet..');

  // Load the model.
  net = await mobilenet.load();
  console.log('Successfully loaded model');

  // Make a prediction through the model on our image.
  const imgEl = document.getElementById('img');
  const result = await net.classify(imgEl);
  console.log(result);
}

app();

对于摄像头

async function app() {
  console.log('Loading mobilenet..');

  // Load the model.
  net = await mobilenet.load();
  console.log('Successfully loaded model');
  
  // Create an object from Tensorflow.js data API which could capture image 
  // from the web camera as Tensor.
  const webcam = await tf.data.webcam(webcamElement);

  while (true) {
    const img = await webcam.capture();
    const result = await net.classify(img);

    document.getElementById('console').innerText = `
      prediction: ${result[0].className}\n
      probability: ${result[0].probability}
    `;
    // Dispose the tensor to release the memory.
    img.dispose();

    // Give some breathing room by waiting for the next animation frame to
    // fire.
    await tf.nextFrame();
  }
}

posted @ 2020-04-15 20:26 郝壹贰叁阅读(787) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

公告

昵称：郝壹贰叁
园龄： 13年8个月
粉丝： 130
关注： 8

+加关注

2025年3月

日

一

二

三

四

五

六

机器学习水很深

We all have two lives. The second one starts when we realize that we only have one. --- Tom Hiddleston