Coding Train Live 160: ml5 Load/Save + Quick, Draw!

[Music] [Music] good afternoon again here on coding train my name is Dan NASA kop and the chat asks does it start now in fact it starts now or maybe officially it starts now welcome to the coding train afternoon edition there was a full two and a half hour morning edition of the coding train today where I completed completed is perhaps not the most accurate way to describe what happened but I did attempt to continue to work on the logo coding challenge but that's all I'm done with that I won't be returning to that anytime soon just in case you weren't here this morning I will show you I will pull this up very briefly if I go to a logo coding train slash logo this is the github repo there are some issues here that I would love help with and thoughts on there are a couple of design pull requests but I merged a couple things without checking them so let's actually see coding train github slotto slash this should be the demo and it still works so there you go so this is what it does it is a logo interpreter where you can type logo commands and it will draw them for you and apparently now it supports some some new commands that it didn't as of this morning based on a few pull requests but I don't want to rehash that too much what I want to do I'm just gonna get right into things right into things I am going to continue today the beginner's guide to machine learning with ml v j s in particular i am going to make new video which will appear as number seven in this playlist and what I'm going to do is I'm going to take this previous example that I made and I am going to save which trains a model I'm gonna save that model and then reload it back into the sketch so that I don't have to constantly retrain every time i refresh the page etc so this has been a long overdue feature or a widely requested feature in the ml 5 library let's go to github let's go to issues it might be closed let's look where did this get added there we go so this is the support this is the pull request ok so I'm gonna leave this open ok yes Kay we c'mon here we are again I am streaming extra a little bit extra I decided to come try to do two streams today because AI didn't get to last week because I was teaching and then also I will just mention again that I will be next week next Saturday at thinker con in Huntsville Alabama a place I've never been to the home of the rocket and if any of you are going to be there please say hello ok alright let's just get started here alright let's just get started let's that's is so so what else am i I've got an hour or so or to some amount of time I am definitely I'm gonna start with this ml 5 save load model I am going to also look at an example with working with the Google quick-draw dataset because that is a leading up to looking at sketch RNN model in ml5 so many things I got a long ml5 list of things to cover I want to look at the new some new stuff that's been added for recurrent neural networks with text sketch RNN pose net KNN classifier so many things so lets us begin hello I am here to make video number seven which is not yet exist if you have been watching this playlist the place where I left off was training a hold on I forgot I forgot to turn on this part of my brain hello welcome to a new ml five beginners guide to machine learning video I am about to make video number seven right now that's what you're watching I'm where I left off I looked at how you could train your own image classifier with images coming in from the webcam with a technique known as transfer learning this is the example so this example needs to be trained but I could do this again a lot examples of me being happy a lot of examples would be being sad then I can hit the train button and once it finishes training it is then going to be done now hi this this failed I shouldn't been so I didn't give it enough ok what we're trying this time with feeling everybody don't you just love watching the live stream before I just do the same thing over and over again hello and welcome to another beginner's guide to machine learning with ml 5 G's video this is video number 7 in this playlist at least that's where I intend it to be and in this video I'm gonna take a step forward I am going to do something that has been so widely requested a new feature that was recently added to ml 5 to save and reload a model now what kind of model am I talking about the last example I left off with was this transfer learning example where I can train my own image classifier with images coming in from the webcam so for example I could say here's a lot of images of me being happy what's going on what are you doing sad then I'm gonna train it and then I'm gonna come back it's gonna be done ha-hey so that works but what happens now if i refresh the page need to be trained again that model is lost so there is a new feature in ml 5 a load function in the save function or a save function the load function this is what I'm gonna show you in this video let's see if we can get it to work that's it so I've got the code from the previous example here to pull it up and what I'm going to do let's add another button where'd it where the buttons did I use create yeah I use Create button I guess so I'm going to go into setup and I'm gonna these are called Duke buttons and whistle buttons because why not I'm gonna make a save button equals create button save then I'm gonna say save button Mouse pressed I'm gonna put an anonymous function in here and I am going to now say classifier dot save that's it the classifier object if you remember is a classification object made from a feature extractor from the mobile net library ratalie Mike sorry timeout is the Micah problem is this better now okay so Mike okay I kind of want to start this video over again I just I'm waiting before I keep going to see that the sound is okay yes one two one two my mic is clattering a lot is it still clattering maybe I better go back and redo this whole video nothing would make me happier let's actually see if this works well I'm here I redid classifier debt see oh I forgot great so this I'm going to have this happen because I have to upgrade my version of ml5 yep great okay so that worked okay and we tell it not to show the warnings so where's the where's the preference for showing warnings so I kind of would prefer not to see them frankly I network your evaluation preserve vlog show warning somebody'll show me it's anyone in the slack can't channel could tell me how the mic is going I would really appreciate that show warnings chrome hide warnings in the console window is their top filter errors level warning okay so it must be I just don't see it here because there we go so let's ah there we go there it is got that okay the mic quality is perfect now okay apologies to everyone but just because there was some mic issues I'm gonna start over and so I'm actually going to do this and go back to here take this out fresh all right here we go everybody so I realized that some of you watching might not have actually gone through this video tutorial ml the idea of ml five might be totally new to you just very briefly ml five is a beginner JavaScript beginner friendly JavaScript library for machine learning it's built on top of tensorflow das which is the open source machine learning a library made by google tensive load address is a javascript port of types or flow which is C++ and Python and you know mmm that's about as far as I'm going to go with that right now and this series explains how image classification works with the pre-trained model and then how you can train your own model on top of that so that's where I left off but you could never save it so now here we are hello and welcome to another beginner's guide to machine learning with ml five jazz video it's gonna happen if you happen to watch all the previous videos a while ago and you discovered this one new a new feature has been added to ml five the save load feature extractor with ml five specs so you can find the pull request here if you want to see more about how that was implemented but the point of that is the following where I left off was this example this is an example that loads a pre-trained image classifier called mobile net something that was trained by somebody else explained in my previous videos and allows you to allows the user allows the coder to use a process known as transfer learning to extract the features from the that they have to model the text in an image and reassign them to new labels so for example I can make a very happy face and click on happy a bunch of times and wonder why my Mac is showing that weird window and then I could add a bunkered times and then click train and now we have to wait for minute we always blow the train whistle for train oh and how the training is complete and I go hey let me go back and do this kit it's really bothering me that this clicking on this is like was pulling that thing up it's because I'm selecting the text all right okay when I'm kind of standing in front of it too so at this example I can make a happy face and click happy this is me giving it a bunch of examples of me being happy and then we've been retired now I can press that train button it is training and now that it is finished training it will recognize it will - it will determine if the webcam is showing an image that looks more like happy or sad happy happy happy okay so that's what the example did before if you're still watching what the problem with this example is if I hit refresh it's gone it needs to be trained again so what I want to show in this video and boy it's taken me a long time to get to it is how to save and really there's just two functions we're gonna add here a function and a load function so I'm starting with the code from before and I am going to go into setup and this is where I made the buttons for sad and happy and train I gave them like weird variable names which don't have any meeting anymore but I'm gonna make a new button called save button equals create button save I guess I should I guess I should make this a global variable just to be consistent that might be unnecessary but and then I'm going to add a function to handle the event when the Save button is pressed so what do I need to do when the Save button is pressed guess what this is super simple all I need to do is say classifier dot safe I'm just saying classifier I should know what's gonna happen there let's wait and see so I'm gonna go here I'm going to oh look the Save button is there going to be happy I'm gonna train then I have to wait for it to finish training once it's done I'm gonna hit save and guess what I got an error save is not a function so I left this error happen on purpose this is a new feature of the ml 5 library and if I go and look into my HTML I can see I'm using the ml 5 their library 0 point 1 point 1 maybe you're watching this maybe it's like right now it's like 9 point 4 point 3 and you're like in this like future world of ml 5 but the current version is 0 point 1 point 3 so if I add that I'm going to hit refresh now I'm gonna really try to train a good model here so let's try oh I don't have the ukulele I do have the train whistle so I'll just do happy and set I'm happy with the train whistle and I'm very sad with no train whistle I don't have a train whistle now I'm going to train so I gave it a whole bunch of examples and Oh something weird is going on here ok let's see if this works happy I'm happy with the train whistle I'm sad no train whistle I'm happy with the train wrist full I'm sad no train was long and I want to keep this model so I'm now gonna click save and look at this look what has downloaded to the download directory I'm gonna go show in finder and see look at this two files today this 2:17 p.m. model JSON model dot wait stock pin okay so let's take a moment to explain oops let's see why is the whiteboard not working loose cable maybe check check no check yeah there we go okay let's take a moment to talk about what's in these files so why is there a file called model dot JSON and a file called I already forgot model dot weights dot bit model dot weights dot big okay so we haven't really a part of this video series at least talked about the details of what a neural network is but this particular machine learning model is a neural network and a neural network has some kind of architecture to it it has a whole bunch of inputs and it has a bunch of outputs and in this case it actually just has two outputs a happy or a sad and the actual thing the neural network is producing is a probability of one or the other now in between oh in the inputs sorry the inputs is an image so maybe every single pixel of the image is wired to one of these inputs then there are these layers the data is going to be processed forward math and various things are going to happen to the data as it goes forward and it needs to have some amount of hidden layers and other types of nodes and everything is connected and this is stuff that I have described in other videos and I'll also refer you to the three blue one Brown what is a neural network video which is terrific to see more but the reason why I'm mentioning this is this model JSON is a file that describes the architecture maybe is architecture of the model and this model dot weights dot bin is a file that describes all the so what I mean by architecture is how many inputs how many outputs how many hidden layers and all sorts of configuration details about the architecture of this neural network that I've you're in a pretty crude way one of the thing that I'm kind of like not mentioning because I don't want to be here for the next 17 hours you're going to every sound every different road of detail here is that the data as its passing through the neural network all of these different nodes between the inputs and the outputs and the hidden layers all of these nodes are connected and each one of those connections has a weight you can think of the neural network is the thing that has like just lots and lots of dials in it and it's trying to learn what the goods what the right setting for all the dials is to produce the appropriate happy or sad result based on the input image so all of the numbers that store the values of all of these weights are all in this file so this is actually a file that we could very easily go and look inside its JavaScript object notation it's a JSON file we will look at that but the weights is really like the big thing it's we're like there's a ton of stuff there's tons of these connections it's many many numbers so it's typically stored in binary format raw digital data so that just sort of like have it be the smallest file size so these are the two files that we need let's go take a look at those so the next step for us is to take these two files I'm gonna copy them and actually I think I could probably just drag them into visual studio code because I want them to be part of this example right so that we can see that they're here now now that I have model JSON and model dot weights bin as a part of my project if I were using the p5 web editor I need to upload these files I'm not sure if that's actually possible I have to look into that and then if we look at model dot JSON for example you can see and I'm gonna hit save we can see this is the model topology it's a sequential model and these are the inputs the inputs are 7 by 7 by 256 and somewhere uh yes ml 5 specs these are the labels happy and sad there's all sorts of other stuff there's there some dense layers and there's where it gets the weights and it's using tensorflow layers intensive float yes so all of this information is in here the bin file is not something we can really look at because it's in binary format but we can know that that all of the numbers those weights are there so now guess what we're gonna go back to our code and I'm gonna look at the steps here in setup again so in setup the first thing that I do is I create a feature extractor with mobile net when that model is ready what I'm thinking for a second yeah just timeout for a second I just want to look firstly the documentation isn't up on the website for this so I just want to check some things to make sure I'm doing it correctly I'm gonna look at it over here real briefly I'm just looking in the existing examples there actually is an existing example for this I don't know why I'm not pulling it up here probably should I just need to understand the order of this classifier oh yeah okay it's interesting guess that works the order of all this stuff is weird and I feel like this is a thing we have to work on with the library alright I'm gonna not worry about this too much okay so once the model is ready then I can go ahead and where's that this is this is the function for when the model is ready I can now go and say classifier dot load and guess what I want to tell it to load model dot JSON and I'm gonna say a custom model ready custom model ready custom custom model is ready so first mobile net has to be loaded once that's done then the custom model can be loaded now look at this classifier load model dot JSON remember there are two files model dot weights bin and model dot JSON ml five is set up to work that if you just tell it word that JSON file is model JSON it'll look for the corresponding model that weights not bin file in the same directory it there are ways that you could customize what those file names are and have them in different paths but this is the simplest way of doing it so let's see if this works now [Music] models ready ah got an error what is this error that was sad maybe what has a zero let's look at five megabytes that makes sense that's right that's definitely like weight there oh it didn't find it Oh weird oh I know what the problem is oh I don't like this I think it's gonna work now yeah so it did load so the issue is the following is that it doesn't so this is actually kind of like a bug because it's not looking in the local directory unless you specifically do the dot slash but you know I think it would be simpler to let the user just do this so that is a bug to file let me do that real quick but I won't worry about that right now [Music] what is this a feature extractor model loading relative path so is this look at this is this the following works do it making an exam a live example live on YouTube right now the following works [Music] however just referencing the file name and expecting it to be the local path doesn't doesn't work because it looks for model dot weights dot bin somewhere else this is a minor detail because we can definitely get it to work let's get this error and let's go back to github here Oh weird but it actually did look in the right place that's weird but this is a thing I'm so confused oops oh it would have worked this is interesting it would have worked I'm not being careful enough if I were running the server from here it works it it works because it's a subfolder but I feel like it should figure out that it's in a subfolder right so okay so I got to change my error message here okay [Music] if the sketch is not at the root path I can load the model via a relative path as follows but however if I look for model model JSON with a relative path like the following it then looks in the root directory or model dot weights been this is minor for my example but noting as it's an error people will encounter is it trivial to support looking always in okay so I think this is if the sketch is not at the root path I can load the model via via the current directory at the current path directory as follows however if I if I ask if I ask for model dot JSON at as follow this way it then looks in the root directory for model dot weights dot bin alright so let me let me submit this yeah let me submit this I think this makes sense now apologies if this issue is weird because I'm doing this no lecture ok so I'm actually we're gonna fake this here no one will notice okay we're gonna fake this uh-huh so Matt's yeah I'm gonna this is at I'm not gonna show that error actually because that errors is irrelevant what I'm doing here so let's see if I can get it to work just like this okay cuz I think that'll get fixed later I hope okay okay let's go back oh it's already that's no good so how do I hold on all right let's try now loading that model you hit refresh models ready videos ready custom model is ready so it's been loaded but I'm not I'm not seeing the labels so it doesn't even though that model was loaded I now have to figure out and now I have to tell the code to no longer really needs to be trained in this case you know I might want to retrain and do fancy aim I'm going to take out the training button and then somewhere there's like an event where it finished training where I said classify or classify got results and so that's what I want to do now and the custom model is ready so the the events are as follows let's bring this down here first load the mobile net model when the mobile net model is ready then load the custom model when the custom models ready start classifying the image all right so here we go let's what I hope with this hand I can't remember that was this ad all right so this is working on those buttons are now no longer relevant so I could actually take all the buttons out and this is now again whether you want to have one sketch that where you train and save and load or two different ones but I'll just show you right now the idea here is I did my training I'm done and now I have something that automatically loads the model yeah all right so I hope this was helpful you can now see that process right what is the process train the model call the save function to download model dot JSON and model dot wait stock pin then take those files into your sketch use the load function to load them both and then start classifying alright so give this a try see what you can do now that you can spend a lot of time training your model because you can save it and see what you make with it all right thanks for watching and I will see you in another mmm I'm going there be more Emma five videos I don't even know what's next but if there's a video that's next you could watch it goodbye all right hopefully that can be made into something understandable wonder what would happen if I'm just curious what would happen if I retrained it yeah I guess it retrains yeah but then if i refresh its loading that previous model okay any questions about this well J s always load the setup function automatic asks Tobias so this is a feature of the p5 library so I'm using the p5 library and the p5 library always calls the setup function first that's the way it's configured but this is not something that will just happen in any JavaScript environment it's here it's specifically part of the part of the p5 library ok copper asks so save not save all the model like in Kerris that's right completely understand that question but I'm let I'm in front rephrase I think what copper is asking is is this like saving a model in Kharis and the answer is yes there's a lot of nuance to this because number one it's saving the model in a particular format that is compatible with tensorflow dot yes so this model that we saved won't necessarily work with a Python Karras example without being sort of converted to what it needs there and there's also this sort of strange feature of it which is that it's already like it's we're just saving this sort of part that's on top of the mobile net model so I haven't like resaved the entire mobile that model and just saving the transfer learning piece of it that is plugged into the mobile net muddle because it's still always loading the mobile net model and yes Kate Wycombe says as far as I know you can even import a Karass model into TF Jas so yes if you want to import import a Karass model into TF j s you just need to look for the TF j s converter this is a script that will take any tensorflow or Karis save model and convert it into tensorflow just this is from the tensorflow project itself does that mean it will work automatically with ml 5 in theory yes but ml Phi is kind of a subset of tensorflow chess with a bunch of things wrapped to be a little simpler to work with I don't want to do that video again cuz I feel like I don't know if I hit all the right notes I'm gonna do it again cuz it and then Matt chick and pull cuz I feel like this is a really sort of important one and then I will do the quick draw stuff asdfghjkl space asdfghjkl asks why do you choose p5 GS over other JavaScript libraries I mean it's a great question and I don't think there I certainly am NOT here to say please I think you the viewer of this channel should use p5.js the reason why I use it is because it's a project that's connected to a project it is a project it's part of a project called the processing foundation an entity that I've worked on for many years that I have a lot of personal investment in and the goals of that project in terms of being beginner-friendly being inclusive are values and principles that are close to my heart and that work well the kind of stuff that I want to do in this channel is it perfect no are there other things that you might want to use instead definitely but it's it's it's a good foundation library for me to build a lot of stuff with alright I know I'm torturing you all but I'm gonna do this again just to give Matt you more material to work with now that I have a sense of what the issues are so I'm gonna go back to what it was originally I'm gonna redo a couple things to make it less awkward I am going to let's just see here okay let's see here okay so good move some things around I think to make things less awkward is that legible this font size is this legible it's smaller than I usually have it but this might be helpful to have a little bit more room to look at the code yeah let me rename the uke and whistle button thank you let me rename those thank you that is I don't know why I'm a happy button sad button train button okay so that's good any other suggestions it's fine alright let me try it with the code a little bit smaller okay here we go everybody all right let's do this ridiculous thing again I mean that's you whenever you watch this you can take stuff from the first try and mix it if you want but I hope I it's my hope that this will just be a cleaner version of that video and apologies to all of you watching live when I make the same jokes again not that I made any jokes not that any of them were funny but if I did then I'll probably make them again more awkwardly can you continue working on the loco project ask David I don't think so okay hello and welcome to another ml five beginner's guide to machine learning with ml 5 j s video all right so this one's a good one I hope I'm about to make video number seven in this playlist and this the element in the ill oh oh - draw up some firm well I forgot that I have all of this stuff here already and I don't want it to be totally the lead I'm so in love with you delete delete Oh with my eye so blue delete delete delete delete delete oe who's gonna come here all right here we go hello and welcome to another beginner's guide to machine learning with ml 5gs video now in this video I am going to unlock something for you it's already unlocked for you but I'm gonna show it to you that is incredibly powerful for what you could do now with ml 5 that you couldn't do before but many of you asked about in the comments and what is that it is the save load feature extractor this is a new feature that was added to ml 5 just 5 days ago you need to make sure that you are using ml 5 zero point one point three or whatever number in the future past that but certainly this is the version of the library that I'm using in this video now what does it do so the last example if you've been watching this these video series in order was this example what this example does is it loads a pre-trained image classification model called mobile then on mobile net is trained on a thousand different kinds of things and recognizes puppies and dogs and birds and different kinds of objects transfer learning is the process by which we take that pre-trained mobile net model basically disconnect it from all those labels and reconnect it to our own labels for example I'm gonna make up a label called happy and a label called sad I could certainly have more than just two and I'm going to show it things like the train whistle is me being happy would Joe at that train with a little bunch of time say happy happy happy happy happy now no train whistle this is very sad I'm sad no train whistle was sad oh wait so much time on this because I haven't implemented the thing that I want to implement now I'm gonna say train and it's gonna train and then once it's done happy sad happy train whistle sad ok so it works it is now learning to classify images in real time according to those two categories but I'm a very big spaz and I'm gonna just be over here to refresh and I I lost that forever I no longer have that model it's gone the new feature is ability to save that custom trained model and then reload it so if you're using this for like installation and you're gonna like take down the computer and set it up every day you can save that model you can imagine there's lots of possibilities here so there's only two things that I really need to add to the code there's a save function and a load function there's a bunch of pieces there but that's what I'm gonna do right now so I'm gonna go here into the code and I'm going to just add another button like I have a happy button a sad button and a train button choo choo I'm gonna add a sad button no no that's that a Save button I'm gonna call it save and save button when the mouse is pressed I'm just gonna say classifier dot save that's it all of us a classifier let's see let's see what happens so I'm not going to train it very actually no I can't I'm gonna train I'm gonna let's do a really good solid training this time because this is the one we're gonna save what it works all right so let's do the same thing happy happy happy happy train whistle is a happy thing a happy happy happy thing just B is very sad there's no train whistle I'm so sad I'm very sad and very sad and now I'm going to train this weird how the lost is zero I'm just gonna like not worry about that too much I'm gonna hit save and now you can see that down here by the way that I did this a couple times practicing now what it did is it downloaded come on to my download directory two files model JSON and model dot weights not been so those files will end up wherever the default downloads directory of your browser is and uh and the next that step is just to load those files in but before we load them let's talk about like what's in those files so there's two files I said model JSON and a model dot model dot weights dot bin okay so what is a neural network love what is a machine learning model what is the thing that we're saving well in this case it's actually saving the configuration of a neural network now if you want to know what a neural network is I have some videos about that but I would refer you to the three blue one brown video what is a neural network I will link to that in this video's description that will give you a much bigger deep dive into those details but if you look at that video what you'll see is there's basically like a big diagram and the diagram has a bunch of inputs it has some outputs by the way in this case we could actually say the outputs are just too happy and a sad and what the neural network what the machine learning model outputs is a probability maybe like you know 80% of it being happy and of that image being happy and 20% that image is sad so the whole point of this is to feed in an image right it's the image and maybe all the pixels of the image that are actually these inputs it goes through this magic neural network thing which isn't really magic it's the thing that you can learn about and then out the other end comes a guess as to whether it's happy or sad now what is all this stuff in the middle the stuff in the middle is typically referred to and there are many different styles and flavors and kinds of neural network but in the sort of zoomed out view in general terms is what's known as a hidden layer or hidden layers so every input is connected to the output but not directly there are some amount of nodes maybe for two hidden layers each with four nodes and every input is connected to every node and then every node is connected to every node and then every node is connected to every output and so on and so forth so I could be here all day trying to do this diagram and draw every connection between everything I'm not going to do that but all of the information about here is what is saved in these two files model dot JSON is a file that just explains all of these pieces the layers the out puts that in puts all of that stuff that is what is in model JSON I'm the moment I will just open up that file and look at it model got weights is an interesting thing so the magic of a neural network what makes a neural network work is a number that's associated with every single one of these connections known as a weight you could think of it as like a whole bunch of dials so I'm tuning the dial sorry I'm trying to get the dials in the right position so that it really makes good guesses about happy versus sad that's the training process once that training process is done I want to save where all those dials are all of those numbers are in this file this is a binary format file because there's a lot of numbers millions upon millions of connections potentially between a lot of pixels and a lot of labels a lot of hidden layers so this you'll notice like the file that we saved is five megabytes because it's tons and tons of numbers so it ends up but this is just a very small file with a little bit of text information about how this is configured okay I spend a lot of time on that only that's a helpful background to you let's go back and actually look at those files so now I've got those files the what I'm gonna do is I'm just going to drag them into a visual studio code which is what I'm using to code this right now but you could be using any environment look they didn't make it into the right place let me try that again I'll clean this up later but I want them in this directory great so you can see that they're they're model dot JSON model dot weights not bin if I click on this you can see you could start to you could start to see like all the stuff in it there's information about the input shape and is it flies in a sequential model and like what kind of algorithm that are using and oh is it dense and it uses something called soft matte all this stuff so this is way beyond the scope of what I'm doing in these videos but if you're interested in more about these details you could look at some of my videos that use tensorflow digests natively to understand more pieces here but you can see here this is we're looking for the weights file etc etc and this is really important this is something this is really just the tensor flow what tensor flow is would do natively but ml5 is helping with a little bit on top of it by adding these happy and sad labels okay so now all we have to do is load the model now okay so we're gonna go we saved that model and so the steps are the first thing we have to do is load the mobile net model so we're not actually saving original pre-trained image classifier we're just saving the bits and pieces that are like hooked into it so we can't hook into it until mobile Matt is ready so once we've hooked into what's mobile net is ready we can then say classifier dot load model JSON now there are two files model dot JSON and mild model dot wait stock bin but you if you I'm gonna fly to set up that if you just give it one file it'll look automatically for the other file in the same place there are ways of customizing the file names and their paths and all that but that's that you can sort of look into in the documentation but the easiest thing for just to do this and then I'm gonna say custom model ready so I'm gonna write another event function a custom model ready and there I'm gonna say custom model is ready so it's a two-step process we have to load mobile net mobile then is ready then load model dot JSON with the weights custom model is ready alright let's just run this zoom back out and there we go everything's loaded but I don't see any results hmm I don't see results why well this sketch was written with originally with code to train so I'm supposed to press the buttons and it train but now I don't need to train cuz I loaded the model so this is where I kind of like though I don't know what you should do next maybe you want to keep two separate web pages two seperate sketches one for training and one for loading maybe you do it all in one you'll actually see if you go to the ML five examples there's one that has like a button that you can like drag and drop you can actually like select files and load them and save them all on the same sketch but what I want to do now is basically a workflow for I'm done with the training so I'm not gonna ever train again so I can actually remove all of these buttons right they're no longer relevant to me the text that should show up at the beginning is just loading model and then when the model is ready I would say label equals model ready so let's run this now so loading model load model model ready and now once the model is ready all I need to do is start classifying and before I didn't classify until the training was finished the training is now irrelevant I could actually completely comment this out as well and basically I want to start training when the model is ready not training sorry I want to start guessing when the model is ready by saying classifier to classify got results and now here we go loading the model models ready happy sad happy sad and I can refresh the page again and happy happy sad alright so it works now you can train your own transfer learning model you could do this with the regression example too if you watch that video you could save it so I don't know share you can share models let's all share models with each other sharing share share your model with me let's see what happens alright I'm curious to see what kind of creative stuff you come up with what kind of in German the interaction that I've done here is like super awkward like I'm gonna press the button all the time and maybe you don't actually have to train with just video you could load a bunch of images so there's so many possibilities here and I look forward to seeing what you make and stay tuned for more ml5 videos I'm more stuff is coming yet what but where stuff is coming good bye okay all right everyone I think I'm glad that I did that a second time this computer went to sleep for no reason and it's very little going on in this computer oh okay so maybe that's fine somebody wrote a comment on my issue okay all right so I'm done there okay that's gonna be a good one to release now we are gonna move on to something totally different what time is it three o'clock actually so now I need to release this example so I'm going to delete the model and the weights I'm going to delete the model and the weights I'm going to I just want to leave this I think what I'm going to do is leave this example with this stuff here and then this is tricky comment out loading this comment this out so this example is now left in the training state but it has the loading code in it but comment it out and so now let me just put this we just put this online code from fright save blowed live stream save load ml5 so this is now it should be in the websites I'm going to create a pull request here this is the code from eleven nine live stream I'm not sure if I should make this two examples or just one for now the save it the loading code is commented out okay so I'm gonna create this pull request and just bejust these files yep okay good great so that code will be on the MF on the coding train website just for people who are looking there is also this where yeah this example I had an open so this is the same exact example I'll note though that like this example uses a button that you can like select and then select files and load them so there's a lot of other ways of approaching this so here's yet another example with sort of more features that you can look at okay [Music] alright so now what do I want to do alright I am going to go to the desktop and and I just want to get I just want to have like a p5 sketch in that directory that I can kind of start using and so let's let's get rid of everything here and here and index quick draw okay okay now what did I minimize that so I need the browser and I draw data there we go okay and then this is part of hold your own API with node where's that okay okay yeah that looks like there's a discussion in the chat about why I'm using the a separate terminal and then what if that one thing goes away so I don't know why is this keep this camera keep going out very like a loose cable or something there we go okay okay okay okay okay everybody everybody settle down we're gonna do something really fun oh this is empty this is the last thing I'm gonna do before the weekend and there will not be any live streams next week unless somehow I figure out some magic way to live stream from thinker con but we'll see if that's possible or not and all right now I think I am ready I think I am ready I'm all the pieces that I want this is actually I'm gonna make this a coding challenge maybe the sketch art and stuff will be tutorial ish with ml5 but okay well I don't know what to do I'm gonna make this a coding challenge people watch the coding challenges more than if they're in the tutorial videos okay I'm just trying to do like my stretching because you know hold on match yeah I'll make a thumb I better make a good thumbnail for this really remind me to make some thumbnails I mean just like pose with the results okay okay oh hello and welcome to a coding Jackson you know what no no no no no no no no this this is this is what its gonna be okay I'm gonna start this behind me okay [Music] okay you a grand entrance hello hello and welcome to a coding challenges quick-draw edition now I have been talking about doing this for a very long time and I'm excited to finally try this on my channel one of my favorite data sets that is out there in the world is the quick-draw data set now here's the reason one of the reasons why I'm interested in this is not just this data set of 50 million drawings which is interesting and fun to play with on its own but there is something called sketch RNN which was developed by a set of researchers at Google Google brain and you can see some of them here who wrote this paper and explained how sketch RNN is a neural network a recurrent neural network that learned about how to draw various things from the quick-draw dataset and then can try and imagine and create new drawings based on how it learned and can even interact and draw with you so many possibilities so this is where I'm going with this I am going to make a sketch RNN has recently been added to the ml 5 library and I'm going to show you an example I'm gonna build that what's get turn in amplify but I feel like before we start making the artificially intelligent system that generates the drawings let's look at the actual data itself that it was trained on so first where did that data come from so apologies if I get anything wrong with the comments because this is not my project I am just inspired and enthused by it so the quick-draw project is a project the AI experiment made by friends from Google and it is a game that you could play where you say draw a pencil in 220 seconds ok here we go no no that's not really like a pencil is it if I put an eraser here no rocket I'm the worst yeah I don't know what that is either time is running out sorry all right let's try basketball nose or moon all right I win okay so yeah I could be stuck here for quite a while um now what you might not watch you what when you are playing this game your doodles are being collected and over 15 millions of players have contributed millions of drawings playing quick draw oh and I've used this before right I made a example with a neural network that tried to recognize your drawing so this has been done on my channel before but what I haven't actually looked at what I looked at before was I looked at all the drawings as pixels what's actually what's interesting about the data is that the data which you can find here information about and github is not pixels it's actually the pixel paths of the people making the drawings with timing information so you could load that data and replay any drawing back and each data each drawing is that has the word that was associated with it the country where the person is from who drew at least the IP address presumably and then whether it was recognized and then the actual drawing itself so what I want to do and you can see here that the format of the data is a whole lot of XY positions X Y XY X Y with timing what time was I at the first point the second point the third point then I might have lifted up my pen moved and started doing another one so it's a bunch of strokes so this is it's a little tricky because I can't use the word stroke as a variable name in p5 because stroke is a function that actually sets the pen color but the idea is that if I do this it's sampling a bunch of my points as I drew along that path each one of these is an XY point associate with a given time and then there is an array with all of the X's all the corresponding Y's and the corresponding x now what I'm actually going to use in this video is if there are a bunch of different versions of the data I'm gonna use a simplified version of it because these are huge data files and but I encourage you as an exercise to try to do what I'm gonna do but with the non simplified version maybe with the timing aspect of it but the simplified drawing files are are are the same exact thing the same exact thing but no timing information and also they have been sub a meaning you know you in theory as the person is drawing as the user is drawn a lot of points are being captured but maybe you don't need that level of detail and that's often referred to as like pixel factor or scale factor I believe or epsilon value I guess you could say simplify all strokes using the RAM or Douglas puker algorithm if I pronounced that correctly with an epsilon value of 2 so these are available at something called nd JSON now if you've watched my videos before you're probably familiar with JSON JavaScript object notation that is a format where you can store data that's in JavaScript rotation I have some videos about what is JSON ndj song is a funny thing ha-ha-hilarious it's like the most the funniest version of JSON but let and it is actually is a it's a set of multiple JSON elements each on a different line in a file so it makes sense to do that each drawing is its own sort of like JSON object on a different line in the file so let's go grab one of these files so getting the data we can actually go to the public data sets oops no I'm sorry I just want to go to the list of the files in the cloud console which is right here I'm going to say I agree and I don't want any I realize you can't see anything here so let's try to make this a bigger let me dismiss this right now and come on I guess I'll make the smaller I'll just zoom in so these are the different formats they're actually all the data in just like binary there's this numpy bitmap which is useful for other kinds of machine learning different things you might want to try the raw data but let's look at the simplified data and let's pick oh I don't know which model should I pick there's so many banana bandaged baseball basketball bat beach bear beard I guess I should do beard right that's kind of lame though birthday cake is there like a unicorn maybe there's a unicorn no was there a rainbow yes there's a rainbow all right so we use the rainbow so I am going to whoops download this file so here's the thing this is a very large file I had a reason why I was doing this challenge also this is a 43 megabyte file now I could just use some code in my client-side JavaScript to load that file and put it on the web and at some point I might show you some techniques for doing that stay tuned in the future but I think this is a good case where my video series the sort of module from my programming from A to Z class or the program with Tex class building an API with node and Express this is a case where I've got this what if I want to have every drawing some of them some of the there's just millions of them I don't want to like load hundreds of megabytes and gigabytes of files in my client-side JavaScript I could write a little note program whose sole purpose is to hold on to all that data and my client-side JavaScript could just request it so this could be because what I want to do is create an API out in the world for people to like get drawing information but this isn't data that I own in a way that I would necessarily do that we'd have to look at the licensing to see if that's even something reasonable to do but what I can do is on my computer here right the idea here is look oh I'm gonna make a server and the server is gonna hold all of the drawings and then my p5 sketch can just say hey can make a request like a get request please could I have a rainbow and then the server is gonna send back just a single drawing it's not gonna send back hundreds of megabytes of data it's it's storing all that data but it's gonna send back just one piece the interesting thing is this server can easily just also run on the laptop so and I could connect to it so there's a variety of ways you could deploy this and use this but I'm gonna do it all from this laptop alright so to run a server known and Express you could go back and watch some of these videos where I step through this in more detail I'm just going to start an in the directory in my console then I'm going to say NPM in it and I'm gonna call this a coding train quick draw example and it's version zero point zero point one it is an example that I am making on the coding train and you know whatever I'm gonna skip through a lot of this stuff yes okay so now if I go to my code you can actually see I have this package JSON file the package.json file has all that information that I just entered this is the configuration file for my project notice these were central manager of this project now so I need a couple node packages to be able to make this work I need to use Express Express is what I'm gonna use to handle those get that get request this HTTP GET request so I'm gonna say NPM install Express and then I also need something to load that nd JSON file so nd JSON node let's just mmm I've actually used this before but let's look so this is a node package for loading an ende JSON file so I'm gonna say npm install ND json great there we go and now i meant i to show you what is that ndj oh i got to grab that file now so I also need I'm just gonna rename this to rainbow MD JSON I'm gonna drag it here into my project so now this is a huge file and so you can see that Visual Studio code is like freaking out it's like I don't want to deal with this file because it's too big and I'm not but you can see that what this is is every single drawing on what on one line so it's like this is my like database essentially a database of rainbow drawings okay so what was i doing back to the code in the server oh I don't have a server yet I'm gonna add one I'm gonna call it server Jas I can call an app that jsr in that index yes and here I'm going to go back to this and basically I just want to do exactly this so the first thing I want to use this I need the file system module so I'm gonna say Const FS equals require file system file system is a module that comes with node I don't have to install it but I also want the nd JSON module which did doesn't come with node but I've added it and here we go and we can see by the way that when I installed those they are now dependencies in the package.json file and now ah there we go now this is so what is this doing this is streaming it so this is really useful it's a huge file rainbow dot nd JSON I certainly could load it just using loading the file into a big string chopping it up and parsing it but when you have a big file like an ND JSON file you want to read it as a stream essentially one line at a time because it could be like a gigabyte file I'm not gonna in this case I'm just gonna say like I'm gonna make an empty array and every single object I'm just going to push into that array but let's console.log them just to see that this is working so this is the stream well as it reads line by line by line the nd JSON file it's going to console.log that object okay so let's let's go here and I'm gonna say node server yes and there you go you could see this is it this is every single drawing it's gonna take quite a while because there's thousands and thousands and thousands of them but you can see this is the word this was the country code this is whether it was recognized it has an ID and then the drawing is in these arrays which aren't console logging but I can get access to them wonderful so I now have an array that has every single every single drawing in it now how do I get access to that I need to be able to make a get request to the server so let's see how we would do that so I need to make an Express server e thing let's just look up Express and go to the kind of like quick getting started hello world like the hello world Express example is all we need basically I'm going to grab all of this and I'm going to put it into my code so what's going on number one is I need to require the Express library I need to create an app which is calling the Express function I'm adding the semicolons gosh darn it I need semicolons to live I can't I can't do without I'm I need to pick a port so port this is somewhat arbitrary but we used to port 3000 and then I'm going to set up a route so the idea I prefer to be a little more long-winded about this this is using the arrow syntax which is a kind of es6 JavaScript syntax and I'm just going to I just I I have to I just have to do things the way that I do then so there's two functions that I care about with my app one is that I needed to listen on the port so this I'm setting up the sub creating a server and that server is listening because ultimately I got to get to that pin five sketch it's gonna make the drawing haven't even gotten there yet now I then want to set up a route and then when the user makes a request of that route send something back so in this hello world example if I run the server and go to localhost 3000 it says hello world but that's not what I want I don't care about sending hello world what I want to do is let me make a route called rainbow then what I'm going to do is I'm gonna say let a random number equals math.floor math.random times drawings dot length so ever many drawings have been loaded when somebody goes to this route pick a random one and then I'm gonna say and this could be a Const I guess and I'm gonna say response send drawings index R and I suppose I should call this index so now whoops index let's rerun the server and there is a tool called node mod which will restart the server for you I'm gonna do this manually and then I'm gonna go here cannot get / because there is no route anymore at / but if I go to / rainbow there we go there is the drawing hold on a sec timeout for a second let's go to sworn I have a this like a extension that will format the JSON but I guess I didn't alright I just installed a Chrome extension to format the JSON so I could see it so here's a random drawing and this is all the information now all I need to do is have p5 request JSON from this route and then render the draw and pause for a second I think I must not doing multi-part videos this day all right oh there was up some there's been some new members thank you very much all right so now the question is where do I run my p5 sketch and there are a variety of ways in theory this is an API that anyone could make a request to whether or not I'm opening it up for other people requests to it or not is a complicated question but one way that I could use it is just have this particular server host a p5 sketch in the first place so the way to do that if I go back to my files and I go to a desktop quick draw this is where all the files are I'm actually going I have a p5 for HTML file and a and a sketch dot J's file in here but I'm going to make another directory called public so these would be the where I want files that are hosted by the server to live public and then I'm gonna say something like in my code app I don't remem static file hosting Express serving static files and Express is just this so basically what I want to do is serve up the HTML and the JavaScript files as well so I'm going to do that here I'm gonna add this so now look at this now and let's go to the p5 code and let's say you know background 0 so I all let this p5 code does is create a 100 by 100 canvas with the background of 0 so now guess what if I go to localhost 3000 slash rainbow I get a drawing because I'm handling that rainbow route with a bike sending back a drawing but if I go to just slash oh oh I didn't restart the server did I we've restart the server go to slash there's the p5 sketch so now my p5 sketch can finally ask for the server for the drawing okay I'm gonna go over here and I'm gonna say first of all one thing is by the way that simplified data set all of the simplified version of the quick-draw data set all of the drawings were simplified or scaled to 255 by 255 pixels so that makes things easier to work with I'm gonna call the function load JSON and guess what I'm just gonna say lo JSON rainbow cop rainbow right yeah and then I'm gonna write a function got rainbow that gets some data and I'm gonna say console.log data so this is the idea now know if you've seen load JSON before maybe before I've used it for like load this actual JSON file or maybe I've said load JSON from an API like word NIC now I'm going to the slash rainbow route which is local to this particular server and guess what I don't actually even need to restart the server because this this will be loaded dynamically so let's go here and we can see there it is this is the rainbow drawing right here I'm gonna give me some more room and here's the drawing itself so all I need to do now is write an algorithm to go through and draw destroying all right we're ready so let me make the background like 200 and let me say the drawing is in dated drawing is that right console.log drawing look at that yes so this is the actual drawing it's just two arrays because it was just two strokes now I am going to say for let I equals 0 I is less than drawing dot oh did the mean let me figure this out array this is an array oh right Oh weird I'm sorry I'm blah oh all right okay so I have a draw this is only one stroke that's why this was confusing here some of these rainbows there we go this is what I want to look at I have three different strokes so first I need to look at all the strokes sorry so I want to say let and I'm going to call it a path so for let path of drawing this is each and every path path 0 path one path to then each path has a bunch of points that's 0 has 15 path one has 10 path to has 6 I'm gonna say 4 let I equals 0 is less than path path index 0 dot length because this and then the X is path index 0 index 1 wait no patty X I oh sorry this is confusing and the y is path index 1 index I right so this is what I'm doing I am looping through 0 1 2 that's the outer loop the each path each path is 2 arrays the path C Row is all the X's path 1 is all the Y's I need to look at all the X's and all the Y's and then set a vertex X comma Y so I can say begin shape and shape I can say no fill stroke 0 whoops stroke 0 and maybe I'll say stroke weight 3 just to make the lines a little bit thicker and let's see what I see there we go rainbows rainbows these are everybody's rainbows each time I hit refresh you know one thing I could do now is when it finishes I could just say like lo JSON again ooh maybe I would want to redraw the background every time that might make sense and here we go this is a random drawing over and over over again so I could start to do things like request a specific drawing from a certain country I could download different scan I mean you know different models like let's just let me pause for a second and grab another model so let's get what's a good one Apple asparagus acts by mean cat is sort of like this typical one so let's just do cat so many all right I downloaded the cat file now and I'm just going to put that in here as well whoops did I put that somewhere weird no I'm sorry sorry let me do that again delete shoot um hold on sorry everybody here we go okay so I downloaded one more set of drawings the cat files so I'm gonna the cat drawing so I'm going to copy that into here and we can see now I have cat MD JSON if I go back to my server I could do I'm gonna say I'm gonna call this rainbows and I'm gonna do a different one for a cat and I'm also going to do cats cats push object and then I'm going to make another route for for cats so now if I run the server and I go back to my actual sketch and I switch to going to the cat route now where was that Here I am I'm going to hit enter oh I got some issue a cat internal server error so what's going on here drawings is not defined so I made a mistake in my server oh this is over here is rainbows length and this is cats dot length and I would have seen that error here if I was paying closer attention there now I've got cats and now let's look at a lot of cats oh oh it's still giving me rainbows did I not hit save load JSON cat Oh low JSON cat whatever I'm not being too thoughtful about this give me the cat run the server again let me refresh this page it's still rainbows cat cat got rainbow somewhere I messed this up cat cats ah this is what I get for trying to code so quickly this is supposed to say cat dot JSON cat MD JSON now here we go oh we have to restart the server and here we go finally cats there's a lot of different cat drawings I really should slow this down like let me just slow this down a little bit oh here's what I want to do actually oh this video should really be over but you've already watched this much watch a little bit more right I really want to draw draw the drawing in sequence now I'm not I don't have the timing information and that would be useful to have but let's let's make it actually animate so I'm going to add a draw function I'm not gonna add a page transition event and so when I've got a cat and I'll just change this what I'm actually going to do is just set current I'm is just a set cat equal to data so I'm going to take out all of this cat equal to data dot drawing so I'm gonna comment this out let's think about this and then I'm going to say let X comma Y and I'm gonna have I'm gonna say if cat then I now need to keep track of where I am let stroke index equals zero let let pen index equal zero so I need to keep track of two indices right because I'm going to walk through one at a time the each vector of the first stroke and then I'm Strokes going to go from zero to one and go through each of the other ones so if there's a cat the first thing I need to do is say so if I'm gonna say x equals and what was this stuff it is path o path drawing so cat index stroke index index pen index roof index 0 boy this is really awkward about how it's like using just arrays for everything but I'm in the first stroke in the first pen is not the right term I don't know what to call it vertex but whatever I could actually just call this index maybe the stroke index and the index then 0 is for X and then 1 is for Y and let me just just to see that this works let me say point let me say point X comma Y and I don't these don't need to be global so let's see what this does and so first of all let's just run this oh boy I freaked it out it won't ever stop well I think by the way I killed this I need to build in a little more of a delay with these API calls so cat is not defined sketch dot J's line 12 if cat that needs to be a global variable so and let me just say here console.log X comma Y let's see did I get an X comma Y yes so I've got that first point over and over again and presumably 52 comma 48 I don't know why I don't see I guess I need to say stroke 0 stroke weight 3 there we go so there it is that's the first point so now what I need to do is say index plus plus if index is greater than or equal to cat stroke index dot length then stroke index plus plus and index equals zero so this is me marching through them one at a time so oh and I don't have the Y right you can see that something's wrong here I mean this let's see next less fuss I think this is right well the point of this is what I actually want to do hmm timeout for a second I forgot the variable well that's probably an old comment from the floor hold on I need a little break for a second why does not work something is off about this do I have these in the wrong order hold on right it's going zero zero zero one one zero there were 17 oh no no I have these in the wrong order that's weird I have these in the wrong order like I think it should be zero index it actually works this way doesn't seem more like the cat it's this this is what it is of course right because stroke index then zero is the ex's one is the Y's index is going up uh and then this there we go yeah yeah it's hard to see but these are the cats okay I got it now all right let me go back to where I was all right and once it wasn't paying attention if I look at how those arrays are organized the for the the its it I'm sorry okay something is terribly wrong here and actually I have not been carefully looking at how those arrays are organized very confusing to like stir all these data's in arrays but there are eleven strokes and there this stroke has 23 points this stroke has nine points but notice that the I have the order wrong right this is an array of an array of arrays and so basically the stroke the the zero element of the stroke is all the different X values and this is one element of the stroke is all the different Y values I had those out of order and then here the number of points is not the number of strokes but rather the number of X's so now if I redo this I should see I can sort of see it drawing oops you can see the outline of a cat there if I you can start to see if I the outline of a cat here of course it gets stuck at the end it's giving me an error so first let me fix that error so the error that I need to check is if stroke index equals a cat dot length then I'm done then I'm going to say cat equals no I am going to say no more to the cat and there we go so this is the drawing the cat now of course I'm just drawing all the points I need to connect the previous points to the the the other point so I'm going to add a previous X previous y and then I'm going to say here down here previous x equals x previous y equals y and then here I'm going to say a line between previous X previous y and x and y now it should do nothing when those values are no so now we see there ooh oh wait a sec no no no no no no aah when I get to the next stroke then I need to say previous x equals you know undefined again and previous wide well son because I don't want to draw they I don't want to connect the strokes so that's a little bit of an awkward way of doing it it's still doing that isn't it so and then I want to say if previous X maybe if I do this does not equal undefined then draw the line let's see if this works whoops sketch the line 19 I always have this extra equals there well weird it's still connecting everything lovely little cat there what am I missing right I don't want to draw the line these are undefined at the beginning oh it gets set to here so I need it else here else like don't set it if it's at the end okay there we go finally we are drawing cats now all I have to do you then when I reset there I can just ask for a new one so let's ask for a new cat and whenever I've got a cat let's draw a white background let's make a little bit gray will set it gray at the beginning there we go now here we go we're now going to draw lots of cats that you finish Wow then get another one sketched on line 13 cat is undefined and then there should be no more cat until I've got a cat try that again there we go I don't know what did wrong like it's true the cat is it asking for a new cat should I say no loop and then when it gets a cat say loop Oh stroke index needs to be set to zero okay thank you to the chat hey hold on Matt you you can like edit out me trying to think about this for a minute thank you to be I am so me and Louise both in the chat who just pointed out that my my technique here is correct but the issue is that I need to reset everything back to zero so here I need to set stroke index back to zero and I think index will already be zero yeah index is already zero so yes that stroke Enix needs to go back to the beginning and now I think we're ready to enjoy a whole bunch of cats [Music] patro eggs alright thanks for watching this coding challenge with the Google quick-draw dataset stay tuned for a future video where I show how to do this is where I show how to create new drawings with a sketch of RNA and model the machine learning model that was trained on these roads and if this was one of your drawings thank you for making this beautiful package and I'll see you in a future Cody [Music] [Music] this is like immensely satisfying like I could just watch this all day yeah is it not finishing the drawings [Music] well I should give it a little like delay like if I did set time out let me just make a function called new cat [Music] Oh what music I just played weird so now let's take a look and I just give it a little delay what's what what thirty-eight miss something odd I mess something up with my yeah I think I think that's right is it finishing it I think it's finishing the cat it does sort of seem like it's not doing the very last one right yeah I don't know that's way too long to wait people who draw - Trish yeah all right everybody now is it it's not even four o'clock yet do I dare dare to sketch RNN oh right because the Google quick truck guessed it before the person finished that's interesting yeah I think I might be done for today did I do what I said I was going to do this when we just look here sorry I'm looking here to think about sketch our end so people are this by the way is not this by the way is not sketch RNN just to be clear this is the these are the actual drawings not the imagined drawings I feel like I I think I'm done for today what did I what did I make today I got the logo part to done I got the I got the looks our logo part to the ml5 save model and the quick draw stuff I think I want to wait till sketch RNN is in within the documentation of ml5 so I will come back and do that another time plus I feel like yeah alright I could watch this all day let me make sure it's actually doing the last bit let's think about this if stroke index equals cat length yeah this it has to have done the last one right so let's let's not do this for a second and let's console.log yeah it's greater than I think yeah I think it's doing all of them I'm looking at this code it wouldn't be skipping one because this is an index is invalid here and then it goes up it's resets index to zero it'll loops back around and starts over yeah it's got though it's got to have gotten the last one just try going one further it'll break and you'll be right yeah yeah I mean I could say or something yeah it broke sketch that just line 18 broke interesting so I think maybe it wasn't maybe it was not getting the very last one of each stroke why is that that's crazy cat thank plus-one index goes up oh because I'm pulling it here and then index goes up by one that doesn't make sense I'm so confused my brain is confused me I am so me as typing this means the answer is about to come through the last index won't error yeah that won't error it's just gonna be undefined okay so I'm good it's the same right okay I'll just be undefined yeah all right we're good we're good everybody my mental math is still correct all right thank you everybody it is 4:00 o'clock I think I am finished I just want to like is there any last little bits of stuff that I want to like cover or talk about today um pac-man yeah thank you everybody so let's see I could put this code somewhere this will be so let me do a little quick just so the code is ready I'm going to do this now so I'm going to grab these three files I'm going to put them in a website coding challenges so I need to make the question is is was code was this morning like part 2 of logo I think it kind of was let's so this will be 122 quick draw so that stuff goes in there and let's do let's change this to 1 and then also make a version 2 sorry if you can't see this and then I'm going to go to desktop logo this should be everything for this version so now if I go to really messed up here because I didn't let me just only merge this this was the code from save/load livestream all right I'm gonna merge this and then okay and I'm going to get Branch quick-draw checkout withdraw get get ad coding challenges on 22 quick-draw code from quick-draw challenge push for gin quick-draw okay let me go check out master and what I want to do is shoot have an idea here what is this nonsense there's some extra thing here that I'm going to just get rid of it branch logo get check out logo and hold on now logo one logo to get a doc - a moving logo code around and adding second parts and get push origin logo so I should have to separate pull requests now welcome to weird things with github so I should be able to pull requests this this is the quick-draw code [Music] or challenge 1:22 ooh well wait why is my what sort of set of tabs is this what have I been using for space tabs all this time and not notice it like there's like 18 space tabs this is insane what is going on this look like two spaces tab size to render white space all hmmm oh those are tabs why is it what's setting in vs code is changing those two tabs oh my goodness this cannot be what am i forgot if I'm using prettier eye I switched everything in my workflow but I never actually did it on this am I do not how I have alright alright let's see oh this I have this crazy thing indent with tabs indents size 400 let's let's disable this for a second let's let's install this prettier thing reload okay oh what a mess where am i oh oh who knows where I am I'm lost I've ruined everything I'm in the quick-draw thing I want to be in the website thing looks oh what a mess I've made of everything logo 1 yeah these are these are fine yeah there we go ah oh no it's inheriting do I need to react reload this thing No prettier default two tabs false semicolons true so these are all the settings oh I've gone off the deep end here so people really watching me do this right now right where is the chat hold on Oh github it was rendering in a 6 space tabs okay hold on editor tab size to vyas code prettier settings let's see this yes yes prettier ah here we go here we go prettier oh there's all these things here okay great great great great great prettier table with two that's nice I fixed that and then what was the other thing that I want now is Oh hold on prettier spaces spaces use tabs that must be right false that's the default value this is very important what I'm doing right now no wait - why why is this one still tabs why is this one taps what have I done what have I done to deserve this insert spaces when pressing tab Tech Center auto auto indent yes detect uh I don't ever want to use tabs let's try that no but it's not even formatting it huh uh hold on why is this why have I lost my format on save format unsaved true detect indentation false restart prettier yeah that's a good idea let's just restart whole thing weird let's go to extensions prettier now okay let's try this well it's not formatting on save and now it is I don't need this though I saved it as a new file a tenth reformatted it there fix it this is fine this is fine and this is fine don't know what was wrong with that one file this is spaces this is spaces and spaces not tabs well how is scary oh but my quick-draw stuff oh hold on hold on pull requests oh I didn't actually make the pull request okay so hold on now everybody just relax I can't believe like how much time what was it called quick-draw uh hold on wait where's my own quick-draw yeah we go to this branch and then here that spaces tabs oh this file - what is it with the files that what if I like manually like why are certain files not formatting that's so weird I've never seen this whoops format document format say format selection whoops oh that did it format selection did it I can't explain it where am i but that did it right yeah okay oh it's this cuz of this file maybe yeah because I'm in this repo that's probably why it must be like picking up oh it's picking up settings from here yeah all right that's got to be it all right I know the camera went off alright let's finish these pull requests people oh wait now hold on let's do the quick draw one first this is the quick draw code for challenge 122 if we look at this there look at this look at this nice normal normally indented code okay now let me do this this moves challenge 121 into 121 underscore one and adds 121 underscore two for the second part of the logo challenge it shouldn't be merged without fixing the markdown file for challenge 121 part one first so let me do that what does this get repeat oh yeah okay what kind of crazy code that I write earlier today okay all right I'm definitely done I like I really want to do more but sometimes you just have to know when to quit I don't usually know when to quit I would be glad to take any questions a few questions thank you to new members who joined [Music] actually okay so let me do a little a few housekeeping me I can't imagine that anybody's still watching but if you are I will mention that I am way behind on sending out stickers and books to patron and YouTube members I am really this is my goal everybody joined November first or earlier sorry if you join the last week cuz I compiling everything I've got to get everybody everything by the holidays if you do not have something and are wondering about the status of it please send me a message on slack if you're a youtube member you don't have a slack invite then make sure you find the community post which has the forum to get a slack invite and also you can message at math blank on slack who is if you are interested in coding train merchandise I might as well plug this just for a second because it's new actually I am wearing right now this is uh one of these shirts it looks like I am disrobing don't worry I am NOT I'm just showing you my never forget it was kind of like translucent never forget that this dot shirt you can get your own never forget the dis da shirt designed by human slash shop slash coding trained and believed so you can see these are the various shirts and things I wanted to mention people have it's hard to notice this but this phone case here is $35 that's crazy but this is actually designed I should probably make this a default for a zip hoodie where they never forget that this dog is on this side all right we just want to mention that other housekeeping things let's see what other questions there are what do you think about Gans or generative adversarial networks they are very interesting to me and I would love to learn more about them and maybe do some tutorials about them a wonderful artist who does wonderful things with gann is yes you should check out Glogau lista on Twitter who makes all sorts of amazing again related projects yeah [Music] [Music] I'm not going yet waiting to see if there's any more questions my mic is very quiet that doesn't surprise me because I like it got moved around but hopefully it's fine now thank you effect for letting me know this is the end of today's livestream today I'd like about four hours of live streaming today I won't I'm gonna be gone for they're quite a while because of thinker con and Thanksgiving so apologies in advance for that hopefully I'll be able to catch up a lot of content when I get back we have a lot of notifications here on Twitter I look at these layer this is the coding training account I should do a coding train gift basket option for an excellent shot sure or sense a cloak OS are you planning to step up on your debugging game I know I could do better yes no I'm not planning to but I appreciate you I mean yes I mean I I I think that it would be helpful for me to develop continue to develop better strategies for debugging to demonstrate do you mean you don't like my technique of having a bug you just sitting there going like this you're like maybe the chat will tell me what's wrong in just a minute do you cook Tim asked do you code any other languages than JavaScript yes so I do a lot of programming in Java specifically using processing which is a Java based platform you can download here I actually was thinking of doing the quick-draw stuff in processing because loading the big files I didn't want to deal with the server but then I went ahead and did the node things I thought that was interesting okay [Music] [Music] [Music] just use debugger in the JS file and chrome will stop at that break point for you I should probably try that at some point that's a very good suggestion thank you thank you Juke for your kind comment what classes do you teach and what are they about code all right so uh very quickly I will answer aki mcs question thank you to aya Luis Misa who's added who has added to pull requests so I teach classes at New York University and participle of the arts there's a grad program called ITP and an undergrad program called ima and then online I make videos for this YouTube channel and some of them are loosely grouped into things that could possibly somewhat be classes but I haven't really cracked that nut yet of like this this thing on YouTube is a course that you could take it's really just a lot of content and hopefully inspirational and helpful but in terms of the actual things being a course the place where you can look and I'm true to one thing is I'm really trying to do is in theory I would like to continue to work on and improve the navigation here so there are some so in theory I would like this website to be a place where it's easier to find the packaged courses right now if you're looking for that I think if you go to coding trained YouTube coding trained playlists playlists and if I do all playlists whoops you can see like but you know this is a big mess of things so I'm trying to figure this out and some things are organized for example you can see here these are the beginner JavaScript tutorials playlist one through seven playlist eight etc these are some playlists associated with neural networks in machine learning this is an old antiquated Twitter bot tutorial that probably doesn't work anymore these are some old nature of code videos here's the beginner processing videos get github but again I please somebody save me and help me figure out how to organize all this stuff okay why not create a storyboard for the website yes actually so Matthew if you go to the github repository for the website if you go under issues there are a few different issues that are currently tracking the dis discussion so this is one proposal to have the website organized as coding challenges beginner playlists and then other courses that are not for beginners so that's one thing that and then all the live stream archives so again this is like anneals webb has done and many other contributors but Neil's web in particular has done a tremendous amount of work Niels Niels Weber is a student in germ and web developer in Germany and so so thank you so much to Niels web and I am certainly happy for people to contribute and participate in the development of the website I haven't figured out really like a structure to do that but it's happening in a sort of ad hoc basis [Music] Tushar Mishra asked last question do you game alright you're gonna be sorry you asked if you go to youtube.com and you search for EOD gaming this here with 166 subscribers is my gaming channel with my kids who I'm very conflicted about but this this video is really what I would recommend my daughter I played like snipper clips or snipper clips for an hour and 40 minutes and it's a wonderful game and hopefully we'll do this again this weekend sometimes but we do live streams trying to play I love this game so much it's so much fun of course I got a copyright notice because I use the snipper clips oh look at this like I'm on my own youtube gaming so if I go to like gaming YouTube calm look at this yeah so someday this is gonna be even bigger than the coding trait I don't think so alright everybody goodbye thank you so much for tuning in I am going to now stop this livestream and go about go on with my life and I hope to hear from you see you you're coming to think archons let me know I would love to see you there I'm so excited about it okay this is playing it what's fun is to put this in double speed come on we can get it in that basket well though I have to it's hard I just have to wait this took us so long okay come on well maybe I'm probably gonna get deep copyright notice now in this video there you won't be all day you probably can't really hear this can turn music off oh [Music] boy oh come on I'm like reliving this it's so painful I really have to go okay goodbye everybody you could go and watch this video on your own the link to I will link to it in the chat or somebody can link to in the chat for me it is this we had so much fun alright goodbye everybody I'm gonna stop streaming now see you next time won't be for a few weeks so stay tuned if you want to get an alert when I scheduled the next live stream subscribe and then click that alarm bell is the thing you're supposed to do if you want okay

Channel: The Coding Train

Views: 10,697

Keywords:

Id: fnoOFQK3tPQ

Length: 145min 42sec (8742 seconds)

Published: Fri Nov 09 2018