I think, um, I don't know what this is.

Not something I've done before, so let's see in a second, we should see this.

This appear here?

Yeah, that looks promising.

Okay.

All right.

All right.

Let me just ask now if, uh, people in the live chat can hear me, and then I'm going thio that I'm gonna close this.

Uh, yeah.

I think this is gonna go on forever.

Uh, all right.

All right.

Hi.

Hi.

Hi.

Hi.

Hi.

Hi.

Hi.

Hi.

Hi.

I just want someone to say the sounds works.

Okay, Okay.

So I'm gonna close this.

So So from this moment on, my focus is now on you, The people who are physically here in this I just wanted to turn that on.

And so I don't know if anybody if there's if anybody is, has that live stream like in the background on their machine.

And there's some, like, really important question or tons of saying like it stopped.

You could let me know, but I'm gonna not pay attention because this is a rare and unique opportunity to be physically with people in real life.

so, uh so Hello.

Welcome.

I guess it's a few minutes early, but I might as well start.

My name is Dan Shiffman.

Thank you so much to grow Paris and the tank for having me here.

This is like a real honor to get Thio be able to be here in Paris, do a workshop on and meet people who I have corresponded with online or maybe met before on Dhe.

Yes.

So I'm thrilled to be here, so I most of all probably familiar with me someone, cause that's probably how you found out about this.

But in case we just just as a matter quick introduction, what I do actually full time is teach at a program in New York called T P.

I'll just pull up the website real quick.

Um, this is a two year graduate program at Tisch School of the Arts on.

Actually, that's why I'm here in France is N.

Y.

U s a study abroad program and why you Paris and I'm visiting that for most of this week.

And so, in addition to this, I have this YouTube channel where I make coding tutorials that where most people find me yet.

Oh, they can't see my face.

Oh, because if I go like this All right.

So sorry to the live viewers.

I This is this is just the web cam.

I'm gonna be moving around a lot, but I'll give you a moment of looking at you, but otherwise it's gonna be it's gonna be hit or miss so but, um And so the other things that I work on, I think I think are important to mention which are related to what I'm gonna show today is I helped to know what the right term is.

Administer, run, manage, participate in something called the Processing Foundation and the Pressing Foundation.

It's a It's a It's a United States charity, a nonprofit company that maintains a bunch of open source software tool kits for the arts processing P five Js.

You don't have a P five sticker.

I didn't bring any prospect stickers.

I didn't have any unfortunate.

But if you want to see one, Simon here has one.

So, so, so so one of the things that so, so process violation.

How does a lot of community and education initiatives one project in particular that I want to mention it, but I just did.

Called P five.

Something that I started working on a little over a year ago is a project called Ml five and this is an open source library and the five is an homage.

Did I use a French word?

I did.

I do have, like high school American High School level friend, which is very bad.

We'll see if I can see how much courage I have.

Many French, but so the five is an homage to P five.

But this project is funded actually through a grant from Google, which comes from the team that created something called tensorflow dot Js.

So I'm just giving you that as background for what I want to do in the workshop today.

What I want to attempt to do in the workshop today is Bill, a simple image classifications engine in Java, script in the browser using the P five Web editor.

So you don't So So let's let me think here for a second.

So if you end, all of you are welcome to be here.

No matter what your background and skill level, I imagine that some of you this might be kind of beginner for and some of you might maybe you have just started programming.

There might be some stuff that's very new and confusing, so I'll tryto manage that as best I can.

But you could certainly ask questions, and maybe also as a small community here, we can help each other for those of you have a lot experienced with this.

So if you're if you're new to programming or to Java script, then I would suggest using the P five Web editor a mention a particular linking me to go to in a second.

But if your experience with Web development and JavaScript you don't, you could be following along and doing coding through whatever editor system.

Build environments that you so desire, but but you'll need to have the things that you'll need.

If you're in the P five Web editor, all get package there for you.

If you're not, you're going to need tohave the P five libraries, and you can get those through the Cdn link, which which is which is here.

So you just go to the P five Web editor and open up the index html.

Follow your findings so it's some point if anybody is, like, really stuck and can't find p five, let me know and I'll tryto up definitely gonna like, pause and take breaks.

So my goal is to spend about an hour to one o'clock.

Now, kind of talking about what?

How image classification works in ml five in a particular algorithm called K n n, which dance for cane years neighbor and try to build up something.

And then hopefully, if that goes, well, then we could just hang out here for a second.

Our people can tryto make something with it.

Maybe towards the end, we could share a couple things are or just so this can this will start very presentational.

But I'm happy for this too.

Move towards being more just hanging out and working on stuff.

All right.

Um okay, so let me just let me just show an important link here.

So if right here, get hub dot coms last Shiffman slash Tank Workshop.

This is where I least so far put all the links of the things that are relevant, and I will I will go over this in more detail in a second.

But this this is probably the most important link for you Web editor template Because the thing that I want to mention is that here I am in the Web editor over on the top left up there.

If I click this little arrows you'll see in here, it says ml five dot minn dot Js So I have built a version of the M l five library just for this workshop with some new features that don't exist in the published first of five.

