Update app.py

app.py

@@ -3,6 +3,7 @@ import spaces
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 import torch
 from threading import Thread
+import re
 
 phi4_model_path = "Daemontatox/Qwen3-14B-Griffon"
 
@@ -11,6 +12,16 @@ device = "cuda:0" if torch.cuda.is_available() else "cpu"
 phi4_model = AutoModelForCausalLM.from_pretrained(phi4_model_path, device_map="auto", torch_dtype="auto")
 phi4_tokenizer = AutoTokenizer.from_pretrained(phi4_model_path)
 
+# Function to process LaTeX in the output
+def process_latex(text):
+    """
+    Process LaTeX equations in text:
+    - Inline equations: $...$
+    - Block equations: $$...$$
+    """
+    # No special processing needed as Gradio's markdown component supports LaTeX
+    return text
+
 @spaces.GPU(duration=120)
 def generate_response(user_message, max_tokens, temperature, top_k, top_p, repetition_penalty, history_state):
     if not user_message.strip():
@@ -24,7 +35,7 @@ def generate_response(user_message, max_tokens, temperature, top_k, top_p, repet
     end_tag = "<|im_end|>"
 
     # Recommended prompt settings by Microsoft
-    system_message = "Your role as an assistant involves thoroughly exploring questions through a systematic thinking process before providing the final precise and accurate solutions. This requires engaging in a comprehensive cycle of analysis, summarizing, exploration, reassessment, reflection, backtracing, and iteration to develop well-considered thinking process. Please structure your response into two main sections: Thought and Solution using the specified format: <think> {Thought section} </think> {Solution section}. In the Thought section, detail your reasoning process in steps. Each step should include detailed considerations such as analysing questions, summarizing relevant findings, brainstorming new ideas, verifying the accuracy of the current steps, refining any errors, and revisiting previous steps. In the Solution section, based on various attempts, explorations, and reflections from the Thought section, systematically present the final solution that you deem correct. The Solution section should be logical, accurate, and concise and detail necessary steps needed to reach the conclusion. Now, try to solve the following question through the above guidelines:"
+    system_message = "Your role as an assistant involves thoroughly exploring questions through a systematic thinking process before providing the final precise and accurate solutions. This requires engaging in a comprehensive cycle of analysis, summarizing, exploration, reassessment, reflection, backtracing, and iteration to develop well-considered thinking process. Please structure your response into two main sections: Thought and Solution using the specified format: <think> {Thought section} </think> {Solution section}. In the Thought section, detail your reasoning process in steps. Each step should include detailed considerations such as analysing questions, summarizing relevant findings, brainstorming new ideas, verifying the accuracy of the current steps, refining any errors, and revisiting previous steps. In the Solution section, based on various attempts, explorations, and reflections from the Thought section, systematically present the final solution that you deem correct. The Solution section should be logical, accurate, and concise and detail necessary steps needed to reach the conclusion. You can use LaTeX for mathematical expressions, enclosed in $ for inline equations and $$ for block equations. Now, try to solve the following question through the above guidelines:"
     prompt = f"{start_tag}system{sep_tag}{system_message}{end_tag}"
     for message in history_state:
         if message["role"] == "user":
@@ -64,7 +75,9 @@ def generate_response(user_message, max_tokens, temperature, top_k, top_p, repet
     for new_token in streamer:
         cleaned_token = new_token.replace("<|im_start|>", "").replace("<|im_sep|>", "").replace("<|im_end|>", "")
         assistant_response += cleaned_token
-        new_history[-1]["content"] = assistant_response.strip()
+        # Process the response to handle LaTeX content
+        processed_response = process_latex(assistant_response.strip())
+        new_history[-1]["content"] = processed_response
         yield new_history, new_history
 
     yield new_history, new_history
@@ -72,13 +85,26 @@ def generate_response(user_message, max_tokens, temperature, top_k, top_p, repet
 example_messages = {
     "Math reasoning": "If a rectangular prism has a length of 6 cm, a width of 4 cm, and a height of 5 cm, what is the length of the longest line segment that can be drawn from one vertex to another?",
     "Logic puzzle": "Four people (Alex, Blake, Casey, and Dana) each have a different favorite color (red, blue, green, yellow) and a different favorite fruit (apple, banana, cherry, date). Given the following clues: 1) The person who likes red doesn't like dates. 2) Alex likes yellow. 3) The person who likes blue likes cherries. 4) Blake doesn't like apples or bananas. 5) Casey doesn't like yellow or green. Who likes what color and what fruit?",
-    "Physics problem": "A ball is thrown upward with an initial velocity of 15 m/s from a height of 2 meters above the ground. Assuming the acceleration due to gravity is 9.8 m/s², determine: 1) The maximum height the ball reaches. 2) The total time the ball is in the air before hitting the ground. 3) The velocity with which the ball hits the ground."
+    "Physics problem": "A ball is thrown upward with an initial velocity of 15 m/s from a height of 2 meters above the ground. Assuming the acceleration due to gravity is 9.8 m/s², determine: 1) The maximum height the ball reaches. 2) The total time the ball is in the air before hitting the ground. 3) The velocity with which the ball hits the ground.",
+    "Math with LaTeX": "Solve the quadratic equation $ax^2 + bx + c = 0$ for $x$ using the quadratic formula. Then, solve the specific equation $3x^2 - 6x + 2 = 0$."
+}
+
+# Customize the Gradio CSS to enhance the LaTeX rendering
+css = """
+.math-container .katex { 
+    font-size: 1.2em;
+}
+.math-block .katex {
+    font-size: 1.5em;
+    display: block;
+    margin: 1em 0;
 }
+"""
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     gr.Markdown(
         """
-        # try the example problems below to see how the model breaks down complex reasoning problems.
+        # Try the example problems below to see how the model breaks down complex reasoning problems with LaTeX support.
         """
     )
     
@@ -122,7 +148,15 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 )
         
         with gr.Column(scale=4):
-            chatbot = gr.Chatbot(label="Chat", type="messages")
+            # Use Chatbot with latex_delimiters to enable LaTeX rendering
+            chatbot = gr.Chatbot(
+                label="Chat", 
+                type="messages",
+                latex_delimiters=[
+                    {"left": "$$", "right": "$$", "display": True},
+                    {"left": "$", "right": "$", "display": False}
+                ]
+            )
             with gr.Row():
                 user_input = gr.Textbox(
                     label="Your message",
@@ -136,6 +170,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 example1_button = gr.Button("Math reasoning")
                 example2_button = gr.Button("Logic puzzle")
                 example3_button = gr.Button("Physics problem")
+                example4_button = gr.Button("Math with LaTeX")
 
     submit_button.click(
         fn=generate_response,
@@ -168,5 +203,10 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         inputs=None,
         outputs=user_input
     )
+    example4_button.click(
+        fn=lambda: gr.update(value=example_messages["Math with LaTeX"]),
+        inputs=None,
+        outputs=user_input
+    )
 
 demo.launch(ssr_mode=False)