Hands on with TensorFlow.js

Hello, everyone. I'm Jason Mayes, I am the developer advocate for TensorFlow.js here at Google, but currently live from my bedroom of course given the work from home situation, and of course we're here to get a bit more hands on with TensorFlow.js. I want this to be an interactive session, so please do write in the chat, and if you have a burning question when I am talking about something, you can unmute and ask me if you so wish to do so, and I will be happy to answer. Yes, I want this to be interactive. Please do ask questions in the chat as we go along.

Now then, I'm going to go through a presentation to start with here, which is going to be the same presentation that is later in the conference, so if you're watching here today, you don't need to go to that one, you can have a coffee break at that time. Let's get started. A little bit about my background and why I got into doing machine learning in JavaScript in the first place. I started out as a computer scientist back in the good old days specialising in reality mining and web and pseudo anonymous social networking and that kind of stuff. I then joined various start-ups to become a backend engineer and refined my skills as a frontend engineer as well to become a full stack engineer doing things like UX, design, all the JavaScript on the frontend and, of course, Node.js and all the PHP and Java on the back end and that kind of stuff. That allowed me to then make prototypes very, very quickly and rapidly and that's where my passion actually was. That allowed me to become a creative engineer at Google or creative other companies which allowed me to make prototypes for Google around the world globally. You can see some of those things I'm allowed to publicly talk about on the slide. There's a few demos on there like the smart mirror I created and the smart visual search for shopping and so on and so forth. And with that I then realized that my passions were essentially JavaScript and machine learning because I was using all many different emerging technologies to make these prototypes and the opportunity arose for me to essentially become a developer advocate for TensorFlow.js combining my love for both. And if there's one thing to take away from this slide is that I spent pretty much half my life using JavaScript and that's a long time so I hope that I can share some of that passion with all of you today and show you why doing machine learning JavaScript is actually pretty advantageous.

So of course I get asked this a lot, you know, why do we want to do machine learning JavaScript and that is of course a great question and for those of you who are less familiar with JavaScript, essentially by using machine and in JavaScript, you can run it pretty much anywhere so from the web browser, server-side, desktop, mobile, and even Internet of things. And if we dive into each one of those stacks a little more, you can see many of the technologies you might already be familiar with. On the left hand side, we've got popular web browser. You've got server-side execution, which is enabled by Node.js. We can do mobile native applications with React Native. We can do desktop-native applications with Electron and we can even execute on the Raspberry Pi using Node.js. Now, JavaScript is one of the only languages that can run across all of these environments without any additional plugins or add-ons and for that reason alone, it's a very interesting language to hack in and develop with. But TensorFlow.js of course allows you to re-train, sorry to run re-train via transfer learning or write your own machine learning programs completely from scratch, just like you might be doing already in Python, but in JavaScript. And this will allow you to do pretty much anything you could dream up, from augmented reality to sound recognition, sentiment analysis, conversational AI and much much more. I want to give you all a flavor of what is possible, because I know some of you are completely new to machine learning, some of you are new to JavaScript, and maybe you're not sure like what is possible in the browser these days. And it's come a long, long way since when I started 16 years ago.

So the first way you can use TensorFlow.js is to use our pre-trained models. Now these are really easy to use JavaScript classes that you can use for many common use cases. And you can see some of these use cases on the slide right now. Things like object detection, body segmentation, pose estimation, and much, much more. We've even got some more advanced models that can do things like landmark recognition of various points on the face and same for the hands. And even some of the newer research for natural language processing all the BERT stuff is now possible to do in the web browser as well. And we're going to go into all of that in more detail in just a few slides this time.

Now, for those of you who are curious, you will see links throughout the slides such as this one here. I encourage you to go visit those links whilst I'm also talking about things. You might find these useful to get more context about the things that I'm talking about. So as I said, I want this to be interactive and people to be doing things whilst I'm also talking. So do check out the links that come up here. So these are just a few of the models we have around. So let's dive into some of these models.

Now, the first one is object recognition. And this uses a machine learning model called Cocoa SSD, behind the scenes. And this is just a very fancy name for the architecture it uses behind the scenes. And if you're new to machine learning, don't worry about that right now. It's just a fancy name as far as you're concerned. But what it actually does is it's been pre-trained to recognize 90 common objects like the dog that you see on the image on the right-hand side. And what we're able to do is locate their position and the bounding box essentially of each of those dogs in the image. And it can do the same for 90 other objects as well. And I'm just gonna switch over to a demo to show you this in action. One second. I think it is And today I'm going to be showing you how to actually make this yourself from a completely blank canvas. And you can see here I can click on any one of these images in the web browser and you can see that the objects are then classified correctly within them and it shows you where they are. And with a little bit of imagination you can see how, you know, this could be useful! You can see here the dog is next to the bowl of treats. So you can actually very easily make a smart webcam in JavaScript to detect when your dog is being naughty, if he's gone into the kitchen or something, and he's trying to eat the food. You can maybe detect that very easily with something like this and then send yourself a notification. Now I see some questions in the chat already, asking about performance and so on and so forth. I'm going to be going through performance details later on the slide. So hold that question until then. And then will we get the slides? I can put these slides up afterwards if there's demand and maybe get the event organisers to share those around. If you contact the organiser after that. I'll make sure everyone gets an emailed copy of the slides. Basically, we can do all of this in the web browser and further than this. We can enable our webcam. You see me live talking to you live. Certainly, the models are very, very fast and you can get very high frames per second. It's the partial view of by bed. It's still able to classify that in the bed which is awesome. What is important to note is that all of it is happening client side in the web browser. It's executing on the client's machine. All the webcam sensor data is on the server for classification. That means my privacy is completely preserved. That's very important in today's world where privacy is top of mind. With TensorFlow.js, when you're using models in the web browser, at least, you get that for free, which is great. That's particularly important for the medical industry, legal industries, and if you're trying to deal with the GDPR rules in Europe and that kind of stuff, you might need to do things client side. This is a great win for that reason, too. Let's go back to the slides. So, yes, we're going to be making the demo you just saw today later on in the workshop. So, bear that in mind. Next up, we've got FaceMesh. This is just 3 megabytes in size, and it can recognize 468 facial landmarks on the human face, as you can see on the animation on the left-hand side here. Now, not only is this superrobust, in fact, this is an old GIF, we've got a new version of the model that is even more robust than this. You can see when you're looking at a human face, the part to the right is kind of twitching a little bit. That's now fixed, it's even more robust than this, and we can even support iris detection to understand where the iris is to know if your eye is open or closed, blink detection, and that kind of stuff. But this is now being used for really interesting real-world use cases, and on the right-hand side here, you can see an example from Modiface, who's part of a L'Oreal group who does face patterns where you can apply a fade Gaussian transition to your skin, and this is also we are make-up TRION, and the key thing to note is that this lady on the right-hand side is not wearing any lipstick. This is completely generated in the web browser in our face models with WebGL shaders. WebGL is basically the way we do 3 D graphics in the browser, and shaders are there to help you out. And she can choose through the different shades here and try on different lipsticks before she even goes to the shop to buy them, which in the current times is actually very useful, and this is just one example. You can imagine how you can do this to do many other things like wearing a face mask or augmented reality to overlay things around your face like the Snapchat filters or anything along those lines. So let me just show you this in action as my other demo here. One second. Let's refresh the web page because it has paused. I think I left it open too long. One moment. Let me refresh the page. My Internet is a little slow today. Here we go. Perfect. So now you can see on the left hand side face mesh in action and you can see that the new updated version has the iris recognition, those red circles on my eyes here. And, you know, as I blink and move my eyes around, you can see how the mesh distorts quite nicely. And because this is JavaScript, not only are we doing the machine learning on the left hand side here and getting a solid 27 frames per second, even though I'm live streaming to you at the same time, which does take a lot of my computer resources, I'm also able to make use of the rich JavaScript libraries for data visualization, and I can actually do this 3D point cloud render of all the points it's found at the same time. I can manipulate that, as you can see here on the right hand side. And, you know, this is pretty cool. JavaScript is very powerful and very mature for data visualization, 3D graphics, 2D graphics and charting and all this kind of stuff. Things that might take you weeks in other languages you can do in a matter of hours because it's such a big community for this kind of stuff going on right now. So for those of you who are new to JavaScript, this might be different to what you're used to. Maybe in Java you have to do a 1,000 imports just to kind of get something like this working, you know, with a few lines of code, you can actually produce something similar to this. A few more questions in the chat there. Does it use federated learning? Right now? No, TensorFlow.js does not use federated learning. That's something that we welcome a contribution from. We are completely open source, but we are trying to get parity, of course, with core TensorFlow but we are pretty much half as old as the core TensorFlow. So we're still playing catch up there a little bit. But if you're interested in federated learning and would like to contribute that kind of stuff to the JavaScript ecosystem for TensorFlow.js we're completely open source over on GitHub. Do check out the links at the end of the show to get involved in that if you want to do so. So back to the slides. One other thing on this, by the way, so right now we're actually executing on the GPU using WebGL. I can also choose to use WebAssembly to execute on the CPU in an efficient manner or I can choose the CPU.

The CPU is the slowest form of execution. However, it's always there as like the backup should you need it, but it's the slowest form. So typically you'll be running in WebGL or WebAssembly depending on your device. Obviously a mobile phone, probably Wasm. And if you're on a desktop or laptop, then maybe you've got a good graphics card and you want to leverage the WebGL acceleration. And the cool thing about that is that because we're using WebGL, we're not limited to just NVIDIA graphics cards. We can actually run on AMD and other things as well. As long as WebGL is supported in the browser, we can actually execute on that, which is pretty nice.

Alright. So let's go back to the presentation for a second because I have more demos to show you, of course. So the next one up is body segmentation. This is another pre-made model from TensorFlow.js you can use. It's very easy to use and it allows you to distinguish 24 body areas across multiple bodies all in real time. And this is hard for me to demo in my room right now, but you can take the kind of example here from the GIF and these people are moving around the room and they're able to segment their bodies pretty accurately actually and you can see here not only can we segment their bodies, we can segment the different body parts as well, represented by the different colors. And we can even get a pose estimation for each body, which are the blue lines that you see drawn within each person. And this is obviously useful if you want to do some kind of pose detection to know when someone is in a certain position. And we've already seen people from our community make things such as workout rep counters or yoga position estimators and that kind of stuff to make sure you're doing the position correctly. So there's a lot of fun to be had here with this kind of stuff.

Now what's interesting is that if you start to apply these models in a creative way, let's take the body segmentation, for example, and just start thinking outside of the box, I want to show a few prosthetics I created that kind of push it to its boundaries a little bit here. So if you know where the body is, you also know where the body is not, and with that knowledge you can actually remove yourself in real time from a video stream, as I've done here, and notice how, as I get on the bed, on the right hand side, the bed still deforms like there's a ghost in my room, and this is all done in real time in TensorFlow.js in the browser using the body segmentation model that we saw on the previous slide, and even better, I made this in just one day because it's that easy to use, which is really awesome. So JavaScript is great for prototyping ideas you might have, and allows you to bring those to life very quickly and share them with the world. Like, literally everyone could go to this live demo if they wanted to and try it out without having to install a ton of dependencies, install Linux, install TensorFlow, install Cuda drivers, and all this kind of stuff, which is a big complex thing if you're trying to do the same thing in Python.

Now, another way to look at body picks could be for this. Now, I don't know about you guys, but I really struggle to understand what my clothing size is for different clothing brands. So, I decided to try and make something that does it for me, and you can see here I came up with this demo that in under 15 seconds can estimate what clothing size I am at the point of checkout on a brand website. So, you can see here I stand once to the front, once to the side, and it can then give me an estimate of my chest, waist, and inside measurements, which the website can then use to determine what size I should be getting for this t-shirt in this case. Small, medium, or large. And that means, of course, you know, I can, as a customer, have a more frictionless experience and are more likely to go to a checkout, because I'm not trying to decide what size am I. I'm just going to have confidence that it's just going to work well. And then of course it means less returns, and therefore more cost efficiency for the brand as well.

Moving on, why not give yourself super powers? As we said, we can combine stuff with 3D graphics, as we saw before, and here's another example of using WebGL shaders combined with TensorFlow.js and the face mesh model. Here, this guy from the community has managed to create this Ironman-like effect which allows him to shoot lasers from his eyes and mouth. And of course, this is kind of a fun demo, but you could see how you might want to use this for some kind of community activation for movie fans or something like this. If you've got some sci-fi movie coming out, you could do some really cool effects and, like, have people take selfies in the same style as that movie or whatever it might be. There's a lot of fun creative potential to be had here that everyone can use with a click of a link.

