Hugging Face's logo

Spaces:
ewebspace
/
webspacex
Sleeping

App Files Community
ewebspace commited on
Commit
9f95d59
·
verified ·
1 Parent(s): 76b1098

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +48 -56
app.py CHANGED
@@ -1,10 +1,5 @@
1
  import gradio as gr
2
  import numpy as np
3
- from typing import Optional
4
- import json
5
- from pathlib import Path
6
- import gradio as gr
7
- import numpy as np
8
  import json
9
 
10
  # Three.js template with proper escaping
@@ -14,16 +9,16 @@ THREE_JS_TEMPLATE = """
14
  <head>
15
  <title>Webspace Network 3D</title>
16
  <style>
17
- body {{ margin: 0; overflow: hidden; }}
18
- canvas {{ display: block; }}
19
- #info {{
20
  position: absolute;
21
  top: 10px;
22
  left: 10px;
23
  color: white;
24
  background: rgba(0,0,0,0.5);
25
  padding: 10px;
26
- }}
27
  </style>
28
  </head>
29
  <body>
@@ -35,32 +30,32 @@ THREE_JS_TEMPLATE = """
35
  // Scene setup
36
  const scene = new THREE.Scene();
37
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
38
- const renderer = new THREE.WebGLRenderer({{ antialias: true }});
39
  renderer.setSize(window.innerWidth, window.innerHeight);
40
  document.body.appendChild(renderer.domElement);
41
 
42
  // Universe data
43
- const universeData = {universe_json};
44
 
45
  // Create star system
