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