Update templates/index.html

templates/index.html

@@ -131,7 +131,7 @@
             <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 des Tâches</h2>
+                        <h2 class="text-xl font-bold text-gray-800">Mon Historique</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>
@@ -139,7 +139,7 @@
                     <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 tâches apparaîtront ici.</p>
+                            <p class="mt-4 text-slate-500 font-medium">Vos synthèses apparaîtront ici.</p>
                         </div>
                     </div>
                 </div>
@@ -172,17 +172,43 @@
         const historyList = document.getElementById('historyList');
         const historyEmptyState = document.getElementById('historyEmptyState');
         const clearHistoryBtn = document.getElementById('clearHistoryBtn');
-        
+    
         let currentTaskId = null;
         const taskPollers = {};
-
-        // --- UI Helper Functions ---
+        const LOCAL_STORAGE_KEY = 'aiSummarizerTasks';
+    
+        // --- Fonctions utilitaires pour le LocalStorage ---
+    
+        /**
+         * Récupère les tâches depuis le localStorage.
+         * @returns {Array} La liste des tâches.
+         */
+        function getLocalTasks() {
+            const tasksJSON = localStorage.getItem(LOCAL_STORAGE_KEY);
+            try {
+                return tasksJSON ? JSON.parse(tasksJSON) : [];
+            } catch (e) {
+                console.error("Erreur de parsing des tâches locales:", e);
+                return [];
+            }
+        }
+    
+        /**
+         * Sauvegarde la liste des tâches dans le localStorage.
+         * @param {Array} tasks La liste des tâches à sauvegarder.
+         */
+        function saveLocalTasks(tasks) {
+            localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(tasks));
+        }
+    
+    
+        // --- Fonctions UI ---
         function showLoading(isLoading) {
             submitBtn.disabled = isLoading;
             btnText.textContent = isLoading ? 'Lancement...' : 'Lancer la synthèse';
             btnSpinner.classList.toggle('hidden', !isLoading);
         }
-
+    
         function displayTaskResult(task) {
             if (task.status === 'completed' && task.summary) {
                 summaryContent.innerHTML = marked.parse(task.summary);
@@ -192,7 +218,9 @@
                 errorCard.classList.add('hidden');
                 resultCard.classList.remove('hidden');
                 resultCard.classList.add('fade-in-up');
-                window.scrollTo({ top: resultCard.offsetTop - 80, behavior: 'smooth' });
+                if (resultCard.getBoundingClientRect().top < 0 || resultCard.getBoundingClientRect().bottom > window.innerHeight) {
+                     window.scrollTo({ top: resultCard.offsetTop - 80, behavior: 'smooth' });
+                }
             } else if (task.status === 'failed' && task.error) {
                 displayError(task.error);
                 resultCard.classList.add('hidden');
@@ -201,13 +229,13 @@
                  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-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>`;
@@ -222,14 +250,12 @@
             }
             return iconSvg;
         }
-        
         function resetFileSelection() {
             fileInput.value = '';
             fileInfo.classList.add('hidden');
             fileInfo.classList.remove('flex');
             dropzone.classList.remove('hidden');
         }
-
         function handleFileSelect(file) {
             if (!file) return;
             youtubeUrlInput.value = '';
@@ -240,9 +266,9 @@
             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>`;
@@ -278,31 +304,27 @@
                 </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);
-                    }
+        function renderHistory(tasks) {
+            historyEmptyState.classList.toggle('hidden', tasks.length > 0);
+            clearHistoryBtn.disabled = tasks.length === 0;
+            historyList.innerHTML = tasks.map(createHistoryItemHTML).join('');
+        }
+    
+        function loadTasks() {
+            const tasks = getLocalTasks();
+            renderHistory(tasks);
+            
+            tasks.forEach(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');
@@ -315,64 +337,70 @@
                 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') {
+                    const updatedTask = await response.json();
+                    
+                    let tasks = getLocalTasks();
+                    const taskIndex = tasks.findIndex(t => t.task_id === taskId);
+                    if (taskIndex !== -1) {
+                        tasks[taskIndex] = updatedTask;
+                        saveLocalTasks(tasks);
+                    }
+    
+                    updateTaskInHistoryUI(updatedTask);
+    
+                    if (updatedTask.status === 'completed' || updatedTask.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);
+                        if (taskIndex === 0) {
+                            displayTaskResult(updatedTask);
                         }
                     }
                 } catch (err) {
                     console.error(`Error polling task ${taskId}:`, err);
-                    clearInterval(taskPollers[taskId]); // Stop on network error
+                    clearInterval(taskPollers[taskId]);
                     delete taskPollers[taskId];
                 }
-            }, 2000); // Poll every 2 seconds
+            }, 3000);
         }
-
-        window.viewTask = async function(taskId) {
-            const response = await fetch(`/task/${taskId}`);
-            const task = await response.json();
-            displayTaskResult(task);
+    
+        window.viewTask = function(taskId) {
+            const tasks = getLocalTasks();
+            const task = tasks.find(t => t.task_id === taskId);
+            if (task) {
+                displayTaskResult(task);
+            }
         }
-
-        window.deleteTask = async function(taskId) {
+    
+        window.deleteTask = 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;
-                }
+                let tasks = getLocalTasks();
+                tasks = tasks.filter(t => t.task_id !== taskId);
+                saveLocalTasks(tasks);
+                loadTasks();
             }
         }
-
+    
         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
+                saveLocalTasks([]);
+                loadTasks();
                 resultCard.classList.add('hidden');
+                errorCard.classList.add('hidden');
             }
         });
-
-
+    
+    
         // --- Event Listeners ---
         
         fileInput.addEventListener('change', (e) => handleFileSelect(e.target.files[0]));
@@ -386,13 +414,10 @@
             handleFileSelect(file);
         });
         removeFileBtn.addEventListener('click', resetFileSelection);
-
         youtubeUrlInput.addEventListener('input', () => {
-             if (youtubeUrlInput.value.trim() !== '') {
-                resetFileSelection();
-             }
+             if (youtubeUrlInput.value.trim() !== '') resetFileSelection();
         });
-
+    
         uploadForm.addEventListener('submit', async (e) => {
             e.preventDefault();
             if (!fileInput.files[0] && !youtubeUrlInput.value.trim()) {
@@ -402,7 +427,7 @@
             showLoading(true);
             resultCard.classList.add('hidden');
             errorCard.classList.add('hidden');
-
+    
             const formData = new FormData(uploadForm);
             
             try {
@@ -410,8 +435,15 @@
                 const data = await response.json();
                 if (!response.ok || data.error) throw new Error(data.error || `Erreur serveur: ${response.status}`);
                 
-                // Add new task to top of history and start polling
-                await loadTasks(); // Reload entire list to get the new task on top
+                const taskResponse = await fetch(`/task/${data.task_id}`);
+                const newTask = await taskResponse.json();
+    
+                let tasks = getLocalTasks();
+                tasks.unshift(newTask);
+                saveLocalTasks(tasks);
+    
+                renderHistory(tasks);
+                pollTaskStatus(newTask.task_id);
                 
             } catch (err) {
                 displayError(err.message);
@@ -434,10 +466,10 @@
                 setTimeout(() => { copyBtnText.textContent = 'Copier'; }, 2000);
             });
         });
-
+    
         // Initial Load
         loadTasks();
-
+    
     </script>
 </body>
 </html>