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>
  <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 ?

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>
  <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 )

So, we just added some img tags with IDs to refer to in our javascript code plus few divs 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:

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

let net = await mobilenet.load();

Now we can simply use it to classify our images with the classify method:

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:

<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>
  <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.

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

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

Now the only thing we need to know is to specify the repository that we store our code (Utopiops supports Github, Bitbucket and Gitlab).

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.

Tensorflow.js for beginners - image classification