Using Javascript for Machine Learning with ML5.js
I have been Experimenting with ML5.js for sometime now, I would Like to share my leanings with the community.
ML⁵.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.jswith no other external dependencies.So, It can be compared to Keras. ML⁵.js is built over TensorFlow.jsand it uses the functionality of TensorFlow.jsat the backend but makes life easier for people who are new to Machine Learning arena.
ML⁵.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 ML⁵.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.
Getting Started with ML⁵.js
We can use ML⁵.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..
Please Consider watching this Video for Detailed explanation on ML5.js :-
Promises and Callbacks
ML⁵.js supports both error-first callbacks and Promises in all methods.
Using Callbacks
ML⁵.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:
// Pass a callback function to constructor
const classifier = ml5.imageClassifier('MobileNet', function(err, model) {
console.log('Model Loaded!');
}
// Make a prediction with the selected image and pass a callback function with two arguments
classifier.predict(image, function(err, results) {
// Check for errors. If no errors, then do something with the results
});
Error first callbacks is a convention common to many JavaScript libraries that is implemented in ML⁵.js. The language JavaScript itself does not enforce this pattern. Before implementation, we need to understand that most ML⁵.js methods and functions are asynchronous ( because machine learning models can take significant amounts of time to process inputs and generate outputs!).
Using Promises
ML⁵.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:
// No callback needs to be passed to use Promises.
ml5.imageClassifier('MobileNet')
.then(classifier => classifier.predict(image))
.then(results => {
// Do something with the results
});
Image Classification Using ML⁵.js - An Example Casestudy
imageClassifier()
ML⁵.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 ML⁵.js library accesses these model from the cloud.
Let us build a concrete example:-
We will use the p5 Library along with ML⁵.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 ML⁵.js.
Before we start with the Javascript part,We will need to host a local server using NodeJS.
Below is the Code:-
let express = require("express");
let app = express();
app.use(function(req, res, next){
console.log(`${new Date()} - ${req.method} reqest for ${req.url}`);
next();
});
app.use(express.static("../local"));
app.listen(8081, function(){
console.log("Serving at 8081")
});
After the Local server is Successfully up and Running, We can start off with the coding of HTML and JS files.
Index.html
<html>
<head>
<!-- importing p5 library into the project -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<!-- importing ML5 library into the project -->
<script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js"></script>
<!-- importing p5 addons library into the project -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
<!-- importing main.js into the project -->
<script src="./main.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
main.js
//initialization of the model object
let mobileNet;
//setup function is the Startup function in P5
function setup() {
//create canvas on the page
createCanvas(400,300);
//initialize the image in a variable
img_dog=createImg('./dog.jpg',imageReady);
//hide the image from displaying it on the Page
img_dog.hide();
//initialize the mobilenet object with a callback
mobileNet= ml5.imageClassifier('MobileNet',ModelLoaded);
}
//callback function indicating the image is ready and is Displayed on the Canvas
function imageReady() {
//Displaying the image on the canvas
image(img_dog,0,0,400,300);
}
//callback function for when the model is ready for prediction
function ModelLoaded() {
console.log('Model is ready');
//predicting the image after the Image and Model is Ready, Its again need a callback because prediction takes time
mobileNet.predict(img_dog,result)
}
//callback function to get the results
function result(err,res) {
//check for errors
if(err)
{
//log the error if any
console.error(err)
}
else
{
//log the result
console.log(res);
//get the label from the JSON result
let label = res[0].className;
//get the probablity from the JSON result
let prob = res[0].probability;
//creation of DOM and printing the label and probability
fill(0);
createP(label);
createP(prob);
}
}
That’s it..We have Successfully Implemented a Image classifier using ML⁵.js.
You can go to http://localhost:8081/index.html and check the results. The Screenshot is as below :-
ScreenShot of WebAPP
Note : This above example was not focused on UI rather it was focused basically on getting the Basics of ML⁵.jsclear**. UI can be improved and there is no limit to UI.**
Please Consider watching this Video for Detailed explanation on Image Classification using ML⁵.js :-
Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk
0 comentarios:
Publicar un comentario