Refactor Gradio UI to match target React app design

.gitignore

@@ -0,0 +1,4 @@
+target-app/
+__pycache__/
+*.pyc
+.DS_Store

app.py

@@ -20,14 +20,15 @@ device = "cuda" if torch.cuda.is_available() else "cpu"
 MAX_SEED = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
 
+
 def remote_text_encoder(prompts):
     response = requests.post(
         "https://remote-text-encoder-flux-2.huggingface.co/predict",
         json={"prompt": prompts},
         headers={
             "Authorization": f"Bearer {os.environ['HF_TOKEN']}",
-            "Content-Type": "application/json"
-        }
+            "Content-Type": "application/json",
+        },
     )
 
     assert response.status_code == 200, f"{response.status_code=}"
@@ -36,20 +37,16 @@ def remote_text_encoder(prompts):
 
     return prompt_embeds
 
+
 # Load model
 repo_id = "black-forest-labs/FLUX.2-dev"
 
 dit = Flux2Transformer2DModel.from_pretrained(
-    repo_id,
-    subfolder="transformer",
-    torch_dtype=torch.bfloat16
+    repo_id, subfolder="transformer", torch_dtype=torch.bfloat16
 )
 
 pipe = Flux2Pipeline.from_pretrained(
-    repo_id,
-    text_encoder=None,
-    transformer=dit,
-    torch_dtype=torch.bfloat16
+    repo_id, text_encoder=None, transformer=dit, torch_dtype=torch.bfloat16
 )
 pipe.to("cuda")
 
@@ -58,37 +55,57 @@ pipe.transformer.set_attention_backend("_flash_3_hub")
 optimize_pipeline_(
     pipe,
     image=[Image.new("RGB", (1024, 1024))],
-    prompt_embeds = remote_text_encoder("prompt").to("cuda"),
+    prompt_embeds=remote_text_encoder("prompt").to("cuda"),
     guidance_scale=2.5,
     width=1024,
     height=1024,
-    num_inference_steps=1
+    num_inference_steps=1,
 )
 
 
-def get_duration(prompt, input_images=None, seed=42, randomize_seed=False, width=1024, height=1024, num_inference_steps=50, guidance_scale=2.5, progress=gr.Progress(track_tqdm=True)):
+def get_duration(
+    prompt,
+    input_images=None,
+    seed=42,
+    randomize_seed=False,
+    width=1024,
+    height=1024,
+    num_inference_steps=50,
+    guidance_scale=2.5,
+    progress=gr.Progress(track_tqdm=True),
+):
     num_images = 0 if input_images is None else len(input_images)
     step_duration = 1 + 0.7 * num_images
     return num_inference_steps * step_duration + 10
 
 
 @spaces.GPU(duration=get_duration)
-def infer(prompt, input_images=None, seed=42, randomize_seed=False, width=1024, height=1024, num_inference_steps=50, guidance_scale=2.5, progress=gr.Progress(track_tqdm=True)):
-    
+def infer(
+    prompt,
+    input_images=None,
+    seed=42,
+    randomize_seed=False,
+    width=1024,
+    height=1024,
+    num_inference_steps=50,
+    guidance_scale=2.5,
+    progress=gr.Progress(track_tqdm=True),
+):
+
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
-    
+
     # Get prompt embeddings from remote text encoder
     progress(0.1, desc="Encoding prompt...")
     prompt_embeds = remote_text_encoder(prompt).to("cuda")
-    
+
     # Prepare image list (convert None or empty gallery to None)
     image_list = None
     if input_images is not None and len(input_images) > 0:
         image_list = []
         for item in input_images:
             image_list.append(item[0])
-    
+
     # Generate image
     progress(0.3, desc="Generating image...")
     generator = torch.Generator(device=device).manual_seed(seed)
@@ -101,72 +118,219 @@ def infer(prompt, input_images=None, seed=42, randomize_seed=False, width=1024,
         guidance_scale=guidance_scale,
         generator=generator,
     ).images[0]
-    
+
     return image, seed
 
-examples = [
-    ["Create a vase on a table in living room, the color of the vase is a gradient of color, starting with #02eb3c color and finishing with #edfa3c. The flowers inside the vase have the color #ff0088"],
-    ["Photorealistic infographic showing the complete Berlin TV Tower (Fernsehturm) from ground base to antenna tip, full vertical view with entire structure visible including concrete shaft, metallic sphere, and antenna spire. Slight upward perspective angle looking up toward the iconic sphere, perfectly centered on clean white background. Left side labels with thin horizontal connector lines: the text '368m' in extra large bold dark grey numerals (#2D3748) positioned at exactly the antenna tip with 'TOTAL HEIGHT' in small caps below. The text '207m' in extra large bold with 'TELECAFÉ' in small caps below, with connector line touching the sphere precisely at the window level. Right side label with horizontal connector line touching the sphere's equator: the text '32m' in extra large bold dark grey numerals with 'SPHERE DIAMETER' in small caps below. Bottom section arranged in three balanced columns: Left - Large text '986' in extra bold dark grey with 'STEPS' in caps below. Center - 'BERLIN TV TOWER' in bold caps with 'FERNSEHTURM' in lighter weight below. Right - 'INAUGURATED' in bold caps with 'OCTOBER 3, 1969' below. All typography in modern sans-serif font (such as Inter or Helvetica), color #2D3748, clean minimal technical diagram style. Horizontal connector lines are thin, precise, and clearly visible, touching the tower structure at exact corresponding measurement points. Professional architectural elevation drawing aesthetic with dynamic low angle perspective creating sense of height and grandeur, poster-ready infographic design with perfect visual hierarchy."],
-    ["Soaking wet capybara taking shelter under a banana leaf in the rainy jungle, close up photo"],
-    ["A kawaii die-cut sticker of a chubby orange cat, featuring big sparkly eyes and a happy smile with paws raised in greeting and a heart-shaped pink nose. The design should have smooth rounded lines with black outlines and soft gradient shading with pink cheeks."],
-]
 
