Compactify UI and increase image sizes.

app.py

@@ -243,30 +243,23 @@ def _select_groups(cfg: dict, rating_pref: str) -> list[str]:
         if g.endswith(f"_{rating_pref}")
     ]
 
-def _format_rating_post_row(post_id: int, wins: int, losses: int, label: str | None = None) -> str:
-    total_votes = wins + losses
-    url = f"https://e621.net/posts/{post_id}"
-    row = f"{url} | Times rated: {total_votes}"
-    return f"{label}: {row}" if label else row
+def _format_rating_post_title(post_id: int, votes: int, label: str) -> str:
+    return f"<strong>{label}</strong>: <a href=\"https://e621.net/posts/{post_id}\" target=\"_blank\" rel=\"noreferrer\">Post #{post_id}</a> | {votes} {'Vote' if votes == 1 else 'Votes'}"
 
 def _render_current(state: dict, submit_status: str = "") -> tuple:
     _reload_stats_if_due()
-    wins_a, losses_a = _pool_df.iloc[_md5_to_idx[state["key_a"]], [WINS_LOC, LOSSES_LOC]]
-    wins_b, losses_b = _pool_df.iloc[_md5_to_idx[state["key_b"]], [WINS_LOC, LOSSES_LOC]]
-    title_a = "Image A"
-    title_b = "Image B"
-    img_a_html = f"<div class=\"rating-card\"><div class=\"rating-card-title\"><strong>{html.escape(title_a)}</strong></div><div class=\"rating-image-frame\"><img src=\"{html.escape(state['url_a'])}\" class=\"rating-image\" loading=\"eager\" referrerpolicy=\"no-referrer\"></div></div>"
-    img_b_html = f"<div class=\"rating-card\"><div class=\"rating-card-title\"><strong>{html.escape(title_b)}</strong></div><div class=\"rating-image-frame\"><img src=\"{html.escape(state['url_b'])}\" class=\"rating-image\" loading=\"eager\" referrerpolicy=\"no-referrer\"></div></div>"
-    link_a = _format_rating_post_row(state["id_a"], wins_a, losses_a, label="Image A")
-    link_b = _format_rating_post_row(state["id_b"], wins_b, losses_b, label="Image B")
-    can_go_back = bool(state.get("can_go_back"))
-    back_md = "[Undo Rating (Ctrl+z)](#back)" if can_go_back else "<span class='subtle-back-link-disabled'>Undo Rating (Ctrl+z)</span>"
-    group_md = f"<span class='subtle-note'>Group: {state['group']}</span>"
-    pair_reason = state.get("pair_reason", "")
-    pair_reason_md = f"<span class='subtle-note'>Pair: {html.escape(pair_reason)}</span>" if pair_reason else ""
-    status_md = f"<span class='submit-status-msg'>{html.escape(submit_status)}</span>" if submit_status else ""
-    return img_a_html, img_b_html, link_a, link_b, back_md, group_md, pair_reason_md, status_md, state
 
+    votes_a = _pool_df.iloc[_md5_to_idx[state["key_a"]], VOTES_LOC]
+    votes_b = _pool_df.iloc[_md5_to_idx[state["key_b"]], VOTES_LOC]
+    title_a = _format_rating_post_title(state["id_a"], votes_a, "Image A")
+    title_b = _format_rating_post_title(state["id_b"], votes_b, "Image B")
+    img_a_html = f"<div class=\"rating-card\"><div class=\"rating-card-title\">{title_a}</div><div class=\"rating-image-frame\"><img src=\"{html.escape(state['url_a'])}\" class=\"rating-image\" loading=\"eager\" referrerpolicy=\"no-referrer\"></div></div>"
+    img_b_html = f"<div class=\"rating-card\"><div class=\"rating-card-title\">{title_b}</div><div class=\"rating-image-frame\"><img src=\"{html.escape(state['url_b'])}\" class=\"rating-image\" loading=\"eager\" referrerpolicy=\"no-referrer\"></div></div>"
+
+    can_go_back = bool(state.get("pending", ()))
+    pair_details = f"/ {state['group']} / {state.get('pair_reason', 'unknown')}"
+
+    return img_a_html, img_b_html, gr.Button(interactive=can_go_back), html.escape(pair_details), html.escape(submit_status), state
 
 def _normalize_rating_pref(pref: str | None) -> str:
     return pref if pref in ("safe", "all") else "safe"