46
- function createSystem(systemData) {{
47
  // Create star
48
  const starGeometry = new THREE.SphereGeometry(2, 32, 32);
49
- const starMaterial = new THREE.MeshBasicMaterial({{
50
  color: new THREE.Color(...systemData.star_color),
51
  emissive: new THREE.Color(...systemData.star_color).multiplyScalar(0.5)
52
- }});
53
  const star = new THREE.Mesh(starGeometry, starMaterial);
54
  scene.add(star);
55
 
56
  // Create planets
57
- systemData.planets.forEach((planet, i) => {{
58
  const planetGeometry = new THREE.SphereGeometry(planet.size, 32, 32);
59
- const planetMaterial = new THREE.MeshStandardMaterial({{
60
  color: new THREE.Color(...planet.color),
61
  roughness: 0.8,
62
  metalness: 0.2
63
- }});
64
  const planetMesh = new THREE.Mesh(planetGeometry, planetMaterial);
65
 
66
  // Position in orbit
@@ -68,28 +63,26 @@ THREE_JS_TEMPLATE = """
68
  planetMesh.position.x = orbitRadius;
69
  planetMesh.userData = planet;
70
 
71
- // Add click handler
72
- planetMesh.addEventListener('click', (event) => {{
73
- window.parent.postMessage({{
74
- type: 'planetSelected',
75
- data: event.target.userData
76
- }}, '*');
77
  event.stopPropagation();
78
- }});
79
 
80
  // Create orbit path
81
  const orbit = new THREE.Line(
82
  new THREE.BufferGeometry().setFromPoints(
83
  new THREE.EllipseCurve(0, 0, orbitRadius, orbitRadius, 0, Math.PI * 2, false).getPoints(100)
84
  ),
85
- new THREE.LineBasicMaterial({{ color: 0x888888 }})
86
  );
87
  orbit.rotation.x = Math.PI / 2;
88
 
89
  scene.add(planetMesh);
90
  scene.add(orbit);
91
- }});
92
- }}
93
 
94
  // Initialize first system
95
  createSystem(universeData.systems[0]);
@@ -100,20 +93,21 @@ THREE_JS_TEMPLATE = """
100
  controls.update();
101
 
102
  // Animation loop
103
- function animate() {{
104
  requestAnimationFrame(animate);
105
  controls.update();
106
  renderer.render(scene, camera);
107
- }}
108
  animate();
109
 
110
  // Handle window resize
111
- window.addEventListener('resize', () => {{
112
  camera.aspect = window.innerWidth / window.innerHeight;
113
  camera.updateProjectionMatrix();
114
  renderer.setSize(window.innerWidth, window.innerHeight);
115
- }});
116
  </script>
 
117
  </body>
118
  </html>
119
  """
@@ -166,13 +160,7 @@ universe = generator.generate_universe()
166
 
167
  def get_threejs_app():
168
  """Generate the Three.js HTML with current universe data"""
169
- return THREE_JS_TEMPLATE.replace('{universe_json}', json.dumps(universe))
170
-
171
- def handle_planet_select(data: gr.SelectData):
172
- """Handle planet selection from Three.js"""
173
- if hasattr(data, 'value'):
174
- return data.value
175
- return None
176
 
177
  with gr.Blocks(title="Webspace Network 3D") as demo:
178
  gr.Markdown("# 🚀 Webspace Network 3D")
@@ -181,10 +169,13 @@ with gr.Blocks(title="Webspace Network 3D") as demo:
181
  with gr.Row():
182
  with gr.Column(scale=2):
183
  # Three.js renderer
184
- html = gr.HTML(get_threejs_app(), elem_id="threejs-container")
 
 
 
185
 
186
  # Navigation controls
187
- system_slider = gr.Slider(0, len(universe['systems'])-1, step=1, label="Star System")
188
  travel_btn = gr.Button("Engage Hyperdrive")
189
 
190
  with gr.Column(scale=1):
@@ -192,22 +183,23 @@ with gr.Blocks(title="Webspace Network 3D") as demo:
192
  planet_info = gr.JSON(label="Selected Planet")
193
  system_info = gr.JSON(label="Current System", value=universe['systems'][0])
194
 
195
- # Handle planet selection via custom JS
196
- html.change(
197
- None,
198
- None,
199
- planet_info,
200
- _js="""
201
- () => {
202
- return new Promise((resolve) => {
203
- window.addEventListener('message', (event) => {
204
- if (event.data.type === 'planetSelected') {
205
- resolve(event.data.data);
206
- }
207
- });
208
- });
209
- }
210
- """
 
211
  )
212
 
213
  # Handle system travel
 
1
  import gradio as gr
2
  import numpy as np
 
 
 
 
 
3
  import json
4
 
5
  # Three.js template with proper escaping
 
9
  <head>
10
  <title>Webspace Network 3D</title>
11
  <style>
12
+ body { margin: 0; overflow: hidden; }
13
+ canvas { display: block; }
14
+ #info {
15
  position: absolute;
16
  top: 10px;
17
  left: 10px;
18
  color: white;
19
  background: rgba(0,0,0,0.5);
20
  padding: 10px;
21
+ }
22
  </style>
23
  </head>
24
  <body>
 
30
  // Scene setup
31
  const scene = new THREE.Scene();
32
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
33
+ const renderer = new THREE.WebGLRenderer({ antialias: true });
34
  renderer.setSize(window.innerWidth, window.innerHeight);
35
  document.body.appendChild(renderer.domElement);
36
 
37
  // Universe data
38
+ const universeData = %s;
39
 
40
  // Create star system
41
+ function createSystem(systemData) {
42
  // Create star
43
  const starGeometry = new THREE.SphereGeometry(2, 32, 32);
44
+ const starMaterial = new THREE.MeshBasicMaterial({
45
  color: new THREE.Color(...systemData.star_color),
46
  emissive: new THREE.Color(...systemData.star_color).multiplyScalar(0.5)
47
+ });
48
  const star = new THREE.Mesh(starGeometry, starMaterial);
49
  scene.add(star);
50
 
51
  // Create planets
52
+ systemData.planets.forEach((planet, i) => {
53
  const planetGeometry = new THREE.SphereGeometry(planet.size, 32, 32);
54
+ const planetMaterial = new THREE.MeshStandardMaterial({
55
  color: new THREE.Color(...planet.color),
56
  roughness: 0.8,
57
  metalness: 0.2
58
+ });
59
  const planetMesh = new THREE.Mesh(planetGeometry, planetMaterial);
60
 
61
  // Position in orbit
 
63
  planetMesh.position.x = orbitRadius;
64
  planetMesh.userData = planet;
65
 
66
+ // Make planets clickable
67
+ planetMesh.addEventListener('click', (event) => {
68
+ document.getElementById('planet-data').value = JSON.stringify(event.target.userData);
69
+ document.getElementById('planet-data').dispatchEvent(new Event('change'));
 
 
70
  event.stopPropagation();
71
+ });
72
 
73
  // Create orbit path
74
  const orbit = new THREE.Line(
75
  new THREE.BufferGeometry().setFromPoints(
76
  new THREE.EllipseCurve(0, 0, orbitRadius, orbitRadius, 0, Math.PI * 2, false).getPoints(100)
77
  ),
78
+ new THREE.LineBasicMaterial({ color: 0x888888 })
79
  );
80
  orbit.rotation.x = Math.PI / 2;
81
 
82
  scene.add(planetMesh);
83
  scene.add(orbit);
84
+ });
85
+ }
86
 
87
  // Initialize first system
88
  createSystem(universeData.systems[0]);
 
93
  controls.update();
94
 
95
  // Animation loop
96
+ function animate() {
97
  requestAnimationFrame(animate);
98
  controls.update();
99
  renderer.render(scene, camera);
100
+ }
101
  animate();
102
 
103
  // Handle window resize
104
+ window.addEventListener('resize', () => {
105
  camera.aspect = window.innerWidth / window.innerHeight;
106
  camera.updateProjectionMatrix();
107
  renderer.setSize(window.innerWidth, window.innerHeight);
108
+ });
109
  </script>
110
+ <input type="hidden" id="planet-data" value="">
111
  </body>
112
  </html>
113
  """
 
160
 
161
  def get_threejs_app():
162
  """Generate the Three.js HTML with current universe data"""
163
+ return THREE_JS_TEMPLATE % json.dumps(universe)
 
 
 
 
 
 
164
 
165
  with gr.Blocks(title="Webspace Network 3D") as demo:
166
  gr.Markdown("# 🚀 Webspace Network 3D")
 
169
  with gr.Row():
170
  with gr.Column(scale=2):
171
  # Three.js renderer
172
+ html = gr.HTML(get_threejs_app())
173
+
174
+ # Hidden textbox to capture planet data
175
+ planet_data = gr.Textbox(visible=False)
176
 
177
  # Navigation controls
178
+ system_slider = gr.Slider(0, len(universe['systems'])-1, step=1, label="Star System", value=0)
179
  travel_btn = gr.Button("Engage Hyperdrive")
180
 
181
  with gr.Column(scale=1):
 
183
  planet_info = gr.JSON(label="Selected Planet")
184
  system_info = gr.JSON(label="Current System", value=universe['systems'][0])
185
 
186
+ # JavaScript to update planet data when clicked
187
+ demo.load(None, None, None, _js="""
188
+ function() {
189
+ const iframe = document.querySelector('iframe');
190
+ iframe.contentWindow.document.getElementById('planet-data').addEventListener('change', function() {
191
+ const planetData = this.value;
192
+ return planetData;
193
+ });
194
+ return null;
195
+ }
196
+ """, outputs=planet_data)
197
+
198
+ # Update planet info when data changes
199
+ planet_data.change(
200
+ lambda x: json.loads(x) if x else None,
201
+ inputs=planet_data,
202
+ outputs=planet_info
203
  )
204
 
205
  # Handle system travel