FireRed-Image-Edit-1.0-Fast

Paused

App Files Files Community

prithivMLmods commited on about 1 month ago

Commit

f78f9c4

verified ·

1 Parent(s): 40c856a

update app - [cleaned]

Browse files

Files changed (1) hide show

app.py +940 -187

app.py CHANGED Viewed

@@ -5,78 +5,12 @@ import numpy as np
 import spaces
 import torch
 import random
 from PIL import Image
-from typing import Iterable
-from gradio.themes import Soft
-from gradio.themes.utils import colors, fonts, sizes
-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 OrangeRedTheme(Soft):
-    def __init__(
-        self,
-        *,
-        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("Outfit"), "Arial", "sans-serif",
-        ),
-        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace",
-        ),
-    ):
-        super().__init__(
-            primary_hue=primary_hue,
-            secondary_hue=secondary_hue,
-            neutral_hue=neutral_hue,
-            text_size=text_size,
-            font=font,
-            font_mono=font_mono,
-        )
-        super().set(
-            background_fill_primary="*primary_50",
-            background_fill_primary_dark="*primary_900",
-            body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
-            body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",
-            button_primary_text_color="white",
-            button_primary_text_color_hover="white",
-            button_primary_background_fill="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            button_secondary_text_color="black",
-            button_secondary_text_color_hover="white",
-            button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
-            button_secondary_background_fill_hover="linear-gradient(90deg, *primary_400, *primary_400)",
-            button_secondary_background_fill_dark="linear-gradient(90deg, *primary_500, *primary_600)",
-            button_secondary_background_fill_hover_dark="linear-gradient(90deg, *primary_500, *primary_500)",
-            slider_color="*secondary_500",
-            slider_color_dark="*secondary_600",
-            block_title_text_weight="600",
-            block_border_width="3px",
-            block_shadow="*shadow_drop_lg",
-            button_primary_shadow="*shadow_drop_lg",
-            button_large_padding="11px",
-            color_accent_soft="*primary_100",
-            block_label_background_fill="*primary_200",
-        )
-orange_red_theme = OrangeRedTheme()
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
@@ -92,13 +26,13 @@ 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
     transformer=QwenImageTransformer2DModel.from_pretrained(
         "prithivMLmods/Qwen-Image-Edit-Rapid-AIO-V19",
         torch_dtype=dtype,
-        device_map='cuda'
     ),
-    torch_dtype=dtype
 ).to(device)
 try:
@@ -107,14 +41,34 @@ try:
 except Exception as e:
     print(f"Warning: Could not set FA3 processor: {e}")
-MAX_SEED = np.iinfo(np.int32).max
 def update_dimensions_on_upload(image):
     if image is None:
         return 1024, 1024
     original_width, original_height = image.size
     if original_width > original_height:
         new_width = 1024
         aspect_ratio = original_height / original_width
@@ -123,56 +77,39 @@ def update_dimensions_on_upload(image):
         new_height = 1024
         aspect_ratio = original_width / original_height
         new_width = int(new_height * aspect_ratio)
     new_width = (new_width // 8) * 8
     new_height = (new_height // 8) * 8
     return new_width, new_height
 @spaces.GPU
 def infer(
-    images,
     prompt,
     seed,
     randomize_seed,
     guidance_scale,
     steps,
-    progress=gr.Progress(track_tqdm=True)
 ):
     gc.collect()
     torch.cuda.empty_cache()
-    if not images:
-        raise gr.Error("Please upload at least one image to edit.")
-    pil_images = []
-    if images is not None:
-        for item in images:
-            try:
-                if isinstance(item, tuple) or isinstance(item, list):
-                    path_or_img = item[0]
-                else:
-                    path_or_img = item
-                if isinstance(path_or_img, str):
-                    pil_images.append(Image.open(path_or_img).convert("RGB"))
-                elif isinstance(path_or_img, Image.Image):
-                    pil_images.append(path_or_img.convert("RGB"))
-                else:
-                    pil_images.append(Image.open(path_or_img.name).convert("RGB"))
-            except Exception as e:
-                print(f"Skipping invalid image item: {e}")
-                continue
     if not pil_images:
-        raise gr.Error("Could not process uploaded images.")
     if randomize_seed:
         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"
     width, height = update_dimensions_on_upload(pil_images[0])
     try:
@@ -186,101 +123,917 @@ def infer(
             generator=generator,
             true_cfg_scale=guidance_scale,
         ).images[0]
         return result_image, seed
     except Exception as e:
         raise e
     finally:
         gc.collect()
         torch.cuda.empty_cache()
-@spaces.GPU
-def infer_example(images, prompt):
-    if not images:
-        return None, 0
-    if isinstance(images, str):
-        images_list = [images]
-    else:
-        images_list = images
-    result, seed = infer(
-        images=images_list,
-        prompt=prompt,
-        seed=0,
-        randomize_seed=True,
-        guidance_scale=1.0,
-        steps=4
-    )
-    return result, seed
-css = """
-#col-container {
-    margin: 0 auto;
-    max-width: 1000px;
 }
-#main-title h1 {font-size: 2.4em !important;}
 """
 with gr.Blocks() 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():
-                images = gr.Gallery(
-                    label="Upload Images",
-                    #sources=["upload", "clipboard"],
-                    type="filepath",
-                    columns=2,
-                    rows=1,
-                    height=300,
-                    allow_preview=True
-                )
-                prompt = gr.Text(
-                    label="Edit Prompt",
-                    show_label=True,
-                    max_lines=2,
-                    placeholder="e.g., transform into anime, upscale, change lighting...",
-                )
-                run_button = gr.Button("Edit Image", variant="primary")
-            with gr.Column():
-                output_image = gr.Image(label="Output Image", interactive=False, format="png", height=395)
-                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)
-        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."],
-            ],
-            inputs=[images, prompt],
-            outputs=[output_image, seed],
-            fn=infer_example,
-            cache_examples=False,
-            label="Examples"
-        )
-        gr.Markdown("[*](https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.0)This is still an experimental Space for FireRed-Image-Edit-1.0.")
-    run_button.click(
         fn=infer,
-        inputs=[images, prompt, seed, randomize_seed, guidance_scale, steps],
-        outputs=[output_image, seed]
     )
 if __name__ == "__main__":
