Name: JavaScriptを使った簡単な顔認識チュートリアル (Easy Face Recognition Tutorial With JavaScript)
Uploaded: 2021-01-14T10:21:21.000Z
Duration: 21 min 52 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

程度の副詞

you tired of going to watch your favorite show with one of your friends, but they don't know who any of the characters are, so they completely ruin it by asking you, Who's that?

No longer will that be a problem, because in today's video, we're gonna look at creating a facial recognition app where you can upload any photos you want, and it will tell you exactly who's in that photo.

Now Let's take a quick look at the project we're going to build.

All we need to do is select an image here, and we just take any imagery one.

And then it's going to find all the faces in that image and give us the name of all the people for the faces that it recognizes to get started.

Doing this already have quite a few files in our project.

As you can see, I have a folder here with labeled images.

This is just facial images of all the different characters that were going to be able to put labels to their names.

So we have black widow, Captain America and so on and these are just face shots of all these different people.

You can find these yourself of you want, or you can find them on the get hub that I have linked in the description below.

And then also, besides these label images, I have the various different models that we're going to need it.

This is what our AI ai network is going to use to determine people's faces as well as recognize their faces from these images.

And these again are going to be in my get hungry bubbling below, so you don't have to go worry about finding them yourself.

Then, lastly, we did have a couple test images here.

He's just the various images that we're going to use that have these people's faces in them and again there in the rebuilding to below.

Lastly, I have the face a P I minimized library here, which we're going to be using to do the face recognition inside of this project, and all we need to do is add a new file here, which going to be our index dot html.

This is going to be for rendering our page, and we're also going to have a script dot Js, which is going to be all of our custom code that we're writing for recognizing these faces.

No, to get started, had set up our index dot html.

We could just exclamation point enter using Emmett Envious Code and that automatically generate this template for us.

And instead of here, we can just say face recognition because that's what we're going to be building and inside the body, it's going to be super straightforward.

We just need a single input, which is going to be a type of file, and we just want to give it an I.

So we can reference this in our JavaScript.

We're just gonna say image upload, and then I'm going to use a few styles here inside of the body are inside of the head tag because I just want to be able to style our page that everything is centered.

And to do that, we'll just select the body.

We're going to get rid of all the margin, all the padding.

We want to make the with here equal to 100 view widths.

So it's going to take up the entire with, and we want to make the height equal to 100 view height, which again will make a take up the entire height.

We want to use display flex combined with justify content center in the line items center and this is just going to send our content horizontally and vertically.

Then lastly, we're just gonna use flex direction and we're going to make this column and this way are different elements stacked on top of each other.

As you can see, our selector and our image are stacked on top of each other instead of side by side.

Now, lastly, we're going to be using a canvas element to draw these different rectangles around the images of our characters.

So we need to absolutely position this so it goes right over top of our different image so we could just make this here a position of absolute make sure I spell that correctly.

Here we go, and now we can jump over into the Java script which is going to be were the really interesting part of this project come into play.

And if you haven't already seen my facial detection video, which uses the same exact library, I highly recommend you check that out Now, if you're certain parts of what we're doing here are what we covered in that first video.

And I don't want to cover them as in depth in this video.

So make sure you check out first if you haven't already.

What we want to do is first get our image element.

So we get our image upload, there's going to be equal to document Don't get element by i d.

Here of image upload, which is the idea that we gave our element.

And this is so that we can get the files that were uploading.

Next, we want to load the different models that were going to be using and the various models that were going to be using.

We're going to use face a p i dot nets dot and then in here we put the library name that we're using, so we're gonna use face recognition because we want to build to recognize the faces, So face recognition net and we want to just load this so load from you or I and we're loading this from our models folder, so we just pass it in here, a path to our model's full day.

We need to do this three times because we're using three different libraries here.

We also have faced Landmark 68 net and essentially, this allows our algorithm here.

It's a detect where the actual characters faces are so we can use the recognition to find out which faces which.

And then lastly, we need to use SST mobile net V one and essentially, what this is going to do is it allows our algorithm to determine which ones their faces.

This is just our detection algorithm right here, and we want to do all these asynchronous early so we could just say promise dot all because these all return promises throw them inside of here, make sure we put comments at the end of them because this is going to be an array of elements.

And then in here, when we finish loading all of these, we want to call a method which word is going to call start.

Start just like that in here is going to be all the code that we run after we load all of our different models.

And for now, the only thing we're gonna do in this start method that we're just gonna take our document body.

We just want to upend a single element here, which is just going to say, loaded.

This is just so we know when our pages finished loading all these different models and now what's actually run this using live server.

So we'll open this up here off to the side and you'll see we got our upload image right here for choosing our file and you notice are loaded.

And that's because we had to make sure we include are different libraries inside of our index, that HTML so we can get our script tag here.

We want to make sure we defer it so it loads after our body is loaded.

We want a first load, our face, a p I library.

And then after that, we want to load our script tag right there.

We see loaded pops up as soon as it's done, loading everything and luckily, loading those models is actually fairly quick.

Now back in their script, of Js what's actually configured this start so we can start recognizing faces using face detection in order to get started doing that.

The first thing we need to do is take our image upload here, and we want to add an event listener for whenever we are changing our element.

So whenever we actually select an image, we want to call the code in here.

We're gonna make sure that this is an asynchronous function because we're going to do a bunch of a circus code using the face a p I library inside of this function.

Now, as soon as our image is loaded, the first thing we want to do is get our image.

So we're going to create a variable here were to say, image and it's going to be equal to our face.

A p I will face a p i dot buffer to image and we're gonna take the image upload.

We want to get the files from it, and we just wanna get the 1st 1 since we're only ever uploading one file and we want to make sure we await this because it's asynchronous and essentially what this is going to do is it's going to take the file that we uploaded and convert it to an actual image element which is going to be usable with the face a P I library.

Next, we can use that to get our detection, Sze so we can create a variable here called detections again, We're going to await our face a p I.

And what we want to do is we want to detect all faces just like this and we pass in the image we want to detect the faces from, which is the image that we uploaded.

Then we want to do is we want to make sure that we're getting this with face landmarks and this is going to allow our algorithm to determine where the different faces are.

And we also want to get it with face descriptors, which is going to allow us to draw the boxes in such around our various faces of our characters.

And now, to make sure this is working, we could just take the document moves document dot body dot upend.

We just want a panda detections and dot length to see how many different detections we have now let's save this and as soon as it gets loaded over here.

Select an image, for example, this one right here and it's going to upload that image and you can see it found six different faces inside that image.

But one thing you will notice is we're not actually displaying the image that the user's selected, so let's work on doing that now.

We want hopes document dot Upend our image.

And now, if we save this, wait for it to load, select an image, you'll see that the very first thing it's gonna do after gets that image from the buffer to image is going to actually upload that image here so that we can see it.

And if we scroll down, you see that says they're six faces and if we look at this, we have 12345 six different faces in this image, so we know that this is working perfectly fine.

Next, let's actually work on drawing rectangles around the different faces of our character, and the first thing we need to do that is to actually overlay canvas on top of this image.

And to do that, we need to put them inside of a position relative element.

So it was to do that now, which created container.

We want to set that equal to document dark lips, the document that create element.

We also want to take the style of this container, and we want to make sure we take the position that we want to set this to relative that we can absolutely position our container inside of this.

And now, instead of actually a pending here are loaded.