This is a Next.js project bootstrapped with create-next-app.

🛠️ Tech Stack

Component	Technology
Frontend	Next.js (React) + Tailwind CSS + DaisyUI
Backend	Next.js API Routes (Node.js)
Image Processing	GPT-4V (for object detection)
Embeddings Model	text-embedding-ada-3
Vector Database	Pinecone Vector DB
Recipe Generation	GPT-4 (context-based customization)
AI Image Generation	DALL·E 2
Authentication	Next Auth
Database (Optional for history & user preferences)	Supabase / PostgreSQL
Hosting	Vercel (Frontend & Serverless API)

Application Architecture

1. User uploads a fridge image

1. The user takes a picture of their fridge and uploads it.

2. AI processes the image to detect ingredients

1. A computer vision model (OpenAI GPT-4V) identifies the ingredients.
2. Detected ingredients are extracted as structured array text response.

3. Generate an embedding for the detected ingredients

1. Convert the extracted ingredient list into a vector using OpenAI's text-embedding-ada-3.

4. Search for relevant recipes in Pinecone

1. Perform a vector similarity search in Pinecone to find recipes that closely match the detected ingredients.

5. Provide context to GPT-4 for recipe customization

1. Send the retrieved recipes context from Pinecone + detected ingredients to GPT-4 with additional context.
2. GPT-4 improves the recipe, suggests multiple variations, and provides additional tips (e.g., missing ingredients, substitutes, cooking methods).

6. Generate an AI image of the dish

1. If the user wants a preview, DALL·E 2 generates an AI-rendered dish based on the recipe.

7. Display final recipe recommendations

1. The user sees multiple AI-enhanced recipes tailored to their fridge contents.
2. They can save, share, or refine their choices.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.