VERCEL_DEPLOY_GUIDE.md

# 🚀 Vercel Deployment Guide

## ✅ Your Project is Ready for Vercel!

All files have been created and pushed to GitHub. You now have:
- ✅ Serverless API functions in `/api`
- ✅ Frontend with relative API calls
- ✅ Support for 5 AI models (including 10s videos!)
- ✅ package.json with dependencies

---

## 📋 Quick Deploy (5 minutes)

### Method 1: Vercel Dashboard (Easiest)

1. **Go to Vercel**
   - Visit: https://vercel.com
   - Sign in with GitHub

2. **Import Project**
   - Click "Add New" → "Project"
   - Select "Import Git Repository"
   - Choose: `LakshmiSravya123/VideoAI`

3. **Configure Project**
   - **Root Directory:** `hailuo-clone` ⚠️ IMPORTANT!
   - **Framework Preset:** None
   - **Build Command:** (leave empty)
   - **Output Directory:** (leave empty)

4. **Add Environment Variable**
   - Click "Environment Variables"
   - Key: `REPLICATE_API_TOKEN`
   - Value: `r8_YOUR_TOKEN_HERE` (from https://replicate.com/account/api-tokens)
   - Apply to: Production, Preview, Development

5. **Deploy**
   - Click "Deploy"
   - Wait 1-2 minutes
   - You'll get a URL like: `https://video-ai-xyz.vercel.app`

6. **Test**
   - Visit: `https://your-url.vercel.app/index_enhanced.html`
   - Try generating a video!

---

### Method 2: Vercel CLI (Advanced)

```bash
# Install Vercel CLI
npm install -g vercel

# Navigate to project
cd /Users/sravyalu/VideoAI/hailuo-clone

# Deploy
vercel

# Follow prompts:
# - Link to existing project or create new
# - Confirm settings
# - Add REPLICATE_API_TOKEN when prompted

# Deploy to production
vercel --prod
```

---

## 🎬 Available Models After Deployment

Your deployed app will have:

1. **Runway Gen-3** - 10 seconds ⭐ (longest!)
2. **Hailuo Video-01** - 6 seconds (best quality/price)
3. **CogVideoX-5B** - 6 seconds (good balance)
4. **HunyuanVideo** - 5+ seconds (SOTA)
5. **Luma Dream Machine** - 5 seconds (cinematic)

---

## 🔧 Post-Deployment Setup

### 1. Set Custom Domain (Optional)
- Vercel Dashboard → Your Project → Settings → Domains
- Add: `video.yourdomain.com`
- Update DNS as instructed

### 2. Make index_enhanced.html the Homepage
Option A: Rename file
```bash
cd /Users/sravyalu/VideoAI/hailuo-clone
mv index_enhanced.html index.html
git add -A && git commit -m "Make enhanced UI the homepage" && git push
```

Option B: Add vercel.json
```json
{
  "rewrites": [
    { "source": "/", "destination": "/index_enhanced.html" }
  ]
}
```

### 3. Enable Analytics (Optional)
- Vercel Dashboard → Your Project → Analytics
- Enable Web Analytics
- Track usage and performance

---

## 📊 API Endpoints

Your deployed app will have:

- `GET /api/health` - Check API status
- `GET /api/models` - List available models
- `POST /api/generate-video` - Generate videos

### Example API Call:
```bash
curl -X POST https://your-url.vercel.app/api/generate-video \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "A golden retriever running through flowers at sunset",
    "model": "runway"
  }'
```

---

## 💰 Cost Estimation

### Vercel Costs:
- **Hobby Plan:** FREE
  - 100GB bandwidth/month
  - Unlimited requests
  - Serverless functions included

### Replicate Costs (per video):
- **Runway Gen-3 (10s):** ~$0.20
- **Hailuo (6s):** ~$0.08
- **CogVideoX (6s):** ~$0.05
- **HunyuanVideo (5s):** ~$0.10
- **Luma (5s):** ~$0.10

**Example Monthly Cost:**
- 100 videos with Hailuo: ~$8
- 100 videos with Runway: ~$20
- Vercel hosting: FREE

---

## 🐛 Troubleshooting

### Issue: 404 on /api/generate-video
**Solution:** 
- Ensure Root Directory is set to `hailuo-clone`
- Check that `package.json` exists in that directory
- Redeploy

### Issue: 500 "Missing REPLICATE_API_TOKEN"
**Solution:**
- Add environment variable in Vercel Dashboard
- Settings → Environment Variables
- Redeploy after adding

### Issue: Functions timeout
**Solution:**
- Video generation can take 30-120 seconds
- Vercel Hobby: 10s timeout (may fail for long videos)
- Upgrade to Pro for 60s timeout
- Or use webhook/polling pattern

### Issue: CORS errors
**Solution:**
- Should not happen (same-origin)
- If using custom domain, ensure it's properly configured

### Issue: Slow first request
**Solution:**
- Cold start is normal (2-5 seconds)
- Subsequent requests are faster
- Consider keeping functions warm with cron job

---

## 🔒 Security Best Practices

### ✅ Already Implemented:
- API token in environment variables (not in code)
- .gitignore excludes .env files
- Serverless functions are isolated

### 🎯 Recommended:
1. **Rate Limiting:** Add rate limiting to prevent abuse
2. **Authentication:** Add user auth for production
3. **Input Validation:** Already implemented in API
4. **Monitoring:** Enable Vercel Analytics

---

## 📈 Scaling

### Current Setup:
- ✅ Serverless (auto-scales)
- ✅ No server management
- ✅ Pay per use

### For High Traffic:
1. **Add Caching:** Cache model metadata
2. **Add Queue:** Use queue for video generation
3. **Add Database:** Store generation history
4. **Add CDN:** Serve videos via CDN

---

## 🎯 Next Steps After Deployment

1. **Test All Models**
   - Try each model (runway, hailuo, cogvideox, etc.)
   - Test different prompts
   - Verify video quality

2. **Share Your App**
   - Share the Vercel URL
   - Add to your portfolio
   - Share on social media

3. **Monitor Usage**
   - Check Vercel Analytics
   - Monitor Replicate costs
   - Track popular models

4. **Iterate**
   - Add more features
   - Improve UI
   - Add user accounts

---

## 📝 Deployment Checklist

Before deploying:
- [x] API functions created (`/api/*.js`)
- [x] package.json with dependencies
- [x] Frontend updated to use `/api` endpoints
- [x] .gitignore excludes sensitive files
- [x] All changes pushed to GitHub
- [ ] Replicate API token ready
- [ ] Vercel account created
- [ ] Project imported to Vercel
- [ ] Environment variable added
- [ ] Deployment successful
- [ ] Test video generation works

---

## 🎉 You're Ready!

Your project is fully prepared for Vercel deployment with:
- ✅ 5 AI models (up to 10s videos)
- ✅ Beautiful animated UI
- ✅ Serverless architecture
- ✅ Complete documentation
- ✅ GitHub repository

**Just deploy and start generating videos! 🚀✨**

---

## 📞 Support

If you encounter issues:
1. Check this guide's troubleshooting section
2. Review Vercel logs in Dashboard
3. Check GitHub Issues
4. Vercel Discord: https://vercel.com/discord

**Your deployment URL will be:**
`https://video-ai-[random].vercel.app`

(You can customize this in Vercel settings)