Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on 20 days ago

Commit

f2ed8a0

verified ·

1 Parent(s): 2ece82c

Update templates/maj.html

Browse files

Files changed (1) hide show

templates/maj.html +125 -57

templates/maj.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
@@ -29,6 +29,7 @@
     };
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
   <style>
@@ -77,14 +78,14 @@
       overflow: hidden;
     }
     .thought-box.open {
-      max-height: 500px;
     }
     #thoughtsContent, #answerContent {
       max-height: 500px;
       overflow-y: auto;
       scroll-behavior: smooth;
-      white-space: pre-wrap;
     }
     .preview-image {
@@ -99,10 +100,12 @@
       margin-left: 8px;
     }
     table {
       border-collapse: collapse;
       width: 100%;
       margin-bottom: 1rem;
     }
     th, td {
       border: 1px solid #d1d5db;
@@ -134,7 +137,7 @@
     <header class="p-6 text-center mb-8">
       <h1 class="text-4xl font-bold text-blue-600">Mariam - M-0</h1>
       <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente</p>
-      <p class="performance-warning">
         Vous utilisez actuellement les modèles/performances moyens.  Accédez à des performances supérieures avec un abonnement premium !
       </p>
     </header>
@@ -228,7 +231,8 @@
       const stopTimer = () => {
         clearInterval(timerInterval);
         startTime = null;
-        timestamp.textContent = '';
       };
       const handleFileSelect = file => {
@@ -262,32 +266,65 @@
         handleFileSelect(e.dataTransfer.files[0]);
       });
-      const typesetAnswerIfReady = async () => {
-        if (window.mathJaxReady) {
-          MathJax.startup.document.elements = [document.getElementById('answerContent')];
-          await MathJax.typesetPromise();
-          answerContent.scrollTop = answerContent.scrollHeight;
         } else {
-          setTimeout(typesetAnswerIfReady, 200);
         }
       };
       const updateDisplay = async () => {
-        thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
-        answerContent.innerHTML = marked.parse(answerBuffer);
-        await typesetAnswerIfReady();
         updateTimeout = null;
       };
       const scheduleUpdate = () => {
         if (updateTimeout) return;
-        updateTimeout = setTimeout(updateDisplay, 200);
       };
-      marked.setOptions({
-        gfm: true,
-        breaks: true
-      });
       form.addEventListener('submit', async e => {
         e.preventDefault();
@@ -305,7 +342,7 @@
         thoughtsBuffer = '';
         answerBuffer = '';
         currentMode = null;
-        thoughtsBox.classList.add('open');
         const formData = new FormData();
         formData.append('image', file);
@@ -316,58 +353,89 @@
             body: formData
           });
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
           let buffer = '';
-          const processChunk = async chunk => {
-            buffer += decoder.decode(chunk, { stream: true });
             const lines = buffer.split('\n\n');
-            buffer = lines.pop();
             for (const line of lines) {
               if (!line.startsWith('data:')) continue;
-              const data = JSON.parse(line.slice(5));
-              if (data.mode) {
-                currentMode = data.mode;
-                loader.classList.add('hidden');
-                solutionSection.classList.remove('hidden');
-              }
-              if (data.content) {
-                if (currentMode === 'thinking') {
-                  thoughtsBuffer += data.content;
-                } else if (currentMode === 'answering') {
-                  answerBuffer += data.content;
-                }
               }
             }
-            scheduleUpdate();
           };
-          while (true) {
-            const { done, value } = await reader.read();
-            if (done) {
-              if (buffer) {
-                const data = JSON.parse(buffer.slice(5));
-                if (data.content) {
-                  if (currentMode === 'thinking') {
-                    thoughtsBuffer += data.content;
-                  } else if (currentMode === 'answering') {
-                    answerBuffer += data.content;
-                  }
-                }
-              }
-              scheduleUpdate();
-              break;
-            }
-            await processChunk(value);
           }
-          stopTimer();
         } catch (error) {
-          console.error('Erreur:', error);
-          alert('Une erreur est survenue.');
           loader.classList.add('hidden');
           stopTimer();
         }
       });

+ <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
     };
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
+  <!-- Marked.js - Toujours inclus au cas où il serait utilisé pour thoughtsContent -->
   <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
   <style>
       overflow: hidden;
     }
     .thought-box.open {
+      max-height: 500px; /* Ajusté si nécessaire */
     }
     #thoughtsContent, #answerContent {
       max-height: 500px;
       overflow-y: auto;
       scroll-behavior: smooth;
+      white-space: pre-wrap; /* Important pour préserver les espaces/retours ligne du LaTeX brut */
     }
     .preview-image {
       margin-left: 8px;
     }
+    /* Styles pour les tables générées par MathJax/Markdown si nécessaire */
     table {
       border-collapse: collapse;
       width: 100%;
       margin-bottom: 1rem;
+      border: 1px solid #d1d5db; /* Ajout bordure table */
     }
     th, td {
       border: 1px solid #d1d5db;
     <header class="p-6 text-center mb-8">
       <h1 class="text-4xl font-bold text-blue-600">Mariam - M-0</h1>
       <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente</p>
+       <p class="performance-warning">
         Vous utilisez actuellement les modèles/performances moyens.  Accédez à des performances supérieures avec un abonnement premium !
       </p>
     </header>
       const stopTimer = () => {
         clearInterval(timerInterval);
         startTime = null;
+        // Ne pas effacer le timestamp final
+        // timestamp.textContent = '';
       };
       const handleFileSelect = file => {
         handleFileSelect(e.dataTransfer.files[0]);
       });
