new layout

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 import numpy as np
-import spaces
+# import spaces
 import torch
 import random
 from PIL import Image
@@ -12,7 +12,7 @@ MAX_SEED = np.iinfo(np.int32).max
 
 pipe = FluxKontextPipeline.from_pretrained("fuliucansheng/FLUX.1-Kontext-dev-diffusers", torch_dtype=torch.bfloat16).to("cuda")
 
-@spaces.GPU
+# @spaces.GPU
 def infer(input_image, prompt, seed=42, randomize_seed=False, guidance_scale=2.5, steps=28, progress=gr.Progress(track_tqdm=True)):
     """
     Perform image editing using the FLUX.1 Kontext pipeline.
@@ -76,7 +76,7 @@ def infer(input_image, prompt, seed=42, randomize_seed=False, guidance_scale=2.5
         ).images[0]
     return image, seed, gr.Button(visible=True)
 
-@spaces.GPU
+# @spaces.GPU
 def infer_example(input_image, prompt):
     image, seed, _ = infer(input_image, prompt)
     return image, seed
@@ -84,7 +84,13 @@ def infer_example(input_image, prompt):
 css="""
 #col-container {
     margin: 0 auto;
-    max-width: 960px;
+    max-width: 90vw;
+}
+.input-image img {
+    height: 70vh; !Important
+}
+#row {
+    min-height: 35vh; !Important
 }
 """
 
@@ -94,50 +100,53 @@ with gr.Blocks(css=css) as demo:
         gr.Markdown(f"""# FLUX.1 Kontext [dev]
 Image editing and manipulation model guidance-distilled from FLUX.1 Kontext [pro], [[blog]](https://bfl.ai/announcements/flux-1-kontext-dev) [[model]](https://huggingface.co/black-forest-labs/FLUX.1-Kontext-dev)
         """)
-        with gr.Row():
+        with gr.Row(equal_height=True):
             with gr.Column():
-                input_image = gr.Image(label="Upload the image for editing", type="pil")
-                with gr.Row():
-                    prompt = gr.Text(
-                        label="Prompt",
-                        show_label=False,
-                        max_lines=1,
-                        placeholder="Enter your prompt for editing (e.g., 'Remove glasses', 'Add a hat')",
-                        container=False,
-                    )
-                    run_button = gr.Button("Run", scale=0)
-                with gr.Accordion("Advanced Settings", open=True):
-                    
-                    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,
-                        maximum=10,
-                        step=0.1,
-                        value=2.5,
-                    )       
-                    
-                    steps = gr.Slider(
-                        label="Steps",
-                        minimum=1,
-                        maximum=30,
-                        value=28,
-                        step=1
-                    )
+                input_image = gr.Image(label="Upload the image for editing", type="pil", elem_classes="input-image", elem_id="row")
                     
             with gr.Column():
-                result = gr.Image(label="Result", show_label=False, interactive=False)
+                result = gr.Image(label="Result", show_label=False, interactive=False, elem_classes="input-image", elem_id="row")
                 reuse_button = gr.Button("Reuse this image", visible=False)
         
+        with gr.Row():
+                prompt = gr.Text(
+                    label="Prompt",
+                    show_label=False,
+                    max_lines=1,
+                    placeholder="Enter your prompt for editing (e.g., 'Remove glasses', 'Add a hat')",
+                    container=False,
+                    scale=2
+                )
+                run_button = gr.Button("Run", scale=1)
+        
+        with gr.Row():
+            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,
+                    maximum=10,
+                    step=0.1,
+                    value=2.5,
+                )       
+                
+                steps = gr.Slider(
+                    label="Steps",
+                    minimum=1,
+                    maximum=40,
+                    value=28,
+                    step=1
+                )
             
         examples = gr.Examples(
             examples=[
@@ -148,7 +157,7 @@ Image editing and manipulation model guidance-distilled from FLUX.1 Kontext [pro
             inputs=[input_image, prompt],
             outputs=[result, seed],
             fn=infer_example,
-            cache_examples="False"
+            cache_examples=False
         )
             
     gr.on(