Upload main.js

static/js/main.js

@@ -0,0 +1,308 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const ttsForm = document.getElementById('ttsForm');
+    const podcastForm = document.getElementById('podcastForm');
+    const textInput = document.getElementById('textInput');
+    const scenarioInput = document.getElementById('scenarioInput');
+    const voiceSelect = document.getElementById('voiceSelect');
+    const generateBtn = document.getElementById('generateBtn');
+    const generatePodcastBtn = document.getElementById('generatePodcastBtn');
+    const audioCard = document.getElementById('audioCard');
+    const audioPlayer = document.getElementById('audioPlayer');
+    const downloadBtn = document.getElementById('downloadBtn');
+    const newGenerationBtn = document.getElementById('newGenerationBtn');
+    const loadingIndicator = document.getElementById('loadingIndicator');
+    const progressBar = document.getElementById('progressBar');
+    const progressBarInner = progressBar.querySelector('.progress-bar');
+    const progressText = document.getElementById('progressText');
+    const errorAlert = document.getElementById('errorAlert');
+    const errorMessage = document.getElementById('errorMessage');
+
+    // Current audio file information
+    let currentAudioUrl = null;
+    let currentAudioFilename = null;
+
+    // Populate the example scenario
+    const exampleScenario = {
+        "title": "Le management participatif",
+        "language": "fr-FR",
+        "characters": [
+            {
+                "name": "Manager",
+                "voice": "Kore",
+                "text": "Bonjour Sophie. J'aimerais avoir ton avis sur le nouveau planning que nous voulons mettre en place."
+            },
+            {
+                "name": "Sophie",
+                "voice": "Puck",
+                "text": "Bonjour ! Merci de me demander. Je pense que ce nouveau planning pourrait être bénéfique, mais nous devons ajuster les horaires de l'équipe technique."
+            },
+            {
+                "name": "Manager",
+                "voice": "Kore",
+                "text": "Bonne remarque. Peux-tu organiser une réunion avec eux pour en discuter ?"
+            },
+            {
+                "name": "Sophie",
+                "voice": "Puck",
+                "text": "Avec plaisir. Je les réunis demain matin."
+            }
+        ]
+    };
+    
+    scenarioInput.value = JSON.stringify(exampleScenario, null, 2);
+
+    // Form submission handler for simple TTS
+    ttsForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        const text = textInput.value.trim();
+        const voice = voiceSelect.value;
+        
+        // Validation
+        if (!text) {
+            showError('Veuillez entrer du texte à convertir en parole.');
+            return;
+        }
+        
+        // Show loading state
+        setLoadingState(true);
+        
+        try {
+            // Call API to generate speech
+            const response = await fetch('/generate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    text: text,
+                    voice: voice
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (!response.ok) {
+                throw new Error(data.error || 'Échec de génération de la parole');
+            }
+            
+            // 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);
+            }
+            
+        } catch (error) {
+            showError(error.message || 'Une erreur inattendue est survenue. Veuillez réessayer.');
+        } finally {
+            setLoadingState(false);
+        }
+    });
+
+    // Form submission handler for podcast generation
+    podcastForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        let scenarioText = scenarioInput.value.trim();
+        
+        // Validation
+        if (!scenarioText) {
+            showError('Veuillez entrer un scénario JSON.');
+            return;
+        }
+        
+        let scenario;
+        try {
+            scenario = JSON.parse(scenarioText);
+            
+            // Additional validation for required fields
+            if (!scenario.characters || !Array.isArray(scenario.characters) || scenario.characters.length === 0) {
+                throw new Error('Le scénario doit contenir un tableau "characters" avec au moins un personnage.');
+            }
+            
+            for (const character of scenario.characters) {
+                if (!character.name || !character.voice || !character.text) {
+                    throw new Error('Chaque personnage doit avoir un nom, une voix et du texte.');
+                }
+            }
+            
+        } catch (error) {
+            showError(`Erreur dans le format JSON: ${error.message}`);
+            return;
+        }
+        
+        // Show loading state with progress bar
+        setLoadingState(true, true);
+        
+        try {
+            // Call API to generate podcast
+            const response = await fetch('/generate-podcast', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                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);
+            
+            if (!response.ok) {
+                throw new Error(data.error || 'Échec de 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);
+            }
+            
+        } catch (error) {
+            showError(error.message || 'Une erreur inattendue est survenue. Veuillez réessayer.');
+        } finally {
+            setLoadingState(false);
+        }
+    });
+
+    // Download button handler
+    downloadBtn.addEventListener('click', function() {
+        if (currentAudioUrl) {
+            const downloadLink = document.createElement('a');
+            downloadLink.href = `/download/${currentAudioFilename}`;
+            downloadLink.download = 'gemini_podcast.wav';
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+        }
+    });
+
+    // New generation button handler
+    newGenerationBtn.addEventListener('click', function() {
+        // Reset UI for a new generation
+        audioCard.classList.add('d-none');
+        errorAlert.classList.add('d-none');
+        
+        // Check which tab is currently active
+        const activeTabPane = document.querySelector('.tab-pane.active');
+        if (activeTabPane.id === 'simple-tts') {
+            textInput.focus();
+        } else {
+            scenarioInput.focus();
+        }
+    });
+
+    // Helper function to show error messages
+    function showError(message) {
+        errorMessage.textContent = message;
+        errorAlert.classList.remove('d-none');
+        
+        // Auto-hide error after 8 seconds
+        setTimeout(() => {
+            errorAlert.classList.add('d-none');
+        }, 8000);
+    }
+
+    // Helper function to set loading state
+    function setLoadingState(isLoading, withProgress = false) {
+        if (isLoading) {
+            generateBtn.disabled = true;
+            generatePodcastBtn.disabled = true;
+            loadingIndicator.classList.remove('d-none');
+            errorAlert.classList.add('d-none');
+            
+            if (withProgress) {
+                progressBar.classList.remove('d-none');
+                progressText.classList.remove('d-none');
+                updateProgress(0, 100, 'Préparation du podcast...');
+            } else {
+                progressBar.classList.add('d-none');
+                progressText.classList.add('d-none');
+            }
+        } else {
+            generateBtn.disabled = false;
+            generatePodcastBtn.disabled = false;
+            loadingIndicator.classList.add('d-none');
+            progressBar.classList.add('d-none');
+            progressText.classList.add('d-none');
+        }
+    }
+
+    // Helper function to update progress bar
+    function updateProgress(current, total, message) {
+        const percentage = Math.min(100, Math.max(0, Math.round((current / total) * 100)));
+        progressBarInner.style.width = `${percentage}%`;
+        progressBarInner.setAttribute('aria-valuenow', percentage);
+        progressText.textContent = message || `Progression: ${percentage}%`;
+    }
+
+    // Add event listener for when audio playback is complete
+    audioPlayer.addEventListener('ended', function() {
+        console.log('Audio playback completed');
+    });
+});