Update app.py

app.py

@@ -11,20 +11,19 @@ from gradio.themes import Base
 from gradio.themes.utils import colors, fonts, sizes
 
 
-class MinimalSquareTheme(Base):
+class MinimalTheme(Base):
     def __init__(
         self,
         *,
-        primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.gray,
-        neutral_hue: colors.Color | str = colors.gray,
+        primary_hue: colors.Color | str = colors.neutral,
+        secondary_hue: colors.Color | str = colors.zinc,
+        neutral_hue: colors.Color | str = colors.stone,
         text_size: sizes.Size | str = sizes.text_md,
-        radius_size: sizes.Size | str = sizes.radius_none,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Inter"), "Arial", "sans-serif",
+            fonts.GoogleFont("Inter"), "system-ui", "sans-serif",
         ),
         font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace",
+            fonts.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace",
         ),
     ):
         super().__init__(
@@ -32,90 +31,182 @@ class MinimalSquareTheme(Base):
             secondary_hue=secondary_hue,
             neutral_hue=neutral_hue,
             text_size=text_size,
-            radius_size=radius_size,
             font=font,
             font_mono=font_mono,
         )
         super().set(
-            # ---- Page / body ----
-            body_background_fill="white",
-            body_background_fill_dark="#0b0b0b",
-            background_fill_primary="white",
-            background_fill_primary_dark="#0b0b0b",
-            background_fill_secondary="#f4f4f4",
-            background_fill_secondary_dark="#161616",
-            body_text_color="black",
-            body_text_color_dark="white",
-
-            # ---- Blocks / cards ----
-            block_background_fill="white",
-            block_background_fill_dark="#111111",
+            # ── Radius: zero everywhere ──────────────────────────────────────
+            radius_xxs="0px",
+            radius_xs="0px",
+            radius_sm="0px",
+            radius_md="0px",
+            radius_lg="0px",
+            radius_xl="0px",
+            radius_xxl="0px",
+
+            # ── Backgrounds ──────────────────────────────────────────────────
+            background_fill_primary="#ffffff",
+            background_fill_primary_dark="#0f0f0f",
+            background_fill_secondary="#f5f5f5",
+            background_fill_secondary_dark="#1a1a1a",
+            body_background_fill="#f0f0f0",
+            body_background_fill_dark="#0a0a0a",
+
+            # ── Body text ────────────────────────────────────────────────────
+            body_text_color="#111111",
+            body_text_color_dark="#e8e8e8",
+            body_text_color_subdued="#555555",
+            body_text_color_subdued_dark="#888888",
+
+            # ── Borders ──────────────────────────────────────────────────────
+            border_color_primary="#d0d0d0",
+            border_color_primary_dark="#2e2e2e",
+            border_color_accent="#999999",
+            border_color_accent_dark="#555555",
+
+            # ── Blocks ───────────────────────────────────────────────────────
+            block_background_fill="#ffffff",
+            block_background_fill_dark="#141414",
+            block_border_color="#d0d0d0",
+            block_border_color_dark="#2e2e2e",
             block_border_width="1px",
-            block_border_color="black",
-            block_border_color_dark="#3a3a3a",
-            block_radius="0px",
             block_shadow="none",
             block_shadow_dark="none",
-            block_title_text_weight="600",
-            block_label_background_fill="white",
-            block_label_background_fill_dark="#111111",
+            block_label_background_fill="#f5f5f5",
+            block_label_background_fill_dark="#1a1a1a",
+            block_label_text_color="#333333",
+            block_label_text_color_dark="#cccccc",
+            block_label_border_color="#d0d0d0",
+            block_label_border_color_dark="#2e2e2e",
             block_label_border_width="1px",
-            block_label_radius="0px",
-            block_label_text_color="black",
-            block_label_text_color_dark="white",
-
-            # ---- Primary button ----
-            button_primary_background_fill="black",
-            button_primary_background_fill_hover="#262626",
-            button_primary_background_fill_dark="white",
-            button_primary_background_fill_hover_dark="#e0e0e0",
-            button_primary_text_color="white",
-            button_primary_text_color_dark="black",
-            button_primary_border_color="black",
-            button_primary_border_color_dark="white",
-            button_large_radius="0px",
-            button_small_radius="0px",
+            block_title_text_color="#111111",
+            block_title_text_color_dark="#eeeeee",
+            block_title_text_weight="600",
+            block_title_padding="8px 0px",
+            block_padding="16px",
+
+            # ── Inputs ───────────────────────────────────────────────────────
+            input_background_fill="#ffffff",
+            input_background_fill_dark="#1a1a1a",
+            input_background_fill_focus="#ffffff",
+            input_background_fill_focus_dark="#222222",
+            input_border_color="#c0c0c0",
+            input_border_color_dark="#3a3a3a",
+            input_border_color_focus="#555555",
+            input_border_color_focus_dark="#888888",
+            input_border_width="1px",
+            input_shadow="none",
+            input_shadow_dark="none",
+            input_shadow_focus="none",
+            input_shadow_focus_dark="none",
+            input_text_color="#111111",
+            input_text_color_dark="#e8e8e8",
+            input_placeholder_color="#999999",
+            input_placeholder_color_dark="#666666",
+            input_padding="10px 12px",
+
+            # ── Primary button ───────────────────────────────────────────────
+            button_primary_background_fill="#111111",
+            button_primary_background_fill_dark="#e8e8e8",
+            button_primary_background_fill_hover="#333333",
+            button_primary_background_fill_hover_dark="#ffffff",
+            button_primary_text_color="#ffffff",
+            button_primary_text_color_dark="#111111",
+            button_primary_text_color_hover="#ffffff",
+            button_primary_text_color_hover_dark="#111111",
+            button_primary_border_color="#111111",
+            button_primary_border_color_dark="#e8e8e8",
             button_primary_shadow="none",
+            button_primary_shadow_dark="none",
+            button_primary_shadow_hover="none",
+            button_primary_shadow_hover_dark="none",
 
-            # ---- Secondary button ----
-            button_secondary_background_fill="white",
-            button_secondary_background_fill_hover="#ececec",
+            # ── Secondary button ─────────────────────────────────────────────
+            button_secondary_background_fill="#ffffff",
             button_secondary_background_fill_dark="#1a1a1a",
+            button_secondary_background_fill_hover="#f0f0f0",
             button_secondary_background_fill_hover_dark="#2a2a2a",
-            button_secondary_text_color="black",
-            button_secondary_text_color_dark="white",
-            button_secondary_border_color="black",
-            button_secondary_border_color_dark="white",
-
-            # ---- Inputs (textbox, dropdown, etc.) ----
-            input_background_fill="white",
-            input_background_fill_dark="#111111",
-            input_border_color="black",
-            input_border_color_dark="#3a3a3a",
-            input_radius="0px",
-            input_shadow="none",
-
-            # ---- Panels (groups / boxes) ----
-            panel_background_fill="white",
-            panel_background_fill_dark="#111111",
-            panel_border_width="1px",
-            panel_border_color="black",
-            panel_border_color_dark="#3a3a3a",
-
-            # ---- Checkbox / slider accents ----
-            checkbox_background_color="white",
-            checkbox_background_color_dark="#111111",
-            checkbox_border_color="black",
+            button_secondary_text_color="#111111",
+            button_secondary_text_color_dark="#e8e8e8",
+            button_secondary_text_color_hover="#111111",
+            button_secondary_text_color_hover_dark="#ffffff",
+            button_secondary_border_color="#c0c0c0",
+            button_secondary_border_color_dark="#3a3a3a",
+            button_secondary_shadow="none",
+            button_secondary_shadow_dark="none",
+
+            # ── Cancel button ────────────────────────────────────────────────
+            button_cancel_background_fill="#ffffff",
+            button_cancel_background_fill_dark="#1a1a1a",
+            button_cancel_text_color="#111111",
+            button_cancel_text_color_dark="#e8e8e8",
+            button_cancel_border_color="#c0c0c0",
+            button_cancel_border_color_dark="#3a3a3a",
+
+            # ── Button sizing ────────────────────────────────────────────────
+            button_large_padding="10px 20px",
+            button_small_padding="6px 12px",
+            button_large_text_size="14px",
+            button_small_text_size="12px",
+            button_large_text_weight="600",
+            button_small_text_weight="500",
+
+            # ── Slider ───────────────────────────────────────────────────────
+            slider_color="#111111",
+            slider_color_dark="#e8e8e8",
+
+            # ── Checkbox / Radio ─────────────────────────────────────────────
+            checkbox_background_color="#ffffff",
+            checkbox_background_color_dark="#1a1a1a",
+            checkbox_background_color_selected="#111111",
+            checkbox_background_color_selected_dark="#e8e8e8",
+            checkbox_border_color="#c0c0c0",
             checkbox_border_color_dark="#3a3a3a",
-            checkbox_border_radius="0px",
-            checkbox_background_color_selected="black",
-            checkbox_background_color_selected_dark="white",
-            slider_color="black",
-            slider_color_dark="white",
+            checkbox_border_color_focus="#555555",
+            checkbox_border_color_focus_dark="#888888",
+            checkbox_border_color_selected="#111111",
+            checkbox_border_color_selected_dark="#e8e8e8",
+            checkbox_label_text_color="#111111",
+            checkbox_label_text_color_dark="#e8e8e8",
+            checkbox_label_background_fill="#ffffff",
+            checkbox_label_background_fill_dark="#1a1a1a",
+            checkbox_label_background_fill_selected="#f5f5f5",
+            checkbox_label_background_fill_selected_dark="#222222",
+
+            # ── Accordion ────────────────────────────────────────────────────
+            accordion_text_color="#111111",
+            accordion_text_color_dark="#e8e8e8",
+
+            # ── Table ────────────────────────────────────────────────────────
+            table_border_color="#d0d0d0",
+            table_border_color_dark="#2e2e2e",
+            table_odd_background_fill="#fafafa",
+            table_odd_background_fill_dark="#161616",
+            table_even_background_fill="#ffffff",
+            table_even_background_fill_dark="#1a1a1a",
+            table_row_focus="#f0f0f0",
+            table_row_focus_dark="#222222",
+
+            # ── Shadow tokens ────────────────────────────────────────────────
+            shadow_drop="none",
+            shadow_drop_lg="none",
+            shadow_inset="none",
+
+            # ── Miscellaneous ────────────────────────────────────────────────
+            color_accent_soft="#f0f0f0",
+            color_accent_soft_dark="#1e1e1e",
+            link_text_color="#111111",
+            link_text_color_dark="#e8e8e8",
+            link_text_color_hover="#444444",
+            link_text_color_hover_dark="#ffffff",
+            link_text_color_active="#000000",
+            link_text_color_active_dark="#ffffff",
+            link_text_color_visited="#555555",
+            link_text_color_visited_dark="#aaaaaa",
         )
 
 
