still initial commit

app.py

@@ -5,7 +5,7 @@ import gradio as gr
 import modal
 from fastrtc import WebRTC, get_cloudflare_turn_credentials
 
-# ── Modal Backend Connection ────────────────────────────────────────────────
+# ── Modal Backend ───────────────────────────────────────────────────────────
 try:
     print("🚀 Connecting to Modal VoxelModel...")
     VoxelModelCls = modal.Cls.from_name("flux-klein-voxel-backend", "VoxelModel")
@@ -21,27 +21,18 @@ except Exception as e:
         voxel_backend = None
 
 
-# ── Shared Core Processing ──────────────────────────────────────────────────
+# ── Helpers ─────────────────────────────────────────────────────────────────
 def _run_voxel_backend(frame: np.ndarray, prompt: str, strength: float) -> np.ndarray:
-    """
-    Encodes frame → sends to Modal → decodes result.
-    Returns processed frame, or annotated original on failure.
-    """
     success, encoded = cv2.imencode(".jpg", frame, [int(cv2.IMWRITE_JPEG_QUALITY), 85])
     if not success:
         return frame
-
     try:
         try:
             processed_bytes = voxel_backend.remote(encoded.tobytes(), prompt, strength)
         except TypeError:
-            # Backend may not accept prompt/strength yet
             processed_bytes = voxel_backend.remote(encoded.tobytes())
-
         result = cv2.imdecode(np.frombuffer(processed_bytes, dtype=np.uint8), cv2.IMREAD_COLOR)
-        # Guard against decode failure
         return result if result is not None else frame
-
     except Exception as err:
         out = frame.copy()
         cv2.putText(out, f"Modal error: {str(err)[:45]}", (10, 30),
@@ -50,9 +41,7 @@ def _run_voxel_backend(frame: np.ndarray, prompt: str, strength: float) -> np.nd
 
 
 def _offline_frame(frame: np.ndarray, message: str) -> np.ndarray:
-    """Returns an error-annotated frame matching the input dimensions."""
-    # FIX BUG 3: match input frame shape instead of hardcoded (480, 640)
-    h, w = frame.shape[:2] if frame is not None else (480, 640)
+    h, w = (frame.shape[:2] if frame is not None else (480, 640))
     out = np.zeros((h, w, 3), dtype=np.uint8)
     cv2.putText(out, message, (max(10, w // 8), h // 2),
                 cv2.FONT_HERSHEY_DUPLEX, 0.8, (0, 0, 220), 2)
@@ -61,31 +50,18 @@ def _offline_frame(frame: np.ndarray, message: str) -> np.ndarray:
 
 # ── Stream Handlers ─────────────────────────────────────────────────────────
 def process_video_stream(frame: np.ndarray, prompt: str, strength: float) -> np.ndarray:
-    """
-    Minecraft Filter mode: transforms frame with user-controlled prompt + strength.
-    Returns single processed frame → goes back to the same send-receive WebRTC.
-    """
     if frame is None:
         return None
     if voxel_backend is None:
         return _offline_frame(frame, "Modal Backend Offline")
-
     return _run_voxel_backend(frame, prompt, strength)
 
 
 def process_demo_stream(frame: np.ndarray) -> np.ndarray:
-    """
-    Streaming Demo mode: fixed prompt, side-by-side raw + processed.
-
-    FIX BUG 1+2: Instead of routing to a separate mode='receive' WebRTC
-    (which FastRTC doesn't support via stream()), we combine both feeds
-    into one frame and return it through the same send-receive component.
-    """
     if frame is None:
         return None
     if voxel_backend is None:
         err = _offline_frame(frame, "Backend Offline")
-        # Still return side-by-side so layout stays consistent
         return np.hstack([frame, err])
 
     processed = _run_voxel_backend(
@@ -93,24 +69,49 @@ def process_demo_stream(frame: np.ndarray) -> np.ndarray:
         prompt="vanilla minecraft voxel landscape, 3d blocky style, cube aesthetic",
         strength=0.55,
     )
-
-    # Resize processed to match raw height if they differ (rare but safe)
     if processed.shape[0] != frame.shape[0]:
         processed = cv2.resize(processed, (frame.shape[1], frame.shape[0]))
 
-    # Label both panels
     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)
-
-    # Side-by-side in a single frame returned to one WebRTC component
+    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])
 
 
-# ── UI ──────────────────────────────────────────────────────────────────────
-with gr.Blocks(title="Minecraft Spatial Voxel Filter") as demo:
+# ── CSS: KEY FIX — constrain video to its column, never full-screen ─────────
+css = """
+/* Contain both WebRTC viewports inside their grid columns */
+#webrtc-single, #webrtc-demo {
+    max-height: 420px !important;
+    height: 420px !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;
+}
+"""
+
+# ── 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>")
@@ -122,12 +123,11 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter") as demo:
         interactive=True,
     )
 
-    with gr.Row():
+    with gr.Row(equal_height=True):
 
         # ── Left: Controls ─────────────────────────────────────────────────
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, min_width=280):
             gr.Markdown("### 🎛️ Environmental Filters")
-
             prompt_input = gr.Textbox(
                 value="vanilla minecraft voxel landscape, 3d blocky style, retro game cube aesthetic",
                 label="Biome Environment Blueprint",
@@ -137,16 +137,15 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter") as demo:
                 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}`")
             gr.Markdown("_Controls only apply in Minecraft Filter mode._")
 
-        # ── Right: Viewports ───────────────────────────────────────────────
-        with gr.Column(scale=2):
+        # ── Right: Viewports — fixed-height column ─────────────────────────
+        with gr.Column(scale=2, elem_classes=["viewport-col"]):
 
-            # Mode 1: Minecraft Filter — single send-receive, processed output
+            # Mode 1: Minecraft Filter
             with gr.Group(visible=True) as minecraft_layout:
                 gr.Markdown("### 📺 Spatial Render Pipeline")
                 webrtc_single = WebRTC(
@@ -154,22 +153,21 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter") as demo:
                     modality="video",
                     mode="send-receive",
                     rtc_configuration=get_cloudflare_turn_credentials,
+                    elem_id="webrtc-single",   # ← targeted by CSS above
                 )
 
-            # Mode 2: Streaming Demo
-            # FIX BUG 1+2: single send-receive WebRTC, side-by-side frame
-            # returned internally — no separate mode="receive" component needed
+            # Mode 2: Streaming Demo (side-by-side in one component)
             with gr.Group(visible=False) as demo_layout:
-                gr.Markdown("### 📺 Dual-Feed Stream Monitor")
-                gr.Markdown("_Left: Raw camera · Right: Minecraft output_")
+                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
                 )
 
-    # ── Mode Switch ────────────────────────────────────���────────────────────
+    # ── Mode Switch ──────────────────────────────────────────────────────────
     def switch_layout(selected_mode):
         return (
             gr.update(visible=selected_mode == "Minecraft Filter"),
@@ -182,7 +180,7 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter") 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],
@@ -194,7 +192,7 @@ with gr.Blocks(title="Minecraft Spatial Voxel Filter") as demo:
     webrtc_demo.stream(
         fn=process_demo_stream,
         inputs=[webrtc_demo],
-        outputs=[webrtc_demo],          # ← same component, not a separate one
+        outputs=[webrtc_demo],
         time_limit=150,
         concurrency_limit=4,
     )