-    demo.queue(max_size=30).launch(css=css, theme=orange_red_theme, mcp_server=True, ssr_mode=False, show_error=True)

 import spaces
 import torch
 import random
+import base64
+import json
+from io import BytesIO
 from PIL import Image
+MAX_SEED = np.iinfo(np.int32).max
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 dtype = torch.bfloat16
 pipe = QwenImageEditPlusPipeline.from_pretrained(
+    "FireRedTeam/FireRed-Image-Edit-1.1",
     transformer=QwenImageTransformer2DModel.from_pretrained(
         "prithivMLmods/Qwen-Image-Edit-Rapid-AIO-V19",
         torch_dtype=dtype,
+        device_map="cuda",
     ),
+    torch_dtype=dtype,
 ).to(device)
 try:
 except Exception as e:
     print(f"Warning: Could not set FA3 processor: {e}")
+def b64_to_pil_list(b64_json_str):
+    if not b64_json_str or b64_json_str.strip() in ("", "[]"):
+        return []
+    try:
+        b64_list = json.loads(b64_json_str)
+    except Exception:
+        return []
+    pil_images = []
+    for b64_str in b64_list:
+        if not b64_str or not isinstance(b64_str, str):
+            continue
+        try:
+            if b64_str.startswith("data:image"):
+                _, data = b64_str.split(",", 1)
+            else:
+                data = b64_str
+            image_data = base64.b64decode(data)
+            pil_images.append(Image.open(BytesIO(image_data)).convert("RGB"))
+        except Exception as e:
+            print(f"Error decoding image: {e}")
+    return pil_images
 def update_dimensions_on_upload(image):
     if image is None:
         return 1024, 1024
     original_width, original_height = image.size
     if original_width > original_height:
         new_width = 1024
         aspect_ratio = original_height / original_width
         new_height = 1024
         aspect_ratio = original_width / original_height
         new_width = int(new_height * aspect_ratio)
     new_width = (new_width // 8) * 8
     new_height = (new_height // 8) * 8
     return new_width, new_height
 @spaces.GPU
 def infer(
+    images_b64_json,
     prompt,
     seed,
     randomize_seed,
     guidance_scale,
     steps,
+    progress=gr.Progress(track_tqdm=True),
 ):
     gc.collect()
     torch.cuda.empty_cache()
+    pil_images = b64_to_pil_list(images_b64_json)
     if not pil_images:
+        raise gr.Error("Please upload at least one image to edit.")
+    if not prompt or prompt.strip() == "":
+        raise gr.Error("Please enter an edit prompt.")
     if randomize_seed:
         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"
+    )
     width, height = update_dimensions_on_upload(pil_images[0])
     try:
             generator=generator,
             true_cfg_scale=guidance_scale,
         ).images[0]
         return result_image, seed
     except Exception as e:
         raise e
     finally:
         gc.collect()
         torch.cuda.empty_cache()
