Update templates/index.html

templates/index.html

@@ -11,30 +11,41 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
   <!-- Highlight.js pour la coloration syntaxique -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <!-- Include Python language if needed -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
 
-  <!-- Configuration de MathJax -->
+
+  <!-- Marked.js for Markdown parsing -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/marked.umd.min.js"></script>
+
+  <!-- MathJax Configuration -->
   <script>
     window.MathJax = {
       tex: {
         inlineMath: [['$', '$']],
         displayMath: [['$$', '$$']],
         processEscapes: true,
-        packages: {'[+]': ['autoload', 'ams']}
+        packages: {'[+]': ['autoload', 'ams']} // Using autoload package
       },
       options: {
         enableMenu: false,
         messageStyle: 'none',
-        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] // Important pour Highlight.js
+        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] // Ensure MathJax skips code blocks
       },
       startup: {
-        pageReady: () => { window.mathJaxReady = true; }
+        // Use async ready function to ensure MathJax is fully loaded
+        ready: () => {
+            console.log('MathJax is ready');
+            MathJax.startup.defaultReady();
+            window.mathJaxReady = true; // Set flag when ready
+        }
       }
     };
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/marked.umd.min.js"></script>
+
 
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
@@ -62,31 +73,35 @@
     @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
     .thought-box {
-      transition: max-height 0.3s ease-out;
+      transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
       max-height: 0;
       overflow: hidden;
+      opacity: 0;
+      border: 1px solid #e5e7eb; /* Add border for clarity */
+      border-radius: 0.375rem; /* Rounded corners */
+      margin-top: 0.5rem; /* Spacing */
+    }
+    .thought-box.open {
+       max-height: 500px; /* Or a larger value if needed */
+       opacity: 1;
     }
-    .thought-box.open { max-height: 500px; }
 
     #thoughtsContent, #answerContent {
-      max-height: 60vh; /* Limite la hauteur pour éviter un scroll trop long */
+      max-height: 60vh; /* Use viewport height for better scaling */
       overflow-y: auto;
       scroll-behavior: smooth;
-      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 */
+      white-space: pre-wrap; /* Allow text wrapping */
+      word-wrap: break-word; /* Break long words */
+      background-color: #f9fafb; /* Slight background tint */
+      padding: 1rem; /* Padding inside content areas */
     }
-
-    #thoughtsContent {
-        background-color: #f9fafb; /* Fond légèrement différent pour les pensées */
+    #answerContent {
+       background-color: white; /* Keep answer content white */
     }
 
     .preview-image { max-width: 300px; max-height: 300px; object-fit: contain; }
 
-    .timestamp { color: #3b82f6; font-size: 0.9em; margin-left: 8px; }
+    .timestamp { color: #6b7280; font-size: 0.8em; margin-left: 8px; }
 
     table {
       border-collapse: collapse;
@@ -95,19 +110,20 @@
       border: 1px solid #d1d5db;
     }
     th, td {
-      border: 1px solid #d1d5db;
-      padding: 0.5rem;
+      border: 1px solid #e5e7eb; /* Lighter border */
+      padding: 0.75rem; /* More padding */
       text-align: left;
     }
     th { background-color: #f3f4f6; font-weight: 600; }
-    .table-responsive { overflow-x: auto; margin: 1rem 0; } /* Ajouter un margin */
+    .table-responsive { overflow-x: auto; }
 
     #saveButton {
-      background: #10b981; /* Vert pour sauvegarder */
+      background: #10b981; /* Green button */
       color: white;
       padding: 0.5rem 1rem;
       border-radius: 0.375rem;
       transition: background-color 0.2s ease;
+      font-weight: 500;
     }
     #saveButton:hover { background: #059669; }
 
@@ -115,168 +131,129 @@
       display: none;
       position: fixed;
       inset: 0;
-      background: rgba(0,0,0,0.5);
+      background: rgba(0,0,0,0.6); /* Darker overlay */
       z-index: 50;
+      overflow-y: auto; /* Allow modal scroll */
     }
-    #savedModal.active { display: flex; align-items: center; justify-content: center;} /* Centrer le modal */
+    #savedModal.active { display: flex; align-items: center; justify-content: center; }
     #savedModalContent {
       background: #fff;
       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 */
+      max-width: 800px; /* Limit max width */
+      max-height: 90vh; /* Limit max height */
+      border-radius: 0.5rem;
+      overflow: hidden; /* Hide inner overflow initially */
       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 {
-      background-color: #f8f8f8;
-      border: 1px solid #e2e8f0;
-      border-radius: 0.375rem;
-      padding: 1rem;
-      margin: 1rem 0; /* Espace autour des blocs de code */
+    #savedModalContent header { padding: 1.5rem; border-bottom: 1px solid #e5e7eb; }
+    #savedModalContent #savedListContainer { padding: 1.5rem; overflow-y: auto; flex-grow: 1; }
+    #savedModalContent footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; background-color: #f9fafb; }
+
+
+    /* Styles specific to code blocks generated by marked.js and highlighted by highlight.js */
+    #answerContent pre code.hljs { /* Target highlighted code blocks */
+      display: block;
       overflow-x: auto;
-      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-      white-space: pre; /* Conserver les espaces et retours ligne du code */
+      padding: 1em;
+      background: #f3f4f6; /* Background matching Tailwind gray */
+      color: #1f2937; /* Dark text */
+      border-radius: 0.375rem;
+      border: 1px solid #e5e7eb;
     }
 
-    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;
+    /* Style for blockquotes used for code execution results */
+    #answerContent blockquote {
+      background-color: #eff6ff; /* Lighter blue background */
+      border-left: 4px solid #3b82f6; /* Blue left border */
+      padding: 0.75rem 1rem;
+      margin: 1rem 0;
+      color: #1e40af; /* Darker blue text */
+      white-space: pre-wrap; /* Preserve line breaks and spaces */
+      word-wrap: break-word; /* Break long lines */
+      font-style: italic; /* Italicize results */
     }
