Spaces:

ewebspace
/

webspacex

Sleeping

App Files Files Community

ewebspace commited on Aug 4

Commit

76b1098

verified ·

1 Parent(s): cb078c7

Update app.py

Browse files

Files changed (1) hide show

app.py +103 -39

app.py CHANGED Viewed

@@ -3,7 +3,11 @@ import numpy as np
 from typing import Optional
 import json
 from pathlib import Path
 THREE_JS_TEMPLATE = """
 <!DOCTYPE html>
 <html>
@@ -12,17 +16,25 @@ THREE_JS_TEMPLATE = """
     <style>
         body {{ margin: 0; overflow: hidden; }}
         canvas {{ display: block; }}
     </style>
 </head>
 <body>
     <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
     <script>
         // Scene setup
         const scene = new THREE.Scene();
-        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         const renderer = new THREE.WebGLRenderer({{ antialias: true }});
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);
@@ -30,18 +42,82 @@ THREE_JS_TEMPLATE = """
         // Universe data
         const universeData = {universe_json};
-        // Rest of your Three.js code...
     </script>
 </body>
 </html>
 """
-def get_threejs_app():
-    """Generate the Three.js HTML with current universe data"""
-    # Escape curly braces in the template first
-    template = THREE_JS_TEMPLATE.replace('{', '{{').replace('}', '}}')
-    # Then format only the universe_json part
-    return template.replace('{universe_json}', json.dumps(universe))
 class UniverseGenerator:
     def __init__(self, seed=42):
         self.rng = np.random.RandomState(seed)
@@ -90,15 +166,13 @@ universe = generator.generate_universe()
 def get_threejs_app():
     """Generate the Three.js HTML with current universe data"""
-    return THREE_JS_TEMPLATE.format(universe_json=json.dumps(universe))
-def travel_to_system(system_index: int):
-    """Handle system transition"""
-    system_index = max(0, min(system_index, len(universe['systems'])-1))
-    return {
-        'system': universe['systems'][system_index],
-        'html': get_threejs_app()
-    }
 with gr.Blocks(title="Webspace Network 3D") as demo:
     gr.Markdown("# 🚀 Webspace Network 3D")
@@ -117,40 +191,30 @@ with gr.Blocks(title="Webspace Network 3D") as demo:
             # Planet info display
             planet_info = gr.JSON(label="Selected Planet")
             system_info = gr.JSON(label="Current System", value=universe['systems'][0])
-            # Debug info
-            debug = gr.Textbox(label="Debug Console")
-    # Handle planet selection from Three.js
-    demo.load(
-        None,
         None,
         None,
         _js="""
         () => {
-            window.addEventListener('message', (event) => {
-                if (event.data.type === 'planetSelected') {
-                    return event.data.data;
-                }
             });
-            return null;
         }
-        """,
-        outputs=planet_info
     )
     # Handle system travel
     travel_btn.click(
-        travel_to_system,
         inputs=system_slider,
-        outputs=[system_info, html],
-        _js="""
-        (index) => {
-            const iframe = document.querySelector('#threejs-container iframe');
-            iframe.contentWindow.postMessage({type: 'travelToSystem', systemIndex: index}, '*');
-            return index;
-        }
-        """
     )
 if __name__ == "__main__":

 from typing import Optional
 import json
 from pathlib import Path
+import gradio as gr
+import numpy as np
+import json
+# Three.js template with proper escaping
 THREE_JS_TEMPLATE = """
 <!DOCTYPE html>
 <html>
     <style>
         body {{ margin: 0; overflow: hidden; }}
         canvas {{ display: block; }}
+        #info {{
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            background: rgba(0,0,0,0.5);
+            padding: 10px;
+        }}
     </style>
 </head>
 <body>
+    <div id="info">Click on planets to see details</div>
     <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
     <script>
         // Scene setup
         const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
         const renderer = new THREE.WebGLRenderer({{ antialias: true }});
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);
         // Universe data
         const universeData = {universe_json};
+        // Create star system
+        function createSystem(systemData) {{
+            // Create star
+            const starGeometry = new THREE.SphereGeometry(2, 32, 32);
+            const starMaterial = new THREE.MeshBasicMaterial({{
+                color: new THREE.Color(...systemData.star_color),
+                emissive: new THREE.Color(...systemData.star_color).multiplyScalar(0.5)
+            }});
+            const star = new THREE.Mesh(starGeometry, starMaterial);
+            scene.add(star);
+            // Create planets
+            systemData.planets.forEach((planet, i) => {{
+                const planetGeometry = new THREE.SphereGeometry(planet.size, 32, 32);
+                const planetMaterial = new THREE.MeshStandardMaterial({{
+                    color: new THREE.Color(...planet.color),
+                    roughness: 0.8,
+                    metalness: 0.2
+                }});
+                const planetMesh = new THREE.Mesh(planetGeometry, planetMaterial);
+                // Position in orbit
+                const orbitRadius = 5 + (i * 3);
+                planetMesh.position.x = orbitRadius;
+                planetMesh.userData = planet;
+                // Add click handler
+                planetMesh.addEventListener('click', (event) => {{
+                    window.parent.postMessage({{
+                        type: 'planetSelected',
+                        data: event.target.userData
+                    }}, '*');
+                    event.stopPropagation();
+                }});
+                // Create orbit path
+                const orbit = new THREE.Line(
+                    new THREE.BufferGeometry().setFromPoints(
+                        new THREE.EllipseCurve(0, 0, orbitRadius, orbitRadius, 0, Math.PI * 2, false).getPoints(100)
+                    ),
+                    new THREE.LineBasicMaterial({{ color: 0x888888 }})
+                );
+                orbit.rotation.x = Math.PI / 2;
+                scene.add(planetMesh);
+                scene.add(orbit);
+            }});
+        }}
+        // Initialize first system
+        createSystem(universeData.systems[0]);
+        // Camera controls
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        camera.position.set(0, 20, 30);
+        controls.update();
+        // Animation loop
+        function animate() {{
+            requestAnimationFrame(animate);
+            controls.update();
+            renderer.render(scene, camera);
+        }}
+        animate();
+        // Handle window resize
+        window.addEventListener('resize', () => {{
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }});
     </script>
 </body>
 </html>
 """
 class UniverseGenerator:
     def __init__(self, seed=42):
         self.rng = np.random.RandomState(seed)
 def get_threejs_app():
     """Generate the Three.js HTML with current universe data"""
+    return THREE_JS_TEMPLATE.replace('{universe_json}', json.dumps(universe))
+def handle_planet_select(data: gr.SelectData):
+    """Handle planet selection from Three.js"""
+    if hasattr(data, 'value'):
+        return data.value
+    return None
 with gr.Blocks(title="Webspace Network 3D") as demo:
     gr.Markdown("# 🚀 Webspace Network 3D")
             # Planet info display
             planet_info = gr.JSON(label="Selected Planet")
             system_info = gr.JSON(label="Current System", value=universe['systems'][0])
+    # Handle planet selection via custom JS
+    html.change(
         None,
         None,
+        planet_info,
         _js="""
         () => {
+            return new Promise((resolve) => {
+                window.addEventListener('message', (event) => {
+                    if (event.data.type === 'planetSelected') {
+                        resolve(event.data.data);
+                    }
+                });
             });
         }
+        """
     )
     # Handle system travel
     travel_btn.click(
+        lambda x: universe['systems'][x],
         inputs=system_slider,
+        outputs=system_info
     )
 if __name__ == "__main__":