Spaces:

Docfile
/

Mariam-cards

Build error

App Files Files Community

Docfile commited on 22 days ago

Commit

55af5a2

verified ·

1 Parent(s): 9aabf46

Create index.html

Browse files

Files changed (1) hide show

templates/index.html +712 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,712 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Updated Title -->
+  <title>Mariam M-1 | Solution Maths/Physique/Chimie</title>
+  <!-- Tailwind CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" integrity="sha384-CYN1GZJ4bX7Z1P+H/jD0Rfsd8C/n+5ZunG7P21/6f2e3vLg/fH7f1e8t0" crossorigin="anonymous">
+  <!-- SweetAlert2 -->
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" integrity="sha384-HeeY8JpXPqZXrC+j9gB6jS57+b9LhE/Vf4+qQ9oE9pY/t2uQ/w1Kj/tqV4g0" crossorigin="anonymous"></script>
+  <!-- Marked.js for Markdown -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/marked.umd.min.js" integrity="sha384-vJIvV7fGv2z1vJ+w0q+Gz5Y8F8A1+z/c5f2m5g0L3g0" crossorigin="anonymous"></script>
+  <!-- MathJax Configuration -->
+  <script>
+    window.MathJax = {
+      tex: {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']],
+        processEscapes: true,
+        // Added 'mhchem' for chemistry, kept 'ams' and 'autoload'
+        packages: {'[+]': ['ams', 'mhchem', 'autoload']}
+      },
+      options: {
+        enableMenu: false,
+        messageStyle: 'none'
+      },
+      startup: {
+        // Ensure MathJax signals readiness correctly
+        ready: () => {
+          console.log('MathJax is ready');
+          MathJax.startup.defaultReady();
+          window.mathJaxReady = true;
+        }
+      }
+    };
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async integrity="sha384-q/9w/uN/w/L+7xPj6qF7zQ/eGg6z/P9bI1+5s8l+gP7x2t/w//d/h" crossorigin="anonymous"></script>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
+    body { font-family: 'Space Grotesk', sans-serif; background-color: #f9fafb; } /* Light gray background */
+    .uploadArea {
+      background: #f3f4f6;
+      border: 2px dashed #d1d5db;
+      transition: border-color 0.2s ease, background-color 0.2s ease;
+      border-radius: 0.5rem; /* Slightly rounded corners */
+    }
+    .uploadArea:hover { border-color: #3b82f6; background-color: #eef2ff; }
+    .blue-button { background: #3b82f6; transition: background-color 0.2s ease; }
+    .blue-button:hover { background: #2563eb; }
+    .blue-button:disabled { background: #9ca3af; cursor: not-allowed; }
+    .loader {
+      width: 48px;
+      height: 48px;
+      border: 4px solid #3b82f6; /* Slightly thicker border */
+      border-bottom-color: transparent;
+      border-radius: 50%;
+      display: inline-block;
+      animation: rotation 1s linear infinite;
+    }
+    @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    .thought-box {
+      transition: max-height 0.4s ease-in-out; /* Smoother transition */
+      max-height: 0;
+      overflow: hidden;
+      background-color: #f8f9fa; /* Light background for thoughts */
+      border-radius: 0.375rem;
+      border: 1px solid #e5e7eb;
+    }
+    .thought-box.open { max-height: 60vh; } /* Use viewport height */
+    #thoughtsContent, #answerContent {
+      max-height: 60vh; /* Consistent max height */
+      overflow-y: auto;
+      scroll-behavior: smooth;
+      white-space: pre-wrap; /* Keep line breaks */
+      word-wrap: break-word; /* Prevent long unbroken strings from overflowing */
+      background: #ffffff; /* White background for content */
+      border: 1px solid #e5e7eb;
+      border-radius: 0.375rem;
+      padding: 1rem; /* Add padding inside content areas */
+    }
+     #thoughtsContent { background-color: #f8f9fa; } /* Slightly different bg for thoughts */
+    .preview-image { max-width: 100%; height: auto; max-height: 350px; object-fit: contain; margin-top: 1rem; border-radius: 0.375rem; border: 1px solid #e5e7eb; }
+    .timestamp { color: #1e40af; font-size: 0.85em; margin-left: 10px; font-weight: 500;}
+    /* Ensure tables look good on mobile */
+    .table-responsive { overflow-x: auto; }
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-bottom: 1rem;
+      border: 1px solid #d1d5db;
+    }
+    th, td {
+      border: 1px solid #e5e7eb;
+      padding: 0.75rem; /* Slightly more padding */
+      text-align: left;
+      vertical-align: top; /* Align content top */
+    }
+    th { background-color: #f3f4f6; font-weight: 600; }
+    /* Zebra striping for readability */
+    tbody tr:nth-child(odd) { background-color: #f9fafb; }
+    #saveButton {
+      background: #10b981; /* Green for save action */
+      color: white;
+      padding: 0.5rem 1rem;
+      border-radius: 0.375rem;
+      transition: background-color 0.2s ease;
+      font-weight: 500;
+    }
+    #saveButton:hover { background: #059669; }
+    /* Modal styling */
+    #savedModal {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6); /* Darker overlay */
+      z-index: 50;
+      padding: 1rem; /* Padding for modal itself */
+      overflow-y: auto; /* Allow modal scroll if content is too long */
+    }
+    #savedModal.active { display: flex; align-items: center; justify-content: center; }
+    #savedModalContent {
+      background: #fff;
+      width: 100%;
+      max-width: 600px; /* Max width for modal content */
+      max-height: 90vh; /* Max height */
+      overflow-y: auto;
+      border-radius: 0.5rem;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      display: flex;
+      flex-direction: column; /* Stack header, list, footer */
+    }
+    #savedModalHeader {
+        padding: 1rem 1.5rem;
+        border-bottom: 1px solid #e5e7eb;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+     #savedListContainer {
+        padding: 1.5rem;
+        flex-grow: 1; /* Allow list to take available space */
+        overflow-y: auto; /* Scroll list independently */
+    }
+    #savedModalFooter {
+        padding: 1rem 1.5rem;
+        border-top: 1px solid #e5e7eb;
+    }
+    /* Style for saved list items */
+    #savedList li button {
+        display: block; /* Make button take full width */
+        padding: 0.75rem 0.5rem;
+        border-radius: 0.25rem;
+        transition: background-color 0.2s ease;
+    }
+     #savedList li button:hover {
+        background-color: #eef2ff; /* Light blue hover */
+    }
+  </style>
+</head>
+<body class="p-4 bg-gray-50">
+  <div class="max-w-4xl mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+    <header class="p-6 text-center border-b border-gray-200">
+      <!-- Updated Header -->
+      <h1 class="text-3xl sm:text-4xl font-bold text-blue-700">Mariam M-1</h1>
+      <p class="text-gray-600 mt-1">Votre Assistant Intelligent pour Maths, Physique et Chimie</p>
+      <div class="mt-4 flex justify-end">
+        <button id="openSaved" class="blue-button px-4 py-2 text-white rounded-md text-sm font-medium">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
+          </svg>
+          Sauvegardes
+        </button>
+      </div>
+    </header>
+    <main id="mainContent" class="p-6">
+      <form id="problemForm" class="space-y-6" novalidate>
+        <!-- Zone de dépôt / sélection d'image -->
+        <div class="uploadArea p-6 sm:p-8 text-center relative cursor-pointer" aria-label="Zone de dépôt d'image">
+          <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image">
+          <div class="space-y-3">
+            <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center 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 l'image de votre exercice ici</p>
+            <p class="text-gray-500 text-sm">ou cliquez pour sélectionner un fichier</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" id="submitButton" class="blue-button w-full py-3 text-white font-semibold rounded-lg text-lg flex items-center justify-center space-x-2" disabled>
+          <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="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>
+          <span>Résoudre le problème</span>
+        </button>
+      </form>
+      <!-- Loader -->
+      <div id="loader" class="hidden mt-8 text-center">
+        <span class="loader"></span>
+        <p class="mt-4 text-gray-600 text-lg font-medium">Analyse en cours, veuillez patienter...</p>
+      </div>
+      <!-- Zone d'affichage de la solution -->
+      <section id="solution" class="hidden mt-8 space-y-6">
+         <!-- Thoughts Section -->
+        <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-semibold text-gray-800">Processus de Réflexion</span>
+            <div class="flex items-center">
+                 <span id="timestamp" class="timestamp"></span>
+                 <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">
+            <div id="thoughtsContent" class="p-4 text-sm text-gray-700"></div>
+          </div>
+        </div>
+        <!-- Answer Section -->
+        <div class="border-t border-gray-200 pt-6">
+          <div class="flex justify-between items-center mb-4 px-1">
+            <h3 class="text-xl font-bold text-gray-800">Solution Détaillée</h3>
+            <button id="saveButton">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
+                 <path d="M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6a1 1 0 10-2 0v5.586L7.707 10.293zM5 3a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" />
+                 <path d="M3 8a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm3 1a1 1 0 000 2h8a1 1 0 100-2H6z" />
+              </svg>
+              Sauvegarder
+            </button>
+          </div>
+          <div id="answerContent" class="text-gray-800 table-responsive leading-relaxed"></div>
+        </div>
+      </section>
+    </main>
+  </div>
+  <!-- Modal plein écran pour les sauvegardes -->
+  <div id="savedModal">
+    <div id="savedModalContent">
+      <header id="savedModalHeader">
+        <h2 class="text-2xl font-bold text-gray-800">Exercices Sauvegardés</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-2">
+          <!-- Liste des sauvegardes insérée dynamiquement -->
+          <!-- Exemple: <li><button>Nom Sauvegarde (Date)</button></li> -->
+        </ul>
+         <p id="noSavesMessage" class="text-center text-gray-500 hidden mt-4">Aucun exercice sauvegardé pour le moment.</p>
+      </div>
+       <footer id="savedModalFooter">
+            <button id="newExercise" class="blue-button w-full py-3 text-white font-medium rounded-lg">
+             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+             </svg>
+             Résoudre un nouvel exercice
+            </button>
+       </footer>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      // --- DOM Elements ---
+      const form = document.getElementById('problemForm');
+      const imageInput = document.getElementById('imageInput');
+      const loader = document.getElementById('loader');
+      const solutionSection = document.getElementById('solution');
+      const thoughtsContent = document.getElementById('thoughtsContent');
+      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');
+      const saveButton = document.getElementById('saveButton');
+      const openSaved = document.getElementById('openSaved');
+      const closeSaved = document.getElementById('closeSaved');
+      const savedModal = document.getElementById('savedModal');
+      const savedList = document.getElementById('savedList');
+      const noSavesMessage = document.getElementById('noSavesMessage');
+      const newExercise = document.getElementById('newExercise');
+      const mainContent = document.getElementById('mainContent');
+      const submitButton = document.getElementById('submitButton');
+      // --- State Variables ---
+      let startTime = null;
+      let timerInterval = null;
+      let thoughtsBuffer = '';
+      let answerBuffer = '';
+      let currentMode = null; // 'thinking' or 'answering'
+      let updateTimeout = null;
+      let currentSaveData = null; // Holds data for potential saving
+      // --- Helper Functions ---
+      // Timer functions
+      const updateTimestamp = () => {
+        if (startTime) {
+          const seconds = Math.floor((Date.now() - startTime) / 1000);
+          timestamp.textContent = `${seconds}s`;
+        } else {
+             timestamp.textContent = '';
+        }
+      };
+      const startTimer = () => { startTime = Date.now(); timerInterval = setInterval(updateTimestamp, 1000); updateTimestamp(); };
+      const stopTimer = () => { clearInterval(timerInterval); timerInterval = null; updateTimestamp(); /* Update one last time */ }; // Keep final time displayed until reset
+      // Reset UI to initial state
+      const resetUI = () => {
+          form.reset();
+          form.classList.remove('hidden');
+          submitButton.disabled = true; // Disable submit until image selected
+          solutionSection.classList.add('hidden');
+          imagePreview.classList.add('hidden');
+          previewImage.src = '';
+          thoughtsContent.innerHTML = '';
+          answerContent.innerHTML = '';
+          thoughtsBuffer = '';
+          answerBuffer = '';
+          currentSaveData = null;
+          stopTimer(); // Clear timer display
+          thoughtsBox.classList.remove('open'); // Collapse thoughts
+          toggleIcon.style.transform = 'rotate(0deg)';
+          loader.classList.add('hidden');
+          savedModal.classList.remove('active'); // Ensure modal is closed
+      };
+      // Image preview handler
+      const handleFileSelect = file => {
+        if (!file || !file.type.startsWith('image/')) {
+            previewImage.src = '';
+            imagePreview.classList.add('hidden');
+            submitButton.disabled = true;
+            if (file) { // If a file was selected but wasn't an image
+                Swal.fire('Fichier Invalide', 'Veuillez sélectionner un fichier image (jpeg, png, gif, etc.).', 'warning');
+            }
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = e => {
+          previewImage.src = e.target.result;
+          imagePreview.classList.remove('hidden');
+          submitButton.disabled = false; // Enable submit button
+        };
+        reader.onerror = () => {
+             Swal.fire('Erreur Fichier', "Impossible de lire le fichier sélectionné.", 'error');
+             submitButton.disabled = true;
+        };
+        reader.readAsDataURL(file);
+      };
+      // Render MathJax and update display
+      const typesetContentIfReady = async () => {
+          if (window.mathJaxReady && (thoughtsBuffer.length > 0 || answerBuffer.length > 0)) {
+              try {
+                  // Tell MathJax which elements might contain math
+                  const elementsToTypeset = [thoughtsContent, answerContent];
+                  MathJax.startup.document.updateDocument(); // Clear previous math
+                  await MathJax.typesetPromise(elementsToTypeset);
+                  // Scroll answer section to bottom smoothly
+                  answerContent.scrollTo({ top: answerContent.scrollHeight, behavior: 'smooth' });
+              } catch (err) {
+                  console.error("MathJax typesetting error:", err);
+                  // Maybe display a subtle error to the user if MathJax fails repeatedly
+              }
+          } else if (!window.mathJaxReady) {
+              console.log("MathJax not ready, retrying typesetting...");
+              setTimeout(typesetContentIfReady, 300); // Retry if MathJax isn't ready
+          }
+      };
+      // Update displayed content (throttled)
+      const updateDisplay = async () => {
+        // Use marked to parse Markdown (ensure it's safe if source is untrusted)
+        thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
+        answerContent.innerHTML = marked.parse(answerBuffer);
+        await typesetContentIfReady(); // Render MathJax
+        updateTimeout = null; // Clear timeout flag
+      };
+      // Schedule UI update to avoid excessive re-rendering during streaming
+      const scheduleUpdate = () => {
+        if (!updateTimeout) {
+          updateTimeout = setTimeout(updateDisplay, 150); // Adjust delay as needed (e.g., 150-250ms)
+        }
+      };
+      // Configure Marked
+      marked.setOptions({
+          gfm: true, // Enable GitHub Flavored Markdown
+          breaks: true, // Convert single line breaks to <br>
+          sanitize: false, // IMPORTANT: Only use false if backend output is TRUSTED. If not, use a sanitizer library like DOMPurify.
+          mangle: false, // Disable email address mangling
+          headerIds: false // Disable automatic header IDs
+      });
+      // --- Event Listeners ---
+      // Thoughts toggle
+      thoughtsToggle.addEventListener('click', () => {
+        thoughtsBox.classList.toggle('open');
+        toggleIcon.style.transform = thoughtsBox.classList.contains('open') ? 'rotate(180deg)' : 'rotate(0deg)';
+      });
+      // Image selection
+      imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
+      // Drag and Drop
+      const dropZone = document.querySelector('.uploadArea');
+      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) {
+              imageInput.files = e.dataTransfer.files; // Assign dropped file(s) to input
+              handleFileSelect(e.dataTransfer.files[0]); // Process the first file
+          }
+      });
+      // Also trigger file input on click
+      dropZone.addEventListener('click', () => imageInput.click());
+      // Form submission (problem solving)
+      form.addEventListener('submit', async e => {
+        e.preventDefault();
+        const file = imageInput.files[0];
+        if (!file) {
+          Swal.fire('Aucune Image', 'Veuillez sélectionner une image avant de soumettre.', 'warning');
+          return;
+        }
+        // Reset relevant parts before starting
+        solutionSection.classList.add('hidden');
+        thoughtsContent.innerHTML = '';
+        answerContent.innerHTML = '';
+        thoughtsBuffer = '';
+        answerBuffer = '';
+        currentMode = null;
+        currentSaveData = null; // Clear previous potential save data
+        stopTimer(); // Reset timer before starting
+        thoughtsBox.classList.add('open'); // Default to open thoughts
+        toggleIcon.style.transform = 'rotate(180deg)';
+        // Show loader and start timer
+        loader.classList.remove('hidden');
+        submitButton.disabled = true; // Disable submit while processing
+        startTimer();
+        const formData = new FormData();
+        formData.append('image', file);
+        try {
+          const response = await fetch('/solve', { method: 'POST', body: formData });
+          if (!response.ok) {
+            // Handle HTTP errors like 4xx, 5xx
+             let errorMsg = `Erreur serveur: ${response.status} ${response.statusText}`;
+             try {
+                const errorData = await response.json();
+                errorMsg = errorData.error || errorMsg; // Use server-provided error if available
+             } catch(jsonError) { /* Ignore if response is not JSON */ }
+             throw new Error(errorMsg);
+          }
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = ''; // Buffer for incomplete chunks
+          const processChunk = async ({ done, value }) => {
+            if (done) {
+              // Process any remaining data in the buffer when the stream ends
+              if (buffer.startsWith('data:')) {
+                  try {
+                      const data = JSON.parse(buffer.slice(5));
+                      if (data.content) {
+                          if (currentMode === 'thinking') thoughtsBuffer += data.content;
+                          else if (currentMode === 'answering') answerBuffer += data.content;
+                      }
+                  } catch (e) {
+                      console.warn("Could not parse final JSON chunk:", buffer, e);
+                  }
+              }
+              buffer = ''; // Clear buffer
+              return; // Exit loop
+            }
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n\n'); // Split by double newline SSE convention
+            buffer = lines.pop(); // Keep the potentially incomplete last part
+            for (const line of lines) {
+              if (!line.startsWith('data:')) continue; // Ignore non-data lines
+              try {
+                  const data = JSON.parse(line.slice(5)); // Remove "data:" prefix and parse
+                  if (data.mode) { // Check for mode change ('thinking' or 'answering')
+                    currentMode = data.mode;
+                    if (!solutionSection.classList.contains('hidden')) {
+                        loader.classList.add('hidden'); // Hide loader only once mode is known
+                        solutionSection.classList.remove('hidden');
+                    }
+                  }
+                  if (data.content) { // Append content based on current mode
+                    if (currentMode === 'thinking') { thoughtsBuffer += data.content; }
+                    else if (currentMode === 'answering') { answerBuffer += data.content; }
+                  }
+              } catch (e) {
+                console.warn("Could not parse JSON chunk:", line, e);
+                // Optionally inform user about corrupted data stream
+              }
+            }
+            scheduleUpdate(); // Schedule UI update after processing chunks
+            return reader.read().then(processChunk); // Read the next chunk
+          };
+          // Start processing the stream
+          await reader.read().then(processChunk);
+          // Final actions after stream ends
+          stopTimer();
+          loader.classList.add('hidden');
+          submitButton.disabled = false; // Re-enable submit
+          await updateDisplay(); // Ensure the very last content is displayed and typeset
+           // Prepare data for potential saving
+          currentSaveData = {
+              answer: answerContent.innerHTML,
+              thinking: thoughtsContent.innerHTML,
+              date: new Date().toLocaleString('fr-FR') // Use French locale for date
+          };
+        } catch (error) {
+          console.error('Erreur lors de la résolution:', error);
+          Swal.fire({
+              icon: 'error',
+              title: 'Erreur de Traitement',
+              text: `Impossible de résoudre le problème. ${error.message}`,
+          });
+          loader.classList.add('hidden');
+          submitButton.disabled = false; // Re-enable submit on error
+          stopTimer();
+        }
+      });
+      // Save solution
+      saveButton.addEventListener('click', async () => {
+          if (!currentSaveData) {
+             Swal.fire('Aucune Solution', 'Il n\'y a pas de solution à sauvegarder.', 'info');
+             return;
+          }
+          const { value: saveName } = await Swal.fire({
+              title: 'Nommer la Sauvegarde',
+              input: 'text',
+              inputLabel: 'Donnez un nom unique à cet exercice',
+              inputPlaceholder: 'Ex: Chapitre 3 - Exercice 5',
+              showCancelButton: true,
+              confirmButtonText: 'Sauvegarder',
+              cancelButtonText: 'Annuler',
+              inputValidator: (value) => {
+                  if (!value) {
+                      return 'Le nom ne peut pas être vide !';
+                  }
+                  // Optional: Check if name already exists
+                  // let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+                  // if (savedExercises[value]) { return 'Ce nom existe déjà!'; }
+              }
+          });
+          if (saveName) {
+              try {
+                  let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+                  savedExercises[saveName] = currentSaveData; // Use the prepared save data
+                  localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
+                  Swal.fire({
+                      icon: 'success',
+                      title: 'Sauvegardé!',
+                      text: `L'exercice "${saveName}" a été sauvegardé.`,
+                      timer: 2000,
+                      showConfirmButton: false
+                  });
+              } catch (storageError) {
+                 console.error("Erreur localStorage:", storageError);
+                 Swal.fire('Erreur Sauvegarde', 'Impossible de sauvegarder. Le stockage local est peut-être plein ou indisponible.', 'error');
+              }
+          }
+      });
+      // Load saved exercises list into modal
+      const loadSavedList = () => {
+        savedList.innerHTML = ''; // Clear previous list
+        let hasSaves = false;
+        try {
+            const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+            const sortedNames = Object.keys(savedExercises).sort((a, b) => {
+                 // Optional: Sort by date if available, otherwise by name
+                 const dateA = savedExercises[a].date ? new Date(savedExercises[a].date.split('/').reverse().join('-')) : 0; // Handle FR date format if needed
+                 const dateB = savedExercises[b].date ? new Date(savedExercises[b].date.split('/').reverse().join('-')) : 0;
+                 if (dateA && dateB && dateB !== dateA) return dateB - dateA; // Sort newest first
+                 return a.localeCompare(b); // Fallback to name sort
+            });
+            for (const name of sortedNames) {
+              const data = savedExercises[name];
+              const li = document.createElement('li');
+              li.innerHTML = `
+                  <button class="w-full text-left text-blue-600 hover:underline hover:bg-gray-100 rounded px-2 py-1 text-sm flex justify-between items-center" data-save="${name}">
+                      <span>${name}</span>
+                      <span class="text-gray-500 text-xs ml-2">${data.date || 'Date inconnue'}</span>
+                  </button>`;
+              savedList.appendChild(li);
+              hasSaves = true;
+            }
+        } catch (e) {
+            console.error("Error loading saved exercises:", e);
+            savedList.innerHTML = '<li class="text-red-500">Erreur lors du chargement des sauvegardes.</li>';
+        }
+        noSavesMessage.classList.toggle('hidden', hasSaves); // Show/hide 'no saves' message
+      };
+      // Handle click on a saved item
+      savedList.addEventListener('click', async (e) => {
+        const button = e.target.closest('button[data-save]');
+        if (button) {
+          const saveName = button.dataset.save;
+          try {
+              const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+              const data = savedExercises[saveName];
+              if (data) {
+                resetUI(); // Reset the UI first
+                form.classList.add('hidden'); // Hide form
+                solutionSection.classList.remove('hidden'); // Show solution area
+                thoughtsContent.innerHTML = data.thinking || ''; // Load thoughts
+                answerContent.innerHTML = data.answer || ''; // Load answer
+                currentSaveData = data; // Store loaded data in case user wants to re-save/update
+                // IMPORTANT: Re-render MathJax for the loaded content
+                // Use setTimeout to ensure DOM is updated before MathJax runs
+                setTimeout(async () => {
+                     thoughtsBuffer = data.thinking || ''; // Update buffers for potential re-render logic
+                     answerBuffer = data.answer || '';
+                     await typesetContentIfReady();
+                }, 50); // Small delay
+                savedModal.classList.remove('active'); // Close modal
+              } else {
+                  Swal.fire('Erreur', `Sauvegarde "${saveName}" non trouvée.`, 'error');
+                  loadSavedList(); // Refresh list in case it was deleted elsewhere
+              }
+          } catch (e) {
+              console.error("Error loading save:", e);
+              Swal.fire('Erreur Chargement', 'Impossible de charger la sauvegarde.', 'error');
+          }
+        }
+      });
+      // Open/Close Saved Exercises Modal
+      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
+             savedModal.classList.remove('active');
+         }
+      });
+      // "New Exercise" button inside the modal
+      newExercise.addEventListener('click', () => {
+          resetUI(); // Reset everything to start fresh
+          // Modal is already closed by resetUI
+      });
+      // --- Initial Setup ---
+      resetUI(); // Initialize the UI on page load
+    });
+  </script>
+</body>
+</html>