So if you were to be using the published version of Ml five, the stuff that I've gotta try to coat today won't work.

So so that's it.

And if you aren't used to, you'll need you'll start here and then the first thing you can do is just d'oh save or duplicate.

I think so.

If you if you want to use the p five Web editor and you haven't before, I would take the time right now just to goto editor p five.

Just order and sign up for an account because and then you could go to, uh, this link and click on Web editor template.

But I'm gonna I'm gonna be showing you a whole bunch of demos and things before I actually start writing code.

But I just wanted in case people are trying to figure out to get set up.

Yeah, Yes.

So I usually do.

This is a good, good good question on that.

Simon is asked.

So here, in settings there are there's a there's a few different views.

And usually I use this high contrast mode.

I didn't use it because, um, it just wasn't set to it, actually, on my laptop.

But also, I think I'm gonna have a bunch of text that with this gray background, might end up looking little weed.

So let's put it back here to this.

Um Okay.

Um all right.

Anybody have any, like, just sort of general questions or logistical questions in terms of, like, how to be set up before we start.

Oh, and then there's the WiFi over here, which is E will broadcast a secret wife, but people can see it.

Pass it along.

What could possibly go wrong with me saying what the WiFi password is?

That seems like it seems like I shouldn't Okay.

All right.

So I think what I'm gonna start with actually is this website called Teachable machine.

How many of you have seen this?

A couple people.

So So teachable machine is a project that was made by Google Creative Lab, a bunch in collaboration with a bunch of different research teams at Google.

And it was This came out, like, quite a while ago before the official job script sensor flow was launched.

And it demonstrates something to me like this is a really amazing demonstration of what is very recent, only recently possible to do in a Web browser.

So I'm gonna skip the tutorial on just run this to show this to you.

So the idea of the teacher machine so just, you know, spoiler alert.

My goal is to actually basically build a version of this in the P five web editor.

It will have none of the bells and whistles that you're seeing here in terms of design.

And you start full interaction, but but it will have.

The functionality will allow you to create an interactive system in the browser that might be different than the way you thought about it previously.

So just to show you the way this works, I I I think I practiced this with my code example earlier.

So let's see.

So what I'm gonna do here is I'm gonna basically teach this machine toe learn three different what are often referred to his classes or even call them labels.

Um, three kinds of images.

So one image is just gonna be me.

That will be green.

I'm holding this down.

So it's just learning, like, if I just move around here, this is giving it lots of examples of me in the web browser.

Okay.

Sorry.

Not in the web browser, me, Just me in the camera.

Now I'm gonna step away, and I'm gonna do I'm gonna train it just on with nothing.

I think you just Yes.

Yes.

So if you're right, if you watch, the tutorial will walk you through this.

And so the last thing I'm gonna train it with is with me holding this book that I found here called Blonde Story.

So, uh, okay, so now that I've done this, I've now trained this system and you could see what I'm sitting here.

It's confidence, and actually only when I'm looking straight ahead, it's confidence is 99% that it That's me with the green category.

The green label by Walk Away, this will just way should see that it became confident in purple.

If I sit back down, we're back to green.

And then now if I hold the book, it's orange and small Time is pointing out is right.

So this is also showing you like it's gonna display a different gift based on which category you can.

Also just round it's playing birds from bones.

So So this is the idea.

This is the idea of of how how this sort of like process of image classifications works, that you're teaching the computer, saying, Here's a lot of examples of images of cats.

Here's a lot of examples and image of the dogs.

The computer, in theory, is going to learn from that, and then you could present it with new images, and it will make a appropriate guest.

So but there's something that's that I'm not telling you, which is super important.

So this is this is working on Lee because it is building on top of something that's already already been trained on millions and millions of images.

So this is a process known as transfer learning.

So there you have any questions about, like, just I'm gonna switch over to some slides that are gonna kind of, like, go go underneath the hood of this a little bit more, But before we move away from here Okay, so let me just close this window on and I'm going to savi This So one thing that I want to mention is yearning.

She who is ah, colleague at N Y u N i T p.

She taught a course this past semester called Machine Learning for the Web.

And it's basically it's a seven week course that goes through some basics of machine learning, different kinds of algorithms and models.

So here's a bunch of and so basically what I'm attempting to do in this workshop is what's here in week two.

But there's lots of other features of the Ml five library that tensorflow library.

That might be things you wanna look into later on.

And I forgot to include I really didn't want to pull up my have a link to this.

Make sure my volume is off hopes.

Okay, so I just also wanted to mention, uh So this particular playlist also goes through, and I realized people who are maybe watching this live.

I'm stepping away because I could swivel this.

So this particular playlist is actually, in some ways somewhat of a pre requisite.

So I kind of got lost over some of the stuff that is in some of these videos.

But certainly, if you want to after today, go back and dive more deeply something.

This is somebody that you could look at and the thing that's different thing.

I want to point out what I'm doing in this workshop today is almost exactly what's in video for five.

But I'm going to use a different algorithms for number five called K.

And this is a recent feature of the Ml five library that you name she who taught that class added to the library itself.

So we go through, maybe I'll come back and try to distinguish those a bit more.