Ever wonder to which society a logo belongs? Search no more! With our IA Logo Detection, you'll find out in seconds!
Just grab your phone, take a picture with our application and see the answer!
This is made possible thanks to the ML5 javascript library. 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.
We're going to demonstrate how we can achieve such result. First we need to include the ml5 javascript library in our HTML page. We do it like so :
Now we need our user to be able to take a picture so we can process it. This is possible with simple html attributes for inputs.
By giving our input a unique ID in html, we can access it's value with javascript like so :
var image = document.getElementById("img-input").files[0];Now, we can give it to ML5, with javascript still. We need to define our image classifier from ml5, we use the MobileNet model and pass it our image.
const image = document.getElementById('img-input').files[0]; // The image we want to classify, it is an array so we need to specify the index
const result = document.getElementById('result'); // The result tag in the HTML
const probability = document.getElementById('probability'); // The probability tag in the HTML
// Initialize the Image Classifier method with MobileNet
ml5.imageClassifier('MobileNet')
.then(classifier => classifier.classify(image))
.then(results => {
result.innerText = results[0].label;
probability.innerText = results[0].confidence.toFixed(4);
});
The identification will then be displayed in our element with #result id.
Saddly we couldn't achieve a working example in glitch due to CORS issues on images. But with a propper server this is surely achievable.