Placeholder Image

Subtitles section Play video

  • I'm gonna hit this button here on, then.

  • 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.