Teachable Machine Tutorial: Bananameter

Hi! This is a tutorial for Teachable Machine, a web-based tool that makes creating machine learning models fast, easy, and accessible to everyone.

In this tutorial, I’m going to walk you through making a machine learning model to detect how ripe a banana is using images. You don’t have to use bananas for this — you can use any fruit that changes color, or really, any three different objects — but we had bananas handy.

There are also two other tutorials — one making a machine learning model using audio, and one using poses.

So to get started, I’ll go to Teachable Machine and open up an image project.

HOW TO TRAIN IT

A user interface with four boxes, one for each class: Too Early, Ripe, Too Late, No Banana.
A user interface with four boxes, one for each class: Too Early, Ripe, Too Late, No Banana.
A class for each thing I want to teach it.

Now that I have my classes, I’m going to give each class samples to learn from. In this case, those will just be images of the banana — so let’s start with a banana that’s “Too Early.”

Then, we’ll do the same with a ripe banana:

Holding a ripe banana up to the webcam, and recording frames to the “Ripe” class
Holding a ripe banana up to the webcam, and recording frames to the “Ripe” class

And a banana that’s a little past its prime:

Holding a browning banana up to the webcam, and recording frames to the “Too Late” class
Holding a browning banana up to the webcam, and recording frames to the “Too Late” class

And finally, an image with no banana at all. Notice that I’m also showing it my hand without a banana, so that it doesn’t only see hands in the classes with bananas and make a correlation that an image has to include a hand to be classified as ripe/etc.

Now that I have all of my classes ready, I can click train…

And, over on the right, preview if the model works!

THINGS TO TRY

Remember that to the computer, images are just numbers & patterns of pixels.

So you haven’t truly taught it what a banana is… we taught it that THIS — a yellow shape against a background, is labelled a ripe banana — it’s just pixels to the computer.

Images are just a buuuunch of pixels.

And because of this, there are lots of ways it can get confused. So, let’s look at a few:

Two Bananas

For example, if you hold up two bananas at the same time, the model never saw samples that looked like that while it was training, so it might be confused.

Different Backgrounds & Lighting

Or try evaluating your bananas on a different background, like a different color wall — does it still work?

On this new background, it gets some of the classes a little confused…

…so I’m going to add more samples to each class with the banana on the new background.

You can add more images of your bananas in different environments to make your model more robust, so that it can work on different backgrounds. I’ve added some more samples of my bananas on these backgrounds, so it’s a little better at recognizing now:

You could also try uploading a bunch of photos of bananas from the internet to get a more robust set of banana images, or collaborate on a dataset with folks in different places

Try to trick it!

Hold up a photo of a banana! Or a drawing of a banana! Or a toy that looks like a banana! See how the model responds to different images, and if you can figure out a way to train it so that it doesn’t get confused.

OTHER FUN FRUIT-RELATED CHALLENGES

WHAT CAN YOU DO WITH THIS?

For example, I exported this model and made this website that tells how ripe a banana is on Glitch. You can try out if you like, but your results may vary.

And one of our friends made this game that you can control with an image model from Teachable Machine.

You can learn more about using your models in the Teachable Machine FAQ here.

WHAT NOW?

If you want to try making your own model, get started at Teachable Machine.

Or, you can read about how to make a sound model to detect snaps, claps and whistles or how to make a pose model to detect which way you tilt your head.

Designer, Google Creative Lab, NYC http://barronwebster.com