still initial commit

app.py

@@ -7,12 +7,10 @@ from fastrtc import WebRTC, get_cloudflare_turn_credentials
 
 # ── Modal Backend ───────────────────────────────────────────────────────────
 try:
-    print("🚀 Connecting to Modal VoxelModel...")
     VoxelModelCls = modal.Cls.from_name("flux-klein-voxel-backend", "VoxelModel")
     voxel_backend = VoxelModelCls().process_frame
     print("✅ Modal Cls connected.")
 except Exception as e:
-    print(f"⚠️ Modal Cls failed: {e}. Trying Function fallback...")
     try:
         voxel_backend = modal.Function.from_name("flux-klein-voxel-backend", "demo_stream_frame")
         print("✅ Modal Function connected.")
@@ -63,7 +61,6 @@ def process_demo_stream(frame: np.ndarray) -> np.ndarray:
     if voxel_backend is None:
         err = _offline_frame(frame, "Backend Offline")
         return np.hstack([frame, err])
-
     processed = _run_voxel_backend(
         frame,
         prompt="vanilla minecraft voxel landscape, 3d blocky style, cube aesthetic",
@@ -71,42 +68,25 @@ def process_demo_stream(frame: np.ndarray) -> np.ndarray:
     )
     if processed.shape[0] != frame.shape[0]:
         processed = cv2.resize(processed, (frame.shape[1], frame.shape[0]))
-
     raw_labeled = frame.copy()
-    cv2.putText(raw_labeled, "RAW",       (10, 28), cv2.FONT_HERSHEY_SIMPLEX, 0.9, (255,255,255), 2)
-    cv2.putText(processed,   "MINECRAFT", (10, 28), cv2.FONT_HERSHEY_SIMPLEX, 0.9, (255,255,255), 2)
+    cv2.putText(raw_labeled, "RAW",       (10, 28), cv2.FONT_HERSHEY_SIMPLEX, 0.9, (255, 255, 255), 2)
+    cv2.putText(processed,   "MINECRAFT", (10, 28), cv2.FONT_HERSHEY_SIMPLEX, 0.9, (255, 255, 255), 2)
     return np.hstack([raw_labeled, processed])
 
 
-# ── CSS: KEY FIX — constrain video to its column, never full-screen ─────────
+# ── 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 = """
-/* Contain both WebRTC viewports inside their grid columns */
-#webrtc-single, #webrtc-demo {
-    max-height: 420px !important;
-    height: 420px !important;
+.webrtc-group {
+    max-width: 100% !important;
+    max-height: 480px !important;
     overflow: hidden !important;
 }
-
-/* The actual <video> element inside each component */
-#webrtc-single video, #webrtc-demo video {
-    width: 100% !important;
-    height: 420px !important;
-    max-height: 420px !important;
-    object-fit: contain !important;  /* letterbox, never crop or overflow */
-    background: #000;
-}
-
-/* Gradio wraps WebRTC in .webrtc-container — constrain that too */
-#webrtc-single .webrtc-container,
-#webrtc-demo   .webrtc-container {
-    max-height: 420px !important;
-    overflow: hidden !important;
-}
-
-/* Prevent the right column from stretching taller than controls */
-.viewport-col {
-    max-height: 520px !important;
-    overflow: hidden !important;
+.webrtc-col {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: flex-start !important;
 }
 """
 
@@ -123,7 +103,7 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter", css=css) as demo:
         interactive=True,
     )
 
-    with gr.Row(equal_height=True):
+    with gr.Row():
 
         # ── Left: Controls ─────────────────────────────────────────────────
         with gr.Column(scale=1, min_width=280):
@@ -142,29 +122,28 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter", css=css) as demo:
             gr.Markdown(f"**Modal Backend:** {status_color} `{status_text}`")
             gr.Markdown("_Controls only apply in Minecraft Filter mode._")
 
-        # ── Right: Viewports — fixed-height column ─────────────────────────
-        with gr.Column(scale=2, elem_classes=["viewport-col"]):
+        # ── Right: Viewports ───────────────────────────────────────────────
+        # ✅ OFFICIAL PATTERN: elem_classes on Column + Group, height= on WebRTC
+        with gr.Column(scale=2, elem_classes=["webrtc-col"]):
 
-            # Mode 1: Minecraft Filter
-            with gr.Group(visible=True) as minecraft_layout:
+            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,
-                    elem_id="webrtc-single",   # ← targeted by CSS above
+                    height=440,     # ← native height param, docs-official fix
                 )
 
-            # Mode 2: Streaming Demo (side-by-side in one component)
-            with gr.Group(visible=False) as demo_layout:
+            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,
-                    elem_id="webrtc-demo",     # ← targeted by CSS above
+                    height=440,     # ← same
                 )
 
     # ── Mode Switch ──────────────────────────────────────────────────────────