Update app.py

app.py

@@ -254,63 +254,195 @@ footer { visibility: hidden; }
 
 title = """<h1 align="center">Diffusers Image Outpaint Lightning</h1>
 """
+
 with gr.Blocks(css=css) as demo:
-    gr.HTML(title)
-    with gr.Row():
-        with gr.Column():
-            input_image = gr.Image(type="pil", label="Input Image")
-            prompt_input = gr.Textbox(label="Prompt (Optional)")
-            run_button = gr.Button("Generate")
-
-            target_ratio       = gr.Radio(["9:16","16:9","1:1","Custom"], value="9:16", label="Expected Ratio")
-            alignment_dropdown = gr.Dropdown(["Middle","Left","Right","Top","Bottom"], value="Middle", label="Alignment")
-
-            with gr.Accordion("Advanced settings", open=False) as adv:
-                width_slider  = gr.Slider(720,1536,step=8, value=720, label="Target Width")
-                height_slider = gr.Slider(720,1536,step=8, value=1280, label="Target Height")
-                num_steps     = gr.Slider(4,12,step=1, value=8, label="Steps")
-                overlap_pct   = gr.Slider(1,50,step=1, value=10, label="Mask overlap (%)")
-                overlap_top   = gr.Checkbox(label="Overlap Top", value=True)
-                overlap_right = gr.Checkbox(label="Overlap Right", value=True)
-                overlap_left  = gr.Checkbox(label="Overlap Left", value=True)
-                overlap_bottom= gr.Checkbox(label="Overlap Bottom", value=True)
-                resize_opt    = gr.Radio(["Full","50%","33%","25%","Custom"], value="Full", label="Resize input image")
-                custom_resize = gr.Slider(1,100,step=1, value=50, visible=False, label="Custom resize (%)")
-                preview_btn   = gr.Button("Preview alignment and mask")
-
-            gr.Examples(
-                examples=[
-                    ["./examples/example_1.webp",1280,720,"Middle"],
-                    ["./examples/example_2.jpg",1440,810,"Left"],
-                    ["./examples/example_3.jpg",1024,1024,"Top"],
-                    ["./examples/example_3.jpg",1024,1024,"Bottom"]
-                ],
-                inputs=[input_image,width_slider,height_slider,alignment_dropdown]
-            )
-
-        with gr.Column():
-            result = ImageSlider(label="Comparison", interactive=False, type="pil", slider_color="pink")
-            history_gallery = gr.Gallery(label="History", columns=6, object_fit="contain")
-            preview_image   = gr.Image(label="Preview")
-
-    # Callbacks
-    run_button.click(clear_result, None, result)
-    run_button.click(
-        infer,
-        inputs=[ input_image, width_slider, height_slider, overlap_pct, num_steps,
-                 resize_opt, custom_resize, prompt_input, alignment_dropdown,
-                 overlap_left, overlap_right, overlap_top, overlap_bottom],
-        outputs=result
-    ).then(update_history, inputs=[result, history_gallery], outputs=history_gallery)
-
-    target_ratio.change(preload_presets, [target_ratio, width_slider, height_slider], [width_slider, height_slider, adv])
-    width_slider.change(select_the_right_preset, [width_slider, height_slider], target_ratio)
-    height_slider.change(select_the_right_preset, [width_slider, height_slider], target_ratio)
-    resize_opt.change(toggle_custom_resize_slider, resize_opt, custom_resize)
-    preview_btn.click(preview_image_and_mask,
-                      [input_image, width_slider, height_slider, overlap_pct, resize_opt, custom_resize, alignment_dropdown,
-                       overlap_left, overlap_right, overlap_top, overlap_bottom],
-                      preview_image)
-
-
-demo.queue(max_size=20).launch(share=False, ssr_mode=False, show_error=True)
+    with gr.Column():
+        gr.HTML(title)
+
+        with gr.Row():
+            with gr.Column():
+                input_image = gr.Image(
+                    type="pil",
+                    label="Input Image"
+                )
+
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        prompt_input = gr.Textbox(label="Prompt (Optional)")
+                    with gr.Column(scale=1):
+                        run_button = gr.Button("Generate")
+
+                with gr.Row():
+                    target_ratio = gr.Radio(
+                        label="Expected Ratio",
+                        choices=["9:16", "16:9", "1:1", "Custom"],
+                        value="9:16",
+                        scale=2
+                    )
+                    
+                    alignment_dropdown = gr.Dropdown(
+                        choices=["Middle", "Left", "Right", "Top", "Bottom"],
+                        value="Middle",
+                        label="Alignment"
+                    )
+
+                with gr.Accordion(label="Advanced settings", open=False) as settings_panel:
+                    with gr.Column():
+                        with gr.Row():
+                            width_slider = gr.Slider(
+                                label="Target Width",
+                                minimum=720,
+                                maximum=1536,
+                                step=8,
+                                value=720,  # Set a default value
+                            )
+                            height_slider = gr.Slider(
+                                label="Target Height",
+                                minimum=720,
+                                maximum=1536,
+                                step=8,
+                                value=1280,  # Set a default value
+                            )
+                        
+                        num_inference_steps = gr.Slider(label="Steps", minimum=4, maximum=12, step=1, value=8)
+                        with gr.Group():
+                            overlap_percentage = gr.Slider(
+                                label="Mask overlap (%)",
+                                minimum=1,
+                                maximum=50,
+                                value=10,
+                                step=1
+                            )
+                            with gr.Row():
+                                overlap_top = gr.Checkbox(label="Overlap Top", value=True)
+                                overlap_right = gr.Checkbox(label="Overlap Right", value=True)
+                            with gr.Row():
+                                overlap_left = gr.Checkbox(label="Overlap Left", value=True)
+                                overlap_bottom = gr.Checkbox(label="Overlap Bottom", value=True)
+                        with gr.Row():
+                            resize_option = gr.Radio(
+                                label="Resize input image",
+                                choices=["Full", "50%", "33%", "25%", "Custom"],
+                                value="Full"
+                            )
+                            custom_resize_percentage = gr.Slider(
+                                label="Custom resize (%)",
+                                minimum=1,
+                                maximum=100,
+                                step=1,
+                                value=50,
+                                visible=False
+                            )
+                        
+                        with gr.Column():
+                            preview_button = gr.Button("Preview alignment and mask")
+                            
+                            
+                gr.Examples(
+                    examples=[
+                        ["./examples/example_1.webp", 1280, 720, "Middle"],
+                        ["./examples/example_2.jpg", 1440, 810, "Left"],
+                        ["./examples/example_3.jpg", 1024, 1024, "Top"],
+                        ["./examples/example_3.jpg", 1024, 1024, "Bottom"],
+                    ],
+                    inputs=[input_image, width_slider, height_slider, alignment_dropdown],
+                )
+
+                
+
+            with gr.Column():
+                result = ImageSlider(label="Generated Image", interactive=False, type="pil", slider_color="pink")
+                use_as_input_button = gr.Button("Use as Input Image", visible=False)
+
+                history_gallery = gr.Gallery(label="History", columns=6, object_fit="contain", interactive=False)
+                preview_image = gr.Image(label="Preview")
+
+        
+
+    def use_output_as_input(output_image):
+        """Sets the generated output as the new input image."""
+        return gr.update(value=output_image[1])
+
+    use_as_input_button.click(
+        fn=use_output_as_input,
+        inputs=[result],
+        outputs=[input_image]
+    )
+    
+    target_ratio.change(
+        fn=preload_presets,
+        inputs=[target_ratio, width_slider, height_slider],
+        outputs=[width_slider, height_slider, settings_panel],
+        queue=False
+    )
+
+    width_slider.change(
+        fn=select_the_right_preset,
+        inputs=[width_slider, height_slider],
+        outputs=[target_ratio],
+        queue=False
+    )
+
+    height_slider.change(
+        fn=select_the_right_preset,
+        inputs=[width_slider, height_slider],
+        outputs=[target_ratio],
+        queue=False
+    )
+
+    resize_option.change(
+        fn=toggle_custom_resize_slider,
+        inputs=[resize_option],
+        outputs=[custom_resize_percentage],
+        queue=False
+    )
+    
+    run_button.click(  # Clear the result
+        fn=clear_result,
+        inputs=None,
+        outputs=result,
+    ).then(  # Generate the new image
+        fn=infer,
+        inputs=[input_image, width_slider, height_slider, overlap_percentage, num_inference_steps,
+                resize_option, custom_resize_percentage, prompt_input, alignment_dropdown,
+                overlap_left, overlap_right, overlap_top, overlap_bottom],
+        outputs=result,
+    ).then(  # Update the history gallery
+        fn=lambda x, history: update_history(x[1], history),
+        inputs=[result, history_gallery],
+        outputs=history_gallery,
+    ).then(  # Show the "Use as Input Image" button
+        fn=lambda: gr.update(visible=True),
+        inputs=None,
+        outputs=use_as_input_button,
+    )
+
+    prompt_input.submit(  # Clear the result
+        fn=clear_result,
+        inputs=None,
+        outputs=result,
+    ).then(  # Generate the new image
+        fn=infer,
+        inputs=[input_image, width_slider, height_slider, overlap_percentage, num_inference_steps,
+                resize_option, custom_resize_percentage, prompt_input, alignment_dropdown,
+                overlap_left, overlap_right, overlap_top, overlap_bottom],
+        outputs=result,
+    ).then(  # Update the history gallery
+        fn=lambda x, history: update_history(x[1], history),
+        inputs=[result, history_gallery],
+        outputs=history_gallery,
+    ).then(  # Show the "Use as Input Image" button
+        fn=lambda: gr.update(visible=True),
+        inputs=None,
+        outputs=use_as_input_button,
+    )
+
+    preview_button.click(
+        fn=preview_image_and_mask,
+        inputs=[input_image, width_slider, height_slider, overlap_percentage, resize_option, custom_resize_percentage, alignment_dropdown,
+                overlap_left, overlap_right, overlap_top, overlap_bottom],
+        outputs=preview_image,
+        queue=False
+    )
+
+demo.queue(max_size=20).launch(share=False, show_error=True)