-
-    pre code {
-        background-color: transparent; /* Pas de fond spécial dans pre */
-        padding: 0;
-        border-radius: 0;
+    #answerContent blockquote p {
+       margin: 0; /* Remove default paragraph margins inside blockquote */
     }
 
-    .code-execution-result {
-      background-color: #f0fff4; /* Fond vert pâle pour résultat */
-      border-left: 4px solid #48bb78;
-      padding: 1rem;
-      margin: 1rem 0; /* Espace autour */
-      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-      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 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%;
-        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;
+    /* Styles for images within the answer */
+    #answerContent img {
+      max-width: 100%;
+      height: auto; /* Maintain aspect ratio */
+      display: block; /* Prevent extra space below image */
+      margin: 1rem auto; /* Center images with margin */
+      border: 1px solid #d1d5db; /* Optional border */
+      border-radius: 0.25rem; /* Optional rounded corners */
     }
 
-    /* Onglets pour choisir le modèle */
+    /* Tabs styling */
     .tabs {
       display: flex;
       border-bottom: 1px solid #e2e8f0;
-      margin-bottom: 1rem;
+      margin-bottom: 1.5rem; /* More space below tabs */
     }
 
     .tab {
-      padding: 0.5rem 1rem;
+      padding: 0.75rem 1.5rem; /* More padding */
       cursor: pointer;
-      border-bottom: 2px solid transparent;
-      color: #6b7280; /* Gris par défaut */
-      transition: color 0.2s ease, border-color 0.2s ease;
+      border-bottom: 3px solid transparent;
+      color: #4b5563; /* Gray text */
+      font-weight: 500;
+      transition: border-color 0.2s ease, color 0.2s ease;
     }
