AI Recipe Generator: Turn Food Photos into Instant Recipes with AI 🍳✨

[Sascha]

Have you ever looked at a dish and wondered, "What's in it — and how can I make it myself?" Introducing the AI Recipe Generator: a project that uses computer vision and AI to analyze any food photo and instantly generate a step-by-step personalized recipe. Upload a picture of your ingredients or a finished dish—get a complete recipe (with cooking steps) in seconds!

Why I Built This


Food recognition and AI have always fascinated me. As a developer, I noticed a gap: plenty of sites offer recipe browsing, but almost none use AI to bridge the gap between your fridge and cooking. What if we could snap a photo and get actionable, tailored recipes—making home cooking easier, smarter, and more fun?

Core Features

• Image-Based Recipe Generation: Simply upload a food photo; the AI will suggest what you can cook.
• Smart Ingredient Detection: The backend identifies ingredients and even guesses cooking methods.
• Personalized Output: Adjust recipes based on diet, cuisine, or available ingredients.
• Step-by-Step Instructions: Recipes come with cooking steps, timings, and planned nutritional details.
• Recipe Collection: Save and manage your favorite recipes in-app.

Tech Stack


This project is full-stack, leveraging cutting-edge tools for both frontend and backend:

Frontend: Next.js 15 (React), TypeScript, Tailwind CSS, React Query, React Hook Form
Backend: FastAPI (Python), SQLAlchemy, Pydantic, OpenAI/Anthropic AI, Uvicorn
Utilities: Docker, pytest, Alembic (for DB migrations), Vercel & Netlify (deploy)

How It Works

1. Upload: User uploads a photo (ingredients or finished dish).
2. Vision-to-Recipe AI: FastAPI backend uses advanced image recognition to detect ingredients and dish types.
3. Recipe Generation: The backend crafts personalized recipes using AI language models (OpenAI/Anthropic APIs), creating ingredient lists, steps, timing, and difficulty.
4. Web Interface: The frontend (Next.js) displays the result, lets you customize preferences, and save your recipe library.

Implementation Walkthrough

1. Project Structure

• /frontend: Next.js React app (UI, API clients)
• /backend: FastAPI service (AI endpoints, database models)

1. Getting Started

• Clone the repo:

git clone

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

cd ai-recipe-generator

• Run both servers with a single command:

./run-dev.sh

1. Environment Setup
2. API and AI keys stored in .env files for backend and frontend.
3. 
   Docker build scripts for seamless deployment.
   
   
4. 
   Key Endpoints
   

• POST /api/v1/recipes/generate — generate a recipe from an uploaded image.
• GET /api/v1/recipes — browse all recipes.
• Auth and user-specific features planned for future versions.

Try It Yourself!

• Repo:
  
  

  Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

  
  
• Clone, configure your API keys, and run locally or deploy to Vercel/Netlify.
• Tinker with the code to add more AI models or expand cuisine coverage!

Takeaways


Building this project taught me:

• How to bridge computer vision and language models in real-world web apps
• The value of clean API design using FastAPI and TypeScript
• The power of Docker for rapid prototyping and deployment

Would love feedback, ideas for improvement, or contributions—let’s cook up some AI magic together!

Источник:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.