Update ui/ui_components.py

ui/ui_components.py

@@ -0,0 +1,346 @@
+#!/usr/bin/env python3
+"""
+UI Components for BackgroundFX Pro (forced Two-Stage)
+-----------------------------------------------------
+* Pure layout (tiny wrapper to set env for quality)
+* All heavy logic stays in ui/callbacks.py
+* Two-stage mode is always active (checkbox removed)
+"""
+
+from __future__ import annotations
+import os
+import gradio as gr
+
+from ui.callbacks import (
+    cb_load_models,
+    cb_process_video,
+    cb_cancel,
+    cb_status,
+    cb_clear,
+    cb_generate_bg,
+    cb_use_gen_bg,
+    cb_preset_bg_preview,
+)
+
+# Typography & UI polish: sharper text + cleaner cards
+CSS = """
+:root {
+  --radius: 16px;
+  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
+               'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Global crisp text */
+html, body, .gradio-container, .gradio-container * {
+  font-family: var(--font-sans) !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  text-rendering: optimizeLegibility !important;
+  font-synthesis-weight: none;
+}
+
+/* Headings tighter & bolder */
+.gradio-container h1, .gradio-container h2, .gradio-container h3 {
+  letter-spacing: -0.01em;
+  font-weight: 700;
+}
+
+/* Body copy slightly tighter */
+#hero .prose, .gr-markdown, .gr-text {
+  letter-spacing: -0.003em;
+}
+
+/* Card look */
+.card {
+  border-radius: var(--radius);
+  border: 1px solid rgba(0,0,0,.08);
+  padding: 16px;
+  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.94));
+  box-shadow: 0 10px 30px rgba(0,0,0,.06);
+}
+
+.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); }
+
+/* Buttons get a tiny weight bump for clarity */
+button, .gr-button { font-weight: 600; }
+
+/* Inline Quality select between buttons */
+.inline-quality .wrap-inner { min-width: 170px; }
+"""
+
+# Keep in sync with utils/cv_processing.PROFESSIONAL_BACKGROUNDS
+_BG_CHOICES = [
+    "minimalist",
+    "office_modern",
+    "studio_blue",
+    "studio_green",
+    "warm_gradient",
+    "tech_dark",
+]
+PRO_IMAGE_CHOICES = ["minimalist", "office_modern", "studio_blue", "studio_green"]
+GRADIENT_COLOR_CHOICES = ["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:
+
+        # ------------------------------------------------------------------
+        # HERO
+        # ------------------------------------------------------------------
+        with gr.Row(elem_id="hero"):
+            gr.Markdown(
+                "## 🎬 BackgroundFX Pro (CSP-Safe)\n"
+                "Replace your video background with cinema-quality AI matting. "
+                "Built for Hugging Face Spaces CSP.\n\n"
+                "_Tip: press **Load Models** once after the Space spins up._"
+            )
+
+        # ------------------------------------------------------------------
+        # TAB – Quick Start
+        # ------------------------------------------------------------------
+        with gr.Tab("🏁 Quick Start"):
+
+            with gr.Row():
+                # ── Left column ────────────────────────────────────────────
+                with gr.Column(scale=1):
+                    video = gr.Video(label="Upload Video", interactive=True)
+
+                    # Hidden: effective preset key (still used by callbacks / defaults)
+                    bg_style = gr.Dropdown(
+                        label="Background Style (hidden)",
+                        choices=_BG_CHOICES,
+                        value="minimalist",
+                        visible=False,
+                    )
+
+                    # =======================
+                    # Background Source block
+                    # =======================
+                    gr.Markdown("### 🖼️ Background Source")
+
+                    bg_method = gr.Radio(
+                        label="Choose method",
+                        choices=[
+                            "Upload file",
+                            "Pre-loaded professional images",
+                            "Pre-loaded Gradients / Colors",
+                            "AI generated background",
+                        ],
+                        value="Upload file",
+                    )
+
+                    # a) Upload file option
+                    with gr.Group(visible=True) as grp_upload:
+                        custom_bg = gr.Image(
+                            label="Upload Background Image",
+                            interactive=True,
+                            type="filepath",  # returns file path
+                            elem_classes=["preview-img"]
+                        )
+
+                    # b) Pre-loaded professional images
+                    with gr.Group(visible=False) as grp_pro_images:
+                        pro_image_dd = gr.Dropdown(
+                            label="Professional Images",
+                            choices=PRO_IMAGE_CHOICES,
+                            value=PRO_IMAGE_CHOICES[0],
+                            info="Pre-defined photo-like backgrounds",
+                        )
+                        gr.Markdown(
+                            "<span class='sm'>Selecting a preset updates the preview below.</span>"
+                        )
+
+                    # c) Pre-loaded gradients & full colors
+                    with gr.Group(visible=False) as grp_gradients:
+                        gradient_dd = gr.Dropdown(
+                            label="Gradients & Full Colors",
+                            choices=GRADIENT_COLOR_CHOICES,
+                            value=GRADIENT_COLOR_CHOICES[0],
+                            info="Clean gradients or solid color styles",
+                        )
+                        gr.Markdown(
+                            "<span class='sm'>Selecting a preset updates the preview below.</span>"
+                        )
+
+                    # d) AI-generated background (inline, lightweight)
+                    with gr.Group(visible=False) as grp_ai:
+                        prompt = gr.Textbox(
+                            label="Describe vibe",
+                            value="modern office",
+                            info="e.g. 'soft sunset studio', 'cool tech dark', 'forest ambience'"
+                        )
+                        with gr.Row():
+                            gen_width  = gr.Slider(640, 1920, 1280, step=10, label="Width")
+                            gen_height = gr.Slider(360, 1080, 720,  step=10, label="Height")
+                        with gr.Row():
+                            bokeh    = gr.Slider(0, 30, 8,    step=1,    label="Bokeh Blur")
+                            vignette = gr.Slider(0, 0.6, 0.15, step=0.01, label="Vignette")
+                            contrast = gr.Slider(0.8, 1.4, 1.05, step=0.01, label="Contrast")
+                        with gr.Row():
+                            btn_gen_bg_inline = gr.Button("✨ Generate Background", variant="primary")
+                            use_gen_as_custom_inline = gr.Button("📌 Use as Custom Background", variant="secondary")
+                        gen_preview = gr.Image(
+                            label="Generated Background",
+                            interactive=False,
+                            elem_classes=["preview-img"]
+                        )
+                        gen_path = gr.Textbox(label="Saved Path", interactive=False)
+
+                    # ── Advanced options accordion ───────────────────────
+                    with gr.Accordion("Advanced", open=False):
+                        chroma_preset = gr.Dropdown(
+                            label="Chroma Preset",
+                            choices=["standard"],    # can add 'studio', 'outdoor' later
+                            value="standard"
+                        )
+                        key_color_mode = gr.Dropdown(
+                            label="Key-Colour Mode",
+                            choices=["auto", "green", "blue", "cyan", "magenta"],
+                            value="auto",
+                            info="Auto picks a colour far from your clothes; override if needed."
+                        )
+                        preview_mask = gr.Checkbox(
+                            label="Preview Mask only (mute audio)",
+                            value=False
+                        )
+                        preview_greenscreen = gr.Checkbox(
+                            label="Preview Green-screen only (mute audio)",
+                            value=False
+                        )
+
+                    # ── Controls row: Load → Quality → Process / Cancel ──
+                    with gr.Row():
+                        btn_load = gr.Button("🔄 Load Models", variant="secondary")
+
+                        quality = gr.Dropdown(
+                            label="Quality",
+                            choices=["speed", "balanced", "max"],
+                            value=os.getenv("BFX_QUALITY", "balanced"),
+                            info="Speed = fastest; Max = best edges & spill control.",
+                            elem_classes=["inline-quality"],
+                        )
+
+                        btn_run = gr.Button("🎬 Process Video", variant="primary")
+                        btn_cancel = gr.Button("⏹️ Cancel", variant="secondary")
+
+                # ── Right column ──────────────────────────────────────────
+                with gr.Column(scale=1):
+                    out_video = gr.Video(label="Processed Output", interactive=False)
+                    statusbox = gr.Textbox(label="Status", lines=8, elem_id="statusbox")
+                    with gr.Row():
+                        btn_refresh = gr.Button("🔍 Refresh Status", variant="secondary")
+                        btn_clear   = gr.Button("🧹 Clear",           variant="secondary")
+
+        # ------------------------------------------------------------------
+        # TAB – Status & settings
+        # ------------------------------------------------------------------
+        with gr.Tab("📈 Status & Settings"):
+            with gr.Row():
+                with gr.Column(scale=1, elem_classes=["card"]):
+                    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 the runtime log for details.</div>"
+            )
+
+        # ------------------------------------------------------------------
+        # Callback wiring
+        # ------------------------------------------------------------------
+
+        # Toggle which background sub-section is visible
+        def _toggle_bg_sections(choice: str):
+            return (
+                gr.update(visible=(choice == "Upload file")),
+                gr.update(visible=(choice == "Pre-loaded professional images")),
+                gr.update(visible=(choice == "Pre-loaded Gradients / Colors")),
+                gr.update(visible=(choice == "AI generated background")),
+            )
+
+        bg_method.change(
+            _toggle_bg_sections,
+            inputs=[bg_method],
+            outputs=[grp_upload, grp_pro_images, grp_gradients, grp_ai],
+        )
+
+        # Load models
+        btn_load.click(cb_load_models, outputs=statusbox)
+
+        # Tiny wrapper to set env for quality before calling the existing callback
+        def _run_with_quality(video_pth, bg_style_val, custom_bg_pth,
+                              use_two_stage_state, chroma_p, key_mode,
+                              prev_mask, prev_gs, quality_val):
+            os.environ["BFX_QUALITY"] = (quality_val or "balanced")
+            return cb_process_video(
+                video_pth, bg_style_val, custom_bg_pth,
+                use_two_stage_state, chroma_p, key_mode, prev_mask, prev_gs
+            )
+
+        # Always two-stage: pass use_two_stage=True to callback via State
+        btn_run.click(
+            _run_with_quality,
+            inputs=[
+                video,
+                bg_style,
+                custom_bg,
+                gr.State(value=True),  # Always two-stage
+                chroma_preset,
+                key_color_mode,
+                preview_mask,
+                preview_greenscreen,
+                quality,               # <-- the new control
+            ],
+            outputs=[out_video, statusbox],
+        )
+
+        # Cancel / Status / Clear
+        btn_cancel.click(cb_cancel, outputs=statusbox)
+        btn_refresh.click(cb_status, outputs=[model_status, cache_status])
+
+        btn_clear.click(
+            cb_clear,
+            outputs=[out_video, statusbox, gen_preview, gen_path, custom_bg]
+        )
+
+        # Preloaded presets → update preview (write into custom_bg)
+        pro_image_dd.change(
+            cb_preset_bg_preview,
+            inputs=[pro_image_dd],
+            outputs=[custom_bg],
+        )
+        gradient_dd.change(
+            cb_preset_bg_preview,
+            inputs=[gradient_dd],
+            outputs=[custom_bg],
+        )
+
+        # AI background generation (inline)
+        btn_gen_bg_inline.click(
+            cb_generate_bg,
+            inputs=[prompt, gen_width, gen_height, bokeh, vignette, contrast],
+            outputs=[gen_preview, gen_path],
+        )
+        use_gen_as_custom_inline.click(
+            cb_use_gen_bg,
+            inputs=[gen_path],
+            outputs=[custom_bg],
+        )
+
+        # Initialize with a default preset preview on load
+        demo.load(
+            cb_preset_bg_preview,
+            inputs=[bg_style],
+            outputs=[custom_bg]
+        )
+
+    return demo