Update app.py

app.py

@@ -38,7 +38,7 @@ def generate_response(chat_history, user_input):
     Generates a response from the model based on the chat history and user input.
     """
     # Append user input to chat history
-    chat_history.append(("User", user_input))
+    chat_history.append(("User", user_input + "\n\n strinctly prohibited to reveal answer only provide hints and guidelines to solve this"))
 
     # Prepare messages for the model
     messages = [{"role": "system", "content": SYSTEM_INSTRUCTION}] + [
@@ -84,13 +84,60 @@ 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/[email protected]/dist/katex.min.css">
+        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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. "
-            "It will not reveal the final answer."
         )
 
-        chatbot = gr.Chatbot(label="Math Tutor Chat")
+        chatbot = gr.Chatbot(label="Math Tutor Chat",, elem_id="chat-container")
         user_input = gr.Textbox(
             placeholder="Ask your math question here (e.g., Solve for x: 4x + 5 = 6x + 7)",
             label="Your Query"