Guide to Machine Learning video tutorial with ml5.js.

Very excited about this one.

I'm typically excited about the video tutorials I make.

But this one, I'm particularly excited about because I'm

going to look at something that has recently

arrived in the ml5.js library.

So first of all, use version 0.4.2 or a more recent version

perhaps.

But that's the version I'll be using in this video.

And I want to look at this functionality

in the ml5.js library called ml5 neural network.

It is a function in ml5 that creates an empty or blank, so

to speak, neural network.

Most everything that I've showed you in this video series

so far has involved loading a pre-trained model, so

a neural network architecture that's already

been trained with some data.

And in this video, I want to look

at making an empty, a blank slate,

configuring your neural network, collecting data, training

the model, and doing inference.

And the context that I want to look at that

is with real time interactive data.

So I'm going to come back and maybe use some more traditional

data sets.

There's a data set that's on the ml5 examples with the Titanic

survival data set.

I have the data set for my color classifier series.

So I'll come back and show you some examples of those as well.

But in this first video, I just want

to do something very generic, which

is create a blank neural network,

use mouse clicks to train it, and then move the mouse around

for it to make guesses or predictions.

And that might sound like a weird thing to do.

Hopefully, it'll start to make sense

as I build the code and step through all the processes.

I also want to highlight for you the Wekinator project, which

is a free open source piece of software created

by Rebecca Fiebrink in 2009 for training machine learning

models.

And I would especially encourage you to watch Rebecca Fiebrink's

talk from the Eyeo conference in 2018

where she talks about creativity and inclusion

in machine learning, and goes through some demonstrations

with Wekinator and processing and other pieces of software.

So a lot of the work that I'm doing with ml5

is entirely based on recreations of many of the example

demonstrations that Rebecca Fiebrink made and has

done research about for years and years

with the Wekinator project.

So in fact, the examples that I'm

going to make in this video and the next one and the next

follow ups are direct ports, in a way,

of some of the original Wekinator and processing

examples.

But I'm going to do it all in JavaScript

in the browser with P5 and the ml5.js library.

There's also a fairly lengthy history

of creative artists training machine learning models

in real time to control musical instruments, a performance,

a visual art piece.

And I would encourage you to check out

some of these projects.

Our guide for figuring out how to write the code

is going to be the ml5 website.

And there's a page on the ml5 website for the neural network

function.

But before I start diving to the code,

let's take a minute to talk about what a neural network is.

Now, by no means in this video am

I going to do a comprehensive deep dive

into what a neural network is and how

to code one from scratch.

I will refer you to many other wonderful resources where

you could do that deep dive, starting

with the three 3Blue1Brown video, What

Is a Neural Network and some of the subsequent ones.

I also I have a 10 to 15-part video series where

I build a neural network from scratch in JavaScript

based on a particular book called Make Your Own

Neural Network that is in Python.

I have other videos that are guides around machine learning

concepts where I talk about different kinds

of neural networks.

So I will link to all of those in this video's description.

But here, I'm going to use the whiteboard over

here just to give you a very zoomed out, high level overview

of what I'm talking about.

So a machine learning system, in the most basic sense,

involves inputs and outputs.

So let's say for a moment that the goal that I have

is to train a machine learning model

to use my body as the input.

So maybe how I moving my arms and legs and head,

that will be the input.

And the output would be a musical instrument,

a note that's being played.

So I could somehow play different notes

based on how I move my body.

This is an area that's covered in great detail in Rebecca

Fiebrink's course, Machine Learning for Artists

and Musicians.

One way that I might boil this idea down

into its very simplest version is, think about a 2D canvas.

And it's very convenient that I'm using p5.

Because that's the thing that exists in p5.js.

And what I'm going to do is I'm going

to say there is a mouse in that canvas.

And the mouse is going to move around the canvas.

And based on where it is, it will play a particular note.

Now of course I could program the same idea

with an if statement.

But this is really what it means to work with machine learning.

Instead of programming the rules explicitly

into code, what I'm going to do is

give the code a whole bunch of examples

and have it learn those rules.

So I want to demonstrate that process in a scenario

where it's very obvious how it's working so that then we

can build on that into much more complex scenarios.