And let's go one step further. The web stack has become very mature since 16 years ago and the new emerging web technologies such as WebXR, which is mixed reality, is now possible in the browser. And you can see here, this guy is using our body segmentation model to look at an image from a magazine. I think this is a fashion magazine, is able to segment that body and then place that body in the real world as you can see here. And this is actually running on a two or three year old Android device, but it's still able to do these really fancy 3D graphics and run the machine learning to extract that from the magazine on the left-hand side there. So really cool demo. And I figured, why not stop there? We can go even further by combining WebRTC. And for those of you new to JavaScript, WebRTC stands for Web Real-time Communication. And this is basically what Zoom is using right now to communicate with us all right here today, to transmit data and video and sounds across the internet. But I figured if I can transmit just my segmentation, I can then place myself in a remote location as if I really was there. And I made this because in the current times, it's very hard to translate them. And I think this is a really well done way to communicate with my friends and family back home. I'm from England and I'm currently based over in San Francisco in the states. And I wanted a more meaningful way to interact with people. And I made this in just a few days and it allowed me to speak to people in a more meaningful way. And it's hard to describe, but it's much more useful when you can actually put someone somewhere in your room and you can walk up to them and hear them from the video. It gives you a sense of belonging that you don't get from traditional video calls. So maybe in the future, a future conference maybe next year I'll be entering the rooms like this and giving my next presentation in this kind of style. Who knows. Maybe I'll have AR glasses by then and I'll be able to project myself in this way.

Now the next way you can use TensorFlow.js is via something called transfer learning. And what this means is you can retrain some of our existing models to work with your own custom data. Now a great way to do that is via something called teachable machine for TensorFlow.js and we'll be looking into that today in our hands-on demos. And I'll basically save the explanation for this for that demo because we're going to walk through how this works and basically how we can very quickly recognize a custom object in the room that we're in right now, for example.

And we also, if you want to do more than just a prototype, a teachable machine is great for prototyping, rapid prototyping, with maybe 50 images or something like this. But if you have gigabytes of data, then you might want to use something like Cloud AutoML. And essentially Cloud AutoML supports exporting to TensorFlow.js. And all you need to do is you upload many folders of images for the object you're trying to detect. Here, someone is trying to recognize different types of flowers, for example, and they've uploaded it to Google Cloud Storage in different separate folders of dandelions, sunflowers, and so on, and so forth. And then you click on next, and you get asked if you want to have higher accuracy, or faster prediction times. And what's going to happen behind the scenes is that Google is going to try lots of different parameters for many different types of models to see what works best with your training data, to try and hit that sweet spot for what you want to optimize for. You then set a budget and a number of hours to execute for, and once it's finished, you have the option to then download the model.JSON files that you need to execute in the web browser. And you can see here, you can click on TensorFlow.js and click on export. And you might be wondering, how hard is it to use this resulting production quality model? Actually, it's really easy. In fact, it's so easy if it's on one slide, and this is the first code we're actually going to see today. And for those of you new to JavaScript, this is your maybe your first taste of HTML as well. But basically, let me just walk through what's going on here on the slides. So at the top here, this is on a HTML page, we've basically got some script imports. These are like import statements in other programming languages, but this is in the HTML. So basically, the first line is importing the TensorFlow.js library. And the second line is importing the Cloud AutoML library. Now, the third line here is simply an image on the web page, which for now, I just taken a random daisy image from the internet. This is a new image that we have not seen before. So this is something we want to classify, okay. And then the real meat of the code is down here at the bottom. So we've got this asynchronous function called run. Now it just means that this function is going to take some non trivial time to execute. Now the first thing we're going to do is call await TF to AutoML dot load image classification, and pass to it the model dot JSON file we would have downloaded from the previous step. So hopefully this model dot JSON file is hosted on our webpage somewhere. And in this case it's in the current directory. And we use the await keyword here because this operation of loading the model is asynchronous. Which means it takes some time to do. It might take several seconds if it's a few megabytes in size, and we want this to execute sequentially one after each other. So we need to use the await keyword in JavaScript to force that to wait for that to finish happening. Once it has finished, though, it's going to be assigned to the constant called model, and we then continue on. So the second line here we now get a reference to the image we want to classify. So remember up above here we've got an image with an ID of Daisy. And here we're simply going document.getElementByID And then we're passing in the ID of the image we want to reference, which is also, of course, going to be called Daisy in this use case. This now gets a reference to the image and assigns it to a constant called image. And then the final line of code here is await model.classify. And then we pass the image you want to classify, which of course is the image we just extracted. And this again is an asynchronous operation. It might only take ten milliseconds, but, of course, in computer time that is a century! So you need to use the await keyword as well to make sure that finishes executing before we do anything else. And then what gets passed back to the predictions constant is a JSON object, which you can then loop through to then identify the probabilities of all the objects it thinks it's seen in the image. And that's all there is to it with that, you're then able to make some intelligent decision in your application. If you've seen a daisy, a dandelion or whatever it might have been. And of course, with your own data, that could be anything you wish. So in just a few lines of code, free lines of JavaScript and a little bit of HTML, you can actually have production quality models that are being built by our cloud systems executing in the browser at scale that anyone in the world can use, which is pretty awesome.

Now, the third way to use TensorFlow.js of course is to write your own code and of course we're going to be going into a little bit of this later on in the hands-on workshop. But in this part of the presentation, I want to focus on the superpowers and performance benefits of using JavaScript in the first place. By me.

So essentially, let's go through kind of the architecture of TensorFlow.js. How does this all work behind the scenes, essentially? Essentially, you've got two APIs. There's one called the high-level API, which is the layers API, and that's very similar to Keras, if any of you are coming from the Python worlds. In fact, if you are familiar with Keras, then you'll be very at home with our APIs as we try to match the same function definitions as Keras, so it should be feeling very familiar to you. We also have the lower-level ops API, which is the more mathematical part of the TensorFlow.js API that allows you to do things like linear aggressions and all this kind of stuff. So if you want to actually fiddle with the mathematics and what's going on behind the scenes, you can actually choose to do that with the ops API, if you wish, and that allows you to make new types of machine learning architectures and things like this if you choose to do so. So putting it all together, you can see here, we've got our premade models that are easy-to-use JavaScript classes. They sit upon the high-level layers API. That layers API sits on top of this lower-level core or ops API, depending what you want to call it, and that can then understand how to talk to different environments. Now, JavaScript can execute in many different environments as we spoke about at the beginning of the presentation, and one of them is on the client side. And by the client side, in this case, I mean specifically the web browser, or React Native. And you can see here that these environments also understand how to execute on different back ends. So by back end, I mean the physical hardware. So we can choose from the CPU, which is the slowest form of execution. We can use WebGL, which is using the graphics card of a device using computer graphics to do mathematics. Very, very cool. Or we can use WebAssembly, which allows us to get more, wider support for lower-level instructions on the CPU, which can give us comparable performance to WebGL on some more modern devices, which is pretty, pretty impressive. And with TensorFlow.js, it will automatically choose what to execute on. Or as a developer, you can choose to force one of those if you know the model is going to be more performant on a certain device.

Now the Flipside is also true. If you choose to execute in other environments, such as the server side. Now for those of you new to JavaScript, for server side execution, we can use Node.js. And this is just a flavor of JavaScript that's designed for server-side tasks and environments. So traditionally JavaScript on the client side doesn't have access to things like the file system because that would be a massive security risk. Of course, if you're on the server side, that's completely fine because you probably want to talk to a database or load a file or do something else. So Node.js allows you to do that. And what's interesting here is that Node.js talks to the same TF CPU and TF GPU bindings as Python does. And that means you get the same performance benefits for the AVX support and the CUDA acceleration for the graphics cards that you do in Python because they're talking to the same C++ APIs behind the scenes. And that means, as you'll see later, performance benefits are pretty much exactly the same. Now before we go into performance, I'm going to add one more thing here. Now I know we've got some people who are preferring to do the ML in Python, and that's completely fine. But one thing to note here is that if you are doing a machine learning in Python, we have the ability in Node.js if you're executing on the server side, we can take Keras models and TensorFlow.save models and load them into Node.js without any conversion required. And that is super useful if you're trying to integrate with a web engineering team because most web engineering teams will be using Node.js. And if you're using Python, it might make it harder for them to kind of deploy that to the web. So if they can load up in Node.js and integrate it into the current infrastructure, then that can give them a serious advantage in scaling that for you in an easier way. So something to bear in mind there. Now, if you have a TensorFlow.save model from Python and you want to run it in the web browser on the client side, then you have to use our TensorFlow.js command line converter. And all this does is it takes a saved model and it converts it to the.json format that we need to execute in the web browser. Now, currently, not all models will run through the converter. We need to have the same ops support, essentially. So TensorFlow.js on the browser side currently has implemented a subset of the machine learning operations are available in the original TensorFlow, the most common ones, essentially, because we are a newer team. Obviously, with time, hopefully we will get more parity, but that's something to bear in mind, some models will not convert, but most of them do, so it's worth giving it a try. If it doesn't convert, it will tell you why, it will say it's missing this operation. In that case, your options are to implement the op in JavaScript or to remove the op and use something similar that we do support. So those are your options there. For those of you who are new to machine learning, what I just said might be a little bit over the top there, you don't need to understand that fully for the rest of this talk. I just wanted to give some background to people who come from the Python background so they have some idea of how to use TensorFlow.js from their perspective.

Let's talk about performance here. So looking at MobileNet V2, these are the results for Python versus TensorFlow.js in Node.js. You can see here on the GPU, Python has an inference time of 7.98 milliseconds, and TensorFlow.js on Node has an inference time of 8.81. That's less than a millisecond of difference, which depends on how the server was feeling that day and what it was doing. That's within margin of error. And for all interests and purposes, it's basically the same. And what gets really interesting, though, is if you have a lot of pre- or post-processing, and for those of you new to machine learning, the machine learning model, before you can what you get instead of a consistent dataset in the form of JSON or a JSON file, you can send data to the machine learning model, you need to manipulate that data into a form it can understand. And that's known as the pre-processing. And the same on the other side of the coin as well. When the machine learning model spits some data out, you typically need to then process it to then do something useful with that to make it more meaningful, and that's kind of the post-processing, if you will. So basically if you're doing a lot of pre- and post-processing, if you convert that, those layers to Node.js, you can take the benefit of the just-in-time compiler of JavaScript and see some significant performance boosts for your end-to-end classification times. So whilst the inference is basically the same, the end-to-end classification time, if you bother to change to Node, can give you significant boosts. So let's see a case study for that right now. So here we can see how Hugging Face, who are very popular for natural language processing models, and that's basically the understanding of human language, if you will, you can see here how they converted their distilled BERTs implementation to Node.js. So what do I mean by that? What happens here is that they took their original model and they didn't convert the model, so the inference is the same by just using it directly in Node, but they rewrote their pre and post-processing layers in Node.js. So that means the end-to-end inference has been now doubled in this case. We see a reduction of 2x in end-to-end performance, which is a significant boost if you're trying to do this at scale. And instead of taking two seconds to execute, it's now subsecond execution time, which is really, really nice when you're trying to do that for a user experience or something like this.

And then finally here, there's five client-side superpowers that I want you to be aware of. Now this is specific if you are only executing in the web browser on the client side, and these are hard or impossible to achieve on the server side. Now, the first one is privacy, which we hinted at earlier in the presentation. Essentially, if you're executing on the client-side in the web browser, then your privacy is completely preserved. None of the data from the sensors you might be using are sent anywhere else, and that can be a really big win depending on the application you're trying to create or maybe the region in which you live. The second point is lower latency. Because we're executing completely on the client side, you don't have a round trip time again. And on a mobile device, that could be hundreds of milliseconds if you're in the middle of a field and you're trying to classify a flower in the field on a bad 3G connection. That could be hundreds of milliseconds, and, you know, that's not the best user experience. So with TensorFlow.js on the client in the browser, your apps can work offline and work in 10 milliseconds instead. Third point is lower cost. You don't have to hire expensive servers running very expensive GPUs, lots of RAM and cutting edge processes to do the inference, because the inference is happening on device. And then the fourth point is interactivity. The web and JavaScript have been designed from day one for the presentation and display of content and information. And for that reason, the libraries that are available to you in JavaScript and the resulting communities around them as well, are far more mature than you traditionally see in other languages. So that's something to bear in mind if you want to prototype faster. And then the fifth point is the reach and scale of the web, of course. Anyone in the world can click a link and get the machine learning working straight away for free. They don't need to be a machine learning expert to try your demo. For that reason alone, if you're a researcher trying to get people to try a model out, the best way to do that is via the web. You can reach billions of people and they don't need to be an expert to run the model. If you only have your model available in Python, in order for someone to try it out, first of all, they need to install Linux.

Not everyone has that. Second, they have to install Python and then TensorFlow and then the CUDA drivers for TensorFlow, which is not a trivial process and then they need to clone your GitHub repository and then read your readme. And if all of that goes well, then maybe the stars will align and they'll run your machine learning demo. people don't have time for that. If you look at the average person, they're not going to go through all of those processes to try your model, even if it's the best model in the world. So if you want more exposure and more people to try your model, then using the web can be a great way to do that.

