Spaces:

Docfile
/

Mariam-cards

Build error

App Files Files Community

Docfile commited on 21 days ago

Commit

0ede973

verified ·

1 Parent(s): 55af5a2

Delete templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +0 -712

templates/index.html DELETED Viewed

@@ -1,712 +0,0 @@
-<!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>