Adjust typography and controls layout

app.py

@@ -48,8 +48,15 @@ TOOL_RESPONSE_TEMPLATE = """<tool_response>
 </tool_response>"""
 
 CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
+
 .gradio-container {
   max-width: 1200px !important;
+  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+}
+
+.gradio-container * {
+  font-family: inherit !important;
 }
 
 .banner-card {
@@ -333,6 +340,7 @@ with gr.Blocks(
                 )
                 with gr.Row():
                     run_btn = gr.Button("Run Research", variant="primary", size="lg")
+                    stop_btn = gr.Button("Stop", variant="stop", size="lg")
                     clear_btn = gr.Button("Clear", variant="secondary", size="lg")
                 gr.Examples(
                     examples=[
@@ -346,27 +354,20 @@ with gr.Blocks(
 
         with gr.Column(scale=3):
             with gr.Group(elem_classes="section-card"):
-                with gr.Accordion("Model & Runtime Settings", open=False):
-                    model = gr.Dropdown(
-                        label="Model",
-                        choices=DEFAULT_FREE_MODELS,
-                        value=DEFAULT_MODEL if DEFAULT_MODEL in DEFAULT_FREE_MODELS else DEFAULT_FREE_MODELS[0],
-                        allow_custom_value=True,
-                        info="You can type any model id supported by HF Inference API.",
-                    )
-                    max_turns = gr.Slider(label="Max Turns", minimum=2, maximum=20, value=8, step=1)
-                    max_search_results = gr.Slider(
-                        label="Search Results Per Query", minimum=1, maximum=10, value=5, step=1
-                    )
-                    temperature = gr.Slider(
-                        label="Temperature", minimum=0.0, maximum=1.5, value=0.4, step=0.1
-                    )
-                gr.Markdown(
-                    """
-**Tips**
-- Add `HF_TOKEN` in Space Secrets for stable access.
-- Start with fewer turns for speed, then increase for harder tasks.
-"""
+                gr.HTML('<div class="section-title">Model & Runtime Settings</div>')
+                model = gr.Dropdown(
+                    label="Model",
+                    choices=DEFAULT_FREE_MODELS,
+                    value=DEFAULT_MODEL if DEFAULT_MODEL in DEFAULT_FREE_MODELS else DEFAULT_FREE_MODELS[0],
+                    allow_custom_value=True,
+                    info="You can type any model id supported by HF Inference API.",
+                )
+                max_turns = gr.Slider(label="Max Turns", minimum=2, maximum=20, value=8, step=1)
+                max_search_results = gr.Slider(
+                    label="Search Results Per Query", minimum=1, maximum=10, value=5, step=1
+                )
+                temperature = gr.Slider(
+                    label="Temperature", minimum=0.0, maximum=1.5, value=0.4, step=0.1
                 )
 
     with gr.Group(elem_classes="section-card"):
@@ -376,11 +377,12 @@ with gr.Blocks(
             with gr.TabItem("Execution Trace (JSON)"):
                 trace = gr.Code(label="Execution Trace (JSON)", language="json")
 
-    run_btn.click(
+    run_event = run_btn.click(
         fn=run_ui,
         inputs=[question, model, max_turns, max_search_results, temperature],
         outputs=[answer, trace],
     )
+    stop_btn.click(fn=None, cancels=[run_event])
     clear_btn.click(
         fn=lambda: ("", "", "{}"),
         inputs=[],