Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on 19 days ago

Commit

dc34e95

verified ·

1 Parent(s): f2ed8a0

Update templates/maj.html

Browse files

Files changed (1) hide show

templates/maj.html +133 -89

templates/maj.html CHANGED Viewed

@@ -6,7 +6,7 @@
   <title>Mariam | Solution Mathématique</title>
   <!-- Tailwind CSS -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
   <!-- Configuration MathJax -->
   <script>
     window.MathJax = {
@@ -14,7 +14,9 @@
         inlineMath: [['$', '$']],
         displayMath: [['$$', '$$']],
         processEscapes: true,
-        packages: {'[+]': ['autoload','ams']}
       },
       options: {
         enableMenu: false,
@@ -29,7 +31,7 @@
     };
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
-  <!-- Marked.js - Toujours inclus au cas où il serait utilisé pour thoughtsContent -->
   <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
   <style>
@@ -56,8 +58,6 @@
       background: #2563eb;
     }
-    /* Suppression du style du bouton de téléchargement */
     .loader {
       width: 48px;
       height: 48px;
@@ -85,8 +85,15 @@
       max-height: 500px;
       overflow-y: auto;
       scroll-behavior: smooth;
-      white-space: pre-wrap; /* Important pour préserver les espaces/retours ligne du LaTeX brut */
     }
     .preview-image {
       max-width: 300px;
@@ -100,12 +107,12 @@
       margin-left: 8px;
     }
-    /* Styles pour les tables générées par MathJax/Markdown si nécessaire */
     table {
       border-collapse: collapse;
       width: 100%;
       margin-bottom: 1rem;
-      border: 1px solid #d1d5db; /* Ajout bordure table */
     }
     th, td {
       border: 1px solid #d1d5db;
@@ -120,8 +127,6 @@
       overflow-x: auto;
     }
-    /* Suppression du style pour l'impression */
     .performance-warning {
         color: red;
         font-weight: bold;
@@ -132,19 +137,19 @@
     }
   </style>
 </head>
-<body class="p-4">
-  <div class="max-w-4xl mx-auto">
-    <header class="p-6 text-center mb-8">
       <h1 class="text-4xl font-bold text-blue-600">Mariam - M-0</h1>
-      <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente</p>
        <p class="performance-warning">
-        Vous utilisez actuellement les modèles/performances moyens.  Accédez à des performances supérieures avec un abonnement premium !
       </p>
     </header>
     <main>
       <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" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image">
           <div class="space-y-3">
             <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
@@ -157,8 +162,8 @@
           </div>
         </div>
-        <div id="imagePreview" class="hidden text-center">
-          <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation de l'image sélectionnée">
         </div>
         <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
@@ -172,21 +177,32 @@
       </div>
       <section id="solution" class="hidden mt-8 space-y-6">
-        <div class="border-t pt-4">
-          <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-2">
             <span class="font-medium text-gray-700">Processus de Réflexion</span>
             <span id="timestamp" class="timestamp"></span>
           </button>
-          <div id="thoughtsBox" class="thought-box">
-            <div id="thoughtsContent" class="p-4 text-gray-600"></div>
           </div>
         </div>
-        <div class="border-t pt-6">
-          <div class="flex justify-between items-center mb-4">
             <h3 class="text-xl font-bold text-gray-800">Solution</h3>
-            <!-- Suppression du bouton de téléchargement -->
           </div>
-          <div id="answerContent" class="text-gray-700 table-responsive"></div>
         </div>
       </section>
     </main>
@@ -212,8 +228,7 @@
       let answerBuffer = '';
       let currentMode = null;
       let updateTimeout = null;