The steps are, collect data.

Two, train model.

Then three, I guess we can call this prediction.

So that's also sometimes referred to as inference.

That's really when we're deploying the model,

we're making use of the model.

Right here, this is my representation of the model.

So in this case, if I want to start with a classification

problem-- and I will show you demonstrations

of classification and regression--

I'm going to have two inputs--

input one and input two, often referred to

as x's in machine learning context.

Those inputs are going to go in to this machine learning model.

The output is going to be one of, let's say,

three different categories.

So I'm going to have three outputs--

C, D, and E. So two inputs and, in this case, three outputs.

My diagram looks a little bit weird.

So I'm going to fix it up for a second.

Now all this time, I've just been putting the letters ML

in here for Machine Learning, or maybe referring

to this as a model.

Because in truth, other things, other kinds

of algorithms, other types of ideas beyond a neural network

could slot in here.

But the ml5 five generic blank machine

learning model that you can train is a neural network one.

So if I were to try to zoom into this for a moment, what

I would actually see is something

that looks something like this.

This is my zoomed in diagram of really what's going on in here.

A neural network is a network of neurons.

Technically, this is a feed-forward multi-layer

perception.

Because the inputs, which are represented right here,

get fed through these connections,

they're weighted connections, and get added up altogether

and arrive in this layer, which is known as the hidden layer.

And there can be multiple hidden layers and different kinds

of hidden layers.

But the data is summed and processed

through a mathematical function called an activation function,

and then fed out of the hidden layer

and into the output layer.

And the output layer, after all of the hidden outputs

are summed and passed through an activation function,

we get a set of numbers out.

And those numbers might look like this--

0.2, 0.7, 0.1 meaning a 20% of being category C,

a 70% chance of being category D,

or a 10% chance of being category

E. So there's a lot more details of what's going on in here.

And I certainly, once again, would

refer you to the various things that I'll link

in this video's description.

The idea here is that a neural network is a machine learning

model that can be trained.

It can be shown a lot of examples of inputs

with their correct corresponding outputs.

And it can tune all of the weights of all

these connections so that when it later gets new data,

it can make appropriate predictions.

This is everything that the ml5 library

will take care of for you.

And for us, we're going to really just

be working with the inputs and outputs,

collecting our training data, training the model,

and predicting outputs.

Now that I've gotten through that explanation,

I really want to just write some code

and show you how this all works.

Sorry to interrupt.

It is me, from around four days in the future.

I did actually continue this.

This was recorded during a live stream.

And I did go all the way through and make this example.

But I made some pretty significant errors

in how I use the ml5 library.

So I've come back to rerecord and try this again.

I'm sure I'll make other mistakes and things will

go wrong.

But if you want to watch the original version,

I'll link to that video description.

But I'm going to start over right now.

Quickly want to point out that in addition

to the p5 libraries, I've added a reference to the ml5 library

version 0.4.2 in index of HTML.

In my blank p5 sketch, I can add an ml5 neural network.

So I need a new variable.

I'm going to call that model.

And I'm going to set that model equal to ml5.neuralNetwork.

Whenever I create a neural network object,

I need to configure it.

I need to give it some information about what's

going inside there.

And the guide for doing this is the ml5 website.

So here on the ml5 website, you can see this quick start

which has some sort of sample code,

documentation of the usage of the neural network function,

and a bunch of different ways of initializing a neural network.

And all of these involve a variable called options.

The idea is that I'm creating an object that's

going to store the properties of the neural network.

And then when I call ml5.neuralNetwork,

I pass that object in.

So for example, looking here at my diagram,

I can see there are two inputs and three outputs.

That's something that I could configure in the options.

Inputs, two.

Outputs, three.

At a minimum, this is all you need to configure

an ml5 neural network--

how many inputs, how many outputs.

If I scroll through the ml5 documentation page,

you'll see there are a variety of other ways

that I could configure a neural network.

For example, I could actually give it a data file.

So ml5 has functionality built into it

that could take a CSV or Comma Separated Value file or a JSON

data file and configure inputs and outputs based

on what's in that file.

So I need to come back to that and cover

that in a separate video.

But actually, the way that I want to do it here

is actually this particular way.