Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on 6 days ago

Commit

d191a18

verified ·

1 Parent(s): 2bda733

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +235 -102

templates/index.html CHANGED Viewed

@@ -1,4 +1,3 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
@@ -48,7 +47,12 @@
     .uploadArea:hover { border-color: #3b82f6; }
     .blue-button { background: #3b82f6; transition: background-color 0.2s ease; }
-    .blue-button:hover { background: #2563eb; }
     .loader {
       width: 48px;
@@ -161,7 +165,7 @@
     <header class="p-6 text-center mb-8">
       <h1 class="text-4xl font-bold text-blue-600">Mariam M-?</h1>
       <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente, avec intégration d'une calculatrice.</p>
-  <p style="color: red;">Mode standard. Passez au premium pour de très hautes performances.</p>
       <div class="mt-4 flex justify-end">
         <button id="openSaved" class="blue-button px-4 py-2 text-white rounded">Sauvegardes</button>
       </div>
@@ -187,7 +191,8 @@
         <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>
@@ -246,6 +251,7 @@
       // Récupération des éléments
       const form = document.getElementById('problemForm');
       const imageInput = document.getElementById('imageInput');
       const loader = document.getElementById('loader');
       const solutionSection = document.getElementById('solution');
       const thoughtsContent = document.getElementById('thoughtsContent');
@@ -269,11 +275,57 @@
       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);
@@ -313,17 +365,31 @@
       // 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); }
       };
       const updateDisplay = async () => {
         thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
         answerContent.innerHTML = marked.parse(answerBuffer);
         await typesetAnswerIfReady();
         updateTimeout = null;
       };
@@ -336,40 +402,46 @@
           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({
@@ -377,15 +449,22 @@
             title: 'Image manquante',
             text: 'Veuillez sélectionner une image.'
           });
           return;
         }
         startTimer();
         loader.classList.remove('hidden');
         solutionSection.classList.add('hidden');
-        thoughtsContent.innerHTML = '';
-        answerContent.innerHTML = '';
-        thoughtsBuffer = '';
         answerBuffer = '';
         currentMode = null; // Reset mode
@@ -399,6 +478,12 @@
           // Hardcode the endpoint to /solved
           const response = await fetch('/solved', { method: 'POST', body: formData });
           if (!response.body) {
               throw new Error('Response body is not available (e.g., not a streaming response)');
           }
@@ -410,11 +495,11 @@
           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 {
@@ -422,19 +507,20 @@
                   if (data.mode) {
                     currentMode = data.mode;
                     loader.classList.add('hidden');
                     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':
@@ -455,18 +541,22 @@
                   }
                   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
@@ -474,47 +564,46 @@
             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
-          }
         }
       });
@@ -528,18 +617,47 @@
           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',
@@ -547,9 +665,8 @@
               timer: 2000,
               showConfirmButton: false
             });
-          }
-        });
-      });
       // Chargement des sauvegardes dans le modal
       const loadSavedList = () => {
@@ -570,10 +687,10 @@
           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>
@@ -588,7 +705,7 @@
       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) {
@@ -619,16 +736,19 @@
             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 ?',
@@ -652,8 +772,10 @@
               );
               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)
             }
           });
         }
@@ -663,9 +785,9 @@
       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');
@@ -686,10 +808,21 @@
         // Ensure thoughts box is collapsed for a new exercise
         thoughtsBox.classList.remove('open');
-        // Close the modal
         savedModal.classList.remove('active');
