Coding Challenge #106: XOR Problem with TensorFlow.js

oh hello welcome to a Cody challenge yeah I know what you're thinking I don't know what you're thinking I know what I'm thinking that looks like Cody challenge number 92 XOR which is probably one of the less interesting creative like sort of just technical coding challenge demonstrations that you've done why why why are you doing it again well Eric from the coding train community writes a nice explanation because I was before I started this having a real hang-up about this sometimes it's important when learning something new to base your exploration around an example which is fairly trivial and you understand intimately well so here's the thing I I'm learning something new I'll come back here and the thing that I am learning something new is this tension floaty a thing and wouldn't it be fun to make like play pac-man with it or the emoji scavenger hunt project or teachable machine or play a piano with it all these things all pose that oh my god we got it we got I want to get to that I could just sort of go there right now I will get there eventually but I'm trying to learn the basics of how the library works and I'm trying to step through this slowly so I will say that we're if you're watching this video right now where you are is not necessarily in the most beginner or friendly place because I'm working with tensorflow das natively to implement basically like a weird math problem it's not that weird of a problem actually but a very basic trivial math problem just to see how tensorflow Gs works that's what I'm trying to do with this coding challenge and about 20 or 30 minutes he'll be coding this coding challenges just look it's by like four hours in 72 minutes long which is why would I say 72 minutes cuz that's five hours and twelve minutes but I don't know but the trajectory that I'm on is I'm going to start doing some stuff inching my way towards hell let's actually use some data let's use some more data and maybe some images and so I've got a bunch of things that I'm stepping through and I'm trying to get to the point where I'm going to use this other machine learning library called ml five which at the time of this recording hasn't really officially been released yet but builds on top of tensorflow das thank you everyone who made floats wherever you are to try to create some more accessible interfaces to some of the algorithms and models that you things that you can do with tensor flow digest without having to do the level memory management and math operations stuff so all that is coming and I just took a lot of time to this coding job to say that to you so but as much as I kind of don't I haven't I'm not so sure but we're but it's a why is XOR so here's the thing this is why I want to need an example this is the first time I'm going to ever in any of my videos except for the other one that I made but this is the first time that I'm actually going to use the TF layers API to train to train a model with a data set to produce a certain output okay I did two tutorials about what the TF layers API is you could pause now and go and watch those and then come back here but in those videos they didn't actually do anything with TF layers just sort of talked through it typed out some code so the problem that I want to solve and apologies for explaining this probably for like the fifteenth time on this YouTube channel is very well known from machine learning X or because when the original perceptron was invented the single perceptron the model of an individual neuron that could receive inputs and generate an output it could not solve X or it just couldn't it's not a linearly separable problem and I've talked about that in other videos about why we need multi-layer perceptrons so the nice thing about XOR is I can diagram for you the the architecture of the model that we need to create there are two inputs there is one output so that the inputs to the XOR problem are true and false values so unlike a so if I made a little truth table and or XOR right I can have true and true true true false false true false false and and operation would only ever give me true when both are true false false false and or operation would only ever give me would gives me true if just one of is true true true true false can you even see that I can't see on my monitor but hopefully you can now X or the X 4 exclusive gives me true only if 1 is true they can't both be true only one so in that case I get false true true false and the idea of linearly separable comes up here because I can draw a line here to separate true from false I can draw a line here to separate true from false but here I could do this but I can't draw a single line to separate true from false we need a more sophisticated model with a hidden layer so the inputs are things like a 1 and a 0 feed forward into the hidden layer activate feed to the output and the output should be a 0 or a 1 because ultimately I'm going to visualize the output as grayscale values and I want to see number I want to see grayscale values all the way between 0 & 1 it's the same thing I did in the previous coding challenge if you if you're happened to have watched that one alright so now I actually I'm gonna also do something where I start from the code from the previous coding challenge and so we can see there's this idea of training data the inputs to the XOR problem are 0 0 gives me a 0 0 1 gives me a 1 1 0 gives me a 1 at 1 1 gives me a 0 this is the training data and in my previous version of this I used my own neural network library so in theory I'm gonna get rid of the idea of a learning rate slider just before we can add that back in later but let me get rid of the learning rate slider basically I want to do exactly the same thing the difference is I'm going to say neural network equals TF layers sequential and maybe I'll call this the model instead of neural network so the idea of this is going out here so the idea here is that I want to replace my neural network library with tensorflow yes and so this for me what what the usefulness of this video is a me learn I spent all this time trying to build my own rather sort of terrible normal Network JavaScript library and going through that was sort of helpful in thinking about how the stuff works now if I can translate that into attention flow dot yes I'm gonna things are gonna hopefully start to settle and make more sense into my brain okay so now we need to what then this constructor here said and let's just put this back to this this constructor here said would make a neural network with two inputs two hidden nodes and one output so I need to duplicate that idea here with PF layers so let's go to the 10th floor is API reference and we're gonna go all scroll down to TF layers and what I want to make is a dense layer TF layers dint a dense layer is a fully connected layer so what I'm going to do is I am going to say let hidden equal TF layers dense and then I can put inside there an object that has the parameters of how I want to configure that layer and so how do I want to configure it the two things that I want need really need to do is this is the hidden layer right I need to give it an input shape right he just say what's coming in what's coming in that's what this is here I need to say how many nodes it has that's the number of units and then I probably has a default one but I can specify an activation function and again I'm just gonna use sigmoid as this historical activation function that I've been using in all my videos to date I'm going to assume talk about softmax what that is as well as some other activation functions like lading which is maybe more commonly used okay by the way nobody pronounces that way put me so don't get confused alright so I want to say input shape I believe is just there's just two inputs I also want to have two units two notes and activation is going to be sigmoid so now I have created the hidden layer yay the other layer that I need to create is the output layer and so what am I know the output layer I don't need to provide an input shape because the input shape can be inferred if I add them sequentially the inputs are not a layer so for this first layer the hidden layer I've got to say how many there are but now once I'm creating this next layer it can just the input shape is going to be defined by what was before it so now I'm going to say we have to stop it at the sound effects by excellent and now I'm going to say let output equal TF layers dense and all I need to say is units one activation sigmoid okay then ought to do is say Model Model dot add hidden model dot add output okay so this is the model now one thing I need to do is I definitely need to import the tensorflow JS library which I happen to have from one of my previous examples so I'm going right now I only have I have the p5 libraries in my index.html plus my crazy a neural network thing and my actual code and sketch a yes someday maybe I'll use the fancy new imports and tech stuff let me just just have everything kind of line up let me add this in here so now TF digest should be there I should be able to go back and run this and not see any errors aha TF dot layers dot sequential is not a function so I probably just didn t have cut layers dot sequential the right thing you know I could go look I by the way I made an example oh it's just TF dot sequential okay so all I all I want to say is I just got that wrong it's a TF dot sequential so you know I could go look you know hopefully I would find this here at EF dot sequential yeah models creation there it is TF non-sequential so I just had that wrong okay let's try refreshing this yet again slider is not defined all right let me fix this learning rate issue 0.1 I just want the thing to run okay so it's going it's still working with the my neural network library not the new tension photo gs1 but let's keep stepping through so ah so what am I missing here so when I make a model this is now I've architected the model I've architected this particular architecture but I need to do another step I need to compile the model and I need to define the loss function and the optimizer basically I need to say like okay well this is how I'm going to determine how well the model is currently performing with the training data and testing data potentially but I'm not getting testing data will come in my next video about classification but here I'm not making a distinction between training and testing date I'm conflating those two concepts which is a big mistake and a problem but we're stepping through this stuff later by little by little like a butterfly flapping its wings it's not at all like a butterfly but I felt like I was being like a butterfly and then an optimizer is what sort of function what sort of algorithm am I using to adjust all of the weights of all these connections according to the loss function itself so I need to define those things so let me try to type it out how I think it is and then we'll go check so I know I need to create an optimizer TF optimizer like this and with a learning rate something like this like I'm fauna I want to have used to cast a create the set with some learning rate that's not correct this is me like trying to remember what the what the code is and then I need to say like model dot compile and then I think when I compile it I'll say things like this I'm going to compile it with this optimizer and this loss function like like root mean squared or something like that so this is what I'm remembering from when I looked at this at one time and I probably got this wrong so let's actually go look at the API Docs well first what's the chance that any of this actually makes sense okay TF optimizer is not a function so let's see how do we create the optimizer optimizer yes so it's this is what I want I want a TF train SGD this is how I create the optimizer is not a keyword in the API just I imagine that for myself so I need to say TF train SGD and then give it a learning rate so TF train SGD and there are other kinds of optimizers that will that i think i've even shown you and will use more and give it a learning rate like point 1 then i want to look at model compile so for compile well we can see in some examples here what I'm looking for is where the actual compile there it is compile so the compile function compiles it and give an optimizer a loss and I can also do some metric stuff I'm not going to worry about the metrics too much although maybe I'll try to come back towards the end of this video ok model dot compile optimizer loss I think this might actually be fine is it root mean squared so let's look for the loss functions all right apologies I've been saying root mean squared error for because I'm stuck in this world where you have to take the square root which you don't need to do here so just mean squared error that's all I need this is my loss function mean squared error now let us now go back here hit refresh all right things are happening things are going so the model is built the model is compiled and the next thing that I am ready to is now actually start putting data in the model the two things that we need to do now what are the two main steps I don't know why I came over here but things I'm over here first of all I drew this truth table thing a little bit weirdly and so you might recall just to be clear about what's going on this is my little drawing of the canvas right now and the idea of the canvas is that I want to see what the neural network thinks false false is at 0 0 I want to see what it thinks true false is at this right hands top right hand side the bottom left hand side I wanted to see it 0 1 and then I want to see here 1 1 so false is black 4 0 and true is white for 1 that's the way I'm gonna map the color so I should see some kind of bands of like I should be getting like something like this so darker here and like this so let's go look does that match yeah that's exactly what I'm seeing here so the reason why I came over here is what I need what I think I'd there's two things that I need to do number one is I need to train the model to produce this output my desired output that I think it should do and then I also need to ask the model to predict so I can draw what it thinks its output is so the two and the and so the two steps here I don't run out of space but in the attention flow chess library I wanted you I need to look at the predict function and the fit function predict for just saying here's the inputs what is your output the fit function for saying here's labeled inputs inputs with known outputs adjust optimize yourself according to that so I'm gonna do things backwards I'm gonna do just the predict step first I just want to see when you starts up with no training what visual output - again so coming back to the code let's look here so this this is what I need to replace so I need to now I need to ask the tensorflow layer sequential model thingy to give me the Y neural model dot predict but what does it expect it's predict function unlike my predict function cannot get a regular array it expects a tensor so I need to make the X's into TF tensor one D with those inputs and pass those through predicts now here's the thing there there's a lot of issues with this that I need to resolve and this is gonna run really slow I need to actually do this as a batch process I'm gonna get to all that but just looking at what I've got so far model dot predict there's there's a question of like is this happen synchronously or asynchronously this actually is happening synchronously but the problem is I need to say fill with the result like I need to look get that number out and to get the number out I actually want to call dot data and that happens asynchronously so because I'm working with such teeny bits of data right now I think I'm gonna use data sync and there could be issues with that and as I move more forward we're gonna see when I really need to be more thoughtful about callbacks and promises but I'm gonna use data sync right now so I should be able to predict the output with this input get that data and then let me just say console.log Y and I'm gonna make the resolution here of of the oh yeah the resolution really big like 50 because I just want to like look at very very little data to start with and let's look I'm not gonna draw anything let's just look and see what's coming out what's coming out here Y and then let me just say no loop so let's look in the console and see if we get anything error expected when checking dense dense one input to have two dimensions but it got array with shape to Oh once again I have the same problem I've had every single time I've done this with ten to flow guess so the good news is I want I don't want to just give this one D tensor though even though my data is just two values zero one zero one one and it's a one-dimensional array with two numbers in it I actually want to be able to do something like hey take these 15 data points and give me the results the predictions for all 15 of those and so what I really want to be doing is I always need to send in kind of like one order higher one degree one rank higher so this actually I'm just sending in one data it piece of data in point in point input frame stopped work and this now I also have to say tensor 2d now cuz it's a 2d tensor there we go ah so we could see look at this the results came out for all those little spots you can see in little numbers between zero and one in an array so now I can instead of console logging Y and I just want that it comes back in an array but there's only one number I care about I could put this back in here I can take out no loop and I can run it let me can see look there is my current visualization of X or I'm not really done I've so much left to do in this video that is been recording for the last three or four days all right one thing I want to do is I just want to say stroke 255 I just want to sort of see a little bit more okay that's actually what I'm looking at here I actually want to make the resolution for debugging debugging wise I'm I also want to make the resolution a little bit bigger so let's see now one thing I'm curious about let's look at the frame rate here that's running at 30 frames per second so that's fine let me now actually make the resolution much much higher like this oh my goodness oh it's not even getting to the first frame there we go look at the frame rate can't even give me a frame rate it's so stuck it can't even get one frame per second so here's the thing I have done something very very very bad and III needed to stop it no Luke stop you don't have to do any more work and let's put the resolution back at 100 and let's think about this what's going on here look at this look at this predict function and look at this data sync function what am i doing I am calling that function multiple times every single for every single spot on that grid when I'm working with something like tensorflow Jas whenever I create a tensor or feed data into a model the data has to go from my code onto the GPU and then when it's done that data sync is pulling it off of the GPU so I can use it again in my code that graphics processing unit where all the math is happening behind the scenes I want to do that as few times as possible look how this is I'm creating this two-dimensional array with one thing in it you know ten hundred times I could just create one array with a hundred things in it and call predict once that's what I want to do so I what I need is for this nested loop to happen twice once to actually wants to set up the data and another to draw all the results so I'm going to copy paste this just put it right below so this now what we need to do is create the input data so I'm gonna say let inputs be a blank array then I'm going to say inputs dot push and I'm going to just push in x1 x2 so I'm going to put every single x1 x2 all the way along I don't want to create the tensor or do this here I don't want to do the drawing stuff here I just want to create I just want to have a loop that creates all the data now I can get the X's is all of those inputs into a 2d tensor and the Y's this is now the Y's is and now here's the thing I don't just let's Oh hold on I got a look at what that's gonna look like let's comment this out for a second let's look at the Y's and see what that looks like oh okay SketchUp 78 error OOP oh no let there just inputs push okay oh I want to say no loop let me leave that no loop in put it back I just want look at it once so you can see what did I get I got a big array of sixteen numbers I got all the results so now what I want to do is back here now I just need to do the drawing and I don't need to the input data I don't need the model all I need to do is draw and I need to say fill wise index what I plus J times the number of columns maybe right because this is a one dimensional array to describe all each spot in that grid I could do something like let me just do this let index equal zero I'm going to say fill based on this particular one and I don't need this even sorry and I just need to say then index plus plus right so what are the steps here create the data get the predictions draw the results okay there we go so now we can see this is working I mean it's not doing anything but now let's check this framerate question we don't need to console.log the Y's I'm going to get rid of the no loop let's let's refresh this let's look at the framerate 30 frames per second let's let's pump it up a little but pump you up a little and where was the resolution there let's make this 20 go crazy and look at the framerate there we go 30 frames per second no problem because I'm only one time through draw trying to copy data onto the GPU and get it I'm only calling predict once and we can just to check we can go to 10 and we can look at the framerate yeah you could see it's like kind of running a little bit slow but this is because I'm not being so thoughtful about the asynchronous nature of this stuff I could do other things to optimize it but I'm just gonna ignore that and leave it at let me make it 25 the chat is giving me some even further optimization which is why am i bothering to do this in draw this is something that the these inputs never change I could just do them once at the beginning because they're and and I can I can ask for I spent many many times in draw so let's actually fix that so I'm actually gonna I'm gonna take this and say let I'm gonna make this globe these global variables I don't know if you guys can hear the music that's coming from the room next to me but it's the air alright then oh but the width and height does not exist until after create canvas so let me do this and let me do this okay so now that's there now I should be able to take this the input data and put this right here in the beginning and then I'm going to make a variable called X's and X is and where did I do that here and then create those X's so I'm now doing this in setup and then in draw the only thing I need to do in draw is run the predict this is going to make things run a lot faster let's make sure it still works here we go okay so you notice we get like a different color each time i refresh because the neural network model the sequential model is initializing everything randomly but now I get to Train it now I think we're ready to train it so here is what I did when I had my previous my own JavaScript neural network library I called neural network trained data inputs data outputs all right so if I only I could remember exactly what I wrote when I made that TF layers tutorial but I know that what I need to do here and is I need to do something like this model dot fit some X's and some wise that's the training that's the equivalent and the learning rate is irrelevant and I don't necessarily need to do it look this is basically what I want to do every time through draw I want to try to fit the model with some training data so let's first make the training data this is not exactly right I need to figure out and I need to use a weight that need to think asynchronously but this is the idea so if I go back to the top here this is my training data now one thing I definitely need to change is I want to keep the X's and Y's separate in training so I'm going to do this is I'm just going to do this kind of manually because I what's the big deal so let me make the training set and then one one those are the the X's now let me look at the Y's and the Y's would be 0 1 1 0 then I need those to be tensors so I need to say Const trait TF X's so I've got to think of a good naming for this I kind of want them to call actually you know what I'm just gonna call it do I have a global X yeah I have a global X's already hmm-hmm-hmm tray TF X's equals 10 sir 2 D tensor 2 D o TF tensor 2 D you know what I'm gonna do I don't need these I don't need two separate sets of variables I'm just gonna create it I'm gonna call this ah everything is so much more complicated than I make it so if we're simple then I make it I'm just gonna make these tensors directly by saying TF dot tensor to D and then I'll put the parentheses around this and there now I'm in a tensor then F is a TF tensor to D and now I made this a tensor okay now I've got the training data and I'm gonna get rid of this this is the old way that I had the training data which is totally unnecessary so this the training X's and the training wise you with me if you're still watching I don't know dude get up and do it some jumping jacks let's see now I need to do model that fit now model dot fit happens asynchronously so let's put it in its own async function called train model now if you don't know what it means to write a function that is tagged with the keyword a think this is part of es8 a very newish version of JavaScript and I've made a bunch of videos about what that is that you can go back and watch but this is basically a way for me to now say wait model dot fit and then let's look at actually let's look at the fit function model dot evaluate compile predict fit so what I need is to give it the X's and the wise there's batch size I'm not going to worry about there's epochs I'm not going to worried about our epics and so H will give me back the history so let's just see here I'm now gonna say train model dot then H console dot log H dot loss index 0 let's say no loop again so basically what I'm doing here is I want to call this function train model and I'm using this idea of promises it's going to await the model on I need to return do I say a weight return or returned a weight no I must say return oh wait return oh wait model dot fit so I'm going to return a promise which will have the result of the fit function and I don't know if this is right I want to just look I'm going to do that I'm going to call to train model every time and draw I might need to do this somewhere else just right now and then see what the loss is okay onyx 73 async function async function I've got to say function function it's an async function not an async there we go wise is not to find where a train model oh right this is I forgot to call it train X's and train wise this is my training data train X's and train wise nice other word train just appears of around we're doing machine learning you drink your glass of milk or whatever it is you're having while you're watching this coding train stuff cannot read property zero of undefined a train model than H all right let's look just console.log H note that is what I've done okay history loss zero okay oh no by the way I didn't give it any testing data so what's our computing the loss from history so this is I'm gonna call this result result history dot loss index zero all right there we go there we go now let's let it do that over and over again in draw so I let this run a little bit and unfortunately see it's getting nowhere this loss which I'm not sure exactly how things I don't think about that come back to it is not going down anymore so what could be some problems here remember one is maybe my learning rate is no good not that it's no good it may be it's too low so where did I set up that learning rate again let me get rid of by the way I just want to now delete I want to make sure I'm not using any of my old neural network code so I'm deleting all references to that so this is now purely tensorflow Jess and and let me refresh and run this again and let me look into sketch dot yes and find where did I set the learning rate right here let's set it to point five and see what we get yes getting better I'm gonna let this run for a little bit and I'll be back [Music] alright I'm back and you can see the losses now kind of much lower and you can start to see the visual that I'm expecting which has a true value in this corner true value in the top corner of darker false values in those corners but it's still kind of performing rather poorly one thing that I forgot to do is when I call the fit function there are a set of options that I can pass in for the number of epochs and all sort of thing but one of the ones that I really want to pass in here is called shuffle shuffle takes the training data and it shuffles the order of it each time right now I'm trading it with the same four data points in the same order every time which could be a bit of a problem and okay so let me now let me hit refresh here and run this again [Music] all right so you know it actually it actually is working it got the correct training result it's a little gray scaly in a way that I would like to be able to like emphasize visually what it's do but you could see the loss has gone way down but it took a while to get there but I want to add a few things to this and try to fix it up a little bit before I do anything I was reminded by the chat being over here that I haven't thought about memory management at all so I'm gonna say like no Luke for a second to just sort of turn this off then I'm going to say memory numb tensors whoops no no way TF memory dot numb tensor I know I'm trying to use ah I'm gonna say numb tensors TF dot memory numb numb there it is there it is I can get it there it is thirty-two thousand two hundred five tensors that's crazy so I need to deal with that I'm just making temperatures and letting them leak everywhere so I can manually run dispose but I've got kind of an issue whereas predict is gonna like make a lot of tensors behind the scenes as well as a model dot fit so I can use the TF tidy function so I'm going to say TF tidy and then I just need to I'm gonna use the es6 arrow notation which you can watch my videos about what that is but and i've kind of gone through what tidy is tidy says anything inside of this code clean up the memory afterwards basically and then I'm gonna I probably could put this around everything but I just want to and I don't need this stuff anymore I just want to keep these two areas separate because I think I'm gonna at some point I really should change the way doing the fitting of the model excuse me in draw is somewhat problematic so now I'm gonna just tidy all of this I think that's right drive an extra parenthesis there yes okay so now let's run this again and let me comment out this console.log I don't want to see that right now oh alright and now let's look at the number of tensors 15-15-15 so now I've gotten rid of the memory leak let's check out the frame rate 30 frames per second so this is running for on now let's I just want to be able to look at what's happening a little bit better so I'm actually gonna draw the number of the output inside each one of these things so let's do that so where am i drawing the rectangles here I'm going to say let the brightness value equal this and I'm going to fill the rectangle with that brightness and then I'm going to say fill 255 mind it like the inverse color I'm going to say text number format the y-values index with just two decimal places and I'm gonna put that at boy this is awkward alright the exercise this is gonna be height x resolution plus resolution / - I'm gonna say text-align:center text-align:center kind of center and then I'm gonna put the I'm just going to draw in the center of the rectangle and this should be J the text so let's see let's do this now so we can see you look there's lots of numbers there I think my number format thing didn't work 1 comma 2 and let's use a lower resolution just so I can see it better there we go now interestingly I can't see the numbers but there they go right you can see this is what it's getting the output for each one of these and I want to look at the law so you can see because it's just going so slow it's getting so overtime it's getting a little better but I really want to see a train much faster so let me see I have one idea one last thing I can add to this even though I and I have some suggestions for what I might do next but you can see all the numbers are starting to appear lovely because I forgot when it's gray when it's at point five 2:55 90.5 it's gonna be the same car I kind of like that effect so so what I want to do is what happens here if I actually give it tell it don't just do it once like do it 10 times do 10 a pox per cycle of fitting let me run this again and let me look at the let's actually have the loss continue to print out and there we go still running pretty fast you can see the losses going down and relatively quickly I am getting myself to the point where I'm starting to see you know this is definitely all the way cut getting all the way down to zero there this is getting way up to one there it's getting a little bit stuck it's having trouble with this size outside I imagine it'll get there eventually we could do some fun stuff so I'm gonna give it for no real reason all but just for fun four hidden nodes and I'm also gonna let me change the resolution to 25 let me make the text size something like eight point and let me whoops refresh it alright I'll let this run for a bit and you can kind of see here now you can see all the X or values here's a nice beautiful little map grayscale map of all X sorts getting all the way up to true and all the way down to zero at the corners this is pretty good so this is running at if I take out this console.log I can now take a look at the frame rate it's running kind of slow alright so the chat has given me some really helpful tips I've made quite a few little like weird little errors and mistakes here and I want to just fix this up a bit I think it's actually gonna be easier to look at and watch if I just go back to a lower resolution so let's make this 40 and let me refresh this okay so here we go so this is now working training itself for X or you can see it's kind of moving along here now what what the real the real thing that's problem problematic here is the draw loop is happening over and over again and then I'm triggering something asynchronous in draw and I could be asking to train the model before it's even done with the previous training cycle so this really should not be happening in draw now tensorflow Digest has a function called TF next frame I want you to explore it and make a version of this with Tia next frame as like an exercise after this video is over but I'm gonna do it a different way without that because I got to come back to that in a different video but first of all this I also learned this is totally unnecessary the the await a couple things number one is because there's just one thing happening in here I could just return the promise this doesn't actually have to be an async function and then I do not need the TF tidy because model dot fit kind of will clean itself up automatically for you so this this should still work just fine and I should be able to see the number of tensors is still fifteen so that was something that I didn't need that I've now fixed now what I really want to do is I want to get this out of draw so let's comment this out here and what I'm actually going to do is I'm going to write a separate function called train and in that function I'm going to say set time okay wait wait I'm gonna call train model wait hold on I'm gonna call train model yes yes in that function I'm gonna do this I'm a separate function that does this piece of it that console logs the history and I couldn't and what I want to do is I want to say set timeout call the train function in 100 milliseconds so I want to just let the program start 200 Phyllis X late later call this train function train the model which does the fitting when that's done log the history and now say set timeout train 100 so I'm good this is sort of like recurse like like I don't want you set interval here because I only want to call train again once it's finished with training the model itself so this is kind of like hey train and and by the way I could just increase the number of epochs or maybe do some kind of luke but I think this would be a sort of nice way to demonstrate it and if I just called train directly without a set timeout I'm never going to be giving back control for a second I could end up with sort of like blocking so I might even be able to get this down to like 10 milliseconds just something really really low so let's run this and sort of see same result we can see there we go things are working but at least now I have gotten that out of draw so draw is happening on its own and in fact what I could really do is I could say hey try doing this with like a hundred epochs each time epochs what is it and you can see the lost function is coming out much more slowly but whoops but the frame rate let me just clear this for a second yeah the frame rate is quite fast hold on this is too confusing I probably need to give give it back more time let's do like another little break let me let me I just want to like take out the console.log thing so I can look at the frame rate I should just put the frame rate in the Dom wouldn't that be smart but you can see now I'm getting 60 frames 30 frames of getting like a really pretty high frame rate even though the training is happening it's almost it's kind of like that there is no threading in JavaScript so these things are just like passing off and really this might be a place where like web worker something could do the training behind the scenes in some fancy way which maybe I will get to at some point oh my goodness so Alka is suggesting it might be better to use the draw loop and a boolean to know when it's safe to call it again that would also be a good idea so you can see though you can see what kind of like employed my hair out what kind of sort of like hassle situation we've gotten in but really let's just put this back to like two epochs let's put this to like a little 10 milliseconds and we can sort of feel like there we go and I can look at the frame rate it's running nice 30 frames per second and even though and it's and at some point it's gonna get there what's that loss I forgot to console.log loss come back to me come on oh but let's see I have an idea what if just before I go just before I go what if we try using a different optimizer what if we try using for example a different loss function hold on this video is already 18 hours long what if oh no no no a different optimizer sorry what if I tried using the the Adam optimizer so let's just try that just for fun times let's give it a lower learning rate that was pretty exciting let's go let's go let's uh let's make the resolution back to like 20 let me make the font size like nice and tiny for us we give myself some more space here hit refresh and then let's look at this look at it learning there wow look at that that is beautiful look at it learning XOR so nice and fast I'm just gonna hit refresh again I really should explain what these optimizers are but if I go back and look under here we can see what some of these are Adam the the a da coming from the word adaptive and you could always click here and look at this paper which describes this particular method for optimization which is a little bit different than stochastic gradient descent and apparently things work a lot faster with this XOR problem so as I go forward into more of these videos hopefully we can dig into what some of these different optimizers do and kind of understand why I might pick one over the other in certain situations all right but I'm just going to just leave this B I'm going to hit refresh I'm going to watch it learn and train train train train XOR oh I don't know some things you could do investigate TF dot frame give me a little slider try different architectures different optimizers types of different activation functions I don't know if you actually made it all the way to the end of this video I don't know hashtag something I should Eric has taught me to watch one of those videos reviewing the JavaScript event loop which I definitely need to do so I mean I'm gonna be back with more someday yeah goodbye goodbye goodbye thank you [Music]

Channel: The Coding Train

Views: 39,557

Keywords: tensorflow tutorial, tensorflow tutorial for beginners, tensorflow js, tensorflow basics, tensorflow example, tensor, tensorflow, machine learning, machine learning basics, machine learning tensorflow, tensorflow basics tutorial, JavaScript (Programming Language), programming, daniel shiffman, tutorial, coding, the coding train, nature of code, artificial intelligence, xor problem, xor tensorflow, xor tensorflow.js

Id: N3ZnNa01BPM

Length: 51min 46sec (3106 seconds)

Published: Mon Jun 11 2018