Update templates/index.html

templates/index.html

@@ -6,8 +6,6 @@
     <title>Synthétiseur AI Pro</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
         body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; }
@@ -93,7 +91,7 @@
                         </div>
 
                         <button type="submit" id="submitBtn" class="flex items-center justify-center w-full bg-blue-700 text-white font-bold py-3 px-6 rounded-xl hover:bg-blue-800 transition-all shadow-lg hover:shadow-blue-300 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none">
-                            <span id="btnText">Générer la synthèse</span>
+                            <span id="btnText">Lancer la synthèse</span>
                             <div id="btnSpinner" class="hidden animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent ml-3"></div>
                         </button>
                     </form>
@@ -112,12 +110,11 @@
                                 <span id="copyBtnText">Copier</span>
                             </button>
                             <button id="downloadBtn" class="w-full sm:w-auto flex items-center justify-center gap-2 bg-blue-100 text-blue-800 px-3 py-1.5 rounded-lg hover:bg-blue-200 transition-colors text-sm font-medium">
-                                <span id="downloadBtnSpinner" class="hidden animate-spin rounded-full h-4 w-4 border-2 border-blue-800 border-t-transparent"></span>
-                                <svg id="downloadBtnIcon" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
-                                <span id="downloadBtnText">Télécharger PDF</span>
+                                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
+                                <span>Télécharger PDF</span>
                             </button>
                         </div>
-                        <div id="summaryContentWrapper" class="bg-slate-50 p-4 rounded-lg">
+                        <div class="bg-slate-50 p-4 rounded-lg">
                            <div id="summaryContent" class="prose prose-slate max-w-none"></div>
                         </div>
                     </div>
@@ -134,15 +131,15 @@
             <div class="lg:col-span-2">
                 <div class="bg-white/80 backdrop-blur-sm border border-slate-200 rounded-2xl shadow-lg p-6 sticky top-8 fade-in-up" style="animation-delay: 200ms;">
                     <div class="flex justify-between items-center mb-4">
-                        <h2 class="text-xl font-bold text-gray-800">Historique</h2>
-                        <button id="clearHistory" class="text-red-600 hover:text-red-800 text-sm font-medium transition-colors">
+                        <h2 class="text-xl font-bold text-gray-800">Historique des Tâches</h2>
+                        <button id="clearHistoryBtn" class="text-sm font-medium text-red-600 hover:text-red-800 transition-colors disabled:text-red-300 disabled:cursor-not-allowed">
                             Tout effacer
                         </button>
                     </div>
-                    <div id="historyList" class="space-y-2 max-h-[600px] overflow-y-auto pr-2">
+                    <div id="historyList" class="space-y-3 max-h-[600px] overflow-y-auto pr-2">
                         <div id="historyEmptyState" class="text-center py-16">
                             <svg class="w-16 h-16 mx-auto text-slate-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0A2.25 2.25 0 013.75 7.5h16.5a2.25 2.25 0 012.25 2.25m-18.75 0h18.75c.621 0 1.125.504 1.125 1.125v.158c0 .53-.223.998-.586 1.328l-5.454 4.849a3.75 3.75 0 01-5.304 0L4.336 12.36a1.125 1.125 0 01-.586-1.328v-.158c0-.621.504-1.125 1.125-1.125z" /></svg>
-                            <p class="mt-4 text-slate-500 font-medium">Vos résumés apparaîtront ici.</p>
+                            <p class="mt-4 text-slate-500 font-medium">Vos tâches apparaîtront ici.</p>
                         </div>
                     </div>
                 </div>
@@ -151,8 +148,6 @@
     </div>
 
     <script>
-        const { jsPDF } = window.jspdf;
-
         // DOM Elements
         const uploadForm = document.getElementById('uploadForm');
         const fileInput = document.getElementById('fileInput');
@@ -169,41 +164,52 @@
         const resultCard = document.getElementById('resultCard');
         const resultFilename = document.getElementById('resultFilename');
         const summaryContent = document.getElementById('summaryContent');
