still initial commit

app.py

@@ -74,27 +74,25 @@ def process_demo_stream(frame: np.ndarray) -> np.ndarray:
     return np.hstack([raw_labeled, processed])
 
 
-# ── THE FIX: from official FastRTC docs ────────────────────────────────────
-# Use elem_classes on gr.Group + gr.Column, not elem_id CSS targeting
-# Use height= directly on WebRTC() — the component accepts it natively
+# ── CSS: exact pattern from official FastRTC docs ──────────────────────────
 css = """
-.webrtc-group {
-    max-width: 100% !important;
-    max-height: 480px !important;
-    overflow: hidden !important;
-}
-.webrtc-col {
-    display: flex !important;
-    justify-content: center !important;
-    align-items: flex-start !important;
-}
+#webrtc-single { max-width: 600px !important; max-height: 600px !important; }
+#webrtc-demo   { max-width: 900px !important; max-height: 600px !important; }
 """
 
 # ── UI ───────────────────────────────────────────────────────────────────────
 with gr.Blocks(title="Minecraft Spatial Voxel Filter", css=css) as demo:
 
-    gr.Markdown("<h1 style='text-align: center;'>⛏️ MINECRAFT SPATIAL VOXEL FILTER ⛏️</h1>")
-    gr.Markdown("<p style='text-align: center;'>Transform your environment into a real-time blocky landscape.</p>")
+    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>
+    """)
 
     mode_dropdown = gr.Dropdown(
         choices=["Minecraft Filter", "Streaming Demo"],
@@ -103,10 +101,11 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter", css=css) as demo:
         interactive=True,
     )
 
-    with gr.Row():
+    # ── Mode 1: Minecraft Filter ───────────────────────────────────────────
+    with gr.Row(visible=True) as minecraft_layout:
 
-        # ── Left: Controls ─────────────────────────────────────────────────
-        with gr.Column(scale=1, min_width=280):
+        # 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",
@@ -120,31 +119,30 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter", css=css) as demo:
             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}`")
-            gr.Markdown("_Controls only apply in Minecraft Filter mode._")
-
-        # ── Right: Viewports ───────────────────────────────────────────────
-        # ✅ OFFICIAL PATTERN: elem_classes on Column + Group, height= on WebRTC
-        with gr.Column(scale=2, elem_classes=["webrtc-col"]):
-
-            with gr.Group(visible=True, elem_classes=["webrtc-group"]) as minecraft_layout:
-                gr.Markdown("### 📺 Spatial Render Pipeline")
-                webrtc_single = WebRTC(
-                    label="Live Voxel Viewport",
-                    modality="video",
-                    mode="send-receive",
-                    rtc_configuration=get_cloudflare_turn_credentials,
-                    height=440,     # ← native height param, docs-official fix
-                )
-
-            with gr.Group(visible=False, elem_classes=["webrtc-group"]) as demo_layout:
-                gr.Markdown("### 📺 Dual-Feed · _Left: Raw · Right: Minecraft_")
-                webrtc_demo = WebRTC(
-                    label="Live Side-by-Side Feed",
-                    modality="video",
-                    mode="send-receive",
-                    rtc_configuration=get_cloudflare_turn_credentials,
-                    height=440,     # ← same
-                )
+
+        # Right: video — elem_id + CSS, exactly like the docs example
+        with gr.Column():
+            gr.Markdown("### 📺 Spatial Render Pipeline")
+            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_")
+            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 ──────────────────────────────────────────────────────────
     def switch_layout(selected_mode):