-      });
     });
   </script>
 </body>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
     .uploadArea:hover { border-color: #3b82f6; }
     .blue-button { background: #3b82f6; transition: background-color 0.2s ease; }
+    .blue-button:hover:not(:disabled) { background: #2563eb; } /* Hover only when not disabled */
+    .blue-button:disabled {
+      background: #9ca3af; /* Gray background for disabled */
+      cursor: not-allowed;
+    }
     .loader {
       width: 48px;
     <header class="p-6 text-center mb-8">
       <h1 class="text-4xl font-bold text-blue-600">Mariam M-?</h1>
       <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente, avec intégration d'une calculatrice.</p>
+      <p style="color: red;">Mode standard. Passez au premium pour de très hautes performances.</p>
       <div class="mt-4 flex justify-end">
         <button id="openSaved" class="blue-button px-4 py-2 text-white rounded">Sauvegardes</button>
       </div>
         <div id="imagePreview" class="hidden text-center">
           <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation de l'image">
         </div>
+        <!-- Le bouton de soumission -->
+        <button type="submit" id="submitButton" class="blue-button w-full py-3 text-white font-medium rounded-lg">
           Résoudre le problème
         </button>
       </form>
       // Récupération des éléments
       const form = document.getElementById('problemForm');
       const imageInput = document.getElementById('imageInput');
+      const submitButton = document.getElementById('submitButton'); // Get the submit button
       const loader = document.getElementById('loader');
       const solutionSection = document.getElementById('solution');
       const thoughtsContent = document.getElementById('thoughtsContent');
       let answerBuffer = '';
       let currentMode = null;
       let updateTimeout = null;
+      // --- Délai de soumission local ---
+      const COOLDOWN_DURATION = 3 * 60 * 1000; // 3 minutes en millisecondes
+      const LAST_SUBMISSION_KEY = 'lastSubmissionTime';
+      let cooldownTimer = null; // Pour l'intervalle de mise à jour du bouton
+      // Fonction pour récupérer le timestamp de la dernière soumission depuis localStorage
+      const getLastSubmissionTime = () => {
+        const timestamp = localStorage.getItem(LAST_SUBMISSION_KEY);
+        return timestamp ? parseInt(timestamp, 10) : null;
+      };
+      // Fonction pour enregistrer le timestamp de la soumission actuelle dans localStorage
+      const setLastSubmissionTime = () => {
+        localStorage.setItem(LAST_SUBMISSION_KEY, Date.now().toString());
+      };
+      // Fonction pour vérifier le délai et mettre à jour l'état du bouton
+      const updateSubmitButtonState = () => {
+        const lastSubmit = getLastSubmissionTime();
+        const now = Date.now();
+        if (lastSubmit && now - lastSubmit < COOLDOWN_DURATION) {
+          const remainingTime = COOLDOWN_DURATION - (now - lastSubmit);
+          const minutes = Math.floor(remainingTime / 60000);
+          const seconds = Math.floor((remainingTime % 60000) / 1000);
+          submitButton.disabled = true;
+          submitButton.textContent = `Prochaine soumission dans ${minutes}:${seconds.toString().padStart(2, '0')}`;
+          // Démarrer le timer si ce n'est pas déjà fait
+          if (!cooldownTimer) {
+            cooldownTimer = setInterval(updateSubmitButtonState, 1000);
+          }
+        } else {
+          // Le délai est terminé ou il n'y a pas de soumission précédente
+          submitButton.disabled = false;
+          submitButton.textContent = 'Résoudre le problème';
+          // Arrêter le timer s'il était en cours
+          if (cooldownTimer) {
+            clearInterval(cooldownTimer);
+            cooldownTimer = null;
+          }
+        }
+      };
+      // Appeler la fonction au chargement de la page pour initialiser l'état du bouton
+      updateSubmitButtonState();
+      // --- Fin Délai de soumission local ---
+      // Mise à jour du temps écoulé (pour l'analyse en cours)
       const updateTimestamp = () => {
         if (startTime) {
           const seconds = Math.floor((Date.now() - startTime) / 1000);
       // Rendu MathJax et mise à jour de l'affichage
       const typesetAnswerIfReady = async () => {
         if (window.mathJaxReady) {
+          // Target specific elements for MathJax typesetting if needed, or document.body
+          // Targeting answerContent and thoughtsContent is safer for performance
+          MathJax.startup.document.elements = [document.getElementById('answerContent'), document.getElementById('thoughtsContent')];
           await MathJax.typesetPromise();
+          applyHighlighting(); // Apply highlighting after MathJax
+          // Keep scrolling behavior only for the main answer content maybe
+          // answerContent.scrollTop = answerContent.scrollHeight; // Auto-scroll might be jumpy with streaming
         } else { setTimeout(typesetAnswerIfReady, 200); }
       };
       const updateDisplay = async () => {
+        // Use innerHTML = marked.parse(...) for streaming updates
         thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
         answerContent.innerHTML = marked.parse(answerBuffer);
+        // Trigger MathJax typesetting and highlighting *after* updating innerHTML
         await typesetAnswerIfReady();
+        // Optional: auto-scroll only the answer content if it's the active stream
+        if (currentMode === 'answering') {
+             answerContent.scrollTop = answerContent.scrollHeight;
+        } else if (currentMode === 'thinking') {
+             thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+        }
         updateTimeout = null;
       };
           if (lang && hljs.getLanguage(lang)) {
             try {
               return hljs.highlight(code, { language: lang }).value;
+            } catch (error) {
+               console.error("Highlighting error:", error);
+               return code; // Return original code on error
+            }
+          }
+          // Default highlighting for unrecognised languages or no language specified
+          try {
+              return hljs.highlightAuto(code).value;
+          } catch (error) {
+              console.error("Auto highlighting error:", error);
+              return code; // Return original code on error
           }
         }
       });
       // Envoi de l'image pour résolution
       form.addEventListener('submit', async e => {
+        e.preventDefault(); // Empêcher la soumission par défaut pour gérer le délai
+        // --- Vérification du délai ---
+        const lastSubmit = getLastSubmissionTime();
+        const now = Date.now();
+        if (lastSubmit && now - lastSubmit < COOLDOWN_DURATION) {
+            const remainingTime = COOLDOWN_DURATION - (now - lastSubmit);
+            const minutes = Math.floor(remainingTime / 60000);
+            const seconds = Math.floor((remainingTime % 60000) / 1000);
+            Swal.fire({
+                icon: 'warning',
+                title: 'Veuillez patienter',
+                text: `Vous devez attendre ${minutes} minute(s) et ${seconds.toString().padStart(2, '0')} seconde(s) avant de soumettre à nouveau.`
+            });
+            // Mettre à jour l'état du bouton immédiatement après le message d'erreur
+            updateSubmitButtonState();
+            return; // Arrêter le processus de soumission
+        }
+        // --- Fin Vérification du délai ---
         const file = imageInput.files[0];
         if (!file) {
           Swal.fire({
             title: 'Image manquante',
             text: 'Veuillez sélectionner une image.'
           });
+          // Re-vérifier et potentiellement réactiver le bouton si aucune image n'est sélectionnée
+          updateSubmitButtonState();
           return;
         }
+        // --- Le délai est passé ou n'existait pas, on procède ---
+        setLastSubmissionTime(); // Enregistrer le nouveau timestamp *avant* de commencer
+        updateSubmitButtonState(); // Désactiver et mettre à jour le bouton
         startTimer();
         loader.classList.remove('hidden');
         solutionSection.classList.add('hidden');
+        thoughtsContent.innerHTML = ''; // Vider le contenu précédent
+        answerContent.innerHTML = '';   // Vider le contenu précédent
+        thoughtsBuffer = ''; // Vider les buffers
         answerBuffer = '';
         currentMode = null; // Reset mode
           // Hardcode the endpoint to /solved
           const response = await fetch('/solved', { method: 'POST', body: formData });
+          if (!response.ok) {
+             // Handle HTTP errors
+             const errorText = await response.text();
+             throw new Error(`HTTP error! status: ${response.status}, body: ${errorText}`);
+          }
           if (!response.body) {
               throw new Error('Response body is not available (e.g., not a streaming response)');
           }
           const processChunk = async chunk => {
             buffer += decoder.decode(chunk, { stream: true });
             const lines = buffer.split('\n\n');
+            buffer = lines.pop(); // Keep the last potentially incomplete line in buffer
             for (const line of lines) {
               if (!line.startsWith('data:')) {
+                  // console.warn('Skipping non-data line:', line); // Log non-data lines
                   continue;
               }
               try {
                   if (data.mode) {
                     currentMode = data.mode;
+                    // Hide loader and show solution section once streaming starts
                     loader.classList.add('hidden');
                     solutionSection.classList.remove('hidden');
                   }
+                  // Process content based on currentMode and data type
                   if (data.content !== undefined) { // Check for undefined to allow empty strings
                     if (currentMode === 'thinking') {
                       thoughtsBuffer += data.content;
                     } else if (currentMode === 'answering') {
+                      // Handle different types within answering mode
                       switch(data.type) {
                         case 'code':
+                          // Use markdown code block syntax
                           answerBuffer += "\n```\n" + data.content + "\n```\n";
                           break;
                         case 'result':
                   }
                   if (data.error) {
+                    // Append error to the relevant buffer or main answer buffer
+                    if (currentMode === 'thinking') {
+                        thoughtsBuffer += `\n**Erreur pendant la réflexion:** ${data.error}\n`;
+                    } else { // Assume error relates to the answer process
+                        answerBuffer += `\n**Erreur:** ${data.error}\n`;
+                    }
                   }
                 } catch (e) {
                    console.error('Error parsing JSON data:', line.slice(5), e);
+                   // Append a parsing error message to the output
+                   if (currentMode === 'thinking') { thoughtsBuffer += `\n[Erreur de traitement du flux]`; }
+                   else { answerBuffer += `\n[Erreur de traitement du flux]`; }
                 }
             }
+            scheduleUpdate(); // Schedule display update after processing a batch of lines
           };
           // Start processing the stream
             const { done, value } = await reader.read();
             if (done) {
                // Process any remaining buffer
+               if (buffer.length > 0) { // Process any data left in the buffer
+                   // Even if it's not a full line, decode and append what's left
+                   // Note: This might result in incomplete markdown being displayed
+                    if (currentMode === 'thinking') {
+                        thoughtsBuffer += decoder.decode(buffer, { stream: true });
+                    } else if (currentMode === 'answering') {
+                         answerBuffer += decoder.decode(buffer, { stream: true });
                     }
+                    buffer = ''; // Clear buffer after processing
+               }
+              scheduleUpdate(); // Final display update to render last buffer content
               break; // Exit loop
             }
+            // Process the received chunk
             await processChunk(value);
           }
         } catch (error) {
           console.error('Erreur de Fetch ou du Stream:', error);
+           // Append a user-friendly error message to the answer area if nothing is there, or append to existing content
+          if(answerContent.innerHTML === '' && answerBuffer === '') { // If solution area is empty
+             answerContent.innerHTML = `<div class="text-red-500">Une erreur est survenue lors du traitement de votre demande: ${error.message}</div>`;
+          } else { // If some output exists, append the error
+             answerBuffer += `\n\n<div class="text-red-500">Une erreur est survenue: ${error.message}</div>`;
+             scheduleUpdate(); // Update display with the appended error
+          }
           Swal.fire({
             icon: 'error',
             title: 'Erreur de connexion ou de traitement',
+            text: `Une erreur est survenue lors du traitement de votre demande. Détails: ${error.message}`
           });
+        } finally {
+          // Code qui s'exécute après try/catch, qu'il y ait eu une erreur ou non
+          stopTimer(); // Arrêter le timer de l'analyse
+          loader.classList.add('hidden'); // Cacher le loader
+          solutionSection.classList.remove('hidden'); // S'assurer que la section solution est visible
+          // --- Mise à jour finale de l'état du bouton ---
+          updateSubmitButtonState(); // Vérifier si le délai est terminé et mettre à jour le bouton
+          // --- Fin Mise à jour finale ---
         }
       });
           inputPlaceholder: 'Entrez un nom pour cette sauvegarde',
           showCancelButton: true,
           confirmButtonText: 'Sauvegarder',
+          cancelButtonText: 'Annuler',
+          inputValidator: (value) => {
+             if (!value) {
+               return 'Veuillez donner un nom à votre sauvegarde !';
+             }
+          }
         }).then((result) => {
           if (result.isConfirmed && result.value) {
             const saveName = result.value;
+            const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+            if (savedExercises[saveName]) {
+                 // Ask if user wants to overwrite
+                 Swal.fire({
+                    title: `Sauvegarde "${saveName}" existe déjà. Écraser ?`,
+                    icon: 'warning',
+                    showCancelButton: true,
+                    confirmButtonColor: '#3085d6',
+                    cancelButtonColor: '#d33',
+                    confirmButtonText: 'Oui, écraser',
+                    cancelButtonText: 'Annuler'
+                 }).then((overwriteResult) => {
+                    if (overwriteResult.isConfirmed) {
+                        saveCurrentSolution(saveName, savedExercises);
+                    }
+                 });
+            } else {
+                 saveCurrentSolution(saveName, savedExercises);
+            }
+          }
+        });
+      });
+      const saveCurrentSolution = (saveName, existingSaves) => {
+           const saveData = {
               answer: answerContent.innerHTML, // Save the rendered HTML
               thinking: thoughtsContent.innerHTML, // Save the rendered HTML
               date: new Date().toLocaleString()
             };
+            existingSaves[saveName] = saveData;
+            localStorage.setItem('savedExercises', JSON.stringify(existingSaves));
             Swal.fire({
               icon: 'success',
               title: 'Sauvegarde réussie',
               timer: 2000,
               showConfirmButton: false
             });
+      };
       // Chargement des sauvegardes dans le modal
       const loadSavedList = () => {
           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="${encodeURIComponent(name)}">
                 ${name} <span class="text-gray-500 text-xs">(${data.date})</span>
               </button>
+              <button class="text-red-500 hover:text-red-700" data-delete="${encodeURIComponent(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>
       savedList.addEventListener('click', (e) => {
         // Chargement d'une sauvegarde
         if (e.target && e.target.dataset.save) {
+          const saveName = decodeURIComponent(e.target.dataset.save);
           const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
           const data = savedExercises[saveName];
           if (data) {
             thoughtsBox.classList.add('open');
             // Reset buffers and timer as this is static content
+            thoughtsBuffer = ''; // Buffers are for streaming, not needed for static load
+            answerBuffer = ''; // Buffers are for streaming, not needed for static load
+            currentMode = null; // Not streaming
+            stopTimer(); // Stop the live timer
             timestamp.textContent = data.date; // Show saved date as timestamp
+            submitButton.disabled = true; // Disable submit button while viewing a save
+            submitButton.textContent = `Vue de la sauvegarde: ${saveName}`;
           }
         }
         // Suppression d'une sauvegarde
         if (e.target && (e.target.dataset.delete || e.target.closest('[data-delete]'))) {
+          const deleteName = decodeURIComponent(e.target.dataset.delete || e.target.closest('[data-delete]').dataset.delete);
           Swal.fire({
             title: 'Êtes-vous sûr ?',
               );
               loadSavedList(); // Refresh the list in the modal
+              // If the deleted save was being viewed, reset the view
+              if (submitButton.textContent.includes(`Vue de la sauvegarde: ${deleteName}`)) {
+                 resetToNewExerciseState();
+              }
             }
           });
         }
       openSaved.addEventListener('click', () => { loadSavedList(); savedModal.classList.add('active'); });
       closeSaved.addEventListener('click', () => { savedModal.classList.remove('active'); });
+      // Fonction pour réinitialiser l'état pour un nouvel exercice
+      const resetToNewExerciseState = () => {
+         // Reset form and hide solution
         form.reset();
         form.classList.remove('hidden');
         solutionSection.classList.add('hidden');
         // Ensure thoughts box is collapsed for a new exercise
         thoughtsBox.classList.remove('open');
+        // Update button state based on cooldown
+        updateSubmitButtonState(); // This will enable/disable based on the 3-min rule
+         // Close the modal if open
         savedModal.classList.remove('active');
+      };
+      // Bouton présent uniquement dans le modal pour lancer un nouvel exercice
+      newExercise.addEventListener('click', resetToNewExerciseState);
+      // Initial check for cooldown on page load
+      updateSubmitButtonState();
     });
   </script>
 </body>