Upload main.js

static/js/main.js

@@ -149,7 +149,7 @@ document.addEventListener('DOMContentLoaded', function() {
         setLoadingState(true, true);
         
         try {
-            // Call API to generate podcast
+            // Call API to start podcast generation in the background
             const response = await fetch('/generate-podcast', {
                 method: 'POST',
                 headers: {
@@ -158,74 +158,67 @@ document.addEventListener('DOMContentLoaded', function() {
                 body: JSON.stringify(scenario)
             });
             
-            // Setup progress event handling
-            const reader = response.body.getReader();
-            const contentLength = +response.headers.get('Content-Length') || 0;
-            
-            // Process the stream
-            let receivedLength = 0;
-            let jsonData = '';
-            
-            // Monitor the generation progress
-            const progressMonitor = setInterval(() => {
-                fetch('/generation-progress')
-                    .then(res => res.json())
-                    .then(progress => {
-                        if (progress.status === 'in_progress') {
-                            updateProgress(progress.current, progress.total, progress.message);
-                        }
-                    })
-                    .catch(err => console.error('Error fetching progress:', err));
-            }, 1000);
-            
-            while (true) {
-                const { done, value } = await reader.read();
-                
-                if (done) {
-                    clearInterval(progressMonitor);
-                    break;
-                }
-                
-                receivedLength += value.length;
-                const chunk = new TextDecoder().decode(value);
-                jsonData += chunk;
-                
-                // Update progress if we have content length
-                if (contentLength) {
-                    const percentComplete = Math.round((receivedLength / contentLength) * 100);
-                    updateProgress(percentComplete, 100, 'Réception des données...');
-                }
-            }
-            
-            // Parse the response
-            const data = JSON.parse(jsonData);
+            const data = await response.json();
             
             if (!response.ok) {
-                throw new Error(data.error || 'Échec de génération du podcast');
+                throw new Error(data.error || 'Échec de démarrage de la génération du podcast');
             }
             
-            // Process successful response
-            currentAudioUrl = data.audioUrl;
-            currentAudioFilename = currentAudioUrl.split('/').pop();
-            
-            // Setup audio player
-            audioPlayer.src = currentAudioUrl;
-            audioPlayer.load();
-            
-            // Show audio card
-            audioCard.classList.remove('d-none');
-            audioCard.classList.add('fade-in');
-            
-            // Auto-play the audio
-            try {
-                await audioPlayer.play();
-            } catch (playError) {
-                console.log('Lecture automatique empêchée par le navigateur.', playError);
-            }
+            // Start polling for podcast status
+            const statusPoller = setInterval(async () => {
+                try {
+                    const statusResponse = await fetch('/podcast-status');
+                    const statusData = await statusResponse.json();
+                    
+                    if (statusData.status === 'in_progress') {
+                        // Update progress bar
+                        updateProgress(
+                            statusData.current, 
+                            statusData.total, 
+                            statusData.message || 'Génération en cours...'
+                        );
+                    } else if (statusData.status === 'complete') {
+                        // Podcast is complete
+                        clearInterval(statusPoller);
+                        
+                        // Process successful response
+                        if (statusData.audioUrl) {
+                            currentAudioUrl = statusData.audioUrl;
+                            currentAudioFilename = currentAudioUrl.split('/').pop();
+                            
+                            // Setup audio player
+                            audioPlayer.src = currentAudioUrl;
+                            audioPlayer.load();
+                            
+                            // Show audio card
+                            audioCard.classList.remove('d-none');
+                            audioCard.classList.add('fade-in');
+                            
+                            // Auto-play the audio
+                            try {
+                                await audioPlayer.play();
+                            } catch (playError) {
+                                console.log('Lecture automatique empêchée par le navigateur.', playError);
+                            }
+                            
+                            // Turn off loading state
+                            setLoadingState(false);
+                        } else {
+                            throw new Error('Podcast généré mais URL audio manquante');
+                        }
+                    } else if (statusData.status === 'error' || statusData.message.startsWith('Erreur')) {
+                        // Error occurred
+                        clearInterval(statusPoller);
+                        throw new Error(statusData.message || 'Erreur pendant la génération du podcast');
+                    }
+                } catch (pollError) {
+                    clearInterval(statusPoller);
+                    throw pollError;
+                }
+            }, 1000);
             
         } catch (error) {
             showError(error.message || 'Une erreur inattendue est survenue. Veuillez réessayer.');
-        } finally {
             setLoadingState(false);
         }
     });