🍳 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

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

Extending Functionality

Create new page components in src/views/
Add route configuration in src/router/
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

README_EN.md 5.7 KB История Исходник