Spaces:

Two-Quarks
/

QuarksLab

Runtime error

File size: 12,003 Bytes

ccba775

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