+
     .tab:hover {
-        color: #3b82f6;
+        color: #1f2937; /* Darker text on hover */
     }
 
     .tab.active {
-      border-bottom: 2px solid #3b82f6;
-      color: #3b82f6;
+      border-bottom: 3px solid #3b82f6;
+      color: #3b82f6; /* Blue text */
       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="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">
+<body class="bg-gray-50 p-4 min-h-screen flex items-center justify-center">
+  <div class="max-w-4xl mx-auto w-full bg-white p-8 rounded-lg shadow-md">
+    <header class="p-6 text-center mb-6 border-b border-gray-200">
       <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>
+      <p class="text-gray-600 mt-2">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">
-            <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 id="openSaved" class="text-sm blue-button px-4 py-2 text-white rounded-md shadow-sm">
+            Voir Sauvegardes
         </button>
       </div>
     </header>
 
-    <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 -->
+    <main id="mainContent">
+      <form id="problemForm" class="space-y-6" novalidate>
+        <!-- Tabs for model selection -->
         <div class="tabs">
-          <div class="tab active" data-endpoint="solve">Gemini Pro</div>
-          <div class="tab" data-endpoint="solved">Gemini Flash</div>
+          <div class="tab active" data-endpoint="solve">Gemini 1.5 Pro</div> <!-- Updated Name -->
+          <div class="tab" data-endpoint="solved">Gemini 1.5 Flash</div> <!-- Updated Name -->
         </div>
 
-        <!-- Zone de dépôt / sélection 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">
+        <!-- Image upload area -->
+        <div class="uploadArea p-8 text-center relative rounded-md" 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 text-blue-400">
-              <svg class="w-8 h-8" 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 bg-blue-50">
+              <svg class="w-8 h-8 text-blue-500" 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>
             </div>
             <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">
+            <p class="text-gray-500 text-sm">ou cliquez pour sélectionner (PNG, JPG, WEBP...)</p>
           </div>
         </div>
-
-        <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>
+        <!-- Image preview -->
+        <div id="imagePreview" class="hidden text-center mt-4">
+          <img id="previewImage" class="preview-image mx-auto border border-gray-300 rounded" alt="Prévisualisation de l'image">
+        </div>
+        <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition duration-200">
           Résoudre le problème
         </button>
       </form>
@@ -284,73 +261,97 @@
       <!-- Loader -->
       <div id="loader" class="hidden mt-8 text-center">
         <span class="loader"></span>
-        <p class="mt-4 text-gray-600">Analyse en cours...</p>
+        <p class="mt-4 text-gray-600 font-medium">Analyse en cours...</p>
       </div>
 
-      <!-- Zone d'affichage de la solution -->
-      <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">
+      <!-- Solution display area -->
+      <section id="solution" class="hidden mt-8 space-y-6">
+         <!-- Thinking Process Toggle and Content -->
+        <div class="border rounded-md overflow-hidden">
+           <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-3 bg-gray-100 hover:bg-gray-200 transition duration-150">
             <span class="font-medium text-gray-700">Processus de Réflexion</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>
+             <div class="flex items-center">
+                 <span id="timestamp" class="timestamp"></span>
+                 <!-- Simple chevron icon -->
+                 <svg id="toggleIcon" class="w-5 h-5 text-gray-600 ml-2 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                 </svg>
+             </div>
           </button>
-          <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 id="thoughtsBox" class="thought-box"> <!-- Content goes inside the box -->
+                <div id="thoughtsContent" class="p-4 text-sm text-gray-600"></div>
+            </div>
         </div>
 
-        <!-- Zone Solution -->
-        <div class="border rounded-lg shadow-sm flex-grow flex flex-col">
+        <!-- Answer Content -->
+        <div class="border rounded-md">
           <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>
+            <h3 class="text-xl font-semibold text-gray-800">Solution Détaillée</h3>
+            <button id="saveButton">Sauvegarder</button>
+          </div>
+          <div id="answerContent" class="p-4 text-gray-700 table-responsive">
+              <!-- Content will be rendered here -->
           </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 -->
+  <!-- Saved Solutions Modal -->
   <div id="savedModal">
-    <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>
+    <div id="savedModalContent">
+      <header class="flex justify-between items-center">
+        <h2 class="text-2xl font-bold text-gray-800">Solutions Sauvegardées</h2>
         <button id="closeSaved" class="text-3xl text-gray-500 hover:text-gray-700">×</button>
       </header>
-      <div id="savedListContainer" class="mt-4 flex-grow overflow-y-auto px-4">
+      <div id="savedListContainer">
         <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>
+          <!-- Saved items will be listed here -->
         </ul>
       </div>
-      <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
+      <footer class="text-center">
+        <button id="newExercise" class="blue-button w-full py-3 text-white font-medium rounded-lg">
+          Résoudre un nouvel exercice
         </button>
-      </div>
+      </footer>
     </div>
   </div>
 
   <script>
+    // Ensure Marked and Highlight.js are loaded before configuring
+    // Note: hljs might already be available if scripts load synchronously
+    // but deferring configuration is safer.
+
+    function configureMarked() {
+        if (typeof marked === 'undefined' || typeof hljs === 'undefined') {
+            console.log("Waiting for Marked and Highlight.js...");
+            setTimeout(configureMarked, 100); // Check again shortly
+            return;
+        }
+        console.log("Configuring Marked.js");
+        marked.setOptions({
+            gfm: true,          // Enable GitHub Flavored Markdown
+            breaks: true,       // Use GFM line breaks (single newline = <br>)
+            pedantic: false,    // Don't be strict about syntax errors
+            smartLists: true,   // Use smarter list behavior
+            smartypants: false, // Don't auto-correct quotes, dashes, etc.
+            highlight: function (code, lang) {
+                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                try {
+                    return hljs.highlight(code, { language: language, ignoreIllegals: true }).value;
+                } catch (error) {
+                     console.error("Highlighting error:", error);
+                     return hljs.highlight(code, { language: 'plaintext', ignoreIllegals: true }).value; // Fallback
+                }
+            }
+        });
+        window.markedConfigured = true; // Flag that configuration is done
+    }
+
+    configureMarked(); // Start configuration attempt
+
     document.addEventListener('DOMContentLoaded', () => {
-      // --- Récupération des éléments ---
+      // Element retrieval
       const form = document.getElementById('problemForm');
       const imageInput = document.getElementById('imageInput');
       const loader = document.getElementById('loader');
@@ -369,61 +370,44 @@
       const savedModal = document.getElementById('savedModal');
       const savedList = document.getElementById('savedList');
       const newExercise = document.getElementById('newExercise');
-      const mainContent = document.getElementById('mainContent');
+      const mainContent = document.getElementById('mainContent'); // Not used currently, but kept
       const tabs = document.querySelectorAll('.tab');
-      const dropZone = document.querySelector('.uploadArea'); // Récupérer la drop zone
+      const dropZone = document.querySelector('.uploadArea');
 
-      // --- États et Variables ---
+      // State variables
       let startTime = null;
       let timerInterval = null;
-      let thoughtsBuffer = ''; // Garder un buffer pour les pensées
-      let currentMode = 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;
-              }
-          }
-      });
+      let thoughtsBuffer = '';
+      let answerBuffer = '';
+      let currentMode = null; // 'thinking', 'answering'
+      let updateTimeout = null;
+      let currentEndpoint = 'solve'; // Default endpoint
+      let eventSource = null; // To hold the EventSource object for potential closing
 
