Video.

7263 of my baking.

Your own color.

Classified with Tensorflow Digest.

Previous video Previously on making one color classifier Intense photos.

Yes, I worked in the model dot fit function.

So I'm fitting the model according to my training data with these options.

Now, what I want to do is I want to be able to basically see an animation graphing the lost function while it's doing the training.

So right now, I just get a report when it's done.

So there's a few steps that I want to take to do this.

The first step that I want to do is I actually want to move this into a separate function.

So I'm gonna just write a function.

I'm gonna just make it a global function called train.

Who is that?

Nice train.

Oh, uh, I'm gonna put my old outfit there.

Then I'm gonna call train here.

So that's everyone.

And let's let so And I'm gonna put the options here in this function, and I'm gonna just go back to two box and I'm gonna run this o x isn't not to find Oh, boy.

I did all sorts of goofy stuff here.

So let's, uh, let's make these global variables exes and wise I'm gonna need to do again.

Just could use some re factoring.

But now it's trading and jewelry box Done.

We can see the loss functions right, But still, I don't have an animation.

So what I want to do is I want this to be an asynchronous function.

I want this function to be in a single dysfunction to happen and let things keep going.

And guess what.

I have a video series about a do that with the key word a sink.

And then if I say ace, if I make a function a sink, I can use the keyword await meaning this function will wait for model that fit to finish before it's done.

And it returns a promise, by the way, um, so I can actually take this now I could say would turn await, And then I can put my then up here because it's gonna return that same promise.

But it will happen.

A synchronously meaning it will.

The code up here will be allowed to move on.

Well, this is happening in the background in theory, but I've got to do more here.

It's the same behavior.

So why is it the thing?

Maybe well, I've set myself up for success, but I don't have success yet.

And the reason why is that?

Tensorflow dot Js He's using something called Web G L to do all of the calculations, and it's taking over basically your animation or drawing capabilities while you're fitting the model.

However, tensorflow dot Js comes with a function called Next Frame, which returns a promise that resolves when a request animation frame has been completed.

It's simply a sugar method so that users can do the following await TF next frame.

So what I can actually do is kind of trigger the animation letting through the draw loop go the p five Jess Draw.

Love is just using request animation frame itself by adding a weight TF next frame.

Somehow, in this a sink function.

So where do I add it?

So I have an idea.

I'm going to add something to this called callbacks so and I gotta spell callbacks correctly for this to work.

So let's go back to look at modeled outfit model dot fit and we can see that I'll look at this thesis is new as of like, listen, was looking in the wrong place.

But last night, when I was looking this up, it wasn't actually here.

These are optional callbacks that could be called during training.

For example, on trade begin on train end on a pop, begin on Epoch and on batch begin on batch end.

So let's just let's add on train begin on train end just for real quick.

So I'm gonna say I have a callback on train begin and this needs to be a function.

It's going.

My life's gonna be easier if I just use this.

Yes.

Ah, six Aargh notation.

Um and then I'm gonna have another callback called on train end and I must say, training complete.

So I'm gonna just add these to call back.

So these air functions that are going to be executed during the training process Let's see if I did that right.

Training start and training complete, and I see the results wonderful.

Let's try a different call back.

Let's try on e pock end and on e puck and well, it takes two arguments.

I'm looking over here on this computer because I have some notes there, which I don't typically do, but it's the documentation here doesn't?

Actually, if we look here, it's not telling you what the arguments are for these callback functions.

But I looked them up.

And so the arguments are the number of the box.

So I could say num and then a log, which is like a report.

So I'm gonna say numb and logs and then what I can do.

So what I'm gonna do is I'm gonna do console.

I'm gonna write a function here with multiple lines of code.

I'm gonna say, console log, iPAQ numb.

And then I'm gonna say console log loss logs dot loss loss.

So there's a property of loss that's in that logs object.

So these are the arguments do every time it finishes an epoch.

So I'm gonna now give it 10 epochs.

Let's see what happens if I add that call back.

All right, Depok 01234 Look at that.

So I am now getting I'm getting a call back for every one of those individual box and we could see the loss going down.

