Spaces:

eaglelandsonce
/

Absolute_Zero

Running

File size: 35,006 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Absolute Zero Reasoner — Self-Play Simulation</title>
<style>
  :root {
    --bg: #07111f;
    --panel: rgba(13, 28, 47, 0.82);
    --panel-strong: #10233a;
    --border: rgba(137, 184, 224, 0.22);
    --text: #edf7ff;
    --muted: #9cb3c8;
    --cyan: #4bd9ff;
    --blue: #6d8cff;
    --green: #4ce0a0;
    --yellow: #ffd166;
    --red: #ff6b7a;
    --purple: #c68cff;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 10% 0%, rgba(75,217,255,.16), transparent 30%),
      radial-gradient(circle at 95% 10%, rgba(198,140,255,.12), transparent 28%),
      linear-gradient(150deg, #050b14 0%, #07111f 48%, #091728 100%);
  }

  button, input, select { font: inherit; }
  button { cursor: pointer; }

  .app { max-width: 1500px; margin: 0 auto; padding: 26px; }
  .hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: start;
    margin-bottom: 20px;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cyan);
    letter-spacing: .12em;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
  }
  .pulse {
    width: 9px; height: 9px; border-radius: 50%; background: var(--cyan);
    box-shadow: 0 0 18px var(--cyan);
  }
  h1 { margin: 8px 0 7px; font-size: clamp(30px, 4vw, 54px); line-height: 1.02; }
  .subtitle { max-width: 850px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
  .badge {
    border: 1px solid var(--border);
    background: rgba(75,217,255,.08);
    color: #c9f5ff;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  .grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; }
  .panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
  }
  .panel-inner { padding: 18px; }
  .panel h2 { margin: 0 0 14px; font-size: 17px; }
  .panel h3 { margin: 0 0 10px; font-size: 14px; color: #d9efff; }
  .left-stack { display: grid; gap: 16px; align-content: start; }

  .controls { display: grid; gap: 14px; }
  .control-row { display: grid; gap: 7px; }
  .control-row label { color: var(--muted); font-size: 12px; font-weight: 700; display: flex; justify-content: space-between; }
  input[type="range"] { width: 100%; accent-color: var(--cyan); }
  select {
    width: 100%; color: var(--text); background: #0a192a; border: 1px solid var(--border);
    border-radius: 10px; padding: 9px 10px;
  }
  .button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .btn {
    border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px;
    background: #10243b; color: var(--text); font-weight: 800;
    transition: .18s ease;
  }
  .btn:hover { transform: translateY(-1px); border-color: rgba(75,217,255,.65); }
  .btn.primary { background: linear-gradient(135deg, #2076a4, #4c5fc7); border-color: rgba(129,216,255,.45); }
  .btn.danger { color: #ffdce1; background: rgba(255,107,122,.09); }
  .btn.wide { grid-column: 1 / -1; }

  .metric-list { display: grid; gap: 11px; }
  .metric-row { display: grid; grid-template-columns: 92px 1fr 44px; gap: 8px; align-items: center; }
  .metric-row span { color: var(--muted); font-size: 12px; }
  .bar { height: 8px; background: #07111f; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); }
  .bar > i { display: block; height: 100%; border-radius: inherit; transition: width .25s ease; }
  .ded { background: linear-gradient(90deg, var(--cyan), #3190ff); }
  .abd { background: linear-gradient(90deg, var(--purple), #7f75ff); }
  .ind { background: linear-gradient(90deg, var(--green), #1da7b5); }

  .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .mini-card { padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(5,13,23,.45); }
  .mini-card small { display: block; color: var(--muted); margin-bottom: 4px; }
  .mini-card strong { font-size: 21px; }

  .main-stack { display: grid; gap: 18px; min-width: 0; }
  .flow-panel { padding: 18px; }
  .flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    align-items: stretch;
  }
  .flow-step {
    position: relative; min-height: 104px; padding: 13px;
    border: 1px solid var(--border); border-radius: 15px;
    background: rgba(6,15,26,.58); transition: .2s ease;
  }
  .flow-step.active {
    border-color: rgba(75,217,255,.8);
    box-shadow: 0 0 0 1px rgba(75,217,255,.16), 0 0 30px rgba(75,217,255,.13);
    transform: translateY(-2px);
  }
  .flow-step.done { border-color: rgba(76,224,160,.45); }
  .flow-number { color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
  .flow-step strong { display: block; margin: 6px 0 4px; }
  .flow-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

  .task-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
  .task-card, .stats-card { padding: 18px; min-width: 0; }
  .task-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .type-pill { padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; border: 1px solid var(--border); }
  .type-deduction { color: #bcefff; background: rgba(75,217,255,.09); }
  .type-abduction { color: #ead6ff; background: rgba(198,140,255,.10); }
  .type-induction { color: #c8ffe9; background: rgba(76,224,160,.10); }
  .difficulty { color: var(--muted); font-size: 12px; }
  .code {
    min-height: 118px; padding: 15px; border-radius: 14px; overflow: auto;
    background: #040a12; border: 1px solid rgba(125,184,230,.18);
    color: #dff6ff; font: 13px/1.65 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    white-space: pre-wrap;
  }
  .qa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
  .qa-box { padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(9,20,34,.58); min-width: 0; }
  .qa-box small { color: var(--muted); display: block; margin-bottom: 6px; }
  .qa-box div { font-family: "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
  .answer-correct { color: var(--green); }
  .answer-wrong { color: var(--red); }

  .reward-ring-wrap { display: grid; place-items: center; padding: 4px 0 15px; }
  .reward-ring {
    --value: 0;
    width: 150px; height: 150px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--cyan) calc(var(--value) * 1%), rgba(255,255,255,.08) 0);
    position: relative;
  }
  .reward-ring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #0b1b2d; }
  .ring-text { position: relative; z-index: 1; text-align: center; }
  .ring-text strong { display: block; font-size: 31px; }
  .ring-text small { color: var(--muted); }
  .reward-details { display: grid; gap: 9px; }
  .detail-row { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .detail-row b { color: var(--text); }

  .lower-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 18px; }
  .chart-panel, .log-panel { padding: 18px; min-width: 0; }
  canvas { width: 100%; height: 255px; display: block; border-radius: 12px; background: rgba(4,10,18,.45); }
  .legend { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 10px; color: var(--muted); font-size: 11px; }
  .legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--dot); }

  .log { height: 288px; overflow: auto; display: grid; gap: 8px; padding-right: 4px; }
  .log-entry { border-left: 3px solid var(--blue); padding: 8px 10px; background: rgba(5,13,23,.48); border-radius: 0 10px 10px 0; font-size: 12px; line-height: 1.45; color: #cfe2f1; }
  .log-entry.success { border-left-color: var(--green); }
  .log-entry.fail { border-left-color: var(--red); }
  .log-entry.propose { border-left-color: var(--purple); }
  .log-entry small { color: var(--muted); margin-right: 6px; }

  .note { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 12px 0 0; }
  .footer { margin-top: 18px; color: #7f96aa; font-size: 11px; text-align: center; }

  @media (max-width: 1050px) {
    .grid { grid-template-columns: 1fr; }
    .left-stack { grid-template-columns: 1fr 1fr; }
    .flow { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 760px) {
    .app { padding: 16px; }
    .hero { grid-template-columns: 1fr; }
    .left-stack, .task-grid, .lower-grid { grid-template-columns: 1fr; }
    .flow { grid-template-columns: 1fr; }
    .qa { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>
<div class="app">
  <header class="hero">
    <div>
      <div class="eyebrow"><span class="pulse"></span> Reinforced self-play with zero external data</div>
      <h1>Absolute Zero Reasoner</h1>
      <p class="subtitle">A browser-based simulation of a single model that proposes its own code reasoning tasks, verifies them with an executor, solves them, and uses the resulting rewards to build an increasingly challenging curriculum.</p>
    </div>
    <div class="badge">Educational AZR Simulation</div>
  </header>

  <div class="grid">
    <aside class="left-stack">
      <section class="panel"><div class="panel-inner">
        <h2>Simulation Controls</h2>
        <div class="controls">
          <div class="control-row">
            <label><span>Speed</span><b id="speedLabel">650 ms</b></label>
            <input id="speed" type="range" min="90" max="1400" value="650" step="10" />
          </div>
          <div class="control-row">
            <label><span>Curriculum edge</span><b id="edgeLabel">+6%</b></label>
            <input id="edge" type="range" min="-10" max="22" value="6" step="1" />
          </div>
          <div class="control-row">
            <label><span>Learning rate</span><b id="lrLabel">0.055</b></label>
            <input id="learningRate" type="range" min="10" max="100" value="55" step="1" />
          </div>
          <div class="control-row">
            <label for="mode">Reasoning mode</label>
            <select id="mode">
              <option value="mixed">Mixed curriculum</option>
              <option value="deduction">Deduction only</option>
              <option value="abduction">Abduction only</option>
              <option value="induction">Induction only</option>
            </select>
          </div>
          <div class="button-grid">
            <button id="startBtn" class="btn primary">Start</button>
            <button id="stepBtn" class="btn">Single Step</button>
            <button id="burstBtn" class="btn wide">Run 25 Iterations</button>
            <button id="resetBtn" class="btn danger wide">Reset Simulation</button>
          </div>
        </div>
      </div></section>

      <section class="panel"><div class="panel-inner">
        <h2>Unified Model Skills</h2>
        <div class="metric-list">
          <div class="metric-row"><span>Deduction</span><div class="bar"><i id="dedBar" class="ded" style="width:24%"></i></div><b id="dedValue">24%</b></div>
          <div class="metric-row"><span>Abduction</span><div class="bar"><i id="abdBar" class="abd" style="width:20%"></i></div><b id="abdValue">20%</b></div>
          <div class="metric-row"><span>Induction</span><div class="bar"><i id="indBar" class="ind" style="width:16%"></i></div><b id="indValue">16%</b></div>
        </div>
        <p class="note">The same simulated model plays both proposer and solver. Each skill changes independently as the model encounters tasks in that reasoning mode.</p>
      </div></section>

      <section class="panel"><div class="panel-inner">
        <h2>Training State</h2>
        <div class="mini-grid">
          <div class="mini-card"><small>Iteration</small><strong id="iteration">0</strong></div>
          <div class="mini-card"><small>Buffer</small><strong id="bufferSize">1</strong></div>
          <div class="mini-card"><small>Accuracy</small><strong id="accuracy">—</strong></div>
          <div class="mini-card"><small>Avg. reward</small><strong id="avgReward">—</strong></div>
        </div>
      </div></section>
    </aside>

    <main class="main-stack">
      <section class="panel flow-panel">
        <h2>Self-Evolving Training Loop</h2>
        <div class="flow">
          <div class="flow-step" data-flow="0"><span class="flow-number">01</span><strong>Propose</strong><p>Create a task near the solver’s current capability frontier.</p></div>
          <div class="flow-step" data-flow="1"><span class="flow-number">02</span><strong>Validate</strong><p>Execute the generated program and reject invalid tasks.</p></div>
          <div class="flow-step" data-flow="2"><span class="flow-number">03</span><strong>Solve</strong><p>Use the same model to reason over the self-generated task.</p></div>
          <div class="flow-step" data-flow="3"><span class="flow-number">04</span><strong>Verify</strong><p>Compare the answer with executable ground truth.</p></div>
          <div class="flow-step" data-flow="4"><span class="flow-number">05</span><strong>Learn</strong><p>Update proposer and solver behavior from verifiable rewards.</p></div>
        </div>
      </section>

      <div class="task-grid">
        <section class="panel task-card">
          <div class="task-head">
            <div>
              <h2 style="margin-bottom:6px">Current Self-Generated Task</h2>
              <span id="taskType" class="type-pill type-deduction">Deduction</span>
            </div>
            <div id="difficulty" class="difficulty">Difficulty 0.00</div>
          </div>
          <div id="taskPrompt" class="code">Press Start or Single Step to let the model propose its first task.</div>
          <div class="qa">
            <div class="qa-box"><small>Model answer</small><div id="modelAnswer">—</div></div>
            <div class="qa-box"><small>Executor ground truth</small><div id="groundTruth">—</div></div>
          </div>
        </section>

        <section class="panel stats-card">
          <h2>Verifiable Reward</h2>
          <div class="reward-ring-wrap">
            <div id="rewardRing" class="reward-ring" style="--value:0">
              <div class="ring-text"><strong id="rewardValue">0.00</strong><small>combined reward</small></div>
            </div>
          </div>
          <div class="reward-details">
            <div class="detail-row"><span>Task validity</span><b id="validityReward">—</b></div>
            <div class="detail-row"><span>Learnability reward</span><b id="learnabilityReward">—</b></div>
            <div class="detail-row"><span>Solver accuracy reward</span><b id="solverReward">—</b></div>
            <div class="detail-row"><span>Predicted success</span><b id="predictedSuccess">—</b></div>
          </div>
          <p class="note">The learnability score is highest when predicted success is near 50%, representing tasks that are neither trivial nor impossible.</p>
        </section>
      </div>

      <div class="lower-grid">
        <section class="panel chart-panel">
          <h2>Capability Growth</h2>
          <canvas id="chart" width="900" height="330"></canvas>
          <div class="legend">
            <span style="--dot:#4bd9ff">Deduction</span>
            <span style="--dot:#c68cff">Abduction</span>
            <span style="--dot:#4ce0a0">Induction</span>
            <span style="--dot:#ffd166">Rolling accuracy</span>
          </div>
        </section>
        <section class="panel log-panel">
          <h2>Training Trace</h2>
          <div id="log" class="log"></div>
        </section>
      </div>
    </main>
  </div>

  <div class="footer">This simulation illustrates the paper’s concepts; it does not reproduce the authors’ neural-network training, TRR++, or benchmark results.</div>
</div>

<script>
(() => {
  "use strict";

  const $ = (id) => document.getElementById(id);
  const clamp = (v, lo = 0, hi = 1) => Math.max(lo, Math.min(hi, v));
  const rand = (a, b) => a + Math.random() * (b - a);
  const randInt = (a, b) => Math.floor(rand(a, b + 1));
  const choice = (arr) => arr[Math.floor(Math.random() * arr.length)];
  const sigmoid = (x) => 1 / (1 + Math.exp(-x));

  const COLORS = {
    deduction: "#4bd9ff",
    abduction: "#c68cff",
    induction: "#4ce0a0",
    accuracy: "#ffd166",
    grid: "rgba(190,220,244,.12)",
    text: "rgba(211,231,247,.66)"
  };

  const initialState = () => ({
    iteration: 0,
    running: false,
    busy: false,
    timer: null,
    skills: { deduction: 0.24, abduction: 0.20, induction: 0.16 },
    buffer: [{ type: "seed", program: "f(x) = x", difficulty: 0.01 }],
    history: [],
    outcomes: [],
    rewards: [],
    current: null
  });

  let state = initialState();

  function makeProgram(difficulty, invertible = false) {
    const d = clamp(difficulty);
    const tier = d < 0.3 ? 0 : d < 0.62 ? 1 : 2;
    let family;
    if (invertible) family = choice(tier === 0 ? ["linear"] : tier === 1 ? ["linear", "affine2"] : ["linear", "affine2", "piecewise"]);
    else family = choice(tier === 0 ? ["linear", "square"] : tier === 1 ? ["linear", "square", "mod", "poly"] : ["poly", "mod", "piecewise", "nested"]);

    if (family === "linear") {
      const a = randInt(1, 2 + Math.round(d * 7));
      const b = randInt(-3 - Math.round(d * 8), 3 + Math.round(d * 8));
      return { family, label: `f(x) = ${a}x ${b >= 0 ? "+" : "-"} ${Math.abs(b)}`, run: x => a * x + b, params: {a,b} };
    }
    if (family === "affine2") {
      const a = randInt(2, 4 + Math.round(d * 5));
      const b = randInt(-8, 8);
      const c = randInt(-5, 5);
      return { family, label: `f(x) = ${a}(x ${b >= 0 ? "+" : "-"} ${Math.abs(b)}) ${c >= 0 ? "+" : "-"} ${Math.abs(c)}`, run: x => a * (x + b) + c, params: {a,b,c} };
    }
    if (family === "square") {
      const a = randInt(1, 3 + Math.round(d * 4));
      const b = randInt(-4, 6);
      return { family, label: `f(x) = ${a}x² ${b >= 0 ? "+" : "-"} ${Math.abs(b)}`, run: x => a * x * x + b, params: {a,b} };
    }
    if (family === "poly") {
      const a = randInt(1, 3);
      const b = randInt(-5, 5);
      const c = randInt(-8, 8);
      return { family, label: `f(x) = ${a}x² ${b >= 0 ? "+" : "-"} ${Math.abs(b)}x ${c >= 0 ? "+" : "-"} ${Math.abs(c)}`, run: x => a*x*x + b*x + c, params: {a,b,c} };
    }
    if (family === "mod") {
      const a = randInt(2, 8);
      const b = randInt(0, 10);
      const m = randInt(5, 13 + Math.round(d * 10));
      return { family, label: `f(x) = (${a}x + ${b}) mod ${m}`, run: x => ((a*x+b)%m+m)%m, params: {a,b,m} };
    }
    if (family === "piecewise") {
      const t = randInt(-2, 4);
      const a = randInt(2, 5);
      const b = randInt(1, 7);
      return { family, label: `f(x) = x < ${t} ? ${a}x - ${b} : ${a}x + ${b}`, run: x => x < t ? a*x-b : a*x+b, params: {t,a,b} };
    }
    const a = randInt(2, 5), b = randInt(1, 8), m = randInt(7, 17);
    return { family: "nested", label: `f(x) = ((${a}x + ${b})² + x) mod ${m}`, run: x => (((a*x+b)**2+x)%m+m)%m, params: {a,b,m} };
  }

  function formatExamples(xs, program) {
    return xs.map(x => `  ${x} → ${program.run(x)}`).join("\n");
  }

  function proposeTask(type) {
    const skill = state.skills[type];
    const edge = Number($("edge").value) / 100;
    const target = clamp(skill + edge + rand(-0.09, 0.09), 0.03, 0.98);
    const noise = rand(-0.025, 0.025);
    const difficulty = clamp(target + noise, 0.02, 0.99);
    const span = 5 + Math.round(difficulty * 20);

    if (type === "deduction") {
      const program = makeProgram(difficulty, false);
      const input = randInt(-span, span);
      const output = program.run(input);
      return {
        type, difficulty, program,
        prompt: `REASONING MODE: DEDUCTION\n\nProgram:\n  ${program.label}\n\nInput:\n  x = ${input}\n\nQuestion:\n  What output does the program produce?`,
        truth: String(output),
        input, output,
        validate: () => Number.isFinite(output)
      };
    }

    if (type === "abduction") {
      const program = makeProgram(difficulty, true);
      const hiddenInput = randInt(-span, span);
      const output = program.run(hiddenInput);
      const validInputs = [];
      for (let x = -span - 8; x <= span + 8; x++) if (program.run(x) === output) validInputs.push(x);
      return {
        type, difficulty, program,
        prompt: `REASONING MODE: ABDUCTION\n\nProgram:\n  ${program.label}\n\nObserved output:\n  y = ${output}\n\nSearch domain:\n  ${-span-8} ≤ x ≤ ${span+8}\n\nQuestion:\n  Infer one input x that could have produced this output.`,
        truth: validInputs.join(" or "),
        hiddenInput, output, validInputs,
        validate: () => validInputs.length > 0
      };
    }

    const candidateCount = difficulty < .35 ? 3 : difficulty < .7 ? 4 : 5;
    const correct = makeProgram(difficulty, false);
    const xs = [];
    const needed = difficulty < .4 ? 3 : difficulty < .75 ? 4 : 5;
    while (xs.length < needed) {
      const x = randInt(-span, span);
      if (!xs.includes(x)) xs.push(x);
    }
    const candidates = [correct];
    while (candidates.length < candidateCount) {
      const p = makeProgram(clamp(difficulty + rand(-.15,.15)), false);
      const duplicate = candidates.some(c => c.label === p.label);
      if (!duplicate) candidates.push(p);
    }
    candidates.sort(() => Math.random() - .5);
    const labels = "ABCDE";
    const correctIndex = candidates.findIndex(c => c === correct);
    const optionText = candidates.map((p, i) => `  ${labels[i]}. ${p.label}`).join("\n");
    return {
      type, difficulty, program: correct, candidates, correctIndex,
      prompt: `REASONING MODE: INDUCTION\n\nExamples:\n${formatExamples(xs, correct)}\n\nCandidate programs:\n${optionText}\n\nQuestion:\n  Which program best explains the examples?`,
      truth: `${labels[correctIndex]}. ${correct.label}`,
      xs,
      validate: () => xs.every(x => Number.isFinite(correct.run(x)))
    };
  }

  function predictedSuccess(type, difficulty) {
    const skill = state.skills[type];
    return clamp(sigmoid((skill - difficulty) * 8.5));
  }

  function solveTask(task, pSuccess) {
    const success = Math.random() < pSuccess;
    if (success) {
      if (task.type === "abduction") return { success: true, answer: String(choice(task.validInputs)) };
      return { success: true, answer: task.truth };
    }

    if (task.type === "deduction") {
      const truth = Number(task.truth);
      const magnitude = Math.max(1, Math.round(1 + task.difficulty * 8));
      let wrong = truth + choice([-1, 1]) * randInt(1, magnitude);
      if (wrong === truth) wrong += 1;
      return { success: false, answer: String(wrong) };
    }
    if (task.type === "abduction") {
      const domain = 12 + Math.round(task.difficulty * 22);
      let wrong = randInt(-domain, domain);
      let guard = 0;
      while (task.validInputs.includes(wrong) && guard++ < 30) wrong = randInt(-domain, domain);
      return { success: false, answer: String(wrong) };
    }
    const labels = "ABCDE";
    const wrongIndices = task.candidates.map((_,i)=>i).filter(i=>i!==task.correctIndex);
    const idx = choice(wrongIndices);
    return { success: false, answer: `${labels[idx]}. ${task.candidates[idx].label}` };
  }

  function verifyAnswer(task, answer) {
    if (task.type === "deduction") {
      const value = Number(String(answer).trim());
      return Number.isFinite(value) && value === Number(task.truth);
    }
    if (task.type === "abduction") {
      const value = Number(String(answer).trim());
      return Number.isInteger(value) && task.validInputs.includes(value) && task.program.run(value) === task.output;
    }
    const match = String(answer).trim().match(/^([A-E])\./i);
    if (!match) return false;
    return "ABCDE".indexOf(match[1].toUpperCase()) === task.correctIndex;
  }

  function learn(task, pSuccess, success, learnability) {
    const lr = Number($("learningRate").value) / 1000;
    const old = state.skills[task.type];
    const errorSignal = success ? (1 - old) : Math.max(0.12, task.difficulty - old + 0.22);
    const frontierBonus = 0.55 + 0.9 * learnability;
    const update = lr * errorSignal * frontierBonus * (success ? 1 : 0.52);
    state.skills[task.type] = clamp(old + update, 0.01, 0.995);

    // Small transfer between reasoning modes, representing shared parameters.
    Object.keys(state.skills).forEach(k => {
      if (k !== task.type) state.skills[k] = clamp(state.skills[k] + update * 0.035, 0.01, 0.995);
    });
    return state.skills[task.type] - old;
  }

  function chooseMode() {
    const selected = $("mode").value;
    if (selected !== "mixed") return selected;
    const modes = ["deduction", "abduction", "induction"];
    // Prioritize weaker skills while retaining exploration.
    const weights = modes.map(m => (1.08 - state.skills[m]) + 0.22);
    const total = weights.reduce((a,b)=>a+b,0);
    let r = Math.random() * total;
    for (let i=0; i<modes.length; i++) {
      r -= weights[i];
      if (r <= 0) return modes[i];
    }
    return modes[2];
  }

  function setFlow(index) {
    document.querySelectorAll(".flow-step").forEach((el, i) => {
      el.classList.toggle("active", i === index);
      el.classList.toggle("done", i < index);
    });
  }

  function wait(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
  function phaseDelay() { return Math.max(45, Number($("speed").value) / 5.4); }

  async function iteration({animate = true} = {}) {
    if (state.busy) return;
    state.busy = true;
    const type = chooseMode();

    setFlow(0);
    const task = proposeTask(type);
    state.current = task;
    renderTask(task);
    addLog("propose", `Proposed a ${type} task at difficulty ${task.difficulty.toFixed(2)}.`);
    if (animate) await wait(phaseDelay());

    setFlow(1);
    const valid = task.validate();
    if (!valid) {
      addLog("fail", "Executor rejected the proposed task; no solver update was applied.");
      state.busy = false;
      return;
    }
    state.buffer.push(task);
    if (state.buffer.length > 180) state.buffer.shift();
    if (animate) await wait(phaseDelay());

    setFlow(2);
    const pSuccess = predictedSuccess(type, task.difficulty);
    const result = solveTask(task, pSuccess);
    const verifiedCorrect = verifyAnswer(task, result.answer);
    $("modelAnswer").textContent = result.answer;
    $("modelAnswer").className = verifiedCorrect ? "answer-correct" : "answer-wrong";
    if (animate) await wait(phaseDelay());

    setFlow(3);
    const solverReward = verifiedCorrect ? 1 : 0;
    const learnability = 4 * pSuccess * (1 - pSuccess);
    const combined = 0.52 * solverReward + 0.38 * learnability + 0.10;
    renderRewards({valid, pSuccess, solverReward, learnability, combined});
    if (animate) await wait(phaseDelay());

    setFlow(4);
    const delta = learn(task, pSuccess, verifiedCorrect, learnability);
    state.iteration += 1;
    state.outcomes.push(solverReward);
    state.rewards.push(combined);
    if (state.outcomes.length > 240) state.outcomes.shift();
    if (state.rewards.length > 240) state.rewards.shift();

    const rolling = state.outcomes.slice(-20);
    const rollingAccuracy = rolling.length ? rolling.reduce((a,b)=>a+b,0)/rolling.length : 0;
    state.history.push({
      iteration: state.iteration,
      deduction: state.skills.deduction,
      abduction: state.skills.abduction,
      induction: state.skills.induction,
      accuracy: rollingAccuracy
    });
    if (state.history.length > 140) state.history.shift();

    addLog(verifiedCorrect ? "success" : "fail",
      `${verifiedCorrect ? "Executor verified correct" : "Executor rejected the answer"}; ${type} skill ${delta >= 0 ? "+" : ""}${(delta*100).toFixed(2)} points. Learnability ${learnability.toFixed(2)}.`);
    updateUI();
    drawChart();
    if (animate) await wait(phaseDelay());
    setFlow(-1);
    state.busy = false;
  }

  async function runLoop() {
    if (!state.running) return;
    await iteration({animate:true});
    if (state.running) state.timer = setTimeout(runLoop, Math.max(20, Number($("speed").value) / 9));
  }

  function toggleStart() {
    state.running = !state.running;
    $("startBtn").textContent = state.running ? "Pause" : "Start";
    $("startBtn").classList.toggle("primary", !state.running);
    if (state.running) runLoop();
    else if (state.timer) clearTimeout(state.timer);
  }

  async function runBurst() {
    if (state.running || state.busy) return;
    $("burstBtn").disabled = true;
    $("burstBtn").textContent = "Running…";
    for (let i=0; i<25; i++) {
      await iteration({animate:false});
      await wait(12);
    }
    $("burstBtn").disabled = false;
    $("burstBtn").textContent = "Run 25 Iterations";
  }

  function renderTask(task) {
    const typeName = task.type[0].toUpperCase() + task.type.slice(1);
    $("taskType").textContent = typeName;
    $("taskType").className = `type-pill type-${task.type}`;
    $("difficulty").textContent = `Difficulty ${task.difficulty.toFixed(2)}`;
    $("taskPrompt").textContent = task.prompt;
    $("modelAnswer").textContent = "Reasoning…";
    $("modelAnswer").className = "";
    $("groundTruth").textContent = task.truth;
  }

  function renderRewards({valid, pSuccess, solverReward, learnability, combined}) {
    $("validityReward").textContent = valid ? "1.00" : "0.00";
    $("learnabilityReward").textContent = learnability.toFixed(2);
    $("solverReward").textContent = solverReward.toFixed(2);
    $("predictedSuccess").textContent = `${Math.round(pSuccess*100)}%`;
    $("rewardValue").textContent = combined.toFixed(2);
    $("rewardRing").style.setProperty("--value", Math.round(combined*100));
  }

  function addLog(kind, text) {
    const node = document.createElement("div");
    node.className = `log-entry ${kind}`;
    node.innerHTML = `<small>#${state.iteration + 1}</small>${text}`;
    $("log").prepend(node);
    while ($("log").children.length > 55) $("log").removeChild($("log").lastChild);
  }

  function updateUI() {
    const skills = state.skills;
    [["ded", skills.deduction], ["abd", skills.abduction], ["ind", skills.induction]].forEach(([prefix, value]) => {
      $(`${prefix}Bar`).style.width = `${value*100}%`;
      $(`${prefix}Value`).textContent = `${Math.round(value*100)}%`;
    });
    $("iteration").textContent = state.iteration;
    $("bufferSize").textContent = state.buffer.length;
    const recent = state.outcomes.slice(-30);
    $("accuracy").textContent = recent.length ? `${Math.round(recent.reduce((a,b)=>a+b,0)/recent.length*100)}%` : "—";
    const r = state.rewards.slice(-30);
    $("avgReward").textContent = r.length ? (r.reduce((a,b)=>a+b,0)/r.length).toFixed(2) : "—";
  }

  function drawChart() {
    const canvas = $("chart");
    const rect = canvas.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    canvas.width = Math.max(600, Math.floor(rect.width * dpr));
    canvas.height = Math.floor(255 * dpr);
    const ctx = canvas.getContext("2d");
    ctx.scale(dpr, dpr);
    const w = canvas.width / dpr, h = canvas.height / dpr;
    const pad = {l:42, r:14, t:16, b:28};
    ctx.clearRect(0,0,w,h);

    ctx.strokeStyle = COLORS.grid;
    ctx.lineWidth = 1;
    ctx.fillStyle = COLORS.text;
    ctx.font = "11px system-ui";
    for (let i=0; i<=4; i++) {
      const y = pad.t + (h-pad.t-pad.b) * i/4;
      ctx.beginPath(); ctx.moveTo(pad.l,y); ctx.lineTo(w-pad.r,y); ctx.stroke();
      const value = Math.round((1-i/4)*100);
      ctx.fillText(`${value}%`, 6, y+4);
    }

    const hist = state.history.length ? state.history : [{iteration:0, deduction:.24, abduction:.20, induction:.16, accuracy:0}];
    const minI = hist[0].iteration;
    const maxI = Math.max(minI+1, hist[hist.length-1].iteration);
    const xFor = it => pad.l + (it-minI)/(maxI-minI)*(w-pad.l-pad.r);
    const yFor = v => pad.t + (1-v)*(h-pad.t-pad.b);

    const plot = (key, color) => {
      ctx.strokeStyle = color; ctx.lineWidth = 2.2; ctx.beginPath();
      hist.forEach((p,i) => { const x=xFor(p.iteration), y=yFor(p[key]); i?ctx.lineTo(x,y):ctx.moveTo(x,y); });
      ctx.stroke();
    };
    plot("deduction", COLORS.deduction);
    plot("abduction", COLORS.abduction);
    plot("induction", COLORS.induction);
    plot("accuracy", COLORS.accuracy);

    ctx.fillStyle = COLORS.text;
    ctx.fillText(String(minI), pad.l-4, h-8);
    ctx.textAlign = "right";
    ctx.fillText(String(maxI), w-pad.r, h-8);
    ctx.textAlign = "left";
  }

  function reset() {
    if (state.timer) clearTimeout(state.timer);
    state = initialState();
    $("startBtn").textContent = "Start";
    $("startBtn").classList.add("primary");
    $("taskType").textContent = "Deduction";
    $("taskType").className = "type-pill type-deduction";
    $("difficulty").textContent = "Difficulty 0.00";
    $("taskPrompt").textContent = "Press Start or Single Step to let the model propose its first task.";
    $("modelAnswer").textContent = "—";
    $("modelAnswer").className = "";
    $("groundTruth").textContent = "—";
    $("log").innerHTML = "";
    renderRewards({valid:false,pSuccess:0,solverReward:0,learnability:0,combined:0});
    $("validityReward").textContent = "—";
    $("learnabilityReward").textContent = "—";
    $("solverReward").textContent = "—";
    $("predictedSuccess").textContent = "—";
    setFlow(-1);
    updateUI();
    drawChart();
    addLog("propose", "Initialized with a minimal identity-function seed. No external question dataset loaded.");
  }

  $("startBtn").addEventListener("click", toggleStart);
  $("stepBtn").addEventListener("click", () => { if (!state.running) iteration({animate:true}); });
  $("burstBtn").addEventListener("click", runBurst);
  $("resetBtn").addEventListener("click", reset);
  $("speed").addEventListener("input", e => $("speedLabel").textContent = `${e.target.value} ms`);
  $("edge").addEventListener("input", e => $("edgeLabel").textContent = `${Number(e.target.value)>=0?"+":""}${e.target.value}%`);
  $("learningRate").addEventListener("input", e => $("lrLabel").textContent = (Number(e.target.value)/1000).toFixed(3));
  window.addEventListener("resize", drawChart);

  reset();
})();
</script>
</body>
</html>