Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on Feb 24

Commit

6ade419

verified ·

1 Parent(s): 41554ba

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +62 -253

templates/index.html CHANGED Viewed

@@ -1,70 +1,37 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mariam M-0 | Solution Mathématique</title>
-  <!-- Tailwind CSS -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-  <!-- Configuration optimisée de MathJax pour expressions complexes -->
   <script>
     window.MathJax = {
       tex: {
-        inlineMath: [['$', '$'], ['\\(', '\\)']],
-        displayMath: [['$$', '$$'], ['\\[', '\\]']],
         processEscapes: true,
-        processEnvironments: true,
-        macros: {
-          R: '{\\mathbb{R}}',
-          N: '{\\mathbb{N}}',
-          Z: '{\\mathbb{Z}}',
-          C: '{\\mathbb{C}}',
-          Q: '{\\mathbb{Q}}'
-        },
-        packages: {
-          '[+]': [
-            'autoload',
-            'ams',
-            'noerrors',
-            'physics',
-            'colorv2',
-            'cancel',
-            'mhchem'
-          ]
-        },
-        // Ignorer les erreurs
-        processClass: "math",
-        formatError: (jax, err) => {
-          console.warn('Erreur MathJax:', err);
-          return jax.formatError(err);
-        }
-      },
-      svg: {
-        fontCache: 'global',
-        scale: 1.2
       },
       options: {
-        enableMenu: true,
-        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'code'],
-        renderActions: {
-          assistiveMml: []
-        }
-      },
-      loader: {
-        load: ['[tex]/physics', '[tex]/ams', '[tex]/colorv2', '[tex]/cancel', '[tex]/mhchem']
       },
       startup: {
         pageReady: () => {
           console.log('MathJax est complètement chargé.');
           window.mathJaxReady = true;
-          document.dispatchEvent(new Event('mathjax-ready'));
         }
       }
     };
   </script>
-  <!-- Chargement du module SVG pour un meilleur rendu -->
-  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" id="MathJax-script" async></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
   <style>
@@ -74,7 +41,6 @@
       font-family: 'Space Grotesk', sans-serif;
     }
-    /* CSS existant... */
     .uploadArea {
       background: #f3f4f6;
       border: 2px dashed #d1d5db;
@@ -134,49 +100,24 @@
       margin-left: 8px;
     }
-    /* Styles pour les équations MathJax */
-    mjx-container {
-      display: inline-block;
-      overflow-x: auto;
-      overflow-y: hidden;
-      max-width: 100%;
-      padding: 0.5em 0;
-      min-width: auto !important;
-    }
-    mjx-container[jax="SVG"] {
-      direction: ltr;
-    }
-    mjx-container svg {
-      min-width: auto !important;
-    }
-    /* Amélioration pour les formules complexes */
-    mjx-mtable {
-      min-width: auto !important;
-      margin: 0 !important;
-    }
-    /* Support des tableaux et autres éléments */
     table {
       border-collapse: collapse;
       width: 100%;
-      margin: 1rem 0;
     }
     th, td {
       border: 1px solid #d1d5db;
-      padding: 0.75rem;
       text-align: left;
     }
     th {
       background-color: #f3f4f6;
       font-weight: 600;
     }
-    /* Intégration MathJax et tables */
-    mjx-container + table, table + mjx-container {
-      margin-top: 1rem;
     }
   </style>
 </head>
@@ -188,7 +129,6 @@
     </header>
     <main>
-      <!-- Le reste du HTML reste inchangé -->
       <form id="problemForm" class="space-y-6" novalidate>
         <!-- Zone de dépôt et sélection d'image -->
         <div class="uploadArea p-8 text-center relative" aria-label="Zone de dépôt d'image">
@@ -234,6 +174,7 @@
         </div>
         <div class="border-t pt-6">
           <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
           <div id="answerContent" class="text-gray-700 table-responsive"></div>
         </div>
       </section>
@@ -260,8 +201,7 @@
       let thoughtsBuffer = '';
       let answerBuffer = '';
       let currentMode = null;
-      let updateTimeout = null;
-      let mathJaxQueue = Promise.resolve();
       // Mise à jour de l'affichage du temps écoulé
       const updateTimestamp = () => {
@@ -317,126 +257,38 @@
         handleFileSelect(e.dataTransfer.files[0]);
       });
