Update app.py

app.py

@@ -25,6 +25,49 @@ llm = Llama(
     chat_format="chatml",
 )
 
+# Gradio 组件
+output_md = gr.Markdown(
+    label="Answer",
+    value="Answer will be presented here",
+    latex_delimiters=[
+        {"left": "\\(", "right": "\\)", "display": True},
+        {"left": "\\begin\{equation\}", "right": "\\end\{equation\}", "display": True},
+        {"left": "\\begin\{align\}", "right": "\\end\{align\}", "display": True},
+        {"left": "\\begin\{alignat\}", "right": "\\end\{alignat\}", "display": True},
+        {"left": "\\begin\{gather\}", "right": "\\end\{gather\}", "display": True},
+        {"left": "\\begin\{CD\}", "right": "\\end\{CD\}", "display": True},
+        {"left": "\\[", "right": "\\]", "display": True},
+    ],
+    elem_id="qwen-md",
+    show_copy_button=True,
+    container=True,
+    render=False,
+)
+target_lang = gr.Dropdown(
+    choices=["Chinese", "English"],
+    value="Chinese",
+    label="Output Language",
+    interactive=True,
+    render=False,
+)
+new_tokens = gr.Slider(
+    minimum=1, maximum=8192, value=2048, step=1, label="Max new tokens", render=False
+)
+temperature = gr.Slider(
+    minimum=0, maximum=2.0, value=0.5, step=0.1, label="Temperature", render=False
+)
+top_p = gr.Slider(minimum=0.0, maximum=1.0, value=0.95, step=0.05, label="Top P", render=False)
+input_text = gr.Textbox(label="Ask math questions here", render=False)
+submit_btn = gr.Button(value="Ask", render=False)
+banner = gr.HTML("""
+<p align="center"><img src="https://modelscope.oss-cn-beijing.aliyuncs.com/resource/qwen.png" style="height: 60px"/><p>
+<center><font size=8>📖 Qwen2.5-Math GGUF</center>
+<center><font size=3>This WebUI is based on Qwen2.5-Math-7B-Instruct-GGUF for mathematical reasoning. You can input texts of mathematical or arithmetic problems.</center>
+""",
+    render=False,
+)
+
+
 # Gradio 函数
 def respond(
     input_text,
@@ -61,53 +104,24 @@ def respond(
         yield message_repl
 
 
-with gr.Blocks(css=CSS, theme="Soft") as demo:
-    banner = gr.HTML("""
-<p align="center"><img src="https://modelscope.oss-cn-beijing.aliyuncs.com/resource/qwen.png" style="height: 60px"/><p>
-<center><font size=8>📖 Qwen2.5-Math GGUF</center>
-<center><font size=3>This WebUI is based on Qwen2.5-Math-7B-Instruct-GGUF for mathematical reasoning. You can input texts of mathematical or arithmetic problems.</center>
-"""
-)
-    with gr.Row():
-        with gr.Column():
-            input_text = gr.Textbox(label="Ask math questions here")
-            target_lang = gr.Dropdown(
-                choices=["Chinese", "English"],
-                value="Chinese",
-                label="Output Language",
-                interactive=True,
-            )
-            new_tokens = gr.Slider(
-                minimum=1, maximum=8192, value=2048, step=1, label="Max new tokens"
-            )
-            temperature = gr.Slider(
-                minimum=0, maximum=2.0, value=0.5, step=0.1, label="Temperature"
-            )
-            top_p = gr.Slider(minimum=0.0, maximum=1.0, value=0.95, step=0.05, label="Top P")
-            submit_btn = gr.Button(value="Ask")
-        with gr.Column():
-            output_md = gr.Markdown(
-                label="Answer",
-                value="Answer will be presented here",
-                latex_delimiters=[
-                    {"left": "\\(", "right": "\\)", "display": True},
-                    {"left": "\\begin\{equation\}", "right": "\\end\{equation\}", "display": True},
-                    {"left": "\\begin\{align\}", "right": "\\end\{align\}", "display": True},
-                    {"left": "\\begin\{alignat\}", "right": "\\end\{alignat\}", "display": True},
-                    {"left": "\\begin\{gather\}", "right": "\\end\{gather\}", "display": True},
-                    {"left": "\\begin\{CD\}", "right": "\\end\{CD\}", "display": True},
-                    {"left": "\\[", "right": "\\]", "display": True},
-                ],
-                elem_id="qwen-md",
-                show_copy_button=True,
-                container=True,
-            )
-
+with gr.Blocks(css=CSS, theme="NoCrypt/miku") as demo:
     submit_btn.click(
         fn=respond,
         inputs=[input_text, target_lang, new_tokens, temperature, top_p],
         outputs=output_md,
     )
+    with gr.Column():
+        # banner.render()
+        with gr.Row():
+            with gr.Column():
+                input_text.render()
+                target_lang.render()
+                new_tokens.render()
+                temperature.render()
+                top_p.render()
+                submit_btn.render()
+            with gr.Column():
+                output_md.render()
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()