-        const summaryContentWrapper = document.getElementById('summaryContentWrapper');
         const errorCard = document.getElementById('errorCard');
         const errorMessage = document.getElementById('errorMessage');
         const copyBtn = document.getElementById('copyBtn');
         const copyBtnText = document.getElementById('copyBtnText');
         const downloadBtn = document.getElementById('downloadBtn');
-        const downloadBtnText = document.getElementById('downloadBtnText');
-        const downloadBtnIcon = document.getElementById('downloadBtnIcon');
-        const downloadBtnSpinner = document.getElementById('downloadBtnSpinner');
         const historyList = document.getElementById('historyList');
         const historyEmptyState = document.getElementById('historyEmptyState');
-        const clearHistoryBtn = document.getElementById('clearHistory');
+        const clearHistoryBtn = document.getElementById('clearHistoryBtn');
         
-        let currentHistoryId = null;
+        let currentTaskId = null;
+        const taskPollers = {};
 
         // --- UI Helper Functions ---
         function showLoading(isLoading) {
             submitBtn.disabled = isLoading;
-            btnText.textContent = isLoading ? 'Génération en cours...' : 'Générer la synthèse';
+            btnText.textContent = isLoading ? 'Lancement...' : 'Lancer la synthèse';
             btnSpinner.classList.toggle('hidden', !isLoading);
         }
 
