File size: 3,418 Bytes
314c009
 
 
 
 
 
 
 
 
0ea72a5
 
 
314c009
 
0ea72a5
314c009
0ea72a5
 
314c009
0ea72a5
 
 
 
 
 
 
314c009
 
 
 
0ea72a5
 
 
 
 
 
 
 
 
 
314c009
0ea72a5
314c009
 
 
 
0ea72a5
 
314c009
 
0ea72a5
314c009
 
 
0ea72a5
314c009
0ea72a5
314c009
 
 
 
0ea72a5
 
314c009
0ea72a5
 
 
 
 
 
 
314c009
 
0ea72a5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
314c009
 
 
 
0ea72a5
314c009
0ea72a5
314c009
 
 
 
 
 
afc9f9c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Gradient-Free BOED via Interacting Particle Systems</title>
  <style>
    body { margin: 0; overflow: hidden; }
    #info {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0,0,0,0.6);
      color: #fff;
      font-family: sans-serif;
      padding: 10px;
      border-radius: 4px;
      max-width: 300px;
      line-height: 1.4;
    }
    #info h1 {
      margin: 0 0 6px;
      font-size: 16px;
    }
    #info p { margin: 4px 0; font-size: 13px; }
    #info a { color: #66ccff; text-decoration: none; }
    #info a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <div id="info">
    <h1>Gradient-Free Sequential BOED</h1>
    <p><strong>Gruhlke et al.</strong></p>
    <p>
      <a href="https://arxiv.org/abs/2504.13320" target="_blank">arXiv Abstract</a> |
      <a href="https://arxiv.org/pdf/2504.13320" target="_blank">PDF</a>
    </p>
    <p style="font-size:12px;">
      Uses Ensemble Kalman Inversion + Affine-Invariant Langevin sampling<br/>
      for gradient-free sequential experimental design.
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
  <script>
    // --- SCENE SETUP ---
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 50);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth/window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });

    // --- PARTICLES ---
    const N = 100;
    const particles = [];
    const sphereGeo = new THREE.SphereGeometry(0.5, 8, 8);
    for(let i=0; i<N; i++){
      const mat = new THREE.MeshBasicMaterial({ color: new THREE.Color(Math.random(),Math.random(),Math.random()) });
      const m = new THREE.Mesh(sphereGeo, mat);
      m.position.set((Math.random()-0.5)*40, (Math.random()-0.5)*40, (Math.random()-0.5)*40);
      particles.push(m);
      scene.add(m);
    }

    function step(){
      // ensemble mean
      const mean = new THREE.Vector3();
      particles.forEach(p=>mean.add(p.position));
      mean.divideScalar(N);
      // covariance proxy
      let cov=0;
      particles.forEach(p=>cov+=p.position.distanceToSquared(mean));
      cov/=N;
      const alpha=0.01, noiseAmp=0.1*Math.sqrt(cov);
      particles.forEach(p=>{
        // EKI attraction
        const toMean = mean.clone().sub(p.position).multiplyScalar(alpha);
        // ALDI noise
        const noise = new THREE.Vector3(
          (Math.random()-0.5),
          (Math.random()-0.5),
          (Math.random()-0.5)
        ).multiplyScalar(noiseAmp);
        p.position.add(toMean).add(noise);
      });
    }

    function animate(){
      requestAnimationFrame(animate);
      step();
      controls.update();
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>