feat: tweak ui

gradio_demo.py

@@ -48,6 +48,10 @@ async def process_edit(image, instruction):
 async def use_edited_image(edited_image):
     return edited_image
 
+def clear_instruction():
+    # Only clear the instruction text.
+    return ""
+
 # Create the Gradio interface
 with gr.Blocks() as demo:
     gr.Markdown("# PicEdit")
@@ -59,19 +63,22 @@ with gr.Blocks() as demo:
     with gr.Row():
         # Input image on the left
         input_image = gr.Image(label="Original Image", type="filepath")
-        # Output image on the right
+        
         with gr.Column():
-            output_image = gr.Image(label="Edited Image", type="filepath")
-            use_edited_btn = gr.Button("Use Edited Image")
-    
+            # Output image on the right
+            output_image = gr.Image(label="Edited Image", type="filepath", interactive=False, scale=3)
+            use_edited_btn = gr.Button("👈 Use Edited Image 👈")
+
     # Text input for editing instructions
     instruction = gr.Textbox(
         label="Editing Instructions",
         placeholder="Describe the changes you want to make to the image..."
     )
     
-    # Submit button
-    submit_btn = gr.Button("Apply Edit")
+    # Clear button
+    with gr.Row():
+        clear_btn = gr.Button("Clear")
+        submit_btn = gr.Button("Apply Edit", variant="primary")
     
     # Set up the event handlers
     submit_btn.click(
@@ -86,6 +93,13 @@ with gr.Blocks() as demo:
         outputs=[input_image]
     )
 
+    # Bind the clear button's click event to only clear the instruction textbox.
+    clear_btn.click(
+        fn=clear_instruction,
+        inputs=[],
+        outputs=[instruction]
+    )
+
 if __name__ == "__main__":
     demo.launch()