fix: render studio in iframe srcdoc to isolate styles, pre-render on load

- Wrap studio HTML in <iframe srcdoc> to prevent CSS leaking into Gradio page
- Bridge uses postMessage to forward data into iframe
- Studio pre-renders immediately with default 2 selected models
- Studio scene visible on page load, no need to click Generate first

app.py

@@ -48,10 +48,11 @@ MOBILE_CHECK_JS = """
 </script>
 """
 
-# ── Streaming bridge JS — injects once into the page ─────────────────────────
+# ── Streaming bridge JS — forwards data_out changes into studio iframe ────────
 BRIDGE_JS = """
 <script>
 (function() {
+  var lastVal = '';
   function attachBridge() {
     var container = document.getElementById('studio-data');
     if (!container) { setTimeout(attachBridge, 300); return; }
@@ -61,10 +62,14 @@ BRIDGE_JS = """
 
     function onUpdate() {
       var val = el.value !== undefined ? el.value : (el.textContent || '');
-      if (!val) return;
+      if (!val || val === lastVal) return;
+      lastVal = val;
       try {
         var msg = JSON.parse(val);
-        if (window.studioUpdate) window.studioUpdate(msg);
+        var iframe = document.getElementById('ivds-studio-iframe');
+        if (iframe && iframe.contentWindow) {
+          iframe.contentWindow.postMessage(msg, '*');
+        }
       } catch(_) {}
     }
 
@@ -80,6 +85,17 @@ BRIDGE_JS = """
 </script>
 """
 
+
+def _wrap_in_iframe(studio_html: str) -> str:
+    """Wrap raw studio HTML in a sandboxed iframe via srcdoc."""
+    import html as html_mod
+    escaped = html_mod.escape(studio_html)
+    return (
+        f'<iframe id="ivds-studio-iframe" srcdoc="{escaped}" '
+        f'style="width:100%;height:600px;border:none;border-radius:8px;background:#1a1a2e" '
+        f'allow="autoplay" sandbox="allow-scripts allow-same-origin"></iframe>'
+    )
+
 # ── Background temp-dir cleanup daemon ───────────────────────────────────────
 def _cleanup_loop() -> None:
     import glob
@@ -148,7 +164,17 @@ def cancel_pipeline(request: gr.Request | None = None):
         flag.set()
 
 
-# ── Start generation: build + inject studio HTML first ───────────────────────
+# ── Build studio iframe from model list ──────────────────────────────────────
+def _build_studio_iframe(selected_models: list[str]) -> str:
+    """Build the studio iframe HTML for the given model list."""
+    import threading as _t
+    pipeline_tmp = Pipeline("preview demo", selected_models, "placeholder", _t.Event())
+    assignments = pipeline_tmp.get_model_assignments()
+    raw_html = build_studio_html(assignments)
+    return _wrap_in_iframe(raw_html)
+
+
+# ── Start generation: rebuild studio with actual models ──────────────────────
 def start_generation(
     trigger: str,
     selected_models: list[str],
@@ -156,11 +182,8 @@ def start_generation(
 ):
     if not oauth_token or not oauth_token.token:
         return gr.update(), gr.update(visible=False)
-    import threading as _t
-    pipeline_tmp = Pipeline(trigger.strip(), selected_models, oauth_token.token, _t.Event())
-    assignments = pipeline_tmp.get_model_assignments()
-    html = build_studio_html(assignments)
-    return html, gr.update(visible=False)
+    iframe = _build_studio_iframe(selected_models)
+    return iframe, gr.update(visible=False)
 
 
 # ── Generate button enable/disable ───────────────────────────────────────────
@@ -235,15 +258,11 @@ with gr.Blocks(title="🎮 Immersive Vibe Development Studio") as demo:
 
                 download_file = gr.File(label="⬇ Download Game ZIP", visible=False)
 
-            # Right: studio scene
+            # Right: studio scene (pre-rendered with default models)
             with gr.Column(scale=6):
+                _default_iframe = _build_studio_iframe(AVAILABLE_MODELS[:2])
                 studio_html = gr.HTML(
-                    value=(
-                        "<div style='color:#666;padding:3rem;font-family:monospace;"
-                        "text-align:center;background:#111;min-height:400px;"
-                        "display:flex;align-items:center;justify-content:center'>"
-                        "<span>Log in, enter a trigger, select models, then click Generate.</span></div>"
-                    ),
+                    value=_default_iframe,
                     elem_id="ivds-studio",
                 )
 

studio.py

@@ -441,6 +441,13 @@ window.studioUpdate = function(msg) {{
   }}
 }};
 
+// Listen for messages from parent (Gradio bridge)
+window.addEventListener('message', function(e) {{
+  if (e.data && e.data.type) {{
+    window.studioUpdate(e.data);
+  }}
+}});
+
 // Animation loop
 const clock = new THREE.Clock();
 const tmpVec = new THREE.Vector3();