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

Collapse
 
alvaromontoro profile image
Alvaro Montoro

This is fun :)

Collapse
 
i8sumpi profile image
Kira L

Thank you!