Deploying an Image Classifier using JavaScript | by Sushrut Ashtikar | Towards Data Science

Yet another way of inferencing an image classification model for reducing inference time by directly deploying in a static website or nodejs web application.
Deploying a machine learning model can be fun. You have to make sure you have setup with hardware and software optimized pipeline and boom your model is ready for production. But sometimes making an HTTP call to the backend with image and then returning results on frontend can be a tedious job. There are so many restrictions like late inference if you are using a heavy model and your server configuration is low.That’s why they say that model deployment is 80% of work in the field of data science.
TensorFlow.js, an open-source library you can use to define, train, and run machine learning models entirely in the browser, using Javascript and a high-level layers API. If you’re a Javascript developer who’s new to ML, TensorFlow.js is a great way to begin learning. JavaScript is a client-side scripting language, running machine learning programs entirely client-side in the browser unlocks new opportunities, like interactive ML.
I have already trained a simple cat vs dog classifier on Keras. You can refer to my notebook file if you want to train a model yourself. We are going to use the tensorflowjs_converter tool to convert Keras (.h5) weights to tfjs format.tensorflowjs_converter comes with tensorflowjs python library so let’s install.
pip install tensorflowjs
Use the tensorflow.js converter to convert the saved Keras model into JSON format. (Assuming name of weight model.h5)
Create a directory to store converted weights and mention its path (jsweights)
tensorflowjs_converter --input_format=keras ./model.h5 ./jsweights
If you did things correctly, you should now have a JSON file named model.json and various .bin files, such as group1-shard1of10.bin. The number of .bin files will depend on the size of your model: the larger your model, the greater the number of .bin files. The model.json file contains the architecture of your model and the .bin files will contain the weights of your model.
We need to create a js file that contains code for loading a model and making inferences from the given image.
Make sure you set the correct location for loading model.json in your file. Also your prediction function and model loading function should be asynchronous.
//classifier.jsvar model;var predResult = document.getElementById("result");async function initialize() {    model = await tf.loadLayersModel('/weights/catsvsdogs/model.json');}async function predict() {  // action for the submit buttonlet image = document.getElementById("img")  let tensorImg =   tf.browser.fromPixels(image).resizeNearestNeighbor([150, 150]).toFloat().expandDims();  prediction = await model.predict(tensorImg).data();if (prediction[0] === 0) {      predResult.innerHTML = "I think it's a cat";} else if (prediction[0] === 1) {      predResult.innerHTML = "I think it's a dog";} else {      predResult.innerHTML = "This is Something else";  }}initialize();
Setup an image path inside your Html file. Just replace the path with the image you want to predict. You need to give only a relative image path.
<img src="./images/courage.jpg">
Add this file and tensorflowjs CDN link in your HTML file after </body> tag.
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script><script src="/classifier.js"></script>
Once our setup is completely ready, we can load our Html page and check the predictions.
Point to be noted
Even though all the files are static, still our Html file will require a server to load the model.json file. Just like hosting a webpage. The easiest way to do this is with a python HTTP server module that can act as a hosting server for our static webpages. The best part is that we don’t need to install any extra library for loading the HTTP module.Alternatively you can also use hosting servers like apache or Nginx. For windows users, the WAMP server can be useful too.
Python HTTP server can be started inside the Html files directory with the following command.
python3 -m http.server
Once you run the above command, you will get the following output:
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
Open URL in the browser to see the output of your image predicted by your js weights.
Here is an output from my model
Here is my GitHub repo link for this project. Try training and converting weights then deploying on the website all by yourself.
github.com
[1] Tensorflow.js
[2] Tensorflowjs python library for a converter tool
[3] Cat Dog Image Classification Tutorial from official TensorFlow website
[4] Garfield character reference as a cat.
[5] Courage the Cowardly Dog (My Favourite)
[5] Money Heist characters
and a few cups of coffee 😉