-      // --- Gestion des Onglets Modèle ---
-      tabs.forEach(tab => {
-        tab.addEventListener('click', () => {
-          tabs.forEach(t => t.classList.remove('active'));
-          tab.classList.add('active');
-          currentEndpoint = tab.dataset.endpoint;
-        });
-      });
+      // --- Helper Functions ---
 
-      // --- Gestion du Timer ---
+      // Update elapsed time
       const updateTimestamp = () => {
         if (startTime) {
           const seconds = Math.floor((Date.now() - startTime) / 1000);
-          timestamp.textContent = `${seconds}s`;
+          timestamp.textContent = `(${seconds}s)`;
+        } else {
+          timestamp.textContent = '';
         }
       };
-      const startTimer = () => { startTime = Date.now(); timerInterval = setInterval(updateTimestamp, 1000); updateTimestamp(); };
-      const stopTimer = () => { clearInterval(timerInterval); updateTimestamp(); /* Met à jour une dernière fois */ };
+      const startTimer = () => { startTime = Date.now(); updateTimestamp(); timerInterval = setInterval(updateTimestamp, 1000); };
+      const stopTimer = () => { clearInterval(timerInterval); updateTimestamp(); /* Keep final time */ }; // Keep showing final time
 
-      // --- Gestion Fichiers & Prévisualisation ---
+      // Handle file selection (preview)
       const handleFileSelect = file => {
         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é
+           if(file) { // Only show error if a file was actually selected/dropped
+                Swal.fire('Erreur', 'Veuillez sélectionner un fichier image valide.', 'error');
+           }
+           imagePreview.classList.add('hidden');
+           previewImage.src = '';
+           imageInput.value = ''; // Clear the input
+           return false; // Indicate failure
         }
         const reader = new FileReader();
         reader.onload = e => {
@@ -431,430 +415,484 @@
           imagePreview.classList.remove('hidden');
         };
         reader.readAsDataURL(file);
-        return file; // Retourner le fichier valide
+        return true; // Indicate success
       };
 
-      imageInput.addEventListener('change', e => {
-          if (e.target.files.length > 0) {
-              handleFileSelect(e.target.files[0]);
-          } else {
-              imagePreview.classList.add('hidden');
-          }
-      });
+      // Toggle thoughts box visibility
+      const toggleThoughts = () => {
+         thoughtsBox.classList.toggle('open');
+         toggleIcon.classList.toggle('rotate-180'); // Rotate chevron
+      }
+      thoughtsToggle.addEventListener('click', toggleThoughts);
+
+      // Apply syntax highlighting to code blocks
+      const applyHighlighting = () => {
+         // Check if hljs is available
+         if (typeof hljs !== 'undefined') {
+            document.querySelectorAll('#answerContent pre code:not(.hljs)').forEach((block) => {
+                 try {
+                    hljs.highlightElement(block);
+                 } catch (error) {
+                    console.error("Error applying highlight.js:", error, block);
+                 }
+            });
+         } else {
+            console.warn("highlight.js not ready for highlighting.");
+         }
+      };
 
-      // --- 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;
-              }
-          }
-      });
 