Now, flipping over to the server side, so this is when you're using TensorFlow.js in node.js on the server side, there's some benefits to that side too, and there's certain situations you don't want to execute on the client side, as we'll see here. First of all, you can use TensorFlow to save models without conversion. So if you prefer to keep your machine learning model creation in Python, that's completely fine, but it allows you to integrate with web teams in a much easier way. Second point, it allows you to run larger models than you can on the client side. Obviously, if you're running on a tiny mobile device, there's going to be some hardware constraints as to the upper limits of the size of the models you can execute on such devices. you probably don't want to push down a one gigabyte model to a tiny little mobile device on a 3D connection. That's just not going to work very well. Third point, you can code in one language and this is really important if you're already using JavaScript, as I know many of the people here today are. By keeping your code in one language it allows you to maintain your code better, encourages reusability, and, of course, makes it easy to read and understand for everyone else on your team who's already using the same language. For those of you who are new to JavaScript, JavaScript is used by 67% of developers out there according to the 2020 Stack Overflow survey of professional developers in the ecosystem. So basically that's a large number of people. Even if you're not using JavaScript right now, there's a lot of other people who do, which may end up working to your benefit when trying to hire people and so on and so forth. Fourth point, there's a large NPM ecosystem, so if you need to get packages for various things, that's growing all the time, and we've got a great community for Node as well. And then the fifth point we've already kind of spoken about is the performance. We've got the same C-level bindings as the original TensorFlow and Python, but in JavaScript with Node.js, and that means you get the same CUDA acceleration and the same AVX support on the server side. And then if you are converting to Node.js, then you get the just-in-time compiler boost which is unique to JavaScript, which means it can optimize your code on the fly. That gives you two performance boosts in the case we saw with Hugging Face.

So, the final question is, what are you going to make? And of course, I want you to all start to get thinking about this whilst we're in the workshop today. Think about what you might make, how you can push some of the models we're going to try out today in creative ways, and think about using them beyond their original intention. And here's a great example of someone from Japan, and this guy, he's actually a dancer by day, but he's managed to use TensorFlow.js to make this really cool hip-hop video. And the reason I say this is because machine learning really now is for everybody. It's not just for academics and engineers, but now we're starting to see artists, musicians, and creatives all start to take their first steps too. And my mind is completely blown every time that I see them make something because it's always completely unexpected and very, very delightful. So do bear that in mind. And I'm super excited to see how all of you are going to use TensorFlow.js to help this stuff come to life.

So, if you are interested in getting involved, check out the special interest group under our GitHub code. If you've got more technical questions, our team monitors our Google Group, as you can see there. And then we've got some great Getting Started code on Copen and Glitch, some of which we'll be going through today. And then if you want to go deeper after this workshop, I highly recommend checking out Deep Learning of JavaScript. It's a great book, and takes you from zero ML knowledge to being pretty much a hero in machine learning, from simple linear regressions, all the way to convolutional neural networks and genitive networks, and much, much more. So, basically, the only prerequisite is that you know some JavaScript, but you do not need to know machine learning to start reading this book. It'll kind of guide you through that process fairly well. So, it might be some terms you have to look up here and there, but it's a pretty good book, overall, and it's one of the better ones I've seen written at this point in time.

So with that, come join our community. If you're interested, check out the Made with TF.js hashtag on Twitter and LinkedIn. Every single week, we've got people making amazing demos, and it's great for inspiration to kind of just get a feel for what's going on in the TensorFlow.js world. I can't fit all of them on the slide, but here's just a few extra demos of what people have made in the recent past. And with that, we also have show and tells every quarter on our YouTube channel, and I invite the best projects that I've seen to come talk about how they were created and for people to nerd out on that on the TensorFlow YouTube channel over on YouTube. So, the next one will actually be on December the 11th, so mark the date for that if you're interested, and hopefully I'll see you over there at some point too. And so, the final question is, what are you going to make? And of course, I want you to all start to get thinking about this whilst we're in the workshop today. Think about what you might make, how you can push some of the models we're going to try out today in creative ways, and think about using them beyond their original intention. And here's a great example of someone from Japan, and this guy, he's actually a dancer by day, but he's managed to use TensorFlow.js to make this really cool hip-hop video. And the reason I say this is because machine learning really now is for everybody. It's not just for academics and engineers, but now we're starting to see artists, musicians, and creatives all start to take their first steps too. And my mind is completely blown every time that I see them make something because it's always completely unexpected and very, very delightful. So do bear that in mind. And I'm super excited to see how all of you are going to use TensorFlow.js to help this stuff come to life. So with that, before I get started with the live hands-on demos, feel free to add me on Twitter and LinkedIn. If after this workshop you have further questions, this is a great way to keep in touch, and I'd love to connect with you on there. And of course, no doubt with you on more TensorFlow.js stuff and tech in general. So I talk about a lot of things over there. Awesome. So with that, I'm going to stop sharing that screen and head over to the first part of our workshop. So for those of you who are still here, just say yes in the chat to make sure everyone's still actually at the desk. And basically, I want you to go to the following website. I'm going to put it into the chat as well. If everyone can go to this link, I put it in the chat, teachable machine.withgoogle.com forward slash train. And once you've got it all loaded, I'm going to give everyone one minute because I know people might be, oh, he's actually asking me to do something. So I'm going to give you a minute to get at your computer, open up a browser tab, and go to the link that I just said. So do that. I'm going to take a glass of water in that moment, and I'll come back to you in just a second. And basically, what we're going to learn to do here is we're going to learn how to recognize any object in our rooms right now, live, in under five minutes, hopefully, if it all goes to plan. The talk might take a little longer. I'm going to explain things a little more and answer any questions people might have. Yep, the URL is in the chat, hopefully you can see it. There you go. And as people start to load that up, just let me know in the chat that you've got it loaded, just so I know when to move on. If anyone still needs more time, also just tell me. Cool. Most people are ready, it seems. Yes, I can share the LinkedIn. One second. I can also put that in there for those of you who wanted the links. For those of you who wanted to add me on LinkedIn, there's my LinkedIn. And I'll put the Twitter in there as well for good measure. Oops. And there's the Twitter for those of you who want to add me there as well. I think everyone's got it open. So Teachable Machine, what is this? Teachable Machine is completely written in JavaScript and TensorFlow.js and runs entirely in the web browser. So not only are we going to do the machine learning training in the web browser, but also going to generate the model and do the inference in the web browser as well. So once the page is loaded, we're never talking to the server side again. So that alone is like super cool and gets me really excited. Oh, no one can see what I'm writing. Oh, interesting. OK, one second. It seems my links were going to people in the waiting room and not in the live chat. Can people see what I'm typing now in the live chat? OK, perfect. Awesome. Thanks for everyone else who jumped in there with the link to the demo that we're going on right now and saving me. That's great. I'm a bit of a noob at Zoom, it seems. OK, so anyway, hopefully everyone's now at the link that I sent. And you can see here that we've got three options here. We can choose to recognize objects. We can choose to recognize audio. And we can choose to recognize poses. And today, we're going to concentrate on objects. But I encourage you, in your own time, to try the other two. They're just as easy to use. So once you know how to use one, you can use all of them. So I want everyone to click on the Image Project for me, and you'll be presented with a screen that looks something like this. Now, hopefully, you can all see that. And let me just walk you through what we're seeing here. So this is kind of like a nice flowchart representation of the training pipeline, if you will. On the left-hand side here, we're going to define the things that you want to recognize. So I'm going to go ahead and click on the little pencil icon for the first class and call this one Jason. Because the first object that I'm going to recognize is my own face. And then the second object I'm going to recognize is going to be a deck of playing cards that I've got available in my room right here, as you can see. So I want you to do the same. I want you to change the labels to be something that you have in your rooms right now. Maybe you can put your name and a random object that you have available. Maybe it's your mobile phone. Maybe you've got a mouse, a spare mouse, a book or something, whatever it might be, just go ahead and change the name so that it's something more meaningful. Jolly good. Okay.

So let me know when you've done that. A few yeses in the chat, please, and then I'll move on.

Cool. All right. Good stuff. Now, the next thing you need to do is if you wanted more than two classes, we're going to just do two for now because to keep it simple, you can just click the add a class button at the bottom. So if you want to recognize three objects or four objects or five objects, different types of objects, you can click on the add class button as many times as you wish.

Now, the next thing is important. You need to click on the webcam for the first class. And when you do that, your browser's going to pop up a little window asking for permission to access the webcam. So click allow on that. And when you click allow, you should see a live preview like I'm seeing right now. So I'll just let everyone do that because if it's your first time, you'll have to click a few buttons to make sure you see the live preview. And if for some reason you've got more than one webcam, you can use the dropdown here to select the camera that you actually want to use. So bear that in mind if you're seeing the rear of your laptop, if you've got one of those smart laptops with two cameras in, you can select the web camera from the dropdown. So hopefully everyone can now see their faces and that is a good starting point.

So the first thing we're going to now do is click on this hold to record button. And for my face, I'm going to get a few varying angles of my face. And this is important. You want to control the length of your face. And this is important. You want to kind of show the machine learning model, like all the possibilities of how we're going to see this thing in the future. Right. So I'm going to just get a few samples of my face, just click and hold the blue button. And I'm going to move my face around. There we go. So I just move my face around. I've got 38 image samples. So want everyone else to do the same thing for their first object, please. And get roughly the same number of images. 30, 40, 50 images is probably good enough. So do that and make sure the object you're interested in is close to the webcam. And let me know when you've got about 30, 40, 50 images in your web browser. Once again, feel free to type in the chat. OK. 91. That's great. Let's not go for high scores, though, because we will end up taking longer to train. But yes, if you wanted more robust models in the future, more imagery is great. All right. Good to go. Excellent. So now let's do the same for the second class. Click on webcam for the second class that you created. For me, that's my deck of playing cards. And now we're going to repeat the process. And I want you to get the same number, if you can, number of images. But don't worry if it's not exactly the same. If it's, like, within 10, that's fine. But you want roughly the same number of images. And once again, get it nice and close to the camera and move it around like I'm doing now. So if you've got a book or a pencil or whatever it is you're doing, get it nice and close like this. And then click the hold to record button and get roughly the same number of images. And you can see there I've got 36, and that's good enough for me. So once again, everyone do that, please. And let me know when you're good to go. And if you somehow get too many images, you can always add a few more to the first one by reclicking on the webcam there and redoing the first one if you chose to do so. And for those of you who finished already, let me know what objects you're detecting. It's always good to see what people are trying to recognize today. Cool, good to go. Great stuff. Glasses, camera lens, phones, books, mugs. Excellent. We've got a great bunch of items. So what we need to do now is click on the train model. But before we do that, I'm just going to show you there are options to change some more of the advanced options. And we'll actually learn more about what these things are later in the presentation for those of you who are new to machine learning. But just be aware that there are some more advanced options you can change if you wish to do so. But I suggest leaving at the defaults. And then simply click on Train model. And now once you do that, it's important to make sure that this browser tab is in focus and not minimized or hidden, because web browsers give all the processing power essentially to the active tab. So if you're trying to do this whilst doing something else, that's not the best way to train a machine learning model because it's going to go really slow. It might take hours. But as you can see, my model is already finished in 15 seconds. And I've managed to retrain the model. And what's happened behind the scenes here is that we're using an existing model in this case, it is one called ImageNet. And that knows how to recognize thousands of different types of objects. But it's probably never seen my face and it's probably never seen my deck of cards before. So what we're doing is we're adding some layers on top of that to then take what is already learnt. And we're trying to then repurpose what it's learnt, the various weightings and things in its lower level networks to then feed back into these new layers. I'll have a meeting, I'll do it down there. Oops, sorry, what did someone say? Whatever, you report to me, I'll do it down there. If you're down there, do it here. I can't hear what you're saying. One second. If you have a question, maybe type it in the chat and I can... OK, I think it might be just noise. Yeah, fine. So basically, it's retraining just the top layers to then classify the difference between my face in this case and the deck of cards. And you can see here in the live preview, we've got a prediction of Jason with 100% confidence, so it's pretty sure what it sees right now is me.

And if I bring the deck of cards into view, you can see it switches to cards. So, Jason, cards, Jason, cards. And you can see how fast that is. It's working in real time and we managed to train it. And all of this is happening in the web browser. So, pretty cool. And we did that in, what, a few minutes? And in a few minutes of your time, you've managed to make something that's robust enough for a good prototype or something like this. Now, if what you've created is useful, you can actually click on Export Model here at the top right. And you can now either copy this code and just use it as is, or you can click on Download and actually make a physical copy, if you will, of the resulting model weights and files, which you can then host on your own website to your own user experience, add your own workflows and other things, and then make it do something useful. I have seen people use this to control things like Raspberry Pis, where they can check if the garage door is open at night, because, you know, the garage door is open with blackness versus the garage door is open with some scenery behind. And it can tell the difference between that. And if you've left it open and it's getting dark, it can automatically close the garage door. So start to think about how you can use these superpowers, if you will, to do things in your life to make your life a little easier, or to control something on a web page, or control something else, or combine technologies together. And, yeah, basically, this is a great way to do that.