@@ -443,7 +436,7 @@ def go_back(state: dict) -> tuple:
 # -- UI ---------------------------------------------------------------------
 
 with gr.Blocks(
-    title="Image Rater",
+    title="e621 Visual Ratings",
     head="""
     <script>
     const VOTE_COOLDOWN_MS = 1500;
@@ -588,7 +581,7 @@ with gr.Blocks(
     }
     .rating-image-frame {
         width: 100%;
-        height: 512px;
+        height: 720px;
         border: 1px solid #e6e6e6;
         border-radius: 8px;
         background: #333;
@@ -650,6 +643,9 @@ with gr.Blocks(
         object-fit: contain !important;
         background: #1f2937;
     }
+    a {
+        padding: 0 !important;
+    }
     """,
 ) as demo:
     state = gr.State({})
@@ -666,13 +662,16 @@ with gr.Blocks(
                 img_a = gr.HTML(elem_id="img-a")
                 img_b = gr.HTML(elem_id="img-b")
 
-            with gr.Row():
+            with gr.Row(equal_height=True):
                 btn_a = gr.Button("👍 Prefer A", variant="primary", elem_id="btn-vote-a")
-                btn_skip = gr.Button("Same quality", elem_id="btn-skip")
+
+                with gr.Column(scale=0), gr.Group():
+                    btn_skip = gr.Button("🤏 Same Quality", elem_id="btn-skip")
+                    btn_back_action = gr.Button("↶ Undo", elem_id="btn-back-action")
+
                 btn_b = gr.Button("👍 Prefer B", variant="primary", elem_id="btn-vote-b")
 
             with gr.Accordion("Settings", open=False):
-                gr.Markdown("<span style='color:#888;font-size:0.9em;'>Advanced options</span>")
                 rating_dd = gr.Dropdown(
                     choices=["safe", "all"],
                     value="safe",
@@ -682,19 +681,13 @@ with gr.Blocks(
                 submit_key_tb = gr.Textbox(
                     value="",
                     type="password",
-                    label="Submit key",
+                    label="Submit Key",
                     elem_id="submit-key",
                 )
 
-            link_a = gr.Markdown(label="Image A link")
-            link_b = gr.Markdown(label="Image B link")
-            back_link = gr.Markdown(elem_classes=["subtle-back-link-wrap"])
-            btn_back_action = gr.Button("Undo Rating (Ctrl+z)", elem_id="btn-back-action", elem_classes=["hidden-action-btn"])
-            details_md = gr.Markdown()
-            pair_reason_md = gr.Markdown()
-            submit_status_md = gr.Markdown(elem_id="submit-status")
-            gr.Markdown("<span class='subtle-note'>Dataset: <a href='https://huggingface.co/datasets/taigasan/e6-visual-ratings' target='_blank' rel='noopener noreferrer'>taigasan/e6-visual-ratings</a></span>")
-            gr.Markdown("<span class='subtle-note'>Keyboard Shortcuts: ⬅️ vote A, ⬆️ same quality, ➡️ vote B, Ctrl+z undo rating</span>")
+            pair_details = gr.HTML(html_template="Dataset: <a href='https://huggingface.co/datasets/taigasan/e6-visual-ratings' target='_blank' rel='noopener noreferrer'>taigasan/e6-visual-ratings</a> ${value}")
+            submit_status = gr.HTML(html_template="<span class='submit-status-msg'>${value}</span>")
+            gr.HTML("<span class='subtle-note'>Keyboard Shortcuts: ⬅️ Vote A, ⬆️ Same Quality, ➡️ Vote B, Ctrl+Z Undo</span>")
 
         (
             results_summary_md,
@@ -709,7 +702,7 @@ with gr.Blocks(
             results_page_offset_state,
         ) = add_results_tab(_pool_df)
 
-    outputs = [img_a, img_b, link_a, link_b, back_link, details_md, pair_reason_md, submit_status_md, state]
+    outputs = [img_a, img_b, btn_back_action, pair_details, submit_status, state]
     results_outputs = [
         results_summary_md,
         results_score_distribution_plot,