Update templates/index.html

templates/index.html

@@ -6,7 +6,7 @@
   <title>Mariam M-1 | Solution Mathématique</title>
   <!-- Tailwind CSS -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-  
+
   <!-- SweetAlert2 -->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
@@ -25,7 +25,8 @@
       },
       options: {
         enableMenu: false,
-        messageStyle: 'none'
+        messageStyle: 'none',
+        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] // Important pour Highlight.js
       },
       startup: {
         pageReady: () => { window.mathJaxReady = true; }
@@ -38,17 +39,17 @@
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
     body { font-family: 'Space Grotesk', sans-serif; }
-    
+
     .uploadArea {
       background: #f3f4f6;
       border: 2px dashed #d1d5db;
       transition: border-color 0.2s ease;
     }
     .uploadArea:hover { border-color: #3b82f6; }
-    
+
     .blue-button { background: #3b82f6; transition: background-color 0.2s ease; }
     .blue-button:hover { background: #2563eb; }
-    
+
     .loader {
       width: 48px;
       height: 48px;
@@ -59,29 +60,39 @@
       animation: rotation 1s linear infinite;
     }
     @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-    
+
     .thought-box {
       transition: max-height 0.3s ease-out;
       max-height: 0;
       overflow: hidden;
     }
     .thought-box.open { max-height: 500px; }
-    
+
     #thoughtsContent, #answerContent {
-      max-height: 500px;
+      max-height: 60vh; /* Limite la hauteur pour éviter un scroll trop long */
       overflow-y: auto;
       scroll-behavior: smooth;
-      white-space: pre-wrap;
+      white-space: normal; /* Permettre le retour à la ligne normal */
+      word-wrap: break-word; /* S'assurer que les longs mots/urls ne dépassent pas */
+      padding: 1rem; /* Ajouter un peu de padding interne */
+      background-color: #fff; /* Fond blanc pour la zone de réponse */
+      border: 1px solid #e2e8f0; /* Bordure légère */
+      border-radius: 0.375rem; /* Coins arrondis */
+    }
+
+    #thoughtsContent {
+        background-color: #f9fafb; /* Fond légèrement différent pour les pensées */
     }
-    
+
     .preview-image { max-width: 300px; max-height: 300px; object-fit: contain; }
-    
+
     .timestamp { color: #3b82f6; font-size: 0.9em; margin-left: 8px; }
-    
+
     table {
       border-collapse: collapse;
       width: 100%;
       margin-bottom: 1rem;
+      border: 1px solid #d1d5db;
     }
     th, td {
       border: 1px solid #d1d5db;
@@ -89,19 +100,17 @@
       text-align: left;
     }
     th { background-color: #f3f4f6; font-weight: 600; }
-    .table-responsive { overflow-x: auto; }
-    
-    /* Style pour le bouton Sauvegarder afin de le mettre en évidence */
+    .table-responsive { overflow-x: auto; margin: 1rem 0; } /* Ajouter un margin */
+
     #saveButton {
-      background: #3b82f6;
+      background: #10b981; /* Vert pour sauvegarder */
       color: white;
       padding: 0.5rem 1rem;
       border-radius: 0.375rem;
       transition: background-color 0.2s ease;
     }
-    #saveButton:hover { background: #2563eb; }
-    
-    /* Modal plein écran pour les sauvegardes */
+    #saveButton:hover { background: #059669; }
+
     #savedModal {
       display: none;
       position: fixed;
@@ -109,13 +118,30 @@
       background: rgba(0,0,0,0.5);
       z-index: 50;
     }
-    #savedModal.active { display: block; }
+    #savedModal.active { display: flex; align-items: center; justify-content: center;} /* Centrer le modal */
     #savedModalContent {
       background: #fff;
-      width: 100%;
-      height: 100%;
+      width: 90%;
+      max-width: 800px; /* Limiter la largeur max */
+      max-height: 90vh; /* Limiter la hauteur max */
       overflow-y: auto;
+      border-radius: 0.5rem; /* Coins arrondis pour le modal */
+      display: flex;
+      flex-direction: column;
     }
+     #savedModalContent header {
+        padding: 1rem 1.5rem;
+     }
+     #savedListContainer {
+         padding: 0 1.5rem 1rem; /* Padding pour la liste */
+         flex-grow: 1; /* Permet à la liste de prendre l'espace */
+         overflow-y: auto; /* Scroll interne si besoin */
+     }
+     #savedModalContent .modal-footer {
+        padding: 1rem 1.5rem;
+        border-top: 1px solid #e2e8f0;
+        text-align: right;
+     }
 
     /* Styles spécifiques pour le code et son exécution */
     pre {
@@ -123,35 +149,47 @@
       border: 1px solid #e2e8f0;
       border-radius: 0.375rem;
       padding: 1rem;
-      margin: 1rem 0;
+      margin: 1rem 0; /* Espace autour des blocs de code */
       overflow-x: auto;
       font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      white-space: pre; /* Conserver les espaces et retours ligne du code */
     }
