Audio-Classifier/frontend

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

# 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

# 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

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 :

console.log(window.__RUNTIME_CONFIG__)

Vérifier la config dans le container

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