+css = r"""
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+*{box-sizing:border-box;margin:0;padding:0}
+body,.gradio-container{
+    background:#0f0f13!important;
+    font-family:'Inter',system-ui,-apple-system,sans-serif!important;
+    font-size:14px!important;
+    color:#e4e4e7!important;
+    min-height:100vh;
+}
+.dark body,.dark .gradio-container{background:#0f0f13!important;color:#e4e4e7!important}
+footer{display:none!important}
+.hidden-input{
+    display:none!important;height:0!important;overflow:hidden!important;
+    margin:0!important;padding:0!important;
+}
+/* ── App Shell ── */
+.app-shell{
+    background:#18181b;border:1px solid #27272a;border-radius:16px;
+    margin:12px auto;max-width:1400px;overflow:hidden;
+    box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
+}
+/* ── Header ── */
+.app-header{
+    background:linear-gradient(135deg,#18181b,#1e1e24);
+    border-bottom:1px solid #27272a;padding:14px 24px;
+    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
+}
+.app-header-left{display:flex;align-items:center;gap:12px}
+.app-logo{
+    width:36px;height:36px;
+    background:linear-gradient(135deg,#FF4500,#FF6633,#FF8C66);
+    border-radius:10px;display:flex;align-items:center;justify-content:center;
+    font-size:18px;color:#fff;box-shadow:0 4px 12px rgba(255,69,0,.35);
+}
+.app-title{
+    font-size:18px;font-weight:700;
+    background:linear-gradient(135deg,#e4e4e7,#a1a1aa);
+    -webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.3px;
+}
+.app-badge{
+    font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;
+    background:rgba(255,69,0,.15);color:#FF6633;
+    border:1px solid rgba(255,69,0,.25);letter-spacing:.3px;
+}
+.app-badge.fast{
+    background:rgba(34,197,94,.12);color:#4ade80;
+    border:1px solid rgba(34,197,94,.25);
+}
+/* ── Toolbar ── */
+.app-toolbar{
+    background:#18181b;border-bottom:1px solid #27272a;
+    padding:8px 16px;display:flex;gap:4px;align-items:center;flex-wrap:wrap;
+}
+.tb-sep{width:1px;height:28px;background:#27272a;margin:0 8px}
+.modern-tb-btn{
+    display:inline-flex;align-items:center;justify-content:center;gap:6px;
+    min-width:32px;height:34px;background:transparent;
+    border:1px solid transparent;border-radius:8px;cursor:pointer;
+    font-size:13px;font-weight:600;padding:0 12px;
+    font-family:'Inter',sans-serif;color:#ffffff!important;
+    -webkit-text-fill-color:#ffffff!important;transition:all .15s ease;
+}
+.modern-tb-btn:hover{
+    background:rgba(255,69,0,.15);color:#ffffff!important;
+    -webkit-text-fill-color:#ffffff!important;border-color:rgba(255,69,0,.3);
+}
+.modern-tb-btn:active,.modern-tb-btn.active{
+    background:rgba(255,69,0,.25);color:#ffffff!important;
+    -webkit-text-fill-color:#ffffff!important;border-color:rgba(255,69,0,.45);
+}
+.modern-tb-btn .tb-icon{font-size:15px;line-height:1;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
+.modern-tb-btn .tb-label{font-size:13px;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;font-weight:600}
+.tb-info{
+    font-family:'JetBrains Mono',monospace;font-size:12px;
+    color:#71717a;padding:0 8px;display:flex;align-items:center;
+}
+/* ── Main Layout ── */
+.app-main-row{display:flex;gap:0;flex:1;overflow:hidden}
+.app-main-left{
+    flex:1;display:flex;flex-direction:column;min-width:0;
+    border-right:1px solid #27272a;
+}
+.app-main-right{
+    width:420px;display:flex;flex-direction:column;flex-shrink:0;background:#18181b;
+}
+/* ── Gallery Drop Zone ── */
+#gallery-drop-zone{
+    position:relative;background:#09090b;min-height:440px;overflow:auto;
+}
+#gallery-drop-zone.drag-over{
+    outline:2px solid #FF4500;outline-offset:-2px;
+    background:rgba(255,69,0,.04);
+}
+/* ── Upload Prompt ── */
+.upload-prompt-modern{
+    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;
+}
+.upload-click-area{
+    display:flex;flex-direction:column;align-items:center;justify-content:center;
+    cursor:pointer;padding:36px 52px;border:2px dashed #3f3f46;
+    border-radius:16px;background:rgba(255,69,0,.03);transition:all .2s ease;gap:8px;
+}
+.upload-click-area:hover{
+    background:rgba(255,69,0,.08);border-color:#FF4500;transform:scale(1.03);
+}
+.upload-click-area:active{background:rgba(255,69,0,.12);transform:scale(.98)}
+.upload-click-area svg{width:80px;height:80px}
+.upload-main-text{color:#71717a;font-size:14px;font-weight:500;margin-top:4px}
+.upload-sub-text{color:#52525b;font-size:12px}
+/* ── Gallery Grid ── */
+.image-gallery-grid{
+    display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
+    gap:12px;padding:16px;align-content:start;
+}
+.gallery-thumb{
+    position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;
+    cursor:pointer;border:2px solid #27272a;transition:all .2s ease;background:#18181b;
+}
+.gallery-thumb:hover{
+    border-color:#3f3f46;transform:translateY(-2px);
+    box-shadow:0 4px 12px rgba(0,0,0,.4);
+}
+.gallery-thumb.selected{
+    border-color:#FF4500!important;box-shadow:0 0 0 3px rgba(255,69,0,.2);
+}
+.gallery-thumb img{width:100%;height:100%;object-fit:cover}
+.thumb-badge{
+    position:absolute;top:6px;left:6px;background:#FF4500;color:#fff;
+    padding:2px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;
+    font-size:11px;font-weight:600;
+}
+.thumb-remove{
+    position:absolute;top:6px;right:6px;width:24px;height:24px;
+    background:rgba(0,0,0,.75);color:#fff;border:1px solid rgba(255,255,255,.15);
+    border-radius:50%;cursor:pointer;display:none;align-items:center;
+    justify-content:center;font-size:12px;transition:all .15s;line-height:1;
+}
+.gallery-thumb:hover .thumb-remove{display:flex}
+.thumb-remove:hover{background:#FF4500;border-color:#FF4500}
+.gallery-add-card{
+    aspect-ratio:1;border-radius:10px;border:2px dashed #3f3f46;
+    display:flex;flex-direction:column;align-items:center;justify-content:center;
+    cursor:pointer;transition:all .2s ease;background:rgba(255,69,0,.03);gap:4px;
+}
+.gallery-add-card:hover{border-color:#FF4500;background:rgba(255,69,0,.08)}
+.gallery-add-card .add-icon{font-size:28px;color:#71717a;font-weight:300}
+.gallery-add-card .add-text{font-size:12px;color:#71717a;font-weight:500}
+/* ── Hint Bar ── */
+.hint-bar{
+    background:rgba(255,69,0,.06);border-top:1px solid #27272a;
+    border-bottom:1px solid #27272a;padding:10px 20px;
+    font-size:13px;color:#a1a1aa;line-height:1.7;
+}
+.hint-bar b{color:#FF8C66;font-weight:600}
+.hint-bar kbd{
+    display:inline-block;padding:1px 6px;background:#27272a;
+    border:1px solid #3f3f46;border-radius:4px;
+    font-family:'JetBrains Mono',monospace;font-size:11px;color:#a1a1aa;
+}
+/* ── Suggestions ── */
+.suggestions-section{border-top:1px solid #27272a;padding:12px 16px}
+.suggestions-title{
+    font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;
+    letter-spacing:.8px;margin-bottom:10px;
+}
+.suggestions-wrap{display:flex;flex-wrap:wrap;gap:6px}
+.suggestion-chip{
+    display:inline-flex;align-items:center;gap:4px;padding:5px 12px;
+    background:rgba(255,69,0,.08);border:1px solid rgba(255,69,0,.2);
+    border-radius:20px;color:#FF8C66;font-size:12px;font-weight:500;
+    font-family:'Inter',sans-serif;cursor:pointer;transition:all .15s;white-space:nowrap;
+}
+.suggestion-chip:hover{
+    background:rgba(255,69,0,.15);border-color:rgba(255,69,0,.35);
+    color:#FF6633;transform:translateY(-1px);
+}
+/* ── Right Panel Cards ── */
+.panel-card{border-bottom:1px solid #27272a}
+.panel-card-title{
+    padding:12px 20px;font-size:12px;font-weight:600;color:#71717a;
+    text-transform:uppercase;letter-spacing:.8px;
+    border-bottom:1px solid rgba(39,39,42,.6);
+}
+.panel-card-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px}
+.modern-label{font-size:13px;font-weight:500;color:#a1a1aa;margin-bottom:4px;display:block}
+.modern-textarea{
+    width:100%;background:#09090b;border:1px solid #27272a;border-radius:8px;
+    padding:10px 14px;font-family:'Inter',sans-serif;font-size:14px;
+    color:#e4e4e7;resize:vertical;outline:none;min-height:42px;transition:border-color .2s;
+}
+.modern-textarea:focus{border-color:#FF4500;box-shadow:0 0 0 3px rgba(255,69,0,.15)}
+.modern-textarea::placeholder{color:#3f3f46}
+/* ── Primary Button — White text+SVG in ALL themes ── */
+.btn-run{
+    display:flex;align-items:center;justify-content:center;gap:8px;
+    width:100%;background:linear-gradient(135deg,#FF4500,#E63E00);
+    border:none;border-radius:10px;padding:12px 24px;cursor:pointer;
+    font-size:15px;font-weight:600;font-family:'Inter',sans-serif;
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+    transition:all .2s ease;letter-spacing:-.2px;
+    box-shadow:0 4px 16px rgba(255,69,0,.3),inset 0 1px 0 rgba(255,255,255,.1);
+}
+.btn-run:hover{
+    background:linear-gradient(135deg,#FF6633,#FF4500);
+    box-shadow:0 6px 24px rgba(255,69,0,.45),inset 0 1px 0 rgba(255,255,255,.15);
+    transform:translateY(-1px);color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+}
+.btn-run:active{
+    transform:translateY(0);box-shadow:0 2px 8px rgba(255,69,0,.3);
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+}
+.btn-run:focus{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
+.btn-run svg{width:18px;height:18px;fill:#ffffff!important;color:#ffffff!important}
+.btn-run svg path{fill:#ffffff!important;color:#ffffff!important}
+.btn-run span,
+.btn-run #run-btn-label,
+#run-btn-label{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
+/* Force white on run button — every selector/theme */
+#custom-run-btn,#custom-run-btn *,#custom-run-btn span,
+#custom-run-btn svg,#custom-run-btn svg *,#custom-run-btn svg path,
+#custom-run-btn #run-btn-label,.btn-run *{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
+}
+body:not(.dark) .btn-run,body:not(.dark) .btn-run *,body:not(.dark) #custom-run-btn,
+body:not(.dark) #custom-run-btn *,body:not(.dark) #run-btn-label{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
+}
+.dark .btn-run,.dark .btn-run *,.dark #custom-run-btn,.dark #custom-run-btn *,
+.dark #run-btn-label{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
+}
+.gradio-container .btn-run,.gradio-container .btn-run *,.gradio-container #custom-run-btn,
+.gradio-container #custom-run-btn *,.gradio-container #run-btn-label{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
+}
+/* ── Toolbar btn white in all themes ── */
+body:not(.dark) .modern-tb-btn,body:not(.dark) .modern-tb-btn *{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+}
+.dark .modern-tb-btn,.dark .modern-tb-btn *{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+}
+.gradio-container .modern-tb-btn,.gradio-container .modern-tb-btn *{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+}
+/* ── Output Frames ── */
+.output-frame{
+    border-bottom:1px solid #27272a;display:flex;flex-direction:column;position:relative;
+}
+.output-frame .out-title{
+    padding:10px 20px;font-size:13px;font-weight:700;
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+    text-transform:uppercase;letter-spacing:.8px;
+    border-bottom:1px solid rgba(39,39,42,.6);
+    display:flex;align-items:center;justify-content:space-between;
+}
+.output-frame .out-title span{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
+.output-frame .out-body{
+    flex:1;background:#09090b;display:flex;align-items:center;justify-content:center;
+    overflow:hidden;min-height:240px;position:relative;
+}
+.output-frame .out-body img{max-width:100%;max-height:460px;image-rendering:auto}
+.output-frame .out-placeholder{color:#3f3f46;font-size:13px;text-align:center;padding:20px}
+.out-download-btn{
+    display:none;align-items:center;justify-content:center;
+    background:rgba(255,69,0,.1);border:1px solid rgba(255,69,0,.2);
+    border-radius:6px;cursor:pointer;padding:3px 10px;font-size:11px;
+    font-weight:500;color:#FF8C66!important;gap:4px;height:24px;transition:all .15s;
+}
+.out-download-btn:hover{
+    background:rgba(255,69,0,.2);border-color:rgba(255,69,0,.35);color:#ffffff!important;
+}
+.out-download-btn.visible{display:inline-flex}
+.out-download-btn svg{width:12px;height:12px;fill:#FF8C66}
+/* ── Loader ── */
+.modern-loader{
+    display:none;position:absolute;top:0;left:0;right:0;bottom:0;
+    background:rgba(9,9,11,.92);z-index:15;flex-direction:column;
+    align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(4px);
+}
+.modern-loader.active{display:flex}
+.modern-loader .loader-spinner{
+    width:36px;height:36px;border:3px solid #27272a;
+    border-top-color:#FF4500;border-radius:50%;animation:spin .8s linear infinite;
+}
+@keyframes spin{to{transform:rotate(360deg)}}
+.modern-loader .loader-text{font-size:13px;color:#a1a1aa;font-weight:500}
+.loader-bar-track{width:200px;height:4px;background:#27272a;border-radius:2px;overflow:hidden}
+.loader-bar-fill{
+    height:100%;background:linear-gradient(90deg,#FF4500,#FF6633,#FF4500);
+    background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px;
+}
+@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+/* ── Settings ── */
+.settings-group{
+    border:1px solid #27272a;border-radius:10px;margin:12px 16px;padding:0;overflow:hidden;
+}
+.settings-group-title{
+    font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;
+    letter-spacing:.8px;padding:10px 16px;border-bottom:1px solid #27272a;
+    background:rgba(24,24,27,.5);
+}
+.settings-group-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
+.slider-row{display:flex;align-items:center;gap:10px;min-height:28px}
+.slider-row label{font-size:13px;font-weight:500;color:#a1a1aa;min-width:72px;flex-shrink:0}
+.slider-row input[type="range"]{
+    flex:1;-webkit-appearance:none;appearance:none;height:6px;
+    background:#27272a;border-radius:3px;outline:none;min-width:0;
+}
+.slider-row input[type="range"]::-webkit-slider-thumb{
+    -webkit-appearance:none;appearance:none;width:16px;height:16px;
+    background:linear-gradient(135deg,#FF4500,#E63E00);border-radius:50%;
+    cursor:pointer;box-shadow:0 2px 6px rgba(255,69,0,.4);transition:transform .15s;
+}
+.slider-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
+.slider-row input[type="range"]::-moz-range-thumb{
+    width:16px;height:16px;background:linear-gradient(135deg,#FF4500,#E63E00);
+    border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(255,69,0,.4);
+}
+.slider-row .slider-val{
+    min-width:52px;text-align:right;font-family:'JetBrains Mono',monospace;
+    font-size:12px;font-weight:500;padding:3px 8px;background:#09090b;
+    border:1px solid #27272a;border-radius:6px;color:#a1a1aa;flex-shrink:0;
+}
+.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#a1a1aa}
+.checkbox-row input[type="checkbox"]{accent-color:#FF4500;width:16px;height:16px;cursor:pointer}
+.checkbox-row label{color:#a1a1aa;font-size:13px;cursor:pointer}
+/* ── Status Bar ── */
+.app-statusbar{
+    background:#18181b;border-top:1px solid #27272a;padding:6px 20px;
+    display:flex;gap:12px;height:34px;align-items:center;font-size:12px;
+}
+.app-statusbar .sb-section{
+    padding:0 12px;flex:1;display:flex;align-items:center;
+    font-family:'JetBrains Mono',monospace;font-size:12px;color:#52525b;
+    overflow:hidden;white-space:nowrap;
+}
+.app-statusbar .sb-section.sb-fixed{
+    flex:0 0 auto;min-width:90px;text-align:center;justify-content:center;
+    padding:3px 12px;background:rgba(255,69,0,.08);border-radius:6px;
+    color:#FF6633;font-weight:500;
+}
+#gradio-run-btn{
+    position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;
+    opacity:0.01;pointer-events:none;overflow:hidden;
+}
+/* ── Experimental Note ── */
+.exp-note{
+    padding:10px 20px;font-size:12px;color:#52525b;border-top:1px solid #27272a;
+    text-align:center;
+}
+.exp-note a{color:#FF6633;text-decoration:none}
+.exp-note a:hover{text-decoration:underline}
+/* ── Dark mode extras ── */
+.dark .app-shell{background:#18181b}
+.dark .upload-prompt-modern{background:transparent}
+.dark .panel-card{background:#18181b}
+.dark .settings-group{background:#18181b}
+.dark .output-frame .out-title{color:#ffffff!important}
+.dark .output-frame .out-title span{color:#ffffff!important}
+.dark .out-download-btn{color:#FF8C66!important}
+.dark .out-download-btn:hover{color:#ffffff!important}
+/* ── Scrollbar ── */
+::-webkit-scrollbar{width:8px;height:8px}
+::-webkit-scrollbar-track{background:#09090b}
+::-webkit-scrollbar-thumb{background:#27272a;border-radius:4px}
+::-webkit-scrollbar-thumb:hover{background:#3f3f46}
+/* ── Responsive ── */
+@media(max-width:840px){
+    .app-main-row{flex-direction:column}
+    .app-main-right{width:100%}
+    .app-main-left{border-right:none;border-bottom:1px solid #27272a}
 }
 """
