🍽️ PlateSpeak: AI-Powered Gastronomy Decoder & Allergen Tracker

PlateSpeak is a highly responsive, mobile-first, luxury web application designed for sophisticated gastronomy. Built using Next.js (App Router), TypeScript, and Tailwind CSS v4, PlateSpeak allows food lovers and travelers to scan or photograph restaurant menus, decode exotic foreign dish names, explore culinary composition stories, and pinpoint allergens instantly with high-end editorial elegance.

✨ Live Demo: https://menu-translator-dun.vercel.app/

---

🎨 Luxury Visual Design System & Aesthetics

PlateSpeak is custom-designed using the premium aesthetics of high-end physical Michelin menus:

• Sophisticated Gastronomy Palette:
  • Gourmet Cream Light Mode (Default): Soft, textured warm cream paper backdrop (#fbfaf5) paired with sleek dark charcoal text (#17211f) which is exceptionally easy on the eyes.
  • Velvet Dark Mode: Dark-forest velvet obsidian (#101815) with muted mint-cream accents (#f5fcf9) for low-light dining atmospheres.
  • Luxurious Accents: A signature organic pastel sage green (#4e7165) and champagne gold highlights (#cf9a3b).
• Elevated Typography: Utilizing the high-contrast bougee serif Cormorant Garamond for physical menu headers and dish titles, balanced with the crisp Inter sans-serif font for allergen safety and ingredient breakdowns.
• Dynamic Micro-interactions: Fluid card transitions, gold laser-scan scanner lines, and hover effects that make the interface feel responsive and premium.

---

🚀 Key Culinary Features

1. AI Gastronomy Decoding: Snap a menu picture or drop a menu image file. PlateSpeak uses high-availability Google Gemini multimodel nodes to extract dish text, translate it, and break down the primary culinary ingredients.
2. Michelin-Grade Dish Guide: Translated menu items are displayed in a clean 3-column layout, detailed with highly appetizing 2-3 sentence culinary origin excerpts and composition details.
3. Allergen Safety Analysis: Automatically scans the menu items for standard allergens: Peanuts, Dairy, Gluten, Shellfish, Soy, Eggs, Fish, Tree Nuts, and Sesame, and displays them using beautiful, warning-free luxury organic color tags.
4. Resilient Fast Engine: Features duck-typed JSON cleansing regex fallbacks, making it highly robust against parsing exceptions and yielding lightning-fast translations.
5. Drag-and-Drop Image Uploader: Engineered with double-click cancellation safeguards, enabling seamless drag-and-drop or single-click photo loading on all mobile and desktop browsers.

---

🛠️ Technology Stack

• Framework: Next.js (App Router, dynamic force-rendering)
• Language: TypeScript (Strictly typed schemas)
• Styling: Tailwind CSS v4 (Custom inline variables system)
• AI Core: Google Gemini multimodal API rotation sequential failovers (gemini-1.5-flash ➡️ gemini-2.5-flash ➡️ gemini-2.0-flash)
• Icons: Lucide React

---

⚙️ Local Development & Quick Start

Follow these steps to set up PlateSpeak on your local machine:

Prerequisites

• Node.js (v18.0.0 or higher)
• A Google Gemini API Key (Get a free key instantly at Google AI Studio)

Installation

1. Clone the repository:

   git clone https://github.com/YOUR_USERNAME/platespeak.git
   cd platespeak

2. Install dependencies:

   npm install

3. Set up Environment Variables: Create a .env.local file in the root directory and add your Gemini API Key:

   GEMINI_API_KEY=your_gemini_api_key_here

4. Launch the development server:

   npm run dev

   Open http://localhost:3000 in your browser.

5. Build for production:

   npm run build

---

☁️ Deployment on Vercel

PlateSpeak is optimized for instant hosting on Vercel:

1. Push your code to GitHub.
2. Go to Vercel and click Add New Project.
3. Import your repository.
4. In the Vercel project configuration, add your Environment Variable:
   • Key: GEMINI_API_KEY
   • Value: your_gemini_api_key_here
5. Click Deploy. Vercel will automatically configure serverless API routes and compile static assets.

---

📜 License

Created with elegance, dining with safety. All rights reserved. 🍽️