Now, as we can see that there were many problems and use cases that includes Image Classification as part of the solution with various situation and condition, while there were many people still not used to with building solution in this kind of field like Artificial Intelligence, Machine Learning and even Deep Learning.
Basically there were many types of Machine Learning Implementation such as
1. Machine Learning in Devices
2. Machine Learning on the Web
3. Machine Learning on the Cloud
So in that case, since most problems and use cases fit perfectly with a solution that is available on the web, with a simple, lightweight and straight to the point solution where all people can enjoy, so in here i will show you how to build this Machine Learning on the Web!
Tech stack that we will use in here are :
1. Tensorflow Js (Of course :D)
A machine learning framework that can be used on the client side on the web.
2. MobileNet Pre-Trained — Tensorflow Model
A Basic Machine Learning model that has been created for us for Image Classification.
3. KNN Classifier — Tensorflow Model
A basic classifier that can be used to classify image in our project.
You can also build this on top of other tech stack framework such as Angular Js or React Js, and feel free to expand this project into something more amazing! especially to optimize its performance using AMP or Progressive Web Apps if possible 😉
The machine learning on the web that we will create, will be consisting all of these features :
1. Realtime classification image
2. Add new dataset library to a class
(for example only, currently we are using 3 classes : A, B, C)
3. Download all datasets to a *json file
4. Upload all datasets from a *json file
For the starter, i will explain how this works with a simple native web so that all people can understand and implement this easily to their existing environment.
There are 3 primary dependancies :
1. Tensorflow Js
2. Pre-trained model — MobileNet Model
3. Pre-trained model — KNN Classifier
Let’s put all the basic HTML Elements to run our project, there are :
1. Video : to show the webcam to classify the captured image
2. 3 Add Buttons : to add classes based on captured image
3. 1 Save Button : to download the captured datasets based on the class
4. 1 Load Button : to upload the saved datasets that has been downloaded
In here, I made this into 1 file so we can understand all the codes much easier to learn, this is the overview codes that we will create, there are 2 main functions in in the index.js file, which are :
Below will be the explanation for each function and code :
This function will be triggered once our web page is ready and has been loaded by the browser, the reason of using this is because to separate the loading time between processing the model and processing the web page.
This is our initial function that will trigger all the required codes once our page is ready
This function is a function to create a Classifier Model of KNN
This is used to create a MobileNet Model, this is the based Machine Learning model to recognize and classify the images based on the saved datasets
This is used to create the webcam function data from tensorflow js that we have imported, and make the video element in index.html become a Tensorflow Webcam, so Tensorflow Js can process the captured image from the Webcam.
In here, the code will get the existing datasets that the classifier has, and for each dataset it will be turned into an array and make it to a JSON format, after that it will create a url to download the file.
In here, the code will open the file explorer to select the JSON format file that consisting of our datasets, then the process goes reverse by parsing the tensor from the JSON file and set the datasets classifier into the model.
This function will only call the loadClassifier() function, the reason we are using this function is just in case we will add more action when the user is uploading the datasets.
This function will only call the saveClassifier() function, the same, just in case if we will add more actions when the user is saving the datasets from the model.
This function is used to add more classification to the classifier, which is the core of learning, we use this function to make our machine learning model to learn something new from the captured image in the webcam.
This is the function that will scan and classifying the the image from the webcam, it will keep update the webcam and shows the updated classification result.
Now let’s run this using the Local Server that we have in our machine, for reference we can use the Chrome Server in Google Chrome, you can find that in this link :
and after that locate the Chrome Server file into our project and go to the localhost that has been showed.