Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on 13 days ago

Commit

f137ec8

verified ·

1 Parent(s): 1fc47d5

Delete templates/maj.html

Browse files

Files changed (1) hide show

templates/maj.html +0 -626

templates/maj.html DELETED Viewed

@@ -1,626 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Mariam | Solution Mathématique (Optimisé)</title>
-  <!-- Tailwind CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-  <!-- Configuration MathJax Optimisée -->
-  <script>
-    window.MathJax = {
-      tex: {
-        inlineMath: [['$', '$']],          // Délimiteurs pour les maths en ligne
-        displayMath: [['$$', '$$']],      // Délimiteurs pour les maths en bloc
-        processEscapes: true,            // Permet d'utiliser \$ pour un dollar littéral
-        // Packages TeX chargés. 'autoload' charge dynamiquement les commandes nécessaires.
-        // 'ams' pour les environnements AMSMath (align, gather, etc.).
-        // 'mhchem' pour la notation chimique (\ce).
-        // 'physics' pour des notations physiques utiles (\qty, \vec, \abs, \dv, etc.).
-        // 'boldsymbol' pour \boldsymbol.
-        packages: {'[+]': ['autoload', 'ams', 'mhchem', 'physics', 'boldsymbol']}
-      },
-      chtml: {
-        // Options spécifiques au rendu CommonHTML (le plus performant)
-        // fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2' // Optionnel: Spécifier l'URL des polices
-      },
-      options: {
-        enableMenu: false,               // Désactive le menu contextuel MathJax
-        messageStyle: 'none',            // Supprime les messages de statut MathJax
-        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], // Tags à ignorer
-        ignoreHtmlClass: 'tex2jax_ignore', // Classe CSS pour ignorer des éléments
-        processHtmlClass: 'tex2jax_process' // Classe CSS pour forcer le traitement
-      },
-      startup: {
-        // Fonction appelée une fois MathJax entièrement chargé et prêt
-        pageReady: () => {
-          console.log('MathJax est complètement chargé et prêt.');
-          window.mathJaxReady = true; // Drapeau global pour indiquer que MathJax est prêt
-        }
-      }
-    };
-  </script>
-  <!-- Chargement de MathJax (version tex-mml-chtml pour compatibilité MML, tex-chtml peut être légèrement plus rapide) -->
-  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
-  <!-- Chargement de Marked.js pour le rendu Markdown -->
-  <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
-  <style>
-    /* Importation de la police Google Fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
-    body {
-      font-family: 'Space Grotesk', sans-serif;
-      /* Amélioration du rendu du texte */
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-    /* Styles pour la zone d'upload */
-    .uploadArea {
-      background: #f3f4f6; /* bg-gray-100 */
-      border: 2px dashed #d1d5db; /* border-gray-300 */
-      transition: border-color 0.2s ease-in-out;
-    }
-    .uploadArea:hover {
-      border-color: #3b82f6; /* border-blue-500 */
-    }
-    /* Styles pour le bouton */
-    .blue-button {
-      background: #3b82f6; /* bg-blue-500 */
-      transition: background-color 0.2s ease-in-out;
-    }
-    .blue-button:hover {
-      background: #2563eb; /* bg-blue-600 */
-    }
-    /* Styles pour l'indicateur de chargement */
-    .loader {
-      width: 48px;
-      height: 48px;
-      border: 3px solid #3b82f6; /* border-blue-500 */
-      border-bottom-color: transparent;
-      border-radius: 50%;
-      display: inline-block;
-      box-sizing: border-box; /* Ajout pour un dimensionnement plus prévisible */
-      animation: rotation 1s linear infinite;
-    }
-    @keyframes rotation {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-    /* Styles pour la boîte de réflexion (accordéon) */
-    .thought-box {
-      transition: max-height 0.3s ease-out;
-      max-height: 0;
-      overflow: hidden;
-      background-color: #f9fafb; /* bg-gray-50 légère nuance */
-      border-radius: 0 0 0.5rem 0.5rem; /* Coins arrondis en bas */
-    }
-    .thought-box.open {
-      /* Hauteur max plus grande pour accommoder plus de contenu si nécessaire */
-      max-height: 800px; /* Ajustable */
-      border-top: 1px solid #e5e7eb; /* border-gray-200 */
-    }
-    /* Styles pour les zones de contenu (réflexion et réponse) */
-    #thoughtsContent, #answerContent {
-      /* Hauteur max plus grande */
-      max-height: 800px; /* Ajustable */
-      overflow-y: auto;
-      scroll-behavior: smooth;
-      white-space: pre-wrap; /* Conserve les retours à la ligne et espaces */
-      word-wrap: break-word; /* Coupe les mots longs pour éviter le débordement */
-      background-color: #ffffff; /* Fond blanc pour la lisibilité */
-      padding: 1rem; /* Espacement interne */
-      border-radius: 0.375rem; /* rounded-md */
-      border: 1px solid #e5e7eb; /* border-gray-200 */
-    }
-    #thoughtsContent {
-        background-color: #f9fafb; /* bg-gray-50 pour distinguer */
-    }
-    /* Style pour l'image de prévisualisation */
-    .preview-image {
-      max-width: 100%; /* Utilise la largeur disponible */
-      height: auto; /* Garde les proportions */
-      max-height: 350px; /* Limite la hauteur maximale */
-      object-fit: contain; /* Assure que l'image entière est visible */
-      margin-top: 1rem; /* Espace au-dessus */
-      border: 1px solid #e5e7eb; /* Bordure légère */
-      border-radius: 0.375rem; /* Coins arrondis */
-    }
-    /* Style pour le timestamp */
-    .timestamp {
-      color: #3b82f6; /* text-blue-500 */
-      font-size: 0.85em; /* Légèrement plus petit */
-      margin-left: 12px;
-      font-weight: 500;
-    }
-    /* Styles pour les tableaux (générés par Marked) */
-    table {
-      border-collapse: collapse;
-      width: 100%;
-      margin-bottom: 1rem;
-      border: 1px solid #d1d5db; /* border-gray-300 */
-    }
-    th, td {
-      border: 1px solid #d1d5db; /* border-gray-300 */
-      padding: 0.75rem; /* p-3 */
-      text-align: left;
-    }
-    th {
-      background-color: #f3f4f6; /* bg-gray-100 */
-      font-weight: 600; /* font-semibold */
-    }
-    /* Conteneur pour rendre les tableaux responsive */
-    .table-responsive {
-      overflow-x: auto;
-      /* Style de la barre de défilement (optionnel, amélioration esthétique) */
-      scrollbar-width: thin;
-      scrollbar-color: #a0aec0 #e2e8f0;
-    }
-    .table-responsive::-webkit-scrollbar {
-        height: 8px;
-    }
-    .table-responsive::-webkit-scrollbar-track {
-        background: #e2e8f0;
-        border-radius: 4px;
-    }
-    .table-responsive::-webkit-scrollbar-thumb {
-        background-color: #a0aec0;
-        border-radius: 4px;
-        border: 2px solid #e2e8f0;
-    }
-    /* Avertissement de performance */
-    .performance-warning {
-        color: #dc2626; /* text-red-600 */
-        font-weight: bold;
-        font-size: 1.1em; /* Légèrement plus grand */
-        margin-top: 1rem;
-        margin-bottom: 1.5rem;
-        padding: 0.75rem;
-        background-color: #fee2e2; /* bg-red-100 */
-        border: 1px solid #fca5a5; /* border-red-300 */
-        border-radius: 0.375rem; /* rounded-md */
-        text-align: center;
-    }
-  </style>
-</head>
-<body class="p-4 bg-gray-50 min-h-screen">
-  <div class="max-w-4xl mx-auto bg-white p-6 md:p-8 rounded-lg shadow-md">
-    <header class="text-center mb-8">
-      <h1 class="text-3xl md:text-4xl font-bold text-blue-600">Mariam - M-0</h1>
-      <p class="text-gray-600 mt-2">Solution Mathématique/Physique/Chimie Intelligente</p>
-      <!-- Avertissement de performance conservé comme demandé -->
-      <p class="performance-warning">
-        Vous utilisez actuellement les modèles/performances moyens. Accédez à des performances supérieures avec un abonnement premium !
-      </p>
-    </header>
-    <main>
-      <form id="problemForm" class="space-y-6" novalidate>
-        <!-- Zone d'upload améliorée -->
-        <div class="uploadArea p-6 md:p-8 text-center relative rounded-lg cursor-pointer" aria-label="Zone de dépôt d'image du problème">
-          <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image" aria-describedby="upload-instructions">
-          <div class="flex flex-col items-center justify-center space-y-3" id="upload-instructions">
-            <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center text-blue-500">
-              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
-            </div>
-            <p class="text-gray-700 font-medium">Déposez l'image du problème ici</p>
-            <p class="text-gray-500 text-sm">ou cliquez pour sélectionner un fichier</p>
-            <p class="text-xs text-gray-400 mt-1">(Formats supportés: JPG, PNG, WEBP, etc.)</p>
-          </div>
-        </div>
-        <!-- Zone de prévisualisation de l'image -->
-        <div id="imagePreview" class="hidden text-center">
-          <p class="text-sm font-medium text-gray-700 mb-2">Image sélectionnée :</p>
-          <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation de l'image sélectionnée">
-          <button type="button" id="removeImageBtn" class="mt-2 text-sm text-red-600 hover:text-red-800" aria-label="Retirer l'image sélectionnée">Retirer l'image</button>
-        </div>
-        <!-- Bouton de soumission -->
-        <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg text-lg hover:shadow-lg transition-shadow duration-200 ease-in-out">
-          Résoudre le problème
-        </button>
-      </form>
-      <!-- Indicateur de chargement -->
-      <div id="loader" class="hidden mt-8 text-center" aria-busy="true" aria-label="Analyse en cours">
-        <span class="loader"></span>
-        <p class="mt-4 text-gray-600 font-medium">Analyse en cours...</p>
-      </div>
-      <!-- Section de la solution -->
-      <section id="solution" class="hidden mt-10 space-y-8">
-        <!-- Section Réflexion (Accordéon) -->
-        <div class="border rounded-lg shadow-sm 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-colors duration-150 ease-in-out" aria-expanded="true" aria-controls="thoughtsBox">
-            <span class="font-medium text-gray-800 text-lg">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 rotate-180" 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 open">
-            {/* aria-live="polite" annonce les changements aux lecteurs d'écran quand le contenu est stable */}
-            <div id="thoughtsContent" class="p-4 text-gray-700 text-sm" aria-live="polite"></div>
-          </div>
-        </div>
-        <!-- Section Solution -->
-        <div class="border-t pt-6">
-          <div class="flex justify-between items-center mb-4">
-            <h3 class="text-xl font-bold text-gray-800">Solution Détaillée</h3>
-            {/* Le bouton de téléchargement PDF a été supprimé comme demandé */}
-          </div>
-          {/* aria-live="polite" annonce les changements aux lecteurs d'écran */}
-          <div id="answerContent" class="text-gray-800 table-responsive leading-relaxed" aria-live="polite"></div>
-        </div>
-      </section>
-    </main>
-    <footer class="text-center mt-10 text-sm text-gray-500">
-      <p>© 2024 Mariam AI. Tous droits réservés.</p>
-    </footer>
-  </div>
-  <script>
-    // Attend que le DOM soit entièrement chargé
-    document.addEventListener('DOMContentLoaded', () => {
-      // Références aux éléments du DOM
-      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 removeImageBtn = document.getElementById('removeImageBtn');
-      const timestamp = document.getElementById('timestamp');
-      const uploadArea = document.querySelector('.uploadArea');
-      const uploadInstructions = document.getElementById('upload-instructions');
-      // Variables d'état
-      let startTime = null;
-      let timerInterval = null;
-      let thoughtsBuffer = '';
-      let answerBuffer = '';
-      let currentMode = null; // 'thinking' or 'answering'
-      let updateTimeout = null; // Pour le debounce du rendu
-      let mathJaxProcessing = false; // Pour éviter les rendus MathJax concurrents
-      // Configuration de Marked.js
-      marked.setOptions({
-        gfm: true,          // Active GitHub Flavored Markdown (tableaux, etc.)
-        breaks: true,       // Convertit les sauts de ligne simples en <br>
-        mangle: false,      // Désactive l'obfuscation des emails (si nécessaire)
-        headerIds: false,   // Désactive la génération d'ID pour les en-têtes
-        // Ajout d'un renderer personnalisé si besoin de modifier le HTML généré
-        // renderer: new marked.Renderer()
-      });
-      // --- Fonctions Utilitaires ---
-      // Met à jour le timestamp affichant le temps écoulé
-      const updateTimestamp = () => {
-        if (startTime) {
-          const seconds = Math.floor((Date.now() - startTime) / 1000);
-          timestamp.textContent = `${seconds}s`;
-        }
-      };
-      // Démarre le chronomètre
-      const startTimer = () => {
-        startTime = Date.now();
-        timestamp.textContent = '0s'; // Affichage initial
-        // Met à jour toutes les secondes
-        timerInterval = setInterval(updateTimestamp, 1000);
-      };
-      // Arrête le chronomètre
-      const stopTimer = () => {
-        clearInterval(timerInterval);
-        timerInterval = null;
-        // Met à jour une dernière fois pour le temps final exact
-        if (startTime) updateTimestamp();
-        startTime = null; // Réinitialise pour la prochaine exécution
-      };
-      // Réinitialise l'état de l'interface utilisateur avant une nouvelle requête
-      const resetUI = () => {
-          loader.classList.add('hidden');
-          loader.removeAttribute('aria-busy');
-          solutionSection.classList.add('hidden');
-          thoughtsContent.innerHTML = '';
-          answerContent.innerHTML = '';
-          thoughtsBuffer = '';
-          answerBuffer = '';
-          currentMode = null;
-          thoughtsBox.classList.add('open'); // Garder ouvert par défaut pour nouvelle solution
-          toggleIcon.classList.add('rotate-180');
-          thoughtsToggle.setAttribute('aria-expanded', 'true');
-          stopTimer(); // Assure l'arrêt du timer précédent
-          timestamp.textContent = ''; // Vide le timestamp
-      };
-      // Gère la sélection/prévisualisation d'un fichier image
-      const handleFileSelect = file => {
-        if (!file || !file.type.startsWith('image/')) {
-            alert('Veuillez sélectionner un fichier image valide.');
-            clearImagePreview();
-            return;
-        }
-        const reader = new FileReader();
-        reader.onload = e => {
-          previewImage.src = e.target.result;
-          imagePreview.classList.remove('hidden');
-          uploadArea.classList.add('hidden'); // Masquer la zone d'upload
-        };
-        reader.onerror = () => {
-            alert('Erreur lors de la lecture du fichier image.');
-            clearImagePreview();
-        };
-        reader.readAsDataURL(file);
-      };
-      // Efface la prévisualisation de l'image et réaffiche la zone d'upload
-      const clearImagePreview = () => {
-          imageInput.value = ''; // Important pour permettre de resélectionner le même fichier
-          previewImage.src = '';
-          imagePreview.classList.add('hidden');
-          uploadArea.classList.remove('hidden'); // Réafficher la zone d'upload
-      }
-      // Typeset le contenu de la réponse avec MathJax
-      const typesetAnswerIfReady = async () => {
-        // Vérifie si MathJax est chargé et qu'aucun rendu n'est déjà en cours
-        if (window.mathJaxReady && !mathJaxProcessing) {
-          const answerElement = document.getElementById('answerContent');
-          if (!answerElement) return; // Sécurité si l'élément disparaît
-          mathJaxProcessing = true; // Marque le début du traitement
-          try {
-            // Demande à MathJax de traiter uniquement le contenu de 'answerContent'
-            await MathJax.typesetPromise([answerElement]);
-            // Défile vers le bas après le rendu pour voir le contenu le plus récent
-            answerElement.scrollTop = answerElement.scrollHeight;
-          } catch (error) {
-            console.error("Erreur lors du typesetting MathJax:", error);
-            // Gérer l'erreur de rendu si nécessaire
-          } finally {
-            mathJaxProcessing = false; // Marque la fin du traitement
-          }
-        } else if (!window.mathJaxReady) {
-          // Si MathJax n'est pas prêt, réessaie après un court délai
-          console.log("MathJax pas encore prêt, report du typesetting...");
-          setTimeout(typesetAnswerIfReady, 200);
-        }
-         // Si mathJaxProcessing est true, on attend simplement la fin du rendu en cours
-      };
-      // Met à jour l'affichage des sections 'réflexion' et 'réponse'
-      const updateDisplay = () => {
-        // Efface le timeout précédent s'il existe pour éviter les mises à jour inutiles
-        if (updateTimeout) {
-            clearTimeout(updateTimeout);
-            updateTimeout = null;
-        }
-        // Met à jour le contenu HTML à partir des buffers (après parsing Markdown)
-        thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
-        answerContent.innerHTML = marked.parse(answerBuffer);
-        // Demande le rendu MathJax pour la section réponse
-        // Le rendu se fera de manière asynchrone
-        typesetAnswerIfReady();
-        // Assure que la dernière partie de la réponse est visible (utile pendant le streaming)
-        // Fait maintenant dans typesetAnswerIfReady après le rendu pour plus de précision
-        // answerContent.scrollTop = answerContent.scrollHeight;
-      };
-      // Planifie une mise à jour de l'affichage (debounce)
-      const scheduleUpdate = () => {
-        // Si une mise à jour est déjà planifiée, ne rien faire
-        if (updateTimeout) return;
-        // Planifie l'appel à updateDisplay après 150ms
-        // Ce délai évite des rendus trop fréquents pendant le streaming rapide
-        updateTimeout = setTimeout(updateDisplay, 150);
-      };
-      // --- Gestionnaires d'Événements ---
-      // Bascule l'affichage de la boîte de réflexion (accordéon)
-      thoughtsToggle.addEventListener('click', () => {
-        const isOpen = thoughtsBox.classList.toggle('open');
-        thoughtsToggle.setAttribute('aria-expanded', isOpen);
-        toggleIcon.classList.toggle('rotate-180', isOpen); // Pivote l'icône
-      });
-      // Gère le changement de fichier dans l'input
-      imageInput.addEventListener('change', e => {
-          if (e.target.files && e.target.files.length > 0) {
-              handleFileSelect(e.target.files[0]);
-          } else {
-              clearImagePreview(); // Si l'utilisateur annule la sélection
-          }
-      });
-      // Bouton pour retirer l'image prévisualisée
-      removeImageBtn.addEventListener('click', clearImagePreview);
-      // Gestion du Drag & Drop sur la zone d'upload
-      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-        uploadArea.addEventListener(eventName, e => {
-          e.preventDefault();
-          e.stopPropagation(); // Empêche la propagation aux éléments parents
-        }, false);
-      });
-      ['dragenter', 'dragover'].forEach(eventName => {
-        uploadArea.addEventListener(eventName, () => {
-          uploadArea.classList.add('border-blue-500', 'bg-blue-50'); // Feedback visuel
-        }, false);
-      });
-      ['dragleave', 'drop'].forEach(eventName => {
-        uploadArea.addEventListener(eventName, () => {
-          uploadArea.classList.remove('border-blue-500', 'bg-blue-50'); // Annule feedback visuel
-        }, false);
-      });
-      uploadArea.addEventListener('drop', e => {
-        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-          const file = e.dataTransfer.files[0];
-          imageInput.files = e.dataTransfer.files; // Met à jour l'input file
-          handleFileSelect(file);
-        }
-      }, false);
-      // Gère la soumission du formulaire
-      form.addEventListener('submit', async e => {
-        e.preventDefault(); // Empêche la soumission standard du formulaire
-        const file = imageInput.files[0];
-        // Validation simple côté client
-        if (!file) {
-          alert('Veuillez sélectionner une image contenant le problème.');
-          return;
-        }
-        resetUI(); // Réinitialise l'interface
-        startTimer(); // Démarre le chrono
-        loader.classList.remove('hidden'); // Affiche le loader
-        loader.setAttribute('aria-busy', 'true');
-        // Prépare les données du formulaire pour l'envoi
-        const formData = new FormData();
-        formData.append('image', file);
-        try {
-          // Envoi de la requête POST au backend avec l'image
-          const response = await fetch('/solved', { // Assurez-vous que cette URL est correcte
-            method: 'POST',
-            body: formData
-            // Pas de 'Content-Type': 'multipart/form-data' ici,
-            // le navigateur le définit automatiquement avec la bonne boundary pour FormData
-          });
-          // Vérifie si la requête a échoué (status hors 2xx)
-          if (!response.ok) {
-            let errorMsg = `Erreur HTTP ${response.status}: ${response.statusText}`;
-            try {
-                // Tente de lire un message d'erreur plus détaillé du corps de la réponse
-                const errorBody = await response.json();
-                errorMsg += `\n${errorBody.error || JSON.stringify(errorBody)}`;
-            } catch (parseError) {
-                // Si le corps n'est pas du JSON ou est vide
-                errorMsg += "\nAucun détail d'erreur supplémentaire fourni par le serveur.";
-            }
-            throw new Error(errorMsg);
-          }
-          // Traitement de la réponse en streaming (Server-Sent Events attendus)
-          const reader = response.body?.getReader();
-          if (!reader) {
-              throw new Error("Impossible d'obtenir le lecteur de flux de la réponse.");
-          }
-          const decoder = new TextDecoder(); // Pour décoder les bytes en texte (UTF-8 par défaut)
-          let buffer = ''; // Buffer pour les données incomplètes
-          // Boucle de lecture du flux
-          while (true) {
-            const { done, value } = await reader.read(); // Lit un chunk du flux
-            if (done) { // Si le flux est terminé
-              // Traite tout reste dans le buffer (si pertinent pour votre format SSE)
-              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 (err) { console.error("Erreur parsing final buffer:", err, "Buffer:", buffer); }
-              }
-              scheduleUpdate(); // Dernière mise à jour de l'affichage
-              await updateDisplay(); // Force la dernière mise à jour immédiate après la fin du stream
-              break; // Sort de la boucle
-            }
-            // Décode le chunk et l'ajoute au buffer
-            buffer += decoder.decode(value, { stream: true });
-            // Traite les messages complets dans le buffer (séparés par \n\n)
-            const lines = buffer.split('\n\n');
-            buffer = lines.pop() ?? ''; // Garde la partie incomplète pour le prochain chunk
-            for (const line of lines) {
-              if (!line.startsWith('data:')) continue; // Ignore les lignes non conformes
-              try {
-                const jsonData = line.slice(5).trim(); // Extrait le JSON après 'data: '
-                if (!jsonData) continue; // Ignore les messages data vides
-                const data = JSON.parse(jsonData);
-                // Changement de mode (thinking -> answering)
-                if (data.mode) {
-                  currentMode = data.mode;
-                  // Cache le loader et affiche la section solution au premier message reçu
-                  if (!solutionSection.classList.contains('hidden')) {
-                      loader.classList.add('hidden');
-                      loader.removeAttribute('aria-busy');
-                      solutionSection.classList.remove('hidden');
-                  }
-                }
-                // Ajout du contenu au buffer correspondant
-                if (data.content) {
-                  if (currentMode === 'thinking') {
-                    thoughtsBuffer += data.content;
-                  } else if (currentMode === 'answering') {
-                    answerBuffer += data.content;
-                  }
-                  // Planifie une mise à jour de l'affichage (debounced)
-                  scheduleUpdate();
-                }
-              } catch (error) {
-                console.error('Erreur lors du parsing du message SSE JSON:', error, 'Ligne:', line);
-                // Peut-être afficher une erreur à l'utilisateur ou ignorer le message erroné
-              }
-            }
-          } // Fin while(true)
-          stopTimer(); // Arrête le chronomètre après la fin du flux
-        } catch (error) {
-          console.error('Erreur lors de la résolution du problème:', error);
-          // Affiche une alerte plus informative
-          alert(`Une erreur est survenue lors de la communication avec le serveur:\n${error.message}`);
-          resetUI(); // Réinitialise l'UI en cas d'erreur
-        }
-      }); // Fin form.addEventListener('submit')
-    }); // Fin document.addEventListener('DOMContentLoaded')
-  </script>
-</body>
-</html>