Tastrees: Image to Recipes

Case Study: Tastrees

Project Overview

Tastrees is an AI-powered recipe generator that transforms food images into detailed recipes using Gemini AI, Next.js, and TypeScript. By analyzing uploaded images, it identifies the dish (or raw ingredients) and generates a step-by-step recipe, nutritional breakdown, and chef tips—all in beautifully formatted Markdown.

Built as a full-stack application, Tastrees combines AI inference, image analysis, and live YouTube recipe recommendations to create a smart cooking companion for food lovers and creators.

The Challenge

Cooking inspiration often starts with visuals—seeing a delicious meal online or a random photo of ingredients—but translating that into a recipe is time-consuming and manual.

Challenges included:

• Manual Research: Users had to search for recipes manually after identifying food.
• Inconsistent Results: Generic recipe sites often misinterpret dishes.
• No Visual Recognition: Few tools could understand food images contextually.
• Recipe Complexity: Many results were cluttered or hard to follow.

The goal was to create an intelligent, fast, and visually-driven recipe discovery experience that bridges food imagery and AI cooking guidance.

The Solution

Tastrees leverages Gemini AI for visual understanding and Google YouTube Data API for contextual cooking videos.
When users upload an image, the backend processes it, classifies the food, and returns a fully structured recipe response—optimized for rendering in Markdown via React.

Key features include:

• Image-to-Recipe Generation: Upload any food photo, get a complete recipe instantly.
• Smart Identification: Detects cooked meals or raw ingredients and responds appropriately.
• YouTube Embeds: Suggests a relevant “how-to-cook” video for the detected food.
• Markdown-Only Output: Clean, readable format for React rendering without HTML parsing issues.
• Built-in Rate Limiting: Prevents API abuse for stable public demos.
• Vercel Deployment: Serverless and fast, with environment-based API key security.

My Role & Process

As the sole developer, I built Tastrees end-to-end—from AI prompt design to frontend integration and deployment.

1. Research & Concept

• Explored AI model capabilities using Gemini 2.0 Flash.
• Designed a prompt system for structured Markdown generation (recipes, ingredients, tips, etc.).
• Benchmarked response consistency and regex-based food name extraction.

2. Development

• Implemented the backend in Next.js API routes using TypeScript.
• Integrated Google Generative AI SDK for image analysis and YouTube API for video results.
• Designed a rate-limiting system with IP tracking for fair usage.
• Built a React frontend with drag-and-drop image upload and live Markdown rendering.
• Ensured strict Markdown output (no HTML) for consistent rendering via react-markdown.

3. Testing & Optimization

• Validated responses with multiple cuisines and image types (raw vs. cooked food).
• Improved the AI prompt to reduce hallucinated HTML and inconsistent formatting.
• Added graceful fallback when no recipe or video is found.

4. Launch

• Deployed via Vercel with environment-managed API keys.
• Optimized caching and request validation for production reliability.

Technical Stack

Results & Impact

• High Accuracy: Correctly identifies over 85% of common dishes from sample datasets.
• Enhanced UX: Users get recipes, plating tips, and video guides—all from a single image.
• Markdown Compliance: 100% valid output for React rendering with zero HTML leakage.
• Fast Performance: Processes and responds within ~3 seconds on average.
• Low Overhead: Efficient use of serverless runtime and concurrent image handling.

Tastrees demonstrates how multimodal AI can enhance culinary creativity and simplify recipe discovery.

Key Takeaways

• Prompt Engineering Matters: Small adjustments to structure dramatically improve AI consistency.
• UX Through Markdown: Enforcing a pure Markdown output simplified rendering and improved clarity.
• AI + APIs Synergy: Pairing Gemini with YouTube creates a richer, more instructive cooking experience.
• Scalable Foundation: Modular backend logic supports future extensions (e.g., nutrition APIs, saving favorites).

Try It Out

Visit the live app: Tastrees

View on GitHub

Conclusion

Tastrees highlights my ability to design, engineer, and deploy AI-driven user experiences that merge vision and language understanding.
By blending Next.js, TypeScript, and Google’s Gemini AI, I built a robust platform that turns visual food recognition into complete, human-readable recipes—pushing the boundaries of what’s possible with modern AI tools.