I was thinking of new JavaScript project ideas I could do and thought it would be really neat to try out TensorFlow.js. Every time I went to Google I/O, that is what got me most excited. So I headed over to TensowFlow.js  and found out about ml5.js which has pre-trained models. I thought this would be a good way to ease into TensorFlow.js.

For my first project I wanted to try something simple, so I decided to create a ml5.js image classifier. You can upload an image to it, and the ml5.js image classifier will classify the image for you and give you a percentage confidence level of the image. I am using the MobileNet pre-trained model for the ml5.js image classifier.

HTML

To set up the HTML, I added in a link needed to run ml5.js. I also added in Google Font and Bootstrap links for styling. Inside the body, I added an input element to be used to upload the image that will be classified. The input element is linked to imageUpload function using onchange. I created a div with an id of a gallery, which I will use to display the photo the user uploads. The gallery contains a placeholder for the user to upload an image. The gallery also contains blank paragraph tags which will be used to house the image’s classified name – using an id item, and the confidence level the pre-trained MobileNet model has for the image – using an id of confidence.

Copy to Clipboard

CSS

I wanted the page to look like someone was pinning up their own photo on a bulletin board. To do this, I added in some CSS to give the page a wood background. I wanted the photo displayed to look like a polaroid so I added in some padding and shadows behind the image. I also added in CSS to rotate the photo, and I used permanent marker font from Google Fonts to display underneath the photo. I wanted the top heading on the page to look like a folded paper corner so I added in CSS to make it look folded.

Copy to Clipboard

JavaScript

I first initialized the imageClassifier method with the MobileNet pre-trained model. I then grabbed the elements image, item, confidence and gallery by using document.getElementById. I created an async function called getResults that waits until the image classifier returns its results in the form of an array. I then grabbed the first item of the results array – the label and the confidence level and attached those to my html elements. Lastly, I created a function called imageUpload. Upon uploading of the image, I grab the image location and call the getResults function to classify the image.

Copy to Clipboard