Tensorflow.js for beginners - image classification
Tags: machinelearning, javascript, tutorial
Published: 2022-01-04 13:10:27

We all know that AI based applications have many use cases and have proved to raise the user experience to a whole new level. But, to many developers it stays out of reach because building applications that use AI seem to need a lot of background knowledge which makes the learning curve too steep for many.

In this series I'm trying to show not only you can use AI in your applications without dealing significantly with the theories, but also you can even have it in your static website with the use of Tensorflow.js.

Today, I'll show you how to add image classification to your static website, which I'm sure you guys out there can mix what you learn today with heaps of creative ideas and come up with really interesting solutions. At the end of the post I'll even show you how to easily deploy the application and share our result with others.

Let's create a simple `index.html` file to begin with and add the basic code to it:

``` html
<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>
</html>
```

Here we have just imported Tensorflow and MobileNet in our page.

But what is  [MobileNet](https://github.com/tensorflow/tfjs-models/tree/master/mobilenet) ?
> MobileNets are small, low-latency, low-power models parameterized to meet the resource constraints of a variety of use cases ... MobileNets trade off between latency, size and accuracy while comparing favorably with popular models from the literature.

In plain english, MobileNet gives us a simple way to use pre-trained (meaning ready to use) models to use in our application.

Now let's add a few images to our html file to be classified.

``` html
<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="img1" src="./manja-vitolic-gKXKBY-C-Dk-unsplash.jpg" width="320"/>
    <img id="img2" src="./marliese-streefland-2l0CWTpcChI-unsplash.jpg" width="320"/>
    <img id="img3" src="./giorgio-trovato-K62u25Jk6vo-unsplash.jpg" width="320"/>

    <div>Image one is %<span id="img1_prob"></span> a/an <span id="img1_class"></span></div>
    <div>Image two is %<span id="img2_prob"></span> a/an <span id="img2_class"></span></div>
    <div>Image three is %<span id="img3_prob"></span> a/an <span id="img3_class"></span></div>



    <!-- Load index.js after the content of the page -->
    <script src="index.js"></script>
  </body>
</html>
```
This is how our super simple website looks like so far (assume I have put the images in the local directory. You can fine all the resources  [here](https://github.com/mkamrani/tensorflow-js-image-classification) )

![Screen Shot 2022-01-02 at 8.46.57 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641116824213/lR0C6w8ic.png)

So, we just added some `img` tags with IDs to refer to  in our javascript code plus few `div`s to show the result of the classification.

Now let's implement the part we classify each image, as if we show images to a human and ask them to label the image. For that, we create a file name `index.js` in the same directory and fill it with this code:

``` javascript
async function predict() {
  console.log('Loading mobilenet...');
  // Load the pre-trained model
  let net = await mobilenet.load();

  // Make a prediction through the model on our image.
  let images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    const result = await net.classify(images[i]);
    console.log(images[i].src, result);
    document.getElementById(`img${i+1}_class`).innerText = result[0].className;
    document.getElementById(`img${i+1}_prob`).innerText = result[0].probability;
  }
}
```
Here we have defined a async function that first loads mobilenet

``` javascript
let net = await mobilenet.load();
```
Now we can simply use it to classify our images with the `classify` method:

``` javascript
const result = await net.classify(images[i]);
```
The rest of the code is some basic javascript to show the result in our page. Worth mentioning, the `classify` method returns three results by default with different class names (labels/predictions) with the probability that the classification is correct. As the results are ordered from the most probable to the least probable, here we simply pick the first answer.

Finally we just add a button to our `index.html` to classify the images and show the results whenever it's clicked:

``` html
<button style="display: block; width: 200px; margin-left: 200px; background-color: #10f; color: white" onclick="predict()">predict</button>
```

This is how our `index.html` looks like finally:

```html
<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="img1" src="./manja-vitolic-gKXKBY-C-Dk-unsplash.jpg" width="320"/>
    <img id="img2" src="./marliese-streefland-2l0CWTpcChI-unsplash.jpg" width="320"/>
    <img id="img3" src="./giorgio-trovato-K62u25Jk6vo-unsplash.jpg" width="320"/>

    <div>Image one is %<span id="img1_prob"></span> a/an <span id="img1_class"></span></div>
    <div>Image two is %<span id="img2_prob"></span> a/an <span id="img2_class"></span></div>
    <div>Image three is %<span id="img3_prob"></span> a/an <span id="img3_class"></span></div>

    <button style="display: block; width: 200px; margin-left: 200px; background-color: #10f; color: white" onclick="predict()">predict</button>

    <script src="index.js"></script>
  </body>
</html>
```

Now let's deploy our web application with [Utopiops](https://www.utopiops.com). 

Head over to the `Fully managed applications` section as we want to use free static website deployment and hosting that Utopiops offers.

![Screen Shot 2021-12-31 at 8.16.15 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640944738538/QMMZQKUtp.png)

Now we choose `Static website` as the application type to be created. (Utopiops also offers free plans for `Function` and `Dockerized` applications)


![Screen Shot 2021-12-31 at 8.16.35 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640944848567/j_pE1HukP.png)

Now the only thing we need to know is to specify the  [repository](https://github.com/mkamrani/tensorflowjs-hello-world)  that we store our code (Utopiops supports Github, Bitbucket and Gitlab).


![Screen Shot 2022-01-02 at 9.55.27 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641120933042/jaq3US1Yp.png)

And that's it, in a few seconds we have our website ready and every time we make a change to our code it automatically deploys our changes.

https://tesnsorflow-js-image-classification-3acd0e5e.sites.utopiops.com

Note: Utopiops is in public beta at the time of writing this post and the view you see when you log in to Utopiops at https://www.utopiops.com might be different, but the good news is that it sure just have become more user-friendly and easier to use.