update app

app.py

@@ -16,39 +16,34 @@ from gradio.themes.utils import colors, fonts, sizes
 
 # ── Theme ─────────────────────────────────────────────────────────────────────
 
-colors.flux_teal = colors.Color(
-    name="flux_teal",
-    c50="#E6FAF8",
-    c100="#CCF5F1",
-    c200="#99EBE3",
-    c300="#66E1D5",
-    c400="#33D7C7",
-    c500="#00CDB9",
-    c600="#00A494",
-    c700="#007B6F",
-    c800="#00524A",
-    c900="#002925",
-    c950="#001412",
+colors.orange_red = colors.Color(
+    name="orange_red",
+    c50="#FFF0E5",
+    c100="#FFE0CC",
+    c200="#FFC299",
+    c300="#FFA366",
+    c400="#FF8533",
+    c500="#FF4500",
+    c600="#E63E00",
+    c700="#CC3700",
+    c800="#B33000",
+    c900="#992900",
+    c950="#802200",
 )
 
-
-class FluxTheme(Soft):
+class OrangeRedTheme(Soft):
     def __init__(
         self,
         *,
-        primary_hue: colors.Color | str = colors.slate,
-        secondary_hue: colors.Color | str = colors.flux_teal,
+        primary_hue: colors.Color | str = colors.gray,
+        secondary_hue: colors.Color | str = colors.orange_red,
         neutral_hue: colors.Color | str = colors.slate,
         text_size: sizes.Size | str = sizes.text_lg,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Inter"),
-            "Arial",
-            "sans-serif",
+            fonts.GoogleFont("Outfit"), "Arial", "sans-serif",
         ),
         font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("JetBrains Mono"),
-            "ui-monospace",
-            "monospace",
+            fonts.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace",
         ),
     ):
         super().__init__(
@@ -87,8 +82,7 @@ class FluxTheme(Soft):
             block_label_background_fill="*primary_200",
         )
 
-
-flux_theme = FluxTheme()
+orange_red_theme = OrangeRedTheme()
 
 # ── Config ────────────────────────────────────────────────────────────────────
 
@@ -97,7 +91,6 @@ device  = "cuda" if torch.cuda.is_available() else "cpu"
 
 MAX_SEED       = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
-EXAMPLES_DIR   = Path("examples")
 
 # ── Models ────────────────────────────────────────────────────────────────────
 
@@ -152,27 +145,6 @@ def update_dimensions_from_image(image_list):
     return new_width, new_height
 
 
-def get_example_items():
-    example_prompts = {
-        "1.jpg": "Change the weather to stormy.",
-        "2.jpg": "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition.",
-        "3.jpg": "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent.",
-        "4.jpg": "Make the texture high-resolution.",
-    }
-    items = []
-    if EXAMPLES_DIR.exists():
-        for name in sorted(os.listdir(EXAMPLES_DIR)):
-            if name.lower().endswith((".png", ".jpg", ".jpeg", ".webp")):
-                items.append({
-                    "file":   name,
-                    "path":   str(EXAMPLES_DIR / name),
-                    "prompt": example_prompts.get(
-                        name, "Edit this image while preserving composition."
-                    ),
-                })
-    return items
-
-
 def parse_input_images(input_images):
     """Safely parse gallery / filepath / PIL inputs → list[PIL.Image] or None."""
     if input_images is None:
