Update app.py

app.py

@@ -236,11 +236,16 @@ def selected_payload(selected_repo: str):
         gr.update(value=1.0),
     )
 
+
+def build_gallery_items(filtered: list[dict[str, Any]]) -> list[tuple[str, str]]:
+    return [(cover_for_entry(item), item["repo"]) for item in filtered]
+
+
 def refresh_lora_selector(family: str, search: str):
     filtered = filter_loras(family, search)
-    choices = [(lora_dropdown_label(item), item["repo"]) for item in filtered]
-    selected_repo = filtered[0]["repo"] if filtered else None
+    first_repo = filtered[0]["repo"] if filtered else None
     count_text = f"**{len(filtered)}** LoRAs · {family_to_label(family)}"
+    gallery_items = build_gallery_items(filtered)
 
     (
         preview_update,
@@ -253,10 +258,10 @@ def refresh_lora_selector(family: str, search: str):
         height_update,
         scheduler_update,
         lora_scale_update,
-    ) = selected_payload(selected_repo)
+    ) = selected_payload(first_repo)
 
     return (
-        gr.update(choices=choices, value=selected_repo),
+        gr.update(value=gallery_items),
         count_text,
         preview_update,
         info_update,
@@ -270,6 +275,14 @@ def refresh_lora_selector(family: str, search: str):
         lora_scale_update,
     )
 
+
+def on_gallery_select(evt: gr.SelectData, family: str, search: str):
+    filtered = filter_loras(family, search)
+    if evt.index >= len(filtered):
+        return (gr.update(),) * 10
+    repo = filtered[evt.index]["repo"]
+    return selected_payload(repo)
+
 CURRENT_PIPE: DiffusionPipeline | None = None
 CURRENT_BASE_MODEL = ""
 CURRENT_LOADED_REPO = ""
@@ -703,6 +716,64 @@ textarea:focus, input[type="text"]:focus, .gr-input:focus {
     font-family: 'Syne', sans-serif;
 }
 
+
+.lora-gallery {
+    border-radius: var(--radius) !important;
+    overflow: hidden !important;
+}
+
+.lora-gallery .grid-wrap {
+    background: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius) !important;
+    padding: 8px !important;
+    gap: 8px !important;
+}
+
+.lora-gallery .thumbnail-item {
+    border-radius: 10px !important;
+    overflow: hidden !important;
+    border: 2px solid transparent !important;
+    cursor: pointer !important;
+    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s !important;
+    position: relative;
+}
+
+.lora-gallery .thumbnail-item:hover {
+    border-color: var(--accent) !important;
+    transform: scale(1.03) !important;
+    box-shadow: 0 4px 20px rgba(124,111,255,0.4) !important;
+    z-index: 2;
+}
+
+.lora-gallery .thumbnail-item.selected {
+    border-color: var(--accent2) !important;
+    box-shadow: 0 0 0 3px rgba(255,111,216,0.3) !important;
+}
+
+.lora-gallery .thumbnail-item img {
+    object-fit: cover !important;
+    width: 100% !important;
+    height: 100% !important;
+    display: block !important;
+}
+
+.lora-gallery .caption-label {
+    position: absolute !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    background: linear-gradient(transparent, rgba(0,0,0,0.85)) !important;
+    color: #fff !important;
+    font-size: 0.72rem !important;
+    font-family: 'DM Sans', sans-serif !important;
+    padding: 18px 8px 6px !important;
+    text-align: center !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
 /* ── Scrollbar ── */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: var(--surface); }
@@ -767,12 +838,16 @@ with gr.Blocks() as app:
                 elem_classes=["count-badge"],
             )
             gr.HTML('<div style="height:6px"></div>')
-            lora_selector = gr.Dropdown(
+            lora_gallery = gr.Gallery(
                 label="",
-                choices=[(lora_dropdown_label(item), item["repo"]) for item in INITIAL_FILTERED],
-                value=INITIAL_SELECTED,
-                interactive=True,
+                value=build_gallery_items(INITIAL_FILTERED),
+                columns=2,
+                rows=4,
+                height=420,
+                object_fit="cover",
+                allow_preview=False,
                 container=False,
+                elem_classes=["lora-gallery"],
             )
 
             gr.HTML('<div style="height:20px"></div>')
@@ -845,7 +920,7 @@ with gr.Blocks() as app:
         )
 
     _selector_outputs = [
-        lora_selector,
+        lora_gallery,
         catalog_stats,
         lora_preview,
         selected_info,
@@ -872,10 +947,12 @@ with gr.Blocks() as app:
         lora_scale,
     ]
 
+    _initial_payload = selected_payload(INITIAL_SELECTED)
+
     family_filter.change(fn=refresh_lora_selector, inputs=[family_filter, search_box], outputs=_selector_outputs)
     search_box.change(fn=refresh_lora_selector, inputs=[family_filter, search_box], outputs=_selector_outputs)
-    lora_selector.change(fn=selected_payload, inputs=[lora_selector], outputs=_payload_outputs)
-    app.load(fn=selected_payload, inputs=[lora_selector], outputs=_payload_outputs)
+    lora_gallery.select(fn=on_gallery_select, inputs=[family_filter, search_box], outputs=_payload_outputs)
+    app.load(fn=lambda: _initial_payload, outputs=_payload_outputs)
 
     generate_button.click(
         fn=run_lora,
@@ -883,5 +960,6 @@ with gr.Blocks() as app:
         outputs=[result],
     )
 
+
 app.queue(max_size=20)
 app.launch(theme=gr.themes.Base(), css=CSS)