AS AN individual interested in using up-to-date AI technologies and cooking
I WANT to find a recipe and its nutritional information based on an ingredient that I have in my kitchen
SO THAT I can utilize AI technology to help me make interest/health conscious decisions to make appealing meals.
The Vision AI app single-page application designed to produce recipes and nutritional information based on an image's content using AI technologies.
This app operates by prompting users to upload an image of an ingredient. Google reads the image with Google Lens, then passes the description to OpenAI’s API, the app retrieves a corresponding recipe.
To enhance user experience, a loading spinner is implemented on the page during the recipe retrieval process.
Additionally, the app offers a choice between light and dark mode, allowing users to select their preferred interface appearance.
Link to deployed application: https://main--eclectic-kringle-05e268.netlify.app/
Users can upload their ingredient image using the "Browse" button, once the image is uploaded a recipe will displayed on the page with the nutritional information below.
Screenshot of the app homepage:
Example of an ingredient search plus nutritional information:
- React
- Node.js
- Tailwind CSS
- SCSS for the Loading Animation
- ES6
- Google Lens API
- OpenAI API
- Netlify for Deployment
- WebShare API
This Project was created by Project Team 5 with Birmingham University as part of the Intensive 16-Week Front End Web Developent Bootcamp.
The Team Members are: Harry Parker, Maria Sameen, Jean Chan, Lee Webb.
We'd like to thank Roger Le the Instructor for this Bootcamp as well as Tiffany Rose and the support staff who have provided an incredible amount of support to get us where we are today.
The University of Birmingham: https://www.birmingham.ac.uk/index.aspx
License There is no license specified for this project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent