Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>STRANGE • Graphics</title> | |
| <link rel="icon" href="/favicon.svg" type="image/svg+xml"/> | |
| <style> | |
| *{margin:0;padding:0;box-sizing:border-box} | |
| :root{ | |
| --bg:#000; --fg:#fff; --muted:rgba(255,255,255,.62); | |
| --card:rgba(255,255,255,.04); --stroke:rgba(255,255,255,.10); --glass:rgba(0,0,0,.38); | |
| --accent:#8cb4ff; | |
| } | |
| body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--fg);overflow-x:hidden} | |
| #quantumField{position:fixed;inset:0;width:100vw;height:100vh;z-index:-10;background:#000} | |
| nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 24px;background:var(--glass);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)} | |
| .nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px} | |
| .brand{font-weight:700;font-size:1.1rem} | |
| .nav-links{display:flex;gap:10px;margin-left:18px} | |
| .nav-links a{text-decoration:none;color:var(--fg);padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:.9rem;opacity:.86;transition:.15s ease;white-space:nowrap} | |
| .nav-links a:hover{opacity:1;background:rgba(255,255,255,.06)} | |
| .spacer{flex:1} | |
| .menu-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:12px;cursor:pointer;background:rgba(255,255,255,.02)} | |
| .menu-btn span{display:block;width:18px;height:2px;background:#fff;position:relative} | |
| .menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff} | |
| .menu-btn span::before{top:-6px} .menu-btn span::after{top:6px} | |
| .menu{position:absolute;top:60px;right:24px;min-width:220px;padding:10px;border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.10);box-shadow:0 0 30px rgba(0,0,0,.6);display:none} | |
| .menu.open{display:block} | |
| .menu a{display:block;padding:10px 10px;border-radius:10px;text-decoration:none;color:var(--fg);opacity:.9} | |
| .menu a:hover{background:rgba(255,255,255,.06);opacity:1} | |
| .menu .sep{height:1px;background:rgba(255,255,255,.10);margin:8px 2px} | |
| .wrap{max-width:1100px;margin:0 auto;padding:110px 6vw 70px} | |
| .h{font-size:1.35rem;font-weight:650} | |
| .sub{color:var(--muted);margin-top:10px;line-height:1.6;max-width:980px} | |
| .viewer{margin-top:20px;display:grid;gap:18px;justify-items:center} | |
| /* 15% smaller */ | |
| img{ | |
| width:85%; | |
| max-width:850px; | |
| max-height:60vh; | |
| object-fit:contain; | |
| border-radius:14px; | |
| background:rgba(255,255,255,.03); | |
| border:1px solid rgba(255,255,255,.10) | |
| } | |
| /* controls: centered + cleaner spacing */ | |
| .controls{ | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| gap:18px; | |
| margin-top:6px; | |
| } | |
| .btn{text-decoration:none;color:var(--fg);padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);opacity:.92;transition:.15s ease} | |
| .btn:hover{opacity:1;background:rgba(255,255,255,.07)} | |
| .kbd{font-family:ui-monospace,Menlo,Consolas,monospace;background:#15151b;border:1px solid #2a2a33;border-radius:6px;padding:2px 6px;font-size:.85em;color:var(--muted)} | |
| .cap{color:var(--muted);max-width:980px;line-height:1.55;text-align:center} | |
| .cap strong{color:rgba(255,255,255,.9)} | |
| .rule{border:0;border-top:1px solid rgba(255,255,255,.10);margin:22px 0} | |
| .interp{color:var(--muted);max-width:980px;line-height:1.65} | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="quantumField"></canvas> | |
| <nav> | |
| <div class="nav-inner"> | |
| <div class="brand">TwoQuarks</div> | |
| <div class="nav-links"> | |
| <a href="../../../index.html#down">DOWN</a> | |
| <a href="../../../index.html#strange">STRANGE</a> | |
| <a href="../../../index.html#top">TOP</a> | |
| <a href="../../../index.html#charm">CHARM</a> | |
| <a href="../../../index.html#up">UP</a> | |
| <a href="../../../index.html#bottom">BOTTOM</a> | |
| </div> | |
| <div class="spacer"></div> | |
| <div class="menu-btn" id="menuBtn"><span></span></div> | |
| <div class="menu" id="siteMenu"> | |
| <a href="../../../index.html#about">ABOUT</a> | |
| <a href="../../../quarkslab.html">QuarksLab</a> | |
| <div class="sep"></div> | |
| <a href="../../../quarks/bottom/resume.pdf">Resume</a> | |
| <a href="../../../summary.pdf">Summary</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="wrap"> | |
| <div class="h">STRANGE · Visual Diagnostics</div> | |
| <div class="sub"> | |
| Use keyboard arrows or the buttons below to navigate. | |
| </div> | |
| <div class="viewer"> | |
| <img id="img" src="graphics/strange_episode_return.png" alt="figure"/> | |
| <div class="controls"> | |
| <a class="btn" href="javascript:void(0)" onclick="prev()">← Previous</a> | |
| <a class="btn" href="javascript:void(0)" onclick="next()">Next →</a> | |
| </div> | |
| <div class="cap" id="cap"><strong>Strange</strong> — Episode Return</div> | |
| </div> | |
| <hr class="rule"/> | |
| <div class="interp" id="interp"> | |
| Interpretation will appear here. | |
| </div> | |
| </div> | |
| <!-- STARFIELD --> | |
| <script> | |
| const canvas = document.getElementById('quantumField'); | |
| const ctx = canvas.getContext('2d'); | |
| function resize(){ canvas.width = innerWidth; canvas.height = innerHeight; } | |
| resize(); addEventListener('resize', resize); | |
| const stars = Array.from({length: 650}, () => ({ | |
| x: (Math.random()-0.5) * canvas.width, | |
| y: (Math.random()-0.5) * canvas.height, | |
| z: Math.random() * canvas.width | |
| })); | |
| function animate(){ | |
| ctx.clearRect(0,0,canvas.width,canvas.height); | |
| for(const s of stars){ | |
| s.z -= 2.2; | |
| if (s.z < 1){ | |
| s.x = (Math.random()-0.7) * canvas.width; | |
| s.y = (Math.random()-0.7) * canvas.height; | |
| s.z = canvas.width; | |
| } | |
| const k = 128 / s.z; | |
| const x = s.x * k + canvas.width/2; | |
| const y = s.y * k + canvas.height/2; | |
| const r = (1 - s.z/canvas.width) * 1.2; | |
| ctx.beginPath(); | |
| ctx.fillStyle = "rgba(140,180,255,0.85)"; | |
| ctx.arc(x,y,r,0,Math.PI*2); | |
| ctx.fill(); | |
| } | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| </script> | |
| <!-- MENU + VIEWER --> | |
| <script> | |
| const menuBtn = document.getElementById('menuBtn'); | |
| const siteMenu = document.getElementById('siteMenu'); | |
| if(menuBtn && siteMenu){ | |
| menuBtn.addEventListener('click', (e)=>{ e.stopPropagation(); siteMenu.classList.toggle('open'); }); | |
| document.addEventListener('click', ()=> siteMenu.classList.remove('open')); | |
| siteMenu.addEventListener('click', (e)=> e.stopPropagation()); | |
| } | |
| /* | |
| Assumption: | |
| index.html is in the model folder and PNGs are in ./graphics/ | |
| */ | |
| const figures = [ | |
| // --- STRANGE --- | |
| { src:"graphics/strange_episode_return.png", title:"Strange — Episode Return", | |
| interpretation:"Episode-level return over time. Look for trend (improving/flat/declining) and variability (stable band vs frequent deep drops)." }, | |
| { src:"graphics/strange_stability.png", title:"Strange — Stability", | |
| interpretation:"A stability score across episodes. Higher/steadier values indicate consistent behavior; sharp oscillations suggest regime switching or instability." }, | |
| { src:"graphics/strange_diversity.png", title:"Strange — Diversity", | |
| interpretation:"A diversity / exploration footprint. Decreasing diversity can indicate convergence; persistently high diversity can indicate continued exploration or thrashing." }, | |
| { src:"graphics/strange_progress.png", title:"Strange — Progress", | |
| interpretation:"A progress proxy (learning signal). Saturation can indicate convergence or a plateau; strong oscillations suggest sensitivity to noise or non-stationarity." }, | |
| { src:"graphics/strange_phase.png", title:"Strange — Phase", | |
| interpretation:"A phase/regime indicator. Stable bands imply consistent mode; frequent jumps imply switching between behaviors or unstable dynamics." }, | |
| { src:"graphics/strange_H_swarm.png", title:"Strange — H_swarm", | |
| interpretation:"An entropy/dispersion-like signal. A gradual decrease often corresponds to consolidation; persistent elevation suggests diffuse behavior." }, | |
| { src:"graphics/strange_S_t.png", title:"Strange — S_t", | |
| interpretation:"Tracked signal S_t over time. Bounded drift suggests controlled dynamics; sudden spikes/drops can indicate shocks or measurement sensitivity." }, | |
| { src:"graphics/strange_T.png", title:"Strange — T", | |
| interpretation:"Temporal/transition signal T. Spikes typically correspond to abrupt changes; smoother traces indicate gradual adaptation." }, | |
| { src:"graphics/strange_w_t.png", title:"Strange — w_t", | |
| interpretation:"Parameter/weight trace w_t. Slow drift suggests stable optimization; erratic movement or jumps can indicate unstable updates or scaling issues." }, | |
| // --- ANTISTRANGE --- | |
| { src:"graphics/antistrange_episode_return.png", title:"AntiStrange — Episode Return", | |
| interpretation:"Episode return for the AntiStrange variant. Compare trend and variance versus Strange to see symmetry/asymmetry in learning dynamics." }, | |
| { src:"graphics/antistrange_stability.png", title:"AntiStrange — Stability", | |
| interpretation:"Stability score for AntiStrange. Differences relative to Strange highlight how robust/fragile the dynamics are under the anti-variant." }, | |
| { src:"graphics/antistrange_diversity.png", title:"AntiStrange — Diversity", | |
| interpretation:"Exploration diversity for AntiStrange. High diversity with flat returns can indicate diffuse search; low diversity with flat returns can indicate getting stuck." }, | |
| { src:"graphics/antistrange_progress.png", title:"AntiStrange — Progress", | |
| interpretation:"Progress proxy for AntiStrange. Divergence between progress and return can indicate proxy optimization (improving metric without return gains)." }, | |
| { src:"graphics/antistrange_phase.png", title:"AntiStrange — Phase", | |
| interpretation:"Phase/regime indicator for AntiStrange. Frequent jumps suggest unstable mode switching; stable ranges suggest a consistent operating regime." }, | |
| { src:"graphics/antistrange_H_swarm.png", title:"AntiStrange — H_swarm", | |
| interpretation:"Entropy/dispersion-like signal for AntiStrange. Compare with Strange to see whether the anti-variant consolidates or remains diffuse." }, | |
| { src:"graphics/antistrange_S_t.png", title:"AntiStrange — S_t", | |
| interpretation:"Tracked signal S_t for AntiStrange. Large excursions versus Strange can indicate stronger sensitivity or less damping." }, | |
| { src:"graphics/antistrange_T.png", title:"AntiStrange — T", | |
| interpretation:"Temporal/transition signal T for AntiStrange. Spikes reflect abrupt transitions; a late rising band can indicate increasing volatility." }, | |
| { src:"graphics/antistrange_w_t.png", title:"AntiStrange — w_t", | |
| interpretation:"Parameter/weight trace w_t for AntiStrange. More jitter or drift indicates less stable optimization relative to Strange." }, | |
| // --- DUAL --- | |
| { src:"graphics/dual_episode_return.png", title:"Dual — Episode Return (Strange vs AntiStrange)", | |
| interpretation:"Overlay of episode returns for both variants. A persistent gap suggests asymmetric performance; repeated crossings suggest similar behavior under noise." }, | |
| { src:"graphics/dual_stability.png", title:"Dual — Stability (Strange vs AntiStrange)", | |
| interpretation:"Overlay of stability scores. Separation indicates differing robustness; similar bands indicate comparable stability under the same conditions." } | |
| ]; | |
| let idx = 0; | |
| function renderFigure(){ | |
| const f = figures[idx]; | |
| document.getElementById("img").src = f.src; | |
| document.getElementById("cap").innerHTML = `<strong>${f.title}</strong>`; | |
| document.getElementById("interp").innerHTML = | |
| `<strong>Interpretation</strong><br/>${f.interpretation}`; | |
| } | |
| function next(){ idx = (idx + 1) % figures.length; renderFigure(); } | |
| function prev(){ idx = (idx - 1 + figures.length) % figures.length; renderFigure(); } | |
| document.addEventListener("keydown", e => { | |
| if (e.key === "ArrowRight") next(); | |
| if (e.key === "ArrowLeft") prev(); | |
| }); | |
| renderFigure(); | |
| </script> | |
| </body> | |
| </html> | |