Back of the Fridge

Logo
GIF
Generating a recipe - Click to watch GIF!
Generated Recipe Screen
GIF
Demo Image Detection Locally

Inspiration

The idea for the website came about when Alex was feeling hungry, but he didn't want to go to the store. He still wanted to make a dish with tzatziki, couscous and onions, but he tried searching online for a recipe and couldn't find one that fit his specific ingredients. That's when he decided to enter the ingredients into a language model like ChatGPT and found a recipe that looked delicious!

What it does

Back of the Fridge is a recipe website that helps users find recipes based on the ingredients they have on hand. It provides a user-friendly, efficient and easy-to-use solution for users to find recipes based on the ingredients they have on hand.

How we built it

Our team built the website "Back of the Fridge" using React, Next.js, and Tailwind for the front end. Next.js allowed us to create a user-friendly interface and provided a smooth navigation experience for our users. For the backend, we chose to use Python and Flask. This combination allowed us to build a robust and scalable backend that could handle many requests. We also connected to the Cohere NLP API to process the input and output recipes. This API allowed us to quickly and easily extract the ingredients from the user\'s input and match them with the appropriate recipes from our database. On that note, we also used Firebase, namely Firestore, as a simple non-relational database. The combination of React, Next.js, Firebase, Tailwind, Python, Flask and the Cohere NLP API allowed us to build a powerful and efficient recipe website that is able to provide users with the recipes they are looking for quickly and easily.

Details

To create a recipe using cohere, we give cohere our ingredients, then cohere returns to us a recipe title, instructions, and a list of ingredients used. We then take that title and give it to Surp API. Surp API then asks google for the top ranking images associated with that title. We pull down one of the top images and pass that up with the recipe object to the front end.

An image is uploaded to the front end, which is passed down to the backend, which asks Eden AI to analyze the image. Eden AI is an overlay of Google Cloud Vision. Google Vision API then processes the image and gives us back possible objects with predications on what these items are. We take all possible objects and match them with an internal dictionary of approved groceries and returns those back to the front end, to then be added to the ingredients list if desired.

Challenges we ran into

Building Back of the Fridge was challenging for our team as we had to integrate several third-party services to make the website work as intended. One of the biggest challenges we faced was the time crunch, as we had to complete the project within a 24-hour tight deadline. One of the key components of the website is the integration of a natural language processing (NLP) API which helps to extract the ingredients from the user's input and match them with the appropriate recipes from our database. Integrating this API was a complex task as it required a lot of testing and fine-tuning to ensure that it was working correctly.