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.
Trending AI Articles:
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:
- Using the
scripttag
<html>
<head>
<!-- Importing Tensorflow
https://www.tensorflow.org/js/tutorials/setup
-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
</head>
<body>
<p>Hello</p>
</body>
</html>
importing tensorflow.js using script
- 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
