Update app.py (#3)

- Update app.py (9707abcf7abe77fff07247d133edb57e1c6062af)


Co-authored-by: Linoy Tsaban <linoyts@users.noreply.huggingface.co>

app.py

@@ -80,7 +80,6 @@ def FlowEditRun(
     n_min: int,
     n_avg: int,
     seed: int,
-
     ):
 
     if not len(src_prompt):
@@ -183,18 +182,13 @@ intro = """
     <a href="https://matankleiner.github.io/flowedit/">[Project Page]</a>&nbsp;|&nbsp;
     <a href="https://github.com/fallenshock/FlowEdit">[Code]</a>
 </h3>
-🚧 Early Version 🚧 Gradio demo for FlowEdit: Inversion-Free Text-Based Editing Using Pre-Trained Flow Models. See our project page for more details.
-
-<br>
-<br>Edit your image using Flow models! upload an image, add a description of it, and specify the edits you want to make.
+<br> 🎨 Edit your image using Flow models! upload an image, add a description of it, and specify the edits you want to make
 <h3>Notes:</h3>
-
 <ol>
   <li>We use FLUX.1 dev and SD3 for the demo. The models are large and may take a while to load.</li>
   <li>We recommend 1024x1024 images for the best results. If the input images are too large, there may be out-of-memory errors.</li>
   <li>Default hyperparameters for each model used in the paper are provided as examples. Feel free to experiment with them as well.</li>
 </ol>  
-
 """
 
 # article = """
@@ -210,43 +204,44 @@ intro = """
 # ```
 # """
 
+css="""
+#col-container {
+    margin: 0 auto;
+    max-width: 960px;
+}
+"""
+with gr.Blocks(css=css) as demo:
 
-with gr.Blocks() as demo:
-    
+    with gr.Column(elem_id="col-container"):
 
-    gr.HTML(intro)
+        gr.HTML(intro)
     
-    # with gr.Row():
-    #     gr.LoginButton(value="Login to HF (For SD3 and FLUX access)", variant="primary")
-
-    with gr.Row(equal_height=True):
-        image_src = gr.Image(type="filepath", label="Source Image", value="inputs/cat.png",)
-        image_tar = gr.Image(label="Output", type="pil", show_label=True, format="png",),
-
-    with gr.Row():
-        src_prompt = gr.Textbox(lines=2, label="Source Prompt", value="a cat sitting in the grass")
-
-    with gr.Row():
-        tar_prompt = gr.Textbox(lines=2, label="Target Prompt", value="a puppy sitting in the grass")
-
-    with gr.Row():
-        model_type = gr.Dropdown(["SD3", "FLUX"], label="Model Type", value="SD3")
-        T_steps = gr.Number(value=50, label="Total Steps", minimum=1, maximum=50)
-        n_max = gr.Number(value=33, label="n_max (control the strength of the edit)")
-
-    with gr.Row():
-        src_guidance_scale = gr.Slider(minimum=1.0, maximum=30.0, value=3.5, label="src_guidance_scale")
-        tar_guidance_scale = gr.Slider(minimum=1.0, maximum=30.0, value=13.5, label="tar_guidance_scale")
+        # with gr.Row():
+        #     gr.LoginButton(value="Login to HF (For SD3 and FLUX access)", variant="primary")
     
-    with gr.Row():
-        submit_button = gr.Button("Run FlowEdit", variant="primary")
-
-
-    with gr.Accordion(label="Advanced Settings", open=False):
-        # additional inputs
-        n_min = gr.Number(value=0, label="n_min (for improved style edits)")
-        n_avg = gr.Number(value=1, label="n_avg (improve structure at the cost of runtime)", minimum=1)
-        seed = gr.Number(value=42, label="seed")
+        with gr.Row():
+            with gr.Column():
+                image_src = gr.Image(type="filepath", label="Source Image", value="inputs/cat.png",)
+                src_prompt = gr.Textbox(lines=2, label="Source Prompt", value="a cat sitting in the grass")
+                tar_prompt = gr.Textbox(lines=2, label="Target Prompt", value="a puppy sitting in the grass")
+                submit_button = gr.Button("Run FlowEdit", variant="primary")
+                
+                with gr.Row():
+                    model_type = gr.Dropdown(["SD3", "FLUX"], label="Model Type", value="SD3")
+                    T_steps = gr.Slider(value=50, label="Total Steps", minimum=1, maximum=50)
+                    n_max = gr.Slider(minimum=1, maximum=50, value=33,  label="n_max", info="control the strength of the edit")
+                    src_guidance_scale = gr.Slider(minimum=1.0, maximum=30.0, value=3.5, label="src_guidance_scale")
+                    tar_guidance_scale = gr.Slider(minimum=1.0, maximum=30.0, value=13.5, label="tar_guidance_scale")
+            
+                
+
+            with gr.Column():
+                image_tar = gr.Image(label="Output", type="pil", show_label=True, format="png",)
+        with gr.Accordion(label="Advanced Settings", open=False):
+            # additional inputs
+            n_min = gr.Number(value=0, label="n_min (for improved style edits)")
+            n_avg = gr.Number(value=1, label="n_avg (improve structure at the cost of runtime)", minimum=1)
+            seed = gr.Number(value=42, label="seed")
 
 
 
@@ -267,7 +262,7 @@ with gr.Blocks() as demo:
                         seed,
                         ],
                         outputs=[
-                        image_tar[0],
+                        image_tar,
                         ],
                         )
     
@@ -275,8 +270,8 @@ with gr.Blocks() as demo:
     gr.Examples(
         label="Examples",
         examples=get_examples(),
-        inputs=[image_src, model_type, T_steps, src_guidance_scale, tar_guidance_scale, n_max, src_prompt, tar_prompt, n_min, n_avg, seed, image_tar[0]],
-        outputs=[image_tar[0]],
+        inputs=[image_src, model_type, T_steps, src_guidance_scale, tar_guidance_scale, n_max, src_prompt, tar_prompt, n_min, n_avg, seed, image_tar],
+        outputs=[image_tar],
     )
 
     model_type.input(fn=on_model_change, inputs=[model_type], outputs=[T_steps, src_guidance_scale, tar_guidance_scale, n_max])
@@ -284,4 +279,4 @@ with gr.Blocks() as demo:
 
     # gr.HTML(article)
 demo.queue()
-demo.launch( )
+demo.launch( )