-      // --- Affichage/Masquage Pensées ---
-      thoughtsToggle.addEventListener('click', () => {
-          thoughtsBox.classList.toggle('open');
-          toggleIcon.classList.toggle('rotate-180'); // Pivoter l'icône chevron
-      });
+       // Render MathJax and update display (debounced)
+       const typesetMathJax = async () => {
+           if (window.mathJaxReady && typeof MathJax !== 'undefined') {
+               console.log("Typesetting MathJax...");
+               try {
+                    // Clear previous typesetting state if necessary before re-typesetting
+                    // MathJax.startup.document.reset(); // Use cautiously, might have side effects
+                    // MathJax.startup.document.clear(); // Alternative
+                    await MathJax.typesetPromise([answerContent]); // Target specific container
+                    console.log("MathJax typesetting complete.");
+               } catch (error) {
+                    console.error('MathJax typesetting error:', error);
+               }
+           } else {
+               console.log("MathJax not ready, deferring typesetting.");
+               // No need for setTimeout here, updateDisplay handles debouncing
+           }
+       };
+
+
+       // Update content display (debounced)
+       const updateDisplay = async () => {
+            if (!window.markedConfigured) {
+                console.log("Marked not configured, deferring display update.");
+                scheduleUpdate(); // Reschedule
+                return;
+            }
+            console.log("Updating display...");
+            // Use try-catch for parsing as large/complex markdown can sometimes cause issues
+            try {
+                thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
+                answerContent.innerHTML = marked.parse(answerBuffer);
+
+                // Apply Highlighting *after* setting innerHTML from marked
+                applyHighlighting();
+
+                // Typeset MathJax *after* highlighting (or concurrently if no dependencies)
+                await typesetMathJax();
+
+                 // Scroll to bottom (optional)
+                 answerContent.scrollTop = answerContent.scrollHeight;
+                 thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+
+            } catch (error) {
+                 console.error("Error parsing Markdown:", error);
+                 // Display error message to user?
+                 answerContent.innerHTML = "<p class='text-red-500'>Erreur lors de l'affichage de la réponse.</p>";
+            }
 
-      // --- 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); }
-              });
-
-              // 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;
-
-          }, 300); // Délai de 300ms
+            updateTimeout = null; // Clear timeout flag
+        };
+
+
+      // Schedule display update (debounce mechanism)
+      const scheduleUpdate = () => {
+         if (!updateTimeout) {
+             updateTimeout = setTimeout(updateDisplay, 250); // Debounce time (250ms)
+         }
       };
 
-      // --- Soumission du Formulaire et Traitement SSE ---
+      // --- Event Listeners ---
+
+      // Tab switching
+      tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+          if (eventSource) { // Prevent switching during generation
+                Swal.fire('Attention', 'Veuillez attendre la fin de la génération actuelle avant de changer de modèle.', 'warning');
+                return;
+            }
+          tabs.forEach(t => t.classList.remove('active'));
+          tab.classList.add('active');
+          currentEndpoint = tab.dataset.endpoint;
+          console.log("Switched to endpoint:", currentEndpoint);
+        });
+      });
+
+      // File input change
+      imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
+
+      // Drag and Drop
+      dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('border-blue-400', 'bg-blue-100'); });
+      dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400', 'bg-blue-100'); });
+      dropZone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropZone.classList.remove('border-blue-400', 'bg-blue-100');
+        if (e.dataTransfer.files.length > 0) {
+            // Pass the file to the input and the handler
+            imageInput.files = e.dataTransfer.files;
+            handleFileSelect(e.dataTransfer.files[0]);
+        }
+      });
+
+      // Form submission (main logic)
       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 valide.' });
+          Swal.fire('Image manquante', 'Veuillez sélectionner ou déposer une image.', 'warning');
           return;
         }
+        // Ensure the preview is updated if a file was selected but not dropped
+        if (!handleFileSelect(file)) return; // Re-validate just in case
 
-        // Réinitialisation de l'interface
+        // --- Reset UI ---
         startTimer();
         loader.classList.remove('hidden');
         solutionSection.classList.add('hidden');
-        form.classList.add('hidden'); // Cacher le formulaire pendant le traitement
         thoughtsContent.innerHTML = '';
-        answerContent.innerHTML = ''; // Vider le contenu précédent
+        answerContent.innerHTML = '';
         thoughtsBuffer = '';
+        answerBuffer = '';
         currentMode = null;
-        thoughtsBox.classList.remove('open'); // Fermer les pensées par défaut
-        toggleIcon.classList.remove('rotate-180');
+        if (!thoughtsBox.classList.contains('open')) { // Open thoughts box automatically
+            toggleThoughts();
+        }
+        if (eventSource) { // Close previous connection if any
+           eventSource.close();
+           console.log("Previous EventSource closed.");
+        }
 
+        // --- Prepare and Send Request ---
         const formData = new FormData();
         formData.append('image', file);
 