-      // Suppression de la fonction generatePDF et de son appel
       const updateTimestamp = () => {
         if (startTime) {
@@ -230,9 +245,9 @@
       const stopTimer = () => {
         clearInterval(timerInterval);
-        startTime = null;
         // Ne pas effacer le timestamp final
-        // timestamp.textContent = '';
       };
       const handleFileSelect = file => {
@@ -254,7 +269,7 @@
       const dropZone = document.querySelector('.uploadArea');
       dropZone.addEventListener('dragover', e => {
         e.preventDefault();
-        dropZone.classList.add('border-blue-400');
       });
       dropZone.addEventListener('dragleave', e => {
         e.preventDefault();
@@ -263,67 +278,89 @@
       dropZone.addEventListener('drop', e => {
         e.preventDefault();
         dropZone.classList.remove('border-blue-400');
-        handleFileSelect(e.dataTransfer.files[0]);
       });
-      // --- Déclaration de typesetContentIfReady ---
       const typesetContentIfReady = async () => {
-        if (window.mathJaxReady && typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
-           // Cible les deux conteneurs si nécessaire, ou juste answerContent si seul lui contient du LaTeX
-           // Pour être sûr, on peut cibler la section solution entière ou des éléments spécifiques.
-           // Ici, on cible explicitement answerContent comme dans le code original.
-           // Si thoughtsContent peut aussi avoir du MathJax, ajoutez-le au tableau.
-           // MathJax.startup.document.elements = [answerContent, thoughtsContent];
-           MathJax.startup.document.elements = [answerContent]; // Cible uniquement answerContent
            try {
                 await MathJax.typesetPromise();
-                // Fait défiler vers le bas après le rendu MathJax
-                answerContent.scrollTop = answerContent.scrollHeight;
                 // Si thoughtsContent est aussi traité:
                 // thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
            } catch (error) {
                console.error("Erreur pendant MathJax typesetPromise:", error);
            }
         } else {
-            console.log('MathJax pas prêt, report du rendu...');
-            setTimeout(typesetContentIfReady, 200); // Réessayer
         }
       };
-      // --- Déclaration de updateDisplay ---
-      const updateDisplay = async () => {
-        // Utilise Marked pour thoughtsContent (supposant qu'il contient du Markdown)
-        if (typeof marked !== 'undefined') {
-             thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
         } else {
-             thoughtsContent.textContent = thoughtsBuffer; // Fallback si Marked n'est pas chargé
         }
-        // **CORRECTION:** Insère le contenu brut dans answerContent, sans passer par Marked
-        answerContent.innerHTML = answerBuffer;
         // Déclenche le rendu MathJax sur le contenu mis à jour
-        await typesetContentIfReady();
-        // Scrolling (peut être redondant si fait dans typesetContentIfReady)
-        thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
-        // answerContent.scrollTop = answerContent.scrollHeight; // Déplacé dans typesetContentIfReady
-        updateTimeout = null;
       };
       const scheduleUpdate = () => {
-        if (updateTimeout) return;
-        // Délai légèrement augmenté pour laisser le temps au DOM de se mettre à jour avant MathJax
-        updateTimeout = setTimeout(updateDisplay, 250);
       };
       // Configure Marked (si utilisé pour thoughtsContent)
       if (typeof marked !== 'undefined') {
           marked.setOptions({
-            gfm: true,
-            breaks: true
           });
       }
       form.addEventListener('submit', async e => {
@@ -348,60 +385,67 @@
         formData.append('image', file);
         try {
-          const response = await fetch('/solved', {
             method: 'POST',
             body: formData
           });
           if (!response.ok) {
-              throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
           }
           if (!response.body) {
-              throw new Error("La réponse ne contient pas de corps.");
           }
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
           let buffer = '';
-          let firstChunkReceived = false; // Pour afficher la section dès réception
           const processChunk = async ({ done, value }) => {
             if (done) {
-              // Traiter le reste du buffer s'il y en a
-              if (buffer && buffer.startsWith('data:')) {
                 try {
                     const data = JSON.parse(buffer.slice(5));
                     if (data.content) {
-                      if (currentMode === 'thinking') {
-                        thoughtsBuffer += data.content;
-                      } else if (currentMode === 'answering') {
-                        answerBuffer += data.content;
-                      }
                     }
                 } catch(jsonError){
                      console.error("Erreur JSON dans le buffer final:", jsonError, "Buffer:", buffer);
                 }
               }
-              // Assurer une dernière mise à jour après la fin du stream
-              await updateDisplay();
-              stopTimer(); // Arrêter le timer à la fin
               console.log("Stream terminé.");
               return true; // Indique que le stream est terminé
             }
             buffer += decoder.decode(value, { stream: true });
             const lines = buffer.split('\n\n');
-            buffer = lines.pop() || ''; // Garde la partie incomplète pour le prochain chunk
             for (const line of lines) {
-              if (!line.startsWith('data:')) continue;
               try {
-                  const data = JSON.parse(line.slice(5));
                   if (data.mode) {
                     currentMode = data.mode;
-                    // Afficher la section dès la première donnée reçue après le début du mode
-                    if (!firstChunkReceived) {
                         loader.classList.add('hidden');
                         solutionSection.classList.remove('hidden');
                         firstChunkReceived = true;
@@ -413,12 +457,11 @@
                     } else if (currentMode === 'answering') {
                       answerBuffer += data.content;
                     }
-                     // Mise à jour programmée pour éviter trop d'appels DOM/MathJax
                     scheduleUpdate();
                   }
               } catch(jsonError) {
                   console.error("Erreur JSON dans le stream:", jsonError, "Ligne:", line);
-                  // Continuer avec les lignes suivantes si possible
               }
             }
             return false; // Indique que le stream n'est pas terminé
@@ -432,10 +475,11 @@
           }
         } catch (error) {
-          console.error('Erreur lors de la récupération ou du traitement:', error);
-          alert(`Une erreur est survenue: ${error.message}`);
           loader.classList.add('hidden');
-          solutionSection.classList.add('hidden'); // Cacher si erreur
           stopTimer();
         }
       });

   <title>Mariam | Solution Mathématique</title>
   <!-- Tailwind CSS -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
   <!-- Configuration MathJax -->
   <script>
     window.MathJax = {
         inlineMath: [['$', '$']],
         displayMath: [['$$', '$$']],
         processEscapes: true,
+        // packages: {'[+]': ['autoload','ams']} // Ancienne config
+        // CORRECTION: Ajout de 'textmacros' pour mieux supporter \textbf et autres commandes textuelles DANS les maths.
+        packages: {'[+]': ['autoload','ams', 'textmacros']}
       },
       options: {
         enableMenu: false,
     };
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
+  <!-- Marked.js - Pour le rendu Markdown dans 'thoughtsContent' -->
   <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
   <style>
       background: #2563eb;
     }
     .loader {
       width: 48px;
       height: 48px;
       max-height: 500px;
       overflow-y: auto;
       scroll-behavior: smooth;
+      /* white-space: pre-wrap; */ /* Peut interférer avec le rendu HTML/Markdown/MathJax, désactivé pour être sûr */
+      word-wrap: break-word; /* Assure le retour à la ligne */
     }
+     /* Style pour le contenu LaTeX brut (avant rendu MathJax), utile pour déboguer */
+    #answerContent mjx-container {
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+    }
     .preview-image {
       max-width: 300px;
       margin-left: 8px;
     }
+    /* Styles pour les tables (si générées par Markdown ou MathJax) */
     table {
       border-collapse: collapse;
       width: 100%;
       margin-bottom: 1rem;
+      border: 1px solid #d1d5db;
     }
     th, td {
       border: 1px solid #d1d5db;
       overflow-x: auto;
     }
     .performance-warning {
         color: red;
         font-weight: bold;
     }
   </style>
 </head>
+<body class="p-4 bg-gray-50"> {/* Ajout d'un fond léger */}
+  <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-md"> {/* Ajout d'une carte pour le contenu */}
+    <header class="p-6 text-center mb-8 border-b"> {/* Ajout bordure */}
       <h1 class="text-4xl font-bold text-blue-600">Mariam - M-0</h1>
+      <p class="text-gray-600 mt-2">Solution Mathématique/Physique/Chimie Intelligente</p> {/* Ajout mt-2 */}
        <p class="performance-warning">
+        Vous utilisez actuellement les modèles/performances moyens. Accédez à des performances supérieures avec un abonnement premium !
       </p>
     </header>
     <main>
       <form id="problemForm" class="space-y-6" novalidate>
+        <div class="uploadArea p-8 text-center relative rounded-md" aria-label="Zone de dépôt d'image"> {/* Ajout rounded-md */}
           <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image">
           <div class="space-y-3">
             <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
           </div>
         </div>
+        <div id="imagePreview" class="hidden text-center mt-4"> {/* Ajout mt-4 */}
+          <img id="previewImage" class="preview-image mx-auto border rounded" alt="Prévisualisation de l'image sélectionnée"> {/* Ajout border rounded */}
         </div>
         <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
       </div>
       <section id="solution" class="hidden mt-8 space-y-6">
+         {/* Section Réflexion */}
+        <div class="border rounded-md shadow-sm"> {/* Ajout bordure/ombre */}
+          <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-3 bg-gray-100 rounded-t-md"> {/* Style bouton */}
             <span class="font-medium text-gray-700">Processus de Réflexion</span>
             <span id="timestamp" class="timestamp"></span>
           </button>
+          <div id="thoughtsBox" class="thought-box border-t"> {/* Ajout bordure */}
+            {/* Utilisation de prose pour améliorer le style du contenu Markdown */}
+            <div id="thoughtsContent" class="p-4 text-gray-600 prose prose-sm max-w-none"></div>
           </div>
         </div>
+        {/* Section Solution */}
+        <div class="border rounded-md shadow-sm"> {/* Ajout bordure/ombre */}
+          <div class="flex justify-between items-center p-3 bg-gray-100 rounded-t-md border-b"> {/* Style titre */}
             <h3 class="text-xl font-bold text-gray-800">Solution</h3>
           </div>
+          {/* table-responsive peut rester sur le conteneur pour le cas où une table serait générée */}
+          <div id="answerContent" class="p-4 text-gray-700 table-responsive">
+             {/* Le contenu LaTeX sera inséré ici */}
+             {/* NOTE IMPORTANTE POUR \medskip : */}
+             {/* MathJax (comme LaTeX) applique \medskip pour l'espace vertical ENTRE les blocs $$...$$ */}
+             {/* ou via \\[<dimension>] dans des environnements comme align*. */}
+             {/* Si le backend envoie \medskip A L'INTERIEUR d'un bloc $$...$$, il sera probablement ignoré. */}
+             {/* La correction doit se faire côté backend pour générer du LaTeX standard. */}
+          </div>
         </div>
       </section>
     </main>
       let answerBuffer = '';
       let currentMode = null;
       let updateTimeout = null;
+      let mathJaxProcessing = false; // Flag pour éviter les rendus concurrents
       const updateTimestamp = () => {
         if (startTime) {
       const stopTimer = () => {
         clearInterval(timerInterval);
+        // Ne pas réinitialiser startTime ici pour conserver la durée finale
+        // startTime = null;
         // Ne pas effacer le timestamp final
       };
       const handleFileSelect = file => {
       const dropZone = document.querySelector('.uploadArea');
       dropZone.addEventListener('dragover', e => {
         e.preventDefault();
+        dropZone.classList.add('border-blue-400'); // Utiliser une classe Tailwind existante
       });
       dropZone.addEventListener('dragleave', e => {
         e.preventDefault();
       dropZone.addEventListener('drop', e => {
         e.preventDefault();
         dropZone.classList.remove('border-blue-400');
+        if (e.dataTransfer.files.length > 0) {
+            imageInput.files = e.dataTransfer.files; // Assigne les fichiers déposés à l'input
+            handleFileSelect(e.dataTransfer.files[0]); // Met à jour l'aperçu
+        }
       });
+      // --- Fonction de rendu MathJax ---
       const typesetContentIfReady = async () => {
+         // Vérifie si MathJax est prêt ET qu'un rendu n'est pas déjà en cours
+        if (window.mathJaxReady && !mathJaxProcessing && typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
+           mathJaxProcessing = true; // Bloque les rendus concurrents
+           console.log("Début du rendu MathJax...");
            try {
+                // Cible explicitement les conteneurs où MathJax doit agir
+                // Si 'thoughtsContent' peut contenir du LaTeX, ajoutez-le au tableau.
+                // MathJax.startup.document.elements = [answerContent, thoughtsContent];
+                MathJax.startup.document.elements = [answerContent]; // Cible answerContent
                 await MathJax.typesetPromise();
+                console.log("Rendu MathJax terminé.");
+                // Fait défiler vers le bas APRÈS le rendu MathJax
+                answerContent.scrollTop = answerContent.scrollHeight;
                 // Si thoughtsContent est aussi traité:
                 // thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
            } catch (error) {
                console.error("Erreur pendant MathJax typesetPromise:", error);
+           } finally {
+               mathJaxProcessing = false; // Libère le verrou
+               console.log("Flag MathJax débloqué.");
            }
+        } else if (mathJaxProcessing) {
+            console.log('Rendu MathJax déjà en cours, report...');
+            // On pourrait replanifier ici si nécessaire, mais le scheduleUpdate devrait suffire
         } else {
+            console.log('MathJax pas prêt ou indéfini, report du rendu...');
+            // Réessayer un peu plus tard
+            setTimeout(scheduleUpdate, 300);
         }
       };
+      // --- Fonction de mise à jour de l'affichage ---
+      const updateDisplay = () => {
+        // Utilise Marked pour thoughtsContent (supposant Markdown)
+        // Vérifie si marked est chargé
+        if (typeof marked !== 'undefined' && marked.parse) {
+             // Utilise { async: false } pour éviter les problèmes potentiels avec le rendu asynchrone de marked
+             // avant que MathJax ne s'exécute, bien que ce soit généralement pour les highlighters.
+             // Plus sûr de garder le flux synchrone ici.
+             thoughtsContent.innerHTML = marked.parse(thoughtsBuffer || '', { async: false });
         } else {
+             console.warn("Marked.js n'est pas chargé ou `parse` n'est pas une fonction.");
+             thoughtsContent.textContent = thoughtsBuffer; // Fallback texte brut
         }
+        // Insère le contenu brut dans answerContent (MathJax s'en chargera)
+        answerContent.innerHTML = answerBuffer;
         // Déclenche le rendu MathJax sur le contenu mis à jour
+        // L'appel à typeset est maintenant géré via scheduleUpdate pour éviter les conflits
+        // await typesetContentIfReady(); // Déplacé dans scheduleUpdate/appel direct
+        // Scrolling géré DANS typesetContentIfReady après le rendu
+        updateTimeout = null; // Réinitialise le timeout
+        // Déclenche le rendu MathJax immédiatement après la mise à jour du DOM
+        typesetContentIfReady();
       };
       const scheduleUpdate = () => {
+        if (updateTimeout) return; // Si une mise à jour est déjà programmée, ne rien faire
+        // Délai court pour regrouper les mises à jour rapides du stream
+        updateTimeout = setTimeout(updateDisplay, 150); // Délai réduit
       };
       // Configure Marked (si utilisé pour thoughtsContent)
       if (typeof marked !== 'undefined') {
           marked.setOptions({
+            gfm: true,     // Active GitHub Flavored Markdown
+            breaks: true,  // Convertit les sauts de ligne simples en <br>
+            mangle: false, // Désactive l'obfuscation des emails (souvent inutile ici)
+            headerIds: false // Désactive la génération d'ID pour les titres (moins de conflits potentiels)
           });
+      } else {
+          console.warn("Marked.js n'est pas chargé. 'thoughtsContent' sera affiché en texte brut.");
       }
       form.addEventListener('submit', async e => {
         formData.append('image', file);
         try {
+          const response = await fetch('/solved', { // Assurez-vous que l'URL est correcte
             method: 'POST',
             body: formData
           });
           if (!response.ok) {
+              // Essayer de lire le corps de l'erreur si possible
+              let errorBody = await response.text();
+              throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}. ${errorBody ? 'Détails: ' + errorBody : ''}`);
           }
           if (!response.body) {
+              throw new Error("La réponse ne contient pas de corps (ReadableStream).");
           }
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
           let buffer = '';
+          let firstChunkReceived = false;
           const processChunk = async ({ done, value }) => {
             if (done) {
+              // Traiter le reste du buffer s'il y en a (important !)
+              if (buffer.startsWith('data:')) {
                 try {
                     const data = JSON.parse(buffer.slice(5));
                     if (data.content) {
+                      if (currentMode === 'thinking') thoughtsBuffer += data.content;
+                      else if (currentMode === 'answering') answerBuffer += data.content;
                     }
                 } catch(jsonError){
                      console.error("Erreur JSON dans le buffer final:", jsonError, "Buffer:", buffer);
                 }
+              } else if (buffer.trim()) {
+                 console.warn("Données restantes non traitées dans le buffer final:", buffer);
               }
+              // Assurer une dernière mise à jour de l'affichage après la fin du stream
+              if (updateTimeout) clearTimeout(updateTimeout); // Annule le timeout programmé
+              updateDisplay(); // Force la mise à jour finale immédiate
+              stopTimer();
               console.log("Stream terminé.");
               return true; // Indique que le stream est terminé
             }
+            // Ajoute le nouveau chunk au buffer
             buffer += decoder.decode(value, { stream: true });
+            // Sépare le buffer en lignes basées sur '\n\n' (standard pour SSE)
             const lines = buffer.split('\n\n');
+            // La dernière partie peut être incomplète, on la garde dans le buffer
+            buffer = lines.pop() || '';
             for (const line of lines) {
+              if (!line.startsWith('data:')) continue; // Ignore les lignes non valides (commentaires, lignes vides...)
               try {
+                  const jsonData = line.slice(5).trim(); // Enlève 'data:' et les espaces
+                  if (!jsonData) continue; // Ignore si vide après 'data:'
+                  const data = JSON.parse(jsonData);
                   if (data.mode) {
                     currentMode = data.mode;
+                    if (!firstChunkReceived) {
                         loader.classList.add('hidden');
                         solutionSection.classList.remove('hidden');
                         firstChunkReceived = true;
                     } else if (currentMode === 'answering') {
                       answerBuffer += data.content;
                     }
+                    // Programme une mise à jour (regroupée)
                     scheduleUpdate();
                   }
               } catch(jsonError) {
                   console.error("Erreur JSON dans le stream:", jsonError, "Ligne:", line);
               }
             }
             return false; // Indique que le stream n'est pas terminé
           }
         } catch (error) {
+          console.error('Erreur lors de la requête ou du traitement du stream:', error);
+          // Affiche une erreur plus détaillée à l'utilisateur
+          answerContent.innerHTML = `<p class="text-red-600 font-bold">Une erreur est survenue :</p><p class="text-red-500 mt-2">${error.message}</p>`;
+          solutionSection.classList.remove('hidden'); // Affiche la section pour montrer l'erreur
           loader.classList.add('hidden');
           stopTimer();
         }
       });