Let me just go to the questions in the chat one second. This is an example of a few-shot learning, right? So this is an example of one form of transfer learning, essentially. And so transfer learning is where we take an original model but has already existed and already trained on some kind of data set. And we're learning from its previous learnings and then building upon that by adding some extra layers on top to then use its prior knowledge to then classify new things. Because often, if you can recognize cats, dogs, and mobile phones and laptops, the features of those things, like lines and shapes of objects, can often be useful for recognizing other things as well. That allows you to do then re-train new models like we just saw very quickly. If we were to train this from scratch, it might take weeks of processing power to go through millions of images for it to learn all of those features. But because we already have those features, we can now just build upon them, which takes 15 seconds in my case. So it's much much faster. We can do that in the browser even, which is really, really cool. Let me know in the chat if the things that you were trying to recognize actually got recognized. I'd love to hear if it worked for you, and if not, maybe you can tell me what they were and what was going wrong. And for those of you whose stuff is working perfectly, try and break it. Try and explore what the boundaries of this are. So I've got a deck of playing cards here, right? And it's basically probably learned that this is like some kind of rectangular shape, and I've only shown it the color blue. So if I show it the color white, oh look, it also thinks it's the same deck of playing cards. So if I wanted to distinguish between a blue card and a white card, I'd have to add another class of data to show the difference between the two. And then it would learn that color was important, too. So I want everyone to try and break their model right now. So try and find something that might be visually similar to what you had and see if it classifies it as the same, or just experiment a little. I'll give you a few minutes just to play around and just try and explore what's going on behind the scenes here with this machine learning and what it has actually learned, because it's not always intuitive as humans to understand what it's learnt as the features of that object. As humans, we'll go, OK, Jason's face clearly, is this blob right here, but maybe it thinks this black blob is my face. And we will never know until I change the color of my shirt if my shirt contributed to this classification or not. So this is why it's very important when training models to have a good representation of all the different types of things you might see in the future. Otherwise, you end up with bias in your machine learning model. And this is a topic that's very current right now because many famous companies have had biases in their models leading to incorrect results in the real world. And, you know, this is not intentional, but it happens very easily. Imagine you're training a system that's maybe for speech recognition and you're trying to recognize British English. So you go around England, you sample all your friends, and you get some good training data. And it seems to be working well, everything's going great, but then, of course, you go over to America and it doesn't work at all because the accent is completely different. And that's a great example of an unconscious bias that's going on in these models here because you trained it on a certain type of data and you forgot about a different type. And it wasn't intentional, but these things can crop up in more than one way and it's often hard to detect. So try and be mindful of that when you're training machine learning models in the future.

Okay. Let's see here. Let's see what questions we have. Mobile phone remote controls... it hides my hair and says I'm a phone. Exactly! So you can see where these edge cases are starting to go wrong. And this is important to know, and it's important to figure out how we can fix these. And of course, in this case, you would need to add more training data to show what is not a mobile phone, in that case. So maybe you would show your hair in other samples of the image and so on and so forth to distinguish what is what, essentially. And eventually, you'll have enough information to be able to get pretty good at generalizing and distinguish what the unique features of that thing are.

When I use another object of the same color, it recognizes that original object. Exactly. Just like my playing cards, it probably learned... in my case, it learned the shape of the playing cards, and it thinks anything that's like a rectangle of this kind of size is a playing card. So that's important to realize. So, what are the limitations of this? Some good comments in the chat there. So what are the limitations of this? Great question, Tal. So as you've seen, the limitations right now are that you can get something wrong if you didn't have enough training data. And then of course, if you want to use this in production, you need to be much more mindful of that. And you want to ensure, especially if it's for something more serious, maybe you're trying to classify if something is in a medical scanned image or something like this to see if there's a broken bone or something. In that situation, the consequences are much higher if you get it wrong. And you'd need a lot more rigorous checks and training data, or maybe you want to combine different types of models to get better accuracies and so on and so forth to make sure that works correctly. And I'd encourage for anything that involves a human life or something like this to always have a human in the loop to do a sanity check. So we see a lot of systems these days where AI can help medical systems perform much better. In fact, brain tumors are a great example of this, and it's being trained on these grainy images of brain tumors that come back from the x-ray scans and things like this. And essentially the predictions are much better than a human expert can do, but of course, the human expert is always still in the loop to then check its predictions and make sure that it actually makes sense and they can verify visually that yes, OK, there really is something going on there, and then of course the patient can get the right treatment. But of course, I think the sweet spot right now for machine learning systems is where you've got human and computer working together, basically doing things better than they could do individually. I think that's the sweet spot right now. And as machine learning gets better, maybe that will shift, but right now the sweet spot is human and machine learning working together, I feel.

Yes, someone's picked up that they started to explore other objects as well. Phone and a wallet, for example, and they've noticed that the wallet is recognised as a phone, it's a generic black rectangle maybe, just like a phone is a generic black rectangle these days. And this has been shifting, so we need more training data for that. And typically, when you use a machine learning model, you have a kind of context in mind, right? So if I wanted to make something that looks like a phone, I might have tons of different types of mobile phones as different classes, okay? And if I show a wallet, it's going to try and predict it as a phone, no matter what you try. So one thing you all might realize here is that the machine learning will always try and give you an answer. It doesn't know to say, actually, that's not the thing. It's always going to try and find the thing that's most closest to what it thinks is the thing. And an error will happen when you don't realise that that's the thing. And that's something to bear in mind, because whatever I show it, if I show my model right now, this remote control here, it's less sure. It's like, okay, that's a long rectangle. It doesn't quite look like a deck of cards. It's 70% sure, but it is heading towards the cards area because it's rectangular. And this is something you must keep in your mind there, definitely.

We had some fun with Teachable Machine. I want to start off with that because it's an easy way to get everyone into what this machine learning is capable of doing, some of the limitations, but also how easy it is to get started in this visual way for everyone, just to make sure we've got some common starting points here. So, for the money notes, you might want to bring it closer to the webcam. You might be picking up on something in the background, so maybe bring the money closer and show it – different rotations and angles slightly. Just rotate it around, and give it some variety of those two notes. Maybe that will work better for you there. Yeah, do have fun with this. After the workshop, I encourage you to continue exploring these. If you've got further questions, reach out to me on Twitter and LinkedIn. We can discuss why your thing is or is not working, because that's an interesting part of the learning experience if you're new to machine learning, to figure out why it's behaving in the way that it does. And unfortunately, with these machine learning systems, it's very hard to have explainability, to understand how it came to its decision. I've got a great course online that explains how neural networks actually work behind the scenes, which is separate to today's conversation. But with that, you get an appreciation as to why things come out, the way they do. Because at the end, it's just a bunch of mathematics. A neural network is essentially a bunch of multiplications and additions that work out in a certain way to then predict a certain thing. And so if you think about that, it's always going to give you an answer. Even if it's not correct. As a human, we see it's not correct, as far as the machine is concerned, that's the most likely thing. So it's always going to give you an answer. So that's something to be aware of as well. Yes, so for the model code, for a teachable machine, sorry, I can... The code is actually in the export model area here. So if you click on export, the JavaScript you need to run this teachable machine demo that you've just created is right here. That's all you need to run it. You can literally copy and paste that into, say, CodePen, which we'll be using next in our workshop, in fact, and you'll be able to run your teachable machine demo live on a website and start making it prettier and doing more useful things. So we can go through that maybe later on if we've got time.

Alright. So let's move on to the second part of this workshop. So we've seen how to use teachable machine, that's great, but let's look about actually building something from a blank canvas using one of our premade models. So let me review here our premade models. So if you go to tensorflow.org for such models, you'll see I'm putting in the chat as well, you'll see a page like this, and you can see here we've got many different models that do many different things from image classification, object detection, body segmentation, pose estimation, text toxicity to know if a statement that someone has said is particularly harmful, like are they being toxic towards someone, or something like this, you can very easily classify a blog post, if it's toxic or not, before it's even posted, okay, hey, dude, like don't post that, that's, that's rude, and hopefully we have a more friendly internet as well. So things like this now exist. And we've got many, many more down here below, which I encourage you to explore in your own time. But basically, you can click on any one of these. And you can actually get some more interesting notes on, on our GitHub page to this, we've got a whole whole new range of like how to use, and APIs that you can configure for it, to make it do things in a different way, in a more optimal way, more precise way, basically tuning the hyperparameters of these machine learning models to make them work in the way that you need. Now, we're going to be looking at object detection today in our in our kind of hands-on approach. And what I want everyone to do is to go over to where's it gone? One second. Put that back. Go over to Glitch.com. I'm going to send you a link in the live chat. And I want you to reglitch this project for me. So, what do I mean by reglitch? If you go to the link I just posted and click on this drop-down, you'll see that there's this remix project. And that's basically going to clone the project to your own private repository on Glitch.com. I highly recommend signing into Glitch before doing this. Anything you do today will be saved and you can go back to it later. For those of you who don't want to sign up to Glitch, that's fine. Anything you do on the web page will not be saved. You might want to copy and paste that to your local files afterwards.

Glitch is a great website to write CSS, JavaScript and server side stuff completely free to hack and code and in my case, do live web shops like this, which is great. You can hopefully see my cursor in the page when you're on this page. If I start typing here, hello, hopefully everyone can see that updated as they're on this web page as well. I want you to have two windows open. One window is the link I've just given you and the second window your project. All you need to do is click on remix at the top left there. You don't need to join the project, I believe. I think you should be able to do it without joining the project. You just need to click on the drop down and click on remix. I'll give everyone a few minutes to sign up and do that and I'm going to have a quick water break. And feel free to let me in the chat once you're signed up and you've got two windows open. One is my original link and the second one is your link which is your copy of the code. in the chat. Now, for those of you who have finished, if you're curious to know more about our glitch.com presence, if you head over to glitch.com. Let's go over here. If you type in glitch.com, it will open up a window. There we go. You will find me here. And you can find lots of other glitches that I've created for your getting started pleasure. But very easy to use in much the same way. Now, don't look at this right now. We're going to be walking through this manually today. But basically after the show, I'm going to be asking you to use the bots. If you can make something cool, use the made with TF Jet hashtag and I'll feature you on community collections and things like this too. I would love to see what you create. How everyone is doing? Is everyone on the glitch.com and manage to clone it yet? There's a link one more moment. For those of you trying to join the project, you don't need to join my project to edit. You need to make a copy of it. So you need to go to the drop down and click on remix to make a copy of this code in your own space. So all of you who are trying to ask me for a copy, please, send me a copy. And I hope you can see this one, because this is the master copy. Okay. So one person is good to go. Who else is ready? I see two people now. Okay. Once I see a few more people, okay, everybody's got a copy. So just to confirm, everyone should have the copy, so that's one. And I've got two people that want to see a copy. So I've got two copies of my code, and one is the live view where you can see me typing like I am right now. Hopefully, in the other view, you can see me typing stuff. Can everyone see me typing on Glitch just to confirm that you can see me typing stuff on Glitch? Perfect. Awesome. All right. So the first thing we're going to do, and the most important, is to, we're going to add, for those of you new to the frontends, HTML is the content of the web page. This is the text, the images, the videos, that kind of stuff. The JavaScript is all in script.JS. This is all the attitude and logic, this is the actual programming language. HTML is not a programming language. JavaScript is. And all the style is in style.CSS. In the style.CSS, I have styles pre-populated to save time today. This is not a CSS crash course. For those that are familiar with front-end technologies, you will understand this easily. All you need to know is that this adds some styles to what we're about to make so it looks a little prettier. Otherwise we will end up with generic rectangles and boxes which is not pretty to look at. As I mentioned, the behaviour of this HTML and JavaScript hits is you know that the HTML is supposed to be rectangular in nature, whereas CSS is supposed to be rectangular in nature. But we will focus on the HTML and JavaScript today to show you how to start from a blank canvas and whenever you're starting a new project, feel free to fork this project if you want and use it as your boiler plate HTML, CSS and JavaScript for any future webpage you make. It's a good boilerplate to start from if you're in a safe environment to start with. The first thing you want to import is the TensorFlow.js library. We're going to do that by essentially adding a script tag before our script.js. We want this to execute before we start doing stuff. So we're going to make a new script tag, like so. We're going to set this source to be let me find my CDN link here. Let me just look this up. One second. We've got TensorFlow.js here, I love it. You can see here I'm going to set the type of the script to be X JavaScript, because this is a JavaScript script. We're going to close that script tag, like so. I want everyone to copy that line of code and put that into their copy of the code essentially, in your other window. So hopefully everyone can see the code I've added on there. I'm going to try to speak even slower because the code is in 1616 of index.html, and I want you to go and copy that code and put it into your own document that you cloned. And that's basically going to load TensorFlow.js into the web page, which is obviously very important. Awesome. Now, the next thing we're going to do is we're going to grab the script sheet and essentially, that's going to be another script import. I'm going to copy and paste this line of code for a second so I don't have to type it again. But I'm going to change the thing we're importing to be the coco SSD import. Where did I find this, you're asking. You can get it from that GitHub link I showed you earlier. On the GitHub page, and as you can see here, it's got a link showing you where to grab the library import from. So that's where I understood how to do that. So back to the Gitch code, you can now see I've got two scripts imports plus one that was originally there. There should be three in your code now. Everyone with me so far, everyone got the three skip imports on their version of the code. Show up yes if you do. Cool alright, good stuff. Awesome so not very exciting so far. We've imported some stuff. The next thing you want to do is you want to make something simple to start with the image clicking demo, but we had at the very beginning of the presentation that I gave. So let's create an area to put our clickable images first of all. OK, so what I'm going to do is I'm going to create a section.

