Update app.py

app.py

@@ -65,8 +65,10 @@ THREE_JS_TEMPLATE = """
                 
                 // Make planets clickable
                 planetMesh.addEventListener('click', (event) => {
-                    document.getElementById('planet-data').value = JSON.stringify(event.target.userData);
-                    document.getElementById('planet-data').dispatchEvent(new Event('change'));
+                    window.parent.postMessage({
+                        type: 'planetSelected',
+                        data: event.target.userData
+                    }, '*');
                     event.stopPropagation();
                 });
                 
@@ -107,7 +109,6 @@ THREE_JS_TEMPLATE = """
             renderer.setSize(window.innerWidth, window.innerHeight);
         });
     </script>
-    <input type="hidden" id="planet-data" value="">
 </body>
 </html>
 """
@@ -171,9 +172,6 @@ with gr.Blocks(title="Webspace Network 3D") as demo:
             # Three.js renderer
             html = gr.HTML(get_threejs_app())
             
-            # Hidden textbox to capture planet data
-            planet_data = gr.Textbox(visible=False)
-            
             # Navigation controls
             system_slider = gr.Slider(0, len(universe['systems'])-1, step=1, label="Star System", value=0)
             travel_btn = gr.Button("Engage Hyperdrive")
@@ -183,25 +181,6 @@ with gr.Blocks(title="Webspace Network 3D") as demo:
             planet_info = gr.JSON(label="Selected Planet")
             system_info = gr.JSON(label="Current System", value=universe['systems'][0])
     
-    # JavaScript to update planet data when clicked
-    demo.load(None, None, None, _js="""
-    function() {
-        const iframe = document.querySelector('iframe');
-        iframe.contentWindow.document.getElementById('planet-data').addEventListener('change', function() {
-            const planetData = this.value;
-            return planetData;
-        });
-        return null;
-    }
-    """, outputs=planet_data)
-    
-    # Update planet info when data changes
-    planet_data.change(
-        lambda x: json.loads(x) if x else None,
-        inputs=planet_data,
-        outputs=planet_info
-    )
-    
     # Handle system travel
     travel_btn.click(
         lambda x: universe['systems'][x],
@@ -209,5 +188,22 @@ with gr.Blocks(title="Webspace Network 3D") as demo:
         outputs=system_info
     )
 
+    # Custom JavaScript for planet selection
+    demo._js = """
+    function() {
+        window.addEventListener('message', function(event) {
+            if (event.data.type === 'planetSelected') {
+                const planetData = JSON.stringify(event.data.data);
+                const iframe = document.querySelector('iframe');
+                const planetInfo = iframe.contentDocument.getElementById('planet-info');
+                if (planetInfo) {
+                    planetInfo.value = planetData;
+                    planetInfo.dispatchEvent(new Event('change'));
+                }
+            }
+        });
+    }
+    """
+
 if __name__ == "__main__":
     demo.launch()