Hugging Face's logo

Spaces:
awacke1
/
EKI-ALDI-Bayesian-Design
Running

App Files Community
awacke1 commited on
Commit
314c009
·
verified ·
1 Parent(s): afc9f9c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +106 -18
index.html CHANGED
@@ -1,19 +1,107 @@
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
+ <title>Gradient-Free BOED via Interacting Particle Systems</title>
6
+ <style>
7
+ body { margin: 0; overflow: hidden; }
8
+ #info {
9
+ position: absolute;
10
+ top: 10px; left: 10px;
11
+ color: #fff;
12
+ font-family: sans-serif;
13
+ background: rgba(0,0,0,0.4);
14
+ padding: 8px 12px;
15
+ border-radius: 4px;
16
+ font-size: 14px;
17
+ }
18
+ </style>
19
+ </head>
20
+ <body>
21
+ <div id="info">
22
+ <strong>Particles:</strong> Ensemble Kalman Inversion (attraction to mean)<br/>
23
+ <strong>Noise:</strong> Affine-Invariant Langevin Dynamics
24
+ </div>
25
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
26
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
27
+ <script>
28
+ // --- SCENE SETUP ---
29
+ let scene = new THREE.Scene();
30
+ let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
31
+ camera.position.set(0, 0, 50);
32
+
33
+ let renderer = new THREE.WebGLRenderer({ antialias: true });
34
+ renderer.setSize(window.innerWidth, window.innerHeight);
35
+ document.body.appendChild(renderer.domElement);
36
+
37
+ let controls = new THREE.OrbitControls(camera, renderer.domElement);
38
+
39
+ window.addEventListener('resize', () => {
40
+ camera.aspect = window.innerWidth / window.innerHeight;
41
+ camera.updateProjectionMatrix();
42
+ renderer.setSize(window.innerWidth, window.innerHeight);
43
+ });
44
+
45
+ // --- PARTICLE SYSTEM PARAMETERS ---
46
+ const PARTICLE_COUNT = 100;
47
+ const particles = [];
48
+ const geometry = new THREE.SphereGeometry(0.5, 8, 8);
49
+
50
+ // Initialize particles with random positions
51
+ for (let i = 0; i < PARTICLE_COUNT; i++) {
52
+ let material = new THREE.MeshBasicMaterial({
53
+ color: new THREE.Color(Math.random(), Math.random(), Math.random())
54
+ });
55
+ let p = new THREE.Mesh(geometry, material);
56
+ p.position.set(
57
+ (Math.random() - 0.5) * 40,
58
+ (Math.random() - 0.5) * 40,
59
+ (Math.random() - 0.5) * 40
60
+ );
61
+ particles.push(p);
62
+ scene.add(p);
63
+ }
64
+
65
+ // --- UPDATE LOOP ---
66
+ function updateParticles() {
67
+ // 1) Compute ensemble mean
68
+ let mean = new THREE.Vector3();
69
+ particles.forEach(p => mean.add(p.position));
70
+ mean.divideScalar(PARTICLE_COUNT);
71
+
72
+ // 2) Compute a rough measure of covariance (average squared distance)
73
+ let cov = 0;
74
+ particles.forEach(p => cov += p.position.distanceToSquared(mean));
75
+ cov /= PARTICLE_COUNT;
76
+
77
+ // 3) For each particle: apply EKI‐style attraction + ALDI noise
78
+ const attractionStrength = 0.01;
79
+ const noiseScale = 0.1 * Math.sqrt(cov);
80
+
81
+ particles.forEach(p => {
82
+ // Attraction toward mean (EKI)
83
+ let toMean = mean.clone().sub(p.position).multiplyScalar(attractionStrength);
84
+
85
+ // Affine-Invariant Langevin noise
86
+ let noise = new THREE.Vector3(
87
+ (Math.random() - 0.5),
88
+ (Math.random() - 0.5),
89
+ (Math.random() - 0.5)
90
+ ).multiplyScalar(noiseScale);
91
+
92
+ // Update position
93
+ p.position.add(toMean).add(noise);
94
+ });
95
+ }
96
+
97
+ // --- RENDER LOOP ---
98
+ function animate() {
99
+ requestAnimationFrame(animate);
100
+ updateParticles();
101
+ controls.update();
102
+ renderer.render(scene, camera);
103
+ }
104
+ animate();
105
+ </script>
106
+ </body>
107
  </html>