Actualiser .gitea/workflows/docker.yml

Remise en état build backend

.claude/settings.local.json

@@ -10,7 +10,8 @@
       "Bash(curl:*)",
       "Bash(docker logs:*)",
       "Bash(docker exec:*)",
-      "Bash(ls:*)"
+      "Bash(ls:*)",
+      "Bash(docker build:*)"
     ]
   }
 }

.env.example

@@ -5,7 +5,9 @@ POSTGRES_PASSWORD=audio_password
 POSTGRES_DB=audio_classifier
 
 # Backend API
-CORS_ORIGINS=http://localhost:3000,http://127.0.0.1:3000
+# Use "*" to allow all origins (recommended for development/local deployment)
+# Or specify comma-separated URLs for production: http://yourdomain.com,https://yourdomain.com
+CORS_ORIGINS=*
 API_HOST=0.0.0.0
 API_PORT=8000
 
@@ -16,4 +18,7 @@ ESSENTIA_MODELS_PATH=/app/models
 AUDIO_LIBRARY_PATH=/path/to/your/audio/library
 
 # Frontend
-NEXT_PUBLIC_API_URL=http://localhost:8000
+# API URL accessed by the browser (use port 8001 since backend is mapped to 8001)
+# For production on a remote server, set this to your server's public URL
+# Example: NEXT_PUBLIC_API_URL=http://yourserver.com:8001
+NEXT_PUBLIC_API_URL=http://localhost:8001

.gitea/workflows/docker.yml

