Kids Against COVID

Inspiration

The inspiration for this website was actually due to schools opening and returning back after Winter Break. While schools are trying their best during these times to help make the transition safer, schools often still have high transmission rates especially after a time where many families have traveled. Additionally, there have been many updates for COVID related news, such as doctors urging people to switch from cloth masks to N95 or KN95 masks, and also the booster update that allowed kids in the 12-15 year old category get their booster shots. This website serves as a fun connection to kids to help them see the importance of keeping safe and ways to do so.

What it does

There are four main parts to the website: the mask checker, the vaccine information section, and the school safety and learn more sections. The mask checker is a machine learning model designed with Teachable Machine by Google that allows the user to check if their mask is worn correctly. This is especially convenient for children who are unaware they are wearing their masks incorrectly or are unsure how to wear it correctly. Through direct feedback with the user via webcam, a child can easily understand how to correctly wear their mask and verify it with the website! The accuracies of the model are still under development, since the model needs to be trained further in order to have high accuracy. It can be tested via this link: https://teachablemachine.withgoogle.com/models/P8XBfIAh6/

The vaccine information section is also still under development since I was not able to finish, but this section would serve the purpose of helping kids and their parents find nearby vaccine appointments. Since it was hard for me to find my vaccine appointment after my age group was cleared recently for the booster, I figured that this would serve as a helpful page that could be updated regularly with open appointments.

The last two sections (school safety and learn more) are made for kids to learn more about COVID and how to stay safe after school. They would incorporate fun graphics and images to help them pick up information more effectively.

How we built it

I built Kids Against COVID using HTML/CSS, and Teachable Machine for the machine learning model (which included transferring the Tensorflow.js code into the website). I used repl.it as my IDE.

Challenges we ran into

The machine learning model was hard to train at first because small sample sizes would cause inaccuracies in results and different positions (e.g. one person is more forward in the webcam compared to another) would change results. However, after using over 1,000 images the model is getting a bit better at identifying if the user is wearing the mask correctly or not.

Accomplishments that we're proud of

The machine learning model through Teachable Machine, and the navigation bar which was having some trouble in the beginning but eventually worked out.

What we learned

I learned a lot more about HTML and CSS, and overall machine learning and its aspects. Some examples include how to have images and text be side by side, and IDs and classes in HTML.