what-to-eat/README_EN.md

🍳 YiFan FengShen (One Meal to Godhood)

🚀 Vibe Coding
Through the Kiro editor, the full process development from requirements analysis, architecture design to code implementation is realized. English | 中文

An AI-powered intelligent recipe generation platform supporting Chinese Eight Great Cuisines + International Cuisine, providing nutritional analysis, wine pairing, recipe image generation, and comprehensive cooking guidance.

🚀 Core Features

• Smart Recipe Generation - Generate professional recipes based on ingredients and cuisine preferences
• Nutritional Analysis - Detailed nutritional breakdown and health scoring
• AI Food Images - One-click generation of beautiful dish images
• Wine Pairing - Professional sommelier recommendations
• Sauce Designer - Customized seasoning formulas
• Favorites Management - Save and manage favorite recipes
• Culinary Fortune - Fun food fortune telling

🛠️ Tech Stack

• Frontend Framework: Vue 3.4 + Composition API + TypeScript 5.3+
• Styling: Tailwind CSS 3.4+
• Build Tool: Vite 5.0+
• AI Services: Yi-Lightning (01.AI) + CogView-3-Flash (Zhipu AI)
• Deployment: Vercel + Netlify

🚀 Quick Start

Requirements

• Node.js 18+

Local Development

# Clone the project
git clone https://github.com/liu-ziting/what-to-eat.git
cd what-to-eat

# Install dependencies
npm install

# Configure environment variables
cp .env.example .env
# Edit .env file and add your AI API keys

# Start development server
npm run dev

Build & Deploy

# Type check + build
npm run build

# Netlify build
npm run build:netlify

# Preview build
npm run preview

🚀 One-Click Deploy

Deploy to Vercel

Deploy to Netlify

📖 For detailed deployment guide, see: DEPLOYMENT.md

Environment Variables

# Text Generation API (01.AI)
VITE_TEXT_GENERATION_BASE_URL=https://api.lingyiwanwu.com/v1/
VITE_TEXT_GENERATION_API_KEY=your_text_api_key_here
VITE_TEXT_GENERATION_MODEL=yi-lightning

# Image Generation API (Zhipu AI)
VITE_IMAGE_GENERATION_BASE_URL=https://open.bigmodel.cn/api/paas/v4/
VITE_IMAGE_GENERATION_API_KEY=your_image_api_key_here
VITE_IMAGE_GENERATION_MODEL=cogview-3-flash

📁 Project Structure

src/
├── components/          # Reusable components
│   ├── ConfirmModal.vue      # Confirmation dialog
│   ├── CookingLoader.vue     # Cooking animation loader
│   ├── FavoriteButton.vue    # Favorite button
│   ├── GlobalNavigation.vue  # Global navigation
│   ├── RecipeCard.vue        # Recipe card
│   ├── NutritionAnalysis.vue # Nutrition analysis
│   └── ...
├── config/              # Configuration files
│   ├── ai.ts                 # AI model configuration
│   ├── cuisines.ts           # Cuisine configuration
│   ├── ingredients.ts        # Ingredients configuration
│   └── ...
├── services/            # Service layer
│   ├── aiService.ts          # AI API service
│   ├── favoriteService.ts    # Favorites service
│   ├── imageService.ts       # Image service
│   └── ...
├── views/               # Page components
│   ├── Home.vue              # Home page
│   ├── Favorites.vue         # Favorites page
│   ├── SauceDesign.vue       # Sauce designer
│   └── ...
├── types/               # TypeScript type definitions
├── utils/               # Utility functions
└── router/              # Router configuration

🎯 Development Guide

Adding New Cuisines

1. Add cuisine configuration in src/config/cuisines.ts
2. Write professional AI prompts for cuisine masters
3. Add corresponding icons and descriptions

Extending Functionality

1. Create new page components in src/views/
2. Add route configuration in src/router/
3. Add navigation entry in navigation component

AI Service Integration

• Text Generation: src/services/aiService.ts
• Image Generation: src/services/imageService.ts
• Support for multiple AI service providers

📈 Star History

🙏 Acknowledgments

• Vue.js - Progressive JavaScript framework
• Tailwind CSS - Utility-first CSS framework
• 01.AI - Recipe generation API
• Zhipu AI - Image generation API