Spaces:

Two-Quarks
/

QuarksLab

Runtime error

File size: 9,732 Bytes

ccba775

<!DOCTYPE html>
<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>