And then, of course, we see all of the lost values when we're done, if I want to draw something at the end of each Popeye won't allow the animation to proceed.

I can go and use that function.

TF next frame.

It's what's TF next frame, which allows me to which allow this or unlock the drawing thread and on and let let draw update itself.

So I'm gonna go and I'm gonna say, await TF next frame right here at the end of each epoch.

And then this is also in a sink function.

So this now has to be an A sink function as well.

It's not gonna allow me to do that.

I think so, yes.

Okay, let's try this.

Oh, yeah, Look, it's drawing.

Now.

Let's actually add an animation.

So let's do something like stroke to 55 stroke.

Wait for line.

A frame count module ISS with zero frame count module ISS with heights.

I just want to draw a line that is that is moving across.

So, for example, if I don't bother calling this train function at all, we can see here.

I have an animation that's running.

Okay, so now let's call the train function and see if that animation runs waiting, waiting, waiting, waiting, waiting, waiting.

Let's get to keep a zero.

Look at it so the animation is going, but it's only able to draw once at the end of each epoch.

So while it's training, if I want to let it unlock that drawing more often, maybe a different call back would work better.

And, in fact, one something that Tentacle Digest is doing behind the scenes, Um, and modeled outfit.

Sorry is in the callbacks, right?

It's actually batch ing the data.

So I have 5600 data points.

It's actually running the Grady into sent algorithm in batches.

That's what stochastic read descent means.

And there are also on batch begin on batch ends.

And I could sort of specify the batch size.

I'm letting it use a default.

So what I actually think that I want to use it's gonna be a little It doesn't batch pretty quickly.

A full epoch takes quite a bit of time, so I could actually do on batch end.

What I'm gonna do here is I'm gonna add one more call back on batch end, and I'm gonna make this the a sink one So it also has a batch NUM number and a number of logs.

So it's It's like iPAQ end.

But I'm gonna put the await next frame in there.

This one no longer needs to be in a sink function.

So this should unlock the animation much more quickly because it lets it draw every at the end of every batch.

So let's go to this now and we should see.

Yeah, look at this.

So the animation is running just fine, and we should see I got a little glitch there when I got to the end of the park.

Zero.

Let's see if it does that again.

I don't know what.

So the first epoch you must have had to do some copying onto the GPU.

I'm not sure why, but you can see the animation is no longer study stuttering from block to block.

Okay, so now we have it trading the model with an animation going.

Let's at least so what I really should do is grass, the loss function, and by the way, I can look at the lost function at the end of each batch so I can get a much more quickly updated lost function.

So I'm gonna leave that as an exercise to the viewer.

But I'm gonna Just What I'm gonna do is I'm gonna say, uh, let lost p on and I'm gonna create a paragraph element again.

I'm not really being thoughtful about design and interface year loss.

So what I'm gonna do here is it's just going to have a paragraph element that says loss in it.

And what I'm going to do is, instead of logging the loss of the console, I'm going to say lost p dot html And this is just the P five just Dom library.

You could use Native Job script of J Query.

I'm going to put this loss information into that paragraph element.

So now I have an animation going and then assumes that get to the end of the first epoch.

I have toe talk for a bit.

Here, I see the lost function.

So now I'm training and getting a report of the lost function.

So for you in the next video, what I'm gonna add is inference or prediction.

I'm gonna allow the user with sliders to specify a color and have the label return to me and what I would say that you as an exercise and see what happens if you can query the loss function with the patches on, graph it over time and see.

See, that would be an exercise to you as the viewer on.

And I'm gonna publish a get hub Repo with this finished project so you can look for the clothes Very confusing.

But look for the code.

It will be linked in the description in two different places.

They'll be the code that matches exactly this video.

And then there will be the code that's in a separate get hub.

Repo.

That and someone in the future people will be contributing to that will have.

Maybe the graph it and other kind of designing things that people have from the community have added.

Okay, great.

So one more video to go, I think, and then some other ancillary ones that I've forgotten about, but one more core video to this tutorial series which is adding the prediction and I will see you.

If you're really gonna watch all of these, I will see you in the next video.