# Frontend - Audio Classifier

Frontend Next.js pour Audio Classifier avec configuration runtime.

## Configuration Runtime

Le frontend utilise un système de **configuration runtime** qui permet de changer l'URL de l'API sans rebuilder l'image Docker.

### Comment ça fonctionne

1. Au démarrage du container, le script `generate-config.sh` génère un fichier `/app/public/config.js`
2. Ce fichier contient l'URL de l'API basée sur la variable `NEXT_PUBLIC_API_URL`
3. Le fichier est chargé dans le navigateur via `<Script src="/config.js">`
4. Le code API lit la configuration depuis `window.__RUNTIME_CONFIG__.API_URL`

### Développement Local

```bash
# Installer les dépendances
npm install

# Créer un fichier .env.local
echo "NEXT_PUBLIC_API_URL=http://localhost:8001" > .env.local

# Lancer en mode dev
npm run dev
```

### Production avec Docker

```bash
# Build l'image
docker build -t audio-classifier-frontend -f frontend/Dockerfile .

# Lancer avec une URL personnalisée
docker run -p 3000:3000 \
  -e NEXT_PUBLIC_API_URL=https://mon-serveur.com:8001 \
  audio-classifier-frontend
```

### Docker Compose

```yaml
frontend:
  image: audio-classifier-frontend
  environment:
    NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:-http://localhost:8001}
  ports:
    - "3000:3000"
```

## Structure

```
frontend/
├── app/                    # Pages Next.js (App Router)
│   ├── layout.tsx         # Layout principal (charge config.js)
│   └── page.tsx           # Page d'accueil
├── components/            # Composants React
├── lib/                   # Utilitaires
│   ├── api.ts            # Client API (lit la config runtime)
│   └── types.ts          # Types TypeScript
├── public/               # Fichiers statiques
│   └── config.js         # Configuration runtime (généré au démarrage)
├── generate-config.sh    # Script de génération de config
└── Dockerfile            # Image Docker de production
```

## Variables d'Environnement

- `NEXT_PUBLIC_API_URL` : URL de l'API backend (ex: `https://api.example.com:8001`)

## Troubleshooting

### L'API n'est pas accessible

Vérifiez que :
1. La variable `NEXT_PUBLIC_API_URL` est correctement définie
2. Le fichier `/app/public/config.js` existe dans le container
3. Le navigateur peut accéder à l'URL de l'API (pas de CORS, firewall, etc.)

### Voir la configuration active

Ouvrez la console du navigateur et tapez :
```javascript
console.log(window.__RUNTIME_CONFIG__)
```

### Vérifier la config dans le container

```bash
docker exec audio_classifier_ui cat /app/public/config.js
```