still initial commit

app.py

@@ -74,77 +74,73 @@ def process_demo_stream(frame: np.ndarray) -> np.ndarray:
     return np.hstack([raw_labeled, processed])
 
 
-# ── CSS: exact pattern from official FastRTC docs ──────────────────────────
+# ── CSS: official Gradio WebRTC pattern (from gradio.app/guides) ───────────
+# Target gr.Group and gr.Column via elem_classes — NOT the WebRTC component
 css = """
-#webrtc-single { max-width: 600px !important; max-height: 600px !important; }
-#webrtc-demo   { max-width: 900px !important; max-height: 600px !important; }
+.webrtc-group  { max-width: 600px  !important; max-height: 600px !important; }
+.webrtc-col    { display: flex !important; justify-content: center !important; align-items: center !important; }
+.demo-group    { max-width: 1000px !important; max-height: 600px !important; }
 """
 
+status_color = "🟢" if voxel_backend is not None else "🔴"
+status_text  = "Connected" if voxel_backend is not None else "Offline"
+
 # ── UI ───────────────────────────────────────────────────────────────────────
 with gr.Blocks(title="Minecraft Spatial Voxel Filter", css=css) as demo:
 
     gr.HTML("""
-    <div style='display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 0'>
-        <div>
-            <h1 style='margin: 0'>⛏️ MINECRAFT SPATIAL VOXEL FILTER ⛏️</h1>
-            <p style='margin: 4px 0 0 0; text-align: center'>
-                Transform your environment into a real-time blocky landscape
-            </p>
-        </div>
+    <div style='text-align:center; padding: 16px 0'>
+        <h1 style='margin:0'>⛏️ MINECRAFT SPATIAL VOXEL FILTER ⛏️</h1>
+        <p style='margin:6px 0 0 0'>Transform your environment into a real-time blocky landscape</p>
     </div>
     """)
 
-    mode_dropdown = gr.Dropdown(
-        choices=["Minecraft Filter", "Streaming Demo"],
-        value="Minecraft Filter",
-        label="🎯 Pipeline View Configuration",
-        interactive=True,
-    )
-
-    # ── Mode 1: Minecraft Filter ───────────────────────────────────────────
-    with gr.Row(visible=True) as minecraft_layout:
-
-        # Left: controls
-        with gr.Column():
-            gr.Markdown("### 🎛️ Environmental Filters")
-            prompt_input = gr.Textbox(
-                value="vanilla minecraft voxel landscape, 3d blocky style, retro game cube aesthetic",
-                label="Biome Environment Blueprint",
-                lines=3,
-            )
-            denoise_strength = gr.Slider(
-                minimum=0.1, maximum=1.0, step=0.05, value=0.55,
-                label="Voxelization Denoising Strength",
-            )
-            status_color = "🟢" if voxel_backend is not None else "🔴"
-            status_text  = "Connected" if voxel_backend is not None else "Offline"
-            gr.Markdown(f"**Modal Backend:** {status_color} `{status_text}`")
+    # ── Shared controls (always visible) ─────────────────────────────────────
+    with gr.Row():
+        mode_dropdown = gr.Dropdown(
+            choices=["Minecraft Filter", "Streaming Demo"],
+            value="Minecraft Filter",
+            label="🎯 Pipeline Mode",
+            interactive=True,
+            scale=1,
+        )
+        prompt_input = gr.Textbox(
+            value="vanilla minecraft voxel landscape, 3d blocky style, retro game cube aesthetic",
+            label="Biome Blueprint",
+            lines=1,
+            scale=3,
+        )
+        denoise_strength = gr.Slider(
+            minimum=0.1, maximum=1.0, step=0.05, value=0.55,
+            label="Denoising Strength",
+            scale=1,
+        )
+        gr.Markdown(f"**Backend:** {status_color} `{status_text}`", scale=1)
 
-        # Right: video — elem_id + CSS, exactly like the docs example
-        with gr.Column():
-            gr.Markdown("### 📺 Spatial Render Pipeline")
+    # ── Mode 1: Minecraft Filter ──────────────────────────────────────────────
+    # OFFICIAL PATTERN: gr.Column(elem_classes) → gr.Group(elem_classes) → WebRTC
+    with gr.Column(elem_classes=["webrtc-col"], visible=True) as minecraft_layout:
+        gr.Markdown("### 📺 Spatial Render Pipeline")
+        with gr.Group(elem_classes=["webrtc-group"]):
             webrtc_single = WebRTC(
                 label="Live Voxel Viewport",
                 modality="video",
                 mode="send-receive",
-                elem_id="webrtc-single",       # ← docs pattern
                 rtc_configuration=get_cloudflare_turn_credentials,
             )
 
-    # ── Mode 2: Streaming Demo ────────────���────────────────────────────────
-    with gr.Row(visible=False) as demo_layout:
-
-        with gr.Column():
-            gr.Markdown("### 📺 Dual-Feed · _Left: Raw · Right: Minecraft_")
+    # ── Mode 2: Streaming Demo ────────────────────────────────────────────────
+    with gr.Column(elem_classes=["webrtc-col"], visible=False) as demo_layout:
+        gr.Markdown("### 📺 Dual-Feed · _Left: Raw · Right: Minecraft_")
+        with gr.Group(elem_classes=["demo-group"]):
             webrtc_demo = WebRTC(
                 label="Live Side-by-Side Feed",
                 modality="video",
                 mode="send-receive",
-                elem_id="webrtc-demo",         # ← docs pattern
                 rtc_configuration=get_cloudflare_turn_credentials,
             )
 
-    # ── Mode Switch ──────────────────────────────────────────────────────────
+    # ── Mode Switch ───────────────────────────────────────────────────────────
     def switch_layout(selected_mode):
         return (
             gr.update(visible=selected_mode == "Minecraft Filter"),
@@ -157,7 +153,7 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter", css=css) as demo:
         outputs=[minecraft_layout, demo_layout],
     )
 
-    # ── Stream Bindings ──────────────────────────────────────────────────────
+    # ── Stream Bindings ───────────────────────────────────────────────────────
     webrtc_single.stream(
         fn=process_video_stream,
         inputs=[webrtc_single, prompt_input, denoise_strength],