Personal Face Mask Detection with Custom Vision and Tensorflow.js
Tags: javascript, machinelearning, azure, covid19
Published: 2020-03-31 19:25:43

---
title: Personal Face Mask Detection with Custom Vision and Tensorflow.js
published: true
date: 2020-03-22 05:07:49 UTC
tags: javascript, machinelearning, azure, covid19
canonical_url: https://medium.com/microsoftazure/corona-face-mask-detection-with-custom-vision-and-tensorflow-js-86e5fff84373
---

![](https://cdn-images-1.medium.com/max/1024/1*PgkwI-Id6jYEFRnDJR_Yjw.png)

TLDR; Instructions for building a Corona Mask Detector for Free Using the Azure Custom Vision Service and Tensorflow.js.

### Background

While on Facebook this morning I saw a really great post by Muhammad Asad Javed on the work he did building an object detection model for Facial Mask detection.

![](https://cdn-images-1.medium.com/max/1024/1*stzqrWwhoV4jCkLrhuwJhw.png)

Unfortunately, he couldn’t release the code or data which inspired me to build my own model and document the process using the Free Tier of the Azure Custom Vision Service.

[Custom Vision | Microsoft Azure](https://azure.microsoft.com/en-us/services/cognitive-services/custom-vision-service/?WT.mc_id=coronafacemaskdetector-medium-abornst)

The final model, open dataset, and code for evaluating in the browser can be found on my github below.

[aribornstein/CoronaFaceMaskDetectionTFJS](https://github.com/aribornstein/CoronaFaceMaskDetectionTFJS)

Now let’s get started building your own model.

### Building Your Own Model

#### Step #1: Create Face Mask Dataset

![](https://cdn-images-1.medium.com/max/1024/1*mU1vbOeN10WJ96liF_qnPA.png)

![](https://cdn-images-1.medium.com/max/1024/1*j_0DC1-VgKJXxzGqHRqyTw.png)

![](https://cdn-images-1.medium.com/max/1024/1*eEVDQzeLbP4V_unY8w3sZQ.png)<figcaption>Build a dataset by searching for images with commercial free use</figcaption>

Try to build as representative a dataset as possible.

#### Step #2 LogIn to [CustomVision.ai](https://www.customvision.ai/) with Azure Account

![](https://cdn-images-1.medium.com/max/1024/1*84mY1LqfToCk_SKQhiP_Zg.png)

A free [Azure](http://azure.microsoft.com/) subscription can be created with the link below, their is a free tier of the Custom Vision Service which is perfect for this demo.

[Create your Azure free account today | Microsoft Azure](https://azure.microsoft.com/en-us/free/?WT.mc_id=coronafacemaskdetector-medium-abornst)

#### Step #3 Create New Object Detection Project

When you log in for the first time you’ll see the following screen click create new project.

![](https://cdn-images-1.medium.com/max/1024/1*XesK6ZfY4hguNq_pK-apEQ.png)

Enter the following settings to create a Object Detection Model.

![](https://cdn-images-1.medium.com/max/883/1*k2FRmuQH38KJ9LV3iB3BTw.png)

#### Step #5 Upload and Annotate Images

![](https://cdn-images-1.medium.com/max/1024/1*S18vYNqmOR5CpsjSTLiYPA.png)

![](https://cdn-images-1.medium.com/max/988/1*M6b25MoGlpJp7b0XaWQ55g.png)

![](https://cdn-images-1.medium.com/max/1024/1*KC3facnSXMDTqc_76J3tIA.png)

#### Step #6 Train and Test Model

Once you have finished the annotating your images. Click the green train button on the top right corner.

![](https://cdn-images-1.medium.com/max/855/1*vhuSwG3OxZSkwNunU9YU5Q.png)

Follow the instructions to train your model here is a screen shot of my first model.

![](https://cdn-images-1.medium.com/max/1024/1*fwRmNcu160RQR84NcbA7aA.png)

What’s amazing is that even a simple model like the one above seems to work really well on my first test.

![](https://cdn-images-1.medium.com/max/1024/1*PgkwI-Id6jYEFRnDJR_Yjw.png)

![](https://cdn-images-1.medium.com/max/1024/1*o0KaRHxFX0oPn1Dq_PuTMA.png)<figcaption>Pictured with and without face mask.</figcaption>

Pro Tip: after training your first model try out the new get suggested objects on additional data to both speed up the annotation process and evaluate your model.

#### Step #7 Export Model to Tensorflow.js for Client Side Evaluation

![](https://cdn-images-1.medium.com/max/797/1*1NGGsGST2LGCDIScMZI3FQ.png)

![](https://cdn-images-1.medium.com/max/873/1*EdH3Qaeyli-P_eUuldCZBA.png)

The model can then be used locally with following code:

[microsoft/customvision-tfjs](https://github.com/microsoft/customvision-tfjs)

There you have it all the steps you need to build your own face mask detection model stay safe and we will get through this together.

### Open Source Option

For those who are looking for a completely open source option for training these types of models check out Microsoft VoTT and our Computer Vision Best Practices Repo.

- [microsoft/VoTT](https://github.com/microsoft/VoTT)
- [microsoft/computervision-recipes](https://github.com/microsoft/computervision-recipes)

### About the Author

[**Aaron (Ari) Bornstein**](https://www.linkedin.com/in/aaron-ari-bornstein-22aa7a77/) is an AI researcher with a passion for history, engaging with new technologies and computational medicine. As an Open Source Engineer at Microsoft’s Cloud Developer Advocacy team, he collaborates with Israeli Hi-Tech Community, to solve real world problems with game changing technologies that are then documented, open sourced, and shared with the rest of the world.

* * *