API_AUTO_DETECTION.md

# ✨ API Auto-Detection System

## Cómo Funciona

El frontend detecta automáticamente dónde está alojado y conecta al backend correcto:

```
┌─────────────────────────────────────────────────────────────┐
│                   FRONTEND ALOJADO EN                       │
└─────────────────────────────────────────────────────────────┘
                              │
                ┌─────────────┼─────────────┐
                │             │             │
                ▼             ▼             ▼
         LOCALHOST      HUGGING FACE    VERCEL/GITHUB
        (Desarrollo)      SPACES       (Producción)
              │             │             │
              ▼             ▼             ▼
        localhost:8000   Auto-detect    Configurable
```

## 📋 Matriz de Configuración

| Plataforma | Frontend URL | Backend URL | Auto-Detect | Config |
|-----------|--------------|-------------|-------------|--------|
| **Local Dev** | `localhost:3000` | `localhost:8000` | ✅ Automático | `.env.local` |
| **HF Spaces** | `username-andesai-frontend.hf.space` | `username-andesai-backend.hf.space` | ✅ Automático | Sin config |
| **Vercel** | `andesai.vercel.app` | `andesai-api.vercel.app` | ✅ Automático | Sin config |
| **GitHub Pages** | `username.github.io/andesai` | URL externa (Fly.io) | ⚙️ Manual | `.env.production` |

## 🔍 Cómo se Detecta (Orden de Prioridad)

```javascript
1. NEXT_PUBLIC_API_BASE env var explícita
   ↓ (Si no existe)
2. ¿Estoy en huggingface.co?
   → Auto-generar: https://{spaceName}-backend.hf.space
   ↓ (Si no)
3. ¿Estoy en vercel.app?
   → Auto-generar: https://{hostname-reemplazar-andesai-api}
   ↓ (Si no)
4. ¿Estoy en github.io o github.dev?
   → Usar env var REACT_APP_API_BASE o fallback a fly.dev
   ↓ (Si no)
5. ¿Estoy en localhost?
   → http://localhost:8000
```

## 🚀 Para tu Hackathon

### ✅ Opción 1: Hugging Face Spaces (SIN CONFIG)

```
1. Creas 2 spaces: andesai-frontend, andesai-backend
2. Subes Dockerfiles
3. Agargas variables de entorno en backend
4. ¡LISTO! Frontend auto-detecta backend
5. URLs finales compartidas con jurado
```

**NO NECESITAS configurar URLs manualmente.**

### ⚙️ Opción 2: GitHub + Fly.io (CON CONFIG)

```
1. Deploy backend a Fly.io → https://andesai-backend.fly.dev
2. Configuras .env.production:
   NEXT_PUBLIC_API_BASE=https://andesai-backend.fly.dev
3. Deploy frontend a GitHub Pages
4. ¡LISTO!
```

**NECESITAS configurar la URL del backend.**

## 📝 Archivos de Configuración

```
frontend/
├── .env.local          ← DEV: http://localhost:8000
├── .env.production     ← PROD: vacío (auto-detect) o URL explícita
├── .env.huggingface    ← HF: vacío (auto-detect)
└── lib/api.ts          ← Contiene la lógica de auto-detect
```

## 🎯 Mi Recomendación para Hackathon

**Usa Hugging Face Spaces:**

1. Menos configuración
2. Todo funciona automáticamente
3. Muy fácil de compartir
4. URL profesional
5. Free tier generoso

**Pasos:**
```bash
1. git push al repo (tu GitHub)
2. Creas 2 Spaces en HF
3. Conectas repo → HF Space (webhook)
4. Ambos deployan automáticamente
5. ¡Listo! Funciona sin tocar nada
```

## 🔗 Resultado Final

```
GitHub Repo
└── Conectado a HF via Webhooks
    ├── andesai-frontend space → https://user-andesai-frontend.hf.space
    └── andesai-backend space → https://user-andesai-backend.hf.space
        
Frontend auto-detecta:
"Estoy en huggingface.co" → Conecta a backend en HF ✨
```

---

## ⚡ TL;DR

**Lo que cambié:**
- ❌ Antes: hardcoded `localhost:8000`
- ✅ Ahora: auto-detecta según plataforma

**Para ti:**
- ✅ Local: No cambies nada, usa `http://localhost:8000`
- ✅ HF Spaces: No configures nada, funciona automático
- ✅ Otra plataforma: Configura NEXT_PUBLIC_API_BASE si es necesario

**No te afecta la hackathon**, solo **mejora** la portabilidad.