-minimal_square_theme = MinimalSquareTheme()
+minimal_theme = MinimalTheme()
 
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
@@ -131,7 +222,7 @@ from qwenimage.qwen_fa3_processor import QwenDoubleStreamAttnProcessorFA3
 dtype = torch.bfloat16
 
 pipe = QwenImageEditPlusPipeline.from_pretrained(
-    "FireRedTeam/FireRed-Image-Edit-1.1", # ---> Prev: FireRedTeam/FireRed-Image-Edit-1.0
+    "FireRedTeam/FireRed-Image-Edit-1.1",
     transformer=QwenImageTransformer2DModel.from_pretrained(
         "prithivMLmods/Qwen-Image-Edit-Rapid-AIO-V19",
         torch_dtype=dtype,
@@ -148,6 +239,7 @@ except Exception as e:
 
 MAX_SEED = np.iinfo(np.int32).max
 
+
 def update_dimensions_on_upload(image):
     if image is None:
         return 1024, 1024
@@ -168,7 +260,8 @@ def update_dimensions_on_upload(image):
 
     return new_width, new_height
 
-@spaces.GPU(size="xlarge")
+
+@spaces.GPU
 def infer(
     images,
     prompt,
@@ -210,7 +303,11 @@ def infer(
         seed = random.randint(0, MAX_SEED)
 
     generator = torch.Generator(device=device).manual_seed(seed)
-    negative_prompt = "worst quality, low quality, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, jpeg artifacts, signature, watermark, username, blurry"
+    negative_prompt = (
+        "worst quality, low quality, bad anatomy, bad hands, text, error, "
+        "missing fingers, extra digit, fewer digits, cropped, jpeg artifacts, "
+        "signature, watermark, username, blurry"
+    )
 
     width, height = update_dimensions_on_upload(pil_images[0])
 
@@ -234,7 +331,8 @@ def infer(
         gc.collect()
         torch.cuda.empty_cache()
 
-@spaces.GPU(size="xlarge")
+
+@spaces.GPU
 def infer_example(images, prompt):
     if not images:
         return None, 0
@@ -254,78 +352,256 @@ def infer_example(images, prompt):
     )
     return result, seed
 
+
 css = """
+/* ── Reset all border-radius to zero ─────────────────────────── */
+*, *::before, *::after {
+    border-radius: 0 !important;
+}
+
+/* ── Page layout ─────────────────────────────────────────────── */
 #col-container {
     margin: 0 auto;
-    max-width: 1000px;
+    max-width: 1020px;
+    padding: 24px 16px;
 }
-#main-title h1 {font-size: 2.4em !important;}
 
-/* Force square corners everywhere, overriding any residual
-   component-level border-radius that the theme doesn't reach. */
-*, *::before, *::after {
-    border-radius: 0px !important;
+/* ── Title ───────────────────────────────────────────────────── */
+#main-title h1 {
+    font-size: 1.6em !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.02em;
+    margin-bottom: 4px !important;
+}
+
+#main-title h1 a {
+    color: inherit !important;
+    text-decoration: none;
+    border-bottom: 2px solid currentColor;
+}
+
+/* ── Subtitle ────────────────────────────────────────────────── */
+#subtitle p {
+    font-size: 0.88em !important;
+    opacity: 0.6;
+    margin-top: 0 !important;
+}
+
+/* ── Divider ─────────────────────────────────────────────────── */
+#divider {
+    border: none;
+    border-top: 1px solid #d0d0d0;
+    margin: 16px 0 20px;
+}
+
+/* ── Gallery upload area ─────────────────────────────────────── */
+.gallery-upload .wrap {
+    border: 1px dashed #c0c0c0 !important;
+    background: transparent !important;
+}
+
+/* ── Run button ──────────────────────────────────────────────── */
+#run-btn {
+    width: 100%;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 12px !important;
+    margin-top: 8px;
+    border: none !important;
+}
+
+/* ── Output image ────────────────────────────────────────────── */
+#output-image {
+    border: 1px solid #d0d0d0 !important;
+}
+
+/* ── Examples table ──────────────────────────────────────────── */
+.examples-holder table {
+    border-collapse: collapse !important;
+}
+
+.examples-holder td,
+.examples-holder th {
+    border: 1px solid #d0d0d0 !important;
+    padding: 8px 12px !important;
+    font-size: 0.84em !important;
+}
+
+/* ── Footer note ─────────────────────────────────────────────── */
+#footer-note p {
+    font-size: 0.78em !important;
+    opacity: 0.45;
+    margin-top: 20px !important;
+}
+
+/* ── Dark-mode overrides ─────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+    #divider { border-top-color: #2e2e2e; }
+
+    .gallery-upload .wrap {
+        border-color: #3a3a3a !important;
+    }
+
+    #output-image {
+        border-color: #2e2e2e !important;
+    }
+
+    .examples-holder td,
+    .examples-holder th {
+        border-color: #2e2e2e !important;
+    }
 }
 """
 
-with gr.Blocks() as demo:
+with gr.Blocks(theme=minimal_theme, css=css) as demo:
     with gr.Column(elem_id="col-container"):
-        gr.Markdown("# **FireRed-Image-Edit-1.0-Fast - [v@1.1](https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.1)**", elem_id="main-title")
-        gr.Markdown("Perform image edits using [FireRed-Image-Edit-1.0](https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.0) with 4-step fast inference. Open on [GitHub](https://github.com/PRITHIVSAKTHIUR/FireRed-Image-Edit-1.0-Fast)")
 
-        with gr.Row(equal_height=True):
-            with gr.Column():
+        # ── Header ────────────────────��─────────────────────────────────────
+        gr.Markdown(
+            "# **FireRed-Image-Edit · [v1.1](https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.1)**",
+            elem_id="main-title"
+        )
+        gr.Markdown(
+            "Fast 4-step image editing powered by "
+            "[FireRed-Image-Edit-1.0](https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.0) · "
+            "[GitHub](https://github.com/PRITHIVSAKTHIUR/FireRed-Image-Edit-1.0-Fast)",
+            elem_id="subtitle"
+        )
+        gr.HTML("<hr id='divider'>")
+
+        # ── Main row ─────────────────────────────────────────────────────────
+        with gr.Row(equal_height=False, variant="panel"):
+
+            # Left column — inputs
+            with gr.Column(scale=1, min_width=320):
                 images = gr.Gallery(
-                    label="Upload Images",
-                    #sources=["upload", "clipboard"],
+                    label="Input Images",
                     type="filepath",
                     columns=2,
                     rows=1,
-                    height=300,
-                    allow_preview=True
+                    height=280,
+                    allow_preview=True,
+                    elem_classes=["gallery-upload"],
                 )
 
-                prompt = gr.Text(
-                    label="Edit Prompt",
-                    show_label=True,
-                    max_lines=2,
-                    placeholder="e.g., transform into anime, upscale, change lighting...",
+                prompt = gr.Textbox(
+                    label="Edit Instruction",
+                    placeholder="e.g. convert to anime style, change background to forest…",
+                    max_lines=3,
+                    lines=2,
                 )
 
-                run_button = gr.Button("Edit Image", variant="primary")
-
-            with gr.Column():
-                output_image = gr.Image(label="Output Image", interactive=False, format="png", height=395)
+                run_button = gr.Button(
+                    "▶  Run Edit",
+                    variant="primary",
+                    elem_id="run-btn",
+                )
 
-                with gr.Accordion("Advanced Settings", open=False, visible=False):
-                    seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0)
-                    randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
-                    guidance_scale = gr.Slider(label="Guidance Scale", minimum=1.0, maximum=10.0, step=0.1, value=1.0)
-                    steps = gr.Slider(label="Inference Steps", minimum=1, maximum=50, step=1, value=4)
+                with gr.Accordion("Advanced Settings", open=False):
+                    seed = gr.Slider(
+                        label="Seed",
+                        minimum=0,
+                        maximum=MAX_SEED,
+                        step=1,
+                        value=0,
+                    )
+                    randomize_seed = gr.Checkbox(
+                        label="Randomize seed",
+                        value=True,
+                    )
+                    guidance_scale = gr.Slider(
+                        label="Guidance Scale",
+                        minimum=1.0,
+                        maximum=10.0,
+                        step=0.1,
+                        value=1.0,
+                    )
+                    steps = gr.Slider(
+                        label="Inference Steps",
+                        minimum=1,
+                        maximum=50,
+                        step=1,
+                        value=4,
+                    )
+
+            # Right column — output
+            with gr.Column(scale=1, min_width=320):
+                output_image = gr.Image(
+                    label="Result",
+                    interactive=False,
+                    format="png",
+                    height=430,
+                    elem_id="output-image",
+                )
 
+        # ── Examples ─────────────────────────────────────────────────────────
         gr.Examples(
             examples=[
-                [["examples/1.jpg"], "cinematic polaroid with soft grain subtle vignette gentle lighting white frame handwritten photographed 'Fire-Edit' preserving realistic texture and details."],
-                [["examples/2.jpg"], "Transform the image into a dotted cartoon style."],
-                [["examples/3.jpeg"], "Convert it to black and white."],
-                [["examples/4.jpg", "examples/5.jpg"], "Replace her glasses with the new glasses from image 1."],
-                [["examples/8.jpg", "examples/9.png"], "Replace the current clothing with the clothing from the reference image 2. Keep the person’s face, hairstyle, body pose, background, lighting, and camera angle unchanged. Ensure the new outfit fits naturally with realistic fabric texture, proper shadows, folds, and accurate proportions. Match the lighting, color tone, and overall style for a seamless and high-quality result."],
-                [["examples/10.jpg", "examples/11.png"], "Replace the current clothing with the clothing from the reference image 2. Keep the person’s face, hairstyle, body pose, background, lighting, and camera angle unchanged. Ensure the new outfit fits naturally with realistic fabric texture, proper shadows, folds, and accurate proportions. Match the lighting, color tone, and overall style for a seamless and high-quality result."],
+                [
+                    ["examples/1.jpg"],
+                    "cinematic polaroid with soft grain subtle vignette gentle lighting "
+                    "white frame handwritten photographed 'Fire-Edit' preserving realistic "
+                    "texture and details.",
+                ],
+                [
+                    ["examples/2.jpg"],
+                    "Transform the image into a dotted cartoon style.",
+                ],
+                [
+                    ["examples/3.jpeg"],
+                    "Convert it to black and white.",
+                ],
+                [
+                    ["examples/4.jpg", "examples/5.jpg"],
+                    "Replace her glasses with the new glasses from image 1.",
+                ],
+                [
+                    ["examples/8.jpg", "examples/9.png"],
+                    "Replace the current clothing with the clothing from the reference "
+                    "image 2. Keep the person's face, hairstyle, body pose, background, "
+                    "lighting, and camera angle unchanged. Ensure the new outfit fits "
+                    "naturally with realistic fabric texture, proper shadows, folds, and "
+                    "accurate proportions. Match the lighting, color tone, and overall "
+                    "style for a seamless and high-quality result.",
+                ],
+                [
+                    ["examples/10.jpg", "examples/11.png"],
+                    "Replace the current clothing with the clothing from the reference "
+                    "image 2. Keep the person's face, hairstyle, body pose, background, "
+                    "lighting, and camera angle unchanged. Ensure the new outfit fits "
+                    "naturally with realistic fabric texture, proper shadows, folds, and "
+                    "accurate proportions. Match the lighting, color tone, and overall "
+                    "style for a seamless and high-quality result.",
+                ],
             ],
             inputs=[images, prompt],
             outputs=[output_image, seed],
             fn=infer_example,
             cache_examples=False,
-            label="Examples"
+            label="Examples",
+            elem_id="examples-holder",
         )
 
-        gr.Markdown("[*](https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.0)This is still an experimental Space for FireRed-Image-Edit-1.0.")
+        gr.Markdown(
+            "[*](https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.0) "
+            "Experimental space — results may vary.",
+            elem_id="footer-note",
+        )
 
+    # ── Event binding ─────────────────────────────────────────────────────────
     run_button.click(
         fn=infer,
         inputs=[images, prompt, seed, randomize_seed, guidance_scale, steps],
-        outputs=[output_image, seed]
+        outputs=[output_image, seed],
     )
 
 if __name__ == "__main__":
-    demo.queue(max_size=30).launch(css=css, theme=minimal_square_theme, mcp_server=True, ssr_mode=False, show_error=True)
+    demo.queue(max_size=30).launch(
+        theme=minimal_theme,
+        css=css,
+        mcp_server=True,
+        ssr_mode=False,
+        show_error=True,
+    )