💪 AI Fitness Coach

An AI-powered fitness assistant that generates personalized workout and diet plans using Google Gemini AI.

Features

• 🎯 Personalized Plans - AI-generated workout and diet plans tailored to your goals
• 🔊 Voice Features - Text-to-speech for plans and voice input for modifications
• 🖼️ Image Generation - View exercise and meal images
• 📄 PDF Export - Download your complete plan
• 🔄 Plan Modification - Request changes using text or voice (fixed at bottom)
• 🌙 Dark Mode - Toggle between light and dark themes

Quick Start

1. Install dependencies

   npm install

2. Set up environment variables

   Create .env.local file:

   GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here
   UNSPLASH_ACCESS_KEY=your_unsplash_key_here # Optional
   ELEVENLABS_API_KEY=your_elevenlabs_key_here # Optional

3. Run the app

   npm run dev

4. Open http://localhost:3000

Get API Keys

• Google Gemini (Required): Get free key
• Unsplash (Optional): Get key
• ElevenLabs (Optional): Get key

Deployment Options

Option 1: Deploy to Netlify (Recommended - Better Timeouts!)

Why Netlify?

• Better timeout limits: 26 seconds on Pro, 10 seconds on Free (vs Vercel's 25s edge limit)
• Background functions: Up to 15 minutes for long-running tasks!
• Free tier friendly: Perfect for Gemini API which takes 20-30 seconds

Steps:

1. Push your code to GitHub
2. Go to Netlify
3. Click "Add new site" → "Import an existing project"
4. Connect your GitHub repository
5. Add environment variables in Netlify dashboard:
   • GOOGLE_GENERATIVE_AI_API_KEY
   • UNSPLASH_ACCESS_KEY (optional)
6. Deploy! Netlify will auto-detect Next.js

Option 2: Deploy to Vercel

⚠️ Note: Vercel's free tier has a 25-second timeout which may cause issues with Gemini API responses.

1. Push to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy

Consider upgrading to Vercel Pro ($20/month) for 60-second timeouts if needed.

Tech Stack

• Next.js 16 (App Router)
• React 19
• TypeScript
• Tailwind CSS v4
• Google Gemini 1.5 Flash (AI)
• Zustand (State Management)
• Unsplash API (Images)

📁 Project Structure

ai_trainer/
├── app/
│   ├── api/
│   │   ├── generate-plan/      # AI plan generation endpoint
│   │   └── generate-image/     # AI image generation endpoint
│   ├── globals.css             # Global styles
│   ├── layout.tsx              # Root layout
│   └── page.tsx                # Main application page
├── components/
│   ├── DietPlanDisplay.tsx     # Diet plan UI
│   ├── Header.tsx              # App header with actions
│   ├── LoadingScreen.tsx       # Loading animation
│   ├── TipsAndMotivation.tsx   # Tips display
│   ├── UserInputForm.tsx       # Multi-step form
│   ├── VoiceControl.tsx        # Voice narration controls
│   └── WorkoutPlanDisplay.tsx  # Workout plan UI
├── lib/
│   ├── store.ts                # Zustand state management
│   ├── utils.ts                # Utility functions
│   └── voice.ts                # Text-to-speech utilities
├── types/
│   └── index.ts                # TypeScript type definitions
└── public/                     # Static assets

🎨 Key Features Explained

1. Multi-Step Form

• 5 Progressive Steps - Personal info → Goals → Workout prefs → Diet prefs → Optional details
• Validation - Real-time form validation with helpful error messages
• BMI Calculator - Automatic BMI calculation and categorization
• Progress Bar - Visual feedback on completion status

2. AI Plan Generation

The app uses Google's Gemini 1.5 Pro to generate:

• 7-day workout schedules with detailed exercises
• Complete meal plans with nutritional breakdowns
• Personalized tips and motivation
• All content is structured JSON for easy parsing

3. Voice Features

• Browser TTS - Uses Web Speech API (free, no API costs)
• Playback Controls - Play, pause, resume, and stop
• Script Generation - Converts plan data into natural speech
• Section Selection - Choose workout, diet, or full plan

4. Image Generation

• On-Demand - Images from Unsplash stock photos
• Context-Aware - Searches based on exercise/meal names
• High Quality - Professional stock photography
• FREE - No API costs using Unsplash

5. PDF Export

• Professional Layout - Multi-page PDF with proper formatting
• Complete Data - Includes all workout, diet, and tip information
• Branded - Custom styling with color-coded sections
• Download Ready - One-click download with user's name in filename

🔧 Configuration

Changing AI Provider

To use a different AI provider (OpenAI, Claude, etc.), modify the API route:

// app/api/generate-plan/route.ts
import { openai } from '@ai-sdk/openai';
import { generateText } from 'ai';

const { text } = await generateText({
  model: openai('gpt-4-turbo'),
  prompt,
  temperature: 0.7,
});

Or use Anthropic's Claude:

import { anthropic } from '@ai-sdk/anthropic';

const { text } = await generateText({
  model: anthropic('claude-3-5-sonnet-20241022'),
  prompt,
  temperature: 0.7,
});

Using ElevenLabs for Voice (Optional)

For higher quality TTS, integrate ElevenLabs:

1. Get API key from ElevenLabs
2. Add to .env: ELEVENLABS_API_KEY=your_key
3. Create API route: app/api/text-to-speech/route.ts
4. Update VoiceControl.tsx to use the API

📊 Data Flow

1. User Input → Multi-step form collects user data
2. State Management → Zustand stores data with persistence
3. API Call → Data sent to /api/generate-plan
4. AI Processing → OpenAI generates personalized plan
5. Display → Plan rendered with interactive components
6. Actions → Export PDF, generate images, play audio

🎯 Future Enhancements

• Progress tracking and check-ins
• Calendar integration for scheduling
• Social sharing features
• Workout video demonstrations
• Meal prep instructions
• Integration with fitness trackers
• Multi-language support
• Mobile app (React Native)

📝 Environment Variables

Variable	Required	Description
GOOGLE_API_KEY	Yes	Google AI API key for Gemini
ELEVENLABS_API_KEY	No	For premium TTS (optional)
OPENAI_API_KEY	No	Alternative AI provider
CLAUDE_API_KEY	No	Alternative AI provider

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Google AI for Gemini API
• Vercel for Next.js framework
• Tailwind Labs for Tailwind CSS
• Unsplash for stock photography
• All open-source contributors

📧 Support

If you encounter any issues or have questions, please open an issue on GitHub.

---

Built with ❤️ and AI