Larger images!

app.py

@@ -280,20 +280,20 @@ def _normalize_rating_pref(pref: str | None) -> str:
     return pref if pref in ("safe", "all") else "safe"
 
 
-def _initial_load(state: dict, pref: str | None, submit_key: str | None):
+def _initial_load(state: dict, pref: str | None, submit_key: str | None, image_height: str):
     rating_pref = _normalize_rating_pref(pref)
     submit_key = _normalize_submit_key(submit_key)
-    return rating_pref, submit_key, *new_round(DEFAULT_DATASET, rating_pref, state)
-
+    return rating_pref, submit_key, image_height, image_height, *new_round(DEFAULT_DATASET, rating_pref, state)
 
 def _on_rating_change(rating_pref: str, state: dict):
     rating_pref = _normalize_rating_pref(rating_pref)
     return *new_round(DEFAULT_DATASET, rating_pref, state), rating_pref
 
+def _on_image_height_change(image_height: str) -> tuple[str, str]:
+    return image_height, image_height
 
 def _normalize_submit_key(submit_key: str | None) -> str:
-    return submit_key or ""
-
+    return (submit_key or "").strip()
 
 def _filtered_explorer_df(rating_pref: str) -> pd.DataFrame:
     return _filtered_explorer_df_by_classifier(rating_pref, ALLOWED_CLASSIFIER_FILTERS[0])
@@ -601,7 +601,6 @@ with gr.Blocks(
     }
     .rating-image-frame {
         width: 100%;
-        height: 720px;
         border: 1px solid #e6e6e6;
         border-radius: 8px;
         background: #333;
@@ -667,12 +666,14 @@ with gr.Blocks(
         padding: 0 !important;
     }
     """,
+    fill_width=True,
 ) as demo:
     state = gr.State({})
     rating_pref_store = gr.BrowserState(default_value="safe", storage_key="rating_pref")
     submit_key_store = gr.BrowserState(default_value="", storage_key="submit_key")
     results_sort_store = gr.BrowserState(default_value="Default", storage_key="results_sort_mode")
     results_classifier_store = gr.BrowserState(default_value=ALLOWED_CLASSIFIER_FILTERS[0], storage_key="results_classifier")
+    image_height_store = gr.BrowserState(default_value=768, storage_key="image_height")
 
     with gr.Tabs():
         with gr.Tab("Image Quality Rater"):
@@ -692,6 +693,10 @@ with gr.Blocks(
                 btn_b = gr.Button("➡️ Prefer B", variant="primary", elem_id="btn-vote-b")
 
             with gr.Accordion("Settings", open=False):
+                image_height_slider = gr.Slider(
+                    minimum=512, maximum=2048, step=16, precision=0,
+                    label="Image Size",
+                )
                 rating_dd = gr.Dropdown(
                     choices=["safe", "all"],
                     value="safe",
@@ -708,6 +713,7 @@ with gr.Blocks(
             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, ⬇️ or Ctrl+Z Undo</span>")
+            image_height = gr.HTML(html_template="<style>.rating-image-frame { height:${value}px; }</style>", apply_default_css=False)
 
         (
             results_summary_md,
@@ -746,7 +752,8 @@ with gr.Blocks(
     results_sort_dd.change(fn=_load_results, inputs=[rating_pref_store, results_sort_dd, results_classifier_store], outputs=results_outputs, queue=False, show_progress="hidden")
     results_classifier_dd.change(fn=_normalize_classifier_filter, inputs=[results_classifier_dd], outputs=[results_classifier_store], queue=False, show_progress="hidden")
     results_classifier_dd.change(fn=_load_results, inputs=[rating_pref_store, results_sort_store, results_classifier_dd], outputs=results_outputs, queue=False, show_progress="hidden")
-    demo.load(fn=_initial_load, inputs=[state, rating_pref_store, submit_key_store], outputs=[rating_dd, submit_key_tb, *outputs], queue=False, show_progress="hidden")
+    image_height_slider.change(fn=_on_image_height_change, inputs=[image_height_slider], outputs=[image_height_store, image_height], queue=False, show_progress="hidden")
+    demo.load(fn=_initial_load, inputs=[state, rating_pref_store, submit_key_store, image_height_store], outputs=[rating_dd, submit_key_tb, image_height_slider, image_height, *outputs], queue=False, show_progress="hidden")
     demo.load(fn=_load_results, inputs=[rating_pref_store, results_sort_store, results_classifier_store], outputs=results_outputs, queue=False, show_progress="hidden")
     demo.load(fn=_normalize_sort_mode, inputs=[results_sort_store], outputs=[results_sort_dd], queue=False, show_progress="hidden")
     demo.load(fn=_normalize_classifier_filter, inputs=[results_classifier_store], outputs=[results_classifier_dd], queue=False, show_progress="hidden")