+gallery_js = r"""
+() => {
+function init() {
+    if (window.__fireRedInitDone) return;
+    const galleryGrid   = document.getElementById('image-gallery-grid');
+    const dropZone      = document.getElementById('gallery-drop-zone');
+    const uploadPrompt  = document.getElementById('upload-prompt');
+    const uploadClick   = document.getElementById('upload-click-area');
+    const fileInput     = document.getElementById('custom-file-input');
+    const btnUpload     = document.getElementById('tb-upload');
+    const btnRemove     = document.getElementById('tb-remove');
+    const btnClear      = document.getElementById('tb-clear');
+    const promptInput   = document.getElementById('custom-prompt-input');
+    const runBtnEl      = document.getElementById('custom-run-btn');
+    const imgCountTb    = document.getElementById('tb-image-count');
+    const imgCountSb    = document.getElementById('sb-image-count');
+    if (!galleryGrid || !fileInput || !dropZone) {
+        setTimeout(init, 250);
+        return;
+    }
+    window.__fireRedInitDone = true;
+    let images = [];
+    window.__uploadedImages = images;
+    let selectedIdx = -1;
+    function setGradioValue(containerId, value) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        container.querySelectorAll('input, textarea').forEach(el => {
+            if (el.type === 'file' || el.type === 'range' || el.type === 'checkbox') return;
+            const proto = el.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+            const ns = Object.getOwnPropertyDescriptor(proto, 'value');
+            if (ns && ns.set) {
+                ns.set.call(el, value);
+                el.dispatchEvent(new Event('input',  {bubbles:true, composed:true}));
+                el.dispatchEvent(new Event('change', {bubbles:true, composed:true}));
+            }
+        });
+    }
+    function syncImagesToGradio() {
+        window.__uploadedImages = images;
+        const b64Array = images.map(img => img.b64);
+        setGradioValue('hidden-images-b64', JSON.stringify(b64Array));
+        updateCounts();
+    }
+    function syncPromptToGradio() {
+        if (promptInput) setGradioValue('prompt-gradio-input', promptInput.value);
+    }
+    function updateCounts() {
+        const n = images.length;
+        const txt = n > 0 ? n + ' image' + (n > 1 ? 's' : '') : 'No images';
+        if (imgCountTb) imgCountTb.textContent = txt;
+        if (imgCountSb) imgCountSb.textContent = n > 0 ? txt + ' uploaded' : 'No images uploaded';
+    }
+    function addImage(b64, name) {
+        images.push({id: Date.now() + Math.random(), b64: b64, name: name});
+        renderGallery();
+        syncImagesToGradio();
+    }
+    function removeImage(idx) {
+        images.splice(idx, 1);
+        if (selectedIdx === idx) selectedIdx = -1;
+        else if (selectedIdx > idx) selectedIdx--;
+        renderGallery();
+        syncImagesToGradio();
+    }
+    function clearAll() {
+        images = [];
+        window.__uploadedImages = images;
+        selectedIdx = -1;
+        renderGallery();
+        syncImagesToGradio();
+    }
+    function selectImage(idx) {
+        selectedIdx = (selectedIdx === idx) ? -1 : idx;
+        renderGallery();
+    }
+    function renderGallery() {
+        if (images.length === 0) {
+            galleryGrid.innerHTML = '';
+            galleryGrid.style.display = 'none';
+            if (uploadPrompt) uploadPrompt.style.display = '';
+            return;
+        }
+        if (uploadPrompt) uploadPrompt.style.display = 'none';
+        galleryGrid.style.display = 'grid';
+        let html = '';
+        images.forEach((img, i) => {
+            const sel = i === selectedIdx ? ' selected' : '';
+            html += '<div class="gallery-thumb' + sel + '" data-idx="' + i + '">'
+                  + '<img src="' + img.b64 + '" alt="' + (img.name||'image') + '">'
+                  + '<span class="thumb-badge">#' + (i+1) + '</span>'
+                  + '<button class="thumb-remove" data-remove="' + i + '">\u2715</button>'
+                  + '</div>';
+        });
+        html += '<div class="gallery-add-card" id="gallery-add-card">'
+              + '<span class="add-icon">+</span>'
+              + '<span class="add-text">Add</span>'
+              + '</div>';
+        galleryGrid.innerHTML = html;
+        galleryGrid.querySelectorAll('.gallery-thumb').forEach(thumb => {
+            thumb.addEventListener('click', (e) => {
+                if (e.target.closest('.thumb-remove')) return;
+                selectImage(parseInt(thumb.dataset.idx));
+            });
+        });
+        galleryGrid.querySelectorAll('.thumb-remove').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                removeImage(parseInt(btn.dataset.remove));
+            });
+        });
+        const addCard = document.getElementById('gallery-add-card');
+        if (addCard) addCard.addEventListener('click', () => fileInput.click());
+    }
+    function processFiles(files) {
+        Array.from(files).forEach(file => {
+            if (!file.type.startsWith('image/')) return;
+            const reader = new FileReader();
+            reader.onload = (e) => addImage(e.target.result, file.name);
+            reader.readAsDataURL(file);
+        });
+    }
+    fileInput.addEventListener('change', (e) => {
+        processFiles(e.target.files);
+        e.target.value = '';
+    });
+    if (uploadClick) uploadClick.addEventListener('click', () => fileInput.click());
+    if (btnUpload) btnUpload.addEventListener('click', () => fileInput.click());
+    if (btnRemove) btnRemove.addEventListener('click', () => {
+        if (selectedIdx >= 0 && selectedIdx < images.length) removeImage(selectedIdx);
+    });
+    if (btnClear) btnClear.addEventListener('click', clearAll);
+    dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', (e) => { e.preventDefault(); dropZone.classList.remove('drag-over'); });
+    dropZone.addEventListener('drop', (e) => {
+        e.preventDefault(); dropZone.classList.remove('drag-over');
+        if (e.dataTransfer.files.length) processFiles(e.dataTransfer.files);
+    });
+    if (promptInput) promptInput.addEventListener('input', syncPromptToGradio);
+    window.__setPrompt = function(text) {
+        if (promptInput) { promptInput.value = text; syncPromptToGradio(); }
+    };
+    function syncSlider(customId, gradioId) {
+        const slider = document.getElementById(customId);
+        const valSpan = document.getElementById(customId + '-val');
+        if (!slider) return;
+        slider.addEventListener('input', () => {
+            if (valSpan) valSpan.textContent = slider.value;
+            const container = document.getElementById(gradioId);
+            if (!container) return;
+            container.querySelectorAll('input[type="range"],input[type="number"]').forEach(el => {
+                const ns = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                if (ns && ns.set) {
+                    ns.set.call(el, slider.value);
+                    el.dispatchEvent(new Event('input',  {bubbles:true, composed:true}));
+                    el.dispatchEvent(new Event('change', {bubbles:true, composed:true}));
+                }
+            });
+        });
+    }
+    syncSlider('custom-seed', 'gradio-seed');
+    syncSlider('custom-guidance', 'gradio-guidance');
+    syncSlider('custom-steps', 'gradio-steps');
+    const randCheck = document.getElementById('custom-randomize');
+    if (randCheck) {
+        randCheck.addEventListener('change', () => {
+            const container = document.getElementById('gradio-randomize');
+            if (!container) return;
+            const cb = container.querySelector('input[type="checkbox"]');
+            if (cb && cb.checked !== randCheck.checked) cb.click();
+        });
+    }
+    function showLoader() {
+        const l = document.getElementById('output-loader');
+        if (l) l.classList.add('active');
+        const sb = document.querySelector('.sb-fixed');
+        if (sb) sb.textContent = 'Processing...';
+    }
+    function hideLoader() {
+        const l = document.getElementById('output-loader');
+        if (l) l.classList.remove('active');
+        const sb = document.querySelector('.sb-fixed');
+        if (sb) sb.textContent = 'Done';
+    }
+    window.__showLoader = showLoader;
+    window.__hideLoader = hideLoader;
+    window.__clickGradioRunBtn = function() {
+        syncPromptToGradio();
+        syncImagesToGradio();
+        showLoader();
+        setTimeout(() => {
+            const gradioBtn = document.getElementById('gradio-run-btn');
+            if (!gradioBtn) return;
+            const btn = gradioBtn.querySelector('button');
+            if (btn) btn.click(); else gradioBtn.click();
+        }, 200);
+    };
+    if (runBtnEl) runBtnEl.addEventListener('click', () => window.__clickGradioRunBtn());
+    renderGallery();
+    updateCounts();
+}
+init();
+}
+"""
+wire_outputs_js = r"""
+() => {
+function watchOutputs() {
+    const resultContainer = document.getElementById('gradio-result');
+    const outBody  = document.getElementById('output-image-container');
+    const outPh    = document.getElementById('output-placeholder');
+    const dlBtn    = document.getElementById('dl-btn-output');
+    if (!resultContainer || !outBody) { setTimeout(watchOutputs, 500); return; }
+    if (dlBtn) {
+        dlBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const img = outBody.querySelector('img.modern-out-img');
+            if (img && img.src) {
+                const a = document.createElement('a');
+                a.href = img.src; a.download = 'firered_output.png';
+                document.body.appendChild(a); a.click(); document.body.removeChild(a);
+            }
+        });
+    }
+    function syncImage() {
+        const resultImg = resultContainer.querySelector('img');
+        if (resultImg && resultImg.src) {
+            if (outPh) outPh.style.display = 'none';
+            let existing = outBody.querySelector('img.modern-out-img');
+            if (!existing) {
+                existing = document.createElement('img');
+                existing.className = 'modern-out-img';
+                outBody.appendChild(existing);
+            }
+            if (existing.src !== resultImg.src) {
+                existing.src = resultImg.src;
+                if (dlBtn) dlBtn.classList.add('visible');
+                if (window.__hideLoader) window.__hideLoader();
+            }
+        }
+    }
+    const observer = new MutationObserver(syncImage);
+    observer.observe(resultContainer, {childList:true, subtree:true, attributes:true, attributeFilter:['src']});
+    setInterval(syncImage, 800);
+}
+watchOutputs();
+function watchSeed() {
+    const seedContainer = document.getElementById('gradio-seed');
+    const seedSlider = document.getElementById('custom-seed');
+    const seedVal = document.getElementById('custom-seed-val');
+    if (!seedContainer || !seedSlider) { setTimeout(watchSeed, 500); return; }
+    function sync() {
+        const el = seedContainer.querySelector('input[type="range"],input[type="number"]');
+        if (el && el.value) {
+            seedSlider.value = el.value;
+            if (seedVal) seedVal.textContent = el.value;
+        }
+    }
+    const obs = new MutationObserver(sync);
+    obs.observe(seedContainer, {childList:true, subtree:true, attributes:true, attributeFilter:['value']});
+    setInterval(sync, 1000);
+}
+watchSeed();
+}
+"""
+DOWNLOAD_SVG = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 16l-5-5h3V4h4v7h3l-5 5z"/><path d="M20 18H4v2h16v-2z"/></svg>'
 with gr.Blocks() as demo:
