Fix API URL configuration pour production

Problème: Le frontend utilisait localhost:8001 au lieu de l'URL de production
car NEXT_PUBLIC_API_URL était évalué au build time et non au runtime.

Changements:
1. Frontend (api.ts):
   - Remplace apiClient statique par getApiClient() dynamique
   - Chaque appel crée une instance axios avec l'URL runtime
   - getStreamUrl/getDownloadUrl utilisent getApiUrl() au lieu de API_BASE_URL
   - Supprime l'export default apiClient (non utilisé)

2. Docker Compose:
   - Configure NEXT_PUBLIC_API_URL=https://api.audioclassifier.benoitsz.com
   - Simplifie la config (retire le fallback)

Le runtime config (window.__RUNTIME_CONFIG__) fonctionne maintenant correctement
car il est évalué à chaque appel API côté client.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

docker-compose.yml

@@ -41,9 +41,7 @@ services:
     image: git.benoitsz.com/benoit/audio-classifier-frontend:dev
     container_name: audio_classifier_ui
     environment:
-      # In production, set NEXT_PUBLIC_API_URL to your server's public URL
+      NEXT_PUBLIC_API_URL: https://api.audioclassifier.benoitsz.com
-      # Example: NEXT_PUBLIC_API_URL=https://yourserver.com:8001
-      NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:-http://localhost:8001}
     ports:
       - "3000:3000"
     depends_on:

frontend/lib/api.ts

@@ -22,28 +22,29 @@ function getApiUrl(): string {
   return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
 }
 
-const API_BASE_URL = getApiUrl()
+// Create axios instance dynamically to use runtime config
-
+function getApiClient() {
-const apiClient = axios.create({
+  return axios.create({
-  baseURL: API_BASE_URL,
+    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
@@ -51,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
@@ -59,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
@@ -67,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
@@ -98,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