Hugging Face's logo

Spaces:
eaglelandsonce
/
DarkMatterSimulation
Running

App Files Community
eaglelandsonce commited on
Commit
6d9631e
·
verified ·
1 Parent(s): 58a87ec

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +158 -18
index.html CHANGED
@@ -1,19 +1,159 @@
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>Dark‑Matter Hybrid Simulation (Pyodide‑powered)</title>
7
+ <style>
8
+ :root{font-family:system-ui,sans-serif;background:#0b0e19;color:#e4e7ef}
9
+ h1{text-align:center;margin:0.5rem 0;font-size:1.4rem}
10
+ #controls{display:flex;justify-content:center;gap:1rem;margin:0.5rem 0;flex-wrap:wrap}
11
+ .ctrl{background:#1c2135;border:1px solid #2f3653;border-radius:0.5rem;padding:0.3rem 0.6rem;font-size:0.9rem;cursor:pointer;transition:background .3s}
12
+ .ctrl:hover{background:#2b3351}
13
+ #sim{display:block;margin:0 auto 1rem;border:1px solid #222b44;background:#000;border-radius:0.5rem}
14
+ label{font-size:0.8rem}
15
+ input[type=range]{width:8rem}
16
+ #status{font-size:0.8rem;text-align:center;margin-bottom:0.4rem;color:#9ac1ff}
17
+ </style>
18
+ <!-- Pyodide -->
19
+ <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
20
+ </head>
21
+ <body>
22
+ <h1>Dark‑Matter Hybrid (Classical + Quantum) Toy Model</h1>
23
+ <canvas id="sim" width="600" height="600"></canvas>
24
+ <div id="status">Pyodide loading…</div>
25
+ <div id="controls">
26
+ <button id="toggle" class="ctrl" disabled>▶︎ Start</button>
27
+ <button id="reset" class="ctrl" disabled>⎌ Reset</button>
28
+ <button id="qView" class="ctrl" disabled>🌌 Quantum View</button>
29
+ <label>Particles
30
+ <input id="count" type="range" min="100" max="1000" step="100" value="500" disabled/>
31
+ <span id="countVal">500</span>
32
+ </label>
33
+ <label>Gravity
34
+ <input id="grav" type="range" min="0.1" max="2" step="0.1" value="1" disabled/>
35
+ <span id="gravVal">1.0</span>
36
+ </label>
37
+ </div>
38
+
39
+ <script>
40
+ /* ---------------- Pyodide bootstrap ---------------- */
41
+ let pyodideReady = loadPyodide({indexURL:"https://cdn.jsdelivr.net/pyodide/v0.25.0/full/"}).then(async pyodide=>{
42
+ await pyodide.loadPackage(["numpy"]);
43
+ // define a tiny Schrödinger‑like density generator on the Python side
44
+ const pyCode = `
45
+ import json, math, numpy as np
46
+
47
+ def quantum_density(size:int=64):
48
+ # 2‑D Gaussian wave‑packet as stand‑in for toy quantum result
49
+ x = np.linspace(-3,3,size)
50
+ X,Y = np.meshgrid(x,x)
51
+ Z = np.exp(-(X**2+Y**2))
52
+ Z /= Z.max() # normalize 0‑1
53
+ return json.dumps(Z.tolist())
54
+ `;
55
+ pyodide.runPython(pyCode);
56
+ return pyodide;
57
+ });
58
+
59
+ async function getQuantumDensity(size=64){
60
+ const pyodide = await pyodideReady;
61
+ const jsonStr = await pyodide.runPythonAsync(`quantum_density(${size})`);
62
+ return JSON.parse(jsonStr);
63
+ }
64
+
65
+ /* ---------------- Canvas & Globals ---------------- */
66
+ const canvas = document.getElementById("sim");
67
+ const ctx = canvas.getContext("2d");
68
+ const W = canvas.width, H = canvas.height;
69
+
70
+ const qCanvas = document.createElement("canvas");
71
+ qCanvas.width=W; qCanvas.height=H;
72
+ const qCtx = qCanvas.getContext("2d");
73
+
74
+ const $ = id=>document.getElementById(id);
75
+
76
+ const softening=4;
77
+ let G=1, particles=[], running=false, rafId;
78
+ let quantumOn=false, densityLoaded=false;
79
+
80
+ const status = $("status");
81
+
82
+ const rand = (min,max)=>Math.random()*(max-min)+min;
83
+ const makeParticle = ()=>({x:rand(0,W),y:rand(0,H),vx:rand(-0.1,0.1),vy:rand(-0.1,0.1),m:1+Math.random()*0.5});
84
+
85
+ function init(n=500){particles = Array.from({length:n}, makeParticle); densityLoaded=false; draw();}
86
+
87
+ function update(dt){
88
+ const n=particles.length;
89
+ for(let i=0;i<n;i++){
90
+ const p=particles[i]; let ax=0, ay=0;
91
+ for(let j=0;j<n;j++) if(i!==j){
92
+ const q=particles[j]; const dx=q.x-p.x, dy=q.y-p.y; const r2=dx*dx+dy*dy+softening; const inv=Math.pow(r2,-1.5);
93
+ ax+=G*q.m*dx*inv; ay+=G*q.m*dy*inv;
94
+ }
95
+ p.vx+=ax*dt; p.vy+=ay*dt;
96
+ }
97
+ for(const p of particles){p.x=(p.x+p.vx*dt+W)%W; p.y=(p.y+p.vy*dt+H)%H;}
98
+ }
99
+
100
+ function draw(){
101
+ ctx.fillStyle="black"; ctx.fillRect(0,0,W,H);
102
+ ctx.fillStyle="white"; for(const p of particles) ctx.fillRect(p.x,p.y,2,2);
103
+ if(quantumOn && densityLoaded) ctx.drawImage(qCanvas,0,0);
104
+ }
105
+
106
+ function step(){update(0.5); draw(); if(running) rafId=requestAnimationFrame(step);}
107
+
108
+ function buildDensityTexture(grid){
109
+ const size=grid.length; const scale=W/size; const img=qCtx.createImageData(W,H);
110
+ for(let i=0;i<size;i++){
111
+ for(let j=0;j<size;j++){
112
+ const val=Math.min(grid[i][j]*255*20,255);
113
+ for(let dx=0;dx<scale;dx++){
114
+ for(let dy=0;dy<scale;dy++){
115
+ const x=j*scale+dx, y=i*scale+dy, idx=(y*W+x)*4;
116
+ img.data[idx]=0; img.data[idx+1]=val; img.data[idx+2]=255; img.data[idx+3]=Math.min(val+30,255);
117
+ }
118
+ }
119
+ }
120
+ }
121
+ qCtx.putImageData(img,0,0);
122
+ densityLoaded=true; draw();
123
+ }
124
+
125
+ async function computeQuantum(){
126
+ status.textContent="Computing quantum density…";
127
+ try{
128
+ const grid=await getQuantumDensity(64);
129
+ buildDensityTexture(grid);
130
+ status.textContent="Quantum density ready ✔";
131
+ }catch(e){
132
+ console.error(e);
133
+ status.textContent="Quantum compute error";
134
+ quantumOn=false;
135
+ $("qView").textContent="🌌 Quantum View";
136
+ }
137
+ }
138
+
139
+ /* ---------------- UI Wiring (activated after Pyodide ready) ---------------- */
140
+ pyodideReady.then(()=>{
141
+ status.textContent="Ready";
142
+ ["toggle","reset","qView","count","grav"].forEach(id=>$(id).disabled=false);
143
+
144
+ $("toggle").onclick=()=>{running=!running; $("toggle").textContent=running?"❚❚ Pause":"▶︎ Start"; if(running) step(); else cancelAnimationFrame(rafId);} ;
145
+ $("reset").onclick=()=>init(+$("count").value);
146
+ $("count").oninput=e=>$("countVal").textContent=e.target.value;
147
+ $("count").onchange=()=>init(+$("count").value);
148
+ $("grav").oninput=e=>{G=+e.target.value; $("gravVal").textContent=G.toFixed(1);} ;
149
+ $("qView").onclick=()=>{
150
+ quantumOn=!quantumOn;
151
+ $("qView").textContent=quantumOn?"🖥 Classical View":"🌌 Quantum View";
152
+ if(quantumOn && !densityLoaded) computeQuantum(); else draw();
153
+ };
154
+
155
+ init();
156
+ });
157
+ </script>
158
+ </body>
159
  </html>