-    
+
     code {
       font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      background-color: rgba(209, 213, 219, 0.3); /* Léger fond pour code inline */
+      padding: 0.1em 0.3em;
+      border-radius: 0.25rem;
     }
-    
+
+    pre code {
+        background-color: transparent; /* Pas de fond spécial dans pre */
+        padding: 0;
+        border-radius: 0;
+    }
+
     .code-execution-result {
-      background-color: #f0fff4;
+      background-color: #f0fff4; /* Fond vert pâle pour résultat */
       border-left: 4px solid #48bb78;
       padding: 1rem;
-      margin: 1rem 0;
+      margin: 1rem 0; /* Espace autour */
       font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-      white-space: pre-wrap;
+      white-space: pre-wrap; /* Permettre retour à la ligne */
+      overflow-x: auto; /* Scroll horizontal si nécessaire */
     }
-    
+
     /* Styles pour les types de contenu spécifiques */
-    .content-text {}
-    .content-code { padding: 0; }
-    .content-result {
-      background-color: #f0fff4;
-      border-left: 4px solid #48bb78;
-      padding: 1rem;
-      margin: 0.5rem 0;
-    }
+    .content-text p:last-child { margin-bottom: 0; } /* Éviter double marge */
+    .content-code {}
+    .content-result {}
     .content-image { margin: 1rem 0; text-align: center; }
-    .content-image img { max-width: 100%; }
+    .content-image img {
+        max-width: 100%;
+        height: auto; /* Maintenir proportions */
+        display: inline-block; /* Pour que text-align fonctionne */
+        border: 1px solid #d1d5db; /* Légère bordure autour de l'image */
+        border-radius: 0.25rem;
+    }
 
     /* Onglets pour choisir le modèle */
     .tabs {
@@ -159,32 +197,57 @@
       border-bottom: 1px solid #e2e8f0;
       margin-bottom: 1rem;
     }
-    
+
     .tab {
       padding: 0.5rem 1rem;
       cursor: pointer;
       border-bottom: 2px solid transparent;
+      color: #6b7280; /* Gris par défaut */
+      transition: color 0.2s ease, border-color 0.2s ease;
+    }
+    .tab:hover {
+        color: #3b82f6;
     }
-    
+
     .tab.active {
       border-bottom: 2px solid #3b82f6;
       color: #3b82f6;
       font-weight: 600;
     }
+
+    .delete-button {
+        color: #ef4444; /* Rouge pour supprimer */
+        background: none;
+        border: none;
+        padding: 0.25rem;
+        cursor: pointer;
+        transition: color 0.2s ease;
+    }
+    .delete-button:hover {
+        color: #dc2626;
+    }
+    .delete-button svg {
+        display: inline-block; /* Empêche les problèmes de layout */
+    }
   </style>
 </head>
-<body class="p-4">
-  <div class="max-w-4xl mx-auto">
-    <header class="p-6 text-center mb-8">
+<body class="bg-gray-100 p-4 min-h-screen flex flex-col">
+  <div class="max-w-4xl mx-auto w-full bg-white shadow-md rounded-lg p-6 flex-grow flex flex-col">
+    <header class="text-center mb-8">
       <h1 class="text-4xl font-bold text-blue-600">Mariam M-1</h1>
       <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente</p>
       <div class="mt-4 flex justify-end">
-        <button id="openSaved" class="blue-button px-4 py-2 text-white rounded">Sauvegardes</button>
+        <button id="openSaved" class="blue-button px-4 py-2 text-white rounded">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-3.03L5 18V4z" />
+            </svg>
+            Sauvegardes
+        </button>
       </div>
     </header>
 
-    <main id="mainContent">
-      <form id="problemForm" class="space-y-6" novalidate>
+    <main id="mainContent" class="flex-grow flex flex-col">
+      <form id="problemForm" class="space-y-6 flex-grow flex flex-col" novalidate>
         <!-- Onglets pour choisir le modèle -->
         <div class="tabs">
           <div class="tab active" data-endpoint="solve">Gemini Pro</div>
@@ -192,11 +255,11 @@
         </div>
 
         <!-- 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">
+        <div class="uploadArea p-8 text-center relative cursor-pointer flex-grow flex flex-col justify-center items-center" 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">
-            <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
-              <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center text-blue-400">
+              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                   d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
               </svg>
@@ -204,12 +267,16 @@
             <p class="text-gray-700 font-medium">Déposez votre image ici</p>
             <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
           </div>
+           <!-- Aperçu de l'image -->
+          <div id="imagePreview" class="hidden mt-4">
+            <img id="previewImage" class="preview-image mx-auto border border-gray-300 rounded" alt="Prévisualisation de l'image">
+          </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">
+
+        <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
+            </svg>
           Résoudre le problème
         </button>
       </form>
@@ -221,43 +288,61 @@
       </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">
