Added MathJax for LaTeX rendering

app.py

@@ -444,6 +444,32 @@ custom_css = """
 
 # Create the interface with proper structure
 with gr.Blocks(css=custom_css, title="EduBot") as demo:
+     # Add MathJax for LaTeX rendering
+    gr.HTML('<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>')
+    gr.HTML('<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>')
+    gr.HTML('''
+    <script>
+    window.MathJax = {
+      tex: {
+        inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],
+        displayMath: [['$$', '$$'], ['\\\\[', '\\\\]']],
+        packages: {'[+]': ['ams']}
+      },
+      svg: {fontCache: 'global'},
+      startup: {
+        ready: () => {
+          MathJax.startup.defaultReady();
+          // Re-render math when new content is added
+          const observer = new MutationObserver(function(mutations) {
+            MathJax.typesetPromise();
+          });
+          observer.observe(document.body, {childList: true, subtree: true});
+        }
+      }
+    };
+    </script>
+    ''')
+    
     # Title Section
     gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')