-examples_images = [
-    # ["Replace the top of the person from image 1 with the one from image 2", ["person1.webp", "woman2.webp"]],
-    ["The person from image 1 is petting the cat from image 2, the bird from image 3 is next to them", ["woman1.webp", "cat_window.webp", "bird.webp"]]
-]
+# --- UI Configuration ---
 
-css="""
-#col-container {
-    margin: 0 auto;
-    max-width: 620px;
+css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+
+body, .gradio-container {
+    background-color: #000000 !important;
+    color: #ffffff !important;
+    font-family: 'Inter', sans-serif !important;
+    margin: 0;
+    padding: 0;
+    --color-background-primary: #000000;
+    --color-background-secondary: #050505;
+    --color-border-primary: #171717;
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #a3a3a3;
+}
+
+/* Layout */
+#main-container {
+    height: 100vh !important;
+    max-height: 100vh !important;
+    gap: 0 !important;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+}
+
+#left-sidebar {
+    background-color: #050505;
+    border-right: 1px solid #171717;
+    width: 280px !important;
+    max-width: 280px !important;
+    flex: none !important;
+    padding: 0 !important;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#right-sidebar {
+    background-color: #050505;
+    border-left: 1px solid #171717;
+    width: 320px !important;
+    max-width: 320px !important;
+    flex: none !important;
+    padding: 0 !important;
+    height: 100%;
+    overflow-y: auto;
+}
+
+#center-canvas {
+    background-color: #090909;
+    flex-grow: 1 !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    background-image: radial-gradient(#151515 1px, transparent 1px);
+    background-size: 20px 20px;
+    height: 100%;
+    position: relative;
+}
+
+/* Components */
+#generate-btn {
+    background: #ffffff !important;
+    color: #000000 !important;
+    border-radius: 6px !important;
+    font-weight: 600 !important;
+    text-transform: uppercase;
+    font-size: 11px !important;
+    border: none !important;
+    margin-top: 10px;
+}
+
+#prompt-input textarea {
+    background-color: #000000 !important;
+    border: 1px solid #262626 !important;
+    color: white !important;
+    border-radius: 8px !important;
+}
+
+#prompt-input span {
+    display: none; /* Hide default label if needed, or style it */
+}
+
+/* Accordions */
+.accordion {
+    background: transparent !important;
+    border: none !important;
+    border-bottom: 1px solid #171717 !important;
+}
+
+.accordion-label {
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    text-transform: uppercase;
+    color: #a3a3a3 !important;
+}
+
+/* Sliders */
+input[type=range] {
+    accent-color: white !important;
+}
+
+/* Gallery in Sidebar */
+#history-gallery {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 10px;
+}
+
+#history-gallery .grid-wrap {
+    grid-template-columns: 1fr !important; /* Force list view */
+}
+
+/* Main Image */
+#main-image {
+    background: transparent !important;
+    border: 1px solid #171717;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Scrollbars */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #000000; 
+}
+::-webkit-scrollbar-thumb {
+    background: #333; 
+    border-radius: 3px;
 }
 """
 