+      <section id="solution" class="hidden mt-8 space-y-6 flex-grow flex flex-col">
+
+        <!-- Zone Pensées -->
+        <div class="border rounded-lg overflow-hidden shadow-sm">
+          <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-3 bg-gray-50 border-b">
             <span class="font-medium text-gray-700">Processus de Réflexion</span>
-            <span id="timestamp" class="timestamp"></span>
+            <div class="flex items-center">
+                <span id="timestamp" class="timestamp mr-2"></span>
+                <svg id="toggleIcon" class="w-5 h-5 text-gray-500 transform transition-transform duration-200" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+            </div>
           </button>
-          <div id="thoughtsBox" class="thought-box">
-            <div id="thoughtsContent" class="p-4 text-gray-600"></div>
+          <div id="thoughtsBox" class="thought-box bg-gray-50">
+            <div id="thoughtsContent" class="text-gray-600 text-sm"></div> <!-- #thoughtsContent est DANS #thoughtsBox -->
           </div>
         </div>
-        <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>
+
+        <!-- Zone Solution -->
+        <div class="border rounded-lg shadow-sm flex-grow flex flex-col">
+          <div class="flex justify-between items-center p-3 border-b bg-white">
+            <h3 class="text-xl font-bold text-gray-800">Solution</h3>
+            <button id="saveButton" title="Sauvegarder cette solution">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-3.03L5 18V4z" />
+                </svg>
+                Sauvegarder
+            </button>
           </div>
-          <div id="answerContent" class="text-gray-700 table-responsive"></div>
+          <div id="answerContent" class="text-gray-700 flex-grow bg-white rounded-b-lg"></div> <!-- #answerContent est DANS la div Solution -->
         </div>
+
       </section>
     </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">
-        <h2 class="text-2xl font-bold">Sauvegardes</h2>
-        <button id="closeSaved" class="text-3xl text-gray-600">&times;</button>
+    <div id="savedModalContent" class="p-0"> <!-- Padding géré par les sections internes -->
+      <header class="flex justify-between items-center border-b pb-4 p-4">
+        <h2 class="text-2xl font-bold text-gray-800">Sauvegardes</h2>
+        <button id="closeSaved" class="text-3xl text-gray-500 hover:text-gray-700">×</button>
       </header>
-      <div id="savedListContainer" class="mt-4">
+      <div id="savedListContainer" class="mt-4 flex-grow overflow-y-auto px-4">
         <ul id="savedList" class="space-y-4">
           <!-- Liste des sauvegardes insérée dynamiquement -->
+          <li class="text-gray-500 text-center py-8">Chargement...</li>
         </ul>
       </div>
-      <div class="mt-6">
-        <button id="newExercise" class="blue-button w-full py-3 text-white font-medium rounded-lg">
-          Résoudre un nouvel exercice
+      <div class="modal-footer mt-6 p-4 bg-gray-50 border-t">
+        <button id="newExercise" class="blue-button px-4 py-2 text-white font-medium rounded-lg">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
+               <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
+            </svg>
+          Nouvel Exercice
         </button>
       </div>
     </div>
@@ -265,7 +350,7 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', () => {
-      // Récupération des éléments
+      // --- Récupération des éléments ---
       const form = document.getElementById('problemForm');
       const imageInput = document.getElementById('imageInput');
       const loader = document.getElementById('loader');
@@ -274,6 +359,7 @@
       const answerContent = document.getElementById('answerContent');
       const thoughtsToggle = document.getElementById('thoughtsToggle');
       const thoughtsBox = document.getElementById('thoughtsBox');
+      const toggleIcon = document.getElementById('toggleIcon');
       const imagePreview = document.getElementById('imagePreview');
       const previewImage = document.getElementById('previewImage');
       const timestamp = document.getElementById('timestamp');
@@ -285,16 +371,34 @@
       const newExercise = document.getElementById('newExercise');
       const mainContent = document.getElementById('mainContent');
       const tabs = document.querySelectorAll('.tab');
+      const dropZone = document.querySelector('.uploadArea'); // Récupérer la drop zone
 
+      // --- États et Variables ---
       let startTime = null;
       let timerInterval = null;
-      let thoughtsBuffer = '';
-      let answerBuffer = '';
+      let thoughtsBuffer = ''; // Garder un buffer pour les pensées
       let currentMode = null;
-      let updateTimeout = null;
       let currentEndpoint = 'solve'; // Par défaut: 'solve' pour Gemini Pro
+      let renderTimeout; // Pour le debouncing
+
+      // --- Configuration Marked ---
+      marked.setOptions({
+          gfm: true,
+          breaks: true,
+          highlight: function (code, lang) {
+              const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+              try {
+                   // Structure attendue par marked avec hljs
+                   return hljs.highlight(code, { language, ignoreIllegals: true }).value;
+              } catch (error) {
+                  console.error("Highlighting error:", error);
+                  // Retour en plain text en cas d'erreur
+                  return hljs.highlight(code, { language: 'plaintext', ignoreIllegals: true }).value;
+              }
+          }
+      });
 