-      // Méthode améliorée pour traiter le LaTeX dans Markdown
-      const processContent = (content) => {
-        // Génération de jetons uniques pour éviter les collisions
-        const createToken = (index) => `__LATEX_${Date.now()}_${index}__`;
-        // Stockage des expressions LaTeX
-        const latexBlocks = [];
-        // Identification de tous les types d'expressions LaTeX
-        const latexPattern = /(\$\$[\s\S]*?\$\$|\$[^\$\n]+?\$|\\begin\{[a-z]*\}[\s\S]*?\\end\{[a-z]*\})/g;
-        // Étape 1: Remplacer les expressions LaTeX par des jetons
-        const tokenizedContent = content.replace(latexPattern, (match) => {
-          const token = createToken(latexBlocks.length);
-          latexBlocks.push({token, latex: match});
-          // Encadrer le jeton d'une manière qui empêche marked de le transformer
-          return `<!${token}!>`;
-        });
-        // Étape 2: Traiter avec marked
-        let htmlContent = marked.parse(tokenizedContent);
-        // Étape 3: Restaurer les expressions LaTeX
-        latexBlocks.forEach(({token, latex}) => {
-          // Échapper les caractères spéciaux dans le jeton
-          const escapedToken = token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-          const tokenPattern = new RegExp(`<!${escapedToken}!>`, 'g');
-          htmlContent = htmlContent.replace(tokenPattern, latex);
-        });
-        return htmlContent;
-      };
-      // Fonction pour le rendu MathJax
-      const typesetMathJax = async (element) => {
-        if (!window.mathJaxReady) {
-          return new Promise((resolve) => {
-            document.addEventListener('mathjax-ready', () => {
-              typesetMathJax(element).then(resolve);
-            }, { once: true });
-          });
-        }
-        try {
-          // Utiliser une file d'attente pour éviter les conflits de rendu
-          return mathJaxQueue = mathJaxQueue.then(async () => {
-            try {
-              MathJax.startup.document.elements = [element];
-              await MathJax.typesetPromise([element]);
-              return true;
-            } catch (error) {
-              console.warn('Erreur dans le rendu MathJax', error);
-              // Essayer de réparer certaines expressions couramment problématiques
-              const fixLaTeX = (elem) => {
-                // Remplacer les caractères problématiques
-                elem.innerHTML = elem.innerHTML
-                  .replace(/\\{/g, '\\lbrace ')
-                  .replace(/\\}/g, '\\rbrace ')
-                  .replace(/(?<![\\])\{/g, '\\{')
-                  .replace(/(?<![\\])\}/g, '\\}');
-              };
-              // Appliquer les corrections et retenter
-              const mathElements = element.querySelectorAll('mjx-container');
-              mathElements.forEach(fixLaTeX);
-              try {
-                await MathJax.typesetPromise([element]);
-                return true;
-              } catch (retryError) {
-                console.error('Échec de la récupération MathJax', retryError);
-                return false;
-              }
-            }
-          });
-        } catch (fatalError) {
-          console.error('Erreur fatale MathJax', fatalError);
-          return false;
         }
       };
-      // Fonction pour mettre à jour l'affichage
       const updateDisplay = async () => {
-        try {
-          // Appliquer le traitement au contenu
-          thoughtsContent.innerHTML = processContent(thoughtsBuffer);
-          answerContent.innerHTML = processContent(answerBuffer);
-          // Rendu MathJax
-          await typesetMathJax(thoughtsContent);
-          await typesetMathJax(answerContent);
-          // Scroll vers le bas
-          if (currentMode === 'thinking') {
-            thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
-          } else if (currentMode === 'answering') {
-            answerContent.scrollTop = answerContent.scrollHeight;
-          }
-        } catch (error) {
-          console.error('Erreur lors de la mise à jour de l\'affichage', error);
-        }
-        // Réinitialiser le timeout
         updateTimeout = null;
       };
       // Fonction pour planifier la mise à jour (dé-bounce)
       const scheduleUpdate = () => {
-        if (updateTimeout) {
-          clearTimeout(updateTimeout);
-        }
-        updateTimeout = setTimeout(updateDisplay, 300);
       };
-      // Configuration de marked
       marked.setOptions({
         gfm: true,
-        breaks: true,
-        pedantic: false,
-        smartLists: true
       });
       // Soumission du formulaire
@@ -469,10 +321,6 @@
             body: formData
           });
-          if (!response.ok) {
-            throw new Error(`Erreur HTTP: ${response.status}`);
-          }
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
           let buffer = '';
@@ -480,42 +328,27 @@
           // Traitement d'un chunk de données
           const processChunk = async chunk => {
             buffer += decoder.decode(chunk, { stream: true });
-            // Recherche des délimiteurs de message complets
-            const lines = [];
-            let startPos = 0;
-            let endPos;
-            while ((endPos = buffer.indexOf('\n\n', startPos)) !== -1) {
-              lines.push(buffer.substring(startPos, endPos));
-              startPos = endPos + 2;
-            }
-            // Conserver la dernière partie potentiellement incomplète
-            buffer = buffer.substring(startPos);
             for (const line of lines) {
               if (!line.startsWith('data:')) continue;
-              try {
-                const data = JSON.parse(line.slice(5));
-                if (data.mode) {
-                  currentMode = data.mode;
-                  loader.classList.add('hidden');
-                  solutionSection.classList.remove('hidden');
-                }
-                if (data.content) {
-                  if (currentMode === 'thinking') {
-                    thoughtsBuffer += data.content;
-                  } else if (currentMode === 'answering') {
-                    answerBuffer += data.content;
-                  }
                 }
-              } catch (error) {
-                console.error('Erreur de parsing JSON:', error, line);
               }
             }
-            // Planifier la mise à jour
             scheduleUpdate();
           };
