style: ui

app.py

@@ -192,8 +192,17 @@ def _spinner_markup(running: bool) -> str:
 async def gradio_run(query: str, ui_state: Optional[dict]):
     query = replace_chinese_punctuation(query or "")
     if contains_chinese(query):
+        warning_html = (
+            "<div style='background: #f8f9fa; border-left: 4px solid #ffc107; "
+            "color: #495057; padding: 16px; border-radius: 6px; margin: 15px 0; "
+            "font-size: 14px;'>"
+            "<div style='font-weight: 600; margin-bottom: 4px;'>💡 Notice</div>"
+            "<div>We only support English input for the time being. "
+            "Please translate your question to English and try again.</div>"
+            "</div>"
+        )
         yield (
-            "we only support English input for the time being.",
+            warning_html,
             gr.update(interactive=True),
             gr.update(interactive=False),
             ui_state or {"chat_id": None}
@@ -232,9 +241,18 @@ async def gradio_run(query: str, ui_state: Optional[dict]):
                 ui_state
             )
     except asyncio.CancelledError:
-        state.setdefault("errors", []).append("Task has been cancelled")
+        cancelled_html = (
+            "<div style='background: #f8f9fa; border-left: 4px solid #17a2b8; "
+            "color: #495057; padding: 16px; border-radius: 6px; margin: 15px 0; "
+            "font-size: 14px;'>"
+            "<div style='font-weight: 600; margin-bottom: 4px;'>🛑 Task Cancelled</div>"
+            "<div>The current task has been cancelled successfully.</div>"
+            "</div>"
+        )
+        existing_content = _render_markdown(state)
+        final_content = cancelled_html + existing_content if existing_content and existing_content != "Waiting..." else cancelled_html
         yield (
-            _render_markdown(state),
+            final_content,
             gr.update(interactive=True),
             gr.update(interactive=False),
             ui_state
@@ -280,15 +298,24 @@ def build_demo():
     custom_css = """
     #log-view { border: 1px solid #ececec; padding: 12px; border-radius: 8px; scroll-behavior: smooth; }
     """
-    with gr.Blocks(css=custom_css) as demo:
-        gr.Markdown("""
-        **MiroMind - Gradio Demo**  
-        Enter an English question and observe Agents and tool calls in real time (Markdown + collapsible sections).
-        """)
+    with gr.Blocks(css=custom_css, title="MiroThinker Demo") as demo:
+        gr.HTML(
+            "<div style='text-align:center;font-size:32px;font-weight:bold;margin-bottom:10px;'>MiroThinker Demo</div>"
+            "<div style='text-align:center;color:#666;font-size:16px;margin-bottom:15px;'>"
+            "High performance in deep research and tool use.<br>"
+            "Couple with framework: <a href='https://github.com/MiroMindAI/MiroThinker' target='_blank'>https://github.com/MiroMindAI/MiroThinker</a></div>"
+            "<div style='text-align:center;margin-bottom:20px;'>"
+            "<a href='https://huggingface.co/miromind-ai/MiroThinker-32B-DPO-v0.1' target='_blank'>Model</a> | "
+            "<a href='https://dr.miromind.ai' target='_blank'>Full Featured Website</a> | "
+            "<a href='https://miromind.ai/blog/miromind-open-deep-research' target='_blank'>Blog</a> | "
+            "<a href='https://huggingface.co/datasets/miromind-ai/MiroVerse-v0.1' target='_blank'>Data</a></div>"
+            "<div style='text-align:center;color:#888;font-size:14px;margin-bottom:20px;'>"
+            "Enter an English question and observe Agents and tool calls in real time.</div>"
+        )
         with gr.Row():
             inp = gr.Textbox(lines=3, label="Question (English only)")
         with gr.Row():
-            run_btn = gr.Button("Run")
+            run_btn = gr.Button("Send")
             stop_btn = gr.Button("Stop", variant="stop", interactive=False)
         out_md = gr.Markdown("", elem_id="log-view")
         ui_state = gr.State({"chat_id": None})