Introduction to ML5.js. A Beginner's Friendly Machine Learning... | by Akshay Lamba | Towards Data Science

This article is 1st part on ML5.js learning series, The complete series shall be available both on text readable forms on Medium and in video explanatory Form on my channel on YouTube. A Complete Playlist of Views are being updated.
ML5.js is a recently developed high level Library which aims to make machine learning approachable for a broad audience of artists, creative coders, and students. The Library is developed at the New York University and has been publicly released on July 2018.The library provides access to machine learning algorithms ,task and models in the browser, building on top of TensorFlow.js with no other external dependencies.So, It can be compared to Keras. ML5.js is built over TensorFlow.js and it uses the functionality of TensorFlow.js at the backend but makes life easier for people who are new to Machine Learning arena.
ML5.js is built with a Motive to simplify things out for beginners. We can compare this to Keras. The Motivation behind Keras was to make ML/DL in python so Simple that it can be used by Beginners. Similar is the case with ML5.js..
This is possible by making a wrapper around the Tensorflow.js library and use all the functionality at the backend. So Intuitively, It is an Easy to use API for TensorFlow.js.
We can use ML5.js by Referencing the latest version of it in our project, by just using a script tag in an HTML file as below:
 <html>    <head>      <title>Getting Started</title>      <script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js"></script>    </head>    <body>      <script>        // Your code will go here      </script>    </body>  </html>
That’s all! 💥
You are ready to go..
Pls Consider watching this Video for Detailed explanation on ML5.js :-
ML5.js supports both error-first callbacks and Promises in all methods.
ML5.js uses a pattern referred to as an error-first callback:
For example — if you are using the imageClassifier() method, you will need to construct it in the following way:
Error first callbacks is a convention common to many JavaScript libraries that is implemented in ML5.js. The language JavaScript itself does not enforce this pattern. Before implementation, we need to understand that most ML5.js methods and functions are asynchronous ( because machine learning models can take significant amounts of time to process inputs and generate outputs!).
ML5.js also supports Promises. If no callback is provided to any asynchronous function then a Promise is returned.
With Promises, the image classification example can be used in the following way:
ML5.js can use neural networks to recognize the content of images. ml5.imageClassifier() is a default method to create an object that classifies an image using a pre-trained models like MobileNet etc.
The ML5.js library accesses these model from the cloud.
Let us build a concrete example:-
We will use the p5 Library along with ML5.js. p5 is a Powerful yet simple library to use in Javascript.You can find more details here. You can always use Vanilla JavaScript or other frame works of your choice with ML5.js.
Before we start with the Javascript part,We will need to host a local server using NodeJS.
Below is the Code:-
After the Local server is Successfully up and Running, We can start off with the coding of HTML and JS files.
Index.html
main.js
That’s it..We have Successfully Implemented a Image classifier using ML5.js.
You can go to http://localhost:8081/index.html and check the results. The Screenshot is as below :-
Here is the Github Repo for the above code:-
github.com
Note : This Tutorials was not focused on UI rather it was focused basically on getting the Basics of ML5.js clear. UI can be improved and there is no limit to UI.
Using ML5.js for Image Classification is simple, In my next Article,We will Focus on Web Cam Videos Classification & other NLP jobs using ML5.js.
Pls Consider watching this Video for Detailed explanation on Image Classification using ML5.js :-
This is excellent for coders who are familiar with JavaScript & HTML and are trying to find their way in the ML/DL world!
It makes things a lot simpler for people coming from a non-ML/DL background, but who are looking to understand this field.It makes machine learning approachable for a broad audience of artists, creative coders, and students.
The use cases for this are many, and I personally think it’s something we need at the moment.
If you find my articles useful, you would also find my You Tube Channel on AI useful and interesting . Please Consider subscribing to my Channel
Enjoy AI. 😉
If you liked my article, please click the 👏 below And follow me on Medium & :
If you have any questions, please let me know in a comment below or Twitter. Subscribe to my YouTube Channel For More Tech videos : ADL .