-with gr.Blocks() as demo:
-    
-    with gr.Column(elem_id="col-container"):
-        gr.Markdown(f"""# FLUX.2 [dev]
-FLUX.2 [dev] is a 32B model rectified flow capable of generating, editing and combining images based on text instructions model [[model](https://huggingface.co/black-forest-labs/FLUX.2-dev)], [[blog](https://bfl.ai/blog/flux-2)]
-        """)
-
-        with gr.Accordion("Input image(s) (optional)", open=False):
-            input_images = gr.Gallery(
-                label="Input Image(s)",
-                type="pil",
-                columns=3,
-                rows=1,
-            )
-        
-        with gr.Row():
-            
-            prompt = gr.Text(
-                label="Prompt",
+header_html = """
+<div style="padding: 20px; border-bottom: 1px solid #171717;">
+    <h1 style="font-size: 18px; font-weight: 600; margin: 0; color: white;">FLUX.2 [dev]</h1>
+    <p style="font-size: 12px; color: #666; margin: 5px 0 0 0;">High-fidelity generation</p>
+</div>
+"""
+
+user_footer_html = """
+<div style="padding: 15px 20px; border-top: 1px solid #171717; margin-top: auto;">
+    <div style="display: flex; align-items: center; gap: 10px;">
+        <div style="width: 24px; height: 24px; border-radius: 50%; background: #333;"></div>
+        <span style="font-size: 13px; color: #999;">User</span>
+    </div>
+</div>
+"""
+
+controls_header_html = """
+<div style="padding: 20px 20px 10px 20px;">
+    <h2 style="font-size: 11px; font-weight: 600; text-transform: uppercase; color: #666; margin: 0;">Configuration</h2>
+</div>
+"""
+
+with gr.Blocks(css=css, theme=None, title="FLUX.2 [dev]") as demo:
+    with gr.Row(elem_id="main-container", variant="compact"):
+        # --- Left Sidebar ---
+        with gr.Column(elem_id="left-sidebar", min_width=280):
+            gr.HTML(header_html)
+            # Placeholder for history - using a gallery
+            history_gallery = gr.Gallery(
+                elem_id="history-gallery",
+                columns=1,
+                allow_preview=False,
+                interactive=False,
+                label="History",
                 show_label=False,
-                max_lines=2,
-                placeholder="Enter your prompt",
-                container=False,
-                scale=3
             )
-            
-            run_button = gr.Button("Run", scale=1)
-        
-        result = gr.Image(label="Result", show_label=False)
-        
-        with gr.Accordion("Advanced Settings", open=False):
-            
-            seed = gr.Slider(
-                label="Seed",
-                minimum=0,
-                maximum=MAX_SEED,
-                step=1,
-                value=0,
+            gr.HTML(user_footer_html)
+
+        # --- Center Canvas ---
+        with gr.Column(elem_id="center-canvas"):
+            with gr.Row(elem_id="canvas-toolbar"):
+                gr.Markdown("Canvas", elem_id="canvas-info")
+
+            result_image = gr.Image(
+                elem_id="main-image", interactive=False, show_label=False
+            )
+
+        # --- Right Sidebar ---
+        with gr.Column(elem_id="right-sidebar", min_width=320):
+            gr.HTML(controls_header_html)
+
+            # Prompt Section
+            prompt = gr.Textbox(
+                elem_id="prompt-input",
+                lines=4,
+                placeholder="Describe your imagination...",
+                label="Prompt",
+                show_label=True,
             )
-            
-            randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
-            
-            with gr.Row():
-                
+            run_button = gr.Button("Generate Image", elem_id="generate-btn")
+
+            # Settings
+            with gr.Accordion("Input Image", open=False, elem_classes="accordion"):
+                input_images = gr.Gallery(
+                    label="Input Image(s)", type="pil", columns=3, rows=1
+                )
+
+            with gr.Accordion("Model Settings", open=True, elem_classes="accordion"):
                 width = gr.Slider(
                     label="Width",
                     minimum=256,
@@ -174,7 +338,6 @@ FLUX.2 [dev] is a 32B model rectified flow capable of generating, editing and co
                     step=32,
                     value=1024,
                 )
-                
                 height = gr.Slider(
                     label="Height",
                     minimum=256,
@@ -182,48 +345,36 @@ FLUX.2 [dev] is a 32B model rectified flow capable of generating, editing and co
                     step=32,
                     value=1024,
                 )
-            
-            with gr.Row():
-                
+
+            with gr.Accordion(
+                "Advanced Settings", open=False, elem_classes="accordion"
+            ):
+                guidance_scale = gr.Slider(
+                    label="Guidance Scale", minimum=0.0, maximum=10.0, step=0.1, value=4
+                )
                 num_inference_steps = gr.Slider(
-                    label="Number of inference steps",
-                    minimum=1,
-                    maximum=100,
-                    step=1,
-                    value=30,
+                    label="Inference Steps", minimum=1, maximum=100, step=1, value=30
                 )
-                
-                guidance_scale = gr.Slider(
-                    label="Guidance scale",
-                    minimum=0.0,
-                    maximum=10.0,
-                    step=0.1,
-                    value=4,
+                seed = gr.Slider(
+                    label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0
                 )
-        
-        gr.Examples(
-            examples=examples,
-            fn=infer,
-            inputs=[prompt],
-            outputs=[result, seed],
-            cache_examples=True,
-            cache_mode="lazy"
-        )
-
-        gr.Examples(
-            examples=examples_images,
-            fn=infer,
-            inputs=[prompt, input_images],
-            outputs=[result, seed],
-            cache_examples=True,
-            cache_mode="lazy"
-        )
+                randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
 
+    # Wiring
     gr.on(
         triggers=[run_button.click, prompt.submit],
         fn=infer,
-        inputs=[prompt, input_images, seed, randomize_seed, width, height, num_inference_steps, guidance_scale],
-        outputs=[result, seed]
+        inputs=[
+            prompt,
+            input_images,
+            seed,
+            randomize_seed,
+            width,
+            height,
+            num_inference_steps,
+            guidance_scale,
+        ],
+        outputs=[result_image, seed],
     )
 
-demo.launch(css=css)
+demo.launch()