Description as a Tweet:

Give the website a picture and it'll add decorations to all the faces to add some Christmas spirit. This includes Christmas hats, beards, and facemask. You can then download the picture and send it as a Christmas letter to family and friends to keep the holiday cheer during COVID

Inspiration:

We felt like COVID has consumed the lives of many people for the past year and hackathons have become saturated with COVID related projects. We wanted to create a project that could bring smiles to people's faces to forget these difficult times. When relationships are at their weakest, something like this will hopefully do something to remind people of their bonds.

What it does:

Given a picture, the website will detect faces and apply decorations such as hats, beards, and face masks based on selections by the user.

How we built it:

We used OpenCV's face detection with haar classifiers to find the bounding boxes for faces. Using this and p5.js we drew the decorations onto the canvas

Technologies we used:

  • HTML/CSS
  • Javascript
  • AI/Machine Learning

Challenges we ran into:

We challenged ourselves to use static webpages instead of relying on node or flask. This was an issue for OpenCV because it requires a webserver for xmlhttp requests to build the classifier each time it is loaded. We found an alternate way to complete the classifiers. The classifier had some issues with many false positives. In some cases an extremely small area such as people's knees were detected as faces. We increased the threshold and had minimum sizes for detection.

Accomplishments we're proud of:

We were able to use OpenCVJS on a static webpage. We spent a lot of time on the design of the website, making it has Christmas spirit by having components such as falling snow. We spent a lot of our time make well documented code, including using packages such like JSDoc to create webpages for our code like JavaDoc.

What we've learned:

We were both challenged to learn a lot more about web development and understand all of the tools we had. We gained a better understanding of the math behind face detection.

What's next:

Add additional face classifiers in order to detect more faces. Add more decorations that can be applied to faces

Built with:

OpenCV, p5.js, JavaScript, CSS, HTML

Prizes we're going for:

  • Best Documentation
  • Best Web Hack
  • Funniest Hack
  • Best Machine Learning Hack

Team Members

Victor Tran
Jack Liu

Table Number

Table TBD