# 😷 Mask Detection App.

                                            Screnshort of web application 

# About this project:-

This project is all about detecting mask on person's face whether he/she is wearing a mask or not. As the Coronavirus pandemic has hit our livelihood mask has become one of the important things in our lives. It helps protect us from the viruses which are transmitted through air. As the government has strictly said that everyone has to wear masks everywhere they go, yet so many peoples aren't wearing masks properly. So for this situation, we have created a mask detection app that will detect if the person is wearing a mask or not.

Here's the Website! link

You can watch the Demo Video!

Topic we choosed from the 17 sustainable goals:-

We chose "Good Health & Wellbeing" as a theme for our project and created a mask detection web app. As the Coronavirus pandemic has hit our livelihood mask has become one of the important thing in our lives. It helps us to protect from the viruses which are transmitted through the air. As the government has strictly said that everyone has to wear masks everywhere they go, yet so many peoples aren't wearing masks properly. So for this situation, we have created a mask detection app that will detect if the person is wearing a mask or not.

## Technologies used-

``` 1.FRONTEND HTML,CSS 2.BACKEND Javascript,FIREBASE 3.MasDETECTION Model TENSORFLOW.JS 4.UI/UX FIGMA ``` --- ## ✍️ Process of Creating

For creating the prototype(UI) of our web app we used Figma which was our overall first step. After that, we created our frontend of the web app using HTML and CSS. After that we have to create a login screen and for that we used firebase auth which is one of the best auth providers present in the market and also a google platform so we preferred it. After that for our real interface for checking the mask, we used Tensorflow.js. Tensorflow.js is a machine learning framework that brings a machine learning model to your web app and it is also a google platform so we preferred to use it as well. For creating the mask detection model we have created dataset of people not wearing and of people wearing the mask. When the user clicks on the start button then the detection starts and our TensorFlow functions are called and if the person is wearing masks there will be a message in a green container like "wearing mask 100%" and if the person is not wearing a mask then there will be a message like "not wearing mask 100%". After we have added a logout button as well on the same screen so that person using it can log out from the session. For logout firebase auth functions are called. For deploying our web app used Firebase.

Challenges Faced

This project was filled with so many challenges one was styling the machine learning model which we created with tensorflow.js and combining it with our frontend. So for that, we researched on google and youtube, and yeah we were able to resolve the issue thanks to our team members for having such a great team spirit we constantly worked on the issue and yeah we resolve it.

Future Goals

In v.2, we will make an app version of this website. In that app, there will some extra features like when the user will log in we will take phone no. so that we can send notifications to them to remind them about the safety and importance of wearing the mask. We will be adding some more features like if the user is not wearing properly or not wearing then we will notify him with a message

e.g:- "Please Wear the mask and flow the measures for your safety". Otherwise, we will notify him "Well done! Please keep following the precautions" if he wears the mask.

Thanks for Reading! ✨