Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on Apr 27

Commit

7945c76

verified ·

1 Parent(s): 81eb477

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +383 -585

templates/index.html CHANGED Viewed

@@ -1,3 +1,5 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
@@ -11,41 +13,29 @@
   <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.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>
-  <!-- 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']} // Using autoload package
       },
       options: {
         enableMenu: false,
-        messageStyle: 'none',
-        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] // Ensure MathJax skips code blocks
       },
       startup: {
-        // 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>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
@@ -73,187 +63,131 @@
     @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     .thought-box {
-      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;
     }
     #thoughtsContent, #answerContent {
-      max-height: 60vh; /* Use viewport height for better scaling */
       overflow-y: auto;
       scroll-behavior: smooth;
-      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 */
-    }
-    #answerContent {
-       background-color: white; /* Keep answer content white */
     }
     .preview-image { max-width: 300px; max-height: 300px; object-fit: contain; }
-    .timestamp { color: #6b7280; font-size: 0.8em; margin-left: 8px; }
     table {
       border-collapse: collapse;
       width: 100%;
       margin-bottom: 1rem;
-      border: 1px solid #d1d5db;
     }
     th, td {
-      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; }
     #saveButton {
-      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; }
     #savedModal {
       display: none;
       position: fixed;
       inset: 0;
-      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; }
     #savedModalContent {
       background: #fff;
-      width: 90%;
-      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: 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;
-      padding: 1em;
-      background: #f3f4f6; /* Background matching Tailwind gray */
-      color: #1f2937; /* Dark text */
       border-radius: 0.375rem;
-      border: 1px solid #e5e7eb;
-    }
-    /* 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 */
-    }
-    #answerContent blockquote p {
-       margin: 0; /* Remove default paragraph margins inside blockquote */
-    }
-    /* 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 */
     }
-    /* Tabs styling */
-    .tabs {
-      display: flex;
-      border-bottom: 1px solid #e2e8f0;
-      margin-bottom: 1.5rem; /* More space below tabs */
     }
-    .tab {
-      padding: 0.75rem 1.5rem; /* More padding */
-      cursor: pointer;
-      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: #1f2937; /* Darker text on hover */
     }
-    .tab.active {
-      border-bottom: 3px solid #3b82f6;
-      color: #3b82f6; /* Blue text */
-      font-weight: 600;
-    }
   </style>
 </head>
-<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 mt-2">Solution Mathématique/Physique/Chimie Intelligente</p>
       <div class="mt-4 flex justify-end">
-        <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">
       <form id="problemForm" class="space-y-6" novalidate>
-        <!-- Tabs for model selection -->
-        <div class="tabs">
-          <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>
-        <!-- 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 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 (PNG, JPG, WEBP...)</p>
           </div>
         </div>
-        <!-- 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>
@@ -261,97 +195,55 @@
       <!-- Loader -->
       <div id="loader" class="hidden mt-8 text-center">
         <span class="loader"></span>
-        <p class="mt-4 text-gray-600 font-medium">Analyse en cours...</p>
       </div>
-      <!-- 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"></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"> <!-- Content goes inside the box -->
-                <div id="thoughtsContent" class="p-4 text-sm text-gray-600"></div>
-            </div>
         </div>
-        <!-- 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-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>
       </section>
     </main>
   </div>
-  <!-- Saved Solutions Modal -->
   <div id="savedModal">
-    <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">
         <ul id="savedList" class="space-y-4">
-          <!-- Saved items will be listed here -->
         </ul>
       </div>
-      <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>
-      </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', () => {
-      // Element retrieval
       const form = document.getElementById('problemForm');
       const imageInput = document.getElementById('imageInput');
       const loader = document.getElementById('loader');
@@ -360,7 +252,6 @@
       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');
@@ -370,182 +261,125 @@
       const savedModal = document.getElementById('savedModal');
       const savedList = document.getElementById('savedList');
       const newExercise = document.getElementById('newExercise');
