Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on 7 days ago

Commit

d1f8aa4

verified ·

1 Parent(s): d191a18

Update templates/maj.html

Browse files

Files changed (1) hide show

templates/maj.html +168 -197

templates/maj.html CHANGED Viewed

@@ -1,4 +1,3 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
@@ -49,6 +48,8 @@
     .blue-button { background: #3b82f6; transition: background-color 0.2s ease; }
     .blue-button:hover { background: #2563eb; }
     .loader {
       width: 48px;
@@ -92,7 +93,6 @@
     th { background-color: #f3f4f6; font-weight: 600; }
     .table-responsive { overflow-x: auto; }
-    /* Style pour le bouton Sauvegarder afin de le mettre en évidence */
     #saveButton {
       background: #3b82f6;
       color: white;
@@ -102,7 +102,6 @@
     }
     #saveButton:hover { background: #2563eb; }
-    /* Modal plein écran pour les sauvegardes */
     #savedModal {
       display: none;
       position: fixed;
@@ -118,7 +117,6 @@
       overflow-y: auto;
     }
-    /* Styles spécifiques pour le code et son exécution */
     pre {
       background-color: #f8f8f8;
       border: 1px solid #e2e8f0;
@@ -142,7 +140,6 @@
       white-space: pre-wrap;
     }
-    /* Styles pour les types de contenu spécifiques */
     .content-text {}
     .content-code { padding: 0; }
     .content-result {
@@ -168,7 +165,6 @@
     <main id="mainContent">
       <form id="problemForm" class="space-y-6" novalidate>
-        <!-- Zone de dépôt / sélection d'image -->
         <div class="uploadArea p-8 text-center relative" aria-label="Zone de dépôt d'image">
           <input type="file" id="imageInput" name="image" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image">
           <div class="space-y-3">
@@ -182,22 +178,19 @@
             <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
           </div>
         </div>
-        <!-- Aperçu de l'image -->
         <div id="imagePreview" class="hidden text-center">
           <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation de l'image">
         </div>
-        <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
           Résoudre le problème
         </button>
       </form>
-      <!-- Loader -->
       <div id="loader" class="hidden mt-8 text-center">
         <span class="loader"></span>
         <p class="mt-4 text-gray-600">Analyse en cours...</p>
       </div>
-      <!-- Zone d'affichage de la solution -->
       <section id="solution" class="hidden mt-8 space-y-6 relative">
         <div class="border-t pt-4">
           <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-2">
@@ -211,7 +204,6 @@
         <div class="border-t pt-6">
           <div class="flex justify-between items-center">
             <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
-            <!-- Bouton Sauvegarder mis en évidence -->
             <button id="saveButton">Sauvegarder</button>
           </div>
           <div id="answerContent" class="text-gray-700 table-responsive"></div>
@@ -220,7 +212,6 @@
     </main>
   </div>
-  <!-- Modal plein écran pour les sauvegardes -->
   <div id="savedModal">
     <div id="savedModalContent" class="p-6">
       <header class="flex justify-between items-center border-b pb-4">
@@ -229,7 +220,6 @@
       </header>
       <div id="savedListContainer" class="mt-4">
         <ul id="savedList" class="space-y-4">
-          <!-- Liste des sauvegardes insérée dynamiquement -->
         </ul>
       </div>
       <div class="mt-6">
@@ -242,7 +232,6 @@
   <script>
     document.addEventListener('DOMContentLoaded', () => {
-      // Récupération des éléments
       const form = document.getElementById('problemForm');
       const imageInput = document.getElementById('imageInput');
       const loader = document.getElementById('loader');
@@ -260,7 +249,8 @@
       const savedModal = document.getElementById('savedModal');
       const savedList = document.getElementById('savedList');
       const newExercise = document.getElementById('newExercise');
-      const mainContent = document.getElementById('mainContent'); // This variable is not used in the original logic, keeping it but it could be removed.
       let startTime = null;
       let timerInterval = null;
@@ -268,11 +258,70 @@
       let answerBuffer = '';
       let currentMode = null;
       let updateTimeout = null;
-      // Removed currentEndpoint variable as it's no longer needed
-      // Gestion des onglets pour le choix du modèle (Removed as tabs are removed)
-      // Mise à jour du temps écoulé
       const updateTimestamp = () => {
         if (startTime) {
           const seconds = Math.floor((Date.now() - startTime) / 1000);
@@ -280,9 +329,9 @@
         }
       };
       const startTimer = () => { startTime = Date.now(); timerInterval = setInterval(updateTimestamp, 1000); updateTimestamp(); };
-      const stopTimer = () => { clearInterval(timerInterval); startTime = null; timestamp.textContent = ''; };
-      // Affichage de l'image sélectionnée
       const handleFileSelect = file => {
         if (!file) return;
         const reader = new FileReader();
@@ -296,26 +345,24 @@
       thoughtsToggle.addEventListener('click', () => { thoughtsBox.classList.toggle('open'); });
       imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
-      // Gestion du glisser-déposer
       const dropZone = document.querySelector('.uploadArea');
       dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('border-blue-400'); });
       dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400'); });
       dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400'); handleFileSelect(e.dataTransfer.files[0]); });
-      // Fonction pour appliquer la coloration syntaxique
       const applyHighlighting = () => {
         document.querySelectorAll('pre code').forEach((block) => {
-          hljs.highlightBlock(block);
         });
       };
-      // Rendu MathJax et mise à jour de l'affichage
       const typesetAnswerIfReady = async () => {
         if (window.mathJaxReady) {
-          MathJax.startup.document.elements = [document.getElementById('answerContent')];
           await MathJax.typesetPromise();
           applyHighlighting();
           answerContent.scrollTop = answerContent.scrollHeight;
         } else { setTimeout(typesetAnswerIfReady, 200); }
       };
@@ -334,41 +381,33 @@
         highlight: function(code, lang) {
           if (lang && hljs.getLanguage(lang)) {
             try {
-              return hljs.highlight(code, { language: lang }).value;
-            } catch (error) {}
           }
-          return code;
         }
       });
-      // Creation of content elements (This part wasn't directly used in the streaming logic before, keeping it just in case it was intended for future use, but the current streaming logic builds markdown directly)
-      const createContentElement = (content, type) => {
-        const div = document.createElement('div');
-        div.className = `content-${type}`;
-        switch(type) {
-          case 'text':
-            div.innerHTML = marked.parse(content);
-            break;
-          case 'code':
-            div.innerHTML = `<pre><code>${content}</code></pre>`;
-            break;
-          case 'result':
-            div.innerHTML = `<div class="code-execution-result">${content}</div>`;
-            break;
-          case 'image':
-            div.innerHTML = `<img src="data:image/png;base64,${content}" />`;
-            break;
-          default:
-            div.innerHTML = marked.parse(content);
-        }
-        return div;
-      };
-      // Envoi de l'image pour résolution
       form.addEventListener('submit', async e => {
         e.preventDefault();
         const file = imageInput.files[0];
         if (!file) {
           Swal.fire({
@@ -379,6 +418,10 @@
           return;
         }
         startTimer();
         loader.classList.remove('hidden');
         solutionSection.classList.add('hidden');
@@ -386,16 +429,13 @@
         answerContent.innerHTML = '';
         thoughtsBuffer = '';
         answerBuffer = '';
-        currentMode = null; // Reset mode
-        // thoughtsBox starts open by default, keep it open during processing
         thoughtsBox.classList.add('open');
         const formData = new FormData();
         formData.append('image', file);
         try {
-          // Hardcode the endpoint to /solved
           const response = await fetch('/solve', { method: 'POST', body: formData });
           if (!response.body) {
@@ -404,16 +444,16 @@
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
-          let buffer = '';
           const processChunk = async chunk => {
-            buffer += decoder.decode(chunk, { stream: true });
-            const lines = buffer.split('\n\n');
-            buffer = lines.pop();
             for (const line of lines) {
               if (!line.startsWith('data:')) {
-                  console.warn('Skipping non-data line:', line); // Log non-data lines
                   continue;
               }
               try {
@@ -425,100 +465,79 @@
                     solutionSection.classList.remove('hidden');
                   }
-                  if (data.content !== undefined) { // Check for undefined to allow empty strings
-                    // Gestion différenciée selon le type de contenu
                     if (currentMode === 'thinking') {
-                      // For thinking mode, just append text
                       thoughtsBuffer += data.content;
                     } else if (currentMode === 'answering') {
-                      // For answering mode, handle different types
                       switch(data.type) {
                         case 'code':
-                          answerBuffer += "\n```\n" + data.content + "\n```\n";
                           break;
                         case 'result':
-                           // Format results clearly, handling multiple lines
                            const formattedResult = data.content.split('\n').map(line => `> ${line}`).join('\n');
                            answerBuffer += "\n" + formattedResult + "\n";
                            break;
                         case 'image':
-                          // Include images as markdown images
-                          answerBuffer += `\n![Résultat](data:image/png;base64,${data.content})\n`;
                           break;
-                        case 'text': // Explicitly handle text within answering mode
-                        default: // Default behavior is to append text
                           answerBuffer += data.content;
                           break;
                       }
                     }
                   }
-                  if (data.error) {
-                    answerBuffer += `\n**Erreur:** ${data.error}\n`;
-                  }
                 } catch (e) {
                    console.error('Error parsing JSON data:', line.slice(5), e);
-                   // Optionally append an error message to the output
-                   if (currentMode === 'thinking') { thoughtsBuffer += `\n[Parsing Error]`; }
-                   else { answerBuffer += `\n[Parsing Error]`; }
                 }
             }
-            scheduleUpdate(); // Schedule display update after processing chunks
           };
-          // Start processing the stream
           while (true) {
             const { done, value } = await reader.read();
             if (done) {
-               // Process any remaining buffer
-              if (buffer) {
-                 try {
-                   // Attempt to parse the last bit if it looks like a data line
-                    if (buffer.startsWith('data:')) {
-                       const data = JSON.parse(buffer.slice(5));
-                        if (data.content !== undefined) {
-                           if (currentMode === 'thinking') { thoughtsBuffer += data.content; }
-                           else if (currentMode === 'answering') { answerBuffer += data.content; }
-                        }
-                    } else {
-                       // Handle cases where the buffer is not a complete data line (e.g., partial line)
-                       console.warn('Remaining buffer is not a complete data line:', buffer);
-                       // Decide how to handle partial data - maybe discard or append as raw? Appending as raw might break markdown. Discarding is safer.
-                    }
-                 } catch (e) {
-                    console.error('Error processing final buffer:', e);
-                 }
               }
-              scheduleUpdate(); // Final display update
-              break; // Exit loop
             }
             await processChunk(value);
           }
-          stopTimer(); // Stop timer when stream is done
         } catch (error) {
           console.error('Erreur de Fetch ou du Stream:', error);
           Swal.fire({
             icon: 'error',
             title: 'Erreur de connexion ou de traitement',
-            text: `Une erreur est survenue lors du traitement de votre demande: ${error.message}`
           });
           loader.classList.add('hidden');
-          stopTimer(); // Ensure timer stops on error
-          solutionSection.classList.remove('hidden'); // Show section maybe with error message
-          if(answerBuffer === '') { // If no output yet, put error in answer section
              answerContent.innerHTML = `<div class="text-red-500">Une erreur est survenue: ${error.message}</div>`;
-          } else { // If some output exists, append error
-             answerBuffer += `\n\n<div class="text-red-500">Une erreur est survenue: ${error.message}</div>`;
-             scheduleUpdate(); // Update display with error
           }
         }
       });
-      // Sauvegarde de la solution avec SweetAlert2
       saveButton.addEventListener('click', () => {
         Swal.fire({
           title: 'Sauvegarder la solution',
@@ -527,54 +546,45 @@
           inputPlaceholder: 'Entrez un nom pour cette sauvegarde',
           showCancelButton: true,
           confirmButtonText: 'Sauvegarder',
-          cancelButtonText: 'Annuler'
         }).then((result) => {
           if (result.isConfirmed && result.value) {
             const saveName = result.value;
             const saveData = {
-              answer: answerContent.innerHTML, // Save the rendered HTML
-              thinking: thoughtsContent.innerHTML, // Save the rendered HTML
               date: new Date().toLocaleString()
             };
             let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
             savedExercises[saveName] = saveData;
             localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
-            Swal.fire({
-              icon: 'success',
-              title: 'Sauvegarde réussie',
-              text: 'Votre solution a bien été sauvegardée !',
-              timer: 2000,
-              showConfirmButton: false
-            });
           }
         });
       });
-      // Chargement des sauvegardes dans le modal
       const loadSavedList = () => {
         savedList.innerHTML = '';
         const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
         if (Object.keys(savedExercises).length === 0) {
           savedList.innerHTML = '<li class="text-gray-500 text-center py-8">Aucune sauvegarde disponible</li>';
           return;
         }
-        // Sort by date, newest first (optional but nice)
         const sortedEntries = Object.entries(savedExercises).sort(([,a], [,b]) => new Date(b.date) - new Date(a.date));
         for (const [name, data] of sortedEntries) {
           const li = document.createElement('li');
-          li.className = 'border-b pb-2';
           li.innerHTML = `
             <div class="flex justify-between items-center">
-              <button class="text-left text-blue-600 hover:underline" data-save="${name}">
-                ${name} <span class="text-gray-500 text-xs">(${data.date})</span>
               </button>
-              <button class="text-red-500 hover:text-red-700" data-delete="${name}">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                 </svg>
               </button>
             </div>
@@ -583,111 +593,72 @@
         }
       };
-      // Gestion des clics sur les sauvegardes
       savedList.addEventListener('click', (e) => {
-        // Chargement d'une sauvegarde
-        if (e.target && e.target.dataset.save) {
-          const saveName = e.target.dataset.save;
           const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
           const data = savedExercises[saveName];
           if (data) {
-            // Hide the form and loader, show the solution section
             form.classList.add('hidden');
             loader.classList.add('hidden');
             solutionSection.classList.remove('hidden');
-            // Load the saved HTML content
             thoughtsContent.innerHTML = data.thinking;
             answerContent.innerHTML = data.answer;
-            // Close the modal
             savedModal.classList.remove('active');
-            // Re-render MathJax and apply highlighting to the loaded HTML
-            // Use MathJax.typesetPromise() on the specific elements
              if (window.mathJaxReady) {
-                MathJax.startup.document.elements = [thoughtsContent, answerContent]; // Target both potentially
-                MathJax.typesetPromise().then(() => {
-                   applyHighlighting(); // Apply highlighting after MathJax
-                }).catch((err) => console.error("MathJax typesetting failed:", err));
-             } else {
-                console.warn("MathJax not ready yet, cannot typeset saved content.");
-             }
-            // Ensure thoughts box is open when viewing a saved solution
             thoughtsBox.classList.add('open');
-            // Reset buffers and timer as this is static content
-            thoughtsBuffer = ''; // Or load from saved data if needed for re-processing
-            answerBuffer = ''; // Or load from saved data if needed for re-processing
-            stopTimer();
-            timestamp.textContent = data.date; // Show saved date as timestamp
           }
-        }
-        // Suppression d'une sauvegarde
-        if (e.target && (e.target.dataset.delete || e.target.closest('[data-delete]'))) {
-          const deleteName = e.target.dataset.delete || e.target.closest('[data-delete]').dataset.delete;
           Swal.fire({
             title: 'Êtes-vous sûr ?',
             text: "Cette sauvegarde sera définitivement supprimée.",
             icon: 'warning',
             showCancelButton: true,
-            confirmButtonColor: '#3085d6',
-            cancelButtonColor: '#d33',
-            confirmButtonText: 'Oui, supprimer',
             cancelButtonText: 'Annuler'
           }).then((result) => {
             if (result.isConfirmed) {
               const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
               delete savedExercises[deleteName];
               localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
-              Swal.fire(
-                'Supprimé !',
-                'La sauvegarde a été supprimée.',
-                'success'
-              );
-              loadSavedList(); // Refresh the list in the modal
-              // If the currently viewed solution is the one being deleted, clear it
-              // (Optional, maybe better to just let them view it until they start a new one)
             }
           });
         }
       });
-      // Ouverture / fermeture du modal de sauvegardes
       openSaved.addEventListener('click', () => { loadSavedList(); savedModal.classList.add('active'); });
       closeSaved.addEventListener('click', () => { savedModal.classList.remove('active'); });
-      // Bouton présent uniquement dans le modal pour lancer un nouvel exercice
       newExercise.addEventListener('click', () => {
-        // Reset form and hide solution
         form.reset();
         form.classList.remove('hidden');
         solutionSection.classList.add('hidden');
-        imagePreview.classList.add('hidden'); // Hide image preview
-        previewImage.src = ''; // Clear image source
-        // Clear content areas and buffers
         thoughtsContent.innerHTML = '';
         answerContent.innerHTML = '';
         thoughtsBuffer = '';
         answerBuffer = '';
-        currentMode = null; // Reset mode
-        // Stop timer and clear timestamp
         stopTimer();
         timestamp.textContent = '';
-        // Ensure thoughts box is collapsed for a new exercise
         thoughtsBox.classList.remove('open');
-        // Close the modal
         savedModal.classList.remove('active');
       });
     });
   </script>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
     .blue-button { background: #3b82f6; transition: background-color 0.2s ease; }
     .blue-button:hover { background: #2563eb; }
+    .blue-button:disabled { background: #9ca3af; cursor: not-allowed; }
     .loader {
       width: 48px;
     th { background-color: #f3f4f6; font-weight: 600; }
     .table-responsive { overflow-x: auto; }
     #saveButton {
       background: #3b82f6;
       color: white;
     }
     #saveButton:hover { background: #2563eb; }
     #savedModal {
       display: none;
       position: fixed;
       overflow-y: auto;
     }
     pre {
       background-color: #f8f8f8;
       border: 1px solid #e2e8f0;
       white-space: pre-wrap;
     }
     .content-text {}
     .content-code { padding: 0; }
     .content-result {
     <main id="mainContent">
       <form id="problemForm" class="space-y-6" novalidate>
         <div class="uploadArea p-8 text-center relative" aria-label="Zone de dépôt d'image">
           <input type="file" id="imageInput" name="image" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image">
           <div class="space-y-3">
             <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
           </div>
         </div>
         <div id="imagePreview" class="hidden text-center">
           <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation de l'image">
         </div>
+        <button type="submit" id="submitProblemButton" class="blue-button w-full py-3 text-white font-medium rounded-lg">
           Résoudre le problème
         </button>
       </form>
       <div id="loader" class="hidden mt-8 text-center">
         <span class="loader"></span>
         <p class="mt-4 text-gray-600">Analyse en cours...</p>
       </div>
       <section id="solution" class="hidden mt-8 space-y-6 relative">
         <div class="border-t pt-4">
           <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-2">
         <div class="border-t pt-6">
           <div class="flex justify-between items-center">
             <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
             <button id="saveButton">Sauvegarder</button>
           </div>
           <div id="answerContent" class="text-gray-700 table-responsive"></div>
     </main>
   </div>
   <div id="savedModal">
     <div id="savedModalContent" class="p-6">
       <header class="flex justify-between items-center border-b pb-4">
       </header>
       <div id="savedListContainer" class="mt-4">
         <ul id="savedList" class="space-y-4">
         </ul>
       </div>
       <div class="mt-6">
   <script>
     document.addEventListener('DOMContentLoaded', () => {
       const form = document.getElementById('problemForm');
       const imageInput = document.getElementById('imageInput');
       const loader = document.getElementById('loader');
       const savedModal = document.getElementById('savedModal');
       const savedList = document.getElementById('savedList');
       const newExercise = document.getElementById('newExercise');
+      const mainContent = document.getElementById('mainContent');
+      const submitButton = document.getElementById('submitProblemButton'); // Récupérer le bouton de soumission
       let startTime = null;
       let timerInterval = null;
       let answerBuffer = '';
       let currentMode = null;
       let updateTimeout = null;
+      // Constantes pour la gestion du délai de soumission
+      const SUBMISSION_COOLDOWN_MS = 3 * 60 * 1000; // 3 minutes
+      const LAST_SUBMISSION_TIMESTAMP_KEY = 'mariamM1LastSubmissionTimestamp';
+      let cooldownInterval = null;
+      const ORIGINAL_SUBMIT_BUTTON_TEXT = 'Résoudre le problème';
+      // Fonction pour activer le bouton de soumission
+      const enableSubmitButton = () => {
+        clearInterval(cooldownInterval);
+        submitButton.disabled = false;
+        submitButton.textContent = ORIGINAL_SUBMIT_BUTTON_TEXT;
+      };
+      // Fonction pour désactiver le bouton de soumission et afficher le compte à rebours
+      const disableSubmitButton = (remainingTimeMs) => {
+        if (remainingTimeMs <= 0) {
+          enableSubmitButton();
+          localStorage.removeItem(LAST_SUBMISSION_TIMESTAMP_KEY); // Nettoyer si le temps est écoulé
+          return;
+        }
+        submitButton.disabled = true;
+        clearInterval(cooldownInterval); // S'assurer qu'il n'y a pas d'intervalle précédent
+        let timeLeft = Math.ceil(remainingTimeMs / 1000); // en secondes
+        const updateButtonText = () => {
+          if (timeLeft <= 0) {
+            enableSubmitButton();
+            localStorage.removeItem(LAST_SUBMISSION_TIMESTAMP_KEY); // Cooldown terminé
+            return;
+          }
+          const minutes = Math.floor(timeLeft / 60);
+          const seconds = timeLeft % 60;
+          submitButton.textContent = `Attendre ${minutes}m ${seconds < 10 ? '0' : ''}${seconds}s`;
+          timeLeft--;
+        };
+        updateButtonText(); // Appel initial
+        cooldownInterval = setInterval(updateButtonText, 1000);
+      };
+      // Initialiser l'état du cooldown au chargement de la page
+      const initializeCooldownState = () => {
+        const lastSubmissionTime = parseInt(localStorage.getItem(LAST_SUBMISSION_TIMESTAMP_KEY), 10);
+        if (lastSubmissionTime) {
+          const now = Date.now();
+          const timePassed = now - lastSubmissionTime;
+          if (timePassed < SUBMISSION_COOLDOWN_MS) {
+            const remainingTime = SUBMISSION_COOLDOWN_MS - timePassed;
+            disableSubmitButton(remainingTime);
+          } else {
+            enableSubmitButton();
+            localStorage.removeItem(LAST_SUBMISSION_TIMESTAMP_KEY); // Cooldown expiré
+          }
+        } else {
+          enableSubmitButton();
+        }
+      };
+      initializeCooldownState(); // Appeler à l'initialisation
       const updateTimestamp = () => {
         if (startTime) {
           const seconds = Math.floor((Date.now() - startTime) / 1000);
         }
       };
       const startTimer = () => { startTime = Date.now(); timerInterval = setInterval(updateTimestamp, 1000); updateTimestamp(); };
+      const stopTimer = () => { clearInterval(timerInterval); startTime = null; /* Ne pas réinitialiser le timestamp ici si on veut le garder */};
       const handleFileSelect = file => {
         if (!file) return;
         const reader = new FileReader();
       thoughtsToggle.addEventListener('click', () => { thoughtsBox.classList.toggle('open'); });
       imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
       const dropZone = document.querySelector('.uploadArea');
       dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('border-blue-400'); });
       dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400'); });
       dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400'); handleFileSelect(e.dataTransfer.files[0]); });
       const applyHighlighting = () => {
         document.querySelectorAll('pre code').forEach((block) => {
+          hljs.highlightElement(block); // Utiliser highlightElement pour plus de contrôle si nécessaire
         });
       };
       const typesetAnswerIfReady = async () => {
         if (window.mathJaxReady) {
+          MathJax.startup.document.elements = [document.getElementById('answerContent'), document.getElementById('thoughtsContent')];
           await MathJax.typesetPromise();
           applyHighlighting();
           answerContent.scrollTop = answerContent.scrollHeight;
+          thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
         } else { setTimeout(typesetAnswerIfReady, 200); }
       };
         highlight: function(code, lang) {
           if (lang && hljs.getLanguage(lang)) {
             try {
+              return hljs.highlight(code, { language: lang, ignoreIllegals: true }).value;
+            } catch (error) { console.error("Highlight.js error:", error); }
           }
+          return hljs.highlightAuto(code).value; // Fallback to auto-detection
         }
       });
       form.addEventListener('submit', async e => {
         e.preventDefault();
+        const lastSubmissionTime = parseInt(localStorage.getItem(LAST_SUBMISSION_TIMESTAMP_KEY), 10);
+        const currentTime = Date.now();
+        if (lastSubmissionTime && (currentTime - lastSubmissionTime < SUBMISSION_COOLDOWN_MS)) {
+            const timePassed = currentTime - lastSubmissionTime;
+            const remainingTime = SUBMISSION_COOLDOWN_MS - timePassed;
+            const minutes = Math.floor(remainingTime / (1000 * 60));
+            const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
+            Swal.fire({
+                icon: 'warning',
+                title: 'Délai d\'attente',
+                text: `Veuillez attendre encore ${minutes} minute(s) et ${seconds} seconde(s) avant de soumettre à nouveau.`,
+            });
+            return; // Empêcher la soumission
+        }
         const file = imageInput.files[0];
         if (!file) {
           Swal.fire({
           return;
         }
+        // Marquer le temps de cette soumission et démarrer le cooldown
+        localStorage.setItem(LAST_SUBMISSION_TIMESTAMP_KEY, currentTime.toString());
+        disableSubmitButton(SUBMISSION_COOLDOWN_MS);
         startTimer();
         loader.classList.remove('hidden');
         solutionSection.classList.add('hidden');
         answerContent.innerHTML = '';
         thoughtsBuffer = '';
         answerBuffer = '';
+        currentMode = null;
         thoughtsBox.classList.add('open');
         const formData = new FormData();
         formData.append('image', file);
         try {
           const response = await fetch('/solve', { method: 'POST', body: formData });
           if (!response.body) {
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
+          let streamBuffer = ''; // Renommé pour éviter confusion avec thoughtsBuffer/answerBuffer
           const processChunk = async chunk => {
+            streamBuffer += decoder.decode(chunk, { stream: true });
+            const lines = streamBuffer.split('\n\n');
+            streamBuffer = lines.pop();
             for (const line of lines) {
               if (!line.startsWith('data:')) {
+                  console.warn('Skipping non-data line:', line);
                   continue;
               }
               try {
                     solutionSection.classList.remove('hidden');
                   }
+                  if (data.content !== undefined) {
                     if (currentMode === 'thinking') {
                       thoughtsBuffer += data.content;
                     } else if (currentMode === 'answering') {
                       switch(data.type) {
                         case 'code':
+                          answerBuffer += "\n```" + (data.language || '') + "\n" + data.content + "\n```\n";
                           break;
                         case 'result':
                            const formattedResult = data.content.split('\n').map(line => `> ${line}`).join('\n');
                            answerBuffer += "\n" + formattedResult + "\n";
                            break;
                         case 'image':
+                          answerBuffer += `\n![Image générée](data:image/png;base64,${data.content})\n`;
                           break;
+                        case 'text':
+                        default:
                           answerBuffer += data.content;
                           break;
                       }
                     }
                   }
+                  if (data.error) { answerBuffer += `\n**Erreur:** ${data.error}\n`; }
                 } catch (e) {
                    console.error('Error parsing JSON data:', line.slice(5), e);
+                   if (currentMode === 'thinking') { thoughtsBuffer += `\n[Erreur de Parsing des Données]`; }
+                   else { answerBuffer += `\n[Erreur de Parsing des Données]`; }
                 }
             }
+            scheduleUpdate();
           };
           while (true) {
             const { done, value } = await reader.read();
             if (done) {
+              if (streamBuffer.startsWith('data:')) { // Traiter le dernier morceau s'il existe
+                try {
+                  const data = JSON.parse(streamBuffer.slice(5));
+                  if (data.content !== undefined) {
+                    if (currentMode === 'thinking') { thoughtsBuffer += data.content; }
+                    else if (currentMode === 'answering') { answerBuffer += data.content; } // Simplifié, ajuster si types nécessaires ici
+                  }
+                } catch(e) { console.error("Error parsing final buffer chunk:", e); }
+              } else if (streamBuffer.trim() !== '') {
+                console.warn("Final stream buffer part was not a data line:", streamBuffer);
               }
+              scheduleUpdate();
+              break;
             }
             await processChunk(value);
           }
+          stopTimer();
         } catch (error) {
           console.error('Erreur de Fetch ou du Stream:', error);
           Swal.fire({
             icon: 'error',
             title: 'Erreur de connexion ou de traitement',
+            text: `Une erreur est survenue: ${error.message}`
           });
           loader.classList.add('hidden');
+          stopTimer();
+          solutionSection.classList.remove('hidden');
+          if(answerBuffer === '') {
              answerContent.innerHTML = `<div class="text-red-500">Une erreur est survenue: ${error.message}</div>`;
+          } else {
+             answerBuffer += `\n\n<div class="text-red-500 p-2 my-2 border border-red-500 rounded">Une erreur est survenue pendant le traitement: ${error.message}</div>`;
+             scheduleUpdate();
           }
+          // Le cooldown continue indépendamment de l'erreur de fetch.
         }
       });
       saveButton.addEventListener('click', () => {
         Swal.fire({
           title: 'Sauvegarder la solution',
           inputPlaceholder: 'Entrez un nom pour cette sauvegarde',
           showCancelButton: true,
           confirmButtonText: 'Sauvegarder',
+          cancelButtonText: 'Annuler',
+          inputValidator: (value) => {
+            if (!value) { return 'Vous devez entrer un nom !' }
+          }
         }).then((result) => {
           if (result.isConfirmed && result.value) {
             const saveName = result.value;
             const saveData = {
+              answer: answerContent.innerHTML,
+              thinking: thoughtsContent.innerHTML,
               date: new Date().toLocaleString()
             };
             let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
             savedExercises[saveName] = saveData;
             localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
+            Swal.fire('Sauvegardé !', 'Votre solution a été sauvegardée.', 'success');
           }
         });
       });
       const loadSavedList = () => {
         savedList.innerHTML = '';
         const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
         if (Object.keys(savedExercises).length === 0) {
           savedList.innerHTML = '<li class="text-gray-500 text-center py-8">Aucune sauvegarde disponible</li>';
           return;
         }
         const sortedEntries = Object.entries(savedExercises).sort(([,a], [,b]) => new Date(b.date) - new Date(a.date));
         for (const [name, data] of sortedEntries) {
           const li = document.createElement('li');
+          li.className = 'border-b pb-2 mb-2'; // Ajout de mb-2 pour espacement
           li.innerHTML = `
             <div class="flex justify-between items-center">
+              <button class="text-left text-blue-600 hover:underline focus:outline-none" data-save="${name}">
+                <span class="font-semibold">${name}</span> <br> <span class="text-gray-500 text-xs">(${data.date})</span>
               </button>
+              <button class="text-red-500 hover:text-red-700 p-1 focus:outline-none" data-delete="${name}" aria-label="Supprimer ${name}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                 </svg>
               </button>
             </div>
         }
       };
       savedList.addEventListener('click', (e) => {
+        const saveButtonTarget = e.target.closest('[data-save]');
+        const deleteButtonTarget = e.target.closest('[data-delete]');
+        if (saveButtonTarget) {
+          const saveName = saveButtonTarget.dataset.save;
           const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
           const data = savedExercises[saveName];
           if (data) {
             form.classList.add('hidden');
             loader.classList.add('hidden');
             solutionSection.classList.remove('hidden');
             thoughtsContent.innerHTML = data.thinking;
             answerContent.innerHTML = data.answer;
             savedModal.classList.remove('active');
              if (window.mathJaxReady) {
+                MathJax.startup.document.elements = [thoughtsContent, answerContent];
+                MathJax.typesetPromise().then(applyHighlighting).catch(err => console.error("MathJax error on load:", err));
+             } else { setTimeout(() => { if(window.mathJaxReady) MathJax.typesetPromise([thoughtsContent, answerContent]).then(applyHighlighting);}, 500); }
             thoughtsBox.classList.add('open');
+            thoughtsBuffer = ''; answerBuffer = ''; stopTimer();
+            timestamp.textContent = `Sauvegardé le: ${data.date}`;
           }
+        } else if (deleteButtonTarget) {
+          const deleteName = deleteButtonTarget.dataset.delete;
           Swal.fire({
             title: 'Êtes-vous sûr ?',
             text: "Cette sauvegarde sera définitivement supprimée.",
             icon: 'warning',
             showCancelButton: true,
+            confirmButtonColor: '#d33',
+            cancelButtonColor: '#3085d6',
+            confirmButtonText: 'Oui, supprimer !',
             cancelButtonText: 'Annuler'
           }).then((result) => {
             if (result.isConfirmed) {
               const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
               delete savedExercises[deleteName];
               localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
+              Swal.fire('Supprimé !', 'La sauvegarde a été supprimée.', 'success');
+              loadSavedList();
             }
           });
         }
       });
       openSaved.addEventListener('click', () => { loadSavedList(); savedModal.classList.add('active'); });
       closeSaved.addEventListener('click', () => { savedModal.classList.remove('active'); });
       newExercise.addEventListener('click', () => {
         form.reset();
         form.classList.remove('hidden');
         solutionSection.classList.add('hidden');
+        imagePreview.classList.add('hidden');
+        previewImage.src = '';
         thoughtsContent.innerHTML = '';
         answerContent.innerHTML = '';
         thoughtsBuffer = '';
         answerBuffer = '';
+        currentMode = null;
         stopTimer();
         timestamp.textContent = '';
         thoughtsBox.classList.remove('open');
         savedModal.classList.remove('active');
+        // Important: vérifier le cooldown pour le nouveau bouton d'exercice
+        initializeCooldownState();
       });
     });
   </script>