-        try {
-          const response = await fetch(`/${currentEndpoint}`, { method: 'POST', body: formData });
+        const url = `/${currentEndpoint}`; // Use the selected endpoint
+        console.log(`Sending request to: ${url}`);
 
-          if (!response.ok || !response.body) {
-              throw new Error(`Erreur serveur: ${response.status} ${response.statusText}`);
-          }
-
-          const reader = response.body.getReader();
-          const decoder = new TextDecoder();
-          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;
-              }
-
-              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);
-                  }
-              }
-              // 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
-              });
-          };
-
-          // 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
-          });
+        eventSource = new EventSource(url + `?t=${Date.now()}`, { // Use GET for EventSource traditionally, or adapt backend if POST needed via fetch stream
+             method: 'POST', // NOTE: EventSource standard doesn't support POST body, this might require a fetch-based stream reader instead
+             body: formData // This body part is NON-STANDARD for EventSource and likely won't work directly
+        });
 
-        } 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();
-        }
-      });
+        // --- Use Fetch API for Streaming with POST ---
+        // Replace the EventSource code above with this Fetch-based approach:
+        fetch(url, {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => {
+            if (!response.ok) {
+                // Try to read error message from server if available
+                return response.json().then(errData => {
+                    throw new Error(errData.error || `Erreur serveur: ${response.statusText}`);
+                }).catch(() => {
+                    // Fallback if response is not JSON or reading fails
+                    throw new Error(`Erreur HTTP ${response.status} - ${response.statusText}`);
+                });
+            }
+            if (!response.body) {
+                throw new Error("La réponse du serveur n'a pas de corps de flux.");
+            }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+
+            function processStream() {
+                reader.read().then(({ done, value }) => {
+                    if (done) {
+                        console.log("Stream terminé.");
+                        stopTimer();
+                        if (buffer) { // Process any remaining data in the buffer
+                             try {
+                                 const data = JSON.parse(buffer.slice(5)); // Assuming "data: " prefix
+                                 processData(data);
+                             } catch (parseError){
+                                 console.warn("Could not parse trailing buffer data:", buffer, parseError);
+                             }
+                        }
+                        // Ensure final update is displayed
+                        if(updateTimeout) clearTimeout(updateTimeout);
+                        updateDisplay();
+                        return;
+                    }
+
+                    buffer += decoder.decode(value, { stream: true });
+                    // Process buffer line by line (SSE format: data: {...}\n\n)
+                    const lines = buffer.split('\n\n');
+                    buffer = lines.pop() || ''; // Keep the last (potentially incomplete) line
+
+                    lines.forEach(line => {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const jsonData = line.substring(5); // Remove "data: "
+                                const data = JSON.parse(jsonData);
+                                processData(data);
+                            } catch (parseError) {
+                                console.error('Erreur de parsing JSON:', parseError, 'Data received:', line);
+                            }
+                        } else if (line.trim()) {
+                            console.warn("Ligne SSE reçue non reconnue:", line);
+                        }
+                    });
+
+                    scheduleUpdate(); // Schedule UI update after processing chunk
+                    processStream(); // Continue reading the stream
+
+                }).catch(streamError => {
+                    console.error('Erreur de lecture du flux:', streamError);
+                    Swal.fire('Erreur de Connexion', `Impossible de lire la réponse: ${streamError.message}`, 'error');
+                    loader.classList.add('hidden');
+                    stopTimer();
+                });
+            }
+            processStream(); // Start processing the stream
+        })
+        .catch(error => {
+            console.error('Erreur Fetch:', error);
+            Swal.fire('Erreur Réseau', `Impossible de contacter le serveur: ${error.message}`, 'error');
+            loader.classList.add('hidden');
+            stopTimer();
+        });
 
-      // --- Gestion Sauvegardes ---
-      const SAVED_EXERCISES_KEY = 'savedExercises_mariam_m1';
 