-      const mainContent = document.getElementById('mainContent'); // Not used currently, but kept
-      const tabs = document.querySelectorAll('.tab');
-      const dropZone = document.querySelector('.uploadArea');
-      // State variables
       let startTime = null;
       let timerInterval = null;
       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
-      // --- Helper Functions ---
-      // Update elapsed time
       const updateTimestamp = () => {
         if (startTime) {
           const seconds = Math.floor((Date.now() - startTime) / 1000);
-          timestamp.textContent = `(${seconds}s)`;
-        } else {
-          timestamp.textContent = '';
         }
       };
-      const startTimer = () => { startTime = Date.now(); updateTimestamp(); timerInterval = setInterval(updateTimestamp, 1000); };
-      const stopTimer = () => { clearInterval(timerInterval); updateTimestamp(); /* Keep final time */ }; // Keep showing final time
-      // Handle file selection (preview)
       const handleFileSelect = file => {
-        if (!file || !file.type.startsWith('image/')) {
-           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 => {
           previewImage.src = e.target.result;
           imagePreview.classList.remove('hidden');
         };
         reader.readAsDataURL(file);
-        return true; // Indicate success
       };
-      // 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.");
-         }
       };
-       // 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>";
-            }
-            updateTimeout = null; // Clear timeout flag
-        };
-      // Schedule display update (debounce mechanism)
-      const scheduleUpdate = () => {
-         if (!updateTimeout) {
-             updateTimeout = setTimeout(updateDisplay, 250); // Debounce time (250ms)
-         }
       };
-      // --- 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('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
-        // --- Reset UI ---
         startTimer();
         loader.classList.remove('hidden');
         solutionSection.classList.add('hidden');
@@ -553,238 +387,193 @@
         answerContent.innerHTML = '';
         thoughtsBuffer = '';
         answerBuffer = '';
-        currentMode = null;
-        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);
-        const url = `/${currentEndpoint}`; // Use the selected endpoint
-        console.log(`Sending request to: ${url}`);
-        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
-        });
-        // --- 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();
-        });
-        // --- 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');
-                }
-            }
-            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
                     }
                 }
             }
-            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');
-            }
           }
         });
       });
-      // Load saved list into modal
       const loadSavedList = () => {
-        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 (sortedKeys.length === 0) {
           savedList.innerHTML = '<li class="text-gray-500 text-center py-8">Aucune sauvegarde disponible</li>';
           return;
         }
-        sortedKeys.forEach(name => {
-          const data = savedExercises[name];
           const li = document.createElement('li');
-          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>
@@ -792,107 +581,116 @@
             </div>
           `;
           savedList.appendChild(li);
-        });
       };
-      // Handle clicks within the saved list (load or delete)
       savedList.addEventListener('click', (e) => {
-        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'); // Hide form
             loader.classList.add('hidden');
-            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
           }
         }
-        // Delete saved solution
-        if (deleteButton) {
-          const deleteName = decodeURIComponent(deleteButton.dataset.delete);
           Swal.fire({
             title: 'Êtes-vous sûr ?',
-            text: `Supprimer la sauvegarde "${deleteName}" ? Cette action est irréversible.`,
             icon: 'warning',
             showCancelButton: true,
-            confirmButtonColor: '#d33', // Red for delete
-            cancelButtonColor: '#3085d6',
-            confirmButtonText: 'Oui, supprimer !',
             cancelButtonText: 'Annuler'
           }).then((result) => {
             if (result.isConfirmed) {
-              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
             }
           });
         }
       });
-      // Modal open/close
       openSaved.addEventListener('click', () => { loadSavedList(); savedModal.classList.add('active'); });
       closeSaved.addEventListener('click', () => { savedModal.classList.remove('active'); });
-      // 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');
-            }
-      });
-      // 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 = '';
         answerBuffer = '';
-        stopTimer(); // Reset timer display
-         if (thoughtsBox.classList.contains('open')) { // Close thoughts box
-            toggleThoughts();
-        }
-        savedModal.classList.remove('active'); // Close modal
-      });
-      // 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>

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