-        function displaySummary(item) {
-            summaryContent.innerHTML = marked.parse(item.summary);
-            resultFilename.textContent = item.filename;
-            currentHistoryId = item.id;
-            
-            errorCard.classList.add('hidden');
-            resultCard.classList.remove('hidden');
-            resultCard.classList.add('fade-in-up');
-            window.scrollTo({ top: resultCard.offsetTop - 80, behavior: 'smooth' });
+        function displayTaskResult(task) {
+            if (task.status === 'completed' && task.summary) {
+                summaryContent.innerHTML = marked.parse(task.summary);
+                resultFilename.textContent = task.filename;
+                currentTaskId = task.task_id;
+                
+                errorCard.classList.add('hidden');
+                resultCard.classList.remove('hidden');
+                resultCard.classList.add('fade-in-up');
+                window.scrollTo({ top: resultCard.offsetTop - 80, behavior: 'smooth' });
+            } else if (task.status === 'failed' && task.error) {
+                displayError(task.error);
+                resultCard.classList.add('hidden');
+            } else {
+                 resultCard.classList.add('hidden');
+                 errorCard.classList.add('hidden');
+            }
+        }
+
+        function displayError(message) {
+            errorMessage.textContent = message;
+            errorCard.classList.remove('hidden');
+            errorCard.classList.add('fade-in-up');
         }
         
-        function getFileIcon(filename, sizeClass = 'w-6 h-6') {
-            if (filename === 'Vidéo YouTube') {
+        function getFileIcon(filename, sizeClass = 'w-8 h-8') {
+            if (filename.toLowerCase().includes('youtube')) {
                 return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="${sizeClass} text-red-600"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg>`;
             }
             const extension = filename.split('.').pop().toLowerCase();
@@ -219,21 +225,155 @@
         
         function resetFileSelection() {
             fileInput.value = '';
-            fileInfo.classList.add('hidden'); fileInfo.classList.remove('flex');
+            fileInfo.classList.add('hidden');
+            fileInfo.classList.remove('flex');
             dropzone.classList.remove('hidden');
         }
 
-        // --- Event Listeners & Core Logic ---
         function handleFileSelect(file) {
             if (!file) return;
-            youtubeUrlInput.value = ''; // Clear URL input if a file is selected
+            youtubeUrlInput.value = '';
             fileNameText.textContent = file.name;
             fileSizeText.textContent = `${(file.size / 1024 / 1024).toFixed(2)} MB`;
-            fileIconContainer.innerHTML = getFileIcon(file.name);
+            fileIconContainer.innerHTML = getFileIcon(file.name, 'w-6 h-6');
             dropzone.classList.add('hidden');
             fileInfo.classList.remove('hidden');
             fileInfo.classList.add('flex');
         }
+
+        // --- Task & History Management ---
+
+        function getStatusBadge(status) {
+            switch (status) {
+                case 'completed': return `<span class="status-badge bg-green-100 text-green-800">Terminé</span>`;
+                case 'processing': return `<span class="status-badge bg-blue-100 text-blue-800">En cours</span>`;
+                case 'pending': return `<span class="status-badge bg-yellow-100 text-yellow-800">En attente</span>`;
+                case 'failed': return `<span class="status-badge bg-red-100 text-red-800">Échoué</span>`;
+                default: return `<span class="status-badge bg-slate-100 text-slate-800">${status}</span>`;
+            }
+        }
+        
+        function createHistoryItemHTML(task) {
+            const date = new Date(task.created_at).toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit'});
+            return `
+                <div class="task-item bg-white p-3 rounded-lg border border-slate-200" data-task-id="${task.task_id}">
+                    <div class="flex items-center gap-4">
+                        <div class="flex-shrink-0">${getFileIcon(task.filename)}</div>
+                        <div class="flex-1 overflow-hidden">
+                            <div class="flex justify-between items-start">
+                                <p class="font-semibold text-sm text-slate-800 truncate pr-2 cursor-pointer hover:text-blue-600" onclick="viewTask('${task.task_id}')">${task.filename}</p>
+                                <button onclick="deleteTask('${task.task_id}')" class="delete-btn flex-shrink-0 text-slate-400 hover:text-red-600 transition-colors p-1 -mt-1 -mr-1">
+                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                                </button>
+                            </div>
+                            <div class="flex justify-between items-center mt-2 text-xs text-slate-500">
+                                <span>${date}</span>
+                                ${getStatusBadge(task.status)}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="progress-container bg-slate-200 rounded-full h-1.5 w-full mt-3 ${task.status === 'completed' || task.status === 'failed' ? 'hidden' : ''}">
+                        <div class="progress-bar bg-blue-600 h-1.5 rounded-full" style="width: ${task.progress || 0}%"></div>
+                    </div>
+                </div>`;
+        }
+        
+        async function loadTasks() {
+            try {
+                const response = await fetch('/tasks');
+                const tasks = await response.json();
+                
+                historyEmptyState.classList.toggle('hidden', tasks.length > 0);
+                clearHistoryBtn.disabled = tasks.length === 0;
+
+                historyList.innerHTML = '';
+                for(const task of tasks) {
+                    historyList.insertAdjacentHTML('beforeend', createHistoryItemHTML(task));
+                    if (task.status === 'pending' || task.status === 'processing') {
+                        pollTaskStatus(task.task_id);
+                    }
+                }
+            } catch (err) {
+                console.error('Error loading history:', err);
+                historyList.innerHTML = '<p class="text-red-500 text-center py-8">Impossible de charger l\'historique.</p>';
+            }
+        }
+        
+        function updateTaskInHistoryUI(task) {
+            const taskElement = document.querySelector(`.task-item[data-task-id="${task.task_id}"]`);
+            if (!taskElement) return;
+
+            taskElement.querySelector('.status-badge').outerHTML = getStatusBadge(task.status);
+            const progressBar = taskElement.querySelector('.progress-bar');
+            const progressContainer = taskElement.querySelector('.progress-container');
+            
+            if (progressBar) progressBar.style.width = `${task.progress || 0}%`;
+            
+            if (task.status === 'completed' || task.status === 'failed') {
+                progressContainer?.classList.add('hidden');
+            } else {
+                progressContainer?.classList.remove('hidden');
+            }
+        }
+
+        function pollTaskStatus(taskId) {
+            if (taskPollers[taskId]) return;
+
+            taskPollers[taskId] = setInterval(async () => {
+                try {
+                    const response = await fetch(`/task/${taskId}`);
+                    if (!response.ok) {
+                         // Stop polling if task not found (e.g., deleted)
+                        if (response.status === 404) clearInterval(taskPollers[taskId]);
+                        return;
+                    }
+                    const task = await response.json();
+                    updateTaskInHistoryUI(task);
+
+                    if (task.status === 'completed' || task.status === 'failed') {
+                        clearInterval(taskPollers[taskId]);
+                        delete taskPollers[taskId];
+                        // If it's the most recent task, display its final state
+                        const firstTaskInList = historyList.querySelector('.task-item');
+                        if (firstTaskInList && firstTaskInList.dataset.taskId === taskId) {
+                            displayTaskResult(task);
+                        }
+                    }
+                } catch (err) {
+                    console.error(`Error polling task ${taskId}:`, err);
+                    clearInterval(taskPollers[taskId]); // Stop on network error
+                    delete taskPollers[taskId];
+                }
+            }, 2000); // Poll every 2 seconds
+        }
+
+        window.viewTask = async function(taskId) {
+            const response = await fetch(`/task/${taskId}`);
+            const task = await response.json();
+            displayTaskResult(task);
+        }
+
+        window.deleteTask = async function(taskId) {
+            if (confirm('Voulez-vous vraiment supprimer cette tâche ?')) {
+                await fetch(`/delete-task/${taskId}`, { method: 'DELETE' });
+                document.querySelector(`.task-item[data-task-id="${taskId}"]`)?.remove();
+                if (historyList.children.length === 1) { // 1 is the empty state
+                    historyEmptyState.classList.remove('hidden');
+                    clearHistoryBtn.disabled = true;
+                }
+            }
+        }
+
+        clearHistoryBtn.addEventListener('click', async () => {
+            if (confirm('Êtes-vous sûr de vouloir effacer tout l\'historique ? Cette action est irréversible.')) {
+                await fetch('/clear-tasks', { method: 'POST' });
+                loadTasks(); // Reload to show empty state
+                resultCard.classList.add('hidden');
+            }
+        });
+
+
+        // --- Event Listeners ---
         
         fileInput.addEventListener('change', (e) => handleFileSelect(e.target.files[0]));
         dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('drag-over'); });
@@ -249,14 +389,14 @@
 
         youtubeUrlInput.addEventListener('input', () => {
              if (youtubeUrlInput.value.trim() !== '') {
-                resetFileSelection(); // Clear file selection if URL is being typed
+                resetFileSelection();
              }
         });
 
         uploadForm.addEventListener('submit', async (e) => {
             e.preventDefault();
             if (!fileInput.files[0] && !youtubeUrlInput.value.trim()) {
-                alert('Veuillez sélectionner un fichier ou entrer une URL YouTube.');
+                displayError('Veuillez sélectionner un fichier ou entrer une URL YouTube.');
                 return;
             }
             showLoading(true);
@@ -270,62 +410,21 @@
                 const data = await response.json();
                 if (!response.ok || data.error) throw new Error(data.error || `Erreur serveur: ${response.status}`);
                 
-                let sourceName = fileInput.files[0] ? fileInput.files[0].name : 'Vidéo YouTube';
-                const newItem = { id: data.history_id, summary: data.summary, filename: sourceName };
-                displaySummary(newItem);
-                loadHistory();
-
+                // Add new task to top of history and start polling
+                await loadTasks(); // Reload entire list to get the new task on top
+                
             } catch (err) {
-                errorMessage.textContent = err.message;
-                errorCard.classList.remove('hidden'); errorCard.classList.add('fade-in-up');
+                displayError(err.message);
             } finally {
                 showLoading(false);
+                resetFileSelection();
+                youtubeUrlInput.value = '';
             }
         });
         
-        downloadBtn.addEventListener('click', async () => {
-            downloadBtn.disabled = true;
-            downloadBtnText.textContent = 'Génération...';
-            downloadBtnIcon.classList.add('hidden');
-            downloadBtnSpinner.classList.remove('hidden');
-
-            try {
-                const canvas = await html2canvas(summaryContentWrapper, { scale: 2, useCORS: true });
-                const imgData = canvas.toDataURL('image/jpeg', 0.95);
-                const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' });
-                const pdfWidth = pdf.internal.pageSize.getWidth();
-                const pdfHeight = pdf.internal.pageSize.getHeight();
-                const ratio = canvas.width / pdfWidth;
-                const imgHeight = canvas.height / ratio;
-                
-                pdf.setFontSize(16);
-                pdf.setTextColor(40, 40, 40);
-                pdf.text(`Résumé de : ${resultFilename.textContent}`, 20, 30);
-                
-                let heightLeft = imgHeight;
-                let position = 40;
-
-                pdf.addImage(imgData, 'JPEG', 0, position, pdfWidth, imgHeight);
-                heightLeft -= (pdfHeight - position);
-
-                while (heightLeft > 0) {
-                    position -= pdfHeight;
-                    pdf.addPage();
-                    pdf.addImage(imgData, 'JPEG', 0, position, pdfWidth, imgHeight);
-                    heightLeft -= pdfHeight;
-                }
-                
-                const safeFilename = resultFilename.textContent.replace(/[^a-z0-9]/gi, '_').toLowerCase() + "_resume.pdf";
-                pdf.save(safeFilename);
-
-            } catch (err) {
-                console.error("Erreur lors de la génération du PDF:", err);
-                alert("Impossible de générer le PDF.");
-            } finally {
-                downloadBtn.disabled = false;
-                downloadBtnText.textContent = 'Télécharger PDF';
-                downloadBtnIcon.classList.remove('hidden');
-                downloadBtnSpinner.add('hidden');
+        downloadBtn.addEventListener('click', () => {
+            if (currentTaskId) {
+                window.location.href = `/download/${currentTaskId}`;
             }
         });
         
@@ -336,46 +435,9 @@
             });
         });
 
-        async function loadHistory() {
-            try {
-                const response = await fetch('/history');
-                const history = await response.json();
-                historyEmptyState.classList.toggle('hidden', history.length > 0);
-                historyList.innerHTML = history.length > 0 ? history.map(item => `
-                    <div class="flex items-center gap-4 p-3 rounded-lg hover:bg-slate-100 transition-colors cursor-pointer" onclick="viewSummary(${item.id})">
-                        <div class="flex-shrink-0">${getFileIcon(item.filename)}</div>
-                        <div class="flex-1 overflow-hidden">
-                            <div class="font-semibold text-sm text-slate-800 truncate">${item.filename}</div>
-                            <div class="flex justify-between items-center mt-1">
-                                <span class="text-xs text-slate-500">${item.date}</span>
-                                <span class="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full font-medium capitalize">${item.summary_type === 'detaille' ? 'détaillé' : item.summary_type}</span>
-                            </div>
-                        </div>
-                    </div>
-                `).reverse().join('') : '';
-            } catch (err) {
-                console.error('Error loading history:', err);
-                historyList.innerHTML = '<p class="text-red-500 text-center py-8">Impossible de charger l\'historique.</p>';
-            }
-        }
-
-        window.viewSummary = function(id) {
-            fetch('/history').then(res => res.json()).then(history => {
-                const item = history.find(item => item.id === id);
-                if (item) displaySummary(item);
-            });
-        }
-
-        clearHistoryBtn.addEventListener('click', async () => {
-            if (confirm('Êtes-vous sûr de vouloir effacer tout l\'historique ? Cette action est irréversible.')) {
-                await fetch('/clear-history', { method: 'POST' });
-                loadHistory();
-                resultCard.classList.add('hidden');
-            }
-        });
-
         // Initial Load
-        loadHistory();
+        loadTasks();
+
     </script>
 </body>
 </html>