Update styles, padding, borders, etc.

app.py

@@ -114,7 +114,7 @@ def search(
         rank_str = str(i + 1)
         binary_rank_str = str(indices[i] + 1)
         card_html = f"""
-<div style=\"border: 1px solid var(--border-color-primary, #e0e0e0); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background-color: var(--block-background-fill, transparent); color: inherit;\">
+<div style=\"border: 1px solid var(--border-color-primary, #e0e0e0); border-radius: var(--block-radius); padding: 10px 12px; margin-bottom: 10px; background-color: var(--block-background-fill, transparent); color: inherit;\">
     <div style=\"display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px;\">
         <div style=\"font-size: 16px; font-weight: 600; min-width: 0;\">
             <a href=\"{url}\" target=\"_blank\" style=\"text-decoration: none; color: var(--link-text-color, #1f6feb); padding-left: 0;\">{title}</a>
@@ -145,7 +145,7 @@ def search(
     search_mode = "Approximate (IVF)" if use_approx else "Exact"
 
     summary_md = f"""
-<div style=\"border: 1px solid var(--border-color-primary, #e0e0e0); border-radius: 10px; padding: 10px 12px; background-color: var(--block-background-fill, transparent);\">
+<div style=\"border: 1px solid var(--border-color-primary, #e0e0e0); border-radius: var(--block-radius); padding: 10px 12px; background-color: var(--block-background-fill, transparent);\">
     <h3 style=\"margin-top: 0;\">Search Summary</h3>
     <ul style=\"margin-top: 0; margin-bottom: 8px; padding-left: 18px;\">
         <li>Total docs in corpus: {TOTAL_NUM_DOCS:,}</li>
@@ -163,18 +163,24 @@ def search(
         <li>Sort: {sort_time:.4f}</li>
         <li>Load text: {load_text_time:.4f}</li>
     </ul>
-    <strong>Total retrieval time: {total_retrieval_time:.4f} seconds</strong>
+    <h5>Total retrieval time: {total_retrieval_time:.4f} seconds</h5>
 </div>"""
 
     return cards_html, summary_md
 
 
+css = """
+#cards-container {
+    --block-padding: 0px;
+}
+"""
+
 with gr.Blocks(title="Quantized Retrieval") as demo:
     with gr.Row():
         with gr.Column(scale=3):
             gr.Markdown(
                 """
-<div style='border: 1px solid var(--border-color-primary, #e0e0e0); border-radius: 10px; padding: 12px 14px; background-color: var(--block-background-fill, transparent);'>
+<div style='border: 1px solid var(--border-color-primary, #e0e0e0); border-radius: var(--block-radius); padding: 12px 14px; background-color: var(--block-background-fill, transparent);'>
 
 <h1 style='margin-top: 0;'>Quantized Retrieval - Binary Search with Scalar (int8) Rescoring</h1>
 
@@ -212,7 +218,7 @@ Notes:
                 placeholder="Enter a query to search for relevant texts from Wikipedia.",
             )
             search_button = gr.Button(value="Search", variant="secondary")
-        with gr.Column(scale=1, min_width=0):
+        with gr.Column(scale=1):
             top_k = gr.Slider(
                 minimum=10,
                 maximum=1000,
@@ -237,7 +243,7 @@ Notes:
 
     with gr.Row():
         with gr.Column(scale=3):
-            cards = gr.HTML(label="Results")
+            cards = gr.HTML(label="Results", elem_id="cards-container")
         with gr.Column(scale=1):
             summary = gr.Markdown(label="Search Summary")
 
@@ -267,4 +273,4 @@ Notes:
     )
 
 demo.queue()
-demo.launch()
+demo.launch(theme=gr.themes.Base(), css=css)