I want to learn how to code an AI app by building fun projects.

I want to learn how to code an AI app by building fun projects. So here's day one of showing you how to do the same. Let's code a tiny game where we'll use our hands to light a birthday cake and our voice to blow it. We're going to be using plain HTML, CSS, and JavaScript and the MediaPipe library for hand tracking. We'll only need three assets: an unlit cake, a lit cake, and a match icon. We'll start by setting up our HTML structure and as you can see, we have a happy birthday title, a video element, a canvas element, and a cake area where the cake will be. On our script, we'll use MediaPipe to track one hand from our video and use those coordinates to change the position of our match. Then we're going to add a function when the match gets close to the candles of the cake so we can swap the unlit cake for the lit one. Now to blow out the candles, we'll use our mic, so we'll grab the audio stream and measure the volume, and if it goes any higher, then we'll again swap the images. To finish off, we add CSS to style however we want it. Like I even added some ASCII confetti cuz why not? And that's it. See you in the next commit to build more cool stuff. Bye.