Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on Jan 23

Commit

9806663

verified ·

1 Parent(s): f323dc2

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +34 -13

templates/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam M-0 | Solution Mathématique</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-    <!-- Configuration MathJax optimisée -->
     <script>
         window.MathJax = {
             tex: {
@@ -17,18 +17,24 @@
             },
             options: {
                 enableMenu: false,
-                messageStyle: 'none'
             },
             startup: {
                 pageReady: () => {
-                    return MathJax.startup.defaultPageReady().then(() => {
-                        console.log('MathJax initial typeset complete');
-                    });
                 }
             }
         };
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js" defer></script>
     <style>
@@ -100,6 +106,7 @@
             margin-left: 8px;
         }
     </style>
 </head>
 <body class="p-4">
     <div class="max-w-4xl mx-auto">
@@ -172,6 +179,7 @@
             let startTime = null;
             let timerInterval = null;
             const updateTimestamp = () => {
                 if (startTime) {
@@ -224,6 +232,18 @@
                 handleFileSelect(e.dataTransfer.files[0]);
             });
             form.addEventListener('submit', async e => {
                 e.preventDefault();
                 const file = imageInput.files[0];
@@ -237,6 +257,7 @@
                 solution.classList.add('hidden');
                 thoughtsContent.innerHTML = '';
                 answerContent.innerHTML = '';
                 thoughtsBox.classList.add('open');
                 const formData = new FormData();
@@ -271,13 +292,13 @@
                             if (!data.content) return;
                             const container = currentMode === 'thinking' ? thoughtsContent : answerContent;
-                            container.innerHTML += marked.parse(data.content);
-                            if (currentMode === 'answering' && window.MathJax) {
-                                MathJax.typesetPromise([container]).catch(console.error);
                             }
-                            container.scrollTop = container.scrollHeight;
                         });
                     };

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam M-0 | Solution Mathématique</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <!-- Optimized MathJax Configuration -->
     <script>
         window.MathJax = {
             tex: {
             },
             options: {
                 enableMenu: false,
+                messageStyle: 'none',
+                renderActions: {
+                    // Add a new action to handle our delayed typesetting
+                    add: [135, 'delayedTypeset', (doc) => {
+                        // Typeset the entire answerContent
+                        return MathJax.typesetPromise([document.getElementById('answerContent')]);
+                    }]
+                }
             },
             startup: {
                 pageReady: () => {
+                    console.log('MathJax is fully loaded and ready.');
+                    window.mathJaxReady = true; // Signal that MathJax is ready
                 }
             }
         };
     </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" defer></script>
     <style>
             margin-left: 8px;
         }
     </style>
 </head>
 <body class="p-4">
     <div class="max-w-4xl mx-auto">
             let startTime = null;
             let timerInterval = null;
+            let answerBuffer = '';
             const updateTimestamp = () => {
                 if (startTime) {
                 handleFileSelect(e.dataTransfer.files[0]);
             });
+            const typesetAnswerIfReady = () => {
+                if (window.mathJaxReady) {
+                    MathJax.startup.document.elements = [document.getElementById('answerContent')];
+                    MathJax.typeset();
+                    answerContent.scrollTop = answerContent.scrollHeight;
+                } else {
+                    // If not ready, wait a bit and try again
+                    setTimeout(typesetAnswerIfReady, 200);
+                }
+            };
             form.addEventListener('submit', async e => {
                 e.preventDefault();
                 const file = imageInput.files[0];
                 solution.classList.add('hidden');
                 thoughtsContent.innerHTML = '';
                 answerContent.innerHTML = '';
+                answerBuffer = '';
                 thoughtsBox.classList.add('open');
                 const formData = new FormData();
                             if (!data.content) return;
                             const container = currentMode === 'thinking' ? thoughtsContent : answerContent;
+                            if (currentMode === 'answering'){
+                                container.innerHTML += marked.parse(data.content);
+                                typesetAnswerIfReady();
+                            } else {
+                                container.innerHTML += marked.parse(data.content);
                             }
                         });
                     };