Deep Learning using ConvNetJS with JavaScript

March 15, 2018 0 Comments

Deep Learning using ConvNetJS with JavaScript

 

 

Deep learning is kind of a booming area in Computer Science these days. From Google to Facebook, from Siri to Cortana, from Apple's revolutionary products of 2017 to Tesla motors, all of them have two things in common. One, their popularity and second, deep learning. All of the above-mentioned technologies and companies are using deep learning. Therefore, in this article, I shall talk specifically about the one top-notch library of deep learning using JavaScript. The name of this library, yeah you have guessed it right from this post's title, is ConvNetJS.

What is ConvNetJS

According to the official page of ConvNetJS:

*ConvNetJS is a Javascript library for training Deep Learning models (Neural Networks) entirely in your browser. Open a tab and you're training. No software requirements, no compilers, no installations, no GPUs, no sweat.

As you can see, ConvNetJS uses JavaScript as its core to run Deep Learning models, and that too in your personal, favorite browsers.

SetUp ConvNetJS for Browsers(JavaScript)

First and the foremost step is to download the dependencies and the JavaScript library of ConvNetJs.

Step 1: Download the JavaScript library of ConvNetJS. The link to the file is: https://cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js

Just copy the text of the file, and save it in a file convnet-min.js. Make sure that the extension of the file is .js.

Step 2: In the index.html file, you should add the script to establish the relation of HTML file to the JavaScript file that you have downloaded in the Step 1.

First make the HTML file, and write the basic structure of HTML as follow:

<!DOCTYPE html> <head> </head> <body> </body>
</html>

Now let us add a slight CSS to the page:

<!DOCTYPE html> <head> <title> demo </title> <!-- CSS --> <style> body { background-color: #FFF; </style> </head> <body> </body> </html>

Now let us add ConvNetJS library in the above code:

<!DOCTYPE html> <head> <title> demo </title> <!-- CSS --> <style> body { background-color: #FFF; } </style> <script src="convnet-min.js"> </script </head> <body> </body> </html>

Now that we have added the ConvNetJS library into our code. It is time to write a JavaScript code to get the entry point. From where the code will start executing upon being invoked from the body, which we shall discuss later in this article. The JavaScript code would look like:

<!DOCTYPE html> <head> <title> demo </title> <!-- CSS --> <style> body { background-color: #FFF; } </style> <script src="convnet-min.js"> </script <script type="text/javascript"> function periodic() { var d = document.getElementById('egdiv'); d.innerHTML = 'Random number: '+ Math.random() } var net; function start() { net = new convnetjs.Net(); setInterval(periodic, 1000); } </script> </head> <body> </body> </html>

Step 3: Add the attribute to the body tag in order to start and setup the ConvNetJS. The code will look like this:

<!DOCTYPE html> <head> <title> demo </title> <!-- CSS --> <style> body { background-color: #FFF; } </style> <script src="convnet-min.js"> </script <script type="text/javascript"> function periodic() { var d = document.getElementById('egdiv'); d.innerHTML = 'Random number: '+ Math.random() } var net; function start() { net = new convnetjs.Net(); setInterval(periodic, 1000); } </script> </head> <body onload="start()"> <div id="egdiv"> </div> </body> </html>

That is it! If you run this HTML file in your browser, and you see Random Numbers on the browser, it means ConvNetJS is setup successful. Do check the console of the browser to check if you have any errors or not.

Now that you have setup the library successful, you can use many algorithms of deep-learning in the start function after net = new convnetjs.Net();, and if you need something to run periodically then use the periodic function.

For more details and setting up different models of deep learning, go to the official website of ConvNetJS, which is https://cs.stanford.edu/people/karpathy/convnetjs/index.html.

I have laid down the ground for you to play! Now you should utilize it to make or test your next best deep learning algorithm in browsers. That's it for this article!


Tag cloud