Loading models into tensorflow.js via react.js | by Manfye Goh | Towards Data Science

You had trained your image classification model well in TensorFlow and you eagerly want to integrate it into production and use by your users. However, you found out the problem as below:
Due to privacy concern, your user doesn’t want to upload their photo into your server
You are poor and you don’t want to create a whole new server just to host a model
You need a high latency for your model
Thanks to Tensorflow.js (TF.js), the client-side solution that will solve the problems mentioned above. Now you can integrate it with your favorite javascript framework such as React.js and have all the benefits from both sides.
The figure below shows the steps required to use your trained model in python into TF.js and this article will mainly focus on the highlighted part in the figure.
Importing a TensorFlow model into TensorFlow.js is a two-step process. First, convert an existing model to the TensorFlow.js web format. Use the tensorflowjs package for conversion
pip install tensorflowjs
Then run the script provided by the package:
# Your model format can be: | tf_saved_model | keras | tf_frozen_model | tf_hubtensorflowjs_converter \    --input_format=<"Your model format"> \    --output_node_names=<"Output name"> \    <path/to/your_model> \    <path/to/tfjs_target_dir>* Replace < > with your settings
For more information, you can refer to:
www.tensorflow.org
www.tensorflow.org
At the end of this step, you should have a tf.js model which end in “.json” in your path direction.
Setup your react application and start the application in the command prompt:
#Initiate the react appsnpx create-react-app tfjs-reactcd tfjs-react#Install the required packagenpm install @tensorflow/tfjsnpm install @tensorflow/tfjs-converter#Start the applicationnpm start
*for more information, you can refer to the official create react app documentation here
Yes, you need to host the model and load it online to be able to use the model. You cannot load from your local directory directly (unless you host it with a server locally)
My favorite hosting spot is amazon s3 and CDN services such as BunnyCDN. You must put the model (.json) and the weight (.bin) in the same folder of the hosting in order to get your model working.
Import the required packages:
import * as tf from '@tensorflow/tfjs';import {loadGraphModel} from '@tensorflow/tfjs-converter';
Define your model URL:
const url = {model: '<your model location e.g https://orangerx.b-cdn.net/model/model.json>',};
Load the model via react hook
async function loadModel(url) {try {// For layered model// const model = await tf.loadLayersModel(url.model);// For graph model// const model = await tf.loadGraphModel(url.model);setModel(model);console.log("Load model success")}catch (err) {console.log(err);}}//React Hookconst [model, setModel] = useState();useEffect(()=>{tf.ready().then(()=>{loadModel(url)});},[])
If you get the console log of “Load model success” means your model is successfully loaded into TF.js.
If you just downloaded the Tf.js model online via anonymous tutorial, the most important part is you have to distinguish the model type, noticed above we have 2 ways to loads the model depends on the model types: Layered model, and Graph Model.
The easiest way of distinguishing them is directly open the model file (.json) to see the file structure:
A graph model normally will have node information which under model Topology while the layered model doesn’t have the node information:
A short answer is, the origin of the model
A longer answer is illustrated in the table below:
By able to import the model into the client-side powered up my existing react application to achieve better results and user experiences. Many things that can’t be done last time such as client-side sentiment analysis, image classification are now possible thanks to Tf.js. I hope that this article can give you a guide on how to use TF.js and enter the TF.js community.
Let’s start building!
Next article I will be writing on how do we load media into Tf.js and preprocess it for model predictions. Stay tuned!
Thank you, I appreciate your time for reading.