Image Detector Project Setup

[00:00:00]
>> All right, well, welcome to the third and final part of this workshop, where we are going to create our own custom machine learning model. So, previously, we have used a pre-train model, where we just import and then feed it new data, and in a few lines of code, we get some predictions.

[00:00:18]
And then we moved on to transfer learning, where we are kind of combining a pre-trained model and adding our own examples and retraining a model on top of that. But now, we're going to kinda do everything from scratch. And not only are we gonna create our own model, we're also going to create our own data set that we're going to feed into that model.

[00:00:37]
And there's kind of two reasons for that. So, first of all, I kind of wanted you to maybe experience the pain of creating your own dataset, just because you'll have a better idea of how long it takes to actually create a data set that works. And you'll see, well, we won't create an asset that has thousands or millions of images because we won't have the time for that.

[00:00:58]
But we'll do maybe 40, 50, images each, cuz the model that we're gonna create is gonna be an image classification model with our own samples. And the second reason why I want people to build their own data set is because sometimes, if you end up doing that at work, even if you find a data set online that's open source, sometimes the license does not allow you to use it for commercial purposes.

[00:01:19]
So it's a good thing to kind of experience what it's like to actually build your own. And if you ended up doing image detection at work, you could use photos and things like that, but even then, taking pictures and labeling them and things like that, it does take time.

[00:01:34]
So in this particular project, we're going to work not with pictures, but with drawings that were going to draw ourselves. So if you navigate to the project three folder in the exercises folder of the repository, first of all, what we're gonna do is if you open your terminal, or sorry, not your code editor.

[00:01:56]
So just to explain a little bit what's going on in the, let's say the initial state of our application, let's run it. So if you go to a terminal and you run npm, run watch, it's just going to start a Python server on port 1234, so if we open then the browser on 1234, yeah.

[00:02:18]
Then just select the public folder, and you should end up on something like this. So we just have a simple page, image detector with a canvas here in the middle. And what we're gonna end up doing, is draw shapes like this, but at the moment, there's no interaction in the buttons, but there are three of them.

[00:02:37]
So the clear button is going to allow us to clear the Canvas every time that we draw a new shape. So at the moment, the functionality is not implemented, so if you click, nothing is happening. But then we'll have a Predict button here so that when our model is ready and we're actually loading it in this UI later on, we'll be able to draw a new shape, click predict, and it should not return us the label about prediction.

[00:03:00]
And then the download button here is going to actually download images locally. So we're going to do that a few times, we're going to pick two different shapes that we want. And then, change the name of these files so that then we'll use the name of the file size labels, and we'll work on getting all our data from our local files.

[00:03:19]
Then we'll create model, we'll train it, and then we'll use our custom model back in the UI. So first of all, let's implement the clear functionality so that then we can start to be able to clear the Canvas. So what I need to show you then, so here, if you look at the index.html file, we have a Canvas here and we'll have a div for the prediction that we won't use right away, we'll use when we import the model later on.

[00:03:48]
This, we don't need to worry about now that's for the next step as well, and here we have a few buttons. And what you should have here when you downloaded the repository is just the index.js, file, but let's add a script tag above it and import the utils file as well.

[00:04:05]
And I will show you what's in there, so if you just add a script tag with the source utils.js, and type module, then I'll go through what this file has. But again, it has just functions around handling drawing on the Canvas, cuz that's not necessarily directly related to TensorFlow.js, but I just wanted to kind of be able to get started.

[00:04:28]
So if we look at what's in there, so it's, if you have ever worked with Canvas before where you can draw on it, you might be familiar with it. It's not super important to really, really dive into this. But if we look at your Canvas, we have a an EventListener on mousedown, and then I just have a function where I'm getting basically the x and y coordinates of my drawings.

[00:04:53]
And I'm redrawing it as as I'm moving the mouse, and then mousemove. Same, so we don't necessarily have to really go into this, it's just the functionality to be able to draw on the Canvas. And then I just have a re-drow function. And again, this is just details function.