Machine Learning in the Browser using TensorFlow.js๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Machine Learning in the Browser using TensorFlow.js๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Machine Learning in the Browser using TensorFlow.js - TensorFlow.js appeared and allows you to do ML/DL in JavaScript, without having to use server-side applications. You can use it to define, train and run machine learning models entirely in the browser and a high-level layers API.๐ŸŒŸ๐ŸŒŸ๐ŸŒŸ๐ŸŒŸ๐ŸŒŸ

Machine Learning in the Browser using TensorFlow.js - TensorFlow.js appeared and allows you to do ML/DL in JavaScript, without having to use server-side applications. You can use it to define, train and run machine learning models entirely in the browser and a high-level layers API.

I have been using Python for creating and training my Machine Learning Models which requires setting up quiet a few things(I mostly use Google Colab though). Currently, I am learning Machine Learning and web development along side Android App development.

If you are also into Deep Learning then you must have done Basic Linear regression and the MNIST classification challenge which is the basic problem in Computer Vision. So when I learned about TensorFlow Lite it inspired me to make an app which can utilize the features of Android Smartphone, so I created this basic MNIST handwritten digits classification App.

Then I thought It would be great to do such things in something which is widely available, which requires Less/ no setup from user side. For this, What can be better than a browser which is available on all modern PCโ€™s, Smartphones, Tablets, and it also allows JavaScript in which we can Back-propagate. The ML/ DL things were done by utilizing APIs which means an API was developed in a framework which sits at a server. The server response to the request in JavaScript made by the client.

1. Bursting the Jargon bubbles โ€” Deep Learning> 2. How Can We Improve the Quality of Our Data?> *3. How to train a neural network to code by itself ?> *4. Machine Learning using Logistic Regression in Python with Code In 2017 deeplearn.js started which aimed for Deep Learning in the browser using JavaScript, but the main concern was Speed. As you know how GPUs can increase the speed in Deep Learning. For that WebGL came to rescue. It enabled running JavaScript Code to run on GPU. Later deeplearn.js merged into TensorFlow which became TensorFlow.js in 2018.

TensorFlow.js* is a library for developing and training ML models in JavaScript, and deploying in browser or on Node.js*

Check this Neural Network Playground made in JavaScript.

Importing The module:

  1. Using the script tag
<html>
      <head>
        <!-- Importing Tensorflow 
            https://www.tensorflow.org/js/tutorials/setup
        -->

        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
      </head>
      <body>
        <p>Hello</p>
      </body>
    </html>

importing tensorflow.js using script

  1. There are basically two ways to get it into your project
arn add @tensorflow/tfjs


npm install @tensorflow/tfjs

install tensorflow js into your system

import * as tf from '@tensorflow/tfjs';

add this line to your main.js file

ML in Browser

So How good is that?!

It allows to Run Machine Learning Models entirely in the browser. You can train them using live examples, load the pre-trained models and run Inference on them. On userโ€™s side, There is no need to install any drivers or libraries, just open the browser and you are good to go.

GPU

TensorFlow.js Runtime

One more advantage is that TensorFlow.js can utilize WebGL to run on an underlying GPU whenever itโ€™s available. So we can use GPU of a mobile device or a gaming PC just in the browser. In mobile phones, through browser your model can take advantage of various sensorsโ€™ data.

Privacy

One more Thing, All the data stays in the userโ€™s device, no need to send data to servers for low-latency inference. Which means It is useful for applications where privacy matters!

TensorFlow.js has a very good list of API s.

Lets Code

Letโ€™s start with a simple web page

<!DOCTYPE html>
    <html>
        <head>
            <!-- Load TFJS
                 loaded from https://github.com/tensorflow/tfjs -->        
            <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>

            <title>Hello TFJS</title>
        </head>
      <body>
        <script>
        //Code for JS below  
        </script>  
      </body>
     </html>

loading TensorFlow.js using script

โ€˜tfโ€™ is available on the index-page because of the script tag above. we can reference tensorflow as tf.

const model = tf.sequential();

We need to define our model, which tf.sequential() returns, you may find this similar to Keras API which is standardized in TF 2.0. Keras is like a wrapper on top of TensorFlow which makes it easy to define, train, infer, and training of simple models(Sequential as well as Functional APIs).

Now letโ€™s add some layers in the model. Here we will try to do a simple linear regression using a neural net consisting of one hidden layer.

