Hugging Face's logo

Spaces:
Vikingdude81
/
mcmc-walker
Running

App Files Community
Vikingdude81 commited on
Commit
4d6dca1
·
verified ·
1 Parent(s): cc13ff4

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1000 -19
index.html CHANGED
@@ -1,19 +1,1000 @@
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>MCMC_WALKER.exe // NEURAL SAMPLER v2.077</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');
9
+
10
+ * {
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ margin: 0;
16
+ padding: 20px;
17
+ background-color: #0a0a0f;
18
+ color: #eee;
19
+ font-family: 'Share Tech Mono', monospace;
20
+ display: flex;
21
+ flex-direction: column;
22
+ align-items: center;
23
+ min-height: 100vh;
24
+ overflow-x: hidden;
25
+ position: relative;
26
+ }
27
+
28
+ /* Scanline overlay */
29
+ body::before {
30
+ content: "";
31
+ position: fixed;
32
+ top: 0;
33
+ left: 0;
34
+ width: 100%;
35
+ height: 100%;
36
+ background: repeating-linear-gradient(
37
+ 0deg,
38
+ rgba(0, 0, 0, 0.15),
39
+ rgba(0, 0, 0, 0.15) 1px,
40
+ transparent 1px,
41
+ transparent 2px
42
+ );
43
+ pointer-events: none;
44
+ z-index: 1000;
45
+ }
46
+
47
+ /* Grid background */
48
+ body::after {
49
+ content: "";
50
+ position: fixed;
51
+ top: 0;
52
+ left: 0;
53
+ width: 100%;
54
+ height: 100%;
55
+ background-image:
56
+ linear-gradient(rgba(255, 0, 128, 0.03) 1px, transparent 1px),
57
+ linear-gradient(90deg, rgba(255, 0, 128, 0.03) 1px, transparent 1px);
58
+ background-size: 50px 50px;
59
+ pointer-events: none;
60
+ z-index: -1;
61
+ }
62
+
63
+ h1 {
64
+ margin: 0;
65
+ font-family: 'Orbitron', sans-serif;
66
+ font-weight: 900;
67
+ font-size: 1.5rem;
68
+ letter-spacing: 4px;
69
+ text-transform: uppercase;
70
+ background: linear-gradient(90deg, #ff0080, #00ffff, #ff0080);
71
+ background-size: 200% auto;
72
+ -webkit-background-clip: text;
73
+ -webkit-text-fill-color: transparent;
74
+ animation: gradient-shift 3s linear infinite;
75
+ text-shadow: 0 0 30px rgba(255, 0, 128, 0.5);
76
+ }
77
+
78
+ @keyframes gradient-shift {
79
+ 0% { background-position: 0% center; }
80
+ 100% { background-position: 200% center; }
81
+ }
82
+
83
+ .subtitle {
84
+ color: #00ffff;
85
+ font-size: 0.75rem;
86
+ margin-bottom: 10px;
87
+ letter-spacing: 3px;
88
+ opacity: 0.7;
89
+ }
90
+
91
+ /* Info Banner */
92
+ .info-banner {
93
+ width: 100%;
94
+ max-width: 1000px;
95
+ background: linear-gradient(90deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 128, 0.1));
96
+ border: 1px solid rgba(0, 255, 255, 0.3);
97
+ padding: 12px 20px;
98
+ margin-bottom: 15px;
99
+ font-size: 0.8rem;
100
+ color: #aaa;
101
+ line-height: 1.5;
102
+ position: relative;
103
+ }
104
+
105
+ .info-banner::before {
106
+ content: "◈ PROTOCOL";
107
+ position: absolute;
108
+ top: -8px;
109
+ left: 15px;
110
+ background: #0a0a0f;
111
+ padding: 0 8px;
112
+ font-size: 0.6rem;
113
+ color: #ff0080;
114
+ letter-spacing: 2px;
115
+ }
116
+
117
+ .info-banner strong {
118
+ color: #00ffff;
119
+ }
120
+
121
+ .info-banner em {
122
+ color: #ff0080;
123
+ font-style: normal;
124
+ }
125
+
126
+ .container {
127
+ display: grid;
128
+ grid-template-columns: 1fr 1fr;
129
+ gap: 20px;
130
+ width: 100%;
131
+ max-width: 1000px;
132
+ flex-grow: 1;
133
+ max-height: 450px;
134
+ }
135
+
136
+ .panel {
137
+ background: linear-gradient(135deg, rgba(10, 10, 20, 0.95), rgba(20, 10, 30, 0.95));
138
+ border: 1px solid #ff0080;
139
+ border-radius: 0;
140
+ display: flex;
141
+ flex-direction: column;
142
+ position: relative;
143
+ box-shadow:
144
+ 0 0 20px rgba(255, 0, 128, 0.3),
145
+ inset 0 0 60px rgba(255, 0, 128, 0.05);
146
+ clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
147
+ }
148
+
149
+ .panel::before {
150
+ content: "";
151
+ position: absolute;
152
+ top: 0;
153
+ left: 0;
154
+ right: 0;
155
+ height: 2px;
156
+ background: linear-gradient(90deg, transparent, #ff0080, #00ffff, #ff0080, transparent);
157
+ animation: scan-line 2s linear infinite;
158
+ }
159
+
160
+ @keyframes scan-line {
161
+ 0% { opacity: 1; }
162
+ 50% { opacity: 0.5; }
163
+ 100% { opacity: 1; }
164
+ }
165
+
166
+ .panel-header {
167
+ padding: 8px 15px;
168
+ background: linear-gradient(90deg, rgba(255, 0, 128, 0.2), rgba(0, 255, 255, 0.1));
169
+ border-bottom: 1px solid rgba(255, 0, 128, 0.5);
170
+ font-size: 0.75rem;
171
+ display: flex;
172
+ justify-content: space-between;
173
+ align-items: center;
174
+ text-transform: uppercase;
175
+ letter-spacing: 2px;
176
+ }
177
+
178
+ .panel-header span:first-child {
179
+ color: #ff0080;
180
+ text-shadow: 0 0 10px rgba(255, 0, 128, 0.8);
181
+ }
182
+
183
+ /* Panel description overlay */
184
+ .panel-desc {
185
+ position: absolute;
186
+ bottom: 0;
187
+ left: 0;
188
+ right: 0;
189
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
190
+ padding: 30px 12px 10px 12px;
191
+ font-size: 0.65rem;
192
+ color: #888;
193
+ pointer-events: none;
194
+ z-index: 5;
195
+ line-height: 1.4;
196
+ }
197
+
198
+ .panel-desc .highlight {
199
+ color: #00ffff;
200
+ }
201
+
202
+ .panel-desc .action {
203
+ color: #ff0080;
204
+ }
205
+
206
+ canvas {
207
+ flex-grow: 1;
208
+ width: 100%;
209
+ height: 100%;
210
+ cursor: crosshair;
211
+ touch-action: none;
212
+ background: #050508;
213
+ }
214
+
215
+ /* Controls */
216
+ .controls {
217
+ margin-top: 15px;
218
+ display: flex;
219
+ gap: 15px;
220
+ background: linear-gradient(135deg, rgba(20, 10, 30, 0.9), rgba(10, 20, 30, 0.9));
221
+ padding: 15px 25px;
222
+ border: 1px solid rgba(0, 255, 255, 0.3);
223
+ align-items: center;
224
+ flex-wrap: wrap;
225
+ justify-content: center;
226
+ position: relative;
227
+ clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
228
+ }
229
+
230
+ .controls::before {
231
+ content: "// CONTROL_MATRIX";
232
+ position: absolute;
233
+ top: -10px;
234
+ left: 20px;
235
+ background: #0a0a0f;
236
+ padding: 0 10px;
237
+ font-size: 0.65rem;
238
+ color: #00ffff;
239
+ letter-spacing: 2px;
240
+ }
241
+
242
+ button {
243
+ background: linear-gradient(135deg, rgba(255, 0, 128, 0.2), rgba(255, 0, 128, 0.1));
244
+ color: #ff0080;
245
+ border: 1px solid #ff0080;
246
+ padding: 10px 20px;
247
+ cursor: pointer;
248
+ font-weight: 600;
249
+ font-size: 0.75rem;
250
+ transition: all 0.3s;
251
+ font-family: 'Orbitron', sans-serif;
252
+ text-transform: uppercase;
253
+ letter-spacing: 2px;
254
+ position: relative;
255
+ overflow: hidden;
256
+ clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
257
+ }
258
+
259
+ button::before {
260
+ content: "";
261
+ position: absolute;
262
+ top: 0;
263
+ left: -100%;
264
+ width: 100%;
265
+ height: 100%;
266
+ background: linear-gradient(90deg, transparent, rgba(255, 0, 128, 0.4), transparent);
267
+ transition: left 0.5s;
268
+ }
269
+
270
+ button:hover {
271
+ background: linear-gradient(135deg, rgba(255, 0, 128, 0.4), rgba(255, 0, 128, 0.2));
272
+ box-shadow: 0 0 20px rgba(255, 0, 128, 0.5), inset 0 0 20px rgba(255, 0, 128, 0.1);
273
+ text-shadow: 0 0 10px #ff0080;
274
+ }
275
+
276
+ button:hover::before {
277
+ left: 100%;
278
+ }
279
+
280
+ button.primary {
281
+ background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.1));
282
+ color: #00ffff;
283
+ border-color: #00ffff;
284
+ }
285
+
286
+ button.primary:hover {
287
+ background: linear-gradient(135deg, rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.2));
288
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.1);
289
+ text-shadow: 0 0 10px #00ffff;
290
+ }
291
+
292
+ button.preset {
293
+ padding: 6px 12px;
294
+ font-size: 0.6rem;
295
+ background: linear-gradient(135deg, rgba(128, 0, 255, 0.2), rgba(128, 0, 255, 0.1));
296
+ color: #a855f7;
297
+ border-color: #a855f7;
298
+ }
299
+
300
+ button.preset:hover {
301
+ background: linear-gradient(135deg, rgba(128, 0, 255, 0.4), rgba(128, 0, 255, 0.2));
302
+ box-shadow: 0 0 15px rgba(128, 0, 255, 0.5);
303
+ }
304
+
305
+ .stat-val {
306
+ color: #00ffff;
307
+ font-family: 'Share Tech Mono', monospace;
308
+ text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
309
+ }
310
+
311
+ /* Stats Display */
312
+ #stats-output {
313
+ margin-top: 15px;
314
+ width: 100%;
315
+ max-width: 1000px;
316
+ background: linear-gradient(135deg, rgba(10, 10, 20, 0.95), rgba(20, 10, 30, 0.95));
317
+ border: 1px solid #00ffff;
318
+ padding: 12px 20px;
319
+ font-size: 0.8rem;
320
+ color: #ddd;
321
+ min-height: 50px;
322
+ display: flex;
323
+ align-items: center;
324
+ gap: 25px;
325
+ position: relative;
326
+ clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
327
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
328
+ flex-wrap: wrap;
329
+ }
330
+
331
+ #stats-output::before {
332
+ content: "";
333
+ position: absolute;
334
+ bottom: 0;
335
+ left: 0;
336
+ right: 0;
337
+ height: 2px;
338
+ background: linear-gradient(90deg, #00ffff, #ff0080, #00ffff);
339
+ animation: pulse-line 1.5s ease-in-out infinite;
340
+ }
341
+
342
+ @keyframes pulse-line {
343
+ 0%, 100% { opacity: 0.5; }
344
+ 50% { opacity: 1; }
345
+ }
346
+
347
+ .stats-label {
348
+ font-family: 'Orbitron', sans-serif;
349
+ font-weight: bold;
350
+ color: #ff0080;
351
+ margin-right: 10px;
352
+ font-size: 0.65rem;
353
+ text-transform: uppercase;
354
+ letter-spacing: 2px;
355
+ white-space: nowrap;
356
+ text-shadow: 0 0 10px rgba(255, 0, 128, 0.8);
357
+ }
358
+
359
+ .stat-item {
360
+ display: flex;
361
+ align-items: center;
362
+ gap: 6px;
363
+ }
364
+
365
+ .stat-item span:first-child {
366
+ color: #666;
367
+ font-size: 0.7rem;
368
+ text-transform: uppercase;
369
+ letter-spacing: 1px;
370
+ }
371
+
372
+ .stat-item .stat-val {
373
+ min-width: 50px;
374
+ }
375
+
376
+ .stat-item.good .stat-val { color: #22c55e; text-shadow: 0 0 10px rgba(34, 197, 94, 0.8); }
377
+ .stat-item.warn .stat-val { color: #eab308; text-shadow: 0 0 10px rgba(234, 179, 8, 0.8); }
378
+ .stat-item.bad .stat-val { color: #ef4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }
379
+
380
+ /* Sliders */
381
+ .slider-group {
382
+ display: flex;
383
+ flex-direction: column;
384
+ align-items: center;
385
+ gap: 4px;
386
+ font-size: 0.6rem;
387
+ color: #888;
388
+ text-transform: uppercase;
389
+ letter-spacing: 1px;
390
+ }
391
+
392
+ .slider-group .slider-label {
393
+ display: flex;
394
+ justify-content: space-between;
395
+ width: 100%;
396
+ color: #666;
397
+ }
398
+
399
+ .slider-group .slider-value {
400
+ color: #00ffff;
401
+ font-size: 0.7rem;
402
+ }
403
+
404
+ input[type="range"] {
405
+ -webkit-appearance: none;
406
+ width: 80px;
407
+ height: 4px;
408
+ background: linear-gradient(90deg, #ff0080, #00ffff);
409
+ border-radius: 0;
410
+ outline: none;
411
+ }
412
+
413
+ input[type="range"]::-webkit-slider-thumb {
414
+ -webkit-appearance: none;
415
+ width: 12px;
416
+ height: 20px;
417
+ background: #00ffff;
418
+ cursor: pointer;
419
+ box-shadow: 0 0 10px #00ffff;
420
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
421
+ }
422
+
423
+ input[type="range"]::-moz-range-thumb {
424
+ width: 12px;
425
+ height: 20px;
426
+ background: #00ffff;
427
+ cursor: pointer;
428
+ border: none;
429
+ box-shadow: 0 0 10px #00ffff;
430
+ }
431
+
432
+ .divider {
433
+ width: 1px;
434
+ height: 30px;
435
+ background: linear-gradient(180deg, transparent, #ff0080, transparent);
436
+ margin: 0 5px;
437
+ }
438
+
439
+ /* Glitch effect for title on hover */
440
+ h1:hover {
441
+ animation: glitch 0.3s infinite;
442
+ }
443
+
444
+ @keyframes glitch {
445
+ 0% { transform: translate(0); }
446
+ 20% { transform: translate(-2px, 2px); }
447
+ 40% { transform: translate(-2px, -2px); }
448
+ 60% { transform: translate(2px, 2px); }
449
+ 80% { transform: translate(2px, -2px); }
450
+ 100% { transform: translate(0); }
451
+ }
452
+
453
+ /* Corner decorations */
454
+ .corner-decor {
455
+ position: fixed;
456
+ width: 80px;
457
+ height: 80px;
458
+ pointer-events: none;
459
+ opacity: 0.3;
460
+ }
461
+
462
+ .corner-decor.top-left {
463
+ top: 10px;
464
+ left: 10px;
465
+ border-top: 2px solid #ff0080;
466
+ border-left: 2px solid #ff0080;
467
+ }
468
+
469
+ .corner-decor.top-right {
470
+ top: 10px;
471
+ right: 10px;
472
+ border-top: 2px solid #00ffff;
473
+ border-right: 2px solid #00ffff;
474
+ }
475
+
476
+ .corner-decor.bottom-left {
477
+ bottom: 10px;
478
+ left: 10px;
479
+ border-bottom: 2px solid #00ffff;
480
+ border-left: 2px solid #00ffff;
481
+ }
482
+
483
+ .corner-decor.bottom-right {
484
+ bottom: 10px;
485
+ right: 10px;
486
+ border-bottom: 2px solid #ff0080;
487
+ border-right: 2px solid #ff0080;
488
+ }
489
+
490
+ /* Tooltip styles */
491
+ .tooltip {
492
+ position: relative;
493
+ cursor: help;
494
+ border-bottom: 1px dotted #666;
495
+ }
496
+
497
+ .tooltip:hover::after {
498
+ content: attr(data-tip);
499
+ position: absolute;
500
+ bottom: 100%;
501
+ left: 50%;
502
+ transform: translateX(-50%);
503
+ background: rgba(0, 0, 0, 0.95);
504
+ border: 1px solid #00ffff;
505
+ padding: 8px 12px;
506
+ font-size: 0.7rem;
507
+ white-space: nowrap;
508
+ z-index: 100;
509
+ color: #ddd;
510
+ }
511
+
512
+ @media (max-width: 700px) {
513
+ .container { grid-template-columns: 1fr; max-height: none; }
514
+ .panel { min-height: 300px; }
515
+ #stats-output { flex-wrap: wrap; gap: 15px; }
516
+ .controls { gap: 10px; }
517
+ .info-banner { font-size: 0.7rem; }
518
+ }
519
+ </style>
520
+ </head>
521
+ <body>
522
+
523
+ <div class="corner-decor top-left"></div>
524
+ <div class="corner-decor top-right"></div>
525
+ <div class="corner-decor bottom-left"></div>
526
+ <div class="corner-decor bottom-right"></div>
527
+
528
+ <h1>MCMC_WALKER.exe</h1>
529
+ <p class="subtitle">// NEURAL PROBABILITY SAMPLER v2.077</p>
530
+
531
+ <!-- Info Banner -->
532
+ <div class="info-banner">
533
+ <strong>Draw a probability landscape</strong> on the left — <em>brightness = probability</em>.
534
+ The walker on the right uses <strong>Metropolis-Hastings</strong> to sample from your distribution.
535
+ It visits bright regions more often, reconstructing your drawing through random exploration!
536
+ </div>
537
+
538
+ <div class="container">
539
+ <!-- Input Canvas -->
540
+ <div class="panel">
541
+ <div class="panel-header">
542
+ <span>◈ Target_Distribution</span>
543
+ <div style="display:flex; gap:5px;">
544
+ <button class="preset" onclick="loadPreset('hex')">Hex</button>
545
+ <button class="preset" onclick="loadPreset('gaussian')">Gauss</button>
546
+ <button class="preset" onclick="loadPreset('rings')">Rings</button>
547
+ <button onclick="clearCanvas()" style="padding:4px 10px; font-size:0.6rem;">Purge</button>
548
+ </div>
549
+ </div>
550
+ <canvas id="canvas-target"></canvas>
551
+ <div class="panel-desc">
552
+ <span class="action">DRAW</span> to define probability density.
553
+ <span class="highlight">Brighter = Higher probability</span>.
554
+ The walker will spend more time in bright regions.
555
+ </div>
556
+ </div>
557
+
558
+ <!-- Output Simulation -->
559
+ <div class="panel">
560
+ <div class="panel-header">
561
+ <span>◈ MCMC_Reconstruction</span>
562
+ <span class="stat-val" id="step-count">CYCLES: 0</span>
563
+ </div>
564
+ <canvas id="canvas-sim"></canvas>
565
+ <div class="panel-desc">
566
+ <span class="highlight">LIVE SAMPLING</span> — Walker proposes random jumps,
567
+ accepts moves to brighter areas, sometimes rejects moves to darker regions.
568
+ Trail reveals the underlying distribution!
569
+ </div>
570
+ </div>
571
+ </div>
572
+
573
+ <!-- Stats Display -->
574
+ <div id="stats-output">
575
+ <span class="stats-label">◈ Telemetry</span>
576
+ <div class="stat-item" id="stat-accept">
577
+ <span class="tooltip" data-tip="Ideal: 20-50%. Too high = slow exploration. Too low = stuck.">Accept:</span>
578
+ <span class="stat-val" id="accept-rate">0%</span>
579
+ </div>
580
+ <div class="stat-item">
581
+ <span class="tooltip" data-tip="Current (X, Y) coordinates of the walker">Position:</span>
582
+ <span class="stat-val" id="walker-pos">[0, 0]</span>
583
+ </div>
584
+ <div class="stat-item">
585
+ <span class="tooltip" data-tip="Brightness at current position (0-255). Higher = more probable">Density:</span>
586
+ <span class="stat-val" id="current-density">0</span>
587
+ </div>
588
+ <div class="stat-item">
589
+ <span class="tooltip" data-tip="Estimated time to explore full distribution">Coverage:</span>
590
+ <span class="stat-val" id="coverage">0%</span>
591
+ </div>
592
+ </div>
593
+
594
+ <div class="controls">
595
+ <button class="primary" onclick="resetWalker()">↻ Reset</button>
596
+ <button onclick="togglePause()"><span id="pause-btn">⏸ Halt</span></button>
597
+
598
+ <div class="divider"></div>
599
+
600
+ <div class="slider-group">
601
+ <div class="slider-label">
602
+ <span>Brush</span>
603
+ <span class="slider-value" id="brush-val">20</span>
604
+ </div>
605
+ <input type="range" id="brush-size" min="5" max="50" value="20">
606
+ </div>
607
+ <div class="slider-group">
608
+ <div class="slider-label">
609
+ <span class="tooltip" data-tip="Steps per frame — higher = faster sampling">Speed</span>
610
+ <span class="slider-value" id="speed-val">50</span>
611
+ </div>
612
+ <input type="range" id="speed" min="10" max="200" value="50">
613
+ </div>
614
+ <div class="slider-group">
615
+ <div class="slider-label">
616
+ <span class="tooltip" data-tip="Proposal distance — affects acceptance rate">Jump</span>
617
+ <span class="slider-value" id="jump-val">10</span>
618
+ </div>
619
+ <input type="range" id="jump-size" min="2" max="30" value="10">
620
+ </div>
621
+ </div>
622
+
623
+ <script>
624
+ // --- Setup ---
625
+ const cvsTarget = document.getElementById('canvas-target');
626
+ const ctxTarget = cvsTarget.getContext('2d', { willReadFrequently: true });
627
+ const cvsSim = document.getElementById('canvas-sim');
628
+ const ctxSim = cvsSim.getContext('2d');
629
+
630
+ let width, height;
631
+ let isDrawing = false;
632
+ let brushSize = 20;
633
+ let stepSize = 50;
634
+ let jumpSize = 10;
635
+ let pixelData = null;
636
+ let isPaused = false;
637
+
638
+ // Walker State
639
+ let walker = { x: 0, y: 0 };
640
+ let totalSteps = 0;
641
+ let acceptedSteps = 0;
642
+
643
+ // Coverage tracking
644
+ let visitedCells = new Set();
645
+ let totalTargetCells = 0;
646
+
647
+ // Trail history for glow effect
648
+ let trailHistory = [];
649
+ const maxTrailHistory = 500;
650
+
651
+ // --- Canvas Handling ---
652
+ function resize() {
653
+ const rect = cvsTarget.parentElement.getBoundingClientRect();
654
+ width = rect.width;
655
+ height = rect.height - 70; // Account for header and description
656
+
657
+ cvsTarget.width = width;
658
+ cvsTarget.height = height;
659
+ cvsSim.width = width;
660
+ cvsSim.height = height;
661
+
662
+ ctxTarget.fillStyle = '#050508';
663
+ ctxTarget.fillRect(0, 0, width, height);
664
+
665
+ ctxSim.fillStyle = '#050508';
666
+ ctxSim.fillRect(0, 0, width, height);
667
+
668
+ loadPreset('hex');
669
+ }
670
+
671
+ function loadPreset(type) {
672
+ ctxTarget.fillStyle = '#050508';
673
+ ctxTarget.fillRect(0, 0, width, height);
674
+
675
+ const cx = width / 2;
676
+ const cy = height / 2;
677
+
678
+ ctxTarget.shadowBlur = 20;
679
+
680
+ if (type === 'hex') {
681
+ // Hexagon with inner triangle
682
+ const r = height / 3;
683
+
684
+ ctxTarget.strokeStyle = '#ff0080';
685
+ ctxTarget.shadowColor = '#ff0080';
686
+ ctxTarget.lineWidth = 15;
687
+ ctxTarget.lineCap = 'square';
688
+
689
+ ctxTarget.beginPath();
690
+ for (let i = 0; i < 6; i++) {
691
+ const angle = (i * Math.PI / 3) - Math.PI / 2;
692
+ const x = cx + r * Math.cos(angle);
693
+ const y = cy + r * Math.sin(angle);
694
+ if (i === 0) ctxTarget.moveTo(x, y);
695
+ else ctxTarget.lineTo(x, y);
696
+ }
697
+ ctxTarget.closePath();
698
+ ctxTarget.stroke();
699
+
700
+ // Inner triangle
701
+ ctxTarget.strokeStyle = '#00ffff';
702
+ ctxTarget.shadowColor = '#00ffff';
703
+ ctxTarget.lineWidth = 10;
704
+
705
+ ctxTarget.beginPath();
706
+ for (let i = 0; i < 3; i++) {
707
+ const angle = (i * 2 * Math.PI / 3) - Math.PI / 2;
708
+ const x = cx + (r * 0.5) * Math.cos(angle);
709
+ const y = cy + (r * 0.5) * Math.sin(angle);
710
+ if (i === 0) ctxTarget.moveTo(x, y);
711
+ else ctxTarget.lineTo(x, y);
712
+ }
713
+ ctxTarget.closePath();
714
+ ctxTarget.stroke();
715
+
716
+ // Center dot
717
+ ctxTarget.fillStyle = '#ffffff';
718
+ ctxTarget.shadowColor = '#ffffff';
719
+ ctxTarget.beginPath();
720
+ ctxTarget.arc(cx, cy, 8, 0, Math.PI * 2);
721
+ ctxTarget.fill();
722
+
723
+ } else if (type === 'gaussian') {
724
+ // Bivariate Gaussian blob
725
+ const imgData = ctxTarget.createImageData(width, height);
726
+ const sigma = height / 4;
727
+
728
+ for (let y = 0; y < height; y++) {
729
+ for (let x = 0; x < width; x++) {
730
+ const dx = x - cx;
731
+ const dy = y - cy;
732
+ const val = Math.exp(-(dx*dx + dy*dy) / (2 * sigma * sigma));
733
+ const intensity = Math.floor(val * 255);
734
+ const idx = (y * width + x) * 4;
735
+ imgData.data[idx] = intensity;
736
+ imgData.data[idx + 1] = Math.floor(intensity * 0.5);
737
+ imgData.data[idx + 2] = intensity;
738
+ imgData.data[idx + 3] = 255;
739
+ }
740
+ }
741
+ ctxTarget.putImageData(imgData, 0, 0);
742
+
743
+ } else if (type === 'rings') {
744
+ // Concentric rings - multimodal
745
+ ctxTarget.lineWidth = 12;
746
+
747
+ const colors = ['#ff0080', '#00ffff', '#a855f7', '#22c55e'];
748
+ const radii = [height * 0.4, height * 0.28, height * 0.16];
749
+
750
+ radii.forEach((r, i) => {
751
+ ctxTarget.strokeStyle = colors[i % colors.length];
752
+ ctxTarget.shadowColor = colors[i % colors.length];
753
+ ctxTarget.beginPath();
754
+ ctxTarget.arc(cx, cy, r, 0, Math.PI * 2);
755
+ ctxTarget.stroke();
756
+ });
757
+
758
+ // Center
759
+ ctxTarget.fillStyle = '#ffffff';
760
+ ctxTarget.shadowColor = '#ffffff';
761
+ ctxTarget.beginPath();
762
+ ctxTarget.arc(cx, cy, 6, 0, Math.PI * 2);
763
+ ctxTarget.fill();
764
+ }
765
+
766
+ ctxTarget.shadowBlur = 0;
767
+ updatePixelCache();
768
+ resetWalker();
769
+ }
770
+
771
+ function clearCanvas() {
772
+ ctxTarget.fillStyle = '#050508';
773
+ ctxTarget.fillRect(0, 0, width, height);
774
+ ctxSim.fillStyle = '#050508';
775
+ ctxSim.fillRect(0, 0, width, height);
776
+ trailHistory = [];
777
+ visitedCells = new Set();
778
+ updatePixelCache();
779
+ resetWalker();
780
+ }
781
+
782
+ // --- Interaction ---
783
+ function startDraw(e) {
784
+ isDrawing = true;
785
+ draw(e);
786
+ }
787
+
788
+ function endDraw() {
789
+ if (isDrawing) {
790
+ isDrawing = false;
791
+ updatePixelCache();
792
+ }
793
+ }
794
+
795
+ function draw(e) {
796
+ if (!isDrawing) return;
797
+
798
+ const rect = cvsTarget.getBoundingClientRect();
799
+ const clientX = e.touches ? e.touches[0].clientX : e.clientX;
800
+ const clientY = e.touches ? e.touches[0].clientY : e.clientY;
801
+ const x = clientX - rect.left;
802
+ const y = clientY - rect.top;
803
+
804
+ // Neon glow brush
805
+ const gradient = ctxTarget.createRadialGradient(x, y, 0, x, y, brushSize);
806
+ gradient.addColorStop(0, '#ffffff');
807
+ gradient.addColorStop(0.3, '#ff0080');
808
+ gradient.addColorStop(0.7, '#ff008080');
809
+ gradient.addColorStop(1, 'transparent');
810
+
811
+ ctxTarget.fillStyle = gradient;
812
+ ctxTarget.beginPath();
813
+ ctxTarget.arc(x, y, brushSize, 0, Math.PI * 2);
814
+ ctxTarget.fill();
815
+ }
816
+
817
+ function togglePause() {
818
+ isPaused = !isPaused;
819
+ document.getElementById('pause-btn').textContent = isPaused ? '▶ Run' : '⏸ Halt';
820
+ }
821
+
822
+ // Event Listeners
823
+ window.addEventListener('resize', resize);
824
+
825
+ cvsTarget.addEventListener('mousedown', startDraw);
826
+ window.addEventListener('mouseup', endDraw);
827
+ cvsTarget.addEventListener('mousemove', draw);
828
+
829
+ cvsTarget.addEventListener('touchstart', (e) => { e.preventDefault(); startDraw(e); }, { passive: false });
830
+ window.addEventListener('touchend', endDraw);
831
+ cvsTarget.addEventListener('touchmove', (e) => { e.preventDefault(); draw(e); }, { passive: false });
832
+
833
+ document.getElementById('brush-size').addEventListener('input', e => {
834
+ brushSize = parseInt(e.target.value);
835
+ document.getElementById('brush-val').textContent = brushSize;
836
+ });
837
+ document.getElementById('speed').addEventListener('input', e => {
838
+ stepSize = parseInt(e.target.value);
839
+ document.getElementById('speed-val').textContent = stepSize;
840
+ });
841
+ document.getElementById('jump-size').addEventListener('input', e => {
842
+ jumpSize = parseInt(e.target.value);
843
+ document.getElementById('jump-val').textContent = jumpSize;
844
+ });
845
+
846
+ // --- MCMC Logic ---
847
+ function updatePixelCache() {
848
+ const imgData = ctxTarget.getImageData(0, 0, width, height);
849
+ pixelData = new Uint8Array(width * height);
850
+ totalTargetCells = 0;
851
+
852
+ for (let i = 0; i < pixelData.length; i++) {
853
+ // Use max of RGB for brightness
854
+ const r = imgData.data[i * 4];
855
+ const g = imgData.data[i * 4 + 1];
856
+ const b = imgData.data[i * 4 + 2];
857
+ const val = Math.max(r, g, b);
858
+ pixelData[i] = Math.max(1, val);
859
+ if (val > 20) totalTargetCells++;
860
+ }
861
+ }
862
+
863
+ function getDensity(x, y) {
864
+ if (x < 0 || x >= width || y < 0 || y >= height) return 0;
865
+ const idx = Math.floor(y) * width + Math.floor(x);
866
+ return pixelData[idx];
867
+ }
868
+
869
+ function resetWalker() {
870
+ // Start in center
871
+ walker.x = width / 2;
872
+ walker.y = height / 2;
873
+ totalSteps = 0;
874
+ acceptedSteps = 0;
875
+ trailHistory = [];
876
+ visitedCells = new Set();
877
+ ctxSim.fillStyle = '#050508';
878
+ ctxSim.fillRect(0, 0, width, height);
879
+ }
880
+
881
+ function metropolisStep() {
882
+ // Propose a random jump
883
+ const propX = walker.x + (Math.random() - 0.5) * jumpSize * 2;
884
+ const propY = walker.y + (Math.random() - 0.5) * jumpSize * 2;
885
+
886
+ const pCurrent = getDensity(walker.x, walker.y);
887
+ const pProp = getDensity(propX, propY);
888
+
889
+ // Metropolis-Hastings acceptance ratio
890
+ const ratio = pProp / pCurrent;
891
+
892
+ // Accept if ratio >= 1 OR with probability = ratio
893
+ if (ratio >= 1 || Math.random() < ratio) {
894
+ walker.x = propX;
895
+ walker.y = propY;
896
+ return true;
897
+ }
898
+ return false;
899
+ }
900
+
901
+ // --- Animation ---
902
+ function loop() {
903
+ if (pixelData && !isPaused) {
904
+ // Subtle fade effect for trail
905
+ ctxSim.fillStyle = 'rgba(5, 5, 8, 0.03)';
906
+ ctxSim.fillRect(0, 0, width, height);
907
+
908
+ let accepted = 0;
909
+ for (let i = 0; i < stepSize; i++) {
910
+ if (metropolisStep()) accepted++;
911
+
912
+ const dx = Math.min(width - 1, Math.max(0, walker.x));
913
+ const dy = Math.min(height - 1, Math.max(0, walker.y));
914
+
915
+ // Track coverage
916
+ const cellKey = `${Math.floor(dx/5)},${Math.floor(dy/5)}`;
917
+ if (getDensity(dx, dy) > 20) {
918
+ visitedCells.add(cellKey);
919
+ }
920
+
921
+ // Add to trail history
922
+ trailHistory.push({ x: dx, y: dy });
923
+ if (trailHistory.length > maxTrailHistory) {
924
+ trailHistory.shift();
925
+ }
926
+
927
+ totalSteps++;
928
+ }
929
+ acceptedSteps += accepted;
930
+
931
+ // Draw trail with color gradient based on age
932
+ for (let i = 0; i < trailHistory.length; i++) {
933
+ const point = trailHistory[i];
934
+ const alpha = (i / trailHistory.length) * 0.8;
935
+ const hue = (totalSteps * 0.01 + i * 0.5) % 360;
936
+
937
+ // Outer glow
938
+ ctxSim.fillStyle = `hsla(${hue}, 100%, 50%, ${alpha * 0.3})`;
939
+ ctxSim.beginPath();
940
+ ctxSim.arc(point.x, point.y, 4, 0, Math.PI * 2);
941
+ ctxSim.fill();
942
+
943
+ // Core
944
+ ctxSim.fillStyle = `hsla(${hue}, 100%, 70%, ${alpha})`;
945
+ ctxSim.beginPath();
946
+ ctxSim.arc(point.x, point.y, 2, 0, Math.PI * 2);
947
+ ctxSim.fill();
948
+ }
949
+
950
+ // Draw current walker with bright glow
951
+ const wx = Math.min(width - 1, Math.max(0, walker.x));
952
+ const wy = Math.min(height - 1, Math.max(0, walker.y));
953
+
954
+ ctxSim.shadowColor = '#00ffff';
955
+ ctxSim.shadowBlur = 15;
956
+ ctxSim.fillStyle = '#ffffff';
957
+ ctxSim.beginPath();
958
+ ctxSim.arc(wx, wy, 4, 0, Math.PI * 2);
959
+ ctxSim.fill();
960
+ ctxSim.shadowBlur = 0;
961
+
962
+ // Update stats
963
+ document.getElementById('step-count').innerText = `CYCLES: ${totalSteps.toLocaleString()}`;
964
+
965
+ const acceptRate = totalSteps > 0 ? (acceptedSteps / totalSteps) * 100 : 0;
966
+ document.getElementById('accept-rate').innerText = `${acceptRate.toFixed(1)}%`;
967
+
968
+ // Color-code acceptance rate
969
+ const statAccept = document.getElementById('stat-accept');
970
+ statAccept.className = 'stat-item';
971
+ if (acceptRate >= 20 && acceptRate <= 50) {
972
+ statAccept.classList.add('good');
973
+ } else if (acceptRate > 50 && acceptRate <= 70) {
974
+ statAccept.classList.add('warn');
975
+ } else {
976
+ statAccept.classList.add('bad');
977
+ }
978
+
979
+ document.getElementById('walker-pos').innerText =
980
+ `[${Math.round(walker.x)}, ${Math.round(walker.y)}]`;
981
+ document.getElementById('current-density').innerText =
982
+ getDensity(walker.x, walker.y);
983
+
984
+ // Coverage estimate
985
+ const coverage = totalTargetCells > 0
986
+ ? Math.min(100, (visitedCells.size / (totalTargetCells / 25)) * 100)
987
+ : 0;
988
+ document.getElementById('coverage').innerText = `${coverage.toFixed(0)}%`;
989
+ }
990
+ requestAnimationFrame(loop);
991
+ }
992
+
993
+ // Initialize
994
+ setTimeout(() => {
995
+ resize();
996
+ loop();
997
+ }, 100);
998
+ </script>
999
+ </body>
1000
+ </html>