-      // Gestion des onglets pour le choix du modèle
+      // --- Gestion des Onglets Modèle ---
       tabs.forEach(tab => {
         tab.addEventListener('click', () => {
           tabs.forEach(t => t.classList.remove('active'));
@@ -303,7 +407,7 @@
         });
       });
 
-      // Mise à jour du temps écoulé
+      // --- Gestion du Timer ---
       const updateTimestamp = () => {
         if (startTime) {
           const seconds = Math.floor((Date.now() - startTime) / 1000);
@@ -311,319 +415,404 @@
         }
       };
       const startTimer = () => { startTime = Date.now(); timerInterval = setInterval(updateTimestamp, 1000); updateTimestamp(); };
-      const stopTimer = () => { clearInterval(timerInterval); startTime = null; timestamp.textContent = ''; };
+      const stopTimer = () => { clearInterval(timerInterval); updateTimestamp(); /* Met à jour une dernière fois */ };
 
-      // Affichage de l'image sélectionnée
+      // --- Gestion Fichiers & Prévisualisation ---
       const handleFileSelect = file => {
-        if (!file) return;
+        if (!file || !file.type.startsWith('image/')) {
+            Swal.fire('Fichier invalide', 'Veuillez sélectionner un fichier image.', 'warning');
+            imagePreview.classList.add('hidden'); // Cacher si invalide
+            imageInput.value = ''; // Réinitialiser l'input file
+            return null; // Indiquer qu'aucun fichier valide n'a été sélectionné
+        }
         const reader = new FileReader();
         reader.onload = e => {
           previewImage.src = e.target.result;
           imagePreview.classList.remove('hidden');
         };
         reader.readAsDataURL(file);
+        return file; // Retourner le fichier valide
       };
 
-      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);
-        });
-      };
+      imageInput.addEventListener('change', e => {
+          if (e.target.files.length > 0) {
+              handleFileSelect(e.target.files[0]);
+          } else {
+              imagePreview.classList.add('hidden');
+          }
+      });
 
-      // 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); }
-      };
+      // --- Gestion Glisser-Déposer ---
+      dropZone.addEventListener('click', () => imageInput.click()); // Rendre toute la zone cliquable
+      dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('border-blue-400', 'bg-blue-50'); });
+      dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400', 'bg-blue-50'); });
+      dropZone.addEventListener('drop', e => {
+          e.preventDefault();
+          dropZone.classList.remove('border-blue-400', 'bg-blue-50');
+          if (e.dataTransfer.files.length > 0) {
+              const file = handleFileSelect(e.dataTransfer.files[0]);
+              if (file) {
+                  // Mettre à jour l'input file pour que le formulaire le trouve
+                  const dataTransfer = new DataTransfer();
+                  dataTransfer.items.add(file);
+                  imageInput.files = dataTransfer.files;
+              }
+          }
+      });
 
-      const updateDisplay = async () => {
-        thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
-        answerContent.innerHTML = marked.parse(answerBuffer);
-        await typesetAnswerIfReady();
-        updateTimeout = null;
-      };
+      // --- Affichage/Masquage Pensées ---
+      thoughtsToggle.addEventListener('click', () => {
+          thoughtsBox.classList.toggle('open');
+          toggleIcon.classList.toggle('rotate-180'); // Pivoter l'icône chevron
+      });
 
-      const scheduleUpdate = () => { if (!updateTimeout) updateTimeout = setTimeout(updateDisplay, 200); };
+      // --- Debouncer pour Rendu MathJax/Highlight ---
+      const debouncedRender = () => {
+          clearTimeout(renderTimeout);
+          renderTimeout = setTimeout(async () => {
+              // Highlightjs d'abord, car MathJax peut interférer avec les classes hljs
+              document.querySelectorAll('#answerContent pre code:not(.hljs)').forEach((block) => {
+                  try {
+                      hljs.highlightElement(block);
+                  } catch (e) { console.error("Highlighting error on block:", e, block); }
+              });
 
-      marked.setOptions({ 
-        gfm: true, 
-        breaks: true,
-        highlight: function(code, lang) {
-          if (lang && hljs.getLanguage(lang)) {
-            try {
-              return hljs.highlight(code, { language: lang }).value;
-            } catch (error) {}
-          }
-          return code;
-        }
-      });
+              // Puis MathJax
+              if (window.mathJaxReady && typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
+                  console.log("Typesetting MathJax...");
+                  await MathJax.typesetPromise([answerContent]).catch(err => console.error('MathJax Typesetting Error:', err));
+                   console.log("MathJax Typesetting Done.");
+              } else {
+                  console.log("MathJax not ready or typesetPromise not available");
+              }
+               // S'assurer que le scroll est bien en bas après le rendu
+              answerContent.scrollTop = answerContent.scrollHeight;
 
-      // Création d'éléments pour différents types de contenu
-      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;
+          }, 300); // Délai de 300ms
       };
 
