Update ui/ui_components.py

ui/ui_components.py

@@ -2,12 +2,13 @@
 """
 UI Components for BackgroundFX Pro (forced Two-Stage)
 -----------------------------------------------------
-* Pure layout: no heavy logic
-* All callbacks live in ui/callbacks.py
+* 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 (
@@ -21,17 +22,52 @@
     cb_preset_bg_preview,
 )
 
+# Typography & UI polish: sharper text + cleaner cards
 CSS = """
-:root { --radius: 16px; }
-.gradio-container { max-width: 1080px !important; margin: auto !important; }
-#hero .prose { font-size: 15px; }
-.card { border-radius: var(--radius); border: 1px solid rgba(0,0,0,.08); padding: 16px;
-        background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.9));
-        box-shadow: 0 10px 30px rgba(0,0,0,.06); }
+: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;
+}
 """
 
 # Keep in sync with utils/cv_processing.PROFESSIONAL_BACKGROUNDS
@@ -178,6 +214,13 @@ def create_interface() -> gr.Blocks:
                             label="Preview Green-screen only (mute audio)",
                             value=False
                         )
+                        # NEW: Quality control (Speed / Balanced / Max)
+                        quality = gr.Dropdown(
+                            label="Quality",
+                            choices=["speed", "balanced", "max"],
+                            value=os.getenv("BFX_QUALITY", "balanced"),
+                            info="Speed = fastest; Max = best edges & spill control."
+                        )
 
                     with gr.Row():
                         btn_load   = gr.Button("🔄 Load Models",    variant="secondary")
@@ -229,9 +272,19 @@ def _toggle_bg_sections(choice: str):
         # Load models
         btn_load.click(cb_load_models, outputs=statusbox)
 
-        # Always two-stage: pass use_two_stage=True to callback
+        # 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(
-            cb_process_video,
+            _run_with_quality,
             inputs=[
                 video,
                 bg_style,
@@ -241,6 +294,7 @@ def _toggle_bg_sections(choice: str):
                 key_color_mode,
                 preview_mask,
                 preview_greenscreen,
+                quality,               # NEW
             ],
             outputs=[out_video, statusbox],
         )
@@ -286,3 +340,4 @@ def _toggle_bg_sections(choice: str):
         )
 
     return demo
+