DEV Community 👩‍💻👨‍💻

Cover image for Tensorflow.js for beginners - image classification
mohsen
mohsen

Posted on • Originally published at e2e.utopiops.com

Tensorflow.js for beginners - image classification

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 )

Screen Shot 2022-01-02 at 8.46.57 pm.png

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

Here we have defined a async function that first loads mobilenet

let net = await mobilenet.load();
Enter fullscreen mode Exit fullscreen mode

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

const result = await net.classify(images[i]);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Screen Shot 2021-12-31 at 8.16.15 pm.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

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

Screen Shot 2022-01-02 at 9.55.27 pm.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.

Latest comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!