Update app.py (#2)

- Update app.py (cb6a3673a5f67465153a5b5fd72087d8fef4e32c)

app.py

@@ -5,6 +5,7 @@ import torch
 import spaces
 import os
 import json
+import time
 
 from PIL import Image, ImageDraw
 import torch 
@@ -277,6 +278,36 @@ optimize_pipeline_(pipe, image=Image.new("RGB", (1024, 1024)), prompt="prompt")
 # --- UI Constants and Helpers ---
 MAX_SEED = np.iinfo(np.int32).max
 
+def clear_result():
+    """Clears the result image."""
+    return gr.update(value=None)
+
+def update_history(new_image, history):
+    """Updates the history gallery with the new image."""
+    time.sleep(0.5)  # Small delay to ensure image is ready
+    if history is None:
+        history = []
+    if new_image is not None:
+        # Convert to list if needed (Gradio sometimes returns tuples)
+        if not isinstance(history, list):
+            history = list(history) if history else []
+        history.insert(0, new_image)
+    # Keep only the last 20 images in history
+    history = history[:20]
+    return history
+
+def use_history_as_input(evt: gr.SelectData, history):
+    """Sets the selected history image as the new input image."""
+    if history and evt.index < len(history):
+        return gr.update(value=history[evt.index])
+    return gr.update()
+
+def use_output_as_input(output_image):
+    """Sets the generated output as the new input image."""
+    if output_image is not None:
+        return gr.update(value=output_image)
+    return gr.update()
+
 def preload_presets(target_ratio, ui_width, ui_height):
     """Updates the width and height sliders based on the selected aspect ratio."""
     if target_ratio == "9:16":
@@ -380,12 +411,16 @@ def infer(
     return result_image, seed
 
 # --- Examples and UI Layout ---
-examples = []
+# You can add examples here if you have sample images
+# examples = [
+#     ["path/to/example1.jpg", "extend the landscape", 1280, 720, "Middle"],
+#     ["path/to/example2.jpg", "add more sky", 1024, 1024, "Top"],
+# ]
 
 css = """
 #col-container {
     margin: 0 auto;
-    max-width: 1024px;
+    max-width: 1200px;
 }
 #edit_text{margin-top: -62px !important}
 .preview-container {
@@ -394,6 +429,9 @@ css = """
     padding: 10px;
     margin-top: 10px;
 }
+.gallery-container {
+    margin-top: 20px;
+}
 """
 
 with gr.Blocks(css=css) as demo:
@@ -408,6 +446,11 @@ with gr.Blocks(css=css) as demo:
         
         Extend your images beyond their original boundaries with intelligent outpainting. The model will generate new content that seamlessly blends with your original image.
         
+        **Tips:**
+        - Use the preview button to see which areas will be generated before running
+        - Click on any image in the history to use it as a new input
+        - Try different alignments to expand your image in specific directions
+        
         [Learn more](https://github.com/QwenLM/Qwen-Image) about the Qwen-Image series. 
         Try on [Qwen Chat](https://chat.qwen.ai/), or [download model](https://huggingface.co/Qwen/Qwen-Image-Edit) to run locally.
         """)
@@ -435,9 +478,9 @@ with gr.Blocks(css=css) as demo:
                         label="Alignment"
                     )
                 
-                run_button = gr.Button("Outpaint!", variant="primary")
+                run_button = gr.Button("🎨 Outpaint!", variant="primary")
                 
-                with gr.Accordion("Outpainting Settings", open=False) as settings_panel:
+                with gr.Accordion("⚙️ Outpainting Settings", open=False) as settings_panel:
                     with gr.Row():
                         width_slider = gr.Slider(
                             label="Target Width",
@@ -487,9 +530,9 @@ with gr.Blocks(css=css) as demo:
                             visible=False
                         )
                     
-                    preview_button = gr.Button("Preview alignment and mask", variant="secondary")
+                    preview_button = gr.Button("👁️ Preview alignment and mask", variant="secondary")
 
-                with gr.Accordion("Advanced Settings", open=False):
+                with gr.Accordion("🔧 Advanced Settings", open=False):
                     seed = gr.Slider(
                         label="Seed",
                         minimum=0,
@@ -525,10 +568,50 @@ with gr.Blocks(css=css) as demo:
             with gr.Column():
                 result = gr.Image(label="Result", type="pil")
                 
+                use_as_input_button = gr.Button("🔄 Use as Input Image", visible=False, variant="secondary")
+                
                 with gr.Column(visible=False) as preview_container:
                     preview_image = gr.Image(label="Preview (red area will be generated)", type="pil")
+                
+                gr.Markdown("---")
+                
+                with gr.Row():
+                    gr.Markdown("### 📜 History")
+                    clear_history_button = gr.Button("🗑️ Clear History", size="sm", variant="stop")
+                
+                history_gallery = gr.Gallery(
+                    label="Click any image to use as input", 
+                    columns=4, 
+                    rows=2,
+                    object_fit="contain", 
+                    height="auto",
+                    interactive=True,
+                    show_label=True,
+                    elem_classes=["gallery-container"]
+                )
 
     # Event handlers
+    use_as_input_button.click(
+        fn=use_output_as_input,
+        inputs=[result],
+        outputs=[input_image],
+        show_api=False
+    )
+    
+    history_gallery.select(
+        fn=use_history_as_input,
+        inputs=[history_gallery],
+        outputs=[input_image],
+        show_api=False
+    )
+    
+    clear_history_button.click(
+        fn=lambda: [],
+        inputs=None,
+        outputs=history_gallery,
+        show_api=False
+    )
+    
     target_ratio.change(
         fn=preload_presets,
         inputs=[target_ratio, width_slider, height_slider],
@@ -573,8 +656,13 @@ with gr.Blocks(css=css) as demo:
         queue=False,
     )
 
-    gr.on(
-        triggers=[run_button.click, prompt.submit],
+    # Main generation pipeline with result clearing, history update, and button visibility
+    run_button.click(
+        fn=clear_result,
+        inputs=None,
+        outputs=result,
+        show_api=False
+    ).then(
         fn=infer,
         inputs=[
             input_image,
@@ -596,6 +684,56 @@ with gr.Blocks(css=css) as demo:
             rewrite_prompt,
         ],
         outputs=[result, seed],
+    ).then(
+        fn=lambda: gr.update(visible=True),
+        inputs=None,
+        outputs=use_as_input_button,
+        show_api=False
+    ).then(
+        fn=update_history,
+        inputs=[result, history_gallery],
+        outputs=history_gallery,
+        show_api=False
+    )
+    
+    # Also trigger on prompt submit
+    prompt.submit(
+        fn=clear_result,
+        inputs=None,
+        outputs=result,
+        show_api=False
+    ).then(
+        fn=infer,
+        inputs=[
+            input_image,
+            prompt,
+            width_slider,
+            height_slider,
+            overlap_percentage,
+            resize_option,
+            custom_resize_percentage,
+            alignment_dropdown,
+            overlap_left,
+            overlap_right,
+            overlap_top,
+            overlap_bottom,
+            seed,
+            randomize_seed,
+            true_guidance_scale,
+            num_inference_steps,
+            rewrite_prompt,
+        ],
+        outputs=[result, seed],
+    ).then(
+        fn=lambda: gr.update(visible=True),
+        inputs=None,
+        outputs=use_as_input_button,
+        show_api=False
+    ).then(
+        fn=update_history,
+        inputs=[result, history_gallery],
+        outputs=history_gallery,
+        show_api=False
     )
 
 if __name__ == "__main__":