Table of Contents
Image Classification Model helps you predict what is present in the image. If you are new to machine learning models or you don’t know in-depth about machine learning. Here you don’t need to worry about it because here we are going to create our object detection with our custom machine model in javascript using ML5.js and teachable machines. Creating the machine learning model with your data set of training data for your AI/ML project.
Step 1: (Create Model)
Go to a teachable machine site and create an image project for creating your image detection or image classification model.
Step 2: (Train data)
Now we need to create the categories and train the datasets. There are two categories(class) that will be default in teachable machines. I just simply created with those two categories if you want to more you can create it. After creating the categories you need to train the data by uploading the images respect to your class. Here I have trained the images for mobile and tv. After uploading the image click the train model button for training your model.
The accuracy depends on how much training data feeding to this model. I have just simply loaded a small amount of data.
Step 3: (Test the model)
After training the model completion. you need to test the model for how it gives the accuracy and how it detects the object from the image. So you need to test it by either webcam or upload it. Then, you can see the accuracy of your trained model.
Step 4: (Integrate it into your project)
After the model is trained and tested successfully you need to export your model. for that you need to click the export model button. The export popup will open there and choose the tesorflow.js or p5.js option. Download and extract the zipped file in my_model folder. Finally, integrate your model in the image classifier function of ml5.j.
Also Read: What’s the Average JavaScript Developer Salary in the US?
Source code:
Index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Classification Example</title> <script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js" type="text/javascript"></script> </head> <body> <h1>Image classification using MobileNet</h1> <p>The MobileNet model labeled this as <span id="result">...</span> with a confidence of <span id="probability">...</span>.</p> <img src="" id="output_image" width="400" height="400" accept="image/*" crossorigin="anonymous" alt="Upload image"> <form> <input type="file" id="file" onchange="detectImage()"> </form> <script src="sketch.js"> </script> </body> </html>
Sketch.js
let classifier;
let labels = ['mobile','tv'];
preLoad();
// Initialize the Image Classifier method with your // Custom model
function preLoad() {
classifier = ml5.imageClassifier('./my_model/model.json', modelLoaded);
}
function modelLoaded() {
console.log('Model Loaded!');
}
// predict the result after uploaded
function detectImage() {
var reader = new FileReader();
reader.onload = function () {
var output = document.getElementById('output_image');
output.src = reader.result;
classifier.classify(document.getElementById('output_image'), getResult);
}
reader.readAsDataURL(event.target.files[0]);
}
// result callback function
function getResult(err, results) {
alert(JSON.stringify(results));
alert("Predicted is :", labels[results[0].label]);
}
Code Explanation
Initialize your label as per you created class in the teachable machine. It will be in the metadata.json.
let labels = ['mobile','tv'];
Load your model by setting the path in the ml5.imageClassifier method. It will be loaded while your app loads or when you call the preload function in your app.
classifier = ml5.imageClassifier('./my_model/model.json', modelLoaded);
After that when you upload the image it will show the result in the alert box.
Conclusion
Finally, we have come to the conclusion. By using the pre-trained model for detecting the image it won’t help you sometime when your requirement of detecting objects is not matching. This blog will be helpful to you and enjoyed it. If I missed anything, you can comment below. Get the source code also available in GitHub.
Also Read: Top Open-Source JavaScript Frameworks for Front-End Web Development