We have an ID of demos. And I'm going to give it initially a class of invisible. And I'll explain why that is in just a second, but this section you can think of as just a rectangle on the page that can contain some stuff OK. For those of you new to JavaScript in HTML. This is just making like a panel if you will that can contain some other things, and I've given it an ID of the name of a class of invisible, and I've given it a class of invisible and that means when the page loads is going to be set to this class invisible and you can see in the CSS I've actually got this thing called invisible that sets the opacity to 20%, so it's going to be semi transparent initially, and the reason I do that is because I won't. I don't want anyone to click on the demo section before the model has loaded, so we're going to do some JavaScript goodness later to change the class to be visible. Once the model has loaded because the model can take a few seconds to load. If you're on the slow Internet connection, so go ahead now.

I'm not going to say this every time now, but as I change stuff on the code pan on my side, I want you to replicate those changes on your side when I say it's good to do so. So just bear that in mind, just a copy along for this live coding session, OK? So next thing I'm going to do is I'm going to actually create a placeholder for an image tag, so I'm going to say div, I'm going to give it a class of classify on click. And basically what I'm saying here is that I want anything contained within this div element to be clickable and to be classified when I click on it. Essentially, so this is like a hint I'm giving to myself as a programmer that I can then find these elements later on in code in JavaScript. So I'm just setting up the foundations here in the HTML. And what we're going to do is we're going to put an image here, and we're going to go IMG SRC equals and we're going to put a random image. I recommend using placekitten for now, random cats because we know we can recognize cats and these images are free to use so HTTP. Placekitten.com, and you can put some random number here like 500 and it will give you a kitten that's 500 pixels in size. So if I now use that image tag like so, if you click on show at the top of a glitch and go next to the code, we get a live preview of what the project is doing right now with the code back there. So you can see right now that I've got this title, which is this H1 tag here in orange, and I've got this image that I just added of a cat from placekitten.com, which is 500 pixels wide, but it has been restyled to fit in the page, as you can see. And currently, you can see it's kind of grayed out because the transparency is set to true because of his class called Invisible. So hopefully everyone else is at the same stage and you'll be able to see the same result on the right. So make sure everyone can see the live preview on the right. Because now we're going to start using that a lot to see how our project develops. So, it's a bit of a pitchy project, but we hope you'll be able to see the results in the live preview. And let me know in the chat if you've got a kitten showing on the right-hand side there in your code. Can you see the cats? Excellent. And feel free to choose a different number there, you get a different size kitten, but I recommend going for something at least 500 pixels in size to get a good cat, otherwise they're a little bit small sometimes. Awesome, great stuff. Now, one thing I would like to do, is I've got a new attribute called cross-origin. And just need to set this to anonymous for now. I spelt that wrong. Anonymous. There we go. And why? Why do I need to do that? That's a great question. Essentially, this place kitten image is located on a different website. It's on placekitten.com. And we're executing our code on placekitten.com. And that means in JavaScript land that can be seen as a security issue. So, in order for two websites to allow things to be used from different resources, you need to ensure the cross-origin resource headers are set correctly. And by adding this attribute to the image, it allows us to then use this image in our JavaScript later on programmatically. If you don't add this cross-origin attribute, when you try and access the image for classification, you're going to lose the other one. And this can cause an error later on. So make sure you add this attribute to the image like I've done here. Let me see questions here. How do you open the preview. So for those of you who missed it the first time, you can open the preview by clicking show at the top of the screen and go next to code. Or you can choose in a new window if you prefer to have it in a new window. That is fine. But I like to have it next to proofread. And you can type in the code, and watch it go up on the right-hand side there. Oh! Thank you for the spelling typo there. I have indeed spelled origin wrong in my cross-origin. Yes. For those of you who copied my code too soon, you might want to change that. I had a typo there. Cross-origin with a O I. Six two i's in there. My two co-ordinates are End-of-the-Word. If you make a mistake, it drops down for later. One can see a cat and if you're having issues refreshing, you can manually refresh on the right-hand side. Where is my cat? Now I'm having issues. Interesting, the cat is not coming there. One second. I can't see it. It's not there. Interesting, it doesn't like that. That's odd. Maybe PlaceKitten doesn't allow cross-origin images any more, which would be not cool for this demo. One second, let me see if I can do anything about this. One moment. Anything else? Okay, what we can do is a back-up plan, luckily we are using Glitch. If your cat has disappeared, go to the PlaceKitten link directly like this. Go to Dropbox, save the image and save the image to your computer somewhere. Why is it adif? I thought about JPEG. Let's save that, then go back to Glitch, and what you can do is, under the Assets folder, you can drag and drop that image. Or you can click on Upload, if you will, and you can save, upload the cat, like so. So here I've got now a cat uploaded to Glitch, which we'll get around these cross origin issues for now as it seems the Platzkitten website doesn't allow us to use that anymore. So I highly recommend, for the purpose of this demo, to grab a random image, it could be anything you like at this point, upload it to the Assets folder in Glitch by dragging and dropping or clicking on Upload here. Ideally, it should be a JPEG or something like this, and then go back to your HTML and grab the link for that image. Glitch will generate a new link, cdn.glitch.com forward slash some random characters. Copy all of that, go back to your HTML and paste your image there. And now you should see your cat with the cross origin set to anonymous, which is now correct. Also, like the first input, I can specify the name of the cat. And now I'm seeing something that I need to do with the net class of the one for the cat. Cool. Okay. Once everyone can see a cat with all that there, let me know. It seems with live demos, things are changing all the time. We've now got an image, we've got some script imports, it's now time to head over to the JavaScript. Click on script.js in your version of the code, and also over in the live version of the code, and we're going to start adding JavaScript. The first thing we're going to do is get a reference for the demo section that we created.

Create a constant called demo section, and it's going to be document.get element by ID, and we're going to grab a reference to the demo section. And for those of you new to HTML and JavaScript, you can see here in the index of HTML, we've got this section called ID demos, and here we're grabbing a reference to that section by grabbing a reference to this element with ID of demos. We're going to now have this in memory in our JavaScript called demo section, all right? And that's going to be our reference to JavaScript, all right? We're also going to create a variable called model, and initially, it's going to be undefined because the model has not been loaded yet. And this will allow us to detect when the model has loaded. Now, if we look at the documentation for Cocoa SSD, we'll see that in order to load the model, we need to call this code here. So you can go ahead and copy this code, or you can basically copy my code, whichever is easiest, and we can go back to our JavaScript and just paste that in like so. Now, what's going to happen is this JavaScript is going to be executed. We're going to call CocoaSSD.load, and then when it's finished loading, we're going to call this anonymous function that does some stuff. And you can see here, we're going to assign the loaded model to our variable called model, and we're going to remove the class invisible from the demo section. And as you can see, on the right-hand side here now, my cat has become full color rather than half invisible. So, we're making progress. We've now got a cat that is actually visible and our machine learning model has been loaded in the background. So, I want everyone to get to this stage and let me know when you've got your cat looking visible like this, and you've copied the JavaScript from this file here. And yes, a good point there, on Glitch.com you probably don't need the cross-origin, but I'm going to keep it there for the sake of demo in case people are using images from other domains in the future. But that's a fair point. Yes. People are good there. Excellent. Great stuff. So, the next thing we're going to do is we want to make this image clickable. So, let's make a new line. I'm going to make a new constant. Talking and typing is not easy for me. I'm going to create one called image containers. I'm going to get a reference to all of the potential clickable images in my document. And I'm going to do that by using document dot get elements plural by class name. Notice the capitalisation there. The class of these clickable elements is remember, classify on click, like so. So, now it's going to bring back to me an array of all the images on the page that have the class classify on click. So, this div element here, sorry. So, if I had multiple ones. Let's just kind of copy and paste this a few times. Let's put another one there. I'll now have two of these come back. I've got two cats, which are the same, at the moment, of course. They're going to be the same cats, but you could have different images, if you wish. So, if I go back to the script now, this is going to have two div elements assigned to it. So, what we need to do now is loop through those returned elements. So, let's do a simple for loop. For let i equals zero, i is less than image containers, for length, i plus, oops. We're now going to add a click event handler to each one of these child elements contained within a div, which is the image itself, essentially, okay. So, we're going to do image. So, we're going to do image containers, i, dot children, zero. We're going to get the zero children, the first child, because in each div we have one image. And then we're going to do dot add event listener, click. So, when the image is clicked, you want to call a function, and we're going to call that function handle, click, which we haven't defined yet, but we're going to define it next. So, let's make a function called handle, click, down below, function, handle, click, and then the event is going to be passed as an object towards that. And we're just going to console dot log, yay, I was clicked, for now. There we go. So, if we reload the page on the right-hand side here, wait for the model to load. It's going to take a little bit of time because it's a large model and I've probably refreshed the page 20 times there when I was typing. I now can click on the image. And, of course, if I opened up the console, you can see, yay, I was clicked, was printed to the console. Now, for those of you who are new to JavaScript, the console is basically this debugging area within every web browser where you can print messages to and print objects to, which is very useful. And you can access it by either right-clicking on the page and go inspect, and then click on Console in the tab that pops up at the top right there. Or you can press F12 if you're on Windows and that also opens up the console very easily. And you can resize that, and I probably recommend you to have it open. Now, if you see a lot of errors like this, ignore those, that's glitch, doing random things. We can just click on Clear to wipe that and start fresh if we need to. And now when we refresh our page, we'll see everything load. And then when I click on the image, we'll see that Yay, I was clicked is printed multiple times now. So, there we go. So everyone with me, everyone got this kind of clicking working for the images. Albert, when you click on the images after the load, do you see something printed to your console? Shout in the text when you're ready. Great stuff, awesome! So, moving on then. Now that the image has been clicked and we can detect that, we want to do something. So, the first thing we should probably check is to check if the model is loaded because if someone tries to click an image before the model is loaded, then that is not going to end very well when you're trying to do a classification of a machine learning model that does not exist. So, if the model does not exist, we can just simply print out console.log model not loaded yet. And we can simply break out of this function by going through return straightaway. So basically, if the model hasn't loaded, we're going to break out of the function straightaway and do nothing. Otherwise, we can actually use the model. And how do we use the model? Let's go back to our documentation and see what they say. So, let's see here, where is the example usage? So, here you can see model.detect is how we call the actual detection method. So, that's good, and we need to pass to it an image that we want to actually detect objects within. So, let's go back to our code and start writing that. So, if our model has loaded, we can now call model.detect. And of course, we want to pass it the image that was clicked. So, in JavaScript, we can just get the event object that we passed to the function call when it's clicked, and we can go event.target. In this case, the target of the click would be the image itself, which is great. And we can just pass that directly to the machine learning model. Now, this detect function call is asynchronous, and it returns a promise, so we can use the event keyword to then do something once it's finished detecting, essentially. So, what we want to do now, of course, is write a function to be called once the detection has finished. So,.then, function, and the function is going to be passed the predictions that it found, essentially. I'm just going to get rid of my console for a second because it's distracting. It's going to be passed the predictions, and I'm going to open squiggly brackets, like so, and there we go. So, now we've got a function that's going to call when the detection has completed, and we're just going to console.log predictions to see what comes back. Let's inspect what comes back from this machine learning model from TensorFlow.js. And if we open up the console again, and I click on an image, you can see this strange thing with a little triangle appears in the console, and if we click on that triangle, we can start to expand what is contained within it. And you can see here that this is an array, and the zeroth element contains this property called, this object called bounding box, or b-box for short, and within that b-box, there's four properties, which itself is an array, and these are basically, if you're going to read the documentation, this is the top left XY coordinate, so 28, 0.39 is the top left XY coordinate. And then the width and height are then following thereafter in positions 2 and 3.