model.add(tf.layers.dense({units: 1, inputShape: [1]}));


    // Prepare the model for training: Specify the loss and the optimizer.
    model.compile({
      loss: 'meanSquaredError', 
      optimizer: 'sgd', 
      metrics: ['mse']
    });
    const xs = tf.tensor1d([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [10, 1]);
    //y=3*x-1
    const xs = tf.tensor1d([2, 5, 8, 11, 14, 17, 20, 23, 26, 27], [10, 1]);

Adding layers, compilng

Layers

Here, we have added a Dense layer(Fully connected) with only single neuron. Which takes only single number(like Scaler) for prediction and perform inference on it outputting a number which should be close to 3*(input)-1.

Compiling

The layers API supports all of the Keras layers (including Dense, CNN, LSTM, and so on). Then we have to say the model to use which Optimization technique and a Loss function. We can give metric as a parameter is we want.

Data

Tensor is the basic term used for multi-dimensional arrays. Here we have 10x1, 1-D Tensor(Array) as xs(input) and a 10x1, 1-D Tensor as their respective outputs. we have to learn mapping between these two using our model. (Neural nets can be seen as โ€˜Universal Function Estimatorsโ€™!). An image can be represented as 2-D Tensor(Matrix) in gray scale, and 3-D in case of RGB channels(HeightWidthChannels). ConvNets will be explained in future.

Now, Lets Learn Mapping

await model.fit(xs, ys);
    // model.fit(xs, ys, epochs=100)


    model.predict(tf.tensor1d([6], [1, 1])).print();

We can train the model using model.fit(x, y), which try to learn mapping between x and y. Epoch is the parameter which says how many times to train over entire data set. It defines the total number of Forward propagate + Backward Propagate.

Predict for Future

model.predict(Tensor) do a forward pass and predicts using the given input as a Tensor of same dimension of X at the time of training. the print function prints the output on the console.

await keyword makes browser wait until the process finishes. You need to put await in an async function. just put the code inside an await function and run. It will be shown later in the article.

Full Code

<!DOCTYPE html>
    <html>
        <head>
                <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
        </head>
        <body>
            <p id="prediction">Prediction(100):  </p>
            <script>
                async function run(){
                const model=tf.sequential();
                model.add(
                    tf.layers.dense({
                        units:1,
                        inputShape:[1],
                        bias: true
                    })
                );

                model.compile({
                    loss:'meanSquaredError',
                    optimizer: 'sgd',
                    metrics: ['mse']
                });

                const xs = tf.tensor1d([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
                const ys = tf.tensor1d([2, 5, 8, 12, 14, 18, 21, 23, 26, 29]);

                await model.fit(xs, ys, {epochs:100});
                document.getElementById('prediction').innerText+=
                model.predict(tf.tensor1d([100])).dataSync();

                }
                run();

            </script>
        </body>
    </html>

Full code. You may need internet connection for script in the head tags

Save this as a .html file and open it in the browser.

What can you do with TensorFlow.js?

If youโ€™re developing with TensorFlow.js, here are three workflows you can consider.

  • *You can import an existing, pre-trained model for inference. *If you have an existing TensorFlow or Keras model youโ€™ve previously trained offline, you can convert into TensorFlow.js format, and load it into the browser for inference.
  • *You can re-train an imported model. *As in the Pac-Man demo above, you can use transfer learning to augment an existing model trained offline using a small amount of data collected in the browser using a technique called Image Retraining. This is one way to train an accurate model quickly, using only a small amount of data.
  • *Author models directly in browser. *You can also use TensorFlow.js to define, train, and run models entirely in the browser using Javascript and a high-level layers API. If youโ€™re familiar with Keras, the high-level layers API should feel familiar.

I have tried to implement something like this but with more flexibility.

machine-learning tensorflow

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What is Supervised Machine Learning

What is neuron analysis of a machine? Learn machine learning by designing Robotics algorithm. Click here for best machine learning course models with AI

Pros and Cons of Machine Learning Language

AI, Machine learning, as its title defines, is involved as a process to make the machine operate a task automatically to know more join CETPA

How To Get Started With Machine Learning With The Right Mindset

You got intrigued by the machine learning world and wanted to get started as soon as possible, read all the articles, watched all the videos, but still isnโ€™t sure about where to start, welcome to the club.

What is Machine learning and Why is it Important?

Machine learning is quite an exciting field to study and rightly so. It is all around us in this modern world. From Facebookโ€™s feed to Google Maps for navigation, machine learning finds its application in almost every aspect of our lives. It is quite frightening and interesting to think of how our lives would have been without the use of machine learning. That is why it becomes quite important to understand what is machine learning, its applications and importance.

Machine Learning Guide Full Book PDF

Machine Learning is an utilization of Artificial Intelligence (AI) that provides frameworks the capacity to naturally absorb and improve as a matter of fact without being expressly modified. AI centers round the improvement of PC programs which will get to information and use it learn for themselves.The way toward learning starts with perceptions or information, for instance , models, direct understanding, or guidance, so on look for designs in information and choose better choices afterward hooked in to the models that we give. The essential point is to allow the PCs adapt consequently without human intercession or help and modify activities as needs be.