Hugging Face's logo

Spaces:
IRRbert
/
irr
Running

App Files Community
IRRbert commited on
Commit
d1989ab
·
verified ·
1 Parent(s): d2a0afe

An impressive dummy visualization of a genetically generic neural network. Lightning flashes along the neural pathways, the network structure (i.e., the number of neurons) grows and shrinks in a loop. The whole thing rotates. Exciting camera pan! Broadcast style! be creative. - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +298 -18
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Irr
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: irr
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,299 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Neural Network Visualization</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <style>
10
+ body {
11
+ margin: 0;
12
+ overflow: hidden;
13
+ background-color: #000;
14
+ }
15
+ #canvas-container {
16
+ position: absolute;
17
+ top: 0;
18
+ left: 0;
19
+ width: 100%;
20
+ height: 100%;
21
+ }
22
+ .overlay {
23
+ position: absolute;
24
+ top: 0;
25
+ left: 0;
26
+ width: 100%;
27
+ height: 100%;
28
+ pointer-events: none;
29
+ z-index: 10;
30
+ }
31
+ .title {
32
+ position: absolute;
33
+ top: 20%;
34
+ left: 50%;
35
+ transform: translate(-50%, -50%);
36
+ color: #00f3ff;
37
+ font-family: 'Arial', sans-serif;
38
+ font-size: 3rem;
39
+ text-align: center;
40
+ text-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
41
+ opacity: 0.9;
42
+ }
43
+ .subtitle {
44
+ position: absolute;
45
+ top: 30%;
46
+ left: 50%;
47
+ transform: translate(-50%, -50%);
48
+ color: #ffffff;
49
+ font-family: 'Arial', sans-serif;
50
+ font-size: 1.5rem;
51
+ text-align: center;
52
+ opacity: 0.7;
53
+ }
54
+ .controls {
55
+ position: absolute;
56
+ bottom: 20px;
57
+ left: 50%;
58
+ transform: translateX(-50%);
59
+ color: white;
60
+ font-family: 'Arial', sans-serif;
61
+ text-align: center;
62
+ background: rgba(0, 0, 0, 0.5);
63
+ padding: 10px 20px;
64
+ border-radius: 10px;
65
+ }
66
+ </style>
67
+ </head>
68
+ <body>
69
+ <div id="canvas-container"></div>
70
+ <div class="overlay">
71
+ <div class="title">GENETIC NEURAL NETWORK</div>
72
+ <div class="subtitle">DYNAMIC PATHWAY ACTIVATION</div>
73
+ <div class="controls">Broadcast Visualization</div>
74
+ </div>
75
+
76
+ <script>
77
+ // Main Three.js variables
78
+ let scene, camera, renderer;
79
+ let nodes = [];
80
+ let connections = [];
81
+ let connectionLines = [];
82
+ let nodeMeshes = [];
83
+ let lightningGroup = new THREE.Group();
84
+ let networkGroup = new THREE.Group();
85
+
86
+ // Configuration
87
+ const NODE_COUNT = 80;
88
+ const CONNECTION_DENSITY = 0.15;
89
+ const NODE_RADIUS = 0.2;
90
+ const CONNECTION_WIDTH = 0.03;
91
+ const ROTATION_SPEED = 0.001;
92
+ const PULSE_SPEED = 0.02;
93
+ const LIGHTNING_CHANCE = 0.005;
94
+ let currentCameraAngle = 0;
95
+ let cameraRadius = 25;
96
+ let targetCameraRadius = 25;
97
+
98
+ // Initialize Three.js
99
+ function init() {
100
+ // Create scene
101
+ scene = new THREE.Scene();
102
+ scene.background = new THREE.Color(0x000011);
103
+ scene.fog = new THREE.Fog(0x000011, 15, 30);
104
+
105
+ // Create camera
106
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
107
+ camera.position.set(0, 0, 25);
108
+
109
+ // Create renderer
110
+ renderer = new THREE.WebGLRenderer({ antialias: true });
111
+ renderer.setSize(window.innerWidth, window.innerHeight);
112
+ renderer.setPixelRatio(window.devicePixelRatio);
113
+ document.getElementById('canvas-container').appendChild(renderer.domElement);
114
+
115
+ // Add groups to scene
116
+ scene.add(networkGroup);
117
+ scene.add(lightningGroup);
118
+
119
+ // Create neural network
120
+ createNodes();
121
+ createConnections();
122
+
123
+ // Add ambient light
124
+ const ambientLight = new THREE.AmbientLight(0x222255);
125
+ scene.add(ambientLight);
126
+
127
+ // Add directional light
128
+ const directionalLight = new THREE.DirectionalLight(0x00aaff, 1);
129
+ directionalLight.position.set(5, 5, 5);
130
+ scene.add(directionalLight);
131
+
132
+ // Add point lights for more dynamic lighting
133
+ const pointLight1 = new THREE.PointLight(0xff00ff, 1, 100);
134
+ pointLight1.position.set(10, 10, 10);
135
+ scene.add(pointLight1);
136
+
137
+ const pointLight2 = new THREE.PointLight(0x00ffff, 1, 100);
138
+ pointLight2.position.set(-10, -10, -10);
139
+ scene.add(pointLight2);
140
+
141
+ // Handle window resize
142
+ window.addEventListener('resize', onWindowResize);
143
+
144
+ // Start animation loop
145
+ animate();
146
+ }
147
+
148
+ function createNodes() {
149
+ // Create nodes in a spherical distribution
150
+ for (let i = 0; i < NODE_COUNT; i++) {
151
+ const phi = Math.acos(-1 + (2 * i) / NODE_COUNT);
152
+ const theta = Math.sqrt(NODE_COUNT * Math.PI) * phi;
153
+
154
+ const x = 10 * Math.cos(theta) * Math.sin(phi);
155
+ const y = 10 * Math.sin(theta) * Math.sin(phi);
156
+ const z = 10 * Math.cos(phi);
157
+
158
+ nodes.push(new THREE.Vector3(x, y, z));
159
+
160
+ // Create node mesh
161
+ const geometry = new THREE.SphereGeometry(NODE_RADIUS, 16, 16);
162
+ const material = new THREE.MeshPhongMaterial({
163
+ color: 0x00ffff,
164
+ emissive: 0x0066aa,
165
+ emissiveIntensity: 0.5,
166
+ transparent: true,
167
+ opacity: 0.8
168
+ });
169
+
170
+ const nodeMesh = new THREE.Mesh(geometry, material);
171
+ nodeMesh.position.copy(nodes[i]);
172
+ nodeMesh.userData.originalScale = 1;
173
+ nodeMesh.userData.pulsePhase = Math.random() * Math.PI * 2;
174
+ nodeMeshes.push(nodeMesh);
175
+ networkGroup.add(nodeMesh);
176
+ }
177
+ }
178
+
179
+ function createConnections() {
180
+ // Create connections between nodes
181
+ for (let i = 0; i < NODE_COUNT; i++) {
182
+ for (let j = i + 1; j < NODE_COUNT; j++) {
183
+ // Randomly create connections based on density
184
+ if (Math.random() < CONNECTION_DENSITY) {
185
+ connections.push([i, j]);
186
+
187
+ // Create connection line
188
+ const material = new THREE.LineBasicMaterial({
189
+ color: 0x00aaff,
190
+ transparent: true,
191
+ opacity: 0.3
192
+ });
193
+
194
+ const points = [
195
+ nodes[i].clone(),
196
+ nodes[j].clone()
197
+ ];
198
+
199
+ const geometry = new THREE.BufferGeometry().setFromPoints(points);
200
+ const line = new THREE.Line(geometry, material);
201
+ line.userData.nodes = [i, j];
202
+ line.userData.active = false;
203
+ line.userData.intensity = 0;
204
+ connectionLines.push(line);
205
+ networkGroup.add(line);
206
+ }
207
+ }
208
+ }
209
+ }
210
+
211
+ function animateLightning() {
212
+ // Randomly activate connections
213
+ connectionLines.forEach(line => {
214
+ if (Math.random() < LIGHTNING_CHANCE && !line.userData.active) {
215
+ line.userData.active = true;
216
+ line.userData.intensity = 1;
217
+ line.material.color.set(0xffffff);
218
+ line.material.opacity = 1;
219
+ }
220
+
221
+ // Animate active connections
222
+ if (line.userData.active) {
223
+ line.userData.intensity -= 0.02;
224
+ line.material.opacity = line.userData.intensity;
225
+
226
+ // Add lightning effect
227
+ if (Math.random() < 0.3) {
228
+ line.material.color.set(0xffff00);
229
+ } else {
230
+ line.material.color.set(0xffffff);
231
+ }
232
+
233
+ // Deactivate when animation complete
234
+ if (line.userData.intensity <= 0) {
235
+ line.userData.active = false;
236
+ line.material.color.set(0x00aaff);
237
+ line.material.opacity = 0.3;
238
+ }
239
+ }
240
+ });
241
+ }
242
+
243
+ function animateNodes() {
244
+ // Pulsing animation for nodes
245
+ const time = Date.now() * 0.001;
246
+
247
+ nodeMeshes.forEach((mesh, index) => {
248
+ const pulse = Math.sin(time * PULSE_SPEED + mesh.userData.pulsePhase) * 0.2 + 0.8;
249
+ mesh.scale.set(pulse, pulse, pulse);
250
+
251
+ // Color cycling
252
+ const hue = (time * 0.1 + index * 0.01) % 1;
253
+ const color = new THREE.Color().setHSL(hue, 1, 0.5);
254
+ mesh.material.emissive = color;
255
+ });
256
+ }
257
+
258
+ function animateNetwork() {
259
+ // Rotate the entire network
260
+ networkGroup.rotation.x += ROTATION_SPEED * 0.5;
261
+ networkGroup.rotation.y += ROTATION_SPEED;
262
+
263
+ // Scale pulsing effect for growing/shrinking
264
+ const time = Date.now() * 0.001;
265
+ const scale = Math.sin(time * 0.5) * 0.3 + 0.7;
266
+ networkGroup.scale.set(scale, scale, scale);
267
+
268
+ // Dynamic camera movement
269
+ currentCameraAngle += 0.002;
270
+ targetCameraRadius = 20 + Math.sin(time * 0.3) * 5;
271
+ cameraRadius += (targetCameraRadius - cameraRadius) * 0.05;
272
+
273
+ camera.position.x = cameraRadius * Math.sin(currentCameraAngle);
274
+ camera.position.z = cameraRadius * Math.cos(currentCameraAngle);
275
+ camera.position.y = Math.sin(time * 0.4) * 5;
276
+ camera.lookAt(scene.position);
277
+ }
278
+
279
+ function animate() {
280
+ requestAnimationFrame(animate);
281
+
282
+ animateLightning();
283
+ animateNodes();
284
+ animateNetwork();
285
+
286
+ renderer.render(scene, camera);
287
+ }
288
+
289
+ function onWindowResize() {
290
+ camera.aspect = window.innerWidth / window.innerHeight;
291
+ camera.updateProjectionMatrix();
292
+ renderer.setSize(window.innerWidth, window.innerHeight);
293
+ }
294
+
295
+ // Initialize the visualization
296
+ init();
297
+ </script>
298
+ </body>
299
  </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ An impressive dummy visualization of a genetically generic neural network. Lightning flashes along the neural pathways, the network structure grows and shrinks in a loop. The whole thing rotates. Broadcast style!
2
+ An impressive dummy visualization of a genetically generic neural network. Lightning flashes along the neural pathways, the network structure (i.e., the number of neurons) grows and shrinks in a loop. The whole thing rotates. Exciting camera pan! Broadcast style! be creative.