So this is giving you the coordinates and the width and the height of the bounding box of the object that it's found. And for this zeroth element, you can see that the class is cat. So it's found the cat and the position is contained within this information here. So now what we need to do is, we want to iterate through all the things that is found in an image, because maybe you've got a big image that has many cats in it, or cats and dogs, or whatever it might be. So we can see, and we want to be able to put bounding boxes around all of the things that is found, OK? So, for that, of course, we're going to need a loop. So let's go ahead and write a for loop. But before I do that, are there any questions? Let me just catch up with you in the chat there. Let's check the chat. Please share the links of the docs. OK, someone posted that. Thanks for posting that, Bright, that's awesome. Great, you got a cat and a potted plant, good stuff. Awesome, so if there is no further questions, I'm going to continue with this then. So let's go ahead and loop through the, the kind of results that just came back. So on the new line here, scroll down a little bit here. So for let's say n equals zero, and then go, oops, not m, n is less than predictions dot length. And plus plus is going to make this a little bit wider, get rid of the F12 so I can see my code better. Alright, so there's our loop, we're going to go through all the predictions that we found in a given image, okay? And the first thing we're going to do is we're going to create a new paragraph element. So p for paragraph equals document dot createElement p. So this is just telling us that in JavaScript, we're going to programmatically create an element, a HTML element that we're going to inject into the web page later and there's going to be a paragraph element. Okay, and we're going to set the paragraph's innerText property to be equal to something. And what we're going to do is if we look at the object that came back before, let's just put this for hello for now so it doesn't crash the web page. Look at F12 and look at the way for it to load one second. It takes a little time on my side for it to load here. Come on, cats, you can do it. There we go. Boom! So if we look at this object again, you can see for the zeroth element there's this property called class, and here you can see it's called cat. So we want to print out the name of the thing that is found. So we need to get the zeroth element or the nth element and print its class value. So let's go ahead and do that now. So let's set this inner text to be predictions. And class. And we can also, we can print out its score, its accuracy as well. Why not? Let's put us in some text here with, then if we print out predictions n dot score, we can see how confident it is, essentially, in that prediction. Now, I'm going to go ahead here, and I'm going to pass this as a float because I know it's a floating point number. So we're just gonna use the inbuilt math, no, no, no, pass float function in JavaScript to convert that string into a floating point number. And then we can simply round that as well, so math dot round to make it a little bit more readable and not so hard to read and shorter. And now when we click on the image, nothing's going to happen yet because we've not added it to the document. So let's go ahead and add it to the document. So event.target.parent node, so we're going to get the containing parent, the div element. Append filed e. So we've set some text on the paragraph and we're now going to append it to the document once the image is clicked. So let's go see what happens when we do that. So you can see here that now that I've clicked the image, we get this orange box pop-up, and it's orange because of the style of asset in the CSS earlier on which you've all cloned. So you should see an orange with text pop-up as well. You can see it was one, cat with one. One basically means 100% confidence. So these floating-point numbers range from zero to one, and it's basically representing the probability of how confident it is in this classification. So one represents 100%, 0.5 would be 50%, and so on and so forth. So let's make this more useful, and maybe we can give a percentage score instead. So we can just simply times that by 100, I guess, to get the percentage. So let us close this, and times by 100, get the percent, essentially. Oh, sorry, the score times 100. After the, yeah, that's fine, yeah, perfect. Yeah, that should work now. So now when I run the code, when it refreshes, what happened there, did I do a typo? No, I didn't do a typo. Okay, it's loading, wait for it to load. Boom, and now I've got a cat with 90. That's good, so this time before, it was 90% sure it's a cat. So there we go, we're starting to print out stuff, which is great. So the next thing we want to do is we need to add some style to this paragraph text, because at the moment it's printed up below the image, which might be fine, but let's place it so it's actually maybe on the top left of the image. And I'm just going to paste in some code here that does that, so I'm going to walk you through it. In the name of time, I'm going to paste it in here. You can see here that I'm going to set the style to be left, to be the bounding box X coordinate, and then the top property to be the bounding box Y coordinate, and then the width is going to be the bounding box width, minus 10 because we've got a padding on the text of five pixels on each side, that's 10 pixels in total. So to make it look pretty, we need to subtract 10 from the total width. And now, when we click on something, we can see we get something that's center aligned at the top of the image for now, which maybe a little bit prettier depending on what you like to see. Cool, so next we want to draw the actual bounding box itself so we can see where the cat is in the image, especially if this is a larger image. So we can do that below all of this. So let's go down below here. And here, we're just going to create a const highlighter equals document.createElementDiv. And you can see here that we're now creating a div element as well as a paragraph element. And we're going to do a similar kind of thing, except all we're doing here is we're going to set the attribute of this div. So highlighter.setAttribute. We're going to set the class attribute. We give it some style. And I've got a predefined class in our CSS that's called Highlighter, I believe, like this. And that's just going to give it a dotted line around the edge of this div element so that we can see where it is on the screen, essentially. So all that's left for us to do now is to position this somewhere on the image, and for that, we can use the following code which I'm going to paste in in the name of speed here because it's quite a lot of code to write. And you can see here... I spelled highlighter wrong. Why is that highlighted here? Oh, I see. Okay. I've repeated myself there. My bad. There we go. So now you can see basically we've set the class to be highlighter and we're setting its left, top, width and height using the information that came back from the bounding box of the machine learning model's predictions. So hopefully once we actually add this to the page, like so, we can now click on the image and we're able to then see where in the image the cat is. Fingers crossed this works. Once it loads, let's wait for the cats to load. Boom.

And now we can see, we've got cat with 90 percent confidence and it shows you exactly where in the image the cat is. So let me drop off to the questions to see if there's any questions at this point. So basically, where do you load ML algos? In TFJS, I mean... OK. So in this situation right now, we are using a pre-made model and that means it's being wrapped up into a nice, easy-to-use class. And the purpose of that is because this is an introduction to machine learning, but in our final part of this talk, we'll be showing you how to write in pure TensorFlow.js itself, where you can actually specify the layers and the neurons and all that kind of stuff. That'll be our final example for today after this one in just a few minutes' time. Any other questions at this point? And let me know if you're able to get a bounding box around your cat like Shane. Yep. Okay. Awesome, good stuff. So of course, you can try this on other images. If you have any available, you can upload those to your assets folder, change the image to be that, and you can kind of see how it performs on those. Now, as you saw in my previous demo, we're using images in this use case here, And you can click on those, it may do great things, but you can also use the webcam. And we're using the webcam to actually see And basically, if you want to see how to do that, If you go to my original code on glitch.com, I'm going to send you the link right now. This code here has the extra code you need to write to be able to access the webcam. So instead of passing it a single image, all we're going to do in this case is we're going to grab a frame from the webcam and then we're going to pass that repeatedly to our model.detect. So once the model is loaded, you can call dot detect many times in an infinite loop, ideally using requestAnimationFrame so it's nice and easy on the processor. And basically, you can then use that with the webcam. So if you go to the other link I just sent into the chat, you can now go to Show, and hopefully you can see that here next to the code, and you can see the demo actually showed at the very beginning of the presentation where we've now got the Enable Webcam button, and if you click on Enable Webcam and allow access, you'll then be able to see this live demo. And all the code for that is contained within this script.js tag here. So you can see here, demo number two, and you can see the extra code I wrote to access the web camera and then to repeatedly call the webcam with the data from the camera itself. You can see here, instead of the image, I'm passing this video object, which is a frame from the webcam imagery that's coming back to me each time in that moment in time. And then that's how we get really great performance in the browser to classify these things again, and again, and again. And I'm sure many of you who are familiar with JavaScript, you have used the webcam before. So this code hopefully makes sense to you. If not, I put a lot of comments in there for you. If you would like to look at that in your own time, that's fine too. But if you've got any questions after the show about how the webcam part works, please do reach out to me and I can go over with that one to one with you if needed. So no problems with that. But for the last part of this, you're a bicycle with 80% confidence. That's brilliant. I'm not sure how you manage that, but there you go. ML is not perfect, but hopefully most of us are recognized as humans, which is always good. Yes, the link is here if you need it, which is the final code for the webcam which you can go to right now. And again, you can just click on the show and go to next to the code, and you can then of course see that live in the browser. So any questions on that so far before we move on to the next topic, which is writing a machine learning model completely from scratch? We're going to use no pre-trained models. We're going to give you just completely just JavaScript. And we're going to be showing you how to make a custom model completely from scratch. So before we go into that, any questions on the current learnings? And don't be afraid I know people are new to this, both JavaScript, both machine learning. There's no bad questions. Cool. I'm not seeing any questions right now. But if you have any, please feel free to reach out to me after you've played with the code maybe, that's completely fine too. So for the next part of this presentation, we're going to be essentially making something known as a simple linear regression. And what that means is that we're going to be able to fit some data against a straight line. So if you imagine, if you go back to your high school days, imagine you had apples and oranges, okay, and you plotted the weights and colors of these apples and oranges on a graph, you might find that some of those things, essentially, let's see if I've got a nice chart here, it might look something like this. You've got the apples and oranges plotted on a graph like this, you see the apples plus together like so, and the oranges clustered together like so on the graph here. And if you're able to produce a straight line that separates the apples from the oranges, you should then be able to predict a new piece of data that you've never seen before, just purely based on if it lies on below or above the line, which is pretty cool. Now, the other way you can also use this is to predict values for one dimensional data. So let's go a step simpler than this. Imagine you had house square footage and you had house prices. In that case, you could draw a line that correlates those two features. So basically, for a given square footage, you expect the house price to be a certain price. Okay. So today, we're gonna try and make that simpler version purely in JavaScript, in TensorFlow.js, and we're gonna train it to learn from some fictional data. And that fictional data is basically going to be simply a thousand times the square footage. And of course, the machine learning doesn't know this. It has got to learn that all by itself. And hopefully, when we make a prediction for something it has not seen before, like 768, it's gonna come out with 768,000 as its prediction. So you can imagine how you could use this for other situations in your life, too. So maybe you've got some inputs, and you've got some outputs, and you want to be able to predict those outputs. You can apply this same technique to that as well. So if anyone wants the code of the stuff we've just done, please use the last link I've done. I'm now gonna rewind the code of our MLConf Workshop example code here and make it go back to nothing. Let's undo all the things here. I can just delete all the Javascript, like so. And I'm going to undo the index.html stuff as well. Let's put this back to the beginning. Put that back to the beginning as well. Let me get rid of that title. Okay. It's really good. So if you go back to the original Workshop, the link I gave you, which is this one here, we now have another pretty much blank canvas. And I'm going to get rid of the CSS here as we don't need the CSS anymore. Let's get rid of this. And I'll leave the h1 there for good measure, but all the rest can disappear. So now we've got a new boilerplate piece of code here that's just the HTML and a script import for the Javascript. Now, as I said, we're going to basically do this all entirely in TensorFlow.js. So the only thing we need to import is the TensorFlow.js library. So I'm going to go ahead and add that here before the closing body tag, but above our script import. So you can see here I've now added that to the HTML. And let's make this a little bit bigger so we can see what we're doing here. All right. So essentially, we've imported TensorFlow.js and now we can check that it's actually imported and loaded. So first, let's just check that it's actually doing something. Let's create a h1 tag in our web page so it can print stuff out nice and easily. h1 id equals status. And let's just print out nothing for now, loading. And then when we're loaded, we're gonna get documents.getElementById.

And we're gonna give it... Whoops. Yep, status as the parameter there. And we're gonna assign this to a constant called StatusElement. There you go. All right, cool. So now, when TensorFlow.js is loaded, we can go status.text equals loadedTensorFlow.js. As you can see, on the right-hand side, where the live preview is, it's stuck on loading right now. And hopefully, why is it taking so long to load? Let me see if I've got any errors in my code. One second. Nope. Why is it not changing? Have I spelled something wrong? Status, s-a-t-u-s. That's fine. Oh, statusL. Whoops, I did the wrong, the wrong variable name. StatusL. There we go. And now it's changed to loadedTensorFlow.js. So basically, we've passed the TensorFlow.js JavaScript. We've now executed our Script.js, and we're ready to rock. And for those of you who are curious, we can actually print out the version number, as well, by doing tf.version.tf.js, like so. And we can add that on the end there. And print that out, too, just for good measure. So we've loaded version 1.4.0. You'll notice that we're actually on 2.x right now. But there are some breaking changes in 2.x. So I'm holding off using that until that's finished. So I'm going to use 1.4 for now, but you can use other versions if you wish, once things are more stable. So we've got TensorFlow.js loaded behind the scenes, version 1.4. Now we want to actually, of course, have some training data. So what we're going to do is we're going to create a constant called data. So these are our x's on a graph, for example. These are the inputs. And with these x's, we want to predict some y's, the outputs, if you will. So this is just going to be an array of data. And this is going to represent our house square footage. So house square footage. And I'm just going to feed this with some example dummy values. Now, these could be taken from a CSV file. These could be taken from a database. These can be taken from any source you like. But in the name of simplicity, for this demo, I'm just going to create an array with some numbers in it. And you can see here, I've got some random numbers, like 800, 850, 900, 950, 980, and so on and so forth. So these are just some random square footages that I've come up with. Now I'm also going to create another array called ConstAnswers. Okay? And this is going to contain the target value that we're trying to predict for each element of the data array above. So we're going to have the same number of elements in this. And as I mentioned, we're simply going to multiply by 1,000 in this use case as our answer. So you can see here, I'm just going to paste those in. You can see here, 800 times 1,000 is 800,000. 850 times 1,000. 850,000. And so on and so forth. And I've got the same number of data and answers, essentially, in these two arrays. Now, if you're feeling particularly courageous, you can use other data, if you wish. Feel free to change the values to something. As long as there's some kind of correlation between the two, the machine then will hopefully even learn to predict it. And cool. So let's give some notes here to remember what we're doing here. So this is the price of house in dollars. It's really good. And put a semicolon at the end of that line there for good measure, and there as well. So everyone with me so far, we just got two arrays basically. No problems with that. So next, what we want to do is we want to convert this array format into tensors we can actually use, and tensors you can essentially think of as high dimensional arrays. They can be of any dimension you wish. You can have like ten-dimension arrays, which is like really hard to think about in your mind, but they can exist essentially. And so basically we want to convert our training data and our target answers to be in tensor format. So we're going to create a new object called const trainTensors. So this is going to be our training data, and we're going to create an object like so. Just a regular JavaScript object, and inside of this object, we're going to give it two properties. The first thing is going to be the data. And of course, we're going to use the data above, but we're going to convert it to a tensor. So to do that, we use tf.tensor2d, and we're going to pass data as the first parameter. And then we're going to specify the length of the data, so the number of rows, if you will, along with how many columns there are, which is one in this case. And that's why if this is a tensor twoD and not a tensor oneD, because it's better and easier to think of things as twoD data in this use case. Because if you think back to like a spreadsheet of data like this, this is essentially how it's laid out, right? So we've got a database table that looks something like this. We've got the houses, the IDs, we've got the square footage, and the price of these houses. And this is a two-dimensional piece of data here, if you had more than just one thing. So if we were to add bedrooms later, we could then treat it in much the same way. It just makes it a little more convenient if you decide to add more features later on, essentially, okay? So if we go back to our code right now, where's it gone? There we go. We basically are going to create a twoD tensor that contains the data array above. As you can see from line seven, we're going to specify the data array's length and the number of values, sorry, number of columns, which is one in this case, there's one item for each example. Great. So the next thing we're going to do is we're going to do the same thing for our answers column. So answer. I'm going to convert that to a tensor as well, tf.tensor2D. This time I'm going to put answers. This is going to be answers.length. And it's also got one column as well.