@@ -523,28 +356,18 @@
           while (true) {
             const { done, value } = await reader.read();
             if (done) {
-              // Traitement final si nécessaire
-              if (buffer.length > 5 && 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('Impossible de parser le dernier fragment:', e);
                 }
               }
-              // Forcer une mise à jour finale
-              if (updateTimeout) {
-                clearTimeout(updateTimeout);
-                updateTimeout = null;
-              }
-              await updateDisplay();
               break;
             }
             await processChunk(value);
@@ -552,25 +375,11 @@
           stopTimer();
         } catch (error) {
           console.error('Erreur:', error);
-          alert(`Une erreur est survenue: ${error.message}`);
           loader.classList.add('hidden');
           stopTimer();
         }
       });
-      // Fonction de débogage pour tester le rendu LaTeX
-      window.testLatex = (expression) => {
-        const testDiv = document.createElement('div');
-        testDiv.innerHTML = expression;
-        document.body.appendChild(testDiv);
-        return typesetMathJax(testDiv)
-          .then(success => {
-            const result = {success, rendered: testDiv.innerHTML};
-            document.body.removeChild(testDiv);
-            return result;
-          });
-      };
     });
   </script>
 </body>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mariam M-0 | Solution Mathématique</title>
+  <!-- Tailwind CSS (version 2.2.19 utilisée ici, à mettre à jour si besoin) -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+  <!-- Configuration optimisée de MathJax avec support étendu LaTeX -->
   <script>
     window.MathJax = {
       tex: {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']],
         processEscapes: true,
+        // Chargement automatique de commandes supplémentaires (ex. environnements de tableaux)
+        packages: {'[+]': ['autoload','ams']}
       },
       options: {
+        enableMenu: false,
+        messageStyle: 'none'
       },
       startup: {
         pageReady: () => {
           console.log('MathJax est complètement chargé.');
           window.mathJaxReady = true;
         }
       }
     };
   </script>
+  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
   <style>
       font-family: 'Space Grotesk', sans-serif;
     }
     .uploadArea {
       background: #f3f4f6;
       border: 2px dashed #d1d5db;
       margin-left: 8px;
     }
+    /* Styles supplémentaires pour une meilleure présentation des tableaux */
     table {
       border-collapse: collapse;
       width: 100%;
+      margin-bottom: 1rem;
     }
     th, td {
       border: 1px solid #d1d5db;
+      padding: 0.5rem;
       text-align: left;
     }
     th {
       background-color: #f3f4f6;
       font-weight: 600;
     }
+    /* Pour un rendu responsive, ajouter éventuellement : */
+    .table-responsive {
+      overflow-x: auto;
     }
   </style>
 </head>
     </header>
     <main>
       <form id="problemForm" class="space-y-6" novalidate>
         <!-- Zone de dépôt et sélection d'image -->
         <div class="uploadArea p-8 text-center relative" aria-label="Zone de dépôt d'image">
         </div>
         <div class="border-t pt-6">
           <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
+          <!-- Enveloppement d'éventuels tableaux dans une div responsive -->
           <div id="answerContent" class="text-gray-700 table-responsive"></div>
         </div>
       </section>
       let thoughtsBuffer = '';
       let answerBuffer = '';
       let currentMode = null;
+      let updateTimeout = null; // Variable pour le debounce des mises à jour
       // Mise à jour de l'affichage du temps écoulé
       const updateTimestamp = () => {
         handleFileSelect(e.dataTransfer.files[0]);
       });
+      // Fonction pour relancer le rendu MathJax dès que le contenu de la réponse est mis à jour
+      const typesetAnswerIfReady = async () => {
+        if (window.mathJaxReady) {
+          MathJax.startup.document.elements = [document.getElementById('answerContent')];
+          await MathJax.typesetPromise();
+          answerContent.scrollTop = answerContent.scrollHeight;
+        } else {
+          setTimeout(typesetAnswerIfReady, 200);
         }
       };
+      // Fonction pour déclencher la mise à jour de l'affichage
       const updateDisplay = async () => {
+        // Mise à jour du contenu via marked
+        thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
+        answerContent.innerHTML = marked.parse(answerBuffer);
+        // Lancer le rendu MathJax
+        await typesetAnswerIfReady();
         updateTimeout = null;
       };
       // Fonction pour planifier la mise à jour (dé-bounce)
       const scheduleUpdate = () => {
+        if (updateTimeout) return;
+        updateTimeout = setTimeout(updateDisplay, 200);
       };
+      // Configuration de marked avec support du mode GFM (pour les tableaux) et interprétation des sauts de ligne
       marked.setOptions({
         gfm: true,
+        breaks: true
       });
       // Soumission du formulaire
             body: formData
           });
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
           let buffer = '';
           // Traitement d'un chunk de données
           const processChunk = async chunk => {
             buffer += decoder.decode(chunk, { stream: true });
+            const lines = buffer.split('\n\n');
+            buffer = lines.pop(); // Conserver la dernière ligne incomplète
             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;
                 }
               }
             }
+            // Planifier la mise à jour dé-bouncée
             scheduleUpdate();
           };
           while (true) {
             const { done, value } = await reader.read();
             if (done) {
+              // Traitement du contenu restant dans le buffer
+              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();
         }
       });
     });
   </script>
 </body>