Machine Learning in JavaScript
Machine Learning in JavaScript
Is it easier? difficult? or simply fun?
If you have tried Machine Learning before, you are probably thinking that there is a huge typo in the article’s title and that I meant to write Python or R in place of JavaScript.
And if you are a JavaScript developer, you probably know that since the creation of NodeJS, almost anything is possible in JavaScript. You can use React and Vue to build user interfaces, Node/Express for all the “serverside” stuff, and D3 for data visualization (another area that gets dominated by Python and R).
In this post, I will show you how to we can perform Machine Learning with JavaScript! We will start by defining what Machine Learning is, get a quick intro to TensorFlow and TensorFlow.js, and then build a very simple image classification application using React and ML5.js!
Machine Learning? What’s that?
Unless you have been living under a rock all this time, you have probably heard words such as Machine Learning (ML) and Artificial Intelligence (AI). Even if you are not a very science-oriented person, you have probably seen those Microsoft advertisements on TV and the Internet where Common talks about all the amazing stuff that Microsoft is doing.
The truth is, almost everyone has used Machine Learning and Artificial Intelligence at one point in their life. Scratch that, everyone uses ML and AI every day in their life. From asking Siri and Alexa to play some song to using navigation apps on the phone to get the quickest route to work, it’s all ML and AI.
But how do we define these two terms? Let’s focus on ML since it is the main topic of this article. In the simplest words, Machine Learning is:
A field of study that allows computer systems to do something without giving it any specific instructions to do so.
As a developer, you are to write code in a particular way. Your client or manager tells what they want the desired output to be, and you try to write some code that will get you that output. But in Machine Learning, you only know the problem that needs to be solved! You “teach” your computer a few things and then sit back and see what astounding results you get from the system!
The question to answer is: How do we do Machine Learning? Python programmers use packages like
scikit-learn and Google’s amazing TensorFlow to perform Machine Learning. But last year (2018), Google released the JavaScript version of TensorFlow elegantly called TensorFlow.js!
But why should one do Machine Learning in JavaScript? Well, first of all, the Python way of Machine Learning required developers to keep the Machine Learning code on the server, and then use JavaScript to allow users to access the models on the client. And here we come across a potential problem. If your machine learning model gets too popular and a lot of users want to access it, there is a good chance that your server can crash!
But if we use Machine Learning, not only are we staying the JavaScript environment for both Machine Learning code and the user interface code, the model will stay on the client-side itself! Also, Machine Learning models are mostly used by financial companies. So a client-side ML model would mean that your data stays private.
Let’s Write Some Code!
You now have some basic knowledge of ML, and why doing it in JavaScript can be a good idea. But ML is one of those things that you will understand better by trying it out. If you would like to read more about Machine Learning, check out this other post that I had written a while back:
In this section, we will build a Machine Learning app with React that can perform some very good image classification.
SideBar: The Machine Learning process consists of two steps: Training and Testing. Training involves giving a huge amount of data to the model, which the model will then process and recognize different patterns, which the model will then use to make future predictions.
Since we are building an image classification model, we would need to send thousands of images to the model to process before we can make any predictions. Images need to be relatable to each other in some way, and I honestly don’t have so many pictures (I am a shy person). Also, Machine Learning in JavaScript is still new to me. So as a shortcut, I am going to use one of the pre-trained models.
Before we can start coding, make sure that you have the following things installed on your system:
- Node — We will need this to install different packages
- Code Editor — Any good editor will do. I personally like to use VSCode
The next is to build a boilerplate React application. To do this, open a command terminal and run the following command:
$ npx create-react-app ml-in-js
This command will create a folder named
ml-in-js and build a start app in your system. Next, go back to your command terminal and run the following commands:$ cd ml-in-js
$ npm run start
The first command is pretty straightforward. The real magic happens in the second one. The
npm run start command creates a local development level of your system and automatically opens it on the browser like this:
This starter app has no idea what Machine Learning or Tensorflow is. To solve this issue, we need to install the Tensorflow.js package. For Python developers, you would need to do a
pip install tensorflow once on your system and be free to use the package anywhere and in project. But when it comes to JavaScript, you need to run the npm install command for every project.
But instead of installing Tensorflow.js (TFJS) library in the app, we will install another library called ML5.js. This library is like a better version of TFJS that makes it much easier for us to do Machine Learning on the client-side. So let’s install this library like this:
$ npm install --save ml5
If you want to make sure that the library was successfully installed, go to the
App.js file in the src folder and write the following code:import React, {Component} from 'react'; import * as ml5 from 'ml5';export default class App extends Component { render() { return ( <div> <h1>{ml5.version}</h1> </div> ) } }
If you go back to the browser, you will see a big 0.4.1 printed on the screen. This number can be a little different for you based on the latest version of ML5.js. As long as you see a number printed on the screen, you can rest assured that your ML5 library was successfully installed.
With that, we are done with the installation part. Now we need to create a function that can take in an image and classify it using a pre-trained model. To do this, write the following code inside the
App component:classifyImage = async () => {
const classifier = await ml5.imageClassifier('MobileNet')
this.setState({ready: true})
const image = document.getElementById("image")
classifier.predict(image, 1, (err, results) => {
this.setState({
predictionLabel: results[0].label,
predictionConfidence: results[0].confidence,
predicted: true
})
})
}
Here we have an asynchronous function called
classifyImage. Inside this function, we first define our Image Classifier by loading the MobileNet data as the training set. Once this classifier is ready, we set the ready state to true. Then, we select the image inserted by the user and pass it to the classfier and run the predict function. We save the highest prediction’s label and confidence level in the state object.
Our entire App.js file will look something like this:
Time to test the model. To do this, I will give the following image as to the app:
When I press on the
Classify button, the app runs the classifyImage function and after some time you will get the following result:The app is 63.99456858634949% sure that this is bucket
Not what I was expecting. The reason for this incorrect result can be a number of things. The most important of them is that the MobileNet is not the proper dataset to classify this image.
Let’s try some other image. Maybe an animal:
Clicking on the
Classify button again, and I get 🤞:The app is 90.23570418357849% sure that this is Border collie
Wow! 90% confidence that the image has a Border Collie, which is a type of Dog!
Wrapping Up
If you have stuck with me till now, then you have just done some Machine Learning in JavaScript! Go ahead and pat yourself on your back!
But you and I are still a long way from being ML experts. In this article, we did the test part of Machine Learning and used a pre-trained model. The real fun starts when you take your own raw data and try to use it to train your data.
That is what I am going to try to do now. So wish me luck! If I succeed then I will write my next article on it.
As always, I would like to thank you all for reading my long articles. I am still new to Machine Learning in JavaScript. So if you think I have made any mistake in this post, or if I could have done something differently, then please do comment about it.
You can take a look at the entire source code of the React App here:
Comments