+      // --- Déclaration de typesetContentIfReady ---
+      const typesetContentIfReady = async () => {
+        if (window.mathJaxReady && typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
+           // Cible les deux conteneurs si nécessaire, ou juste answerContent si seul lui contient du LaTeX
+           // Pour être sûr, on peut cibler la section solution entière ou des éléments spécifiques.
+           // Ici, on cible explicitement answerContent comme dans le code original.
+           // Si thoughtsContent peut aussi avoir du MathJax, ajoutez-le au tableau.
+           // MathJax.startup.document.elements = [answerContent, thoughtsContent];
+           MathJax.startup.document.elements = [answerContent]; // Cible uniquement answerContent
+           try {
+                await MathJax.typesetPromise();
+                // Fait défiler vers le bas après le rendu MathJax
+                answerContent.scrollTop = answerContent.scrollHeight;
+                // Si thoughtsContent est aussi traité:
+                // thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+           } catch (error) {
+               console.error("Erreur pendant MathJax typesetPromise:", error);
+           }
         } else {
+            console.log('MathJax pas prêt, report du rendu...');
+            setTimeout(typesetContentIfReady, 200); // Réessayer
         }
       };
+      // --- Déclaration de updateDisplay ---
       const updateDisplay = async () => {
+        // Utilise Marked pour thoughtsContent (supposant qu'il contient du Markdown)
+        if (typeof marked !== 'undefined') {
+             thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
+        } else {
+             thoughtsContent.textContent = thoughtsBuffer; // Fallback si Marked n'est pas chargé
+        }
+        // **CORRECTION:** Insère le contenu brut dans answerContent, sans passer par Marked
+        answerContent.innerHTML = answerBuffer;
+        // Déclenche le rendu MathJax sur le contenu mis à jour
+        await typesetContentIfReady();
+        // Scrolling (peut être redondant si fait dans typesetContentIfReady)
+        thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+        // answerContent.scrollTop = answerContent.scrollHeight; // Déplacé dans typesetContentIfReady
         updateTimeout = null;
       };
       const scheduleUpdate = () => {
         if (updateTimeout) return;
+        // Délai légèrement augmenté pour laisser le temps au DOM de se mettre à jour avant MathJax
+        updateTimeout = setTimeout(updateDisplay, 250);
       };
+      // Configure Marked (si utilisé pour thoughtsContent)
+      if (typeof marked !== 'undefined') {
+          marked.setOptions({
+            gfm: true,
+            breaks: true
+          });
+      }
       form.addEventListener('submit', async e => {
         e.preventDefault();
         thoughtsBuffer = '';
         answerBuffer = '';
         currentMode = null;
+        thoughtsBox.classList.add('open'); // Ouvre par défaut
         const formData = new FormData();
         formData.append('image', file);
             body: formData
           });
+          if (!response.ok) {
+              throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
+          }
+          if (!response.body) {
+              throw new Error("La réponse ne contient pas de corps.");
+          }
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
           let buffer = '';
+          let firstChunkReceived = false; // Pour afficher la section dès réception
+          const processChunk = async ({ done, value }) => {
+            if (done) {
+              // Traiter le reste du buffer s'il y en a
+              if (buffer && 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(jsonError){
+                     console.error("Erreur JSON dans le buffer final:", jsonError, "Buffer:", buffer);
+                }
+              }
+              // Assurer une dernière mise à jour après la fin du stream
+              await updateDisplay();
+              stopTimer(); // Arrêter le timer à la fin
+              console.log("Stream terminé.");
+              return true; // Indique que le stream est terminé
+            }
+            buffer += decoder.decode(value, { stream: true });
             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;
+              try {
+                  const data = JSON.parse(line.slice(5));
+                  if (data.mode) {
+                    currentMode = data.mode;
+                    // Afficher la section dès la première donnée reçue après le début du mode
+                    if (!firstChunkReceived) {
+                        loader.classList.add('hidden');
+                        solutionSection.classList.remove('hidden');
+                        firstChunkReceived = true;
+                    }
+                  }
+                  if (data.content) {
+                    if (currentMode === 'thinking') {
+                      thoughtsBuffer += data.content;
+                    } else if (currentMode === 'answering') {
+                      answerBuffer += data.content;
+                    }
+                     // Mise à jour programmée pour éviter trop d'appels DOM/MathJax
+                    scheduleUpdate();
+                  }
+              } catch(jsonError) {
+                  console.error("Erreur JSON dans le stream:", jsonError, "Ligne:", line);
+                  // Continuer avec les lignes suivantes si possible
               }
             }
+            return false; // Indique que le stream n'est pas terminé
           };
+          // Boucle de lecture du stream
+          let streamFinished = false;
+          while (!streamFinished) {
+              const { done, value } = await reader.read();
+              streamFinished = await processChunk({ done, value });
           }
         } catch (error) {
+          console.error('Erreur lors de la récupération ou du traitement:', error);
+          alert(`Une erreur est survenue: ${error.message}`);
           loader.classList.add('hidden');
+          solutionSection.classList.add('hidden'); // Cacher si erreur
           stopTimer();
         }
       });