modify ui

app.py

@@ -108,8 +108,16 @@ table{width:100%;border-collapse:collapse;font-size:0.9rem;}
 th,td{border:1px solid #ddd;padding:6px;vertical-align:top;}
 th{background:#f5f5f5;font-weight:600;}
 code{background:#f8f8f8;border:1px solid #eee;border-radius:4px;padding:2px 4px;}
+
+#vote_area{margin-top:1rem;align-items:center;gap:1rem;flex-wrap:wrap;}
+#vote_radio .gr-radio{display:flex;gap:0.75rem;}
+#vote_radio label{padding:4px 12px;border:1px solid #ccc;border-radius:8px;cursor:pointer;user-select:none;transition:all .15s ease;}
+#vote_radio input[type="radio"]:checked + label{background:#0066ff;color:#fff;border-color:#0066ff;}
+#submit_btn button{padding:0.6rem 1.4rem;font-weight:600;font-size:1rem;border-radius:8px;}
+#vote_status textarea{border:none;background:#fafafa;color:#333;font-weight:600;}
 """
 
+
 with gr.Blocks(title="Lean Finder Retrieval", css=CUSTOM_CSS) as demo:
     gr.Markdown("# Lean Finder – Retrieval Demo\n"
                 "Choose **Normal** for standard retrieval or **Arena** to compare and vote.")
@@ -120,14 +128,23 @@ with gr.Blocks(title="Lean Finder Retrieval", css=CUSTOM_CSS) as demo:
     run_btn     = gr.Button("Retrieve")
     results_html= gr.HTML()
 
-    # voting widgets
-    with gr.Row():
-        vote_radio   = gr.Radio(
+    with gr.Row(elem_id="vote_area"):
+        vote_radio = gr.Radio(
             ["Lean Finder better", "LeanSearch better", "Tie", "Both are bad"],
-            label="Which result is better?", visible=False
+            label="Which result is better?",
+            visible=False,
+            elem_id="vote_radio"
         )
-        submit_btn   = gr.Button("Submit vote", visible=False)
-    vote_status = gr.Textbox(label="", interactive=False, max_lines=1, visible=False)
+        submit_btn = gr.Button(
+            "Submit vote",
+            visible=False,
+            elem_id="submit_btn",
+            variant="primary"
+        )
+    vote_status = gr.Textbox(
+        "", interactive=False, visible=False,
+        elem_id="vote_status", max_lines=1
+    )
 
     # internal state: stored per browser session
     st_query = gr.State("")
@@ -138,27 +155,29 @@ with gr.Blocks(title="Lean Finder Retrieval", css=CUSTOM_CSS) as demo:
     def retrieve(query: str, k: int, mode: str):
         query = query.strip()
         if not query:
-            hide = gr.update(visible=False)
+            hide = gr.update(visible=False, value="")
             return "<p>Please enter a query.</p>", query, {}, [], hide, hide, hide
 
         lf_json = _call_endpoint({"inputs": query, "top_k": k}).get("results", [])
         lf_html = _render_leanfinder(lf_json)
 
         if mode == "Normal":
-            hide = gr.update(visible=False)
+            hide = gr.update(visible=False, value="")
             return lf_html, query, lf_json, [], hide, hide, hide
 
         ls_json = _call_leansearch(query, k)
         ls_html = _render_leansearch(ls_json)
-
         page = (
             "<div style='display:flex; gap:0.5rem;'>"
             f"<div style='flex:1 1 0;'>{lf_html}</div>"
             f"<div style='flex:1 1 0;'>{ls_html}</div>"
             "</div>"
         )
-        show = gr.update(visible=True, value=None)
-        return page, query, lf_json, ls_json, show, show, show
+        show_radio  = gr.update(visible=True,  value=None)
+        hide_status = gr.update(visible=False, value="")
+        show_btn    = gr.update(visible=True)
+        return page, query, lf_json, ls_json, show_radio, show_btn, hide_status
+
 
     run_btn.click(
         retrieve,
@@ -166,6 +185,20 @@ with gr.Blocks(title="Lean Finder Retrieval", css=CUSTOM_CSS) as demo:
         outputs=[results_html, st_query, st_lf_js, st_ls_js, vote_radio, submit_btn, vote_status],
     )
 
+    def _reset_ui_on_mode_change(mode):
+        return (
+            "",
+            gr.update(visible=False, value=None),
+            gr.update(visible=False),
+            gr.update(visible=False, value=""),
+        )
+
+    mode_sel.change(
+        _reset_ui_on_mode_change,
+        inputs=mode_sel,
+        outputs=[results_html, vote_radio, submit_btn, vote_status],
+    )
+
     submit_btn.click(
         _save_vote,
         inputs=[vote_radio, st_query, st_lf_js, st_ls_js],