-      // Sauvegarde
-      saveButton.addEventListener('click', () => {
-        // 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({
-              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 !'
+        // --- Process Received Data ---
+        const processData = (data) => {
+            // console.log("Received data:", data); // Debug log
+            if (data.mode) {
+                currentMode = data.mode;
+                console.log("Mode changed to:", currentMode);
+                if (currentMode === 'answering' && loader.classList.contains('hidden') === false) {
+                   loader.classList.add('hidden');
+                   solutionSection.classList.remove('hidden');
                 }
-              }
-            }).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);
+            }
+
+            if (data.content) {
+                const content = data.content;
+                const type = data.type;
+
+                if (currentMode === 'thinking') {
+                    // Accumulate all thinking content as simple text (or handle types if needed)
+                    thoughtsBuffer += content;
+                } else if (currentMode === 'answering') {
+                    // Handle different content types for the main answer
+                    switch(type) {
+                        case 'text':
+                            answerBuffer += content;
+                            break;
+                        case 'code':
+                            // Wrap code in Markdown fences with language hint if possible (defaulting to python)
+                            answerBuffer += `\n\n\`\`\`python\n${content}\n\`\`\`\n\n`;
+                            break;
+                        case 'result':
+                            // Format result as a Markdown blockquote
+                            const formattedResult = content.split('\n').map(line => `> ${line}`).join('\n');
+                            answerBuffer += `\n\n${formattedResult}\n\n`;
+                            break;
+                        case 'image':
+                            // --- IMAGE HANDLING CORRECTION ---
+                            const mimeType = data.mime_type || 'image/png'; // Get MIME type or default
+                            // Use Markdown image syntax with the correct data URI
+                            answerBuffer += `\n\n![Image générée](data:${mimeType};base64,${content})\n\n`;
+                            // --- END IMAGE HANDLING CORRECTION ---
+                            break;
+                        default:
+                            console.warn("Type de contenu inconnu reçu:", type, content);
+                            answerBuffer += content; // Append as text by default
+                    }
                 }
-                // 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é
+            }
+
+            if (data.error) {
+                console.error("Erreur reçue du serveur:", data.error);
+                // Display error prominently in the answer section
+                answerBuffer += `\n\n<p class="text-red-600 font-bold">Erreur du serveur: ${data.error}</p>\n\n`;
+                stopTimer(); // Stop timer on error
+                 // Consider stopping the stream/fetch here if possible
+            }
+        };
+
+      }); // End form submit listener
+
+      // --- Local Storage & Modal Logic ---
+
+      // Save solution
+      saveButton.addEventListener('click', () => {
+        Swal.fire({
+          title: 'Sauvegarder la solution',
+          input: 'text',
+          inputLabel: 'Nom de la sauvegarde',
+          inputPlaceholder: 'Ex: Exercice Intégrales',
+          showCancelButton: true,
+          confirmButtonText: 'Sauvegarder',
+          cancelButtonText: 'Annuler',
+          inputValidator: (value) => {
+            if (!value) {
+              return 'Veuillez entrer un nom !'
+            }
+            const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+            if (savedExercises[value]) {
+                return 'Ce nom existe déjà. Choisissez-en un autre.'
+            }
+          }
+        }).then((result) => {
+          if (result.isConfirmed && result.value) {
+            const saveName = result.value.trim();
+            const saveData = {
+              answer: answerContent.innerHTML, // Save rendered HTML
+              thinking: thoughtsContent.innerHTML, // Save rendered HTML
+              date: new Date().toLocaleString('fr-FR') // Use French locale for date
+            };
+            let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+            savedExercises[saveName] = saveData;
+            try {
+                localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
+                Swal.fire({ icon: 'success', title: 'Sauvegardé !', text: `Solution enregistrée sous "${saveName}".`, timer: 2000, showConfirmButton: false });
+            } catch (e) {
+                 console.error("Error saving to localStorage:", e);
+                 // Handle potential storage limits
+                 Swal.fire('Erreur', 'Impossible de sauvegarder. Le stockage local est peut-être plein.', 'error');
+            }
+          }
+        });
       });
 