@@ -0,0 +1,176 @@
+name: Build and Push Docker Images
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*.*.*'
+
+env:
+  REGISTRY: git.benoitsz.com
+  IMAGE_BACKEND: audio-classifier-backend
+  IMAGE_FRONTEND: audio-classifier-frontend
+
+jobs:
+  build-backend:
+    name: Build Backend Image
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Download Essentia models
+        run: |
+          mkdir -p backend/models
+          cd backend/models
+
+          # Download models from Essentia
+          echo "Downloading Essentia models..."
+
+          # Embedding model (18 MB)
+          curl -L -o discogs-effnet-bs64-1.pb \
+            https://essentia.upf.edu/models/feature-extractors/discogs-effnet/discogs-effnet-bs64-1.pb
+
+          # Genre classifier (2 MB)
+          curl -L -o genre_discogs400-discogs-effnet-1.pb \
+            https://essentia.upf.edu/models/classification-heads/genre_discogs400/genre_discogs400-discogs-effnet-1.pb
+
+          # Genre metadata
+          curl -L -o genre_discogs400-discogs-effnet-1.json \
+            https://essentia.upf.edu/models/classification-heads/genre_discogs400/genre_discogs400-discogs-effnet-1.json
+
+          # Mood classifier (2.7 MB)
+          curl -L -o mtg_jamendo_moodtheme-discogs-effnet-1.pb \
+            https://essentia.upf.edu/models/classification-heads/mtg_jamendo_moodtheme/mtg_jamendo_moodtheme-discogs-effnet-1.pb
+
+          # Instrument classifier (2.6 MB)
+          curl -L -o mtg_jamendo_instrument-discogs-effnet-1.pb \
+            https://essentia.upf.edu/models/classification-heads/mtg_jamendo_instrument/mtg_jamendo_instrument-discogs-effnet-1.pb
+
+          # Genre classifier alternative (2.7 MB)
+          curl -L -o mtg_jamendo_genre-discogs-effnet-1.pb \
+            https://essentia.upf.edu/models/classification-heads/mtg_jamendo_genre/mtg_jamendo_genre-discogs-effnet-1.pb
+
+          ls -lh
+          echo "Models downloaded successfully!"
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Determine version
+        id: version
+        run: |
+          if [[ "${{ gitea.ref }}" == refs/tags/v* ]]; then
+            echo "VERSION=${GITEA_REF#refs/tags/}" >> $GITHUB_OUTPUT
+          else
+            echo "VERSION=dev-$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ gitea.repository_owner }}/${{ env.IMAGE_BACKEND }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=raw,value=latest,enable=${{ startsWith(gitea.ref, 'refs/tags/v') }}
+            type=raw,value=dev,enable=${{ gitea.ref == 'refs/heads/main' }}
+            type=sha,prefix=dev-,format=short,enable=${{ gitea.ref == 'refs/heads/main' }}
+
+      - name: Build and push backend
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./backend/Dockerfile
+          push: true
+          build-args: |
+            VERSION=${{ steps.version.outputs.VERSION }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ gitea.repository_owner }}/${{ env.IMAGE_BACKEND }}:buildcache
+          cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ gitea.repository_owner }}/${{ env.IMAGE_BACKEND }}:buildcache,mode=max
+
+  build-frontend:
+    name: Build Frontend Image
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Download Essentia models (for context)
+        run: |
+          mkdir -p backend/models
+          cd backend/models
+
+          # Download models (needed because frontend build context is root)
+          curl -L -o discogs-effnet-bs64-1.pb \
+            https://essentia.upf.edu/models/feature-extractors/discogs-effnet/discogs-effnet-bs64-1.pb
+          curl -L -o genre_discogs400-discogs-effnet-1.pb \
+            https://essentia.upf.edu/models/classification-heads/genre_discogs400/genre_discogs400-discogs-effnet-1.pb
+          curl -L -o genre_discogs400-discogs-effnet-1.json \
+            https://essentia.upf.edu/models/classification-heads/genre_discogs400/genre_discogs400-discogs-effnet-1.json
+          curl -L -o mtg_jamendo_moodtheme-discogs-effnet-1.pb \
+            https://essentia.upf.edu/models/classification-heads/mtg_jamendo_moodtheme/mtg_jamendo_moodtheme-discogs-effnet-1.pb
+          curl -L -o mtg_jamendo_instrument-discogs-effnet-1.pb \
+            https://essentia.upf.edu/models/classification-heads/mtg_jamendo_instrument/mtg_jamendo_instrument-discogs-effnet-1.pb
+          curl -L -o mtg_jamendo_genre-discogs-effnet-1.pb \
+            https://essentia.upf.edu/models/classification-heads/mtg_jamendo_genre/mtg_jamendo_genre-discogs-effnet-1.pb
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Determine version
+        id: version
+        run: |
+          if [[ "${{ gitea.ref }}" == refs/tags/v* ]]; then
+            echo "VERSION=${GITEA_REF#refs/tags/}" >> $GITHUB_OUTPUT
+          else
+            echo "VERSION=dev-$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ gitea.repository_owner }}/${{ env.IMAGE_FRONTEND }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=raw,value=latest,enable=${{ startsWith(gitea.ref, 'refs/tags/v') }}
+            type=raw,value=dev,enable=${{ gitea.ref == 'refs/heads/main' }}
+            type=sha,prefix=dev-,format=short,enable=${{ gitea.ref == 'refs/heads/main' }}
+
+      - name: Build and push frontend
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./frontend/Dockerfile
+          push: true
+          build-args: |
+            VERSION=${{ steps.version.outputs.VERSION }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ gitea.repository_owner }}/${{ env.IMAGE_FRONTEND }}:buildcache
+          cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ gitea.repository_owner }}/${{ env.IMAGE_FRONTEND }}:buildcache,mode=max

DEPLOYMENT.md

@@ -14,7 +14,7 @@ Le système est **100% autonome** - aucune action manuelle requise ! Les modèle
 
 1. **Cloner le projet** :
 ```bash
-git clone <votre-repo>
+git clone https://git.benoitsz.com/benoit/Audio-Classifier.git
 cd Audio-Classifier
 ```
 
@@ -36,6 +36,8 @@ docker-compose up -d
 
 C'est tout ! 🎉
 
+**Note** : Les images Docker sont automatiquement téléchargées depuis git.benoitsz.com. Aucun build nécessaire !
+
 ### Premier Scan
 
 1. Ouvrir http://localhost:3000
@@ -202,13 +204,20 @@ cd Audio-Classifier
 # Chemin vers musique
 AUDIO_LIBRARY_PATH=/mnt/musique
 
