All Heroes Wears Masks! Be a Hero! Wear a Mask!

HWM uses machine learning to determine whether you are wearing a mask, and what's more important, whether you are wearing it correctly. Turn on your Web cam and smile. Don't worry, your photos will never leave your browser.

What is this site?

Heroes Wear Masks started with a simple question in mind - can I teach a machine-learning algorithm to detect whether the person is wearing a mask. What is perhaps more important, can the algorithm tell when the mask is not worn correctly (e.g., not covering the nose, under the chin, etc.)? All that by keeping the site visitor's absolute privacy.

The result is the experiment you see above. Despite the little training I did, the model can now detect all three states (no mask, properly worn ask, badly worn mask) with surprising accuracy. Moreover, everything is happening locally, directly on the participant's browser - there is no need to worry about some secret 3rd party storing on snooping on your private data.

What is the tech?

Much of the magic is happening thanks to a TensorFlow.js model I designed and trained. The model is based on my personal training (sitting in front of my camera and taking hundreds of silly shots in different angles) and that of a few willing volunteers.

Even with the model ready, I would not have created a demo so fast had it not been for Svelte and Tailwind CSS - my favorite frontend tools. They made setting up a responsive and interactive Web application a breeze. The site is hosted on Netlify and uses minimal, non-intrusive analytics from Plausible - the privacy-aware analytics provider.

Contact and Feedback

Have a question about the project or want to share your feedback? Perhaps, you'd love to build a similar project yourself? Do not hesitate to get in touch.