Machine Learning 101 for Javascript developers

Nowadays Machine learning is a common buzz in the software industry. Machine Learning (ML) is a system/application performing a task or taking a decision based on data only and without being explicitly defined by any program.

Confused! Let’s take an example. In this covid19 situation, cab companies (Uber, Ola) are insisting their drivers to wear masks all the time and they are ensuring scanning the driver face using the front camera. But how do an application identify that driver is wearing a mask or not?

Okay. The machine learning system already trained with a lot of images with-mask and without-mask faces where masks can be in different sizes or in different colors. Comparing driver image and old trained data, the system can calculate probability and based on probability, the system itself can make decisions whether the driver is wearing a mask or not.

A good ML system needs a lot of training data for accuracy.

In machine learning there are few terms that we should know:

Neural network

If we want to identify any image/pattern, we can train our program to find or group similar kinds of images/patterns by their data. In that case our program should work like a virtual brain that can identify or predict certain data based on previous data. In data science we call it the Neural network.

Machine learning model

Machine Learning model is a program that takes data as input and produces a prediction as an output.

There are three types of models

⦁ Pre-trained models where Neural network already trained with a lot of data sets
⦁ Re-train models where we can merge new sets of data with existing data and produce a prediction.
⦁ Last one is to train/define your own model with your own sets of data.

As I already mentioned, If you train your model with more relevant data, you will get more accurate predictions.

What is the advantage using machine learning in the browser?

Identify/Detect any image runtime in the browser only, no need to send the image to the server, which eventually requires more bandwidth and not recommended for mobile based web applications.

Today we’ll use a javascript library tensorflow.js to code our first machine learning application.

Wait! What is tensorflow.js?

TensorFlow.js is a Google powered JavaScript library for training and using machine learning models in the browser.

Using tensorflow.js I have created an application which can detect/predict the result of an animal/birds image by checking pre-trained data.

For image classification, I have used a pre-trained model MobileNet.
To Read images I have used JavaScript native image reader api and also used jquery for dom manipulation purposes.

First create a static file server using npm and http-server npm library.

npm install http-server -g

Now index html, I added styles.css for styling our application and script.js to write custom code to initialize machine learning models.

Also added jquery, mobilenet and last but not the least tensorflow.js as cdn using script tag.
In the index.html I have written some markup and js code to upload/drag-drop images.

Once Image is uploaded we are reading the image using File Reader api and calling a function imageDetect,
Where we are getting an image object , Here we need to create an object using the mobilenet library.

const model = await mobilenet.load();

Once our model is loaded we’ll get a status that our model is loaded or not, if model is loaded then we can pass our image object to mobilenet image classifier.

const predictions = await model.classify(img);

And it will return a prediction object including name and probability.

As the first key holds the most relevant result according to probability, so I simply print the first result from the prediction object. That’s all and check out the demo here. Also find some useful links below to get started with your machine learning journey.

  1. TensorFlow.js
  2. Tensorflow.js models
  3. Tensorflow playground
  4. Datasets
  5. MobileNet

Demo