So now with this object here... Oh, what's going on here? I've got too many brackets there. Yes, there we go. So basically with this object, we've now created something that TensorFlow.js can understand and digest. So all machine learning models that are written in TensorFlow are going to be parsed tensors as their inputs and they're going to be tensors as their outputs pretty much. And that's what I'm talking about earlier in the presentation about this pre- and post-processing. This is a very trivial form of pre-processing. I've taken the input data and I'm just feeding it in in this tensor format. Now this is very trivial, but sometimes you might want to manipulate this data to get it in a certain form or you might want to normalize it, or do other things to make it work better with the machine learning model that you're using. But for the purpose of today's demo, we're not going to do any of that. This is all we essentially need to do. Brilliant.

So the next act we're going to do is we're going to try and build up the model architecture to actually build a network that is going to learn from the data that we're going to pass to it. So the way we do this... And by the way, if you are interested in learning more about these functions that I'm using, these are all available on tensorflow.org.js. And if you go to API, you'll see all of these functions that I'm actually calling. If you want more information about the functions that I'm using here from tensorflow.js, this is your... basically your best resource. It's got really good descriptions of what all these things actually do behind the scenes. Let's close that one. Let's go back to this. There we go. Perfect.

So let's start building up our model architecture. So we're going to create something called model, so const model, and this is going to be a sequential model. And what that means is that all of the mathematics of this model is going to flow sequentially, one after each other. So typically, these deep neural networks have many layers, and sometimes you can skip layers, sometimes you can have layers that come back to the beginning and all these other things, but a sequential model is basically going from the beginning to the end, and there's no funny business going on with all these kind of breaks or changes and things like this.

So we're going to make a very simple sequential model. And to do that, we're just going to call tf.sequential. Like so. And we now got the starting point. Now we need to define the inputs, the outputs, and the shape of the model itself, but the layers that it contains within it. So to do that, we can do model.add, and we can now add some special objects inside of it which TensorFlow.js can create for us. So we're going to create a layer, so tf.layers is a good starting point. And we want to create something called a dense layer.

And for those of you who are new to machine learning, let me just go to the slide to explain what a dense layer actually is. So, okay. Let me explain what a neuron is first because we're actually creating neurons essentially behind the scenes here. Let me give you a 101 on machine learning for all of you who are new to machine learning. Let me just quickly go through this. So in machine learning, when we're trying to recognize or learn from the data, if we're using something called a deep neural network, we're typically using these artificial representations of neurons of what we believe the human brain believes to behave like.

And essentially, they look something like this. And the best way to describe how this works is to simply go through it with you. So this is an artificial neuron and essentially it has some inputs, okay? And these inputs are just numbers. They have to be numerical because machine learning models only work with numbers essentially. And essentially, these inputs have association with each input a weight. As you can see here, and these weights are random to begin with. So we've got 2, 1, 3, blah, blah, blah. And they're just completely random. And what we do is these inputs are simply multiplied by their weights and added together to get this number in this yellow circle. So you can see here, 3 times 2 would be 6, 1 times 1 would be 1, 7 times 3 would be 21. And you add all those together and you get this number in the yellow circle. And we then add this final thing called a bias to this, which you can see in the orange circle. And here, again, this is randomly chosen initially. And that's the first half of this thing called a neuron.

Now this, this, this grand total, if you will, is then passed through the second half of the neuron called an activation function, which is simply a mathematical function or a graph with an x and y axes, if you will, that takes this input and transforms it to a different number, essentially. And depending on what graph you choose, that might convert it to being between zero and one, where it might say anything that is negative, I'm just going to ignore, and only pass through positive values. And it depends what you choose, of course. And as machine learning engineers, we can choose what kind of activation functions to select and so on and so forth, if we so desire. Now this is a single neuron, and on its own it doesn't really do a lot, but you can see that what we've got here is what a bunch of inputs multiplied by something, and then we're adding something to that grand total and if you go back to your high school maths, that's actually the same as the equation of a straight line, y equals mx plus c. So here the m is essentially these weights here, and the c is the bias. So essentially, one neuron can learn how to represent some kind of straight line. And if you remember, that's kind of what we're trying to do to categorize things in machine learning. So when you combine these all together in layers, you can actually see that each one of these yellow circles is one of these single neurons that you saw on the previous page. They start to come together to do more interesting things. And let me just walk through this with you very quickly, but here all of these yellow dots here are neurons at the previous page doing the same mathematics as we saw before, and all of these output ones in blue are also neurons too. And so when we feed it something like an image, remember this image can be represented as numbers, this gray scale, number nine here, it's just a bunch of numbers that vary from zero to 255. So zero is black, 255 is white, and some shade of gray is some number in between. And those numbers have been fed in to the inputs of this network, and that's what we mean by the input. And this neuron here, if we just look at this very first yellow neuron, the single neuron here, is sampling all of those inputs, okay? And it's then simply going to adjust its weight and biases and where the number comes out of the activation function and then feed it on to the next neuron in the chain. So you can see this top yellow one feeds on to this second top yellow one, and so on and so forth, and that's repeated several times. And essentially what happens here is that initially when you present it with something like a number nine, it's gonna give you a random number as an output on the end here. And the way we interpret those numbers is that whatever number is the highest is voked for what it thinks the input represents. And of course, initially because they're all random, it's gonna be completely meaningless and it's gonna give us, oh, I think it's a number seven even though it's a number nine. So what we then do is we go back through the network and we adjust all the weights that contributed to number sevens and we penalise them and we make the weights less. So next time we go round and do the mathematics, number seven will be slightly less voted for when it sees the same input and eventually you do this thousands of times and the weights of the mathematics of your system will work out such that when you see a bunch of numbers representing an image like this that are arranged in this way, the highest number that pops out will be in the number nine output there, here, and that's how we then train the system, okay. So that's a very 101, it's not described terribly well, but it's the 101 of what's going on behind the scenes here to give you a bit of flavour of what we're trying to produce in our code today. So if we now go back to the code, you can see here we're trying to create this dense layer and we need to specify the input shape and the number of units contained within this dense layer. So this is actually a function and we can pass to it an object like so, and we can specify the input shape, I think it's a capital S, like so, and we're going to say it's a single element with one input. And the second property here is the number of units and we just want to have a single neuron on its own. This is the most simple machine learning thing you can ever make. It's got a single neuron in it, so it's going to learn a single straight line to make a correlation between the x and y values essentially. Okay? So great, we've added a layer to our model. Now the next things we need to kind of define are some special parameters that we can pass to initialize our model. And these are as follows. The first one is learning rate. And I'm going to set this to 0.01 for now. And what is the learning rate? The learning rate is essentially how large of a step we take when we update those weights in the neurons of that machine learning model architecture that we just defined. Okay? And now if you choose really large values, like 10 or something, you will run into the problem where it takes too big of a step. And it will just bounce around forever and not really find an optimal solution. And if you take too small of a learning rate, maybe 0.001, then, of course, you might take too long to find the solution and it might be too computationally expensive. So how do you choose this? It's actually a matter of trial and error. And as machine learning engineers, we have to figure out what works best for our data set and our knowledge of that, to try and figure out what is the best way to converge fastest. But for now, I'm going to use 0.01, which I know works well for this kind of data set.

The second thing we're going to define, let me just add some notes here so you remember what these are as well, just so it makes more sense as I go along. The next thing I'm going to define is something called the epoch. Or epoch, sorry. And I'm going to set this to 50. And all this is, it's basically the number of times the model is going to look at our training data that we've provided to it. So if we do one pass for everything, it can update itself, you know, N times. But if we do 50 times, it's going to do it 50 times those N times, which has a better chance to learn more from that data. So let me just add some notes here as well for you so that makes sense in case you want to go back to that.

Now, the final thing here is the batch size. const batch size. And this is essentially referring to the size of the subsets of the data that you have that we'll see on each iteration of training. Now, this is typically more important when you've got, like, millions of rows of data. In our use case, this doesn't make too much difference, honestly. But what it will do is instead of trying to go through all of the data every single time on each iteration, it will pick, like, N at random, in this case, 8, from all of our training examples, and only use those eight, in this case, to try and make the weights go in a certain direction. And that's nice because from those eight we've got a good representation of the data, and we can then decide which way the line should go, up a more positive gradient or a more negative gradient to try and fit that data better or worse. So let me just add some notes for that for you there, so that makes more sense if you go back to look at it.

We've defined some hyperparameters here. Now we need to define a function to actually do the training itself. So this is going to be an asynchronous function, because oh, a.s. Ah, right. See, this is going to be an asynchronous function because it's going to take a non-trivial amount of time to execute, and we're going to call this function train. The first thing we're going to do is just log to the console. Training, just so we can see we're doing something, like say.

So to train the model, we need to compile the model, and one thing to note here is that above, we've just defined some variables. We're not actually doing anything useful right now. To make them actually work together, we need to call model.compile and that will now turn it into something we can actually use, essentially. And this model.compile takes an object as its property here, and we can pass some of those extra parameters here to help us train in a better way. So the first thing we're going to add is something called the optimizer, and we're going to pass to it tf.train.sgd. I'll explain what this is in just a second. I'm going to pass to that, the learning rate.

First of all, what is all this about? So the learning rate we already know is how large of a step we're going to take when we're updating the model weights. Now this thing called SGD stands for stochastic gradient descent. This is basically the technique we're going to use to try and find the more optimal solution for our weights in our machine-learning architecture that we defined above on lines 12 to 19. So basically, there's other ones you can use and depending on your data types and the situation that you're trying to train for, you can use other types of optimizers but for this kind of data we're working today, SGD works just fine. So the second property is to specify our loss function and again I'll explain what this is in just a second and we're going to use mean, absolute error.

Now what does that mean? So let's say we had a prediction for a house price and we give it a example that's 100 square feet. We would expect the price to be $100,000. Now if the machine-learning model predicted $50,000 then we'd say that it was $50,000. The scope of that loss was 50,000 because it was the difference of 50,000 and that's what we mean by absolute. Even there was a negative amount of loss, we just take the positive value of that and we then do that over all of the example, all of the batch sizes we're sampling in this iteration and we take the mean of that and that allows us to then calculate the mean, absolute error and that's used to help know if we're going in the right direction or not to see if our model's getting better at predicting things or worse in fact. So with that we can see how well our model is performing.

Now, the final thing we need to do here is actually do the training itself. So let's create a result object. it equals await because this, again, is going to be asynchronous. model.fit We're going to pass to this train tensors dot data, and remember, that comes from above on line 13, we defined dot data there, and that's going to be the actual tensor data that we want to pass in to this machine learning model. And then we're also going to pass in the train tensors, oh, I forgot to put a typo there, train tensors dot data. Dot answer. So now we've got our inputs and our outputs specified. Now the last parameter here takes an object for the other parameters that we defined above. So we're going to pass to this the epochs that we defined above. We're going to define the batch size, which we also defined above and explained earlier. We're going to set something called shuffle to true, and this means every time that we go through one of these iterations, we're going to shuffle the data to get some variety of the things that we're sampling, and then we're also going to use validation split 0.2. And what that means is that we're going to take 20 percent of our training data and we're going to not ever use it in training itself. We're going to keep it to verify that we're actually learning stuff because a machine learning model, when it's trained on the data, it can learn it perfectly, and that's actually very bad. That's called overfitting. And by keeping some data that is never seen before, we can actually even verify if it's working well or not on unseen data. So we kind of keep 20 percent aside just to check things are actually being learned generally and not overfitting. And answers not answered. Did I do something wrong there? Or did I type answers before? And then it's answer. It's singular here. So answers was the original array, and answer is actually in the object. So this should be fine. Cool. So this is now 42 to 47. This is the magic that actually does the training itself. So once this is complete, we can now console.log training complete. Yay.

