Facebork is an application that relies on AI/ML to determine if a dog is present in an image file uploaded by the user. If the AI/ML confirms that a dog is in the image, the user receives a rating of their dog.

The purpose of this project was to establish a starting point with the VueJS framework and the Vuetify component framework. I also wanted to learn how to implement a basic AI/ML in an application. Finally, I really just wanted an excuse to use this awesome CSS dog animation I found.

VueJS, Vuetify, ML5/TensorFlow

At this point, I had completed a coding bootcamp and had my confidence shattered by JavaScript. By the end of this project, JavaScript was less scary and I learned a lot about the capabilities of CSS (I mean, just look at that dog). The AI/ML I originally selected ended up not being a good fit for this application due to it trying to identify every element in a given image based on a huge list. Eventually, I found a good fit with a model that searches an image for a specific tag (dogs). Specific concepts I learned during this project include:

• how to use SCSS
• overriding SCSS variables isn't fun
• Vue basics (how components work)
• learned ES5 common syntax
• file validation
• complex CSS animation
• JavaScript animation
• the difference between some AI/ML models
• what a confidence score is

npm install

npm run serve