Rename ui_components.py to ui/ui_components.py

ui_components.py → ui/ui_components.py

@@ -3,9 +3,12 @@
 UI Components for BackgroundFX Pro
 - Layout only (no heavy logic here)
 - Delegates callbacks to ui/callbacks.py
+- Adds previews for uploaded video (first frame) and custom background image
 """
 
+from __future__ import annotations
 import gradio as gr
+
 from ui.callbacks import (
     cb_load_models,
     cb_process_video,
@@ -14,10 +17,9 @@
     cb_clear,
     cb_generate_bg,
     cb_use_gen_bg,
-    cb_video_changed,
-    cb_custom_bg_preview,
+    cb_video_changed,          # should return a preview image (or None)
+    cb_custom_bg_preview,      # should return a preview image (or None)
 )
-from utils.bg_generator import generate_ai_background
 
 CSS = """
 :root { --radius: 16px; }
@@ -29,11 +31,26 @@
 .footer-note { opacity: 0.7; font-size: 12px; }
 .sm { font-size: 13px; opacity: 0.85; }
 #statusbox { min-height: 120px; }
+.preview-img { border-radius: var(--radius); border: 1px solid rgba(0,0,0,.08); }
 """
 
+# NOTE: Keep these keys in sync with utils/cv_processing.PROFESSIONAL_BACKGROUNDS
+_BG_CHOICES = [
+    "minimalist",
+    "office_modern",
+    "studio_blue",
+    "studio_green",
+    "warm_gradient",
+    "tech_dark",
+]
+
 def create_interface() -> gr.Blocks:
-    with gr.Blocks(title="🎬 BackgroundFX Pro", css=CSS, analytics_enabled=False,
-                   theme=gr.themes.Soft()) as demo:
+    with gr.Blocks(
+        title="🎬 BackgroundFX Pro",
+        css=CSS,
+        analytics_enabled=False,
+        theme=gr.themes.Soft()
+    ) as demo:
 
         # ---------- HERO ----------
         with gr.Row(elem_id="hero"):
@@ -46,29 +63,56 @@ def create_interface() -> gr.Blocks:
         # ---------- QUICK START ----------
         with gr.Tab("🏁 Quick Start"):
             with gr.Row():
+                # Left column: inputs & controls
                 with gr.Column(scale=1):
-                    video = gr.Video(label="Upload Video")
+                    video = gr.Video(label="Upload Video", interactive=True)
+                    # Small live preview (first frame)
+                    video_preview = gr.Image(
+                        label="Video Preview (first frame)",
+                        interactive=False,
+                        elem_classes=["preview-img"]
+                    )
+
                     bg_style = gr.Dropdown(
                         label="Background Style",
-                        choices=["minimalist", "office", "studio", "ocean", "forest",
-                                 "sunset", "royal", "warm", "cool"],
+                        choices=_BG_CHOICES,
                         value="minimalist",
+                        info="Matches built-in PROFESSIONAL_BACKGROUNDS keys."
+                    )
+                    custom_bg = gr.File(
+                        label="Custom Background (Optional)",
+                        file_types=["image"],
+                        interactive=True
+                    )
+                    # Custom background preview
+                    custom_bg_preview_img = gr.Image(
+                        label="Custom Background Preview",
+                        interactive=False,
+                        elem_classes=["preview-img"]
                     )
-                    custom_bg = gr.File(label="Custom Background (Optional)", file_types=["image"])
 
                     with gr.Accordion("Advanced", open=False):
                         use_two_stage = gr.Checkbox(label="Use Two-Stage Pipeline", value=False)
                         chroma_preset = gr.Dropdown(
-                            label="Chroma Preset", choices=["standard"], value="standard"
+                            label="Chroma Preset",
+                            choices=["standard"],
+                            value="standard"
+                        )
+                        preview_mask = gr.Checkbox(
+                            label="Preview Mask (no audio remix)",
+                            value=False
+                        )
+                        preview_greenscreen = gr.Checkbox(
+                            label="Preview Greenscreen (no audio remix)",
+                            value=False
                         )
-                        preview_mask = gr.Checkbox(label="Preview Mask (no audio remix)", value=False)
-                        preview_greenscreen = gr.Checkbox(label="Preview Greenscreen (no audio remix)", value=False)
 
                     with gr.Row():
                         btn_load = gr.Button("🔄 Load Models", variant="secondary")
                         btn_run = gr.Button("🎬 Process Video", variant="primary")
                         btn_cancel = gr.Button("⏹️ Cancel", variant="secondary")
 
+                # Right column: outputs & status
                 with gr.Column(scale=1):
                     out_video = gr.Video(label="Processed Output", interactive=False)
                     statusbox = gr.Textbox(label="Status", lines=8, elem_id="statusbox")
@@ -80,7 +124,11 @@ def create_interface() -> gr.Blocks:
         with gr.Tab("🧠 AI Background (Lightweight)"):
             with gr.Row():
                 with gr.Column(scale=1):
-                    prompt = gr.Textbox(label="Describe vibe", value="modern office")
+                    prompt = gr.Textbox(
+                        label="Describe vibe",
+                        value="modern office",
+                        info="Examples: 'modern office', 'soft sunset studio', 'cool tech dark', 'forest ambience'"
+                    )
                     with gr.Row():
                         gen_width = gr.Slider(640, 1920, value=1280, step=10, label="Width")
                         gen_height = gr.Slider(360, 1080, value=720, step=10, label="Height")
@@ -92,7 +140,7 @@ def create_interface() -> gr.Blocks:
                     btn_gen_bg = gr.Button("✨ Generate Background", variant="primary")
 
                 with gr.Column(scale=1):
-                    gen_preview = gr.Image(label="Generated Background", interactive=False)
+                    gen_preview = gr.Image(label="Generated Background", interactive=False, elem_classes=["preview-img"])
                     gen_path = gr.Textbox(label="Saved Path", interactive=False)
                     use_gen_as_custom = gr.Button("📌 Use As Custom Background", variant="secondary")
 
@@ -103,9 +151,13 @@ def create_interface() -> gr.Blocks:
                     model_status = gr.JSON(label="Model Status")
                 with gr.Column(scale=1, elem_classes=["card"]):
                     cache_status = gr.JSON(label="Cache / System Status")
-            gr.Markdown("<div class='footer-note'>If models fail to load, fallbacks keep the UI responsive. Check logs for details.</div>")
+            gr.Markdown(
+                "<div class='footer-note'>If models fail to load, fallbacks keep the UI responsive. "
+                "Check logs for details.</div>"
+            )
 
-        # ---------- CALLBACKS WIRING ----------
+        # ---------- CALLBACK WIRING ----------
+        # Core actions
         btn_load.click(cb_load_models, outputs=statusbox)
         btn_run.click(
             cb_process_video,
@@ -116,6 +168,7 @@ def create_interface() -> gr.Blocks:
         btn_refresh.click(cb_status, outputs=[model_status, cache_status])
         btn_clear.click(cb_clear, outputs=[out_video, statusbox, gen_preview, gen_path])
 
+        # AI background generation
         btn_gen_bg.click(
             cb_generate_bg,
             inputs=[prompt, gen_width, gen_height, bokeh, vignette, contrast],
@@ -123,8 +176,11 @@ def create_interface() -> gr.Blocks:
         )
         use_gen_as_custom.click(cb_use_gen_bg, inputs=[gen_path], outputs=[custom_bg])
 
-        # Previews
-        video.change(cb_video_changed, inputs=[video], outputs=[])  # can later output a preview img
-        custom_bg.change(cb_custom_bg_preview, inputs=[custom_bg], outputs=[])
+        # Live previews
+        # Expectation:
+        #   - cb_video_changed(video_path) -> PIL.Image | numpy array | None
+        #   - cb_custom_bg_preview(file_obj) -> PIL.Image | numpy array | None
+        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])
 
     return demo