Simplify model-to-LoRA UX and unpin HF dependencies

app.py

@@ -33,13 +33,13 @@ DEFAULT_NEGATIVE = (
 )
 
 FAMILY_LABELS = {
-    "all": "All",
     "sdxl": "SDXL",
     "sd15": "SD 1.5",
     "flux": "FLUX",
     "qwen-image": "Qwen-Image",
     "z-image": "Z-Image",
     "other": "Other",
+    "all": "All",
 }
 
 FAMILY_BASE_MODELS = {
@@ -194,13 +194,10 @@ def filter_loras(family: str, search: str) -> list[dict[str, Any]]:
         if term and term not in haystack:
             continue
         filtered.append(row)
+    filtered.sort(key=lambda item: item.get("title", "").lower())
     return filtered
 
 
-def build_gallery_data(filtered: list[dict[str, Any]]) -> list[tuple[str, str]]:
-    return [(cover_for_entry(item), gallery_caption(item)) for item in filtered]
-
-
 def family_defaults(family: str) -> dict[str, Any]:
     return FAMILY_DEFAULTS.get(family, FAMILY_DEFAULTS["other"])
 
@@ -209,37 +206,28 @@ def scheduler_interactive_for_family(family: str) -> bool:
     return family in {"sdxl", "sd15"}
 
 
-def refresh_gallery(family: str, search: str):
-    filtered = filter_loras(family, search)
-    gallery_items = build_gallery_data(filtered)
-    repos = [item["repo"] for item in filtered]
-    count_text = f"### {len(filtered)} LoRAs found"
-
-    return (
-        gr.update(value=gallery_items),
-        repos,
-        gr.update(value=""),
-        gr.update(value=""),
-        count_text,
-        None,
-    )
+def lora_dropdown_label(entry: dict[str, Any]) -> str:
+    short_repo = entry.get("repo", "").split("/", 1)[-1]
+    trigger = (entry.get("trigger_word") or "").strip()
+    if trigger:
+        return f"{entry['title']} · {short_repo} · trigger: {trigger}"
+    return f"{entry['title']} · {short_repo}"
 
 
-def update_selection(evt: gr.SelectData, filtered_repos: list[str]):
-    if evt.index is None or evt.index >= len(filtered_repos):
+def selected_payload(selected_repo: str):
+    if not selected_repo:
         return (
-            gr.update(),
+            gr.update(value=None),
             gr.update(value=""),
-            None,
-            gr.update(),
-            gr.update(),
+            gr.update(placeholder="Select a LoRA first"),
             gr.update(),
             gr.update(),
             gr.update(),
             gr.update(),
+            gr.update(value="Auto", interactive=False),
+            gr.update(value=1.0),
         )
 
-    selected_repo = filtered_repos[evt.index]
     selected = LORA_BY_REPO[selected_repo]
     family = selected.get("family", "other")
     defaults = family_defaults(family)
@@ -261,8 +249,9 @@ def update_selection(evt: gr.SelectData, filtered_repos: list[str]):
     scheduler_value = "DPM++ 2M SDE Karras" if scheduler_enabled else "Auto"
 
     return (
-        gr.update(placeholder=placeholder),
+        gr.update(value=cover_for_entry(selected)),
         info,
+        gr.update(placeholder=placeholder),
         selected_repo,
         gr.update(value=defaults["steps"]),
         gr.update(value=defaults["cfg"]),
@@ -273,6 +262,41 @@ def update_selection(evt: gr.SelectData, filtered_repos: list[str]):
     )
 
 
+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
+    count_text = f"### {len(filtered)} LoRAs found in {family_to_label(family)}"
+
+    (
+        preview_update,
+        info_update,
+        prompt_update,
+        selected_repo_value,
+        steps_update,
+        cfg_update,
+        width_update,
+        height_update,
+        scheduler_update,
+        lora_scale_update,
+    ) = selected_payload(selected_repo)
+
+    return (
+        gr.update(choices=choices, value=selected_repo),
+        count_text,
+        preview_update,
+        info_update,
+        prompt_update,
+        selected_repo_value,
+        steps_update,
+        cfg_update,
+        width_update,
+        height_update,
+        scheduler_update,
+        lora_scale_update,
+    )
+
+
 CURRENT_PIPE: DiffusionPipeline | None = None
 CURRENT_BASE_MODEL = ""
 CURRENT_LOADED_REPO = ""
@@ -422,87 +446,137 @@ def run_lora(
     return result.images[0]
 
 
-INITIAL_FAMILY = "all"
+INITIAL_FAMILY = "sdxl"
 INITIAL_FILTERED = filter_loras(INITIAL_FAMILY, "")
+INITIAL_SELECTED = INITIAL_FILTERED[0]["repo"] if INITIAL_FILTERED else None
 
 with gr.Blocks(theme=gr.themes.Soft(), css_paths="custom.css") as app:
     gr.Markdown("# artificialguybr Multi-LoRA Playground")
     gr.Markdown(
-        "Generate images with LoRAs across SD 1.5, SDXL, FLUX, Qwen-Image and Z-Image. "
-        "Pick a LoRA from the gallery, write a prompt and generate."
+        "Fluxo recomendado: **1) escolha a família de modelo** → **2) escolha a LoRA** → "
+        "**3) escreva o prompt** → **4) gere**."
     )
 
-    selected_repo = gr.State(None)
-    filtered_repos = gr.State([item["repo"] for item in INITIAL_FILTERED])
+    selected_repo = gr.State(INITIAL_SELECTED)
 
     with gr.Row():
-        with gr.Column(scale=2):
-            result = gr.Image(label="Generated Image", height=768)
-            generate_button = gr.Button("Generate", variant="primary")
-
         with gr.Column(scale=1):
             family_filter = gr.Dropdown(
-                label="Model Family",
-                choices=[(label, key) for key, label in FAMILY_LABELS.items()],
+                label="1) Família do Modelo",
+                choices=[(label, key) for key, label in FAMILY_LABELS.items() if key != "all"],
                 value=INITIAL_FAMILY,
             )
-            search_box = gr.Textbox(label="Search LoRA", placeholder="Type a repo or style name")
-            gallery = gr.Gallery(
-                value=build_gallery_data(INITIAL_FILTERED),
-                label="LoRA Gallery",
-                allow_preview=False,
-                columns=2,
-                rows=8,
-                height=700,
+            search_box = gr.Textbox(
+                label="Filtro de LoRA",
+                placeholder="Ex: pixel, logo, anime, analog..."
             )
-            catalog_stats = gr.Markdown(f"### {len(INITIAL_FILTERED)} LoRAs found")
-
-    with gr.Row():
-        with gr.Column():
+            lora_selector = gr.Dropdown(
+                label="2) Escolha a LoRA",
+                choices=[(lora_dropdown_label(item), item["repo"]) for item in INITIAL_FILTERED],
+                value=INITIAL_SELECTED,
+                interactive=True,
+            )
+            catalog_stats = gr.Markdown(f"### {len(INITIAL_FILTERED)} LoRAs found in SDXL")
             selected_info = gr.Markdown("")
+            lora_preview = gr.Image(label="Preview da LoRA", height=320)
+
+        with gr.Column(scale=2):
             prompt = gr.Textbox(
-                label="Prompt", lines=3, placeholder="Select a LoRA in the gallery first"
+                label="3) Prompt",
+                lines=3,
+                placeholder="Select a LoRA first",
             )
             negative_prompt = gr.Textbox(
                 label="Negative Prompt",
                 lines=2,
                 value=DEFAULT_NEGATIVE,
             )
-
-        with gr.Column():
-            with gr.Row():
-                cfg_scale = gr.Slider(label="CFG Scale", minimum=1, maximum=20, step=0.5, value=7.0)
-                steps = gr.Slider(label="Steps", minimum=1, maximum=100, step=1, value=30)
-            with gr.Row():
-                width = gr.Slider(label="Width", minimum=256, maximum=1536, step=8, value=1024)
-                height = gr.Slider(label="Height", minimum=256, maximum=1536, step=8, value=1024)
-            with gr.Row():
-                seed = gr.Slider(label="Seed", minimum=0, maximum=2**32 - 1, step=1, value=0, randomize=True)
-                lora_scale = gr.Slider(label="LoRA Scale", minimum=0, maximum=1.5, step=0.01, value=1.0)
-            scheduler = gr.Dropdown(
-                label="Scheduler (SD only)",
-                choices=SCHEDULER_CHOICES,
-                value="Auto",
-                interactive=False,
+            generate_button = gr.Button("4) Generate", variant="primary")
+            result = gr.Image(label="Generated Image", height=820)
+
+    with gr.Accordion("Advanced settings", open=False):
+        with gr.Row():
+            cfg_scale = gr.Slider(label="CFG Scale", minimum=1, maximum=20, step=0.5, value=7.0)
+            steps = gr.Slider(label="Steps", minimum=1, maximum=100, step=1, value=30)
+        with gr.Row():
+            width = gr.Slider(label="Width", minimum=256, maximum=1536, step=8, value=1024)
+            height = gr.Slider(label="Height", minimum=256, maximum=1536, step=8, value=1024)
+        with gr.Row():
+            seed = gr.Slider(
+                label="Seed",
+                minimum=0,
+                maximum=2**32 - 1,
+                step=1,
+                value=0,
+                randomize=True,
             )
+            lora_scale = gr.Slider(label="LoRA Scale", minimum=0, maximum=1.5, step=0.01, value=1.0)
+        scheduler = gr.Dropdown(
+            label="Scheduler (SD only)",
+            choices=SCHEDULER_CHOICES,
+            value="Auto",
+            interactive=False,
+        )
 
     family_filter.change(
-        fn=refresh_gallery,
+        fn=refresh_lora_selector,
         inputs=[family_filter, search_box],
-        outputs=[gallery, filtered_repos, prompt, selected_info, catalog_stats, selected_repo],
+        outputs=[
+            lora_selector,
+            catalog_stats,
+            lora_preview,
+            selected_info,
+            prompt,
+            selected_repo,
+            steps,
+            cfg_scale,
+            width,
+            height,
+            scheduler,
+            lora_scale,
+        ],
     )
     search_box.change(
-        fn=refresh_gallery,
+        fn=refresh_lora_selector,
         inputs=[family_filter, search_box],
-        outputs=[gallery, filtered_repos, prompt, selected_info, catalog_stats, selected_repo],
+        outputs=[
+            lora_selector,
+            catalog_stats,
+            lora_preview,
+            selected_info,
+            prompt,
+            selected_repo,
+            steps,
+            cfg_scale,
+            width,
+            height,
+            scheduler,
+            lora_scale,
+        ],
     )
-
-    gallery.select(
-        fn=update_selection,
-        inputs=[filtered_repos],
+    lora_selector.change(
+        fn=selected_payload,
+        inputs=[lora_selector],
         outputs=[
+            lora_preview,
+            selected_info,
             prompt,
+            selected_repo,
+            steps,
+            cfg_scale,
+            width,
+            height,
+            scheduler,
+            lora_scale,
+        ],
+    )
+    app.load(
+        fn=selected_payload,
+        inputs=[lora_selector],
+        outputs=[
+            lora_preview,
             selected_info,
+            prompt,
             selected_repo,
             steps,
             cfg_scale,

custom.css

@@ -1,112 +1,49 @@
-/* Global styles */
-body {
-    font-family: 'Arial', sans-serif;
-    line-height: 1.6;
-    color: #333;
-    background-color: #f5f5f5;
+:root {
+  --bg: #f3f6fb;
+  --panel: #ffffff;
+  --text: #0f172a;
+  --muted: #475569;
+  --border: #dbe3ef;
+  --accent: #0ea5e9;
 }
 
-/* Title styles */
-#title {
-    text-align: center;
-    padding: 20px 0;
-    background-color: #3498db;
-    color: white;
-    margin-bottom: 20px;
+body,
+.gradio-container {
+  background: radial-gradient(circle at 10% 10%, #e7f2ff 0%, #f3f6fb 45%, #eef2ff 100%);
+  color: var(--text);
 }
 
-#title h1 {
-    font-size: 2.5em;
-    margin: 0;
+.gradio-container {
+  max-width: 1320px !important;
 }
 
-/* Input styles */
-#prompt input, #negative_prompt textarea {
-    width: 100%;
-    border-radius: 4px;
-    border: 1px solid #ddd;
-    padding: 10px;
-    font-size: 1em;
-    transition: border-color 0.3s ease;
+.block,
+.gr-box,
+.gr-form,
+.gr-panel {
+  border-radius: 14px !important;
+  border: 1px solid var(--border) !important;
+  background: var(--panel) !important;
 }
 
-#prompt input:focus, #negative_prompt textarea:focus {
-    border-color: #3498db;
-    outline: none;
+textarea,
+input,
+select {
+  border-radius: 10px !important;
 }
 
-/* Button styles */
-#generate_button {
-    width: 100%;
-    margin-top: 1em;
-    border-radius: 4px;
-    background-color: #2ecc71;
-    color: white;
-    font-size: 1.1em;
-    padding: 10px;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
+button.primary,
+.gr-button-primary {
+  background: linear-gradient(90deg, #0284c7, #0ea5e9) !important;
+  border: none !important;
 }
 
-#generate_button:hover {
-    background-color: #27ae60;
+button.primary:hover,
+.gr-button-primary:hover {
+  filter: brightness(1.05);
 }
 
-/* Gallery styles */
-#gallery {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    max-width: 100%;
-    margin-top: 20px;
-}
-
-#gallery .grid-wrap {
-    min-height: 150px;
-    max-width: 150px;
-    max-height: 150px;
-    margin: 10px;
-    border-radius: 4px;
-    overflow: hidden;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    transition: transform 0.3s ease;
-}
-
-#gallery .grid-wrap:hover {
-    transform: scale(1.05);
-}
-
-/* Slider styles */
-.gradio-slider {
-    margin-bottom: 15px;
-}
-
-.gradio-slider input[type="range"] {
-    width: 100%;
-}
-
-/* Dropdown styles */
-.gradio-dropdown select {
-    width: 100%;
-    padding: 8px;
-    border-radius: 4px;
-    border: 1px solid #ddd;
-    font-size: 1em;
-}
-
-/* Result image styles */
-#result img {
-    max-width: 100%;
-    border-radius: 4px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    #gallery .grid-wrap {
-        min-height: 100px;
-        max-width: 100px;
-        max-height: 100px;
-    }
+.gr-markdown p,
+.gr-markdown li {
+  color: var(--muted);
 }