Machine Learning in JavaScript with TensorFlow.js

Training a Model with Teachable Machine

Machine Learning in JavaScript with TensorFlow.js

Check out a free preview of the full Machine Learning in JavaScript with TensorFlow.js course

The "Training a Model with Teachable Machine" Lesson is part of the full, Machine Learning in JavaScript with TensorFlow.js course featured in this preview video. Here's what you'd learn in this lesson:

Charlie uses Teachable Machine to train an image recognition model to determine if a user tilts their head to the left or right. The model is downloaded and added to the project-2 files.


Transcript from the "Training a Model with Teachable Machine" Lesson

>> We're gonna get started on the actual project two that's gonna cover how to do transfer learning in TensorFlow.js. So as I've said before, we're gonna start with the maybe easier way to get started with this relatively quickly and then we're going to try to actually implement it kind of almost from scratch.

So if you start by going to, you should arrive on this homepage here. And then if you click on the Get Started, you have the option between the three different types of model that you want to retrain. We're gonna use the image project but I can talk a bit later.

I've also used the audio project, before. I haven't used post project but that could be, cool as well. But for our specific project number two here, we're going to click on image project. And don't really worry like we're gonna pick the standard image model because we're using browser.

If you were working with macro controllers such as like an Arduino, you probably would want the embedded image model because they are a lot smaller. So they can run on something like an Arduino. And I can talk about that a little bit after as well. But here because we're in the browser, we're going to run the standard image mode.

And you should be on this page here that will allow us to create a custom model and then export it. So in terms of classes, to get started, we're just gonna train two different labels. So I'm gonna do the same thing that I did before with like tilting right and left.

You can do whatever you want if you want to do that I don't know right hand left hand like whatever, as long as you remember later maybe what labels you actually used. But if I just use the label right here, so here what you're editing is the name of your label that what you're gonna get later as a prediction from your model, and I'm going to enable the webcam.

You should be seeing your camera feed. And here you have some settings, I rarely change them. They're just the frame per seconds. Here you have just a UI thing that you want to hold it to record. And I think if you don't, it will just always record. But I don't know, I just keep it simple.

And there's a delay of two seconds. It's like every two seconds, it just snaps a picture. And a duration six seconds, I think you can maybe record the maximum of six seconds. I'm not sure because here it's like, seemed to kind of be disabled. I think it actually is faster cuz when I was showing you before, if you hold the button, it just like text snapshots way more often than two seconds.

So I think that if you, it looks like they don't let you edit that anymore, but at the time you could, if you wanted.
>> Disable the hold to record.
>> Okay, and that will be, okay, right. So that then, okay. So maybe you hold and then it records too, and then it breaks and then you can, yeah.

So we don't need to do that right now. You can play with that later on. For what we're recording, just holding and tilting, that should be enough. So I'm just gonna leave it, leave it on. So I'm just wanted to show you the settings. Okay, so personally, I'm gonna do, right, left.

So I'm gonna hold and I'm gonna remove my hand just to have my face on it. And it's like, hold, and let's just do 30 samples. I mean, 30 is fine for me. If you have more, don't worry about it. If it's like 28 or 32 or 53, it's okay.

Usually the more samples you have the better, but it's something that you can also play with as you go, because it also depends on what's in the behind in the background in the image, like here, I'm taking most of the space in the webcam feed. So it should be it should be okay.

But if there's more elements that are being snapshotted sometimes you might need more samples for the model to be able to find patterns in the images. So for the first sample, I have it here 30 image samples right as the label, and we can record another one. I'm gonna call it left, and I'm gonna do the same thing.

So again, enable the camera. I'm gonna tilt my head left, I'm gonna record. We'll have 29, 29 is fine as well. Again, as I was saying, you don't necessarily need the exact same number. But if one of them ends up being 100 and the other one is 20, it means that you're gonna feed more data about like left to the model than right, so it's going to impact the your prediction that you're gonna get or the accuracy.

Because again, you could think of it as when you learn something new, totally new, not a metronome audio like your brain you'll learn something new. If I'm repeating something only once to you versus ten times, you may be more likely to remember the thing that I told you ten times then the thing that you only learned once.

So it's kind of you can think of it the same way as well. So if you're roughly around the same number, it should be okay as well. And later on, if you play more with this, you'll also realize that it's easier to predict things if you have two labels or two images that are quite different.

So for example, if I have my hand just in front of my Facebook one and then it's just slightly to the right, it's not going to be as accurate as if I really do right and then left. So if the changes between your images are subtle, you'll probably want to record more images so that you can really find the pattern of your movement in there.

But for now, hopefully you've had the time to record two different samples. And the next thing that we need to do is only to click the train button and just do not close your tab so that it's going to go live in the browser. Training the model, and it should turn on right away.

So you can see here, okay, it's not too confused. If I do that it's like 100% to the right. If I do that 100% to the left, if I'm in the middle, you can see that it's like, I don't know, and he thinks it'd be more to the right then to the left.

So if I do this, sometimes so again, there's only 30 images that we trained. And there, we could do a lot more. But it means that if I want to build a website that is controlled by the gesture of my head, I'll know for example, if we wanted, I'm not gonna do that now, but we could add a class where my head is just in the center, so that then we will really have, let's say the full extent of the movements that I could have, but we're just gonna keep it like two for now, okay.

So if it is working well for you, we have a nice little button here that it's called export model. And what we're going to do, we're not going to upload it you have two options so you can upload it to the cloud on some Google Drive or you can download it.

So what we're gonna do, we're gonna download it so that we can have it, on our laptop. Sometimes if you just, want to be able to access it from anywhere or anything like that, or if you want to go to production and you don't want to have a heavy model in your folders or anything if you want to, if the model is a big one, and you don't want to upload it to GitHub, you can just share it in a link.

But for our purposes, we're going to select download, and we're going to download our model. It should be downloaded as a zip file that you can. I'll just double click, and if I go into my repo, I'm gonna switch or in my terminal. I'm gonna get out of project 1.

Go into project 2. Open the folder, and I'm just going to drag it in. So what you should have at this point in project 2 is some of the files that we're going to add content to. And here, we now have the folder with our model. I'm just going to rename it to my model.

And that will just be important, just because when we then import the model into our code, you just have to give the path to the folder. So you don't have to call it my model, you can leave it like this and just update the code later or call it just model.

But at this point, we have downloaded our model from Teachable Machine. So I'm just gonna close the tab, we don't need it anymore. And now we can move on to actually start writing our project to code.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now