Animal Recognization

Animal recognization is designed to help people to find thanks to AI the name of an animal. It will automatically identify animals. This project is dedicated to nature lovers as well as to the novice. For example, if you are in forest or in an animal safari you can easily find the name of animals who are near to you. Basically, you will update from your computer a photo and the AI will tell you the name of the animal.

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 animal 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); }