-# Domaine public
-CORS_ORIGINS=http://votre-domaine.com,https://votre-domaine.com
+# URL publique de l'API (IMPORTANT pour le frontend)
+# Cette URL est utilisée par le navigateur pour accéder à l'API
+# Remplacer par votre domaine ou IP publique + port 8001
+NEXT_PUBLIC_API_URL=https://votre-serveur.com:8001
+
+# Domaine public pour CORS (doit inclure l'URL du frontend)
+CORS_ORIGINS=https://votre-domaine.com,https://votre-domaine.com:3000
 
 # Credentials BDD (sécurisés !)
 POSTGRES_PASSWORD=motdepasse_fort_aleatoire
 ```
 
+**Important :** Le frontend utilise maintenant une configuration **runtime**, ce qui signifie que vous pouvez changer `NEXT_PUBLIC_API_URL` dans le fichier `.env` et redémarrer les containers sans avoir à rebuilder les images.
+
 4. **Démarrer** :
 ```bash
 docker-compose up -d

README.md

@@ -41,8 +41,8 @@ Outil de classification audio automatique capable d'indexer et analyser des bibl
 
 ```bash
 # 1. Cloner le projet
-git clone <repo>
-cd audio-classifier
+git clone https://git.benoitsz.com/benoit/Audio-Classifier.git
+cd Audio-Classifier
 
 # 2. Configurer le chemin audio (optionnel)
 echo "AUDIO_LIBRARY_PATH=/chemin/vers/votre/musique" > .env
@@ -53,6 +53,8 @@ docker-compose up -d
 
 **C'est tout !** 🎉
 
+Les images Docker sont automatiquement téléchargées depuis le registry Gitea.
+
 - Frontend : http://localhost:3000
 - API : http://localhost:8001
 - API Docs : http://localhost:8001/docs
@@ -66,13 +68,26 @@ docker-compose up -d
 
 ### ✨ Particularités
 
-- **Aucun téléchargement manuel** : Les modèles Essentia (28 MB) sont inclus dans l'image Docker
+- **Images pré-construites** : Téléchargées automatiquement depuis git.benoitsz.com
+- **Modèles inclus** : Les modèles Essentia (28 MB) sont intégrés dans l'image
 - **Aucune configuration** : Tout fonctionne out-of-the-box
 - **Transcodage automatique** : MP3 128kbps créés pour streaming rapide
 - **Waveforms pré-calculées** : Chargement instantané
 
 📖 **Documentation complète** : Voir [DEPLOYMENT.md](DEPLOYMENT.md)
 
+### 🛠 Build local (développement)
+
+Si vous voulez builder les images localement, les modèles Essentia doivent être présents dans `backend/models/` (28 MB).
+
+```bash
+# Build avec docker-compose
+docker-compose -f docker-compose.build.yml build
+docker-compose -f docker-compose.build.yml up -d
+```
+
+**Note** : Les modèles Essentia (`.pb`, 28 MB) ne sont pas versionnés dans Git. Le workflow CI/CD les télécharge automatiquement depuis essentia.upf.edu pendant le build.
+
 ## 📖 Utilisation
 
 ### Scanner un dossier

backend/Dockerfile

@@ -32,7 +32,7 @@ WORKDIR /app
 RUN pip install --no-cache-dir --upgrade pip setuptools wheel
 
 # Copy requirements
-COPY requirements.txt .
+COPY backend/requirements.txt .
 
 # Install Python dependencies in stages for better caching
 # Using versions compatible with Python 3.9
@@ -45,11 +45,11 @@ RUN pip install --no-cache-dir essentia-tensorflow
 RUN pip install --no-cache-dir -r requirements.txt
 
 # Copy application code
-COPY src/ ./src/
-COPY alembic.ini .
+COPY backend/src/ ./src/
+COPY backend/alembic.ini .
 
-# Copy Essentia models into image
-COPY models/ ./models/
+# Copy Essentia models into image (28 MB total)
+COPY backend/models/ ./models/
 RUN ls -lh /app/models
 
 # Expose port

backend/models/README.md

@@ -0,0 +1,52 @@
+# Essentia Models
+
+Ce dossier contient les modèles pré-entraînés Essentia-TensorFlow pour la classification audio (28 MB total).
+
+## Modèles requis
+
+Les fichiers suivants sont nécessaires pour le fonctionnement de l'application :
+
+1. **discogs-effnet-bs64-1.pb** (18 MB) - Embedding model
+2. **genre_discogs400-discogs-effnet-1.pb** (2 MB) - Genre classifier
+3. **genre_discogs400-discogs-effnet-1.json** (15 KB) - Genre metadata
+4. **mtg_jamendo_moodtheme-discogs-effnet-1.pb** (2.7 MB) - Mood classifier
+5. **mtg_jamendo_instrument-discogs-effnet-1.pb** (2.6 MB) - Instrument classifier
+6. **mtg_jamendo_genre-discogs-effnet-1.pb** (2.7 MB) - Alternative genre classifier
+
+## Téléchargement automatique
+
+**Pour les utilisateurs** : Les modèles sont déjà inclus dans les images Docker depuis le registry `git.benoitsz.com`. Aucune action nécessaire.
+
+**Pour le CI/CD** : Les modèles sont téléchargés automatiquement depuis essentia.upf.edu pendant le build (voir `.gitea/workflows/docker.yml`).
+
+**Pour le développement local** : Si vous avez besoin de builder localement, vous devez avoir les modèles dans ce dossier. Ils ne sont pas versionnés dans Git car ils pèsent 28 MB.
+
+### Téléchargement manuel (si nécessaire)
+
+```bash
+cd backend/models
+
+# Embedding model (18 MB)
+curl -L -O https://essentia.upf.edu/models/feature-extractors/discogs-effnet/discogs-effnet-bs64-1.pb
+
+# Genre classifier (2 MB)
+curl -L -O https://essentia.upf.edu/models/classification-heads/genre_discogs400/genre_discogs400-discogs-effnet-1.pb
+curl -L -O https://essentia.upf.edu/models/classification-heads/genre_discogs400/genre_discogs400-discogs-effnet-1.json
+
+# Mood classifier (2.7 MB)
+curl -L -O https://essentia.upf.edu/models/classification-heads/mtg_jamendo_moodtheme/mtg_jamendo_moodtheme-discogs-effnet-1.pb
+
+# Instrument classifier (2.6 MB)
+curl -L -O https://essentia.upf.edu/models/classification-heads/mtg_jamendo_instrument/mtg_jamendo_instrument-discogs-effnet-1.pb
+
+# Alternative genre classifier (2.7 MB)
+curl -L -O https://essentia.upf.edu/models/classification-heads/mtg_jamendo_genre/mtg_jamendo_genre-discogs-effnet-1.pb
+```
+
+## Source
+
+Tous les modèles proviennent du projet Essentia : https://essentia.upf.edu/models/
+
+## Licence
+
+Ces modèles sont fournis par le Music Technology Group de l'Universitat Pompeu Fabra sous licence permissive pour usage académique et commercial.

backend/src/api/routes/library.py

@@ -41,6 +41,9 @@ def find_audio_files(directory: str) -> list[Path]:
         return []
 
     for root, dirs, files in os.walk(directory_path):
+        # Skip transcoded and waveforms directories
+        dirs[:] = [d for d in dirs if d not in ['transcoded', 'waveforms', '.transcoded', '.waveforms']]
+
         for file in files:
             file_path = Path(root) / file
             if file_path.suffix.lower() in AUDIO_EXTENSIONS:

backend/src/cli/scanner.py

@@ -46,6 +46,9 @@ def find_audio_files(directory: str) -> List[Path]:
     logger.info(f"Scanning directory: {directory}")
 
     for root, dirs, files in os.walk(directory_path):
+        # Skip transcoded and waveforms directories
+        dirs[:] = [d for d in dirs if d not in ['transcoded', 'waveforms', '.transcoded', '.waveforms']]
+
         for file in files:
             file_path = Path(root) / file
             if file_path.suffix.lower() in AUDIO_EXTENSIONS:

backend/src/utils/config.py

@@ -10,7 +10,8 @@ class Settings(BaseSettings):
     DATABASE_URL: str = "postgresql://audio_user:audio_password@localhost:5432/audio_classifier"
 
     # API Configuration
-    CORS_ORIGINS: str = "http://localhost:3000,http://127.0.0.1:3000"
+    # Comma-separated list of allowed origins, or use "*" to allow all
+    CORS_ORIGINS: str = "*"
     API_HOST: str = "0.0.0.0"
     API_PORT: int = 8000
 
@@ -33,7 +34,13 @@ class Settings(BaseSettings):
 
     @property
     def cors_origins_list(self) -> List[str]:
-        """Parse CORS origins string to list."""
+        """Parse CORS origins string to list.
+
+        If CORS_ORIGINS is "*", allow all origins.
+        Otherwise, parse comma-separated list.
+        """
+        if self.CORS_ORIGINS.strip() == "*":
+            return ["*"]
         return [origin.strip() for origin in self.CORS_ORIGINS.split(",")]
 
 

docker-compose.build.yml

@@ -0,0 +1,64 @@
+# Docker Compose pour build local (développement)
+# Usage: docker-compose -f docker-compose.build.yml build
+
+services:
+  postgres:
+    image: pgvector/pgvector:pg16
+    container_name: audio_classifier_db
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER:-audio_user}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-audio_password}
+      POSTGRES_DB: ${POSTGRES_DB:-audio_classifier}
+    ports:
+      - "5433:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+      - ./backend/init-db.sql:/docker-entrypoint-initdb.d/init-db.sql
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-audio_user}"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    restart: unless-stopped
+
+  backend:
+    build:
+      context: .
+      dockerfile: backend/Dockerfile
+    container_name: audio_classifier_api
+    depends_on:
+      postgres:
+        condition: service_healthy
+    environment:
+      DATABASE_URL: postgresql://${POSTGRES_USER:-audio_user}:${POSTGRES_PASSWORD:-audio_password}@postgres:5432/${POSTGRES_DB:-audio_classifier}
+      CORS_ORIGINS: ${CORS_ORIGINS:-*}
+      ANALYSIS_USE_CLAP: ${ANALYSIS_USE_CLAP:-false}
+      ANALYSIS_NUM_WORKERS: ${ANALYSIS_NUM_WORKERS:-4}
+      ESSENTIA_MODELS_PATH: /app/models
+    ports:
+      - "8001:8000"
+    volumes:
+      # Mount your audio library (read-write for transcoding and waveforms)
+      - ${AUDIO_LIBRARY_PATH:-./audio_samples}:/audio
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: .
+      dockerfile: frontend/Dockerfile
+      args:
+        NEXT_PUBLIC_API_URL: http://localhost:8001
+    container_name: audio_classifier_ui
+    environment:
+      # Use localhost:8001 because the browser (client-side) needs to access the API
+      # The backend is mapped to port 8001 on the host machine
+      NEXT_PUBLIC_API_URL: http://localhost:8001
+    ports:
+      - "3000:3000"
+    depends_on:
+      - backend
+    restart: unless-stopped
+
+volumes:
+  postgres_data:
+    driver: local

docker-compose.yml

@@ -19,14 +19,14 @@ services:
     restart: unless-stopped
 
   backend:
-    build: ./backend
+    image: git.benoitsz.com/benoit/audio-classifier-backend:dev
     container_name: audio_classifier_api
     depends_on:
       postgres:
         condition: service_healthy
     environment:
       DATABASE_URL: postgresql://${POSTGRES_USER:-audio_user}:${POSTGRES_PASSWORD:-audio_password}@postgres:5432/${POSTGRES_DB:-audio_classifier}
-      CORS_ORIGINS: ${CORS_ORIGINS:-http://localhost:3000}
+      CORS_ORIGINS: ${CORS_ORIGINS:-*}
       ANALYSIS_USE_CLAP: ${ANALYSIS_USE_CLAP:-false}
       ANALYSIS_NUM_WORKERS: ${ANALYSIS_NUM_WORKERS:-4}
       ESSENTIA_MODELS_PATH: /app/models
@@ -38,15 +38,10 @@ services:
     restart: unless-stopped
 
   frontend:
-    build:
-      context: ./frontend
-      args:
-        NEXT_PUBLIC_API_URL: http://localhost:8001
+    image: git.benoitsz.com/benoit/audio-classifier-frontend:dev
     container_name: audio_classifier_ui
     environment:
-      # Use localhost:8001 because the browser (client-side) needs to access the API
-      # The backend is mapped to port 8001 on the host machine
-      NEXT_PUBLIC_API_URL: http://localhost:8001
+      NEXT_PUBLIC_API_URL: https://api.audioclassifier.benoitsz.com
     ports:
       - "3000:3000"
     depends_on:

frontend/Dockerfile

@@ -4,23 +4,27 @@ FROM node:20-alpine
 WORKDIR /app
 
 # Copy package files
-COPY package*.json ./
+COPY frontend/package*.json ./
 
 # Install dependencies
 RUN npm ci
 
 # Copy application code
-COPY . .
+COPY frontend/ .
 
-# Build argument for API URL
+# Build argument for API URL (used for default build)
 ARG NEXT_PUBLIC_API_URL=http://localhost:8001
 ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
 
 # Build the application
 RUN npm run build
 
+# Copy runtime config generation script
+COPY frontend/generate-config.sh /app/generate-config.sh
+RUN chmod +x /app/generate-config.sh
+
 # Expose port
 EXPOSE 3000
 
-# Start the application
-CMD ["npm", "start"]
+# Generate runtime config and start the application
+CMD ["/bin/sh", "-c", "/app/generate-config.sh && npm start"]

frontend/Dockerfile.dev

@@ -0,0 +1,19 @@
+FROM node:20-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Debug: List files and Node.js version
+RUN ls -la && node --version && npm --version
+
+# Install dependencies with more verbose output
+RUN npm install --verbose
+
+# Expose port
+EXPOSE 3000
+
+# Start the development server
+CMD ["npm", "run", "dev"]

frontend/README.md

@@ -0,0 +1,93 @@
+# 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
+```

