Refine Space layout with cleaner visual hierarchy

app.py

@@ -47,6 +47,47 @@ TOOL_RESPONSE_TEMPLATE = """<tool_response>
 {payload}
 </tool_response>"""
 
+CUSTOM_CSS = """
+.gradio-container {
+  max-width: 1200px !important;
+}
+
+.banner-card {
+  padding: 22px 24px;
+  border-radius: 18px;
+  background: linear-gradient(100deg, #1d4ed8 0%, #4338ca 45%, #6d28d9 100%);
+  color: #ffffff;
+  box-shadow: 0 10px 30px rgba(37, 56, 138, 0.22);
+  margin-bottom: 14px;
+}
+
+.banner-title {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.15;
+}
+
+.banner-subtitle {
+  margin-top: 8px;
+  opacity: 0.95;
+  font-size: 14px;
+}
+
+.section-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  padding: 12px 12px 6px;
+  background: #ffffff;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #374151;
+  margin-bottom: 8px;
+}
+"""
+
 
 @dataclass
 class AgentState:
@@ -261,12 +302,20 @@ def run_ui(
         return f"Error: {exc}", json.dumps({"error": str(exc)}, ensure_ascii=False, indent=2)
 
 
-with gr.Blocks(title="DeepResearch Space Starter", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(
+    title="DeepResearch Space Starter",
+    theme=gr.themes.Soft(
+        text_size="md",
+        radius_size="md",
+        spacing_size="md",
+    ),
+    css=CUSTOM_CSS,
+) as demo:
     gr.HTML(
         """
-<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;">
+<div class="banner-card">
+  <div class="banner-title">DeepResearch Space Starter</div>
+  <div class="banner-subtitle">
     Multi-turn research agent with search + visit tools. Start with free models now, switch to your own model later.
   </div>
 </div>
@@ -275,53 +324,57 @@ with gr.Blocks(title="DeepResearch Space Starter", theme=gr.themes.Soft()) as de
 
     with gr.Row():
         with gr.Column(scale=5):
-            question = gr.Textbox(
-                label="Research Question",
-                placeholder="e.g. Compare top open-source deep research agents and summarize differences.",
-                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.",
+            with gr.Group(elem_classes="section-card"):
+                gr.HTML('<div class="section-title">Research Question</div>')
+                question = gr.Textbox(
+                    show_label=False,
+                    placeholder="e.g. Compare top open-source deep research agents and summarize differences.",
+                    lines=6,
                 )
-                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
+                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",
                 )
-                temperature = gr.Slider(
-                    label="Temperature", minimum=0.0, maximum=1.5, value=0.4, step=0.1
-                )
-            gr.Markdown(
-                """
-**Tip**
+
+        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.
-- Keep `Max Turns` low first, then increase for harder queries.
+- Start with fewer turns for speed, then increase for harder tasks.
 """
-            )
+                )
 
-    with gr.Row():
-        with gr.Column():
-            answer = gr.Markdown(label="Final Answer")
-        with gr.Column():
-            trace = gr.Code(label="Execution Trace (JSON)", language="json")
+    with gr.Group(elem_classes="section-card"):
+        with gr.Tabs():
+            with gr.TabItem("Final Answer"):
+                answer = gr.Markdown(label="Final Answer")
+            with gr.TabItem("Execution Trace (JSON)"):
+                trace = gr.Code(label="Execution Trace (JSON)", language="json")
 
     run_btn.click(
         fn=run_ui,