ML Project Post-Mortem

We were told to make an artifact that would show off how machines make decisions in Javascript, using HTML and CSS to build a website to show off the machine learning. In the beginning, we were told to look at existing projects to inspire us on ml5.js and p5.js. After a day of looking through those and trying to understand the code, we got the idea of an emoji translator. Use an image classifier to find a pose/symbol from the webcam input. When we tried this idea we couldn’t get the classifier to work correctly, it was identifying shirts as ponchos, and hands just as hands, not the symbols. We had also had no idea how to add our examples to it. so for a while, we tried to find examples that would almost be our project with just a few modifications. Everything close to our project was done in either Python or tensor-flow. Realizing we couldn’t use an image classifier we looked around on ml5 to find a new library, on there we found Posenet.

Posenet tracks your limbs positions and console logs positions in space. We got an idea that instead of the already drawn skeleton, we could do an image of someone’s face, we chose Bailey. After the idea, we had problems with adding the image to where we wanted. It was a quick fix, making a new folder for the photo we wanted to use, then set the code up to find the nose position and set the image there. In the end, we also divided the position by 2, having the picture look more like it’s on your shoulder. The HTML and CSS were easy, the HTML just showing the title and a quick description of the project. The CSS was added strait into the HTML to make the background of the webpage rainbow.

Overall this project went well and taught me how to use and modify pre-existing libraries for machine learning. If I were to change anything about the end product I would tighten up the website some, shortening the distance between the title, description, and the webcam output.