This article shows how to convert a model created with tensorflow to a format that can be used with Tnesorflow.js.

python environment

pip install tensorflowjs

tfjs-converter

Tensorflow.js (TF.js) can reuse existing models trained by Tensorflow (TF). tfjs-converter is a command line tool for converting TensorFlow models and supports various formats such as HDF5.

tensorflowjs_converter --help
usage: TensorFlow.js model converters. [-h]
                                       [--input_format {tensorflowjs,keras,tf_hub,keras_saved_model,tf_saved_model,tfjs_layers_model}]
                                      [--output_format {tfjs_graph_model,tfjs_layers_model,tensorflowjs,keras}]
                                       [--signature_name SIGNATURE_NAME]
                                       [--saved_model_tags SAVED_MODEL_TAGS]
                                       [--quantization_bytes {1,2}]
                                       [--split_weights_by_layer] [--version]
                                       [--skip_op_check SKIP_OP_CHECK]
                                       [--strip_debug_ops STRIP_DEBUG_OPS]
                                       [--weight_shard_size_bytes WEIGHT_SHARD_SIZE_BYTES]
                                       [input_path] [output_path]

You can convert TF's Saved Model to a Web format that can be read by TF.js with the following command.

tensorflowjs_converter \
    --input_format=tf_saved_model \
    /path/to/saved_model \
    /path/to/web_model

For --input_format, other formats such as keras, keras_saved_model, tf_hub can be selected.

portable format

It can be reused in a different location than where the model is trained. feature is,

Lightweight: Can be stored in limited memory
Serialization: Shareable via network I / O
Compatibility: Available on multiple platforms

The files generated by Tensorflow are based on protocol buffers. Therefore, it is a readable format in many programming languages. In addition, formats such as ONNX are also platform-independent formats. (Can also be used with pytorch etc.)

Save model

How to save a model in Tensorflow (Python).

mport tensorflow as tf
from tensorflow import keras

print(tf.__version__) #2.1

(train_images, train_labels), (test_images, test_labels) = tf.keras.datasets.mnist.load_data()

train_labels = train_labels[:1000]
test_labels = test_labels[:1000]

train_images = train_images[:1000].reshape(-1, 28 * 28) / 255.0
test_images = test_images[:1000].reshape(-1, 28 * 28) / 255.0

#A function that returns a short sequential model
def create_model():
  model = tf.keras.models.Sequential([
    keras.layers.Dense(512, activation='relu', input_shape=(784,)),
    keras.layers.Dropout(0.2),
    keras.layers.Dense(10, activation='softmax')
  ])
  
  model.compile(optimizer='adam', 
                loss='sparse_categorical_crossentropy',
                metrics=['accuracy'])
  
  return model

#Create an instance of the basic model
model = create_model()
model.summary()

model.fit(train_images, train_labels, epochs=5)

#Save the entire model in one HDF5 file.
model.save('my_model.h5')
tf.saved_model.save(model, "./sample/model_data")
#imported = tf.saved_model.load("./sample/model_data")

Model transformation

Convert the TF model saved in ./sample/model_data to the TF.js format model.

tensorflowjs_converter --input_format=tf_saved_model --output_node_names=output ./sample/model_data ./sample/model_tfjs_model

#hd5 data format
tensorflowjs_converter --input_format keras my_model.h5 ./sample/hd5_model

#tf-Use hub model
tensorflowjs_converter \
    --input_format=tf_hub \
    'https://tfhub.dev/google/imagenet/mobilenet_v1_100_224/classification/1' \
    ./my_tfjs_model

What is TF-hub?

Tensorflow Hub is a library that can reuse machine learning models and so on. You can use state-of-the-art machine learning technology by loading the model and matching the input and output formats.

Model loading

How to load a model in Tensorflow.js.

import * as tf from '@tensorflow/tfjs';

const MODEL_URL = 'https://path/to/model.json';
const model = await tf.loadGraphModel(MODEL_URL);

// Or

const MODEL_PATH = 'file://path/to/model.json';
const model = await tf.loadGraphModel(MODEL_PATH);