Chat front-and-centre; results below; fix invisible bold text; swap flower example

app.py

@@ -53,6 +53,15 @@ CSS = """
 .note{background:#fbf6e9;border:1px solid #ecdfb8;border-radius:12px;padding:12px 16px;font-family:'Inter';font-size:.92rem;color:#4a4a4a}
 #foot{font-family:'Inter';font-size:.8rem;color:#888;text-align:center;margin-top:16px;line-height:1.7}
 #foot a{color:#0a7a43;text-decoration:none;font-weight:500}
+/* force visible (dark) text in light boxes regardless of light/dark theme */
+.note,.note *{color:#3a3a3a!important}
+.note b,.note strong{color:#01411C!important;font-weight:700}
+.sec h2{color:#01411C!important}
+.sec p,.sec p *{color:#26332b!important}
+.sec p b,.sec p strong{color:#01411C!important}
+.kpi .v{color:#0a7a43!important}.kpi .l{color:#555!important}
+#foot,#foot *{color:#7a7a7a!important}#foot a{color:#0a7a43!important}
+#hero p,#hero p *,#hero h1{color:#fff!important}#hero h1 .a{color:#e9c75a!important}
 """
 
 HERO = """<div id="hero"><div class="in">
@@ -87,15 +96,22 @@ FOOT = """<div id="foot">Model: <a href="https://huggingface.co/abdullah693/gemm
 <i>Research/educational use — not authoritative for exams or religious rulings.</i></div>"""
 
 EXAMPLES = [
-    "پاکستان کا قومی پھول کون سا ہے اور اس کی کیا خصوصیات ہیں؟",
     "اگر ایک ٹرین 60 کلومیٹر فی گھنٹہ کی رفتار سے 2.5 گھنٹے چلے تو کتنا فاصلہ طے کرے گی؟",
+    "ایک دکاندار نے 500 روپے کی چیز پر 20 فیصد رعایت دی۔ گاہک کو اب کتنے روپے ادا کرنے ہوں گے؟",
     "تعلیم کسی معاشرے کی ترقی میں کیا کردار ادا کرتی ہے؟ مختصر وضاحت کریں۔",
     "نظامِ شمسی میں کتنے سیارے ہیں اور سب سے بڑا سیارہ کون سا ہے؟",
 ]
 
 with gr.Blocks(title="Urdu Education & Reasoning", theme=gr.themes.Soft(primary_hue="emerald"), css=CSS) as demo:
     gr.HTML(HERO)
-    gr.HTML('<div class="sec"><h2>The result</h2></div>')
+    # ── chat front and centre ──
+    gr.HTML('<div class="sec"><h2>Try it — اردو میں سوال پوچھیں</h2></div>')
+    with gr.Accordion("⚙️ settings", open=False):
+        mt = gr.Slider(64, 512, value=256, step=32, label="Max new tokens")
+        tp = gr.Slider(0.0, 1.0, value=0.0, step=0.1, label="Temperature")
+    gr.ChatInterface(respond, additional_inputs=[mt, tp], examples=[[e] for e in EXAMPLES], cache_examples=False)
+    # ── results below the chat ──
+    gr.HTML('<div class="sec" style="margin-top:18px"><h2>The result</h2></div>')
     gr.HTML(KPI)
     with gr.Row():
         gr.Image("assets/fig_overall.png", show_label=False, container=False)
@@ -103,11 +119,6 @@ with gr.Blocks(title="Urdu Education & Reasoning", theme=gr.themes.Soft(primary_
     gr.HTML(APPROACH)
     gr.Image("assets/fig_data.png", show_label=False, container=False)
     gr.HTML(FINDING)
-    gr.HTML('<div class="sec"><h2>Try it — اردو میں سوال پوچھیں</h2></div>')
-    with gr.Accordion("⚙️ settings", open=False):
-        mt = gr.Slider(64, 512, value=256, step=32, label="Max new tokens")
-        tp = gr.Slider(0.0, 1.0, value=0.0, step=0.1, label="Temperature")
-    gr.ChatInterface(respond, additional_inputs=[mt, tp], examples=[[e] for e in EXAMPLES], cache_examples=False)
     gr.HTML(FOOT)
 
 if __name__ == "__main__":