frontend/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import "./globals.css"
 import { QueryProvider } from "@/components/providers/QueryProvider"
+import Script from "next/script"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -17,6 +18,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>
+        <Script src="/config.js" strategy="beforeInteractive" />
+      </head>
       <body className={inter.className}>
         <QueryProvider>
           {children}

frontend/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useMemo } from "react"
 import { useQuery } from "@tanstack/react-query"
-import { getTracks } from "@/lib/api"
+import { getTracks, getApiUrl } from "@/lib/api"
 import type { FilterParams, Track } from "@/lib/types"
 import FilterPanel from "@/components/FilterPanel"
 import AudioPlayer from "@/components/AudioPlayer"
@@ -52,6 +52,7 @@ export default function Home() {
   const [filters, setFilters] = useState<FilterParams>({})
   const [page, setPage] = useState(0)
   const [currentTrack, setCurrentTrack] = useState<Track | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
   const [searchQuery, setSearchQuery] = useState("")
   const [isScanning, setIsScanning] = useState(false)
   const [scanStatus, setScanStatus] = useState<string>("")
@@ -89,7 +90,7 @@ export default function Home() {
       setIsScanning(true)
       setScanStatus("Démarrage du scan...")
 
-      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/library/scan`, {
+      const response = await fetch(`${getApiUrl()}/api/library/scan`, {
         method: 'POST',
       })
 
@@ -102,7 +103,7 @@ export default function Home() {
       // Poll scan status
       const pollInterval = setInterval(async () => {
         try {
-          const statusResponse = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/library/scan/status`)
+          const statusResponse = await fetch(`${getApiUrl()}/api/library/scan/status`)
           const status = await statusResponse.json()
 
           if (!status.is_scanning) {
@@ -233,10 +234,19 @@ export default function Home() {
                       <div className="flex items-center gap-4">
                         {/* Play button */}
                         <button
-                          onClick={() => setCurrentTrack(track)}
+                          onClick={() => {
+                            if (currentTrack?.id === track.id) {
+                              // Toggle play/pause for current track
+                              setIsPlaying(!isPlaying)
+                            } else {
+                              // Switch to new track and start playing
+                              setCurrentTrack(track)
+                              setIsPlaying(true)
+                            }
+                          }}
                           className="flex-shrink-0 w-12 h-12 flex items-center justify-center bg-orange-500 hover:bg-orange-600 rounded-full transition-colors shadow-sm"
                         >
-                          {currentTrack?.id === track.id ? (
+                          {currentTrack?.id === track.id && isPlaying ? (
                             <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                               <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                             </svg>
@@ -347,7 +357,11 @@ export default function Home() {
 
       {/* Fixed Audio Player at bottom */}
       <div className="fixed bottom-0 left-0 right-0 z-50">
-        <AudioPlayer track={currentTrack} />
+        <AudioPlayer
+          track={currentTrack}
+          isPlaying={isPlaying}
+          onPlayingChange={setIsPlaying}
+        />
       </div>
     </div>
   )

frontend/components/AudioPlayer.tsx

@@ -2,13 +2,15 @@
 
 import { useState, useRef, useEffect } from "react"
 import type { Track } from "@/lib/types"
+import { getApiUrl } from "@/lib/api"
 
 interface AudioPlayerProps {
   track: Track | null
+  isPlaying: boolean
+  onPlayingChange: (playing: boolean) => void
 }
 
-export default function AudioPlayer({ track }: AudioPlayerProps) {
-  const [isPlaying, setIsPlaying] = useState(false)
+export default function AudioPlayer({ track, isPlaying, onPlayingChange }: AudioPlayerProps) {
   const [currentTime, setCurrentTime] = useState(0)
   const [duration, setDuration] = useState(0)
   const [volume, setVolume] = useState(1)
@@ -22,7 +24,7 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
   // Load audio and waveform when track changes
   useEffect(() => {
     if (!track) {
-      setIsPlaying(false)
+      onPlayingChange(false)
       setCurrentTime(0)
       setWaveformPeaks([])
       return
@@ -33,13 +35,13 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
 
     if (audioRef.current) {
       audioRef.current.load()
-      // Autoplay when track loads
-      audioRef.current.play().then(() => {
-        setIsPlaying(true)
-      }).catch((error: unknown) => {
-        console.error("Autoplay failed:", error)
-        setIsPlaying(false)
-      })
+      // Autoplay when track loads if isPlaying is true
+      if (isPlaying) {
+        audioRef.current.play().catch((error: unknown) => {
+          console.error("Autoplay failed:", error)
+          onPlayingChange(false)
+        })
+      }
     }
   }, [track?.id])
 
@@ -54,7 +56,7 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
         setDuration(audio.duration)
       }
     }
-    const handleEnded = () => setIsPlaying(false)
+    const handleEnded = () => onPlayingChange(false)
 
     audio.addEventListener("timeupdate", updateTime)
     audio.addEventListener("loadedmetadata", updateDuration)
@@ -78,7 +80,7 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
     setIsLoadingWaveform(true)
     try {
       const response = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/api/audio/waveform/${trackId}`
+        `${getApiUrl()}/api/audio/waveform/${trackId}`
       )
       if (response.ok) {
         const data = await response.json()
@@ -91,15 +93,24 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
     }
   }
 
-  const togglePlay = () => {
-    if (!audioRef.current || !track) return
+  // Sync playing state with audio element
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
 
     if (isPlaying) {
-      audioRef.current.pause()
+      audio.play().catch((error: unknown) => {
+        console.error("Play failed:", error)
+        onPlayingChange(false)
+      })
     } else {
-      audioRef.current.play()
+      audio.pause()
     }
-    setIsPlaying(!isPlaying)
+  }, [isPlaying, onPlayingChange])
+
+  const togglePlay = () => {
+    if (!audioRef.current || !track) return
+    onPlayingChange(!isPlaying)
   }
 
   const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -151,7 +162,7 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
   return (
     <div className="bg-gray-50 border-t border-gray-300 shadow-lg" style={{ height: '80px' }}>
       {/* Hidden audio element */}
-      {track && <audio ref={audioRef} src={`${process.env.NEXT_PUBLIC_API_URL}/api/audio/stream/${track.id}`} />}
+      {track && <audio ref={audioRef} src={`${getApiUrl()}/api/audio/stream/${track.id}`} />}
 
       <div className="h-full flex items-center gap-3 px-4">
         {/* Play/Pause button */}
@@ -290,7 +301,7 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
         {/* Download button */}
         {track && (
           <a
-            href={`${process.env.NEXT_PUBLIC_API_URL}/api/audio/download/${track.id}`}
+            href={`${getApiUrl()}/api/audio/download/${track.id}`}
             download
             className="w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-900 transition-colors rounded hover:bg-gray-200 flex-shrink-0"
             aria-label="Download"

frontend/generate-config.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+# Generate runtime configuration file
+
+echo "Generating runtime configuration..."
+echo "API URL: ${NEXT_PUBLIC_API_URL:-http://localhost:8001}"
+
+cat > /app/public/config.js << EOF
+// Runtime configuration generated at container startup
+window.__RUNTIME_CONFIG__ = {
+  API_URL: '${NEXT_PUBLIC_API_URL:-http://localhost:8001}'
+};
+EOF
+
+echo "Configuration generated successfully!"
+cat /app/public/config.js

frontend/lib/api.ts

@@ -14,28 +14,37 @@ import type {
   FilterParams,
 } from './types'
 
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
+// Get API URL from runtime config (injected at container startup) or fallback to env var
+export function getApiUrl(): string {
+  if (typeof window !== 'undefined' && (window as any).__RUNTIME_CONFIG__) {
+    return (window as any).__RUNTIME_CONFIG__.API_URL
+  }
+  return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
+}
 
-const apiClient = axios.create({
-  baseURL: API_BASE_URL,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
+// Create axios instance dynamically to use runtime config
+function getApiClient() {
+  return axios.create({
+    baseURL: getApiUrl(),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+}
 
 // Tracks
 export async function getTracks(params: FilterParams & { skip?: number; limit?: number }): Promise<TracksResponse> {
-  const response = await apiClient.get('/api/tracks', { params })
+  const response = await getApiClient().get('/api/tracks', { params })
   return response.data
 }
 
 export async function getTrack(id: string): Promise<Track> {
-  const response = await apiClient.get(`/api/tracks/${id}`)
+  const response = await getApiClient().get(`/api/tracks/${id}`)
   return response.data
 }
 
 export async function deleteTrack(id: string): Promise<void> {
-  await apiClient.delete(`/api/tracks/${id}`)
+  await getApiClient().delete(`/api/tracks/${id}`)
 }
 
 // Search
@@ -43,7 +52,7 @@ export async function searchTracks(
   query: string,
   filters?: { genre?: string; mood?: string; limit?: number }
 ): Promise<SearchResponse> {
-  const response = await apiClient.get('/api/search', {
+  const response = await getApiClient().get('/api/search', {
     params: { q: query, ...filters },
   })
   return response.data
@@ -51,7 +60,7 @@ export async function searchTracks(
 
 // Similar
 export async function getSimilarTracks(id: string, limit: number = 10): Promise<SimilarTracksResponse> {
-  const response = await apiClient.get(`/api/tracks/${id}/similar`, {
+  const response = await getApiClient().get(`/api/tracks/${id}/similar`, {
     params: { limit },
   })
   return response.data
@@ -59,30 +68,30 @@ export async function getSimilarTracks(id: string, limit: number = 10): Promise<
 
 // Analysis
 export async function analyzeFolder(request: AnalyzeFolderRequest): Promise<{ job_id: string }> {
-  const response = await apiClient.post('/api/analyze/folder', request)
+  const response = await getApiClient().post('/api/analyze/folder', request)
   return response.data
 }
 
 export async function getAnalyzeStatus(jobId: string): Promise<JobStatus> {
-  const response = await apiClient.get(`/api/analyze/status/${jobId}`)
+  const response = await getApiClient().get(`/api/analyze/status/${jobId}`)
   return response.data
 }
 
 export async function deleteJob(jobId: string): Promise<void> {
-  await apiClient.delete(`/api/analyze/job/${jobId}`)
+  await getApiClient().delete(`/api/analyze/job/${jobId}`)
 }
 
 // Audio
 export function getStreamUrl(trackId: string): string {
-  return `${API_BASE_URL}/api/audio/stream/${trackId}`
+  return `${getApiUrl()}/api/audio/stream/${trackId}`
 }
 
 export function getDownloadUrl(trackId: string): string {
-  return `${API_BASE_URL}/api/audio/download/${trackId}`
+  return `${getApiUrl()}/api/audio/download/${trackId}`
 }
 
 export async function getWaveform(trackId: string, numPeaks: number = 800): Promise<WaveformData> {
-  const response = await apiClient.get(`/api/audio/waveform/${trackId}`, {
+  const response = await getApiClient().get(`/api/audio/waveform/${trackId}`, {
     params: { num_peaks: numPeaks },
   })
   return response.data
@@ -90,14 +99,12 @@ export async function getWaveform(trackId: string, numPeaks: number = 800): Prom
 
 // Stats
 export async function getStats(): Promise<Stats> {
-  const response = await apiClient.get('/api/stats')
+  const response = await getApiClient().get('/api/stats')
   return response.data
 }
 
 // Health
 export async function healthCheck(): Promise<{ status: string }> {
-  const response = await apiClient.get('/health')
+  const response = await getApiClient().get('/health')
   return response.data
 }
-
-export default apiClient

frontend/public/config.js

@@ -0,0 +1,4 @@
+// This file will be overwritten at container startup
+window.__RUNTIME_CONFIG__ = {
+  API_URL: 'http://localhost:8001'
+};