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>DOWN • 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) | |
| } | |
| /* centered controls */ | |
| .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">DOWN · Visual Diagnostics</div> | |
| <div class="sub"> | |
| Use keyboard arrows or the buttons below to navigate. | |
| </div> | |
| <div class="viewer"> | |
| <img id="img" src="graphics/antidown_corrupted_valley_reward.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>AntiDown</strong> — Reward over Training (Corrupted Valley)</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()); | |
| } | |
| /* | |
| Folder layout: | |
| index.html in model folder; PNGs in ./graphics/ | |
| */ | |
| const figures = [ | |
| { | |
| src: "graphics/antidown_corrupted_valley_reward.png", | |
| title: "AntiDown — Reward over Training (Corrupted Valley)", | |
| interpretation: | |
| "Reward as a function of training episode for multiple methods. Early plateaus, sharp drops, and increased variance typically indicate a regime change or reward corruption effects rather than smooth convergence." | |
| }, | |
| { | |
| src: "graphics/antidown_corrupted_valley_valley_visits.png", | |
| title: "AntiDown — Valley Visits over Training", | |
| interpretation: | |
| "State visitation (valley visits) across episodes. High visits indicate repeated occupancy of a specific region; abrupt changes suggest shifts in exploration strategy or a change in the learned policy’s preferred states." | |
| }, | |
| { | |
| src: "graphics/down_paradox_tabular_reward.png", | |
| title: "Down — Reward over Training (Tabular Paradox)", | |
| interpretation: | |
| "Episode-level reward in a tabular setting. A stable band suggests bounded dynamics; frequent spikes or heavy tails suggest sensitivity to stochasticity, reward noise, or termination conditions." | |
| }, | |
| { | |
| src: "graphics/down_paradox_tabular_rho.png", | |
| title: "Down — ρ over Training (Tabular Paradox)", | |
| interpretation: | |
| "ρ plotted across episodes as a consistency/stability proxy. Sustained mid/high values indicate more consistent behavior; large oscillations or abrupt dips indicate instability or switching between behavioral modes." | |
| }, | |
| { | |
| src: "graphics/dual_down_antidown_episode_return.png", | |
| title: "Down vs AntiDown — Tabular Returns (Same Budget)", | |
| interpretation: | |
| "Overlay comparison of episode returns under the same training budget. A persistent separation implies asymmetric performance; repeated crossings imply similar behavior under noise or comparable robustness limits." | |
| }, | |
| { | |
| src: "graphics/figure_reward.png", | |
| title: "Summary Table — Reward & Valley Visits (by Phase)", | |
| interpretation: | |
| "Text summary of mean and standard deviation for reward and valley visits across phases. Means capture central tendency; standard deviations capture volatility. Phase-wise changes indicate non-stationary regimes or experimental phase transitions." | |
| }, | |
| { | |
| src: "graphics/figure_failures.png", | |
| title: "Failure Modes — Counts by Agent and Phase", | |
| interpretation: | |
| "A categorical failure-mode table showing counts per agent and phase. This highlights which behaviors dominate and whether failure types shift across phases, useful for diagnosing where instability concentrates." | |
| } | |
| ]; | |
| 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> | |