import gradio as gr import numpy as np import json import random # Three.js template with escaped CSS THREE_JS_TEMPLATE = """ Webspace Network

Webspace Network

Health: 100/100
100{percent}
Fuel: 100/100
100{percent}

Resources:

Press [E] to interact

Planet Name

Type: Desert
Resources: Iron, Water
Habitability: 0.75

Game Menu

""".replace("{percent}", "%%") # Replace temporary placeholder with actual % sign class PlanetGenerator: def __init__(self, seed=42): self.rng = np.random.RandomState(seed) self.planet_types = [ 'Lava', 'Ocean', 'Desert', 'Ice', 'Jungle', 'Toxic', 'Radioactive' ] self.resources = [ 'Iron', 'Copper', 'Gold', 'Water', 'Oxygen', 'Hydrogen', 'Silicon', 'Titanium', 'Uranium', 'Platinum' ] def generate_planet(self, index): planet_type = self.rng.choice(self.planet_types) # Select 2-4 random resources num_resources = self.rng.randint(2, 5) planet_resources = random.sample(self.resources, num_resources) return { 'name': f"Planet-{chr(65 + index)}", 'type': planet_type, 'resources': planet_resources, 'size': self.rng.uniform(0.8, 1.5), 'habitability': self.rng.uniform(0.1, 0.9) } def generate_system(self, index): return { 'name': f"System-{index}", 'planets': [self.generate_planet(i) for i in range(self.rng.randint(3, 7))] } def generate_universe(self, num_systems=1): return { 'systems': [self.generate_system(i) for i in range(num_systems)] } # Initialize universe generator = PlanetGenerator() universe = generator.generate_universe() def get_threejs_app(): """Generate the Three.js HTML with current universe data""" # First replace all {percent} placeholders with %% template = THREE_JS_TEMPLATE # Then format the universe_json part return template.replace("{universe_json}", json.dumps(universe)) with gr.Blocks(title="Webspace Network", css=".gradio-container {background: linear-gradient(to bottom, #000033, #000066);}") as demo: gr.Markdown("# 🚀 Webspace Network - Space Exploration Simulator") gr.Markdown("### Procedurally generated universe inspired by No Man's Sky") with gr.Row(): with gr.Column(scale=2): # Three.js renderer html = gr.HTML(get_threejs_app()) # Game instructions with gr.Accordion("Game Controls", open=False): gr.Markdown(""" **Movement:** - W/S: Move forward/backward - A/D: Move left/right - Q/E: Rotate ship - Mouse: Look around **Interaction:** - E: Interact with objects - M: Open game menu **Planets:** - Click on planets to see details - Press 'Mine Resources' to collect resources """) with gr.Column(scale=1): # Game state display with gr.Group(): gr.Markdown("### Game State") health = gr.Slider(0, 100, value=100, label="Health", interactive=False) fuel = gr.Slider(0, 100, value=100, label="Fuel", interactive=False) # Resources display with gr.Group(): gr.Markdown("### Resources") resources = gr.JSON(value={ 'Iron': 10, 'Water': 5, 'Fuel': 20, 'Gold': 2 }, label="Inventory") # Game actions with gr.Group(): gr.Markdown("### Actions") with gr.Row(): save_btn = gr.Button("💾 Save Game") load_btn = gr.Button("📂 Load Game") new_btn = gr.Button("🆕 New Game") # Current planet info with gr.Group(): gr.Markdown("### Current Planet") planet_info = gr.JSON(label="Planet Data", value={}) # Debug console with gr.Group(): gr.Markdown("### Debug Console") console = gr.Textbox(label="Game Events", interactive=False) # Game actions def save_game(): return {"message": "Game saved successfully!"} def load_game(): return {"message": "Game loaded successfully!"} def new_game(): return { "health": 100, "fuel": 100, "resources": { 'Iron': 10, 'Water': 5, 'Fuel': 20, 'Gold': 2 }, "planet_info": {}, "console": "New game started" } save_btn.click( save_game, outputs=console ) load_btn.click( load_game, outputs=console ) new_btn.click( new_game, outputs=[health, fuel, resources, planet_info, console] ) if __name__ == "__main__": demo.launch()