InstaRecipe

Repository URL: https://github.com/alhu45/instarecipe.git

What it Does

InstaRecipe is a website where users can upload pictures of ingredients they have, and in turn, they will be given a recipe that is generated based on the classified ingredients.

How We Built It

Using React.js and a Flask backend, we were able to create our project InstaRecipe. 

We first started off building the initial website with React so we were able to have a basic foundation of how the website will look. Using react components and hooks, we were able to create multiple components to create the UI of the website. This included handling user interactions and managing the state of the application.

One of the key components we developed was the image upload feature. This allowed users to upload an image of their ingredients, which was then sent to the backend for processing.

Since we needed to detect what ingredients were required, we used a pre-existing ML model that is used to detect what ingredients were in a photo. To integrate, we first had to load the pre-trained model, then the model was linked to the user’s image upload feature. When a user uploads an image, the model processes the image and makes predictions about the ingredients present.

Afterwards, we had to integrate a backend to use an API called Spoonacular to fetch the recipe respect to the ingredients the model predicted. By creating multiple endpoints using Flask, we were able to integrate the ML model and the recipe API together to return a recipe.

To personalize the user experience, we implemented a login system using Auth0. This allowed users to create accounts and log in securely to access their recipes they previously generated. This functionality was integrated seamlessly into the React frontend and Flask backend.

Here’s a simple workflow of how our application works:

1. User Authentication: The user is prompted to log in or sign up using Auth0.
2. Image Upload: After logging in, the user can upload an image of their ingredients.
3. Ingredient Detection: The uploaded image is sent to the backend, where the ML model classifies the image and identifies the ingredients.
4. Recipe Generation: The identified ingredients are sent to another backend endpoint, which calls the Spoonacular API to fetch recipes based on those ingredients.
5. Display Recipes: The recipes are returned to the frontend and displayed to the user.

This setup ensures a smooth and interactive experience for the user, leveraging the power of machine learning and API integrations to provide useful recipes based on the ingredients they have.

Next Steps

As the project was not fully completed in the 36-hour timeline, the first steps would be to ensure a fully-functional design. The following are the required steps to complete the base design:

1. Display Recipe Instructions (currently only the full list of ingredients and their quantities are displayed)
2. Connect output from object detection api (ingredient classification) to be input to the recipe generator api (currently the two function separately and there is a base recipe that shows up, as in the demo video, to ensure proper requests from recipe generator api)
   1. Each generated recipe is given an id which can be used to make a separate request for full recipe instructions
3. Implement functionality for users to save recipes to their account
4. Deploy webpage using our registered domain (www.instarecipe.co)

After the base functionality and design are completed, there are further steps we can take to improve the design of the product as well as the user experience:

• Present multiple recipes to user
• Expand dataset past 75 ingredients (this could include training our own model)
• Recipe customization (meal type, dietary restrictions, cuisine, etc.)