@@ -261,12 +233,18 @@ def infer(
     return out_standard, out_small, seed
 
 
-# Text-only wrapper used by gr.Examples (avoids Gallery type issues entirely)
 @spaces.GPU(duration=120)
-def infer_example(prompt):
+def infer_example(images, prompt):
+    if not images:
+        images_list = None
+    elif isinstance(images, str):
+        images_list = [images]
+    else:
+        images_list = images
+        
     out_std, out_small, seed_used = infer(
         prompt=prompt,
-        input_images=None,
+        input_images=images_list,
         seed=0,
         randomize_seed=True,
         width=1024,
@@ -277,16 +255,12 @@ def infer_example(prompt):
     return out_std, out_small, seed_used
 
 
-# ── Load examples ─────────────────────────────────────────────────────────────
-
-EXAMPLE_ITEMS = get_example_items()
-
 # ── CSS ───────────────────────────────────────────────────────────────────────
 
 css = """
 #col-container {
     margin: 0 auto;
-    max-width: 1100px;
+    max-width: 1000px;
 }
 #main-title h1 {
     font-size: 2.4em !important;
@@ -309,16 +283,12 @@ with gr.Blocks() as demo:
     with gr.Column(elem_id="col-container"):
 
         gr.Markdown(
-            "# ⚡ **Flux.2-4B-Encoder-Comparator**",
+            "# **Flux.2-4B-Encoder-Comparator**",
             elem_id="main-title",
         )
         gr.Markdown(
-            "Compare **FLUX.2-klein-4B** side-by-side with two VAE decoders — "
-            "generated **simultaneously** from the **same seed**. "
-            "🟦 **Standard VAE** vs 🟩 **Small Decoder VAE** "
-            "([FLUX.2-small-decoder](https://huggingface.co/black-forest-labs/FLUX.2-small-decoder)) · "
-            "[[model](https://huggingface.co/black-forest-labs/FLUX.2-klein-4B)] · "
-            "[[blog](https://bfl.ai/blog/flux-2)]"
+            "Compare **FLUX.2-klein-4B** side-by-side with two VAE decoders — generated **simultaneously** from the **same seed**. \n"
+            "🟦 **Standard VAE** vs 🟩 **Small Decoder VAE** ([FLUX.2-small-decoder](https://huggingface.co/black-forest-labs/FLUX.2-small-decoder)) · [[model](https://huggingface.co/black-forest-labs/FLUX.2-klein-4B)]"
         )
 
         # ── Main two-column row ───────────────────────────────────────────────
@@ -328,17 +298,17 @@ with gr.Blocks() as demo:
             with gr.Column():
                 input_images = gr.Gallery(
                     label="Input Image(s) for Editing (optional)",
-                    type="pil",
+                    type="filepath",
                     columns=2,
                     rows=1,
-                    height=280,
+                    height=300,
                     allow_preview=True,
                 )
 
                 prompt = gr.Text(
-                    label="Prompt",
+                    label="Edit Prompt",
                     show_label=True,
-                    placeholder="e.g., A black cat holding a sign that says hello world...",
+                    placeholder="e.g., Transform the scene into a snowy winter day...",
                 )
 
                 run_button = gr.Button("⚡ Run Comparison", variant="primary")
@@ -349,7 +319,7 @@ with gr.Blocks() as demo:
                     with gr.Column():
                         gr.HTML(
                             '<span class="vae-badge" '
-                            'style="background:#dbeafe;color:#1d4ed8;">'
+                            'style="background:#FFE0CC;color:#CC3700;">'
                             '🟦 Standard VAE</span>'
                         )
                         result_standard = gr.Image(
@@ -363,7 +333,7 @@ with gr.Blocks() as demo:
                     with gr.Column():
                         gr.HTML(
                             '<span class="vae-badge" '
-                            'style="background:#d1fae5;color:#065f46;">'
+                            'style="background:#FFF0E5;color:#E63E00;">'
                             '🟩 Small Decoder VAE</span>'
                         )
                         result_small = gr.Image(
@@ -374,9 +344,8 @@ with gr.Blocks() as demo:
                             height=280,
                         )
 
-                seed_output = gr.Number(label="Seed Used", precision=0)
-
-                with gr.Accordion("⚙️ Advanced Settings", open=False):
+                with gr.Accordion("Advanced Settings", open=False, visible=False):
+                    seed_output = gr.Number(label="Seed Used", precision=0)
                     seed = gr.Slider(
                         label="Seed",
                         minimum=0,
@@ -418,50 +387,20 @@ with gr.Blocks() as demo:
                             value=1.0,
                         )
 
-        # ── Examples — prompt-only, no Gallery input ──────────────────────────
-        # Build rows: [prompt_str]  (no image column → no Gallery postprocess)
-        if EXAMPLE_ITEMS:
-            prompt_only_rows = [[item["prompt"]] for item in EXAMPLE_ITEMS]
-
-            gr.Examples(
-                examples=prompt_only_rows,
-                inputs=[prompt],                          # ← only Text, never Gallery
-                outputs=[result_standard, result_small, seed_output],
-                fn=infer_example,                         # ← wrapper with no image arg
-                cache_examples=False,
-                label="Examples",
-            )
-
-        # ── Visual image cards (click to load image + prompt) ─────────────────
-        if EXAMPLE_ITEMS:
-            gr.Markdown("#### 🖼️ Image Editing Examples — click to load")
-            with gr.Row():
-                for item in EXAMPLE_ITEMS:
-                    with gr.Column(scale=1, min_width=180):
-                        gr.Image(
-                            value=item["path"],
-                            show_label=False,
-                            interactive=False,
-                            height=150,
-                        )
-                        card_btn = gr.Button(
-                            (item["prompt"][:48] + "…")
-                            if len(item["prompt"]) > 48
-                            else item["prompt"],
-                            size="sm",
-                        )
-
-                        def _make_loader(p, path):
-                            def _load():
-                                pil = Image.open(path).convert("RGB")
-                                return p, [(pil, None)]
-                            return _load
-
-                        card_btn.click(
-                            fn=_make_loader(item["prompt"], item["path"]),
-                            inputs=[],
-                            outputs=[prompt, input_images],
-                        )
+        # ── Standard App-Style Examples ───────────────────────────────────────
+        gr.Examples(
+            examples=[
+                [["examples/1.jpg"], "Change the weather to stormy."],
+                [["examples/2.jpg"], "Transform the scene into a snowy winter day while preserving the original subject identity, framing, and composition."],
+                [["examples/3.jpg"], "Relight the image with soft golden sunset lighting while keeping all structures and subject details consistent."],
+                [["examples/4.jpg"], "Make the texture high-resolution."],
+            ],
+            inputs=[input_images, prompt],
+            outputs=[result_standard, result_small, seed_output],
+            fn=infer_example,
+            cache_examples=False,
+            label="Examples"
+        )
 
         gr.Markdown(
             "[*](https://huggingface.co/black-forest-labs/FLUX.2-klein-4B) "
@@ -495,7 +434,7 @@ with gr.Blocks() as demo:
 if __name__ == "__main__":
     demo.queue(max_size=20).launch(
         css=css,
-        theme=flux_theme,
+        theme=orange_red_theme,
         ssr_mode=False,
         show_error=True,
     )