@@ -0,0 +1,974 @@
---
const budgetPresets = [
{ id: "direct", label: "Direct", serial: 0.15, parallel: 1, verifier: 0, search: 0, tool: 0 },
{ id: "cot", label: "Long CoT", serial: 0.82, parallel: 1, verifier: 0, search: 0, tool: 0 },
{ id: "sc", label: "Self-Consistency", serial: 0.22, parallel: 12, verifier: 0.45, search: 0, tool: 0 },
{ id: "bon", label: "Best-of-N", serial: 0.18, parallel: 16, verifier: 0.82, search: 0, tool: 0 },
{ id: "search", label: "PRM Search", serial: 0.28, parallel: 8, verifier: 0.9, search: 0.62, tool: 0 },
{ id: "agent", label: "Tool Agent", serial: 0.38, parallel: 4, verifier: 0.76, search: 0.2, tool: 0.68 },
{ id: "k3max", label: "K3 · MAX", serial: 0.7, parallel: 6, verifier: 0.84, search: 0.35, tool: 0.52 },
];
const rolloutProfiles = [
{
id: "mixed",
label: "5 对 / 3 错",
rewards: [1, 0, 1, 1, 0, 1, 0, 1],
lengths: [640, 2860, 980, 1740, 4280, 1220, 3560, 760],
ratios: [1.02, 0.89, 1.11, 1.04, 1.36, 0.96, 0.72, 1.08],
},
{
id: "all-right",
label: "全对组",
rewards: [1, 1, 1, 1, 1, 1, 1, 1],
lengths: [620, 880, 1340, 1760, 2110, 2640, 3180, 4020],
ratios: [1.02, 1.06, 0.96, 1.12, 0.91, 1.2, 0.84, 1.28],
},
{
id: "rare",
label: "1 对 / 7 错",
rewards: [0, 0, 0, 1, 0, 0, 0, 0],
lengths: [760, 1260, 2060, 3480, 4420, 2860, 5180, 1640],
ratios: [0.94, 1.08, 0.82, 1.14, 1.42, 0.7, 1.52, 0.88],
},
];
const mopdDomains = [
["general-low", "GENERAL", "LOW"],
["general-high", "GENERAL", "HIGH"],
["general-max", "GENERAL", "MAX"],
["agent-low", "AGENT", "LOW"],
["agent-high", "AGENT", "HIGH"],
["agent-max", "AGENT", "MAX"],
["coding-low", "CODING", "LOW"],
["coding-high", "CODING", "HIGH"],
["coding-max", "CODING", "MAX"],
];
const tokenLabels = ["先", "拆", "约束", "， ，
---
<section class="reasoning-lab" data-reasoning-lab>
<div class="lab-header">
<div>
<p>INTERACTIVE / REASONING COMPUTE LAB</p>
<h3>“多想一会儿”至少有三套完全不同的账</h3>
</div>
<p>
下面所有概率都是确定性教学模拟，不是任何真实模型跑分。它用同一界面拆开测试时预算、GRPO 梯度和 K3 MOPD，
让概念差异可以被操作，而不是只靠背术语。
</p>
</div>
<div class="mode-tabs" role="tablist" aria-label="选择推理实验">
<button type="button" role="tab" data-lab-tab="budget" aria-selected="true">
<span>01</span><b>预算怎样分</b><small>serial / parallel / search / tools</small>
</button>
<button type="button" role="tab" data-lab-tab="grpo" aria-selected="false">
<span>02</span><b>梯度怎样变</b><small>GRPO / DAPO / Dr.GRPO / K2.5</small>
</button>
<button type="button" role="tab" data-lab-tab="mopd" aria-selected="false">
<span>03</span><b>九教师怎样合</b><small>K3 multi-effort MOPD</small>
</button>
</div>
<div class="lab-view" data-lab-view="budget">
<div class="view-intro">
<div>
<p class="panel-kicker">TEST-TIME COMPUTE</p>
<h3>固定总 Token，不同策略买到的不是同一种计算</h3>
</div>
<p>
串行深度增加单条轨迹可做的工作；并行宽度增加覆盖；verifier 负责选择；工具改变模型能看到的信息。
把四者只写成 “thinking tokens” 会掩盖真正瓶颈。
</p>
</div>
<div class="budget-presets" role="group" aria-label="预算策略预设">
{budgetPresets.map((preset) => (
<button
type="button"
data-budget-preset={preset.id}
data-serial={preset.serial}
data-parallel={preset.parallel}
data-verifier={preset.verifier}
data-search={preset.search}
data-tool={preset.tool}
aria-pressed={preset.id === "sc" ? "true" : "false"}
>
{preset.label}
</button>
))}
</div>
<div class="budget-workbench">
<div class="budget-controls">
<label>
<span>总预算 <output data-budget-output>64K tokens</output></span>
<input data-budget type="range" min="16" max="256" value="64" step="16" />
<small>16K <i></i> 256K</small>
</label>
<label>
<span>基础单次正确率 <output data-base-output>34%</output></span>
<input data-base type="range" min="8" max="72" value="34" step="2" />
<small>弱基础模型 <i></i> 强基础模型</small>
</label>
<label>
<span>候选相关性 <output data-correlation-output>55%</output></span>
<input data-correlation type="range" min="0" max="95" value="55" step="5" />
<small>独立探索 <i></i> 重复同类错误</small>
</label>
<label>
<span>Verifier 可靠度 <output data-verifier-output>45%</output></span>
<input data-verifier type="range" min="0" max="98" value="45" step="2" />
<small>近似随机 <i></i> 接近 oracle</small>
</label>
</div>
<div class="allocation-panel">
<div class="panel-label"><span>BUDGET ALLOCATION</span><b data-budget-name>SELF-CONSISTENCY</b></div>
<div class="allocation-bar" aria-label="测试时计算预算分配">
<i data-alloc="serial"><span>串行</span></i>
<i data-alloc="parallel"><span>并行</span></i>
<i data-alloc="search"><span>搜索</span></i>
<i data-alloc="tool"><span>工具</span></i>
</div>
<div class="allocation-readout">
<div><span>单轨长度</span><b data-serial-tokens>7.0K</b></div>
<div><span>并行候选</span><b data-candidates>9</b></div>
<div><span>有效独立样本</span><b data-effective>4.6</b></div>
<div><span>关键路径</span><b data-latency>14.1s</b></div>
</div>
<div class="trajectory-strip" aria-label="并行推理轨迹示意">
{Array.from({ length: 16 }, (_, index) => (
<i data-trajectory={index}><span></span><b></b></i>
))}
</div>
</div>
</div>
<div class="metric-grid budget-metrics">
<article><span>SINGLE TRAJECTORY</span><b data-metric-single>47.2%</b><p>串行思考后的单条成功率</p></article>
<article><span>COVERAGE / PASS@K</span><b data-metric-coverage>91.3%</b><p>候选里至少出现一个正确解</p></article>
<article><span>MAJORITY@K</span><b data-metric-majority>42.8%</b><p>不训练选择器的答案投票</p></article>
<article><span>VERIFIER SELECTED</span><b data-metric-selected>69.5%</b><p>覆盖 ×
</div>
<div class="interpretation">
<div><span>现在主要买到</span><b data-budget-buys>覆盖，而不是更深的单条推理</b></div>
<p data-budget-note>
候选相关性会让 nominal N 高估真实探索宽度；继续加样本以前，先问它们是否只是重复同一种错误。
</p>
</div>
</div>
<div class="lab-view" data-lab-view="grpo" hidden>
<div class="view-intro">
<div>
<p class="panel-kicker">POLICY OPTIMIZATION</p>
<h3>同一组 rollout，四种聚合方法会把力用在不同地方</h3>
</div>
<p>
每行是一条同题回答。条形图不是完整训练梯度，而是把 reward、长度归一化和 ratio mask
压缩成可比较的教学权重，专门暴露“为什么实现细节会改变训练行为”。
</p>
</div>
<div class="grpo-toolbar">
<div role="group" aria-label="选择 rollout 奖励分布">
{rolloutProfiles.map((profile) => (
<button
type="button"
data-rollout-profile={profile.id}
data-rewards={profile.rewards.join(",")}
data-lengths={profile.lengths.join(",")}
data-ratios={profile.ratios.join(",")}
aria-pressed={profile.id === "mixed" ? "true" : "false"}
>
{profile.label}
</button>
))}
</div>
<label>
<span>K2.5 ratio 区间 <output data-ratio-output>0.80–
<input data-ratio-window type="range" min="10" max="45" value="25" step="5" />
</label>
</div>
<div class="gradient-table">
<div class="gradient-head">
<span>ROLLOUT</span><span>REWARD</span><span>LENGTH</span><span>GRPO</span><span>DAPO</span><span>Dr.GRPO</span><span>K2.5 MASK</span>
</div>
{Array.from({ length: 8 }, (_, index) => (
<div class="gradient-row" data-gradient-row={index}>
<span><b>y{index + 1}</b><small data-ratio-label>ratio 1.00</small></span>
<span data-reward>1</span>
<span data-length>640</span>
<span><i data-gradient="grpo"><b></b></i><em data-gradient-label="grpo">+0.00</em></span>
<span><i data-gradient="dapo"><b></b></i><em data-gradient-label="dapo">+0.00</em></span>
<span><i data-gradient="dr"><b></b></i><em data-gradient-label="dr">+0.00</em></span>
<span data-mask><i></i><b>KEEP</b></span>
</div>
))}
</div>
<div class="grpo-summary">
<article>
<span>GROUP SIGNAL</span>
<b data-group-signal>有相对奖励</b>
<p data-group-note>同题组里既有对也有错，组均值 baseline 能产生正负 advantage。</p>
</article>
<article>
<span>LENGTH EFFECT</span>
<b data-length-effect>GRPO 偏向短正确</b>
<p>回答内 token 平均会改变长短样本的总贡献；DAPO 与 Dr.GRPO 选择不同的聚合口径。</p>
</article>
<article>
<span>OFF-POLICY TOKENS</span>
<b data-mask-count>2 / 8 被屏蔽</b>
<p>K2.5 只看 token ratio 是否越界；这里不模拟标准 PPO 的 advantage-aware clipping。</p>
</article>
</div>
<div class="formula-comparison">
<article><span>GRPO</span><b>(r −
<article><span>DAPO</span><b>全 batch token-level 聚合</b><p>配合 dynamic sampling、Clip-Higher 和 overlong shaping。</p></article>
<article><span>Dr.GRPO</span><b>r −
<article><span>K2.5</span><b>ratio ∉ [α
</div>
</div>
<div class="lab-view" data-lab-view="mopd" hidden>
<div class="view-intro">
<div>
<p class="panel-kicker">K3 / MULTI-TEACHER ON-POLICY DISTILLATION</p>
<h3>不是把九个模型参数平均，而是让学生在自己的路上逐 Token 问老师</h3>
</div>
<p>
先选 prompt 的领域和 reasoning effort；
这与跨迭代 partial rollout 的 off-policy RL 是两套不同机制。
</p>
</div>
<div class="mopd-grid">
<div class="teacher-matrix">
<div class="matrix-head"><span>DOMAIN ↓ / EFFORT →</span><b>LOW</b><b>HIGH</b><b>MAX</b></div>
<span class="row-name">GENERAL</span>
<span class="row-name">AGENT</span>
<span class="row-name">CODING</span>
{mopdDomains.map(([id, domain, effort]) => (
<button
type="button"
data-teacher={id}
data-domain={domain}
data-effort={effort}
aria-pressed={id === "agent-high" ? "true" : "false"}
>
<i></i><b>{effort}</b><small>{domain}</small>
</button>
))}
</div>
<div class="mopd-controls">
<div>
<span>ROUTED TEACHER</span>
<b data-teacher-name>AGENT · HIGH</b>
<p data-teacher-story>长程助手、deep research 与段落写作教师；在 high effort 下兼顾探索与预算。</p>
</div>
<label>
<span>Teacher–
<input data-distance type="range" min="5" max="90" value="28" step="1" />
<small>同源且接近 <i></i> 更强但远分布</small>
</label>
<label>
<span>Advantage clip ± <output data-clip-output>2.5</output></span>
<input data-clip type="range" min="10" max="50" value="25" step="5" />
<small>更强裁剪 <i></i> 更少裁剪</small>
</label>
</div>
</div>
<div class="token-prefill">
<div class="panel-label"><span>STUDENT ROLLOUT → TEACHER PREFILL</span><b>DENSE TOKEN SIGNAL</b></div>
<div class="token-flow">
{tokenLabels.map((token, index) => (
<div data-mopd-token={index}>
<b>{token}</b>
<span><i data-student-prob></i><small data-student-label>S .42</small></span>
<span><i data-teacher-prob></i><small data-teacher-label>T .61</small></span>
<em data-token-advantage>+0.37</em>
</div>
))}
</div>
<div class="prob-legend"><span><i class="student"></i>student probability</span><span><i class="teacher"></i>teacher probability</span><span>Â = clip(log T −
</div>
<div class="metric-grid mopd-metrics">
<article><span>MEAN REVERSE-KL PROXY</span><b data-mopd-kl>0.081</b><p>越远不代表越好，分布错配会增加训练压力</p></article>
<article><span>CLIPPED TOKENS</span><b data-mopd-clipped>0 / 12</b><p>超出 ±Amax 的 token 不再继续放大 advantage</p></article>
<article><span>ENTROPY PROXY</span><b data-mopd-entropy>0.79</b><p>远分布教师可能让 student 向少数模式收缩</p></article>
<article><span>SIGNAL DENSITY</span><b>12 / 12</b><p>不同于只在轨迹结束时给一个 outcome reward</p></article>
</div>
<div class="mopd-pipeline">
<article><span>01</span><b>Student samples</b><p>当前学生在自己的推理分布上生成。</p></article>
<i>→</i>
<article><span>02</span><b>Prompt routes</b><p>按领域与 effort 选择 9 个教师之一。</p></article>
<i>→</i>
<article><span>03</span><b>Teacher prefills</b><p>教师读取学生前缀，返回逐 token 概率。</p></article>
<i>→</i>
<article><span>04</span><b>Student updates</b><p>clipped log-prob 差进入 policy-gradient。</p></article>
</div>
<div class="interpretation">
<div><span>稳定性提示</span><b data-mopd-warning>同源教师分布接近，信号强且仍可控</b></div>
<p>
独立 MOPD 论文发现，绝对能力更强但分布更远的外部教师不一定更好；这里用距离滑杆显示这种风险，不把它当作真实训练预测器。
</p>
</div>
</div>
<div class="lab-footnote">
<b>如何读这套实验</b>
<p>
预算页只讲概率结构；梯度页只讲聚合方向；MOPD 页只讲 teacher signal。三页故意不合并成一个“总分”，
因为真实 reasoning system 的能力、选择、训练稳定性与运行成本没有可诚实相加的单一单位。
</p>
</div>
</section>
<script is:inline>
(() => {
const root = document.querySelector("[data-reasoning-lab]");
if (!root) return;
const clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value));
const percent = (value) => `${(100 * clamp(value)).toFixed(1)}%`;
const setText = (selector, value) => {
const node = root.querySelector(selector);
if (node) node.textContent = value;
};
const tabs = [...root.querySelectorAll("[data-lab-tab]")];
const views = [...root.querySelectorAll("[data-lab-view]")];
tabs.forEach((tab) => tab.addEventListener("click", () => {
const id = tab.dataset.labTab;
tabs.forEach((item) => item.setAttribute("aria-selected", String(item === tab)));
views.forEach((view) => { view.hidden = view.dataset.labView !== id; });
}));
const budgetInput = root.querySelector("[data-budget]");
const baseInput = root.querySelector("[data-base]");
const correlationInput = root.querySelector("[data-correlation]");
const verifierInput = root.querySelector("[data-verifier]");
const budgetButtons = [...root.querySelectorAll("[data-budget-preset]")];
let budgetPreset = budgetButtons.find((button) => button.getAttribute("aria-pressed") === "true");
const chooseBudgetPreset = (button) => {
budgetPreset = button;
budgetButtons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
if (verifierInput) verifierInput.value = String(Math.round(Number(button.dataset.verifier) * 100));
updateBudget();
};
const combination = (n, k) => {
if (k < 0 || k > n) return 0;
let result = 1;
for (let i = 1; i <= Math.min(k, n - k); i += 1) result = result * (n - i + 1) / i;
return result;
};
const majorityProbability = (n, p) => {
const size = Math.max(1, Math.min(31, Math.round(n)));
const threshold = Math.floor(size / 2) + 1;
let total = 0;
for (let k = threshold; k <= size; k += 1) {
total += combination(size, k) * (p ** k) * ((1 - p) ** (size - k));
}
return clamp(total);
};
function updateBudget() {
if (!budgetPreset || !budgetInput || !baseInput || !correlationInput || !verifierInput) return;
const budget = Number(budgetInput.value) * 1024;
const base = Number(baseInput.value) / 100;
const correlation = Number(correlationInput.value) / 100;
const verifier = Number(verifierInput.value) / 100;
const serialShare = Number(budgetPreset.dataset.serial);
const requestedParallel = Number(budgetPreset.dataset.parallel);
const search = Number(budgetPreset.dataset.search);
const tool = Number(budgetPreset.dataset.tool);
const overheadShare = clamp(search * 0.24 + tool * 0.2, 0, 0.42);
const available = budget * (1 - overheadShare);
const candidates = Math.max(1, Math.min(32, Math.round(requestedParallel * (budget / 65536) ** 0.48)));
const serialTokens = Math.max(768, available * serialShare / Math.max(1, candidates * 0.32 + 0.68));
const serialGain = 0.25 * (1 - Math.exp(-serialTokens / 11500));
const searchGain = search * verifier * 0.12;
const toolGain = tool * (1 - base) * 0.2;
const single = clamp(base + (1 - base) * serialGain + searchGain + toolGain, 0.01, 0.96);
const effective = 1 + (candidates - 1) * ((1 - correlation) ** 0.78);
const coverage = clamp(1 - ((1 - single) ** effective));
const majority = majorityProbability(effective, single);
const selectorLift = verifier * (0.42 + 0.45 * search) + tool * 0.08;
const selected = clamp(single + (coverage - single) * selectorLift);
const waves = Math.ceil(candidates / Math.max(1, 8 - Math.round(tool * 3)));
const latency = serialTokens / 720 + waves * (0.32 + tool * 1.8) + search * 2.4;
setText("[data-budget-output]", `${Math.round(budget / 1024)}K tokens`);
setText("[data-base-output]", `${Math.round(base * 100)}%`);
setText("[data-correlation-output]", `${Math.round(correlation * 100)}%`);
setText("[data-verifier-output]", `${Math.round(verifier * 100)}%`);
setText("[data-budget-name]", budgetPreset.textContent.trim().toUpperCase());
setText("[data-serial-tokens]", `${(serialTokens / 1024).toFixed(1)}K`);
setText("[data-candidates]", String(candidates));
setText("[data-effective]", effective.toFixed(1));
setText("[data-latency]", `${latency.toFixed(1)}s`);
setText("[data-metric-single]", percent(single));
setText("[data-metric-coverage]", percent(coverage));
setText("[data-metric-majority]", percent(majority));
setText("[data-metric-selected]", percent(selected));
const allocations = {
serial: serialShare,
parallel: clamp(1 - serialShare - overheadShare, 0.05, 0.8),
search: search * 0.24,
tool: tool * 0.2,
};
const allocationTotal = Object.values(allocations).reduce((sum, value) => sum + value, 0);
Object.entries(allocations).forEach(([key, value]) => {
const node = root.querySelector(`[data-alloc="${key}"]`);
if (node) node.style.width = `${100 * value / allocationTotal}%`;
});
[...root.querySelectorAll("[data-trajectory]")].forEach((node, index) => {
const active = index < candidates;
node.hidden = !active;
if (!active) return;
const deterministic = ((index * 37 + Math.round(single * 100)) % 100) / 100;
const correct = deterministic < single;
node.dataset.correct = String(correct);
node.style.setProperty("--length", `${44 + ((index * 29 + Math.round(serialTokens / 200)) % 54)}%`);
});
let buys = "单条轨迹深度";
let note = "预算主要沿一条串行轨迹展开；如果前提错误，继续写更久也可能只是把错误推得更深。";
if (tool > 0.45) {
buys = "新观察与环境反馈";
note = "工具调用改变信息集，但环境延迟、失败恢复和结果验证不会被模型 Token 账自动覆盖。";
} else if (search > 0.45) {
buys = "由 verifier 引导的分支探索";
note = "搜索会重复使用 verifier；系统性评分偏差可能随分支扩展被放大。";
} else if (candidates >= 5) {
buys = "候选覆盖，而不是更深的单条推理";
note = "候选相关性会让 nominal N 高估真实探索宽度；继续加样本以前，先问它们是否只是重复同一种错误。";
}
setText("[data-budget-buys]", buys);
setText("[data-budget-note]", note);
}
budgetButtons.forEach((button) => button.addEventListener("click", () => chooseBudgetPreset(button)));
[budgetInput, baseInput, correlationInput, verifierInput].forEach((input) => input?.addEventListener("input", updateBudget));
const profileButtons = [...root.querySelectorAll("[data-rollout-profile]")];
const ratioInput = root.querySelector("[data-ratio-window]");
let profileButton = profileButtons.find((button) => button.getAttribute("aria-pressed") === "true");
const signed = (value) => `${value >= 0 ? "+" : ""}${value.toFixed(2)}`;
function updateGradients() {
if (!profileButton || !ratioInput) return;
const rewards = profileButton.dataset.rewards.split(",").map(Number);
const lengths = profileButton.dataset.lengths.split(",").map(Number);
const ratios = profileButton.dataset.ratios.split(",").map(Number);
const mean = rewards.reduce((sum, value) => sum + value, 0) / rewards.length;
const variance = rewards.reduce((sum, value) => sum + ((value - mean) ** 2), 0) / rewards.length;
const std = Math.sqrt(variance);
const meanLength = lengths.reduce((sum, value) => sum + value, 0) / lengths.length;
const width = Number(ratioInput.value) / 100;
const low = 1 - width;
const high = 1 + width;
let masked = 0;
rewards.forEach((reward, index) => {
const row = root.querySelector(`[data-gradient-row="${index}"]`);
if (!row) return;
const centered = reward - mean;
const normalized = std > 1e-8 ? centered / std : 0;
const grpo = normalized * meanLength / lengths[index];
const dapo = normalized * lengths[index] / meanLength;
const dr = centered;
const values = { grpo, dapo, dr };
row.querySelector("[data-reward]").textContent = reward ? "✓ 1" : "×
row.querySelector("[data-reward]").dataset.correct = String(Boolean(reward));
row.querySelector("[data-length]").textContent = `${(lengths[index] / 1000).toFixed(2)}K`;
row.querySelector("[data-ratio-label]").textContent = `ratio ${ratios[index].toFixed(2)}`;
Object.entries(values).forEach(([key, value]) => {
const bar = row.querySelector(`[data-gradient="${key}"]`);
const label = row.querySelector(`[data-gradient-label="${key}"]`);
bar.dataset.sign = value >= 0 ? "positive" : "negative";
bar.querySelector("b").style.width = `${Math.min(100, Math.abs(value) * 52)}%`;
label.textContent = signed(value);
});
const keep = ratios[index] >= low && ratios[index] <= high;
const mask = row.querySelector("[data-mask]");
mask.dataset.keep = String(keep);
mask.querySelector("b").textContent = keep ? "KEEP" : "MASK";
if (!keep) masked += 1;
});
const hasSignal = std > 1e-8;
setText("[data-ratio-output]", `${low.toFixed(2)}–
setText("[data-group-signal]", hasSignal ? "有相对奖励" : "零相对优势");
setText(
"[data-group-note]",
hasSignal
? "同题组里既有对也有错，组均值 baseline 能产生正负 advantage。"
: "组内 reward 完全相同，减去组均值后全部为零；DAPO 的 Dynamic Sampling 会过滤这类 prompt。",
);
setText("[data-length-effect]", hasSignal ? "三种聚合给长短回答不同权重" : "没有 reward 差异，长度也救不回信号");
setText("[data-mask-count]", `${masked} / 8 被屏蔽`);
}
profileButtons.forEach((button) => button.addEventListener("click", () => {
profileButton = button;
profileButtons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
updateGradients();
}));
ratioInput?.addEventListener("input", updateGradients);
const teacherButtons = [...root.querySelectorAll("[data-teacher]")];
const distanceInput = root.querySelector("[data-distance]");
const clipInput = root.querySelector("[data-clip]");
let teacherButton = teacherButtons.find((button) => button.getAttribute("aria-pressed") === "true");
const teacherStories = {
GENERAL: "经验、视觉、推理、faithfulness、search 与 knowledge work 教师。",
AGENT: "长程助手、deep research 与段落写作教师。",
CODING: "SWE、coding experience、kernel 与 web development 教师。",
};
function updateMopd() {
if (!teacherButton || !distanceInput || !clipInput) return;
const domain = teacherButton.dataset.domain;
const effort = teacherButton.dataset.effort;
const distance = Number(distanceInput.value) / 100;
const clip = Number(clipInput.value) / 10;
const effortFactor = { LOW: 0.82, HIGH: 1, MAX: 1.18 }[effort];
const domainOffset = { GENERAL: 0.03, AGENT: 0.08, CODING: -0.02 }[domain];
let clipped = 0;
let kl = 0;
let entropy = 0;
setText("[data-teacher-name]", `${domain} · ${effort}`);
setText("[data-teacher-story]", `${teacherStories[domain]}${effort === "LOW" ? "低 effort 强调预算效率。" : effort === "MAX" ? "最大 effort 允许最长的探索预算。" : "high effort 在探索与预算之间折中。"}`);
setText("[data-distance-output]", `${Math.round(distance * 100)}%`);
setText("[data-clip-output]", clip.toFixed(1));
[...root.querySelectorAll("[data-mopd-token]")].forEach((node, index) => {
const wave = Math.sin(index * 1.71 + domainOffset * 11) * 0.11;
const student = clamp(0.28 + ((index * 17 + effort.length * 9) % 29) / 100 + wave, 0.08, 0.78);
const direction = Math.sin(index * 0.93 + domainOffset * 7) > -0.15 ? 1 : -1;
const teacher = clamp(student * Math.exp(direction * distance * effortFactor * (0.9 + (index % 4) * 0.24)), 0.02, 0.94);
const rawAdvantage = Math.log(teacher) - Math.log(student);
const advantage = clamp(rawAdvantage, -clip, clip);
if (Math.abs(rawAdvantage) > clip) clipped += 1;
kl += Math.abs(rawAdvantage) * student;
entropy += -(student * Math.log(student) + (1 - student) * Math.log(1 - student));
node.querySelector("[data-student-prob]").style.width = `${student * 100}%`;
node.querySelector("[data-teacher-prob]").style.width = `${teacher * 100}%`;
node.querySelector("[data-student-label]").textContent = `S ${student.toFixed(2)}`;
node.querySelector("[data-teacher-label]").textContent = `T ${teacher.toFixed(2)}`;
const advantageNode = node.querySelector("[data-token-advantage]");
advantageNode.textContent = signed(advantage);
advantageNode.dataset.sign = advantage >= 0 ? "positive" : "negative";
});
kl /= 12;
entropy = entropy / 12 * (1 - Math.max(0, distance - 0.45) * 0.62);
setText("[data-mopd-kl]", kl.toFixed(3));
setText("[data-mopd-clipped]", `${clipped} / 12`);
setText("[data-mopd-entropy]", entropy.toFixed(2));
let warning = "同源教师分布接近，信号强且仍可控";
if (distance > 0.68) warning = "教师虽可能更强，但分布距离已进入高风险区";
else if (distance > 0.42) warning = "分布差异开始放大 punitive gradient 与熵收缩风险";
setText("[data-mopd-warning]", warning);
}
teacherButtons.forEach((button) => button.addEventListener("click", () => {
teacherButton = button;
teacherButtons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
updateMopd();
}));
[distanceInput, clipInput].forEach((input) => input?.addEventListener("input", updateMopd));
updateBudget();
updateGradients();
updateMopd();
})();
</script>
<style>
.reasoning-lab {
color: var(--ink);
background:
linear-gradient(135deg, color-mix(in srgb, var(--paper) 92%, var(--blue-pale)), var(--paper) 48%),
var(--paper);
border: 1px solid var(--line-strong);
box-shadow: 0 28px 80px rgb(35 45 60 / 10%);
}
.lab-header,
.view-intro {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: 48px;
align-items: end;
padding: 34px 38px;
border-bottom: 1px solid var(--line);
}
.lab-header > div > p,
.panel-kicker,
.panel-label span,
.teacher-matrix span,
.mopd-controls > div > span {
color: var(--copper);
font: 0.64rem/1.3 var(--mono);
letter-spacing: 0.11em;
}
.lab-header h3,
.view-intro h3 {
margin-top: 11px;
max-width: 760px;
font-size: clamp(1.35rem, 2.5vw, 2.25rem);
line-height: 1.12;
}
.lab-header > p,
.view-intro > p {
color: var(--muted);
font-size: 0.78rem;
line-height: 1.85;
}
.mode-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid var(--line-strong);
}
.mode-tabs button {
display: grid;
grid-template-columns: 36px 1fr;
gap: 5px 12px;
padding: 20px 24px;
color: var(--muted);
text-align: left;
background: transparent;
border: 0;
border-right: 1px solid var(--line);
cursor: pointer;
}
.mode-tabs button:last-child { border-right: 0; }
.mode-tabs button[aria-selected="true"] {
color: var(--ink);
background: var(--blue-pale);
box-shadow: inset 0 -3px 0 var(--blue);
}
.mode-tabs span { grid-row: 1 / 3; color: var(--copper); font: 0.68rem/1 var(--mono); }
.mode-tabs b { font-size: 0.88rem; }
.mode-tabs small { font: 0.58rem/1.4 var(--mono); }
.lab-view[hidden] { display: none; }
.view-intro { padding-block: 30px; }
.view-intro h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.budget-presets,
.grpo-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 22px 38px;
border-bottom: 1px solid var(--line);
}
.budget-presets button,
.grpo-toolbar button {
padding: 10px 13px;
color: var(--muted);
font: 0.64rem/1 var(--mono);
background: var(--paper);
border: 1px solid var(--line-strong);
cursor: pointer;
}
.budget-presets button[aria-pressed="true"],
.grpo-toolbar button[aria-pressed="true"] {
color: white;
background: var(--blue);
border-color: var(--blue);
}
.budget-workbench {
display: grid;
grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
border-bottom: 1px solid var(--line);
}
.budget-controls {
display: grid;
gap: 24px;
padding: 28px 38px;
border-right: 1px solid var(--line);
}
label > span {
display: flex;
justify-content: space-between;
gap: 18px;
margin-bottom: 12px;
font-size: 0.72rem;
}
label output { color: var(--copper); font: 0.65rem/1 var(--mono); }
input[type="range"] { width: 100%; accent-color: var(--blue); }
label > small {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
color: var(--muted);
font: 0.55rem/1 var(--mono);
}
label > small i { flex: 1; height: 1px; background: var(--line-strong); }
.allocation-panel { padding: 28px 38px; }
.panel-label { display: flex; justify-content: space-between; gap: 24px; }
.panel-label b { font: 0.68rem/1 var(--mono); }
.allocation-bar { display: flex; height: 76px; margin-top: 23px; overflow: hidden; background: var(--warm-gray); }
.allocation-bar i {
display: flex;
align-items: flex-end;
min-width: 3px;
padding: 10px;
color: white;
font-style: normal;
transition: width 240ms ease;
}
.allocation-bar i:nth-child(1) { background: var(--navy); }
.allocation-bar i:nth-child(2) { background: var(--blue); }
.allocation-bar i:nth-child(3) { background: var(--copper); }
.allocation-bar i:nth-child(4) { background: var(--sage); }
.allocation-bar span { font: 0.56rem/1 var(--mono); }
.allocation-readout {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 20px;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.allocation-readout div { padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.allocation-readout span { display: block; color: var(--muted); font-size: 0.6rem; }
.allocation-readout b { display: block; margin-top: 8px; font: 0.78rem/1 var(--mono); }
.trajectory-strip { display: flex; align-items: end; gap: 5px; height: 82px; margin-top: 22px; }
.trajectory-strip i { position: relative; flex: 1; height: var(--length); min-width: 3px; background: color-mix(in srgb, var(--blue) 18%, var(--paper)); }
.trajectory-strip i::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--blue); }
.trajectory-strip i[data-correct="true"]::after { background: var(--sage); }
.metric-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--line);
}
.metric-grid article { min-height: 150px; padding: 24px; border-right: 1px solid var(--line); }
.metric-grid article:last-child { border-right: 0; }
.metric-grid span { color: var(--copper); font: 0.56rem/1.3 var(--mono); }
.metric-grid b { display: block; margin: 15px 0 10px; font: 1.28rem/1 var(--mono); }
.metric-grid p { color: var(--muted); font-size: 0.64rem; line-height: 1.6; }
.interpretation {
display: grid;
grid-template-columns: 0.75fr 1.25fr;
gap: 36px;
padding: 24px 38px;
background: color-mix(in srgb, var(--blue-pale) 62%, var(--paper));
border-bottom: 1px solid var(--line);
}
.interpretation span { display: block; color: var(--copper); font: 0.58rem/1 var(--mono); }
.interpretation b { display: block; margin-top: 9px; font-size: 0.86rem; }
.interpretation p { color: var(--muted); font-size: 0.72rem; line-height: 1.75; }
.grpo-toolbar { justify-content: space-between; align-items: center; }
.grpo-toolbar > div { display: flex; gap: 8px; }
.grpo-toolbar label { width: min(330px, 100%); }
.gradient-table { padding: 24px 38px 32px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.gradient-head,
.gradient-row {
display: grid;
grid-template-columns: 98px 72px 74px repeat(3, minmax(105px, 1fr)) 92px;
min-width: 880px;
}
.gradient-head { color: var(--muted); font: 0.55rem/1 var(--mono); border-bottom: 1px solid var(--line-strong); }
.gradient-head span { padding: 10px 8px; }
.gradient-row { align-items: center; min-height: 62px; border-bottom: 1px solid var(--line); }
.gradient-row > span { padding: 8px; font-size: 0.65rem; }
.gradient-row > span:first-child b { font: 0.74rem/1 var(--mono); }
.gradient-row > span:first-child small { display: block; margin-top: 5px; color: var(--muted); font: 0.5rem/1 var(--mono); }
[data-reward][data-correct="true"] { color: var(--sage); }
[data-reward][data-correct="false"] { color: var(--red); }
[data-gradient] { display: block; width: 70%; height: 6px; background: var(--warm-gray); }
[data-gradient] b { display: block; height: 100%; background: var(--sage); transition: width 180ms ease; }
[data-gradient][data-sign="negative"] b { background: var(--red); }
[data-gradient-label] { margin-left: 7px; color: var(--muted); font: 0.5rem/1 var(--mono); }
[data-mask] { display: flex; align-items: center; gap: 7px; font: 0.54rem/1 var(--mono); }
[data-mask] i { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
[data-mask][data-keep="false"] { color: var(--red); }
[data-mask][data-keep="false"] i { background: var(--red); }
.grpo-summary,
.formula-comparison {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid var(--line);
}
.grpo-summary article,
.formula-comparison article { padding: 25px 30px; border-right: 1px solid var(--line); }
.grpo-summary article:last-child,
.formula-comparison article:last-child { border-right: 0; }
.grpo-summary span,
.formula-comparison span { color: var(--copper); font: 0.56rem/1 var(--mono); }
.grpo-summary b,
.formula-comparison b { display: block; margin: 12px 0; font-size: 0.82rem; }
.grpo-summary p,
.formula-comparison p { color: var(--muted); font-size: 0.66rem; line-height: 1.7; }
.formula-comparison { grid-template-columns: repeat(4, 1fr); background: var(--warm-gray); }
.mopd-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; border-bottom: 1px solid var(--line); }
.teacher-matrix {
position: relative;
display: grid;
grid-template-columns: 90px repeat(3, 1fr);
grid-template-rows: 42px repeat(3, 100px);
gap: 1px;
padding: 28px 38px;
background: var(--line);
border-right: 1px solid var(--line);
}
.matrix-head { display: contents; }
.matrix-head span,
.matrix-head b,
.row-name { display: grid; place-items: center; background: var(--paper); }
.matrix-head b { font: 0.58rem/1 var(--mono); }
.row-name { color: var(--muted) !important; writing-mode: vertical-rl; font-size: 0.54rem !important; }
.row-name:nth-of-type(1) { grid-column: 1; grid-row: 2; }
.row-name:nth-of-type(2) { grid-column: 1; grid-row: 3; }
.row-name:nth-of-type(3) { grid-column: 1; grid-row: 4; }
.teacher-matrix button {
position: relative;
display: grid;
place-items: center;
gap: 5px;
color: var(--muted);
background: var(--paper);
border: 0;
cursor: pointer;
}
.teacher-matrix button i { width: 13px; height: 13px; border: 1px solid var(--blue); border-radius: 50%; }
.teacher-matrix button b { font: 0.66rem/1 var(--mono); }
.teacher-matrix button small { font: 0.48rem/1 var(--mono); }
.teacher-matrix button[aria-pressed="true"] { color: white; background: var(--blue); }
.teacher-matrix button[aria-pressed="true"] i { background: white; border-color: white; }
.teacher-matrix button:nth-of-type(1) { grid-column: 2; grid-row: 2; }
.teacher-matrix button:nth-of-type(2) { grid-column: 3; grid-row: 2; }
.teacher-matrix button:nth-of-type(3) { grid-column: 4; grid-row: 2; }
.teacher-matrix button:nth-of-type(4) { grid-column: 2; grid-row: 3; }
.teacher-matrix button:nth-of-type(5) { grid-column: 3; grid-row: 3; }
.teacher-matrix button:nth-of-type(6) { grid-column: 4; grid-row: 3; }
.teacher-matrix button:nth-of-type(7) { grid-column: 2; grid-row: 4; }
.teacher-matrix button:nth-of-type(8) { grid-column: 3; grid-row: 4; }
.teacher-matrix button:nth-of-type(9) { grid-column: 4; grid-row: 4; }
.mopd-controls { display: grid; align-content: center; gap: 30px; padding: 34px 38px; }
.mopd-controls > div > b { display: block; margin: 11px 0; font-size: 1.15rem; }
.mopd-controls > div > p { color: var(--muted); font-size: 0.7rem; line-height: 1.7; }
.token-prefill { padding: 28px 38px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.token-flow { display: grid; grid-template-columns: repeat(12, minmax(68px, 1fr)); gap: 8px; min-width: 900px; margin-top: 25px; }
.token-flow > div { padding: 12px 9px; background: var(--warm-gray); }
.token-flow > div > b { display: block; min-height: 30px; font-size: 0.7rem; text-align: center; }
.token-flow > div > span { position: relative; display: block; height: 7px; margin-top: 8px; background: var(--paper); }
.token-flow > div > span i { display: block; height: 100%; background: var(--blue); }
.token-flow > div > span:nth-of-type(2) i { background: var(--copper); }
.token-flow small { position: absolute; top: 10px; left: 0; color: var(--muted); font: 0.45rem/1 var(--mono); }
.token-flow em { display: block; margin-top: 22px; color: var(--sage); font: 0.55rem/1 var(--mono); font-style: normal; text-align: center; }
.token-flow em[data-sign="negative"] { color: var(--red); }
.prob-legend { display: flex; gap: 20px; margin-top: 24px; color: var(--muted); font: 0.54rem/1 var(--mono); }
.prob-legend span { display: flex; align-items: center; gap: 7px; }
.prob-legend i { width: 14px; height: 5px; background: var(--blue); }
.prob-legend i.teacher { background: var(--copper); }
.mopd-pipeline { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; align-items: stretch; border-bottom: 1px solid var(--line); }
.mopd-pipeline article { padding: 24px; }
.mopd-pipeline > i { display: grid; place-items: center; color: var(--copper); font-style: normal; }
.mopd-pipeline span { color: var(--copper); font: 0.56rem/1 var(--mono); }
.mopd-pipeline b { display: block; margin: 10px 0; font-size: 0.78rem; }
.mopd-pipeline p { color: var(--muted); font-size: 0.64rem; line-height: 1.55; }
.lab-footnote { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 24px 38px; background: var(--navy); color: white; }
.lab-footnote b { font-size: 0.8rem; }
.lab-footnote p { color: rgb(255 255 255 / 70%); font-size: 0.7rem; line-height: 1.7; }
@media (max-width: 900px) {
.lab-header,
.view-intro,
.budget-workbench,
.mopd-grid,
.interpretation { grid-template-columns: 1fr; }
.mode-tabs { grid-template-columns: 1fr; }
.mode-tabs button { border-right: 0; border-bottom: 1px solid var(--line); }
.budget-controls,
.teacher-matrix { border-right: 0; border-bottom: 1px solid var(--line); }
.metric-grid,
.grpo-summary,
.formula-comparison { grid-template-columns: repeat(2, 1fr); }
.metric-grid article:nth-child(2),
.grpo-summary article:nth-child(2),
.formula-comparison article:nth-child(2) { border-right: 0; }
.mopd-pipeline { grid-template-columns: 1fr; }
.mopd-pipeline > i { transform: rotate(90deg); min-height: 26px; }
}
@media (max-width: 620px) {
.lab-header,
.view-intro,
.budget-controls,
.allocation-panel,
.gradient-table,
.mopd-controls,
.token-prefill { padding-inline: 20px; }
.budget-presets,
.grpo-toolbar { padding-inline: 20px; }
.allocation-readout,
.metric-grid,
.grpo-summary,
.formula-comparison { grid-template-columns: 1fr 1fr; }
.allocation-readout div:nth-child(2),
.metric-grid article:nth-child(2n),
.grpo-summary article:nth-child(2),
.formula-comparison article:nth-child(2n) { border-right: 0; }
.teacher-matrix { grid-template-columns: 60px repeat(3, 1fr); padding-inline: 20px; }
.teacher-matrix button small { display: none; }
.mopd-pipeline article { padding: 20px; }
.lab-footnote { grid-template-columns: 1fr; padding-inline: 20px; }
.prob-legend { flex-wrap: wrap; }
}
</style>
wuyang