School Supplies Recognition

School Supplies Recognition is designed to help children to find thanks to AI the name of an accessory. It will automatically identify accessory. For example, if you are at home you can easily find the name of accessory who are near to you. Basically, you will update from your computer a photo and the AI will tell you the name of the accessory.

But how does it work ?

To build the AI, we will use a JavaScript machine learning library called ML5 which is extremely easy to use and comes preloaded with several image classifier models like MobileNet, DarkNet, and DoodleNet. Specificly, we will use the imageClassifer() function.

Create a new glitch project.
First of all, you need to make reference to the library in the head of your index.html file :
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js" defer></script>

Now, you need to create a .js file.
We will use the MobileNet image classification model which has been “trained on a database of approximately 15 million images” as we can found in ml5 documentation. In your .js file, you will add the following code:
const { ml5 } = window; const classifier = ml5.imageClassifier("MobileNet", console.log);

Next, we simply use the classify function on classifier, as the name suggests, to classify the image with the following code: const result = document.querySelector(".result"); const image = document.querySelector(".image"); async function classifyImage() { const results = await classifier.classify(image); result.innerText = "This accessory is " + results[0].label; }
The classify function give an array of objects with a confidence between 0 and 1. To simplify, we will take the first result.

Now, we will add the following code in your index.html in order to upload the image:
<input type="file" accept="image/*" onchange="handleUpload(this.files)"/>

Finally, we will add the handleUpload(files) function to replace image.src by the image that we upload.
function handleUpload(files) { image.src = URL.createObjectURL(files[0]); setTimeout(classifyImage, 50); }