Update app.py

app.py

@@ -1,6 +1,8 @@
 from transformers import AutoModelForCausalLM, AutoTokenizer
+from latex2mathml.converter import convert
 import gradio as gr
 import torch
+import re
 import spaces
 
 # Initialize the model and tokenizer
@@ -22,6 +24,50 @@ SYSTEM_INSTRUCTION = (
     "Under no circumstances should you provide the complete solution or final answer."
 )
 
+
+def render_latex_to_mathml(text):
+    """
+    Converts LaTeX expressions in the text to MathML.
+    """
+    try:
+        mathml = convert(text)  # Converts LaTeX to MathML
+        return f"<math xmlns='http://www.w3.org/1998/Math/MathML'>{mathml}</math>"
+    except Exception as e:
+        return f"<span>Error rendering LaTeX: {str(e)}</span>"
+
+def preprocess_response(response):
+    """
+    Preprocess the response to convert LaTeX expressions in the text to MathML.
+    Only parts of the text that contain LaTeX are converted.
+    """
+    # Regex patterns to detect LaTeX expressions
+    inline_latex_pattern = r"\$([^\$]+)\$"  # Matches inline LaTeX between single $
+    block_latex_pattern = r"\$\$([^\$]+)\$\$"  # Matches block LaTeX between $$
+
+    # Replace block LaTeX
+    def replace_block(match):
+        latex_code = match.group(1)
+        try:
+            return render_latex_to_mathml(latex_code)
+        except Exception as e:
+            return f"<span>Error rendering block LaTeX: {str(e)}</span>"
+
+    # Replace inline LaTeX
+    def replace_inline(match):
+        latex_code = match.group(1)
+        try:
+            return render_latex_to_mathml(latex_code)
+        except Exception as e:
+            return f"<span>Error rendering inline LaTeX: {str(e)}</span>"
+
+    # First process block LaTeX
+    response = re.sub(block_latex_pattern, replace_block, response)
+
+    # Then process inline LaTeX
+    response = re.sub(inline_latex_pattern, replace_inline, response)
+
+    return response
+
 def apply_chat_template(messages):
     """
     Prepares the messages for the model using the tokenizer's chat template.
@@ -60,8 +106,12 @@ def generate_response(chat_history, user_input):
     ]
     response = tokenizer.batch_decode(generated_ids, skip_special_tokens=True)[0]
 
+    rendered_response = preprocess_response(response)
+
     # Append AI response to chat history
-    chat_history.append(("MathTutor", response))
+    chat_history.append(("MathTutor", rendered_response))
+
+    
 
     # Return updated chat history
     return chat_history
@@ -84,54 +134,6 @@ def create_chat_interface():
     Creates the Gradio interface for the chat application.
     """
     with gr.Blocks() as chat_app:
-        gr.HTML("""
-        <!-- Include KaTeX CSS and JS -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
-        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
-        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js"></script>
-        <script>
-          // Preprocess LaTeX content
-          function preprocessLatex(text) {
-              // Convert block math `[ ... ]` to `\\[ ... \\]`
-              text = text.replace(/\[([^\[\]]+)\]/g, '\\[$1\\]');
-              // Convert inline math `( ... )` to `\\( ... \\)`
-              text = text.replace(/\(([^\(\)]+)\)/g, '\\($1\\)');
-              return text;
-          }
-
-          // Render LaTeX only for elements requiring math
-          function renderChatLatex(mutationsList) {
-              for (const mutation of mutationsList) {
-                  if (mutation.type === "childList") {
-                      mutation.addedNodes.forEach((node) => {
-                          if (node.nodeType === 1) { // Ensure it's an element node
-                              // Check if the content needs LaTeX rendering
-                              if (node.innerHTML.match(/\\\(|\\\[|\$|\[|\(/)) {
-                                  node.innerHTML = preprocessLatex(node.innerHTML);
-                                  renderMathInElement(node, {
-                                      delimiters: [
-                                          { left: "\\(", right: "\\)", display: false },
-                                          { left: "\\[", right: "\\]", display: true },
-                                          { left: "$$", right: "$$", display: true },
-                                          { left: "$", right: "$", display: false }
-                                      ]
-                                  });
-                              }
-                          }
-                      });
-                  }
-              }
-          }
-
-          // Setup MutationObserver
-          document.addEventListener("DOMContentLoaded", () => {
-              const chatContainer = document.querySelector("#chat-container");
-              const observer = new MutationObserver(renderChatLatex);
-              observer.observe(chatContainer, { childList: true, subtree: true });
-          });
-        </script>
-        """)
-
         gr.Markdown("## Math Hint Chat")
         gr.Markdown(
             "This chatbot provides hints and step-by-step guidance for solving math problems. "