Spaces:

ewebspace
/

webspacex

Sleeping

App Files Files Community

ewebspace commited on Aug 4, 2025

Commit

b001b00

verified ·

1 Parent(s): db85807

Create app.py

Browse files

Files changed (1) hide show

app.py +258 -0

app.py ADDED Viewed

	@@ -0,0 +1,258 @@

+import gradio as gr
+import numpy as np
+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>
+    <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);
+        // 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)
+        self.star_types = {
+            'O': {'color': [0.7, 0.8, 1.0], 'temp': 30000},
+            'B': {'color': [0.8, 0.9, 1.0], 'temp': 20000},
+            'G': {'color': [1.0, 0.93, 0.7], 'temp': 5700}
+        }
+        self.planet_types = [
+            {'name': 'Lava', 'color': [0.8, 0.3, 0.1]},
+            {'name': 'Ocean', 'color': [0.1, 0.3, 0.8]},
+            {'name': 'Desert', 'color': [0.9, 0.8, 0.5]}
+        ]
+    def generate_system(self, index):
+        star_class = self.rng.choice(list(self.star_types.keys()))
+        system = {
+            'name': f"{star_class}-{index}",
+            'star_color': self.star_types[star_class]['color'],
+            'planets': []
+        }
+        num_planets = self.rng.randint(3, 7)
+        for i in range(num_planets):
+            planet_type = self.rng.choice(self.planet_types)
+            system['planets'].append({
+                'name': f"Planet-{i}",
+                'type': planet_type['name'],
+                'color': planet_type['color'],
+                'size': self.rng.uniform(0.5, 1.5),
+                'resources': self.rng.randint(1, 5),
+                'habitability': self.rng.uniform(0, 1)
+            })
+        return system
+    def generate_universe(self, num_systems=5):
+        return {
+            'systems': [self.generate_system(i) for i in range(num_systems)],
+            'seed': 42
+        }
+# Initialize universe
+generator = UniverseGenerator()
+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")
+    gr.Markdown("Explore procedurally generated star systems in your browser")
+    with gr.Row():
+        with gr.Column(scale=2):
+            # Three.js renderer
+            html = gr.HTML(get_threejs_app(), elem_id="threejs-container")
+            # Navigation controls
+            system_slider = gr.Slider(0, len(universe['systems'])-1, step=1, label="Star System")
+            travel_btn = gr.Button("Engage Hyperdrive")
+        with gr.Column(scale=1):
+            # 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__":
+    demo.launch()