Who's that?

Oh, who are they the entire time will?

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.

Let's get started.

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.

D.

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.

Now moving on.

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.

And we just want to get the 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.

So let's create that function down here.

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.

Text is not showing up.

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.

What saved that?

And now we should see over here.

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.

What?

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.

This is really easy to do.

Actually, we need to do is in here.

We want hopes document dot Upend our image.

Make sure we do that on the body.

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're gonna call it container.

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

And we just wanna create a simple div.

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.

We could just copy this and we can upend our container as well to our body just like this.

And now we're going to have that extra div being added to the body over element as well as the text loaded Now, with that container being added, let's work on creating our canvas and adding that as well.

This is going to be really easy.

We could just do constant canvas here.

We want to set that equal to our face.

A p I got creed canvas from media just like this and we're going to pass in the image and this is going to credit canvas from the image that we passed to it.

We also want to make sure every size this canvas to the crack size.

So first, what's at it?

We're just going to say document dot body dot upend And we want upend our canvas here and actually instead of opinion to the body, what we want to do is we make sure that pendant to that container.

So we want a pen, both our image and our canvas to that container.

So that way, they're both absolutely positioned on top of each other perfectly inside this relative container here.

And then the next thing we need to do is you want to get the display size of our different image right here.

So we're just going to say our with is going to be equal to image dot with, and we're gonna say or height is equal to image dot height.

Make sure I spell this properly just like that.

And now we can resize our canvas.

So to be that we could just say face a p i dot match spell that properly match dimensions and we just want to pass them here Our canvas element as well as our display size display size.

Just like that.

Every go on that's actually going to resize our canvas to be the exact same size as our image, which is perfect.

Now we can display these detections inside of our canvas.

Now we can display these detections to the user.

So let's remove this count.

Since we no longer want to display this and instead what we want to do is we want to Resize are detections.

So we're gonna create a variable here called resized detections.

We want to set this equal to our face a p i dot resize results just like this and we're gonna pass in our detections on where this is going to do is going to resize all our boxes for our detection to be the correct size based on the size that we pass it and in our case, we're going to just pass it.

Here are display size.

There we go, our detection Zehr now going to be scaled to our image to fit in our canvas properly.

Now, in order to draw that actual box we want to do is you just want to create a variable which we're gonna call a drop box.

We're gonna set this equal to a new face a p i books face a p i dot draw dot draw box and this is going to allow us to draw our box onto the screen, and we first want to pass it the box, which in our case, is just going to be from our resized detections.

So we're gonna use a loop here we're going to say we're gonna do for each one of these detections detections.

There we go.

So for each one of our detection is we want to draw a box and are boxed here.

Loves concept box is just going to come from our detection detection dot detection dot box.

This is going to be the box of the face that our algorithm determines for our individual faces in our image.

And we're gonna first pass that Tar dropbox, and then we're just going to put a label on it as well.

So we're going to say label and for now, we're just gonna place hold this as face.

But from here, this is where we're gonna put the character's name later when we work on face recognition.