-      // Envoi de l'image pour résolution
+      // --- Soumission du Formulaire et Traitement SSE ---
       form.addEventListener('submit', async e => {
         e.preventDefault();
         const file = imageInput.files[0];
-        if (!file) { 
-          Swal.fire({
-            icon: 'error',
-            title: 'Image manquante',
-            text: 'Veuillez sélectionner une image.'
-          });
-          return; 
+        if (!file) {
+          Swal.fire({ icon: 'error', title: 'Image manquante', text: 'Veuillez sélectionner une image valide.' });
+          return;
         }
-        
+
+        // Réinitialisation de l'interface
         startTimer();
         loader.classList.remove('hidden');
         solutionSection.classList.add('hidden');
+        form.classList.add('hidden'); // Cacher le formulaire pendant le traitement
         thoughtsContent.innerHTML = '';
-        answerContent.innerHTML = '';
+        answerContent.innerHTML = ''; // Vider le contenu précédent
         thoughtsBuffer = '';
-        answerBuffer = '';
         currentMode = null;
-        thoughtsBox.classList.add('open');
+        thoughtsBox.classList.remove('open'); // Fermer les pensées par défaut
+        toggleIcon.classList.remove('rotate-180');
 
         const formData = new FormData();
         formData.append('image', file);
-        
+
         try {
           const response = await fetch(`/${currentEndpoint}`, { method: 'POST', body: formData });
+
+          if (!response.ok || !response.body) {
+              throw new Error(`Erreur serveur: ${response.status} ${response.statusText}`);
+          }
+
           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:')) continue;
-              const data = JSON.parse(line.slice(5));
-              
-              if (data.mode) {
-                currentMode = data.mode;
-                loader.classList.add('hidden');
-                solutionSection.classList.remove('hidden');
+          buffer = ''; // Buffer pour les données SSE incomplètes
+
+          // Fonction récursive pour lire le stream
+          const processText = async ({ done, value }) => {
+              if (done) {
+                  console.log("Stream terminé.");
+                  stopTimer();
+                  loader.classList.add('hidden');
+                  solutionSection.classList.remove('hidden'); // Afficher la section solution
+                  // Appel final de rendu pour s'assurer que tout est traité
+                  debouncedRender();
+                  return;
               }
-              
-              if (data.content) {
-                // Gestion différenciée selon le type de contenu
-                if (data.type) {
-                  if (currentMode === 'thinking') {
-                    // Pour le mode thinking, on accumule tout en texte
-                    thoughtsBuffer += data.content;
-                  } else if (currentMode === 'answering') {
-                    // Pour le mode answering, on traite selon le type
-                    switch(data.type) {
-                      case 'code':
-                        answerBuffer += "\n```\n" + data.content + "\n```\n";
-                        break;
-                      case 'result':
-                        answerBuffer += "\n> " + data.content.replace(/\n/g, "\n> ") + "\n";
-                        break;
-                      case 'image':
-                        // On traitera les images séparément lors de l'affichage
-                        answerBuffer += `\n![Résultat](data:image/png;base64,${data.content})\n`;
-                        break;
-                      default:
-                        answerBuffer += data.content;
-                    }
+
+              buffer += decoder.decode(value, { stream: true });
+              const lines = buffer.split('\n\n');
+              buffer = lines.pop(); // Garder la dernière ligne potentiellement incomplète
+
+              for (const line of lines) {
+                  if (!line.startsWith('data:')) continue;
+
+                  try {
+                      const data = JSON.parse(line.slice(5));
+
+                      if (data.mode) {
+                          currentMode = data.mode;
+                          if (currentMode === 'thinking' && !thoughtsBox.classList.contains('open')) {
+                             thoughtsBox.classList.add('open'); // Ouvrir automatiquement si pensée détectée
+                             toggleIcon.classList.add('rotate-180');
+                          }
+                           // Afficher la section solution dès qu'on commence à répondre
+                          if (currentMode === 'answering' && solutionSection.classList.contains('hidden')) {
+                               loader.classList.add('hidden');
+                               solutionSection.classList.remove('hidden');
+                          }
+                      }
+
+                      if (data.error) {
+                          const errorEl = document.createElement('div');
+                          errorEl.className = 'my-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded';
+                          errorEl.textContent = `Erreur Stream: ${data.error}`;
+                          answerContent.appendChild(errorEl);
+                          answerContent.scrollTop = answerContent.scrollHeight;
+                          continue; // Passer au prochain message
+                      }
+
+                      if (data.content) {
+                          if (currentMode === 'thinking') {
+                              // Mettre à jour le buffer et l'affichage des pensées
+                              thoughtsBuffer += data.content;
+                              // On peut décommenter la ligne suivante si on veut un rendu live des pensées (peut impacter perf)
+                              // thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
+                              // Ou juste ajouter le texte brut
+                              thoughtsContent.textContent += data.content; // Plus simple, moins de parsing
+                              thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+
+                          } else if (currentMode === 'answering' && data.type) {
+                              let el;
+                              switch (data.type) {
+                                  case 'text':
+                                      el = document.createElement('div');
+                                      el.className = 'content-text';
+                                      // Parse seulement ce bout de texte
+                                      el.innerHTML = marked.parse(data.content);
+                                      // Append intelligemment pour éviter trop de <p> vides si on reçoit juste "$...$"
+                                       if (el.firstChild && el.firstChild.nodeName === 'P' && !el.firstChild.nextSibling && el.firstChild.innerHTML.trim() === data.content.trim()) {
+                                           // Si le contenu parsé est juste le contenu original dans un <p>, on ajoute le contenu brut (MathJax le prendra)
+                                           answerContent.append(document.createTextNode(data.content));
+                                       } else {
+                                          // Sinon, on ajoute le HTML parsé
+                                          answerContent.appendChild(el);
+                                       }
+                                      break;
+                                  case 'code':
+                                      // Utiliser marked pour créer le <pre><code> avec la bonne classe pour hljs
+                                      el = document.createElement('div');
+                                      el.className = 'content-code';
+                                      el.innerHTML = marked.parse('```' + (data.lang || '') + '\n' + data.content + '\n```');
+                                      answerContent.appendChild(el.firstChild); // Ajouter directement le <pre> généré par marked
+                                      break;
+                                  case 'result':
+                                      el = document.createElement('pre'); // Utiliser <pre> pour préserver le formatage
+                                      el.className = 'code-execution-result';
+                                      el.textContent = data.content;
+                                      answerContent.appendChild(el);
+                                      break;
+                                  case 'image':
+                                      el = document.createElement('div');
+                                      el.className = 'content-image'; // Classe CSS pour le style
+                                      el.innerHTML = `<img src="data:image/png;base64,${data.content}" alt="Generated image" class="inline-block max-w-full h-auto border rounded">`; // Styles inline/tailwind
+                                      answerContent.appendChild(el);
+                                      break;
+                                  default:
+                                      console.warn("Type de contenu inconnu reçu:", data.type, data.content);
+                                      // Ajouter comme texte simple en fallback
+                                      el = document.createElement('span');
+                                      el.textContent = data.content;
+                                      answerContent.appendChild(el);
+                              }
+                               // Scroller et demander un rendu
+                               answerContent.scrollTop = answerContent.scrollHeight;
+                               debouncedRender();
+                          }
+                      }
+                  } catch (e) {
+                      console.error("Erreur parsing JSON du stream:", e, "Ligne:", line);
                   }
-                } else {
-                  // Rétrocompatibilité avec l'ancien format
-                  if (currentMode === 'thinking') { thoughtsBuffer += data.content; }
-                  else if (currentMode === 'answering') { answerBuffer += data.content; }
-                }
               }
-              
-              if (data.error) {
-                answerBuffer += `\n**Erreur:** ${data.error}\n`;
-              }
-            }
-            
-            scheduleUpdate();
+              // Lire le chunk suivant
+              reader.read().then(processText).catch(streamError => {
+                 console.error("Erreur de lecture du stream:", streamError);
+                 stopTimer();
+                 loader.classList.add('hidden');
+                 // Afficher l'erreur dans la zone de réponse
+                 const errorEl = document.createElement('div');
+                 errorEl.className = 'my-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded';
+                 errorEl.textContent = `Erreur de lecture: ${streamError.message}`;
+                 answerContent.appendChild(errorEl);
+                 solutionSection.classList.remove('hidden'); // Afficher la section pour voir l'erreur
+              });
           };
-          
-          while (true) {
-            const { done, value } = await reader.read();
-            if (done) {
-              if (buffer) {
-                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 (e) {
-                  console.error('Erreur lors du parsing du dernier morceau:', e);
-                }
-              }
-              scheduleUpdate();
-              break;
-            }
-            await processChunk(value);
-          }
-          
-          stopTimer();
-        } catch (error) {
-          console.error('Erreur:', error);
-          Swal.fire({
-            icon: 'error',
-            title: 'Erreur',
-            text: 'Une erreur est survenue lors du traitement de votre demande.'
+
+          // Démarrer la lecture du stream
+          reader.read().then(processText).catch(initialReadError => {
+             console.error("Erreur initiale de lecture du stream:", initialReadError);
+             stopTimer();
+             loader.classList.add('hidden');
+             Swal.fire('Erreur Réseau', 'Impossible de démarrer la lecture de la réponse du serveur.', 'error');
+             form.classList.remove('hidden'); // Ré-afficher le formulaire si erreur initiale
           });
+
+        } catch (error) {
+          console.error('Erreur fetch ou setup:', error);
+          Swal.fire({ icon: 'error', title: 'Erreur', text: `Une erreur est survenue: ${error.message}` });
           loader.classList.add('hidden');
+          form.classList.remove('hidden'); // Ré-afficher le formulaire en cas d'erreur
           stopTimer();
         }
       });
 
-      // Sauvegarde de la solution avec SweetAlert2
+      // --- Gestion Sauvegardes ---
+      const SAVED_EXERCISES_KEY = 'savedExercises_mariam_m1';
+
+      // Sauvegarde
       saveButton.addEventListener('click', () => {
-        Swal.fire({
-          title: 'Sauvegarder la solution',
-          input: 'text',
-          inputLabel: 'Nom de la sauvegarde',
-          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,
-              thinking: thoughtsContent.innerHTML,
-              date: new Date().toLocaleString()
-            };
-            let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
-            savedExercises[saveName] = saveData;
-            localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
+        // Finaliser le rendu avant sauvegarde
+        if (thoughtsBuffer) {
+            thoughtsContent.innerHTML = marked.parse(thoughtsBuffer); // Assurer que les pensées sont parsées
+        }
+        // Appeler debouncedRender une dernière fois et attendre un peu
+        debouncedRender();
+        setTimeout(() => {
             Swal.fire({
-              icon: 'success',
-              title: 'Sauvegarde réussie',
-              text: 'Votre solution a bien été sauvegardée !',
-              timer: 2000,
-              showConfirmButton: false
+              title: 'Sauvegarder la solution',
+              input: 'text',
+              inputLabel: 'Nom de la sauvegarde',
+              inputPlaceholder: 'Ex: Exercice Trigonométrie Ch. 5',
+              showCancelButton: true,
+              confirmButtonText: 'Sauvegarder',
+              cancelButtonText: 'Annuler',
+              inputValidator: (value) => {
+                if (!value) {
+                  return 'Veuillez entrer un nom !'
+                }
+              }
+            }).then((result) => {
+              if (result.isConfirmed && result.value) {
+                const saveName = result.value;
+                const saveData = {
+                  name: saveName, // Stocker le nom aussi dans l'objet
+                  answer: answerContent.innerHTML, // Sauvegarder le HTML rendu
+                  thinking: thoughtsContent.innerHTML, // Sauvegarder le HTML rendu
+                  date: new Date().toISOString() // Format ISO pour tri plus facile
+                };
+                let savedExercises = JSON.parse(localStorage.getItem(SAVED_EXERCISES_KEY) || '[]');
+                // Vérifier si un nom existe déjà (optionnel: proposer remplacement)
+                const existingIndex = savedExercises.findIndex(item => item.name === saveName);
+                if (existingIndex > -1) {
+                    // Remplacer l'ancienne sauvegarde
+                    savedExercises[existingIndex] = saveData;
+                } else {
+                    savedExercises.push(saveData);
+                }
+                // Trier par date (plus récent en premier)
+                savedExercises.sort((a, b) => new Date(b.date) - new Date(a.date));
+
+                localStorage.setItem(SAVED_EXERCISES_KEY, JSON.stringify(savedExercises));
+                Swal.fire({
+                  icon: 'success',
+                  title: 'Sauvegarde réussie!',
+                  timer: 1500,
+                  showConfirmButton: false
+                });
+              }
             });
-          }
-        });
+        }, 500); // Attendre 500ms que le rendu final soit probablement terminé
       });
 
-      // Chargement des sauvegardes dans le modal
+      // Chargement de la liste
       const loadSavedList = () => {
-        savedList.innerHTML = '';
-        const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
-        
-        if (Object.keys(savedExercises).length === 0) {
+        savedList.innerHTML = ''; // Vider la liste actuelle
+        const savedExercises = JSON.parse(localStorage.getItem(SAVED_EXERCISES_KEY) || '[]');
+
+        if (savedExercises.length === 0) {
           savedList.innerHTML = '<li class="text-gray-500 text-center py-8">Aucune sauvegarde disponible</li>';
           return;
         }
-        
-        for (const [name, data] of Object.entries(savedExercises)) {
+
+        savedExercises.forEach(data => {
           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>
+          li.className = 'border-b pb-3 mb-3 flex justify-between items-center group'; // Ajouter group pour hover sur bouton delete
+
+          const contentDiv = document.createElement('div');
+          contentDiv.className = 'flex-grow mr-4';
+
+          const loadButton = document.createElement('button');
+          loadButton.className = 'text-left text-blue-600 hover:underline focus:outline-none';
+          loadButton.dataset.saveName = data.name;
+          loadButton.innerHTML = `
+            <span class="font-medium">${data.name}</span>
+            <span class="block text-gray-500 text-xs">${new Date(data.date).toLocaleString('fr-FR')}</span>
+          `;
+          contentDiv.appendChild(loadButton);
+
+          const deleteButton = document.createElement('button');
+          deleteButton.className = 'delete-button flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200';
+          deleteButton.dataset.deleteName = data.name;
+          deleteButton.title = "Supprimer cette sauvegarde";
+          deleteButton.innerHTML = `
+            <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>
           `;
+
+          li.appendChild(contentDiv);
+          li.appendChild(deleteButton);
           savedList.appendChild(li);
-        }
+        });
       };
 
-      // Gestion des clics sur les sauvegardes
+      // Gestion des clics dans la liste (chargement/suppression)
       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];
+        const loadBtn = e.target.closest('[data-save-name]');
+        const deleteBtn = e.target.closest('[data-delete-name]');
+
+        if (loadBtn) {
+          const saveName = loadBtn.dataset.saveName;
+          const savedExercises = JSON.parse(localStorage.getItem(SAVED_EXERCISES_KEY) || '[]');
+          const data = savedExercises.find(item => item.name === saveName);
           if (data) {
             form.classList.add('hidden');
             loader.classList.add('hidden');
             solutionSection.classList.remove('hidden');
-            thoughtsContent.innerHTML = data.thinking;
-            answerContent.innerHTML = data.answer;
+            thoughtsContent.innerHTML = data.thinking; // Restaurer le HTML
+            answerContent.innerHTML = data.answer;     // Restaurer le HTML
             savedModal.classList.remove('active');
-            
-            // Réappliquer MathJax et highlighting
-            MathJax.typesetPromise().then(() => {
-              applyHighlighting();
-            });
+            stopTimer(); // Arrêter le timer si on charge une sauvegarde
+            timestamp.textContent = ''; // Effacer le temps écoulé
+
+            // Forcer le rendu MathJax/Highlight sur le contenu chargé
+             setTimeout(() => { // Donner le temps au DOM de se mettre à jour
+                 if (data.thinking) {
+                    thoughtsBox.classList.add('open');
+                    toggleIcon.classList.add('rotate-180');
+                 } else {
+                    thoughtsBox.classList.remove('open');
+                    toggleIcon.classList.remove('rotate-180');
+                 }
+                 debouncedRender();
+             }, 100);
           }
-        }
-        
-        // 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;
-          
+        } else if (deleteBtn) {
+          const deleteName = deleteBtn.dataset.deleteName;
           Swal.fire({
             title: 'Êtes-vous sûr ?',
-            text: "Cette sauvegarde sera définitivement supprimée.",
+            text: `Supprimer définitivement la sauvegarde "${deleteName}" ?`,
             icon: 'warning',
             showCancelButton: true,
-            confirmButtonColor: '#3085d6',
-            cancelButtonColor: '#d33',
+            confirmButtonColor: '#d33', // Rouge pour confirmer la suppression
+            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();
+              let savedExercises = JSON.parse(localStorage.getItem(SAVED_EXERCISES_KEY) || '[]');
+              savedExercises = savedExercises.filter(item => item.name !== deleteName);
+              localStorage.setItem(SAVED_EXERCISES_KEY, JSON.stringify(savedExercises));
+              Swal.fire( 'Supprimé !', 'La sauvegarde a été supprimée.', 'success' );
+              loadSavedList(); // Recharger la liste
             }
           });
         }
@@ -632,19 +821,39 @@
       // Ouverture / fermeture du modal de sauvegardes
       openSaved.addEventListener('click', () => { loadSavedList(); savedModal.classList.add('active'); });
       closeSaved.addEventListener('click', () => { savedModal.classList.remove('active'); });
+       // Fermer le modal si on clique en dehors du contenu
+       savedModal.addEventListener('click', (e) => {
+            if (e.target === savedModal) {
+                savedModal.classList.remove('active');
+            }
+       });
+
 
-      // Bouton présent uniquement dans le modal pour lancer un nouvel exercice
-      newExercise.addEventListener('click', () => {
-        form.reset();
+      // Bouton "Nouvel Exercice"
+      const resetApp = () => {
+        form.reset(); // Réinitialiser les champs du formulaire
         form.classList.remove('hidden');
         solutionSection.classList.add('hidden');
-        imagePreview.classList.add('hidden');
+        loader.classList.add('hidden');
+        imagePreview.classList.add('hidden'); // Cacher la prévisualisation
+        previewImage.src = ''; // Vider la source de l'image
+        imageInput.value = ''; // Important pour pouvoir re-sélectionner le même fichier
         thoughtsContent.innerHTML = '';
         answerContent.innerHTML = '';
         thoughtsBuffer = '';
-        answerBuffer = '';
-        savedModal.classList.remove('active');
-      });
+        currentMode = null;
+        stopTimer();
+        timestamp.textContent = '';
+        thoughtsBox.classList.remove('open');
+        toggleIcon.classList.remove('rotate-180');
+        savedModal.classList.remove('active'); // Fermer le modal si ouvert
+      }
+
+      newExercise.addEventListener('click', resetApp);
+
+      // --- Initialisation ---
+      resetApp(); // Assurer un état propre au chargement
+
     });
   </script>
 </body>