Welcome, a few things. Who here was at my talk earlier on today? Who was at my talk earlier on today? OK. Who wasn't at my talk earlier on today? How about that? OK, one, two, one. Yeah, he wasn't. OK, cool. I will repeat through a few things pretty fast. So what we're going to cover today is two things, really. So we're going to cover two examples we're going to work through with TensorFlow.js. One of them we're going to use that mobile net model, which I talked about today in the talk. And the other one we're going to do regression. So we're going to do an example. It's going to be called linear and polynomial regression. And that's all I think we've already got time for today, because we've only got three hours. We've only got a little bit of time today. If you wanted to do a full one, this is like an eight hour plus workshop. We've only got time for two. And what I'm going to do is I'm going to have, if I can have you all join, how about you check these links? I just created them. Do they work? They don't work. Oh, that is all an elaborate hoax to get you to buy more Microsoft stuff. I don't know. Why is that not working? So I made a slack so you could, is that really not working? Damn. How is that not working? Let me go here. Wow. Do I have to click something? What did I call it? TFJST? Oh, I know why. Let me check that. Boom. So hopefully someone tried out. It should be TFJSWS slash slack. And that's what I'm going to post, kind of bits of code and links and things like that to make it easy for you as you go through. There should be a room called JSConfAsia hyphen TFJS. Check out. This is actually the slack for our meetup group in London. So I recommend after the workshop, unless you're from London, leave the slack because we channel on out stuff all the time. New, what did you call them? Meetups. Yep, yeah. So I arrived last night. And I didn't manage to get to sleep all night. So I'm not too sure what's going to happen today. I mean, the other thing, oh, same here, should be TFJSWS slash mobile net. So basically, don't clone that. Visit that URL, and that'll take you to the GitHub and clone that GitHub to begin with. I'll give you a few minutes for that, yeah? Does people manage to log on to the slack? I have not checked their link at all. Has anyone successfully logged in to slack? Yeah, OK, excellent. I can't check it because I'm not on the thingy. And I'm going to try a new second screen. We'll see how that works. That is so weird. Oops, it's started to whistle. It's probably not a good sign. Sorry? The link's not good. GitHub? Not good. Yeah, it should be TFJSWS, yeah, WS. Sorry. One second. Where's my mouse? Where's my mouse? This way. One other thing, duet. Let me just two seconds while I set this up. Oh my god, it worked. The first time ever, it actually worked. First time, yes. So I am a bit... Yes, yes, yes. Oh my god, this is so exciting. Can't believe this is working. Boom, boom. If you just arrived, quickly take a snapshot of that screen because it's going to go in a second. I'm OK actually, yeah. I've got it all sorted. Actually, why am I facing this way? It's the wrong way to face. I'm going to face you the other way. Yeah, sorry. I'll just fix it. I keep on saying it. I'll just fix it, hang on. Oops. The second one is WS, both from a WS. Yeah, both from a WS, TFJSWS, yeah. That was my mistake. Just going to resituate myself. Things are going to get a little bit iffy. I'll come out this way. This is the way I'm going to come out. Sorry. You want to see the entire way? Yeah, facing out is probably the best way. It's OK, it's OK, I'll turn it around. Boom, boom, boom. Oh man. This is just spectacular what I'm doing here, isn't it? I'm going to unplug and plug into the... That thing, OK. Now you have to wait again. Yes, OK, if I was right. All right, here we go. I'm just going to go. Just going to go. All right, so hopefully everybody's got that. If you weren't at my talk this morning, I'm just going to very, very quickly go through some of the things I went through again this morning. If you were at my talk this morning, consider revision. So I run a co-run a meetup group called AI Jobs London. This is where you can find out information about me, especially my Twitter. You can follow me on Twitter, if you want to do that. Follow me on Twitter. Oh, if you want to take a picture, let's do a picture. After later. The agenda today, so this is all what we're going to cover, is we're going to have a really brief overview of neural networks in TensorFlow.js. If you were at my talk this morning, then that's going to be old news. Then we're going to go through MobileNet. The thing I again, I showed you this morning, we're going to very, very quickly go over it, to start dipping your toe into some of this stuff. And then, and I'm really sorry about this. There's just no way around it. This is like, this is the gentlest I can do it. This is the gentlest I can do it, but it's going to be a steep ramp up from MobileNet to regression. But this is the simplest use case that there is. So I apologize. No, I don't apologize. This is just your life, if you want to do machine learning.  We're then going to go through what's called regression, linear regression, and polynomial regression. Hopefully, quite a lot of this, you're going to be sitting there on your computer tapping away, working, trying to fight yourself. And I'm here if you've got any questions. I'll try and help out as much as I can. Turn to the person next to you. To your right. Turn to the person to your right. To your right. Say hi. Welcome. That doesn't make any sense, does it? It doesn't work at all. Say hello and introduce yourself to the person to your left and to your right. Right? OK. Say hi, Asu. Christine, nice to meet you. Good. Help each other out. There's a lot of people in this room, and it's going to be very difficult for me to cover off and answer questions from everybody. If you solve something the person next to you is struggling, help them out. Help type on Slack. If you see somebody asking questions, type on Slack. Help each other out as much as possible. Because it's nice to do that. Yeah. So introduction. So what we're going to be doing is very different types of machine learning. We're going to be doing, well, yeah, supervised machine learning today. But essentially what you do is you get some training data in this type of model. You get some training data. And that usually is something that a human being has labeled in some way. As in a human being has looked to that and said, oh, I think this is this, or I think this is this. And you take training data, and you define that algorithm. And then you train it. And what that generates is a model. There's lots of different types of classifiers. Many, many different types of them. What we're going to do today is using a neural network method. And now it's a model. And let's say this is a model which you trained it up using sentiment analysis with some words. So I knew if a sentence is a positive sentence or a negative sentence. And then when you give it something it's never seen before, like I love ASIM, it can say that's positive. So that's kind of what this stuff is really good for. You train it up on one set of data. Then you can give it something it's never seen before. And it can come to a conclusion as to what that is. That's kind of opposite to what we'd normally do if we're programming. You have to kind of always think of every single edge case. And it'll only ever give you an answer based off of what you program. That's kind of the underlying fundamental power of machine learnings. It can kind of infer and give you answers to stuff that you've never even seen before. So we're using TensorFlow. It is currently, I still think, the most popular open-source package for machine learning. This is an old slide. At the time, the next biggest thing was Psyc at the level, which is 30,000. But TensorFlow was 100,000. It's probably been surpassed a lot. As I said this morning, we're using TensorFlow.js. TensorFlow.js comes with two different APIs inside, two different kind of APIs. You're something called a core API, which if you're using TensorFlow, like Python and other versions of it, that's what you'd see as a core API. It's very low level. If you looked at something like that, you'd have to really squint to see the neural network. It's kind of like looking at a program and trying to figure out exactly what it's done. It's like the building parts of a program. So if you're really just doing neural networks all the time, there's lots of abstractions that you can use. And for that, there's something called Keras. So if you're doing it in Python, you use Keras, which gives you a high level abstraction. All you're doing is a neural network. But normally, that's a separate package. But in TensorFlow.js, they've combined it. So there's actually two APIs in one, the core API and the layers API. However, today, you're not looking at a layers API, because we don't have time for that. You're going only for the core API, but it's good to know. What I'm going to show you in the core API is going to be like this many lines of code. And if you use a layers API, it would be like two lines of code or something. But I think it's good to understand how things work underneath, because otherwise, you don't know, you're just using some line of code. Neural networks, pretty boring for the rest of you, because this is exactly the same slides as it is today. But anyway, based on biology, so it's a neuron. You have dendrites going in, a body, and axons going out. If enough electricity flows in the dendrites, the body goes, ah, I'm pushing some electricity out of the axons. That's what we do here. But we're doing the exact same thing just in code. You have a node. The electricity going in is your data, one sample of your data that you're pushing in. So whatever that is, I'm going to go through it. But whatever that is, then you have these edges. And for each of those dendrites going in, you have to know how important that piece of input is to the end result. And to that, we have something called a weight. Initially, this is randomized to a random number. You just push them through an activation function, and you output one. Whatever the activation function outputs, you then pipe that into the next one, to the next one, to the next one. There's loads of different activation functions, which this is one of them. Very simple. Anything below zero is zero. Anything above zero is one. As I'm speaking to you, I realize that throughout what you're going to cover today, we're not going to touch on an activation function. But it's good to know, because we're not going to use, because normally when we're using a layers API, we start touching on the activation functions and stuff like that. Anyway, it's good to know. So this is one of them. It's good, because it's really easy to calculate. And anything with machine learning, you want stuff that's easy to calculate, so it doesn't require too much processing power and compute. But it's really bad, because tiny changes, and tiny changes in the input, is a huge change in the output. So there's other ones that people use. This is a hyperbolic tan. It kind of gives you a little bit more non-linearity. But this is a really common one, which people use called ReLU. And if you actually covered off more, the rest is free. I can point you out to the two further examples you can do when you go home. When you go home. And they'll show you examples, and they'll be using ReLU, but this is a good one. It's a nice compromise, because it's kind of easy to calculate, and does give you some non-linearity, so it's kind of nice. You kind of pump it all together. You create loads of those. You join them together. You're not going to do that today. It's too complicated. You're going to do one neuron.  You're doing one neuron today. But if you did, you wanted to, you can connect a whole bunch of them together. And if you use the core API, you would literally be creating a neuron, a neuron, a neuron, a neuron. If you're doing the layers API, you just say, a layer with three, a layer with two, a layer with three. And it kind of figures the rest out for you. But that's what you're basically doing. Then you feed in some input data, whatever that is, whatever you're trying to train on, depends on what that is. It just multiplies everything out and gives you a number. So I can't remember what did I say. This was my example with the faces today. But what did I say? Why have I not got the faces in this slide? I don't know. But anyway, this was supposed to be an example of facial features. You pump it in. It gives that a number. Let's say we know this input data should be between eight instead of three. We know it's wrong by five. Of course, it's going to be wrong because we would have initialized the things randomly. And then what you do is you do this thing called back propagation or tuning, or essentially optimization. You're trying to change these numbers. So the next time you pass this thing, all this data through, it's going to give you eight. And that's what the training, we just work training in neural network. We're just training this stuff. That's what we're doing. We're just tuning these numbers using a loop and TensorFlow, so that the next time it goes through, it's just going to give us an eight. And we'll tune those numbers to some value. That's TensorFlow.js. That's TensorFlow. That's a really high level overview of a neural network. And yeah, that's right. So let's go through. So what we're going to do for the very, very first example. So once you've trained up one of those networks, you can actually then save them. I'll show you. Wait, what can you see right now? No, nothing. I want to mirror this screen. That's what I want to do. So I want to do, that's what I want to do. Yeah? Yes, this is what I want to do. OK. So if you go to, here we go.  TensorFlow.org slash js slash models. This is where you can find a whole bunch of the kind of pre-made models that are available that is growing. It's growing. So the one we're going to use is MobileNet.  There's a new one. So toxicity, I wonder if you've got a demo of it. What's the demo? The demo. Essentially what toxicity does is it doesn't just tell you if a piece of text is bad or good. It tells you if it's offensive and in what way is it offensive.  It's not an identity attack. It is an insult. It's not obscene. So you can see you can have an identity attack on what somebody is. So it's kind of an interesting use case, this one. I think this is the latest one they've got. It's growing. You can try finding some yourself. These are the ones that are very well nicely packaged. And it's just a really great way if you just really want to get started. I don't know what your JavaScript developer's here. So we kind of just like MPM installing stuff and then just getting on with it. That's a good way of playing around with it. Another really fun one. The two really fun ones here actually pose net is a very fun one. I wonder if I can start the demo myself. Try the demo here. Here we go. Do you know what? I'm going to be rude. I'm going to get somebody to volunteer. Here we go. I need to volunteer. Probably use her.   So you can see and move about. That's pretty cool, right? So you can do it. Yeah. For ages, I've just had another time. I've wanted to make a flossing game. See if you can count the flossings. Because you can actually do multiple people. So I've often thought you could have two people making a flossing game. Make it. One of you make it. And another really fun one that I've only really started to play with is speech. So you can actually recognize speech. I wonder if it has an online demo. I don't know if it's got an online demo. It does have an online demo. I can't remember where it is. But essentially, they've got a model here which has been trained up to recognize the numbers 0 to 9, up, down, stop, yes, no. And it can just recognize those words just using the browser and the web audio API. So that's pretty cool. Sorry? Is it at the bottom? Ah, there we go. Oh, it's going to download it, isn't it? Anyway, that's how it works. We're going to use the, oh, it is. There we go. Down. Eight. Ah, I'm over. There you go. So yeah, that's pretty cool. But we're going to be using the mobile on that one today instead to play around with. So where's my slides for mobile on that? I think this is it, actually. Hang on. No, that's not going to work. Yeah. Yeah, that's how it works. So hopefully, you should all get cloned to this thing by now, onto your computers. So we're going to learn how to load and use a pre-trained model, and, oh, where to find pre-trained models. Gone the wrong way around. It's OK. It's not the end of the world. And yeah, so basically, underneath a lot of this stuff, we're just going to do tf.loadModel, which is going to load those models underneath. And yeah, and this is mobile on that. We're not going to use it in this way. We're going to use it in a slightly different way. But because we're not going to use import statements, we're going to use script tags. As all websites should be made, script tags. All right, give me two seconds while I get set up, because I need to get my head straight. So let me get my, this is not it, new window. Oh, yeah, I've won that. Excellent. Uh-oh, uh-oh, uh-oh, uh-oh, uh-oh. Why? Why do I have C++ extensions? OK, so I think I'm going to revert this. If you want, I know it's going to be pretty simple for a lot of you. But trust me, you're going to remember this moment later on, and you're going to be like, I wish we were doing mobile on that again, because it's going to get steep pretty fast, dipping your tires in. So you should see, can you see this? No, probably not. Oh, damn it. That's what I'm supposed to do, I'm supposed to do this. So this is what I'm going to do. I'm going to load up the completed one. So in the folder, you should see main.completed and main.js. Maybe some of you've already cheated. You've looked at the completed code. Yeah, this is basically what you'll end up doing, or should end up looking like. Oh, wow. That's awesome. How's that? This is great. Can someone take a video of this? Let me just refresh that, because the canvas went all wrong there. And then why is that not? Sorry, I think because I'm screen sharing, the canvas is a bit wrong. But anyway, so this is not going to work, because my screen is not going to. Anyway, whatever. So at the bottom of the screen, it's detecting what's in the image. This is crazy. What if like, oh, barbershop? Monitor? No, it's not going to phone. Maybe phone. Wait. Modem. I don't think because the computer is because of the things behind it, iPod, iPod at the bottom. iPod. Close enough. Close enough. So that's basically what it's doing. This was demoing earlier on today. What we're all going to build today. So all that we've done here is two things. Oops, this is an old version. I haven't updated it. I'm not going to update it. Don't update it. Keep it as it is. So what I'm doing is I'm loading up TensorFlow.js at the top. It's 1.0 now. I haven't updated this in a while. But it's the same. For this demo, it will be exactly the same. And the other thing I'm doing is loading up mobile net at the top there as well. If you're doing this properly, so divisive, aren't I? Properly, you do import statements in a bundle or something like that, but I'm just doing a script tag. And I've got my code that's going to be main.js. TensorFlow.js is its thing. Let's have a take a look at what mobile net looks like on the internet. Oh, no, it's here. I already opened it, didn't I? Did I open it? No, it didn't. Here, here. So all that mobile net is when you're downloading is, it's just if I go into source here. Index, all that mobile net's doing is if you look really closely at the source code, where is it going? Oh, it had to be doing a different way, didn't it? Oh, OK, there's another way of loading it. You need to load graph model. So all it's doing underneath, this is just a nice wrapper around TensorFlow just to help you for mobile net. All it's doing underneath is using load graph model and passing in a JSON file, which is kind of depending on the version number, it's whatever this is.json or something along those lines. When I'm loading in this mobile net thing, all it's doing is just doing some nice bits of code so you don't have to do all this stuff yourself. But it's just loading up a JSON file with tf.loadGraphModel. And the other kind of really interesting file, and also what it's doing is when you ask classify, classify, because that's the code that you're going to use. You're going to pass it something usually like an image. You can pass a canvas, a video, or image data or just some raw numbers. And then what it does is it calls infer. When you load up a model, you give it some, once you've trained it, you call infer. You give it some new data and it gives you the response back. But it's just giving you really raw numbers, like really, really raw numbers. It's not really giving you something that you need to understand what's actually going on. And so it just has some nice helper classes, helper functions to kind of turn those raw numbers into something meaningful, i.e. a string that describes in the image. And so it's called a thing called topk classes, which basically loads up this file. And this is the interesting file here, image net classes. Because at the end of the day, all the models are turning to you as a number. What does that number mean? Well, this is going to tell you what that number means. So these are all the 1,000 things that mobile net can understand. This is it. Toilet tissue, toilet paper, a bollet. We all know what a bollet is. I've got several bollets. I think I'm agaric. I don't know what this is. A gyromitra? Stinkhorn. Anyway, a scuba diver. Wow. That's all that mobile net can really detect. And these are the things that mobile net knows how to detect, which is why it's not so good. But it's small enough so it can actually be usable on a mobile. So that's basically what it's doing. Let me just get up visual to your code insiders. In fact, I don't even need to do that here. I'm just going to do this way. So, the icon's changed. Cool. Does that happen a while ago? Was it a few days ago? Man, I've been on a plane forever. I don't know this stuff anymore. All right, so you should see something like this in your main file. First thing you should do is, obviously, there's hints there to do one. What do we need to do? We need to load the mobile net to start the camera. So all you need to do is load the model. Yeah? Mobile net is already in your name space because you loaded up with a script tag. We didn't do anything. Oh, it's going to be very difficult for you, isn't it? Oh, no. Maybe we can turn that screen that way and you'll can you all see this screen from that side? Yeah? So maybe we can turn that one for the people behind there. Try, yeah?  Self picture. That's the wrong way around. Every wave. Yeah? And this side, this side, wait. Wait, hang on. Yeah, go. Cool. Awesome. Oh, we've got some professional ones as well. Don't worry. I got it. Yeah, it's cool. Cool. Back here. You good? You're good? Excellent. And what that's doing underneath, as I showed you before, this is just going and that mobile net is just finding the right JSON for whatever version number we're running. And then it's just calling the load graph model underneath. It's literally going to go across the network and just download quite a lot. It's actually quite a large model still. I can't remember what the size of it is, but it's multi megabytes downloading onto your computer. So even mobile net is quite large. You wouldn't just have it on your home page for your don't do that, because it's pretty big. Then, oh my god, OK, then they're pretty simple. We need to pass the canvas. So where am I? I'm lost. Classify image. Classify image. There we go. So then, oh, I haven't explained what the code's doing. I'm sorry. So it's just doing basically pretty simple stuff. It's using the getUserMedia API, which is going to get streamed from the camera.  So every have a set into it. Every second, I'm going to call takeSnapshot. And all that that's doing is from the video stream, it's grabbing one frame. Unless it's that drawing that frame into a context. Then we're calling classifyImage. So then we have the image. Now we want to know every second we want to, after we've loaded the model, we want to know what's inside it. So it's pretty simple, really. Just do predictions. Predictions, we've got to wait, model.classify. That's it. That's it. All right. I know you're all going to say simple, Assim. It's really easy. Yes, it is easy. You're going to remember this moment. You're going to dream about this moment. You're going to wish this moment was going to come back to you. This is it. And I can't spell predict. I don't even know what to do in the next one. You can do what you want. Basically, that just returns for you. Like if you want to print that, you could print it on the console and see what actually returns. I think it returns an array. Yes, it returns an array. And then I'm just going to print that somewhere on the page.  If you use one of the web frameworks in the world, you probably, there's a better way of doing this.  I'm not a vanilla person. I'll paste this in there just for the sake of saving everybody a headache. I'm going to paste this into the Slack channel. Yeah, just so you can just copy and paste that there. Guess what? That's it. Done. You've loaded a model and you've used it. So now if I'm still looking at main.js, I am there. Oh, I'll look at it. No, you can't see if I look at it this way. We'll go back here. Could you part your power? Could you ask some power? Hang on. Can I scream? Oh, I can. Hang on. Why don't I just record the desktop? There we go. Just ignore me for a second. OK. OK, there we go. Awesome. And that's it. So you should all be seeing this working. I forgot that that isn't the point. The point is this. So hopefully on your computers, are people managed to get it working? Yeah? Powerful. Interesting. It is crazy. It's absolutely crazy that we can do this.  But let's take a second, just appreciate what's happening right now in a browser is detecting what it's seeing. It's the only word that you can use to describe. Nice, maybe use some other words. That's it. I'll give you a moment. Whoa. Prison. Prison. Prison. What's it saying? Prison. Prison. Prison. It does come up with some weird ones. Oh. It just said I was a microphone. I think that was my beard. There you go. And I'm going to give you a few seconds while I plug in. And was that an hour already? No.  No. It was 45 minutes. Huh?  Toilet seat? I didn't say it was any good. Right? Just that it does stuff. Right? That was it. Can it sector this thing? What's this thing saying? Bathing cap. Hairspray. Water bowl. If the background, I think, is that you want a good clean background as well. That's probably a cause of the problem. Yes. I think I hinted to it earlier on today. Mobile net has its usefulness. I use it a lot for teaching and training. Practical usefulness. It's iffy because it's really not that accurate. Like if you really were looking for one of those things in that image net, if you were looking for whatever it was called, a scuba diver. Right? It's one of them. Then maybe it's useful for you. Often times it's not. You may be going to use an API. One thing it is useful for is something called chance for learning. I'm going to leave it for a second. They're all having fun. Every time you're having fun. Whatever you have fun. I can see it. I mean, if you want to take pictures of what you're doing and tweet it and tag jawache, you know, that would be nice. And if you wanted to, you wanted to take a screenshot. No, you don't have to.  It would be pleasant if you did. But you don't have to. You don't have to. It's not essential. But, um... What am I doing next? What am I doing next? What am I doing next? Give me a second. You'll have fun there. I'll just get set up on this side. Uh-oh. Uh-oh. What did I do? What did I do? What did I do? What did I do? What did I do? What did I do? Give me a second. Or I figure out what I did. Workspace. So, give me a second. I'm just trying to figure out where my code is. Yes. Joy Development Workspace. Ah. Joy Development Workspace. Joy Development Workspace. TFJ's Workshops. TFJ's Workshops. Do. Regression. Yes. Excellent. All right. I mean, this is quite a game because it's the overall game. Yao! So, if you own a clean-wipe background, background it'll be a little bit more accurate but not massively you'll still find it's not gonna so it's good for in terms of practical use cases that you'll use today with mobile net in like your real world no right it's not it's not it's not good enough for a lot of that stuff it is good enough for certain things but it really depends on your use case what I think the real power of something like mobile net and I think one of the just talking broadly really about JavaScript to machine learning you're not really going to be training up incredibly complex things in JavaScript in the browser you just not it's like single threaded JavaScript's not like the best language to do in compute do a lot of these machine learning models you need hundreds of servers running at it for for weeks you know but what it is really good at is what but what is the possibility of a very interesting use case is something called transfer learning right but transfer learning you take an existing model an existing brain and then this brain mobile has been has been trained to recognize one of a thousand things but during that journey of training it remember the layers the each layer and each node actually if you there's ways of interrogating a model and seeing well what does that know what does it really understand what is it seeing as part of that image and if I don't understand I have to get the slides up later on I'll find them but that they've when they when they examine these networks they can see that actually this node at the start is detecting this all it can detect in an image is this a curve like that or another node it learns how to detect a corner and then the next layer maybe they determine one one node has figured out how to see if something's an ear right and then at very the end then you decide or this is a face right or cat or dog or something like that what you can do is you can kind of lobotomize the last layer and you retrain it to learn something else because if you've got if you've got a model that already knows how to detect edges corners maybe colors it's learnt something you can then retrain it to retrain to detect other things got a friend who used mobile net it's called transfer learning and that last layer learning just trained the last layer doesn't require as much computation as training the whole model from scratch so it's possible to do that stuff in JavaScript possible sometimes in the browser so that's where I think mobile net is useful for okay it's not detecting a lot of very clever things but on a lower levels of that of that of a model it's detecting something it's like a baby you know it's like learn something but you just need to train the last mile under the way I describe it as is imagine learning JavaScript from scratch or imagine teaching something JavaScript from some scratch or taking a Python developer and teaching them JavaScript like that second one it's not going to be as much effort and that's kind of transfer learning and that's where it can start being useful yeah cool APIs you want to do some really some really powerful stuff you can get started straight away with API if you want to like train stuff up that's bigger yeah well I can't say categorically you you won't because maybe there is a use case where it's actually accurate enough but yeah typically no but yeah and any other questions I can't remember if you're looking at is it is it not downloading for you if you look in a network tab because that it's actually not one JSON file that JSON file then triggers the loading of some shard files so if you look in the network tab you'll see but it's many megabytes it's not small so to get started with the regression clone this bad boy bad boy it's not it's not good bad person if it's very very simple and maybe you can get away with something in the in the browser I know I think I was talking to you on about he did stuff in node on the on the server side because it just just to compute up but yeah you can still it's doable in JavaScript I think the it's good to play around with the stuff in the browser because you see easy to play around with but then if you need to get a little bit more compute you want to stay in JavaScript you can use the Node.js version of TensorFlow and if you really want to go full out you can rewrite it in in Python yeah I for learning and right now just for inferring in the browser you mean yeah mostly just for inferring it's like yeah yeah yeah I don't know it's difficult to know really what people are really using it for but yeah all right everybody cloned it who hasn't cloned it that's a terrible question who hasn't cloned it we're all good excellent so aggression lots of different types of regression so we're looking at linear regression which is kind of maybe you remember the stuff you got hot you've got a whole bunch of dots points and you want to find the best fit line between them kind of what is the the linear relationship between these two sets of data the logistic regression which is more I don't know that's polynomial me a poll logistic regression polynomial regression which is kind of a similar thing as linear regression except you you understand that the relationship is is nonlinear right like yeah we call logistic regression which is more to do with probabilities we're not going to go into that so for instance this is a famous one so cricket chirps per minute and ambient temperatures that's actually has a linear relationship I suppose up until they die right up until they're dead but up until then it's a linear relationship famous more more temperature is the the more cricket chirps per minute oh yeah my friends so extrapolating this data can be a problem sometimes right so you need to take it with a pinch so you need to understand your data to understand where where it might have a linear relationship and where it might not remember this remember this yeah yeah here we go back at school machine learning is maths it's maths there's just no way around it I'm no good at maths so it's a real struggle for me and I'm very very lucky that I've got a lot of friends who know the space who are willing to spend time with me to help me figure stuff out BS maths right you do have to get to get to know quite well anyway this is a this is a little an equation describes a line so why the position on the Y coordinate of the line is equal to M some variable M times X plus B now B would be if X is zero so should be zeros that would mean B is 5 here right that's the constant remember this stuff so feel so clever remember all this stuff from school but that's basically it and that's what we want to do here so you've got you've got you've got this whole bunch of data sets of points and you don't know the linear relationship is between them right this is how you do it okay well and why linear regression is a really good start to get to understand how to do neural networks just because of this right this is a neuron the same thing we had before we have X imagine your X and Y coordinate of your point is you your expected value and your your input value right so your feature and what you expect just kind of like having labeled data our training sets you can train on and then your M and B what what what we really want to do is you what you want something that will figure out given a set of points which is your data set the best fit line so you really want to shoot it's going to tune some values for M and B that's what you're gonna be doing that's why linear regression is a good a good first step to understand how to build neural networks because it's going to teach you this just one neuron so we so hard to get this one neuron right then once you got this right you can apply it to all of them and join them all together right I forgot I actually and we're supposed to show you a demo let me show you a demo oh no I didn't ah clever icing this is basically something like what we're going to build right this is what we're going to build today so as you add points it's going to figure out what the line is and what that line is figuring out basically an M and a value for M and a value for B that's basically what it's going to figure out and it's going to automatically figure out what those are from your data sets that's it right I think I skipped a slide let me go let me go through this again so don't skip anything so yeah and so then let's say we gave it a value x1 on y16 it then figures out and let's just say what have I done here what is this maths oh my god mx plus b yes right so if we gave a value of x is equal to 1 m is for B is 12 y is equal to mx plus B mx is 1 times 4 4 plus B is 12 y is equal to 16 that's all with this neuron would give us however we know because it's our point that we created the x is equal to 1 and y is equal to 13 so we know that the values here are wrong the optimizer is going to run and it's going to retune these things do I have another slide retune those things to be better value and this thing here is called a loss function this is the most important part of it you need to describe how wrong you are you need a function that tells you how wrong you are that's what it's all about I mean that's one great okay all right hopefully you should have a folder that looks a little bit like this yeah good create one that's main digest is just just just create it and that's where you're going to type stuff in because all these all these other ones are is just different bits of code that you can use okay cool that you can use to figure out that you can go to right so we're going to go through kind of one two three etc etc and at the end I want to show you linear regression and then you're going to figure out all by yourself you're going to figure out how to do polynomial regression so you're going to figure it out all right oh yeah I checked in TensorFlow.js library in the source code that's how I code yeah I check independent libraries into GitHub yeah no one thought of that before I thought of it okay obviously don't do that if you're doing it in production I use that use the official version of I just checked in to make things simple we're also using the library for P5.js I'm going to go through that very very briefly so you can see how it works it's a visualization library who here is a react developer view angular all right you P5.js is not like that at all right do not use P5.js do not use it in production you're gonna see why in a second you should never ever use P5.js in production it's just that it's just an interesting way to draw stuff it's used a lot in teaching younger people and I just didn't want to get stuck I just don't want to have an argument about a web framework I just didn't want to have that discussion so I use P5.js and then we're also going to use a main.js we're just going to stick everything in like all of our all of our code as we code along and I'm going to do things today as I'm going to go through this I'm going to experiment a little bit I'm going to go through things I had some feedback from the last time I gave this workshop I'm going to try and go through these things in a different order fingers crossed this will work but it should hopefully be a lot more engaging for you all as you go through so right now you should have those in this indexed asian file make sure you got a main.js to make sure you've got it here and it exists let me actually rename mine main.js one and I'm going to just empty this one out right and then however you oh and ever well you all did it with the mobile net so I presume you all know how to open up the thing yeah he's open up in it and I'm using live server plug-in but if you serve or whatever else that you're using locally go for it and then that's it it's well nothing should be there because it should be it's just your main.js is blank I think I'm missing something in your second I'm missing explaining something am I not I think I'm good yeah yeah I think I'm good all right so we're gonna go through P5.js super quickly so P5.js is amazing it uses globals everywhere so everything you've been taught about globals are bad is wrong globals are amazing okay so what happens is is that is that basically if there's two functions available called setup and draw that's what it will call right so it's expecting these functions of these specific names to be available so setup is called before anything helps to set up things and draw is called well let's figure out when draw is called let's just see right so let's just copy and if you want you can just copy and paste it from set up draw put in your main.js and it's safe right and then open up in the browser boom yeah you see that this is probably why you shouldn't use P5.js in production right because it just it just draws as fast as possible constantly that's it basically right pretty cool I think it even does it says to even when it no I think with Chrome when you're not looking on the screen it doesn't draw it oh and I still draws it yeah that's basically how what happens and you you're gonna there's gonna be drawing logic that you're gonna stick in draw right on the setup logic stick and set up the main thing you want to do is you want to create canvas area which is where you should draw stuff so if you go to 2.canvas.color you can grab that that line from setup dot the setup there and copy it into your main okay create canvas again another wonderful global and there's other things it's not given as window width and window height another global why is the coding not like this why don't we do it like this it's so much fun right basically this is the window the width and the height of the window just saying create a canvas it's literally creating a HTML5 canvas the full size of the screen and once you've got a canvas you can do fun stuff like you can set the background just the background right I don't know what color that is maybe it's gray it's red red green and blue that's all that is or you can actually if you wanted to you could kind of well let's just see it working first there you go what is that doing right now every time draws called is painting the whole thing every single pixel that color right drawing it from scratch it's gonna do every frame I can't remember try out I think you got to put it in draw anyway you need it in draw because if you draw a line doesn't disappear you've got to paint over everything again and draw it all again right it's great it's fun though it's fun this is how coding should be or you can do like red something like that nice so you can set a background and I think this is the point where I'm gonna jump ahead so again oh you know you know no loop yeah I think I remember this with it with a capital L yeah and it stops a looping yeah boom and then loop right loop to start looping well let's just see yeah this is why it's so much fun yeah it just works right you just try typed oh don't use no loop let it loop let it loop let it loop and I think this is the point where I'm gonna be gonna skip ahead hang on get three four or five or go over very fast I'll go over very fast three you can have a look at it if you want later on but this is how you draw texts you define a fill color this is almost just like it's all sequential I know with Jarvis it's all about callbacks and stuff but this stuff is just sequential what is the color of the of the pen what is the font I want to use from this point onwards or as a text size I want to use from this point onwards draw the text hello world in this position x and y x is at the bottom y is at the y 0 is the bottom no top let's figure out if you want to do yes let's just do that actually then I can copy and paste that into my draw function there you go hello world I like I don't like ice cream I'm in I'm intolerant to milk protein not lactose milk protein very bad for me and also Brexit supporters just two things and on I'm lost now I'm lost I'm lost my name almost has to be yes 345 that's how you draw text you can also draw shapes if you're doing if you're used to kind of like drawing tools they can you set the stroke weight the stroke color you can join a lips of this x and y and this size and then you can say from this point I was on was no stroke right so that's what I'm going to do here as well just gonna drop in there okay I'm going to draw circle in the center of the screen theoretically in the center of the screen because it's window width divided by two window height divided by two right let's see let's go to that let's go to that let's give it a lot let's give it a lot good on there very very faint circle why is it that color I don't know oh because I haven't said I've lost the background let's set the background background background background oh my god I just want gray gry y or a y a is other both valid are you serious have you just like blowing my mind no way they're both valid was that the same shade is it the same if I just learned something I feel I should have known this already by now I didn't know that okay excellent and the stroke let's set the stroke to like red or something like that you can do this yep so you can draw circles right really feel I should have known that why the center white I think I must have said it oh interesting that's I think that's the field the film must be wiped by default so if I set fill to blue may fill oh my god how do I not do that escape yeah blue but the makings of my next website right here all right color color selection spot on the next thing I was going to skip over was five and lines okay did I go over lines I didn't so lines is kind of very similar you just have a line that you can draw in fact let's just draw a line in the middle of it let's not go nuts so a line XY to begin XY to end no no X1 Y1 yeah X1 Y1 X2 Y2 so 10 so should be kind of going no that way down I think yeah so the X and Y is top left which is really annoying when you're drawing graphs and lines because you want you want the Y to be here what why is there to be there but anyway that draws a line boom you can draw a line all right okay and now I'm gonna skip to 7 boom okay cool things you can do a game loving the globals you got embrace the globals okay they're great they're fantastic if a function called mouse clicked exists guess when it's called every time the mouse is clicked why is life why is it not this simple simple right mouse clicked mouse X and mouse Y are helpfully set to the X and Y position of the mouse at the moment that it was clicked then you can set draw a circle at that position of radius 10 let's just copy and paste that in fact I'm going to get rid of my get rid of my draw function just to clear it out oh no oh no I've got sex boom and add a mouse clicked this is it and if you just want to copy and paste this you can pop copy and paste it from 7 dot mouse clicked right then that's it now if I go here yes you should be able to now do this all over the screen pretty cool hey pretty cool now you're starting to like p5.js aren't you yeah yeah are you wondering in mind trying to think of ways you can release this in production you can't don't right there you give you a second to try and get out while I frantically remember what the next thing is hopefully you're all working on that what I want you to do I want to give you a little bit of time now to focus on this create two variables that are am I letting these am I letting these hang on let's let them yeah let oh my god X's right that wise right I just want you to every time the mouse is clicked see this X and Y just start collecting them correct all the X's and the X's array that's all the Y's in the Y's array just do that it's getting gentle gentle introduction hopefully wasn't too too difficult if this is how this is all this is this is all you should hopefully have needed to do X's push mouse X wise dot push mouse Y let's double the drawing it for now so that's it right in fact I can just calm it's a clever way of writing all this stuff isn't it like use a destructure or something and then man I'm tell me if I'm being idiot what am I doing right now okay does this work man how am I even doing how am I even thinking right now is that a thing is a thing and that well let's it listen if this works I'm gonna be I'm happy okay okay okay okay okay it's working so that's basically creating me two arrays one with all the X values and one with all the all the white is it how come so I'm printing one I should be printing two here we go it's two one two right okay X's and Y's right however you can see it's actually storing in like the actual X and Y of the position in the screen and my screen might be different to your screen so a lot of the time when we're doing this stuff with machine learning what we want to do is you want to normalize our data and you usually want to normalize it to between zero and one that's kind of a really good thing to do keep everything normalize it between zero and one so if you know the width of your screen you know that you clicked kind of there then that's probably probably about 75% or 0.75 but P5JS has a like a nice function that allows you to do that that's called map okay and with map what it does I'm just gonna copy and paste the whole thing there we go so what map does is it kind of maps a value from one range to another range so what this is saying is we've got the number 500 that range that comes from a range of zero to one thousand and I want to map it to a range of zero to one right so it's going to normalize it to zero to one so if I actually now if you if you look at that printed out oh shizzle what we're just done it's printing at 0.5 okay what we want to do is we want to use the window width because depending on where you clicked in the window width you want it to say that'd be one that'd be zero okay and normalize on numbers this is just a standard thing you want to do in machine learning with your data sets you want to normalize everything zero to one so given that given that's how map works right normalize the X's the X's and the Y's so that it's storing a value from zero to one instead of 100 150 something like that do you got me the helpful variables you want it you want is window width and window height right there's two clues I'm giving you right it's a map window with window height if you want to see other examples of map working you can look in six dot map but JS there's lots of examples there to play around with but that's basically what we want to do here give you a few minutes we're not haven't touched on TensorFlow yet have we right I know I know we're getting there again as I said previously you want to remember those moments when you were just drawing circles on it on a page you remember it fondly I'll just show you I give you the answer so basically how you would make that work would be this and what I'm really doing is I'm gonna we are gonna start I'm gonna I'm showing you enough of the codes that later on when you need to when you need to start changing some of this stuff yourself you kind of know what you're looking at right in terms of drawing drawing drawing stuff and in terms of getting data in the right way so if you want to normalize the X's okay we want to push X the input is mouse X between 0 and max and max from the X's is going to be the width just coming window width right and then we want it we want it to map from 0 to window width to 0 to 1 same thing goes for the Y's mouse Y but this time it's window height okay that's the map that's the usefulness of the map function so now if you go to wife's calling me so now wait I should stop it stop it printing out the other stuff why is it printing it like here we go okay so now if I should click it there it should be zero zero close to it yeah zero if I click it right to the end there it should be near like one foot X yeah yeah yeah this is the second one I'm a quick bottom right it should be almost one one yeah it's 0.99 0.974 so we've just kind of normalized everything from zero to one all right if you look in the functions calculate line no calculate collect points which is kind of it that collect points is where we're going towards what we should end up with you can see I've actually got some functions here and all they are is just a map function but I'm just kind of created a help of helpful versions of them to do essentially the same thing it's a norm just saves you from having to write all of that stuff yourself so if I put it here just paste them at the top like that so with these all this is doing is calling map be providing in the max and norm X is is just doing the same thing but it's giving you window width so with these helper functions you can replace this with just norm X and norm Y that's all of those functions are doing so don't be scared of those function at top all they're doing is what you just did for in just fewer characters right hopefully let's see if that works yes oh my god so good at this coding stuff I should be paid for it yeah if you actually look at collect points that's all I'm doing we should be basically here oh that's how you do that's a clever way of doing it there you go yeah so now let's take a look at map quick point explain lines so I think I explained lines very briefly before so you have a line X1 Y1 X2 Y2 before I showed you the equation of a line remember that why is equal to MX plus B for some reason I don't like I in a code I then changed it to Y is equal to AX plus C I must have had a reason so oh then they shouldn't be const so all I'm going to do is at the top of my here I'm going to add another few let's let's a let's see okay there's just two values then I'm going to create a function which is going to give me a value of Y given a value of X right okay so get Y given some value of X this is just MX plus C but for some reason and I cannot figure out oh I remember no why yeah I remember why I used a AX plus C that's all that's doing right that's all that's doing so given that given that this is some new information that you've got given that you know how to draw a line can you draw this line you know this is a line and it should have it should look like that or it should look like that or maybe looks like that you don't know draw this line on the screen number X is 0 here X is a window width on the other side that should give you X1 X2 and the function should give you the Y's then you should be able to join two two dots together do you got me yeah try doing that try using this function to draw a line on the screen any line and you have to use the draw the draw function you're very close to starting to write some TensorFlow code I promise very close very close give you another minute or so draw a line now on the screen it's going to be legendary so what do you want to do let's get in let's get an X1 where's the X1 gonna be one the furthest left of the screen so it's going to be zero let's get a Y1 okay so what is the YY given a value of X well we've gotten we've got a nice function above called get Y let's just call it get Y X1 there you go now we've got an X1 on a Y1 let's get an X2 X2 is equal to the furthest right of the screen window it let's get a const Y2 get Y X2 now we have an X1 Y1 X2 Y2 and then let's draw a line let's give it a stroke oh what's the mmm and let's give it a weight to give it some you know weightiness thickness and then let's draw our line so ah what the near line X1 Y1 X2 Y2 boom this should hopefully ha draw stroke stroke red what I done wrong ah I got two draw functions the beauty of globals there you go two draw functions right one overrides the other one right boom okay I draw did a light it and if you wanted to do if you want to change what you're drawing what your line you can just change your here so you can change that to 0.5 0.5 0.5 and it changes the line that gets drawn right minus 2 and you can change this to 300 right so now we've created some that draws a line based off of that equation that we have that we had before right so given that let me get back to where we were 1 150 common what was it something like that 0.5 that's the line so and we've also got this thing at the bottom I've still got mine there where is it here I'm gonna just I want to still draw the circles give me a second ellipse okay let's give it a straight way of like three black okay so I've got this line here you've also got this data points here okay remember we need to figure out the loss like how wrong is this line if if all my circles were here would that be a big loss number a small loss number small small right if all my points were here but yet it drew the line here would that be a large or a small loss large loss exactly right that's what we need to calculate we need a way of knowing how far how wrong it is and we use something called a common one we use it's used all the way through you'll see all the time machine learning is mean squared error okay mean squared error and you could get away with like ages now just using mean squared error in a lot of things because it's just it's a good loss function to use generally for machine learning so what this is is given given some value so given this value of x here you get this is this is the actual value and this is one and this is one and yet however if you to look on the equation it would kind of give you these numbers here so you figure out the distance okay square you square it oh man this is where the jet lags really gonna kick in for a second I need corrections if anyone's correct me correct me you square it and then you divide it all by the means you want to end up with one number okay the reason you square it is because sometimes you might get a negative number yeah and you need it to kind of you don't care about the signage you don't care the direction it is wrong right so that's why you square things and that's basically what we want to to do now is only to calculate the loss it's super important to understand your loss it's super important because remember everything I showed you like it needs to know TensorFlow needs to know how wrong something is in order to tune something so that's what we're gonna do now and in fact if you go to I'm gonna write this out yes no man it's gonna be dangerous if I write this out I'm gonna copy and paste I'm sorry I'll just go through it line by line yeah so the same courage you saw before same stuff you did before mouse clicks you don't know you've done all this before you're storing everything in X's and Y's and then you call loss remember our A and C is fixed here right now what happens when you call loss each of the X's okay you get the X and Y you then pass it through you kind of need to do this kind of take the 0 to 1 value oh no you don't need to do that anyway that's what I did you basically get the Y value you take the difference okay that might be negative you square it you sum it all together we divide it by all the X's all the values and you get like a something called a loss you print it out right and I've actually got in the rest of the code here if you copied and pasted the code from Calcutta loss you'll see that I'm actually drawing that loss value on the screen I'm drawing it on the screen okay as text so that's all that's the only real difference between this and your your other code before that's it just calculating a loss value right so if that I now load this up in the browser this is what you see and if I draw a if I click here if I add it there's no there's no X's and Y's now because I don't add anything if I add one close to it our fingers crossed yes the loss is low right the loss is very low if I hopefully start doing it away so loss increases and now if I add some more data points closer to it the loss reduces right that's what's going on and so what imagine this is our data here this is that this is our actual data like something like this the lines wrong the lines wrong but now you have a number that describes exactly how wrong it is and TensorFlow then uses that loss to figure out how to adjust the A and the C that's all you need to do is you need to find the right value of A and C so it fits perfectly in all those dots that's all that we're doing here is we're tuning that value A and C that's all we're doing that's a magic of TensorFlow it's not really magic it's nothing you you right now you're like is this it this is it this is it this is all the machine learning is okay I'm gonna hit TensorFlow before we hit TensorFlow we have to hit maths maths right matrices go let's go there matrix maths big deep big I want you to get some food hang on whatever I want not food what's the other stuff that you get it's not food so coffee did I want to think I wanted a coffee yeah okay matrix maths simple two dimensional matrixes matrices okay just go remember this stuff back before back back when when you're kind of adding kind of matrices together this is it as long as the same same size and shape you just kind of add the appropriate stuff together and it gives you the the output matrix okay skip broadcasting don't worry about that why do I have this oh sorry I do have this transposing take some matrix flips on a side right subtraction kind of same was that element wise subtraction never mind same as addition you take the appropriate one away I didn't draw this one properly didn't have the stint there you can figure out division same as normal he's kind of take that divided by that that one divided by that one it's kind of element wise that kind of goes that way you're not just multiply by constant all the way through but multiplies all of it together and then you're not do what's called more element wise multiplication which is one times two and this one is two times three just six three times four twelve four times five twenty I'm going to quickly go through these and you're going to go through some examples in TensorFlow I want you to have this in your head and then you as you're going through the examples in TensorFlow it's some of this stuff hopefully we'll we'll go through and we also have this thing called a dot product which allows you to do kind of like a zipping up maybe that's the best way of describing it so if you've got two ones of the opposite shapes you can kind of zip through so all of this row plus all multiplied and then plus all of that row and added up together is equal to that and that equals that goes that way dot products no that's the only examples I'm going to show you now is how to do all of those in TensorFlow because you only need to know that so open up no 10 a oh man wait yes okay okay in this file you're going to see these things called quiz under the quiz you're going to see this thing called answer don't scroll to the answer give it a go which is just try don't don't go mad just just give it a go try it out right don't scroll all the way to the answer but oh I'm just going to stop copying these into my main in fact I will just get rid of all of this okay this is how you create a one-dimensional array a 1d tensor in TensorFlow so 10 when she wants you later TensorFlow all that tensor is it's just a race right you can have a scalar which is kind of one value this is a 1d tensor which is what you'd normally call just like an array a 2d a second-ranked tensor is a two- dimensional array and you get through a third dimensional fourth dimensional fifth dimensional signal you can go crazy deep in terms of dimensions and it gets really hard to visualize so that's why using something called rank and shape is useful so if I now print this what you'll see is why is it not printing the rank and the shape console log I don't know why that's not printing out can you see well it's not print oh it is printing out just above oh sorry it is printing out so the shape the rank is one because it's 1d and the shape is three because just the length of three just the 1d array with the length of three so it tells you the shape and then what you can do is aid up print so you can't do console log a and annoyingly you gotta aid up print and that prints you out kind of a visual look at the tensor if you are printing something crazy long aid up print is nice because I only print some of it and it doesn't kill your console that's why it's useful if you do want to make it kind of clearer you can just you know say tensor 1d and it will try and it will give you an error if you give it something other than 1d if you don't provide the 1d it will try and figure out what it is from the day that you're giving it okay the other thing and then you can give it like a different shape so now we're going to give it 2d array there do you know what I'm gonna just paste it here okay then so now I'm giving it 2d two-dimensional array one two three four one two three four one two three four so this is a rank two but it's two-dimensional this helps and we're only being with two-dimensionals right now so it's useful when you do it with three four and five you need to know this stuff and the shape is two by two two by two then when you print it out it's printing out like that that's tensors let me open up on the other screen so I can just copy and paste another way you can do it is you can just give it a flat you can give it as one two three four just as a 1d array and then you can say actually I'm gonna give you as a flat array but the actual shape is two by two you can do that way if you want and that's useful very useful especially when you're loading up tons of data and you stored it as one CSV file and you want to load it up and go here it is by the way this is the actual end shape don't bother you have to reformat it into the right shape before you give it but anyway there you go it's just done that now we have a quiz now we have a quiz yes we have a quiz right make a no answers don't go to the answers make a rank one tensor of four five six and a rank one tensor is just a 1d array four five six and then a rank two tensor look how that's laid out four five six what does that mean column four five six then a rank three tensor three dimensional what yeah rank three oh fuzzle oh my god four five six that way look at those brackets that's insane right try that out I'm gonna go for it let's give it go oh or maybe maybe I'll give you a second all right let's go let's go for it we have the question was let me copy and paste the question make a rank make a rank one tensor four five six let's try that there's a couple of different ways you can do that you can just just type out like this four five six pretty simple let's print out as well four six boom boom four five six there you go simple simple is you can do other ways you can if you want to do you could do 1d add a bit of type that's not ten it's not type checking it's kind of type checking but not really or if you did really want to be completely specific you could then say give it a shape and the shape is three you want to be really specific right a rank two tensor so for that one you would basically do well you could literally just give it this right I'm gonna figure the rest out oh all right oh no one that way fingers crossed is that what I wanted yeah that's all wanted yeah four six column a four five six all right but again you can see the shape there is three one okay three rows of one value in each row so if you wanted to you could be you could give it like this four five six with a three one could do that way same difference okay what the hell is this what's this oh my god let's give it a go what is even this what does it even look like like how can you visualize this I can't even it's just another dimension I can't even visualize it it's insane but basically this is it oh where do we're one more my daughter my daughter was doing her homework the other day and the start she started to do a computer science like she's 13 study computer science at school she's like ass in or what just stop working I looked today and she'd she'd like missed out some brackets and yeah you missed up some brackets I don't know what missed out the brackets just put the brackets in and it works my wife's a program as well I said our daughter's just got her first brackets error right imagine that the first time right there rest of her life she's gonna get a million of those there for the first time anyway so that's what it looks like but still like how do you visualize it it's kind of like it how what does it even mean like unless it's why the shapes getting become even more useful now because it's like three are they even columns I don't know to call them three thing layer yeah three layers three zeds it's like another thing except that's the shape three of something and then each of those things has one of something and each of those things has one of something right you have to start thinking in this way remember mobile net yeah told you yeah mobile that was fun times mobile net wasn't it yeah that was good stuff it's good stuff and then yeah and that's that okay you can do other things so you can transpose a matrix let's do it here what does a three-dimensional matrix look like when it's transposed I don't know let's find out let's find out oh no yeah it looks like that whoa yeah if we did this in a in a 2d thing that might make a little bit more sense you can visualize that a little bit better we're getting there I swear we're getting somewhere we're close all right so if this was 456 would then go either way transpose you can add things together right two tensors we all know what this is doing now this is turning this into a two-dimensional tensor two-to-two and this is a just another way of describing a two-dimensional tensor we can add a add B and then print it out that's it that's doing the element wise addition that we showed before we can also do something and this is kind of more TensorFlow e than anything else this is not proper matrix multiplication but you can broadcast you can use broad broadcast which is where if some data's missing it will extrapolate it extrapolate it repeat it for you automatically so normally when you're doing addition you would and a is a two-dimensional like one four values the thing you add it to has to have four values we can just give it one value and it will go there I'll copy it four times it's called broadcasting I'm going to use an example of that and that's what works that did that broadcast eight three eight four six last one should be ten yeah I broadcasted and you can also do subtraction as well as addition to same way as you did before so a subtract B same as addition you can also do division gonna skip that out cuz I don't need it and then you can also multiply same ways did before multiply by a constant a multi print there we go multiplied and you can also multiply by another matrix I think I'm gonna skip the rest I think this is all you need for this particular example but this is doing the same thing as you did before so it's gonna be one times two then two times three and three times four then four times five that's what should print us the last one should be 20 don't think we need to do the rest okay hopefully if I if I skipped enough let's get the right stuff that should be all the matrix maths you need to know in order to do the rest of it all right all right I I'm just going to read read through this am I yeah I want you to get to the point give me a second I've lost track of where I am oh yeah I don't know so then we take it from yeah let me take the calculate loss if you take the calculate loss code to begin with now we're actually gonna start doing some real tens of low stuff or are we no we're not cuz I'm gonna I'm gonna mess this up I'm sorry I want to show you how to do linear regression I'm gonna go through it and then I'm gonna ask you to do polynomial regression yourself okay I'm gonna mess up some brackets at some point I don't trust myself right now I'm just gonna talk through the code I apologize well I apologize so this is basically the same code as we had before with the lot you can see they've got like the get why the norm x the D norm y but we've now we've got this kind of other section with some tensor flow stuff right at the bottom we've got the same stuff we've got a mouse clicks we've got the drawing drawing the points on the screen they're drawing the line drawing the loss it's the same code as you have with the calculate loss but we've got this kind of tensor flow bit at the top what's that doing all right we create these things called variables these are things that the variable so they can they can change these are things you want to change the A in the C right we initialize them with a random number this is our weights to our node okay we then create what's called an optimizer this is the thing that tunes the values of A and C we give it a learning rate learning rate tells you tells you optimizer how quickly it should try and how large it should try and tune those numbers to get to the right value okay how what a big jump it's going to make so if you did 0.5 it's going to maybe try and it's not going to do 0.5 maybe you'll change each weight by 0.5 as you go down and that maybe they'll make you train faster but the same time maybe you'll overshoot and go to the side if you think about it right so normally you want to have a pretty slow learning rate like that okay that's the ideal thing to have I think I've got 0.5 there for some other reason if you look in a TensorFlow documentation there's lots of different ones you can use API oh shizzle come on let's go am I there already I am there already SGD oh man they've changed the docks train oh this is proper TensorFlow that's why API there we go there we go there's lots of different types of those optimizers that you can use this is called stochastic gradient descent simple one that you can all you can try and use there's other ones there and we go some of the other examples you can try using some of those for us right now we're just going to stochastic gradient gradient descent and then we've kind of got a predict which is basically just like get why but for TensorFlow it's like get why but pretend get why you could just pass in normal numbers but now we're dealing with TensorFlow's and tensors so we do that matrix multiplication a dot mole x the values it passing in add our C so a is this a x is actually going to be our full list of X's so it's basically like a matrix like a if you've got a hundred points it'd be a hundred deep that's we're passing in in one go but it's doing a matrix multiplication doing all those calculations at once in the predict function and what is going to give you it's going to give you an array of results that's what predictor is going to give you for a given array of X's tensor of X's it's going to give you a tensor of Y's and you do this this loss function again remember that loss function we spoke about before given the predicted wise subtract the actual wise mean square mean squared error this is how you do mean squared error in TensorFlow you've got an array of Y's right what you've calculated then you got the actual wise that you clicked you take one from the other you then get an array of the differences between those wise some are going positive some are going to be negative so you square them to make them all positive then you take the mean mean squared error right they think it's just some is just a way once you're dealing with tensors you can't you maybe had a dot print to actually get the actual value inside it you go use data sync and then this is the actual training thing this is where it gets tensor framing tensor TensorFlow so from given number of iterations you want to go through go through all the X's the current iteration is a current epoch it's just a normal loop right I'll go to TF tidy in a second you create a tensor we're getting a one-dimensional tensor of all the X's that's all this is a 1d tensor I've done it before then we're doing a 1d tensor of all the Y's it's just a normal X's and Y's that you've collected from the mouse clicks that's what you're doing I missed the whole section which is why this is going so fast I missed the whole section I really apologize let's go back rewind that's rewind that's rewind I knew this was like I was like I haven't covered this how is this I'm not normally like this okay I missed 11 I went straight to 12 I missed 11 right this okay let's go start from scratch again okay delete this that went from like 0 to 100 like straight that went so yeah I'm sorry it is going to go from 0 to 30 though I'll tell you that right now okay let's create tensor variable no it's a variable that's all it is something that has a value it has a value of 4.12 we then can then create an array of 1 a 1d array 5 long of 22222 okay and then just like you saw before we can perform math operations yeah the Y's 22222 multiplied by X 4.12 and you get the average of it right so that should be 8.24 8.24 8.24 8.24 8.24 8.24 you average of that should be 8.24 right yeah okay that's what that's what that should print let's do res dot print wow I've really skipped ahead then didn't I before okay 8.2 okay we're in the lecture today but numbers there you go close enough 8.24 so I just save that I didn't know alright okay and yeah this is this is why I didn't why I said didn't to actually get the value of a tensor that's when we do res dot data sync okay so that would return a floating point array and we just get in the first value of it alright so let me ask you a question what what would the value we want to train something here so that the result of this here is 0 yeah the result of this line here is 0 res is 0 okay what does X have to be for that to give a 0 0 right that's be 0 I want to train this with TensorFlow I want TensorFlow to turn that into 0 for me right that's what we want it to do so we create God I skipped so much ahead I was shocking so this one we start using TensorFlow okay so we create an optimizer we just go straight like that okay we're creating optimizer oh sorry spelt it wrong no no optimizer we start off with that and we're going to call first thing I want to do is I'm going to print out the value of X here let's print out twice and then in between that I want to call optimizer minimize I'm going to explain this in a second okay alright so print out X it should be 4.12 we want it to we want the optimizer to minimize some value for us right minimize the loss the losses are always we always want the loss to be less a loss number to be less that's what we call minimize we're minimizing a loss always we pass in a function and that function is basically going to return it's going to be a tensor so it's going to be wise okay it's a tensor here multiplied by X X is a variable mean square right so if that's the same as we're squaring it as well anyway that's the same as essentially this tensor flow knows this isn't this isn't returning an equation this is this is returning like the description of an equation and it knows that X is a variable so it knows it's not going to try and change anything in the Y's because the Y's is just a tensor it's going to try and optimize those values it knows that you'll return that you're giving it an equation where one of them is a variable it knows that it can only tune the variable right that's what it knows and it's going to try and tune it so that it gets so the Y's become zero because if the Y's become zero then that's the lowest well it can actually go negative actually but that's why we square it so I won't go negative so what what what does this show here so if we now go into here you can see there you go four point two four point zero nine tensor flow changed a value of X all by itself all by itself because it knew it's trying to try to minimize it hates loss it's trying to minimize a loss if you change this learning rate to like five whoa it went completely the other direction right that's what it's doing that's what the learning rates all about if you change it to be like that we change it only a tiny I didn't change at all that's too much change a tiny tiny amount right so the learning rate is important the learning rate for the learning rate small you're gonna slowly slowly slowly slowly slowly slowly so it gets the right answer but it's going to take you a while to get there the learning rate is too big you're gonna zoom past but then probably overshoot and go to the side so that's choosing a good learning rate is an important well yeah yeah it would go negative to yeah so which is why we square it to make it well yeah why we square it okay but that's not really that useful because we're only running it once we need to keep on doing this until it gets to where you want it to be and all we do is wrap in a loop that's it we just do this we just do this loads and so this is where I'm gonna do a for loop like totally wrong oh have I got a thingy why is it not am I messing up tab yeah I'll screw I'll just copy and paste my screen here nice added too much code who needs that much code don't need that much code and then there all right so I'm just gonna run it a thousand times I'm just doing exactly the same optimizer thing but I'm running it a thousand times that's all I'm doing and so what it's gonna do is it's just gonna try and tune that number X over that period of time so now you can see let's try this let me refresh you see just tuning it remember for this is that a thousand oh my god it's gonna get to zero so let's now choose something like that maybe we'll go faster see it's pretty it's gone it's pretty much gone to zero with 18 decimal places right that was pretty fast that's what the TensorFlow is doing for us that's it we tell it some variables we give it some data we wrap it all in matrices and tensors and it then goes okay what's your loss function all right whatever I'm just gonna try and minimize the variable change the variable so that this loss is elite is the less it could be the least it could be right okay one thing to note though one thing we're kind of very very very used to in JavaScript is you never have to worry about memory ever we just know that when we create something in JavaScript it takes up some memory on your computer but JavaScript knows at some point later to release that memory back out right we know that right however TensorFlow uses your GPU your graphics card and your computer it's quite interesting actually how graphics cards work what they allowed you to kind of parallel arise all that's going on in an easy way however your graphics card it doesn't it can't JavaScript can't then it just doesn't know when something's not in use anymore so it doesn't know to free up memory so this actually right now has a memory leak and for captain running this we run out of memory on the computer so what you need to do is you need to wrap all your TensorFlow code in something called TF tidy like this and like this right oh oh oh oh what have I done our brackets errors what have I done there I'm just going to keep on yeah there you go so what this is going to do is it's just going to tell TensorFlow whenever this function ends just delete whatever it is just delete all those tensors automatically right and that's what TF tidy is doing and that's it that's TensorFlow right that's what's going on when you're using the optimizer it's just changing if it detects a variable in an equation it's going to try and optimize it given some data and loss function right let's go back to what we were before then right hopefully now you've got some headspace there so I am outside the no I think here's here it's okay because it's outside you could do it inside I suppose but nothing you need to because you don't need to free up this is kind of like at this point whatever there is delete it I don't think this is maybe you're right maybe this is creating a separate tensor maybe now let's grab all of this okay so I'm going to go through this again and then we're going to go into polynomials and you're going to do all that yourself all right here we go back here a and c there are variables now because you want TensorFlow to tune them right variables TensorFlow tunes variables we create an optimizer you've seen this before right we're going to train this optimizer we're going to go through a loop number of iterations tf.tidy there it is again we're going to get the x's and y's that we've already stored and call optimize but minimize and it's going to try and minimize whatever this value is here whatever this returns it's going to try and minimize that whatever that is so what do we get so we've got the actual y's from the things what are the predicted y's and that's just calling get y you know that kind of a get y a is equal to mx plus a y is equal to ax plus c that's all this is doing give you an array of x's give us an array of y's okay that's our predicted y's then now we've got our predicted y's and our actual y's we can get our loss I mean this is that like the kind of mean square area you saw it before you take them away right and you want this to be as lost that the least loss as possible okay and that's it that's all it's doing and it's going to change the values of a and c repeatedly one free-throw nose and then tune it and so all I'm doing here is I'm getting the value of a and c out of it and then that's actually used you don't have to look at it but if you look in draw line oh yeah it's using get y and that's using a and c to that's changing the values of a and c just for the drawing function and the last thing you need to know is tf dot next frame it's running in the browser so if you're running any kind of mathematical stuff in the browser it's just going to take up all the cpu and it's not going to be able to have a chance to draw anything so next frame does it just goes meh I've done something let yourself draw something on the page and let me do another iteration for the loop so that's just that's just for that that's what next frame does right so if I now ran this uh in the browser yeah kill that fresh page there you go this is now that movement that animation that you're seeing right now that is TensorFlow learning each time it adjusts the value of a and c it moves it and these are the iterations that it's still running all right remember mobile net mobile net was good wasn't it yeah fun times the mobile net right I know zoomed into that but hopefully that should be enough information to do the to do the next challenge for you okay we have another type of let me get the uh there's a file called polynomial solution don't open it okay a curve there's another equation to describe a curved line a line with a curved line a curve this is a curved line that's just stupid um remember this one then remember this y is equal to mx squared I've got ax squared plus bx plus c slightly more complicated but that's what describes a curve all right oh shizzle and so if looking on the screen this is the same one this is the polynomial version so you can see it's drawing a line it's drawing a curve oh my god it's drawing a curve but it's doing the same thing as before is it's just you're giving it some data you've got you've not just got a and c you've got a b and c you've got three variables abc not just a and c because you need the b as well and so what I want you to do is I want you to start off copy the code from 13 dot polynomial regression start copy all of that into your main.js oh there's a whole bunch of commented out code at the bottom there yeah anyway and here flesh it out for polynomial I put some clues in put some clues in to do if you see it to do you're probably going to have to do something to do tense and by spelling is terrible tensor for to do right to do if only life if only life was like this if any when you're given work to do at work people put to do's no no you've got to figure stuff out in life I put to do is everywhere for you there's just a couple places for to do's this is it give it a go um oh shizzle this should be a to do okay don't forget that one as a there's a spare to do at the top line 30 is a to do also but everything else here is is enough to give you the curve so you don't have to do anything else but just flesh the rest out and you can see here but a little bit more going on all right give that a go five minutes 10 minutes I have a vague memory that every time I give this there's something I've forgotten on here which I then pretend was a trick question to keep you all on your toes so we'll see maybe is a trick question well while you're doing that I'm going to turn myself into into a meme there you go sorry say it again yeah yeah you can do that you can do you can do you can just play around with it start with a low one and if you don't if it's not converging pick a bigger one go down oh um no because you said you're setting up the optimizer before you're running it through you could probably do something something clever with batching or something like that but yeah yeah yeah normally yeah yeah right you done it no yeah all right what's up people want to chill so I'll just go through the answer let people go off do all that stuff all right okay I'm going to go through the answer let you all go we need a we need a variable abc so I'm just going to throw another one here let b equals two right my spelling is terrible um so we need another way of calculating why is ax plus c so we need a times oh man I should plus b times I want to look prettier figure this out for me yes boom um a squared plus bx plus c TensorFlow needs another variable abc okay I'm just going to tune another value there um this is probably the complex one if you might have got stuck on this in fact I can't remember what was this yeah so we need another way of calculating that kind of this this is the get y but for in TensorFlow world so how do you define that there's basically a multiplied x squared all right add oh add b multiply x at c oh at c kind of like TensorFlow to up then kind of last thing you want to do is just store it so it will then render on the page does that work I don't know let's see let's figure it out is it working I think it's working that's how it worked in did anybody get that yeah people got it really yes I taught people TensorFlow that's it there we go if you want to go and learn a bit more unfortunately I don't have it in a really good format but the very next thing if I was teaching this a longer version of this workshop you would go to which repo but the bit of bit of bit of bit of bit no no I can't do I jump straight into that maybe you jump straight into that oh she's all uh m nests uh it was just the same thing m nests it's going to be very tough might be tough for you to follow without like seeing it but if you did the next thing I was I would show you is how to use um m nests as a data set where you can uh I'll show you so it's a data set where you can uh where you can um create as eventually I'll I'll finish my sentence um show up here we go hopefully I don't need to do anything okay this is the next example if you don't want to learn it the next the next step or the next step step hopefully it works doesn't look like it's working oh it is working oh yeah and uh this basically is training up to recognize this is the next step is where you kind of pull a lot of stuff together and learn how to uh oh my god I am ruined right now um recognize hand written digits it's the m nests data set is a famous data set of lots of lots of hand written digits it's a very open data set it's kind of a famous example and what this would allow you to do after it has finished working is uh it's right now it's training up on all on tons and tons of images of hand written digits learning how to recognize hand written digits and then uh you can then uh and use it I can make this faster wait because I'm using around what I'm doing the great convolutional model great dense model great dense model here we go let's try it on the time train but yeah so now I'm using a simpler training model okay and then you can put in a number and it's off the bottom of the screen that's how can I wait I know I'll trick it into how about that okay this is two you can't see it it's on the bottom but it's two it's two right it's two and like this this is not going to be right because it gets one wrong all the time and this is like like eight will be like here or something there you go so no no wait if I did it like if I did it from here if I refreshed it now yeah boom two it's actually telling you probability that it thinks it's two so this is kind of the very the the next step and this actually does use more than one neuron um and in the in the example on github which is gone where's github gone oh here is this one's done a bit differently um it's completed a master a master could be master started and completed is the end um and you'll see here there's there's I've built it with a couple of different ways of of building it a couple of different algorithms basically so you can have a look at that see how it works it's kind of very well documented the one you might want to the month probably want to start off a dense I don't know it's going to be quite difficult for you to follow follow it but um if you didn't want to kind of flesh out a little bit further that's probably where I would start or like sign up for my book yeah did you sign up for a book well we'll see I'll check the numbers tonight right I'll check it I'll see I'll see uh sign up for the book because uh I'm going to try and write all the stuff up because it's a little bit all over the place I'm going to write it all up into a um into a book which I'll then release and you can you can you can learn it a lot more like you sign up you sign up on uh in a hundred I spoke at another conference recently was 1400 in the crowd I was like really excited I thought I'd reached a hundred I'd like four sign ups so I was like really upset I'm like you know but hey maybe maybe I'll reach a hundred now and I'll and I'll launch a Kickstarter I made the I made the cover I made the cover that's a good one right it's the robot I made that why they made that my my designer friend made it but um I just want the book because it's a good cover look at it it's cute my little robot all right sorry yeah I should do that but it'll draw every second so like you'd be trying to move the mouse to the sign up input field I'll be so slow I am moves away from it I only want the people that really want it you see that's it um yeah that's it we're done thank you wait wait wait wait you're gonna have to fill in a survey form no one leave everybody stays okay you two seconds no one leaves no one leaves no one leaves how do you quickly copy I've forgotten how do you copy we are in uh yes calm Asia boom boom boom here we go preview boom boom and then huh the title forget about the title don't mind don't worry about the title right and then um where's the slack where's the slack slack here's my slack boom there you go right open the slack do now once you click it you see the sign up form the form with the objectives of the workshop clearly explained no is one yes it's five did the workshop meet your expectations not well one very well five it's weird when I go through the form I get so many people filling it out when I just drop the link no one after go through the form was the workshop too easy too too complex or just right so one is too complex five is too easy I'm I'm guessing where that one might might might land um here's an interesting one if you ask to give a five minute presentation about tensorflow just a five minute one how confident are you that you could present this in your work or something uh I only managed to go through two applications today but anyway did we go through too many or too few can you tell me one thing you liked about the workshop it's the only goodness that I get um but no it's only goes the most important thing is what what should I change about the workshop like what is it something I should change I you saw some of the things I changed this time around to kind of make it a little bit more engaging what are some of the things I might change I'm just anything else you want to tell me thank you that's it