-      // Chargement de la liste
+      // Load saved list into modal
       const loadSavedList = () => {
-        savedList.innerHTML = ''; // Vider la liste actuelle
-        const savedExercises = JSON.parse(localStorage.getItem(SAVED_EXERCISES_KEY) || '[]');
+        savedList.innerHTML = ''; // Clear previous list
+        const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+        const sortedKeys = Object.keys(savedExercises).sort((a, b) => {
+            // Sort by date descending (newest first) if possible
+            try {
+               return new Date(savedExercises[b].date.split('/').reverse().join('-')) - new Date(savedExercises[a].date.split('/').reverse().join('-'));
+            } catch { return 0; } // Fallback sort
+        });
 
-        if (savedExercises.length === 0) {
+
+        if (sortedKeys.length === 0) {
           savedList.innerHTML = '<li class="text-gray-500 text-center py-8">Aucune sauvegarde disponible</li>';
           return;
         }
 
-        savedExercises.forEach(data => {
+        sortedKeys.forEach(name => {
+          const data = savedExercises[name];
           const li = document.createElement('li');
-          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.className = 'border-b border-gray-200 pb-3 mb-3'; // Styling for list items
+          li.innerHTML = `
+            <div class="flex justify-between items-center">
+              <button class="text-left text-blue-600 hover:underline focus:outline-none" data-save="${encodeURIComponent(name)}">
+                <span class="font-medium">${name}</span>
+                <span class="block text-gray-500 text-xs mt-1">(${data.date})</span>
+              </button>
+              <button class="text-red-500 hover:text-red-700 p-1 rounded focus:outline-none focus:ring-2 focus:ring-red-400" data-delete="${encodeURIComponent(name)}" aria-label="Supprimer ${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.appendChild(contentDiv);
-          li.appendChild(deleteButton);
           savedList.appendChild(li);
         });
       };
 
-      // Gestion des clics dans la liste (chargement/suppression)
+      // Handle clicks within the saved list (load or delete)
       savedList.addEventListener('click', (e) => {
-        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);
+        const loadButton = e.target.closest('[data-save]');
+        const deleteButton = e.target.closest('[data-delete]');
+
+        // Load saved solution
+        if (loadButton) {
+          const saveName = decodeURIComponent(loadButton.dataset.save);
+          const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+          const data = savedExercises[saveName];
           if (data) {
-            form.classList.add('hidden');
+            form.classList.add('hidden'); // Hide form
             loader.classList.add('hidden');
-            solutionSection.classList.remove('hidden');
-            thoughtsContent.innerHTML = data.thinking; // Restaurer le HTML
-            answerContent.innerHTML = data.answer;     // Restaurer le HTML
-            savedModal.classList.remove('active');
-            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);
+            solutionSection.classList.remove('hidden'); // Show solution section
+            thoughtsContent.innerHTML = data.thinking; // Load saved HTML
+            answerContent.innerHTML = data.answer;   // Load saved HTML
+
+            // Re-apply MathJax and Highlighting to the loaded content
+            // Need slight delay for elements to be in DOM reliably?
+            setTimeout(async () => {
+                applyHighlighting();
+                await typesetMathJax();
+                // Ensure thoughts box is open if it has content
+                if(data.thinking && !thoughtsBox.classList.contains('open')) {
+                    toggleThoughts();
+                } else if (!data.thinking && thoughtsBox.classList.contains('open')) {
+                     toggleThoughts(); // Close if no thinking content was saved
+                }
+
+            }, 100); // Small delay
+
+            savedModal.classList.remove('active'); // Close modal
           }
-        } else if (deleteBtn) {
-          const deleteName = deleteBtn.dataset.deleteName;
+        }
+
+        // Delete saved solution
+        if (deleteButton) {
+          const deleteName = decodeURIComponent(deleteButton.dataset.delete);
           Swal.fire({
             title: 'Êtes-vous sûr ?',
-            text: `Supprimer définitivement la sauvegarde "${deleteName}" ?`,
+            text: `Supprimer la sauvegarde "${deleteName}" ? Cette action est irréversible.`,
             icon: 'warning',
             showCancelButton: true,
-            confirmButtonColor: '#d33', // Rouge pour confirmer la suppression
+            confirmButtonColor: '#d33', // Red for delete
             cancelButtonColor: '#3085d6',
-            confirmButtonText: 'Oui, supprimer',
+            confirmButtonText: 'Oui, supprimer !',
             cancelButtonText: 'Annuler'
           }).then((result) => {
             if (result.isConfirmed) {
-              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
+              let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+              delete savedExercises[deleteName];
+              localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
+              Swal.fire( 'Supprimé !', `La sauvegarde "${deleteName}" a été supprimée.`, 'success' );
+              loadSavedList(); // Refresh list in modal
             }
           });
         }
       });
 
-      // Ouverture / fermeture du modal de sauvegardes
+      // Modal open/close
       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) {
+      // Close modal if clicking outside the content area
+      savedModal.addEventListener('click', (e) => {
+            if (e.target === savedModal) { // Check if the click is on the backdrop itself
                 savedModal.classList.remove('active');
             }
-       });
+      });
 
 
-      // Bouton "Nouvel Exercice"
-      const resetApp = () => {
-        form.reset(); // Réinitialiser les champs du formulaire
-        form.classList.remove('hidden');
-        solutionSection.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
+      // Reset UI for a new exercise (from modal)
+      newExercise.addEventListener('click', () => {
+        form.reset(); // Reset form fields
+        form.classList.remove('hidden'); // Show form
+        solutionSection.classList.add('hidden'); // Hide solution
+        loader.classList.add('hidden'); // Hide loader
+        imagePreview.classList.add('hidden'); // Hide preview
+        previewImage.src = '';
         thoughtsContent.innerHTML = '';
         answerContent.innerHTML = '';
         thoughtsBuffer = '';
-        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);
+        answerBuffer = '';
+        stopTimer(); // Reset timer display
+         if (thoughtsBox.classList.contains('open')) { // Close thoughts box
+            toggleThoughts();
+        }
+        savedModal.classList.remove('active'); // Close modal
+      });
 
-      // --- Initialisation ---
-      resetApp(); // Assurer un état propre au chargement
+      // Initial check: If MathJax is already ready, set the flag
+       if (typeof MathJax !== 'undefined' && MathJax.startup?.promise) {
+           MathJax.startup.promise.then(() => {
+               window.mathJaxReady = true;
+               console.log("MathJax startup promise resolved on load.");
+           });
+       }
 
-    });
+    }); // End DOMContentLoaded
   </script>
 </body>
 </html>