Update templates/result.html

templates/result.html

@@ -21,17 +21,46 @@
                 resultsContainer.appendChild(pageDiv);
             });
 
-            // Simulate loading for each page
-            results.forEach((result, index) => {
-                const contentDiv = document.getElementById(`result-content-${result.page_number}`);
-                const loadingDiv = document.getElementById(`loading-indicator-${result.page_number}`);
-                
-                // Simulate a delay to mimic loading
-                setTimeout(() => {
-                    loadingDiv.style.display = 'none';
-                    contentDiv.style.display = 'block';
-                }, index * 2000); // Adjust the delay as needed
-            });
+            // Load MathJax and MathPix Markdown-It scripts
+            const script1 = document.createElement('script');
+            script1.src = "https://cdn.jsdelivr.net/npm/mathpix-markdown-it@1.3.6/es5/bundle.js";
+            document.head.appendChild(script1);
+
+            script1.onload = function() {
+                const script2 = document.createElement('script');
+                script2.src = "https://polyfill.io/v3/polyfill.min.js?features=es6";
+                document.head.appendChild(script2);
+
+                script2.onload = function() {
+                    const script3 = document.createElement('script');
+                    script3.type = 'text/javascript';
+                    script3.textContent = `
+                        window.onload = function() {
+                            const isLoaded = window.loadMathJax();
+                            if (isLoaded) {
+                                console.log('Styles loaded!');
+                            }
+
+                            const results = ${JSON.stringify(results)};
+                            results.forEach(result => {
+                                const contentDiv = document.getElementById(\`result-content-\${result.page_number}\`);
+                                const loadingDiv = document.getElementById(\`loading-indicator-\${result.page_number}\`);
+
+                                if (contentDiv) {
+                                    const options = {
+                                        htmlTags: true
+                                    };
+                                    const html = window.render(result.text, options);
+                                    contentDiv.innerHTML = html;
+                                    loadingDiv.style.display = 'none';
+                                    contentDiv.style.display = 'block';
+                                }
+                            });
+                        };
+                    `;
+                    document.head.appendChild(script3);
+                };
+            };
         });
     </script>
 </head>