Polish Space UI with card layout and controls

app.py

@@ -261,31 +261,47 @@ def run_ui(
         return f"Error: {exc}", json.dumps({"error": str(exc)}, ensure_ascii=False, indent=2)
 
 
-with gr.Blocks(title="DeepResearch Space Starter") as demo:
-    gr.Markdown(
+with gr.Blocks(title="DeepResearch Space Starter", theme=gr.themes.Soft()) as demo:
+    gr.HTML(
         """
-# DeepResearch Space Starter
-Ask a question, and the agent will iteratively search and visit pages before producing a final answer.
-
-This starter uses free HF Inference models by default. You can switch models later with environment variables.
+<div style="padding: 18px 20px; border-radius: 16px; background: linear-gradient(90deg,#1d4ed8 0%,#4f46e5 50%,#7c3aed 100%); color: white; margin-bottom: 12px;">
+  <div style="font-size: 26px; font-weight: 700; line-height: 1.2;">DeepResearch Space Starter</div>
+  <div style="opacity: 0.95; margin-top: 6px;">
+    Multi-turn research agent with search + visit tools. Start with free models now, switch to your own model later.
+  </div>
+</div>
 """
     )
 
     with gr.Row():
-        with gr.Column(scale=2):
+        with gr.Column(scale=5):
             question = gr.Textbox(
-                label="Question",
+                label="Research Question",
                 placeholder="e.g. Compare top open-source deep research agents and summarize differences.",
-                lines=4,
-            )
-            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 also type your own model id.",
+                lines=6,
             )
             with gr.Row():
+                run_btn = gr.Button("Run Research", variant="primary", size="lg")
+                clear_btn = gr.Button("Clear", variant="secondary", size="lg")
+            gr.Examples(
+                examples=[
+                    ["Compare RAG and fine-tuning: trade-offs, cost, and when to use each."],
+                    ["Summarize the differences between Qwen2.5, Llama 3.1, and Mistral 7B for agent tasks."],
+                    ["What are the key design patterns for long-context research agents?"],
+                ],
+                inputs=question,
+                label="Quick Examples",
+            )
+
+        with gr.Column(scale=3):
+            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
@@ -293,16 +309,30 @@ This starter uses free HF Inference models by default. You can switch models lat
                 temperature = gr.Slider(
                     label="Temperature", minimum=0.0, maximum=1.5, value=0.4, step=0.1
                 )
-            run_btn = gr.Button("Run Research", variant="primary")
-        with gr.Column(scale=3):
+            gr.Markdown(
+                """
+**Tip**
+- Add `HF_TOKEN` in Space Secrets for stable access.
+- Keep `Max Turns` low first, then increase for harder queries.
+"""
+            )
+
+    with gr.Row():
+        with gr.Column():
             answer = gr.Markdown(label="Final Answer")
-            trace = gr.Code(label="Trace (JSON)", language="json")
+        with gr.Column():
+            trace = gr.Code(label="Execution Trace (JSON)", language="json")
 
     run_btn.click(
         fn=run_ui,
         inputs=[question, model, max_turns, max_search_results, temperature],
         outputs=[answer, trace],
     )
+    clear_btn.click(
+        fn=lambda: ("", "", "{}"),
+        inputs=[],
+        outputs=[question, answer, trace],
+    )
 
 
 if __name__ == "__main__":