UI revamp suggestions (#1)

- UI revamp suggestions (257cb56ed8afce3a5843ae82f552d5e9a82da070)


Co-authored-by: Apolinário from multimodal AI art <[email protected]>

app.py

@@ -22,7 +22,7 @@ pipeline.set_adapters(["hyper-sd"], adapter_weights=[0.125])
 #  The function for our Gradio app  #
 #####################################
 @spaces.GPU(duration=120)
-def generate(prompt, input_image):
+def generate(prompt, input_image, progress=gr.Progress(track_tqdm=True)):
     """
     Runs the Flux Control pipeline for editing the given `input_image`
     with the specified `prompt`. The pipeline is on CPU by default.
@@ -42,32 +42,32 @@ def generate(prompt, input_image):
 
 
 def launch_app():
-    with gr.Blocks() as demo:
+    css = '''
+    .gradio-container{max-width: 1100px !important}
+    '''
+    with gr.Blocks(css=css) as demo:
         gr.Markdown(
             """
             # Flux Control Editing 🖌️
 
-            This demo uses the [FLUX.1-dev](https://huggingface.co/black-forest-labs/FLUX.1-dev) 
-            pipeline with an edit transformer from [Sayak Paul](https://huggingface.co/sayakpaul).
-            
-            **Acknowledgements**: 
-            - [Sayak Paul](https://huggingface.co/sayakpaul) for open-sourcing FLUX.1-dev-edit-v0 
-            - [black-forest-labs](https://huggingface.co/black-forest-labs) for FLUX.1-dev
+            Edit any image with the [FLUX.1-dev](https://huggingface.co/black-forest-labs/FLUX.1-dev) 
+            [Flux Control edit framework](https://github.com/sayakpaul/flux-image-editing) by [Sayak Paul](https://huggingface.co/sayakpaul).
             """
         )
-
         with gr.Row():
-            prompt = gr.Textbox(
-                label="Prompt",
-                placeholder="e.g. 'Edit a certain thing in the image'"
-            )
-            input_image = gr.Image(
-                label="Image",
-                type="pil",
-            )
-
-        generate_button = gr.Button("Generate")
-        output_image = gr.Image(label="Edited Image")
+            with gr.Column():
+                with gr.Group():
+                    input_image = gr.Image(
+                        label="Image you would like to edit",
+                        type="pil",
+                    )
+                    prompt = gr.Textbox(
+                        label="Your edit prompt",
+                        placeholder="e.g. 'Turn the color of the mushroom to blue'"
+                    )
+                    generate_button = gr.Button("Generate")
+        
+            output_image = gr.Image(label="Edited Image")
 
         # Connect button to function
         generate_button.click(
@@ -82,8 +82,17 @@ def launch_app():
                 ["Make the mushroom polka-dotted", "mushroom.jpg"],
             ],
             inputs=[prompt, input_image],
+            outputs=[output_image],
+            fn=generate,
+            cache_examples="lazy"
+        )
+        gr.Markdown(
+            """
+            **Acknowledgements**: 
+            - [Sayak Paul](https://huggingface.co/sayakpaul) for open-sourcing FLUX.1-dev-edit-v0 
+            - [black-forest-labs](https://huggingface.co/black-forest-labs) for FLUX.1-dev
+            """
         )
-
     return demo