Dynamically switch to render mode on load

app.css

@@ -148,3 +148,7 @@
     transform: rotate(360deg);
   }
 }
+
+.problem-input-markdown {
+  padding: 18px;
+}

app.py

@@ -755,7 +755,7 @@ def update_example_problem():
 
 
 def clear():
-    problem_example_text, problem_example_text_display = update_example_problem()
+    problem_example_text_display, problem_example_text = update_example_problem()
     return "", 0.1, "", problem_example_text_display, problem_example_text
 
 
@@ -763,8 +763,9 @@ running_success = False
 
 with gr.Blocks(css=css, title="Math Olympiad Solver") as demo:
     btn_list = []
+    problem_input_ele_list = []
 
-    problem_example_text, problem_example_text_display = update_example_problem()
+    problem_example_text_display, problem_example_text = update_example_problem()
 
     with gr.Row(elem_classes="title"):
         gr.HTML("Math Olympiad Solver", elem_classes="title-content")
@@ -787,12 +788,25 @@ with gr.Blocks(css=css, title="Math Olympiad Solver") as demo:
                     copy_btn = gr.Button("Copy", elem_classes="probelm-example-copy")
 
                 with gr.Row(elem_classes="copy-icon-container"):
-                    problem_example = gr.HTML(
+                    problem_example = gr.Markdown(
                         problem_example_text_display,
+                        latex_delimiters=latex_delimiters,
                         elem_classes="probelm-example-content",
                     )
 
-            inp = gr.Textbox(placeholder="Problem", label="Problem input", lines=5)
+            with gr.Row(elem_classes="probelm-input-container"):
+                inp = gr.Textbox(placeholder="Problem", label="Problem input", lines=5, visible=True)
+                problem_markdown = gr.Markdown(
+                    visible=False,
+                    latex_delimiters=[
+                        {"left": "[", "right": "]", "display": True},
+                        {"left": "$", "right": "$", "display": False},
+                    ],
+                )
+
+                inp.change(fn=lambda text: text, inputs=[inp], outputs=[problem_markdown])
+                problem_input_ele_list.append(inp)
+                problem_input_ele_list.append(problem_markdown)
 
             with gr.Accordion("Advanced Options", open=False):
                 temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, label="Temperature")
@@ -805,7 +819,13 @@ with gr.Blocks(css=css, title="Math Olympiad Solver") as demo:
 
         with gr.Column(scale=1, elem_classes="right"):
             gr.HTML("Solution", elem_classes="solution-title-content")
-            out = gr.Markdown(elem_classes="solution-content", latex_delimiters=latex_delimiters)
+            out = gr.Markdown(
+                elem_classes="solution-content",
+                latex_delimiters=[
+                    {"left": "[", "right": "]", "display": True},
+                    {"left": "$", "right": "$", "display": False},
+                ],
+            )
 
         problem_example_text_hidden = gr.Markdown(value=problem_example_text, visible=False)
 
@@ -820,6 +840,26 @@ with gr.Blocks(css=css, title="Math Olympiad Solver") as demo:
         def mount_run_btn(btn):
             btn.click(fn=solve_problem_wrapper, inputs=[inp, temperature], outputs=out)
             btn.click(get_running_btns, None, outputs=btn_list)
+            btn.click(get_problem_input, None, outputs=problem_input_ele_list)
+
+        def get_run_after_problem_input():
+            return gr.Textbox(placeholder="Problem", label="Problem input", lines=5, visible=False), gr.Markdown(
+                visible=True,
+                latex_delimiters=[
+                    {"left": "[", "right": "]", "display": True},
+                    {"left": "$", "right": "$", "display": False},
+                ],
+                elem_classes="problem-input-markdown",
+            )
+
+        def get_init_problem_input():
+            return gr.Textbox(placeholder="Problem", label="Problem input", lines=5, visible=True), gr.Markdown(
+                visible=False,
+                latex_delimiters=[
+                    {"left": "[", "right": "]", "display": True},
+                    {"left": "$", "right": "$", "display": False},
+                ],
+            )
 
         def get_running_btns():
             global running_success
@@ -857,6 +897,8 @@ with gr.Blocks(css=css, title="Math Olympiad Solver") as demo:
             ],
         )
 
+        btn_clear.click(get_init_problem_input, None, outputs=problem_input_ele_list)
+
         mount_run_btn(btn_run)
 
         demo.load(