Update ui/ui_components.py

ui/ui_components.py

@@ -6,7 +6,7 @@
 * All callbacks live in ui/callbacks.py
 * Adds live previews for the first frame of the uploaded video
   and for the custom background image
-* FIXED: Background preview NOT touched by process button
+* SIMPLIFIED: Background uses gr.Image like video uses gr.Video
 """
 
 from __future__ import annotations
@@ -21,8 +21,7 @@
     cb_generate_bg,
     cb_use_gen_bg,
     cb_video_changed,
-    cb_custom_bg_preview,
-    cb_preset_bg_preview,  # Added import for preset preview
+    cb_preset_bg_preview,
 )
 
 CSS = """
@@ -92,15 +91,11 @@ def create_interface() -> gr.Blocks:
                         info="Matches keys in PROFESSIONAL_BACKGROUNDS"
                     )
 
-                    custom_bg = gr.File(
+                    # SIMPLIFIED: Use gr.Image for both upload AND preview
+                    custom_bg = gr.Image(
                         label="Custom Background (optional)",
-                        file_types=["image"],
-                        interactive=True
-                    )
-
-                    custom_bg_preview_img = gr.Image(
-                        label="Custom Background Preview",
-                        interactive=False,
+                        interactive=True,
+                        type="filepath",  # Returns file path like gr.File did
                         elem_classes=["preview-img"]
                     )
 
@@ -201,29 +196,28 @@ def create_interface() -> gr.Blocks:
         # ------------------------------------------------------------------
         btn_load.click(cb_load_models, outputs=statusbox)
 
-        # FIXED: Process button only updates what needs to change
         btn_run.click(
             cb_process_video,
             inputs=[
                 video,
                 bg_style,
-                custom_bg,
+                custom_bg,  # Now gr.Image that returns filepath
                 use_two_stage,
                 chroma_preset,
                 key_color_mode,
                 preview_mask,
                 preview_greenscreen,
             ],
-            outputs=[out_video, statusbox],  # Only 2 outputs - NOT touching preview!
+            outputs=[out_video, statusbox],
         )
 
         btn_cancel.click(cb_cancel, outputs=statusbox)
         btn_refresh.click(cb_status, outputs=[model_status, cache_status])
         
-        # Clear button - only clears what it needs to
+        # Clear button - simplified
         btn_clear.click(
             cb_clear, 
-            outputs=[out_video, statusbox, gen_preview, gen_path, custom_bg_preview_img]
+            outputs=[out_video, statusbox, gen_preview, gen_path, custom_bg]
         )
 
         # AI background generation
@@ -235,22 +229,21 @@ def create_interface() -> gr.Blocks:
         
         use_gen_as_custom.click(cb_use_gen_bg, inputs=[gen_path], outputs=[custom_bg])
 
-        # Live previews - only update when actually changing backgrounds
+        # Live previews
         video.change(cb_video_changed, inputs=[video], outputs=[video_preview])
-        custom_bg.change(cb_custom_bg_preview, inputs=[custom_bg], outputs=[custom_bg_preview_img])
         
-        # Update preview when background style dropdown changes
+        # Update custom_bg preview when background style dropdown changes
         bg_style.change(
             cb_preset_bg_preview,
             inputs=[bg_style],
-            outputs=[custom_bg_preview_img]
+            outputs=[custom_bg]
         )
         
         # Initialize with default background preview on load
         demo.load(
             cb_preset_bg_preview,
             inputs=[bg_style],
-            outputs=[custom_bg_preview_img]
+            outputs=[custom_bg]
         )
 
     return demo