Spaces:

ewebspace
/

webspacex

Sleeping

App Files Files Community

ewebspace commited on Aug 4, 2025

Commit

ad95f54

verified ·

1 Parent(s): ddfa2d0

Update app.py

Browse files

Files changed (1) hide show

app.py +12 -112

app.py CHANGED Viewed

@@ -4,15 +4,14 @@ from typing import Optional
 import json
 from pathlib import Path
-# Three.js template for the space simulation
 THREE_JS_TEMPLATE = """
 <!DOCTYPE html>
 <html>
 <head>
     <title>Webspace Network 3D</title>
     <style>
-        body { margin: 0; overflow: hidden; }
-        canvas { display: block; }
     </style>
 </head>
 <body>
@@ -24,125 +23,26 @@ THREE_JS_TEMPLATE = """
         // 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);
-        // Lighting
-        const ambientLight = new THREE.AmbientLight(0x404040);
-        scene.add(ambientLight);
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-        directionalLight.position.set(1, 1, 1);
-        scene.add(directionalLight);
-        // Generate universe from seed
         const universeData = {universe_json};
-        const celestialBodies = [];
-        // Create star system
-        function createSystem(systemData) {{
-            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 event
-                planetMesh.addEventListener('click', (event) => {{
-                    const planetInfo = event.target.userData;
-                    parent.postMessage({{type: 'planetSelected', data: planetInfo}}, '*');
-                    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, linewidth: 1 })
-                );
-                orbit.rotation.x = Math.PI / 2;
-                scene.add(planetMesh);
-                scene.add(orbit);
-                celestialBodies.push({{ mesh: planetMesh, orbitRadius, speed: 0.01 + Math.random() * 0.02 }});
-            }});
-        }}
-        // Initialize first system
-        createSystem(universeData.systems[0]);
-        // Player ship
-        let playerShip;
-        const loader = new THREE.GLTFLoader();
-        loader.load(
-            'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/SpaceShip/glTF/SpaceShip.gltf',
-            (gltf) => {{
-                playerShip = gltf.scene;
-                playerShip.scale.set(0.5, 0.5, 0.5);
-                playerShip.position.set(0, 0, 10);
-                scene.add(playerShip);
-            }}
-        );
-        // Camera controls
-        const controls = new THREE.OrbitControls(camera, renderer.domElement);
-        controls.target.set(0, 0, 0);
-        controls.maxDistance = 50;
-        camera.position.set(0, 20, 30);
-        // Handle window resize
-        window.addEventListener('resize', () => {{
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }});
-        // Handle messages from Gradio
-        window.addEventListener('message', (event) => {{
-            if (event.data.type === 'travelToSystem') {{
-                // Transition to new system
-                scene.children = scene.children.filter(obj => obj.type !== 'Mesh');
-                createSystem(universeData.systems[event.data.systemIndex]);
-            }}
-        }});
-        // Animation loop
-        function animate() {{
-            requestAnimationFrame(animate);
-            // Rotate planets
-            celestialBodies.forEach(body => {{
-                body.mesh.position.x = Math.cos(Date.now() * body.speed) * body.orbitRadius;
-                body.mesh.position.z = Math.sin(Date.now() * body.speed) * body.orbitRadius;
-            }});
-            controls.update();
-            renderer.render(scene, camera);
-        }}
-        animate();
     </script>
 </body>
 </html>
 """
 class UniverseGenerator:
     def __init__(self, seed=42):
         self.rng = np.random.RandomState(seed)

 import json
 from pathlib import Path
 THREE_JS_TEMPLATE = """
 <!DOCTYPE html>
 <html>
 <head>
     <title>Webspace Network 3D</title>
     <style>
+        body {{ margin: 0; overflow: hidden; }}
+        canvas {{ display: block; }}
     </style>
 </head>
 <body>
         // 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};
+        // 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)