Okay. So of course we want to then evaluate our model. So let's evaluate what just what we just created. I'm going to create a new function called Evaluate, which I'll define down below. The function is going to be asynchronous as well, of course. So let's create an async evaluate. And then that's my function evaluate. So what I'm going to do is I'm going to define something we're going to test out. So let prediction value, this is a test value we call 768. So let's pretend we've got a house with 768 square feet and we want to predict what it's output is going to be now that we've got a trained model. Okay. So in order to use the model that we've just trained above we can now call model.predict And again, expect a tensor as input. So we need to do tf.Tensor2D And then To get a function, need to pass to it a two-dimensional array. So that's two square brackets like so and we're going to pass to it the Test value we just specified, the 768. Okay, and that's going to return to us some answer. So let's just make, let answer equal the return of that and then we can just simply print out the answer by doing answer.print So if I've typed everything correctly and I open up the console Oh, what have you got here? Content mismatch script 1. One second. Let me see what I've done wrong here. Oh, I need to put a function... Whoops, rookie error there. So now it's loaded. And am I calling things? What am I not calling here? Oh, I need to actually call train, of course. Let's start the process of training. I didn't call the train function. There we go. So now we can call train. You can see here that took very quickly. It trained super fast because it's not a lot of data at all. You can see in the console here the prediction for 7.68 is 7.66-0.57. And that's not too bad. If I wanted to now predict house prices based on square footage, that's not a bad estimate. If I was a real estate person, I feel kind of confident with that, right? With this training data. So, you can use this, of course, with different training data, maybe you want to add number of bedrooms and square footage as your inputs and then also predict the house price from that. And maybe that will give you a more accurate representation of that data in a given city or location. So this is basically the most simplest ML model you can make from scratch. But it's still very, very useful and you can use it to do many great things and I'd encourage you to kind of think about how you might use this with your own training data and situations in your daily lives. Quite often, I like to look at my life and think, OK, what problems do I have in my life? And how can I maybe phrase that in a computer-sciencey way to turn it into something I can solve with the technologies that I know how to use? And now that I have machine learning at my disposal, sometimes it's a good fit for machine learning and I encourage you to test it out and try. And of course, do test and try before you deploy because we saw at the very beginning of all of this workshop that things can go wrong when you don't have enough training data and of course, machine learning models will always give you a result even when it's never seen that thing before. If I try and predict something like really like strange here, like, I don't know, if I put, let's say, 768,000... let's see what it does for that. Let's see what happens here. Clearly, this was never in my training data. We never had a value that large. But maybe it will do something. Let's refresh over this side. Maybe it's too large in fact. Maybe I've just broken it. What's going on here? Is it loading? For some reason, the page is not refreshing. One moment. Now it's loading. I think Glitch is being so today. But there you go. It's actually got it not too bad. It actually just made it 1000 times larger. So this is a very simple model, but you can imagine how, if you had a more complex model, you might start to get things that don't predict quite as well. Or maybe there's a nuance where after 1000 square feet, things get more pricey more quickly. And for that you might need a more complex model to identify those changes. Because with this, we're just recognizing a straight line, a line of best fit. But if we wanted to have multiple lines of best fit for different at different stages to have a more complex model to train for things that might be more of a curve in their structures, then we need a different type of model to do that, of course. Cool. So with that I'm going to put some time here for questions. Feel free to ask any questions in the live chat right now. And if not, we can always talk on LinkedIn or Twitter after you had a chance to play with some of this stuff. Of course, that's completely fine too. So any questions right now on what you've seen today at the beginning of the talk even? Feel free to go back to the very beginning on some of the demos you've seen. Some of the other models we've explored or any of the models you've seen online from our pre-made models, that's all fine too. So the reason runs give slightly different answers is because the weights are randomized at the beginning. Yes, basically, because it's randomized, the local maximum it finds that it thinks is the best situation might be different on every run essentially. And yeah, sometimes you can make machine learning models for those Kaggle competitions that just by rerunning it you get a slightly better model. And that's a little bit naughty but yeah. Generally though, if you've got more data and a better machine learning algorithm or the architecture, then of course you're going to do better on average overall. But sometimes rerunning it actually with different hyper-parameters, things like the batch size and number, how long you train for, the number of epochs, that kind of stuff. Changing those values can really have a big effect on the accuracy of your model at the end. And I encourage you to explore some of these things. Some more advanced techniques you can actually do later is as the model gets more confident with its accuracy, you can actually make the... Where's it gone? Let me find the learning rate here on 923. You can make the learning rate there reduce to get smaller. And that means as you tend towards the best answer, we take smaller steps, so we can actually find a more better local optimum than the one of when we're taking bigger steps. So these things are worth exploring with, and I've made examples in the past where I change the learning rate over time. So as the accuracy increases, I reduce the learning rate to kind of refine in the area that is kind of bouncing around between. Because obviously if you take too big of a step at some point, you're gonna go to a point where it becomes less accurate. And of course, if the step is too big, it's just gonna keep bouncing around some region. And if you have a smaller learning rate at that point, then of course, you can take a slightly smaller step and you might find a slightly better value for your answers. And that's how you can get a better model out of that system, essentially. Sorry, you missed my question. Can we use classic models like SVM with JS? So yes, if you take, check out the TensorFlow JS API on the website that I shared. Let me just put it into the chat for you right now. That will list all the things we currently support. And of course, if there's something in there that you want to add, of course, feel free to contribute. We're an open-source project.

And there's other libraries and things coming out now. Some people are making libraries to replicate things like Pandas and that kind of stuff, from Python in JavaScript. So we're starting to see the community make a lot of cool stuff with TensorFlow JS as well. So yeah, please do contribute if you're interested in adding things that don't already exist, but check out the API latest for all the things that we do support right now.

Could you save this project for us to remix later? My browser is clear. Yes, of course. I will send you a link to a completed version of this demo right now, in fact. So one second here, and it's got a lot of comments in there. So when you go back and look at it, hopefully it still makes sense. So here is a completed version of this, much more neater for you. Feel free to save this link if you want to save that for future reference as your boilerplate code for a linear regression in TensorFlow.js. This has got a lot more example code there. I may even go on to show you how to use testing data as well to test the final accuracy of the model and that kind of stuff, too.

Cool. Can we load model from third-party storage like Amazon s3? Yes. Once you've created a model, you can use something called model.save, I believe it is, in the API to then save the model and download it somewhere. The model.json and the resulting binary files are.bin files as well. And those.bin files are sharded. Depending on how big your model is, they're sharded into four-megabyte chunks because web browsers prefer to download things concurrently, and four megabytes is kind of the sweet spot for doing that. So you end up with a model.json file and a load of.bin files that you will download once you do the model.save method call. And you can then host those on Amazon. You can host those on Google Cloud Storage, wherever you like, even glitch.com if you want. And as long as you have no cross-domain issues in loading assets from a different server with a different domain, then it's completely fine. And of course, if you're hosting the model on the same server as where you're delivering your web page, then of course, there's no issues there. It will just work buttery smooth and work as intended. And that will allow you to then deploy the model to the whole world for everyone to use. You can add your nice user interface and other things to make it nice and shiny and easy for others to use who might not be so ML-savvy. And of course, remember to combine it with all those great JS libraries out there for data visualization and charting and graphics and all that kind of stuff. There's so many really easy-to-use libraries for that kind of stuff and you can combine the machine learning we've done today with all of those kinds of things. Things like Free.js, things like Web Mixed Reality and all this kind of stuff. You can start to feed the results of this machine learning stuff into other systems that you're already making in the browser. And just for kind of inspiration, I guess, we can just spend a little bit of time talking about what other things would you might want to make as a web developer in machine learning in the browser. Imagine you're making a content management system with some of our natural language processing stuff, you can actually pass a piece of text, an arbitrary piece of text which we've never seen before, and you can ask a question, a real human question, and it will tell you where in that text the question is answered. So, if you're on a really long web page, you could automatically scroll someone to the part of the web page that answers the question that they're looking for. So, imagine you're on a really long blog post and someone's interested in some specific part of what that blog is about. It can jump you right to that point. And that's really good when you don't know the terminology of what you're trying to look for. If you're using Control F, or regular Find approach on a keyboard, you need to know the exact term. But if you're reading a blog post about a new topic you don't know much about, but you want to know how does something do X, Y, or Z, it can then find that answer for you or jump you to that knowledge. Or maybe it's an article about the history about some famous, like, I don't know, war or something in the past. It's like, who won this war? And it can jump you to the article instead of you having to scan through and read it yourself. So, you know, very powerful stuff. And that's just one example. You can also imagine for websites, you can imagine automatically cropping an image when you have responsive designs in a smart way. So if you've got an image of someone you can actually crop it so their face isn't half cut off of the image and that kind of stuff. If you know where the human or the interesting object is in that image, you can of course then smartly crop it when you're resizing in your CSF and stuff like that. You can make smarter decisions as a web developer by using these kinds of things. And as I said before, if you check out madewithtfjs the hashtag on Twitter and LinkedIn, I'm just going to add a quick link to that now. You can find tons of really inspirational stuff that other web devs and JS devs are making with this and even creatives as well. And it's really inspiring to see what's being made over there right now. So let me just find a link for you so I can post it into the chat. One second here, here's Twitter, got to Twitter. madewithtfjs, there we go. And boom. So there's the link to some other stuff on Twitter. You can do the same thing on LinkedIn and you can see already the first result there. Let me just bring it up in my web browser so people can see what I'm looking at right now. You can see here, right away we've got this amazing demo using our face mesh model that literally was created for Halloween that allowed someone to wear another face on their face in real time in the browser and it's very creepy but it's pretty cool at the same time. And if you just kind of scroll down here and ignore the adverts we see people using JavaScript custom hardware. This guy is actually going to be on show Intel on December the 11th on our YouTube channel and essentially he's made this custom piece of hardware that works with TensorFlow.js to track people doing sports to get the perfect shot of them all the time. And if you keep on scrolling down we've even got the coding train Daniel Shiffman has been using TensorFlow.js recently as well to recognize various actions and then overlay emotes live in a webcam feed and that kind of stuff when you're on a video call and all this kind of stuff. So, you know, the possibilities really are endless. It's just what you can dream up is the only limit here. And I encourage people to kind of look at our models that we've got and start to use those if you're new to machine learning. Use our pre-made models first, because they're easy to use. And then as you get more needy for doing something very specific you can start to unravel the layers of those models to then make your own custom ones to do something more specific. But a lot of the times you can actually use the pre-made ones to get very far at least to make a prototype and then you can get your hands more dirty and go deeper into machine learning as you desire. I'm just going to keep scrolling down here to see. Oh yes, look out in next, this month, in November I'm going to be launching a music video for announcing our upcoming show-and-tells so that'll be a lot of fun. And as I said, do check out the show-and-tell. Let me just go to the TensorFlow YouTube channel here YouTube.com text TensorFlow like this. And if you click on this here and go to playlists you can find our previous show-and-tells available under the show-and-tell playlist here and you can then jump in. I think this one starts about 16 minutes in. You can see some of the other things people have created in the past as well. These are ten-minute, bite-size videos of inspirational things people have made how they made them, what their learnings were and all that kind of stuff. The next one of these is going to be live on December 11th so come join us over on YouTube to join in with that. And of course we've got live chat and all that good stuff there to ask questions too. So, yeah, we've got lots of natural language processing. Here, someone's used TensorFlow.JS to control human-computer interaction kind of situations for touchless interfaces like kiosks, that kind of stuff. Here's a yoga pose estimator. Someone made this to, well, estimate yoga poses to make sure they're doing the pose correctly live in the web browser and now they can do their workout and be sure that they're doing it correctly. Here's a new model that came out for depth estimation. This is not an official model by us yet, but we do have one in the pipeline, and this one allows you to take a single image and calculate the depth of all the things that it sees in that image to give you an estimation of that and then allow you to extract all those pixels in 3D form, which is pretty, pretty cool. And if you have a chance, do check out this Tone Transfer one, too, that live in the browser can change your voice into a musical instrument using the same pitch and tone that will generate the instrument in real time in the browser for you. And you can turn yourself into a flute or a saxophone or whatever you want. So, some pretty cool demos there to check out. I only scraped the surface today in our three hours that we've had together, but there's plenty more for you to check out if you just look on Twitter and LinkedIn and our community externally. So, with that, that's all I have. If there's any final questions, now is the time. I'm just going to check out the chat one more time to see if I missed anything here.

One moment, I opened Teachable Machine from my phone to use a mobile phone camera, but it can't load and crashed. Yes. TensorFlow.js should be supported in web browsers. I'm unsure of Samsung browser, but Chrome, Firefox, Safari certainly should work. If you could try in Chrome for me and let me know, that would be great. It's always good to know if there's an issue with a particular browser, but it should be fine in Chrome. I've certainly tried that before, and it's worked in the past. Certainly, the resulting model will work on mobile devices. That should be fine. Even if you have to train on desktop, the resulting model should be fine on web browsers in the mobile stack as well.