Top banner with Quest + OSU NLP logos; hero heading; categorized examples

app.py

@@ -88,7 +88,10 @@ TOOL_RESPONSE_TEMPLATE = """<tool_response>
 
 SEARCH_CACHE: Dict[str, Dict[str, Any]] = {}
 VISIT_CACHE: Dict[str, Dict[str, Any]] = {}
-LOGO_PATH = str(Path(__file__).resolve().parent / "assets" / "quest-logo.png")
+ASSETS_DIR = Path(__file__).resolve().parent / "assets"
+LOGO_PATH = str(ASSETS_DIR / "quest-logo.png")
+OSU_NLP_LOGO_PATH = str(ASSETS_DIR / "osu-nlp-logo.png")
+OSU_NLP_URL = "https://nlp.osu.edu/"
 
 # Gradio 5 default themes pull greys from the neutral palette; Base + explicit overrides keep
 # the whole UI on a strict blue/white scheme without unwanted slate panels.
@@ -269,12 +272,121 @@ gradio-app > div {
 
 [class*="gradio-container"] *::selection { background: rgba(37,99,235,0.18); }
 
+/* --- TOP BANNER --- */
+.top-banner {
+  align-items: center !important;
+  padding: 28px 0 12px 0;
+  margin-bottom: 8px;
+  gap: 0 !important;
+}
+.top-banner .banner-side { min-width: 0; }
+.top-banner .banner-center {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+.banner-quest-logo img {
+  width: auto !important;
+  max-width: 520px !important;
+  max-height: 160px !important;
+  height: auto !important;
+  object-fit: contain !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  margin: 0 auto !important;
+  display: block !important;
+}
+.banner-quest-logo,
+.banner-quest-logo .image-container,
+.banner-quest-logo .image-frame,
+.banner-quest-logo > div,
+.banner-quest-logo button {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+.banner-quest-logo .icon-button-wrapper,
+.banner-quest-logo [aria-label*="hare" i],
+.banner-quest-logo [aria-label*="ownload" i],
+.banner-quest-logo [aria-label*="ullscreen" i] {
+  display: none !important;
+}
+.banner-subtitle {
+  color: #4a6a8c;
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  text-align: center;
+  margin: 0;
+}
+
+.banner-right { justify-content: flex-end; display: flex; }
+.osu-nlp-mark {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  gap: 12px !important;
+  padding: 4px 4px 4px 12px;
+  width: auto !important;
+  background: transparent !important;
+}
+.osu-nlp-logo,
+.osu-nlp-logo .image-container,
+.osu-nlp-logo .image-frame,
+.osu-nlp-logo > div,
+.osu-nlp-logo button {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  width: auto !important;
+  max-width: 52px !important;
+}
+.osu-nlp-logo img {
+  width: 52px !important;
+  height: 52px !important;
+  object-fit: contain !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+.osu-nlp-logo .icon-button-wrapper,
+.osu-nlp-logo [aria-label*="hare" i],
+.osu-nlp-logo [aria-label*="ownload" i],
+.osu-nlp-logo [aria-label*="ullscreen" i] {
+  display: none !important;
+}
+.osu-nlp-caption {
+  font-size: 12px !important;
+  line-height: 1.25 !important;
+  font-weight: 600 !important;
+  color: #1d4ed8 !important;
+  text-decoration: none !important;
+  white-space: nowrap !important;
+}
+.osu-nlp-caption:hover {
+  color: #1e3a8a !important;
+}
+
 /* --- LEFT/RIGHT layout --- */
 .layout-gap { gap: 24px !important; align-items: flex-start; }
 .right-stack > * { margin-bottom: 12px; }
 .action-row { gap: 10px !important; margin-top: 12px; }
 .action-row button { min-width: 0; flex: 1; }
 
+.hero-heading {
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.005em !important;
+  text-transform: none !important;
+  color: #0f2744 !important;
+  margin-bottom: 14px !important;
+}
+
 /* --- LOGO --- */
 .banner-logo-image,
 .banner-logo-image .image-container,
@@ -646,6 +758,33 @@ gradio-app > div {
 .example-note { color: #4a6a8c; font-size: 12px; margin: 0 0 10px 0; }
 .example-buttons { display: grid; gap: 10px; margin-top: 4px; }
 
+/* Each Example button shows "<emoji>  <Category> — <query text>". Left-align the
+   label so multi-line examples read like cards, and tint the category prefix in
+   blue via a CSS gradient (more robust across Gradio versions than inline HTML). */
+[class*="gradio-container"] .example-btn {
+  text-align: left !important;
+  justify-content: flex-start !important;
+  white-space: normal !important;
+  line-height: 1.5 !important;
+  padding: 14px 16px !important;
+  font-size: 14px !important;
+  color: #0f2744 !important;
+  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
+  border: 1px solid #bfdbfe !important;
+  border-radius: 14px !important;
+  box-shadow: 0 1px 2px rgba(15,39,68,0.03) !important;
+}
+[class*="gradio-container"] .example-btn:hover {
+  background: #eff6ff !important;
+  border-color: #93c5fd !important;
+  box-shadow: 0 4px 14px rgba(37,99,235,0.12) !important;
+}
+[class*="gradio-container"] .example-btn > * {
+  color: inherit !important;
+  white-space: normal !important;
+  display: inline !important;
+}
+
 /* --- gr.Examples component (currently unused but defensively styled) --- */
 [class*="gradio-container"] [data-testid="block-examples"] {
   background: #f0f6ff !important;
@@ -1057,19 +1196,83 @@ def run_ui(
         return f"Error: {exc}", json.dumps({"error": str(exc)}, ensure_ascii=False, indent=2)
 
 
+EXAMPLES = [
+    {
+        "category": "Fixed facts",
+        "icon": "🎯",
+        "text": "Which university first awarded a PhD in computer science, and in what year?",
+    },
+    {
+        "category": "Time-varying",
+        "icon": "📈",
+        "text": "What is the current CEO of OpenAI, and when did they take the role?",
+    },
+    {
+        "category": "Multi-constraints",
+        "icon": "🧩",
+        "text": "Find a 2-day Tokyo itinerary under $250 focused on museums and vegetarian food.",
+    },
+    {
+        "category": "Long-form research report",
+        "icon": "📚",
+        "text": "Compare three leading open-source coding agents with their strengths, weaknesses, and recent benchmark results.",
+    },
+]
+
+
+def _example_label(ex: Dict[str, str]) -> str:
+    return f"{ex['icon']}  {ex['category']} — {ex['text']}"
+
+
 with gr.Blocks(
-    title="DeepResearch Space Starter",
+    title="Quest · Deep Research by OSU NLP",
     theme=APP_THEME,
     css=CUSTOM_CSS,
     fill_width=True,
 ) as demo:
+    # --- Top banner with the Quest logo centered and the OSU NLP mark on the right ---
+    with gr.Row(elem_classes="top-banner"):
+        with gr.Column(scale=1, elem_classes="banner-side"):
+            pass
+        with gr.Column(scale=4, elem_classes="banner-center"):
+            gr.Image(
+                value=LOGO_PATH,
+                show_label=False,
+                container=False,
+                interactive=False,
+                show_download_button=False,
+                show_fullscreen_button=False,
+                show_share_button=False,
+                elem_classes="banner-quest-logo",
+            )
+            gr.HTML(
+                '<div class="banner-subtitle">A deep research agent for multi-source investigation</div>'
+            )
+        with gr.Column(scale=1, elem_classes="banner-side banner-right"):
+            with gr.Row(elem_classes="osu-nlp-mark"):
+                gr.Image(
+                    value=OSU_NLP_LOGO_PATH,
+                    show_label=False,
+                    container=False,
+                    interactive=False,
+                    show_download_button=False,
+                    show_fullscreen_button=False,
+                    show_share_button=False,
+                    elem_classes="osu-nlp-logo",
+                )
+                gr.HTML(
+                    f'<a class="osu-nlp-caption" href="{OSU_NLP_URL}" target="_blank" rel="noopener noreferrer">'
+                    'The Ohio State University<br/>NLP Group</a>'
+                )
+
+    # --- Main two-column layout ---
     with gr.Row(elem_classes="layout-gap"):
         with gr.Column(scale=6, min_width=420):
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-heading">Chat</div>')
+                gr.HTML('<div class="section-heading hero-heading">What can I search for you?</div>')
                 question = gr.Textbox(
                     show_label=False,
-                    placeholder="Ask anything you want to research...",
+                    placeholder="Ask anything you want to research in depth...",
                     lines=6,
                 )
                 with gr.Row(elem_classes="action-row"):
@@ -1079,10 +1282,14 @@ with gr.Blocks(
 
             with gr.Group(elem_classes="section-card"):
                 gr.HTML('<div class="section-heading">Try Examples</div>')
+                gr.HTML(
+                    '<div class="example-note">Each example shows the kind of query it represents. Click one to auto-fill.</div>'
+                )
                 with gr.Column(elem_classes="example-buttons"):
-                    ex1_btn = gr.Button("🌏  Plan a 2-day Tokyo trip under $250 with trade-offs", variant="secondary")
-                    ex2_btn = gr.Button("🤖  Compare 3 open-source coding agents with pros/cons", variant="secondary")
-                    ex3_btn = gr.Button("⚖️  RAG vs fine-tuning for legal QA: which and why?", variant="secondary")
+                    example_buttons = [
+                        gr.Button(_example_label(ex), variant="secondary", elem_classes="example-btn")
+                        for ex in EXAMPLES
+                    ]
 
             with gr.Group(elem_classes="section-card"):
                 with gr.Tabs():
@@ -1091,19 +1298,7 @@ with gr.Blocks(
                     with gr.TabItem("Record"):
                         trace = gr.Code(label="Execution Trace (JSON)", language="json")
 
-        with gr.Column(scale=4, min_width=360, elem_classes="right-stack"):
-            with gr.Group(elem_classes=["section-card", "no-frame"]):
-                gr.Image(
-                    value=LOGO_PATH,
-                    show_label=False,
-                    container=False,
-                    interactive=False,
-                    show_download_button=False,
-                    show_fullscreen_button=False,
-                    show_share_button=False,
-                    elem_classes="banner-logo-image",
-                )
-
+        with gr.Column(scale=4, min_width=340, elem_classes="right-stack"):
             with gr.Group(elem_classes=["section-card", "no-frame"]):
                 gr.HTML(
                     f"""
@@ -1151,21 +1346,12 @@ with gr.Blocks(
         inputs=[question, model, max_turns, max_search_results, temperature],
         outputs=[answer, trace],
     )
-    ex1_btn.click(
-        fn=lambda: "Plan a 2-day Tokyo trip under $250 with trade-offs.",
-        inputs=[],
-        outputs=[question],
-    )
-    ex2_btn.click(
-        fn=lambda: "Compare 3 open-source coding agents with pros/cons.",
-        inputs=[],
-        outputs=[question],
-    )
-    ex3_btn.click(
-        fn=lambda: "RAG vs fine-tuning for legal QA: which and why?",
-        inputs=[],
-        outputs=[question],
-    )
+    for btn, ex in zip(example_buttons, EXAMPLES):
+        btn.click(
+            fn=(lambda text=ex["text"]: text),
+            inputs=[],
+            outputs=[question],
+        )
     stop_btn.click(fn=None, cancels=[run_event])
     clear_btn.click(
         fn=lambda: ("", "", "{}"),