+    hidden_images_b64 = gr.Textbox(
+        value="[]", elem_id="hidden-images-b64",
+        elem_classes="hidden-input", container=False,
+    )
+    prompt = gr.Textbox(
+        value="", elem_id="prompt-gradio-input",
+        elem_classes="hidden-input", container=False,
+    )
+    seed = gr.Slider(
+        minimum=0, maximum=MAX_SEED, step=1, value=0,
+        elem_id="gradio-seed", elem_classes="hidden-input", container=False,
+    )
+    randomize_seed = gr.Checkbox(
+        value=True, elem_id="gradio-randomize",
+        elem_classes="hidden-input", container=False,
+    )
+    guidance_scale = gr.Slider(
+        minimum=1.0, maximum=10.0, step=0.1, value=1.0,
+        elem_id="gradio-guidance", elem_classes="hidden-input", container=False,
+    )
+    steps = gr.Slider(
+        minimum=1, maximum=50, step=1, value=4,
+        elem_id="gradio-steps", elem_classes="hidden-input", container=False,
+    )
+    result = gr.Image(
+        elem_id="gradio-result", elem_classes="hidden-input",
+        container=False, format="png",
+    )
+    gr.HTML(f"""
+    <div class="app-shell">
+        <!-- ══ Header ══ -->
+        <div class="app-header">
+            <div class="app-header-left">
+                <div class="app-logo">🔥</div>
+                <span class="app-title">FireRed-Image-Edit</span>
+                <span class="app-badge">v1.1</span>
+                <span class="app-badge fast">4-Step Fast</span>
+            </div>
+        </div>
+        <!-- ══ Toolbar ══ -->
+        <div class="app-toolbar">
+            <button id="tb-upload" class="modern-tb-btn" title="Upload images">
+                <span class="tb-icon">📁</span><span class="tb-label">Upload</span>
+            </button>
+            <button id="tb-remove" class="modern-tb-btn" title="Remove selected image">
+                <span class="tb-icon">✕</span><span class="tb-label">Remove</span>
+            </button>
+            <button id="tb-clear" class="modern-tb-btn" title="Clear all images">
+                <span class="tb-icon">✖</span><span class="tb-label">Clear All</span>
+            </button>
+            <div class="tb-sep"></div>
+            <span id="tb-image-count" class="tb-info">No images</span>
+        </div>
+        <!-- ══ Main ══ -->
+        <div class="app-main-row">
+            <!-- Left: Gallery -->
+            <div class="app-main-left">
+                <div id="gallery-drop-zone">
+                    <div id="upload-prompt" class="upload-prompt-modern">
+                        <div id="upload-click-area" class="upload-click-area">
+                            <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#FF4500" stroke-width="2" stroke-dasharray="4 3"/>
+                                <polygon points="12,62 30,40 42,50 54,34 68,62" fill="rgba(255,69,0,0.15)" stroke="#FF4500" stroke-width="1.5"/>
+                                <circle cx="28" cy="30" r="6" fill="rgba(255,69,0,0.2)" stroke="#FF4500" stroke-width="1.5"/>
+                            </svg>
+                            <span class="upload-main-text">Click or drag images here</span>
+                            <span class="upload-sub-text">Supports multiple images for reference-based editing</span>
+                        </div>
+                    </div>
+                    <input id="custom-file-input" type="file" accept="image/*" multiple style="display:none;" />
+                    <div id="image-gallery-grid" class="image-gallery-grid" style="display:none;"></div>
+                </div>
+                <div class="hint-bar">
+                    <b>Upload:</b> Click or drag to add images &nbsp;·&nbsp;
+                    <b>Multi-image:</b> Upload multiple images for reference-based editing &nbsp;·&nbsp;
+                    <kbd>Remove</kbd> deletes selected &nbsp;·&nbsp;
+                    <kbd>Clear All</kbd> removes everything
+                </div>
+                <div class="suggestions-section">
+                    <div class="suggestions-title">Quick Prompts</div>
+                    <div class="suggestions-wrap">
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Transform the image into a dotted cartoon style.')">🎨 Cartoon</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Convert it to black and white.')">⚫ B&amp;W</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Add cinematic lighting with warm orange tones and film grain.')">🎬 Cinematic</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Transform into anime style illustration.')">✨ Anime</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Apply oil painting effect with visible brush strokes.')">🖌️ Oil Paint</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Enhance and upscale with more detail and clarity.')">🔍 Enhance</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Make it look like a watercolor painting with soft edges.')">💧 Watercolor</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Add dramatic sunset sky and warm lighting.')">🌅 Sunset</button>
+                    </div>
+                </div>
+            </div>
+            <!-- Right: Controls & Output -->
+            <div class="app-main-right">
+                <div class="panel-card">
+                    <div class="panel-card-title">Edit Instruction</div>
+                    <div class="panel-card-body">
+                        <label class="modern-label" for="custom-prompt-input">Prompt</label>
+                        <textarea id="custom-prompt-input" class="modern-textarea" rows="3" placeholder="e.g., transform into anime, upscale, change lighting..."></textarea>
+                    </div>
+                </div>
+                <div style="padding:12px 20px;">
+                    <button id="custom-run-btn" class="btn-run">
+                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 23c-3.6 0-8-2.69-8-7.5 0-3.5 3-6.5 4.5-8 .27-.27.75-.08.75.28v2.44c0 .42.5.63.72.28C12.28 7.5 13 3 13 1c0-.42.48-.64.8-.35C18 4.5 20 9 20 12c0 5.5-3.5 11-8 11z"/></svg>
+                        <span id="run-btn-label">Edit Image</span>
+                    </button>
+                </div>
+                <div class="output-frame" style="flex:1">
+                    <div class="out-title">
+                        <span>Output</span>
+                        <span id="dl-btn-output" class="out-download-btn" title="Download">
+                            {DOWNLOAD_SVG} Save
+                        </span>
+                    </div>
+                    <div class="out-body" id="output-image-container">
+                        <div class="modern-loader" id="output-loader">
+                            <div class="loader-spinner"></div>
+                            <div class="loader-text">Processing image…</div>
+                            <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
+                        </div>
+                        <div class="out-placeholder" id="output-placeholder">Result will appear here</div>
+                    </div>
+                </div>
+                <div class="settings-group">
+                    <div class="settings-group-title">Advanced Settings</div>
+                    <div class="settings-group-body">
+                        <div class="slider-row">
+                            <label>Seed</label>
+                            <input type="range" id="custom-seed" min="0" max="2147483647" step="1" value="0">
+                            <span class="slider-val" id="custom-seed-val">0</span>
+                        </div>
+                        <div class="checkbox-row">
+                            <input type="checkbox" id="custom-randomize" checked>
+                            <label for="custom-randomize">Randomize seed</label>
+                        </div>
+                        <div class="slider-row">
+                            <label>Guidance</label>
+                            <input type="range" id="custom-guidance" min="1" max="10" step="0.1" value="1.0">
+                            <span class="slider-val" id="custom-guidance-val">1.0</span>
+                        </div>
+                        <div class="slider-row">
+                            <label>Steps</label>
+                            <input type="range" id="custom-steps" min="1" max="50" step="1" value="4">
+                            <span class="slider-val" id="custom-steps-val">4</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- ══ Note ══ -->
+        <div class="exp-note">
+            Experimental Space for <a href="https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.1" target="_blank">FireRed-Image-Edit-1.1</a>
+            · Open on <a href="https://github.com/PRITHIVSAKTHIUR/FireRed-Image-Edit-1.0-Fast" target="_blank">GitHub</a>
+        </div>
+        <!-- ══ Status Bar ══ -->
+        <div class="app-statusbar">
+            <div class="sb-section" id="sb-image-count">No images uploaded</div>
+            <div class="sb-section sb-fixed">Ready</div>
+        </div>
+    </div>
+    """)
+    run_btn = gr.Button("Run", elem_id="gradio-run-btn")
+    demo.load(fn=None, js=gallery_js)
+    demo.load(fn=None, js=wire_outputs_js)
+    run_btn.click(
         fn=infer,
+        inputs=[hidden_images_b64, prompt, seed, randomize_seed, guidance_scale, steps],
+        outputs=[result, seed],
+        js=r"""(imgs, p, s, rs, gs, st) => {
+            const images = window.__uploadedImages || [];
+            const b64Array = images.map(img => img.b64);
+            const imgsJson = JSON.stringify(b64Array);
+            const promptEl = document.getElementById('custom-prompt-input');
+            const promptVal = promptEl ? promptEl.value : p;
+            return [imgsJson, promptVal, s, rs, gs, st];
+        }""",
     )
 if __name__ == "__main__":
+    demo.queue(max_size=30).launch(
+        css=css, mcp_server=True, ssr_mode=False, show_error=True
+    )