How to deploy your ML models into the browser | by Dweep Joshipura | Towards Data Science

When I was a beginner in AI and ML, I often had questions like why am I learning this? And could I even make a difference before landing at a job?
These questions came up because I knew how to train models, but not how to deploy them. So if you’re at that stage and want to learn how to use models, you’re at the right place!
I am Dweep, a passionate High Schooler who has gained a lot of Deep Learning knowledge from a variety of courses, and projects.
We all know TensorFlow, and how to make models in TensorFlow (if you don’t, then I would recommend reading this blog and then coming back here.) However, it’s javaScript brother is quite lesser-known. But that doesn’t mean TensorFlow.jS, also called tfjs, is any lesser useful. Most TensorFlow models can directly turn to tfjs models, and tfjs is also capable of training models itself!
I am a true believer in the fact that code is the best way to learn code. Thus, at the end of the article, you will implement a tfjs system right on your browser. By the way, I learnt most of this from the first course in the Data and Deployment Specialization on Coursera, and I reviewed it here. As the most common use case for tfjs is transfer learning, you will implement that.
To make it as related to TensorFlow as possible, I will first explain the relationship between the TensorFlow Keras library and the tfjs Layers library.
Like Keras is built on the TensorFlow library to provide high-level functionality, the Layers library does the same for tfjs.
All jS code is in lowerCamelCase, which means that all everything is supposed to have the first letter of the first word in lowercase( like the l), and the next words with uppercase first letters( like the C). All functions and syntax follow this rule. Therefore, we should use inputShape instead of input_shape. Also, all syntax ends with a semicolon.
As javaScript does not have NumPy, all data needs to be turned into tensors for tfjs to perform inference or train models.
Another significant difference is that, unlike Python, all functional inputs configure inside curly braces. An exception is when you are inputting data, like the training set.
There are a few more differences, but I think these would suffice.
The most commonly used functions are listed below. To know more about any of them, simply click the name of the function. I recommend that you do so for every one of them, to get a better understanding.
tf.tensor(data, shape) creates a tensor which tfjs can later use for training or inference, and saves it in the variable assigned to this function
tf.sequential() creates a model which consists of a sequence of layers. This model saves into a const or constant variable.
tf.layers.dense({units: ___, activation: ‘___’}) creates a tfjs layer that can be added to a model using model.add(). Note that like TensorFlow, the first layer has an optional additional input called inputShape, which will go inside the configuration of the first layer of the model.
model.add() takes a tf.layers layer and adds it to the existing list of layers in the model. You can use tf.layers.flatten or tf.layers.conv2d also.
model.compile({optimizer: ‘___’, loss: ‘___’}) compiles the model. Optimizers are at tf.train, for example, tf.train.adam and tf.train.rmsprop.
model.fit(xs,ys,{epochs: ___, callbacks: {___}}) fits the dataset of xs, ys on the model.
model.predict(xs) uses the trained model to predict labels.
With syntax out of the way, we can now start programming.
Note that the program is the customization of the Week 4 example in the Browser-based models in tfjs course in the Data & Deployment specialization.
Let’s make a face recognition model using transfer learning in tfjs. This model will first take images of three people as input and will output which person the model sees from the webcam.If you just wanna check the demo out, then I have it in a website below. Check it out!
djthegr8.github.io
Download the 200 OK Web Server for Chrome from here. It is required to eliminate multiple HTTP requests and ensure that we get good uploads.
Optionally, if you want to edit my code to play around with tfjs (and I really recommend doing this) you can download an editor like Brackets, to make your work easier.
And finally, all the code is available at this GitHub repository. Please download it, and set the target of the Chrome Web Server into that folder. To run, open the link in the server application, and open the facerecgn.html file.
Let us first look at importing the TensorFlow.jS library. This line is in the head section of the HTML page.
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
Now, we will skip the HTML code, and see the Tensorflow.jS code in the index.jS page.
Below is the code to load the MobileNet, a pretrained tfjs network that, by itself, classifies images to about 1000 classes. This function removes its inference layer by declaring a new model which takes the output of the second last layer.
Below is the most important function in the code. We are flattening the 3-dimensional outputs of the MobileNet encodings (outputs of the model declared in the loadMobilenet() function, and then passing through a small NN. The loss is categorical cross-entropy and the optimizer is adam.
Another function that I will show is the function that handles the button presses that eventually lead to the creation of the dataset. It is pretty self-explanatory.
The last major function is the predict() which predicts the person based on the model. This function finds predictive probabilities and outputs the one with the highest.
With that done, the rps-dataset.jS is left...Rather than describing the code, I will quickly describe what it does. All it does is make a dataset that can be appended and has (one-hot) labels. The code is in the repository, of course.
After all these functions, you can look at the final index.jS code.
Thanks a ton for reading this, and if you find any bugs, please comment!
Mail me up at my Gmail for any help or collab related to TF, Keras, TFjS or Python! Or check out my Linkedin