Today, I want to share with you my experience working a simple classification model with Tensorflow Javascript (TFJS). First, ¿What is TFJS? Tensorflow.org defines TensorFlow. js as a JavaScript library for training and deploying machine learning models in the web browser and in Node. js. To complement this definition is necessary to visualize the complete tensorflow ecosystem:

As you can see, there are many other tools in the tensorflow framework and TFJS is a deployment tool. This is exactly what makes really powerful to TFJS. The fact that it can be deployed in any device that supports Javascript.

Now it is time to talk about the model to be implemented. The mobilenet is a CNN model designed for mobile and embedded vison applications. All the basic information for this model is available in the tensorflow javascript tutorials. However, the code only allows to make a inference in an image previously loaded in the same folder that the model runs. So, in order to allow us to choose from any image located in our device, the following code is suggested.

index.html

<h1>Clasificador con Tensorflow Javascript</h1>
<!-- Create a container element for the image file input -->
<input type="file" id="fileInput" accept="image/*">
<button onclick="app()">Predecir imagen</button>    
<!-- Create an element to display the prediction -->
<div id="prediction-container"></div>

The purpose of this HTML code is to select an image from the device with the input element. Note that there is also a button element. This is very useful because we want to have control of the moment to make the inference. I almost forget to talk about the prediction container. This is an additional code to show in the same page the result of the inference.

script.js

//app();
const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", (event) => {
  const selectedFile = event.target.files[0];

  const img = document.createElement("img");
  img.src = URL.createObjectURL(selectedFile);
  img.id = "selectedImage";

  document.body.appendChild(img);
});

The function of the Javascript code above is to load an image and then covert it to an img element that can be used for inference. Moreover, the execution of the app() is disabled.

Finally, We have to add some code the app() function for the prediction container that was previously added in index.html.

document.getElementById('prediction-container').innerText = `
This image is a ${result[0].className} with a probability of ${result[0].probability.toFixed(2)}
  `;

The next image is showing and example of a browser running the complete code with the live server extension in VSCODE. I also have the same code running in replit.com with the same sucessful results.

Thats all folks. I hope you enjoy as much as i do with this application that can run in any device that supports Javascript. From your iphone(ios), android to your tablet or computer. I think, any modern device that is connected to internet.