DEV Community

Cover image for Making an Online Beard-ifier
Kira L
Kira L

Posted on

Making an Online Beard-ifier

Were you made for facial hair? Well there's only one way to find out: my online beard-ifier.

For this project, my internet was too slow to download a facial recognition dataset, so I used face-api.js.

face-api gives 68 reference points of the face. For example, there are points that may represent the center of the eye, or the bottom of the chin. I was able to combine these reference points into the shape of a beard, and then draw it using the HTML5 canvas. After looking at tons of pictures of beards on the internet (I now get lots of ads for beard products), I was able to design/copy my favorite 5 beard styles!

If you are interested in making your own facial recognition project, check out my source code on GitHub.

Hope you enjoy!

Top comments (5)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

This is fun :)

Collapse
 
i8sumpi profile image
Kira L

Thank you!

Collapse
 
cyril_ogoh profile image
ogoh cyril

This slow my phone down 🤣🤣🤣
Where's the process running
On the clients side or the server ?

Collapse
 
i8sumpi profile image
Kira L

It's all in the client side, using tensorflow.js. Sorry this slowed down your phone!

Collapse
 
cyril_ogoh profile image
ogoh cyril

Guess as much
😂😂

Use this like a user feedback