Make Your Own Artificial Intelligence Driven Web App to Decorate Faces

The app will capture video and then apply artificial intelligence to decorate your face.

Make your own:

Create Your Own

create your own decortion and code to position it!

Create Your Decoration

1. Create a png image to use as the decoration. Any app that allows you to create png files will work fine. The default decoration uses Google Drawings to make simple sunglasses. A few options:
   1. Google Drawings
   2. Sketchpad
   3. Figma
   4. etc...
2. upload your image.

Code Your Logic to Position the Decoration

Update "code.js" to correctly calculate the drawing properties for your decoration.

Keypoints (JSON)

{
  "keypoints": [
    { "x": 141, "y": 61, "name": "rightEye" },
    { "x": 180, "y": 64, "name": "leftEye" },
    { "x": 167, "y": 80, "name": "noseTip" },
    { "x": 162, "y": 103, "name": "mouthCenter" },
    { "x": 105, "y": 76, "name": "rightEarTragion" },
    { "x": 189, "y": 81, "name": "leftEarTragion" }
  ],
  "box": {
    "xMin": 104,
    "xMax": 198,
    "yMin": 42,
    "yMax": 135,
    "width": 93,
    "height": 93
  }
}

Keypoints Identified

Based on the face keypoints, calculate the following to position the decoration

• xCenter: the x coordinate of the center of the decoration
• yCenter: the y coordinate of the center of the decoration
• width: the width of the decoration
• height: the height of the decoration
• angle: the angle of the decoration

Draw Properties

You can use the provided example images and video to check if your calculation is correct