Polish icons, examples, and blue control styling

app.py

@@ -145,7 +145,10 @@ CUSTOM_CSS = """
 .icon-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
+  gap: 10px;
+  width: 100%;
+  max-width: 360px;
+  margin: 0 auto;
 }
 
 .icon-link {
@@ -153,14 +156,14 @@ CUSTOM_CSS = """
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 10px 12px;
+  padding: 12px 14px;
   border: none;
-  border-radius: 10px;
+  border-radius: 12px;
   text-decoration: none !important;
   color: #1d4ed8 !important;
   background: #eaf2ff;
   font-weight: 600;
-  font-size: 15px;
+  font-size: 17px;
 }
 
 .icon-link:hover {
@@ -171,19 +174,20 @@ CUSTOM_CSS = """
   background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
   color: white !important;
   border: none !important;
+  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25) !important;
 }
 
 .gradio-container .gr-button-secondary {
   background: #ffffff !important;
   color: #1d4ed8 !important;
-  border: none !important;
+  border: 1px solid #bfdbfe !important;
   box-shadow: inset 0 0 0 1px #bfdbfe !important;
 }
 
 .gradio-container .gr-button-stop {
   background: #ffffff !important;
   color: #1d4ed8 !important;
-  border: none !important;
+  border: 1px solid #bfdbfe !important;
   box-shadow: inset 0 0 0 1px #bfdbfe !important;
 }
 
@@ -229,6 +233,38 @@ CUSTOM_CSS = """
   margin: 8px 0 2px 0;
 }
 
+.example-buttons {
+  display: grid;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.example-note {
+  color: #3b82f6;
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.no-frame {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.slider-root .noUi-target,
+.slider-root [role="slider"] {
+  --track-color: #dbeafe;
+  --range-color: #2563eb;
+}
+
+.slider-root .noUi-target {
+  background: #dbeafe !important;
+}
+
+.slider-root .noUi-connect {
+  background: #2563eb !important;
+}
+
 .gradio-container .noUi-target {
   border: none !important;
   box-shadow: none !important;
@@ -585,15 +621,11 @@ with gr.Blocks(
 
             with gr.Group(elem_classes="section-card"):
                 gr.HTML('<div class="inline-example-title">Try Examples</div>')
-                gr.Examples(
-                    examples=[
-                        ["Plan a 2-day food + museum itinerary in Tokyo under $250, with trade-offs."],
-                        ["Find 3 open-source coding agents and compare real strengths/limitations."],
-                        ["Explain whether RAG or fine-tuning is better for a legal QA assistant, and why."],
-                    ],
-                    inputs=question,
-                    label="",
-                )
+                gr.HTML('<div class="example-note">Click to auto-fill the chat box</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")
 
             with gr.Group(elem_classes="section-card"):
                 with gr.Tabs():
@@ -603,7 +635,7 @@ with gr.Blocks(
                         trace = gr.Code(label="Execution Trace (JSON)", language="json")
 
         with gr.Column(scale=3, elem_classes="right-stack"):
-            with gr.Group(elem_classes="section-card"):
+            with gr.Group(elem_classes=["section-card", "no-frame"]):
                 gr.Image(
                     value=LOGO_PATH,
                     show_label=False,
@@ -614,7 +646,7 @@ with gr.Blocks(
                     elem_classes="banner-logo-image",
                 )
 
-            with gr.Group(elem_classes="section-card"):
+            with gr.Group(elem_classes=["section-card", "no-frame"]):
                 gr.HTML(
                     f"""
 <div class="icon-grid">
@@ -635,12 +667,13 @@ with gr.Blocks(
                     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_turns = gr.Slider(label="Max Turns", minimum=2, maximum=20, value=8, step=1, elem_classes="slider-root")
                 max_search_results = gr.Slider(
                     label="Search Results Per Query", minimum=1, maximum=10, value=5, step=1
+                    , elem_classes="slider-root"
                 )
                 temperature = gr.Slider(
-                    label="Temperature", minimum=0.0, maximum=1.5, value=0.4, step=0.1
+                    label="Temperature", minimum=0.0, maximum=1.5, value=0.4, step=0.1, elem_classes="slider-root"
                 )
 
     run_event = run_btn.click(
@@ -648,6 +681,21 @@ with gr.Blocks(
         inputs=[question, model, max_turns, max_search_results, temperature],
         outputs=[answer, trace],
     )
+    ex1_btn.click(
+        fn=lambda: "Plan a 2-day food + museum itinerary in Tokyo under $250, with trade-offs.",
+        inputs=[],
+        outputs=[question],
+    )
+    ex2_btn.click(
+        fn=lambda: "Find 3 open-source coding agents and compare real strengths/limitations.",
+        inputs=[],
+        outputs=[question],
+    )
+    ex3_btn.click(
+        fn=lambda: "Explain whether RAG or fine-tuning is better for a legal QA assistant, and why.",
+        inputs=[],
+        outputs=[question],
+    )
     stop_btn.click(fn=None, cancels=[run_event])
     clear_btn.click(
         fn=lambda: ("", "", "{}"),