cot.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CoT Demo · Minecraft Agent</title>
<style>
  :root {
    --bg: #0d1117; --card: #161b22; --border: #30363d;
    --text: #e6edf3; --muted: #8b949e; --gold: #d9a441; --green: #4e9f3d; --blue: #58a6ff;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: var(--bg); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.6; }
  .container { max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }
  header { text-align: center; padding: 56px 0 32px; }
  header .back { display: inline-block; margin-bottom: 16px; font-size: 13px; color: var(--blue); text-decoration: none; }
  header .back:hover { text-decoration: underline; }
  header h1 { font-size: 32px; margin-bottom: 8px; }
  header p { color: var(--muted); font-size: 16px; max-width: 720px; margin: 0 auto; }
  .badges { margin-top: 16px; }
  .badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; margin: 3px; border: 1px solid var(--border); color: var(--muted); }
  .badge.green { color: var(--green); border-color: var(--green); }
  .badge.gold { color: var(--gold); border-color: var(--gold); }
  h2 { font-size: 22px; margin: 48px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  h2 .num { color: var(--blue); margin-right: 10px; font-family: ui-monospace, monospace; }
  .meta { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; margin: 16px 0; }
  .meta .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
  .meta .instr { font-size: 16px; margin-top: 6px; color: var(--green); font-weight: 600; }
  .timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin: 20px 0; }
  .step { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .step img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
  .step .meta { padding: 14px 18px; margin: 0; border: none; border-radius: 0; background: transparent; }
  .step .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
  .step .thought { font-size: 13.5px; color: var(--gold); margin-top: 6px; line-height: 1.5; }
  .step .action { font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; color: var(--green); margin-top: 8px; word-break: break-all; padding: 6px 10px; background: rgba(78,159,61,0.08); border-radius: 6px; }
  pre { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; overflow-x: auto; font-size: 13px; line-height: 1.7; }
  code { font-family: ui-monospace, "SF Mono", monospace; }
  .note { background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.3); border-radius: 10px; padding: 14px 18px; margin: 16px 0; font-size: 14.5px; }
  .download { display: inline-block; padding: 10px 22px; background: var(--green); color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; margin: 12px 8px 12px 0; }
  .download:hover { background: #3e8937; }
  .download.outline { background: transparent; color: var(--green); border: 1px solid var(--green); }
  footer { margin-top: 48px; text-align: center; color: var(--muted); font-size: 13px; }
</style>
</head>
<body>
<div class="container">

<header>
  <a href="index.html" class="back">← 返回主页面</a>
  <h1>CoT 标注 Demo 数据集</h1>
  <p>531 条 Minecraft 智能体决策点思维链标注。Gemini-3.8-flash 作为标注器，每条样本包含任务指令、关键帧、决策点 <code>Thought</code> 与对应 <code>Action</code>。</p>
  <div class="badges">
    <span class="badge green">531 轨迹</span>
    <span class="badge">1,917 thought</span>
    <span class="badge gold">三段式 Thought 格式（感知 | 状态 | 决策）</span>
  </div>
</header>

<h2><span class="num">01</span>Demo 样本</h2>
<p style="color:var(--muted)">下面两条轨迹是质量分析中得分最高的样本。点击图片看原图分辨率；<code>Thought</code> 为 VLM 在该决策点生成的推理。</p>

<!-- 轨迹 1 -->
<div class="meta">
  <div class="label">样本 A · 任务指令</div>
  <div class="instr" id="demo-a-instr">加载中…</div>
</div>
<div class="timeline" id="demo-a"></div>

<!-- 轨迹 2 -->
<div class="meta">
  <div class="label">样本 B · 任务指令</div>
  <div class="instr" id="demo-b-instr">加载中…</div>
</div>
<div class="timeline" id="demo-b"></div>

<h2><span class="num">02</span>Thought 格式说明</h2>
<pre><code>Thought: &lt;感知：画面里有什么&gt; | &lt;状态：血量/手持/进度&gt; | &lt;决策：为什么这么做&gt;
Action: move(dx, dy) and press(keys) and click(button)</code></pre>
<ul style="margin: 10px 0 10px 22px; color: var(--text);">
  <li><b>感知段</b>必须引用帧内可见的实体、地形、物品或 GUI（防幻觉）</li>
  <li><b>状态段</b>报告玩家可推断状态（血量、装备、任务进度）</li>
  <li><b>决策段</b>把动作和上下文联系起来</li>
  <li>整个 thought ≤45 词；超限或格式不合规在 pipeline 层丢弃</li>
</ul>

<h2><span class="num">03</span>数据规模与可下载资源</h2>
<table style="width:100%; border-collapse:collapse; margin: 12px 0; font-size:14px;">
  <tr style="background: var(--card);"><th style="padding:10px; border:1px solid var(--border); text-align:left">文件</th><th style="padding:10px; border:1px solid var(--border); text-align:left">大小</th><th style="padding:10px; border:1px solid var(--border); text-align:left">内容</th></tr>
  <tr><td style="padding:10px; border:1px solid var(--border)"><code>annotated.pkl</code></td><td style="padding:10px; border:1px solid var(--border)">450 MB</td><td style="padding:10px; border:1px solid var(--border)">完整 531 条（内含图像字节）—— 用于 SFT continue 训练</td></tr>
  <tr><td style="padding:10px; border:1px solid var(--border)"><code>thoughts.jsonl</code></td><td style="padding:10px; border:1px solid var(--border)">~3 MB</td><td style="padding:10px; border:1px solid var(--border)">文本版（instruction + step / thought / action）—— 用于质检与离线分析</td></tr>
</table>
<div style="margin: 16px 0 24px;">
  <a class="download" href="data/thoughts.jsonl" download>下载 JSONL（轻量）</a>
  <a class="download outline" href="data/annotated.pkl" download>下载完整 PKL（450 MB）</a>
</div>

<div class="note">
💡 <b>下一步</b>：本页是当前 pilot 子集。我们已完成决策点检测 + 论证通道 + 校验渲染的完整链路（见 <code>cot_annotation/</code> 源码）；<b>盲预测通道</b>（事后合理化质检）已实现 prompt 但未对接分流，是全量标注前需要补的最后一环。
</div>

<footer>
  Minecraft Agent · CoT Demo · <a href="index.html" style="color: var(--blue); text-decoration: none;">返回主页面</a>
</footer>

</div>
<script>
// 从内联 demo.json 加载（更可靠，避免额外 fetch 跨域问题）
const DEMO = {
  dark_oak: { instr: "", frames: [] },
  gold:     { instr: "", frames: [] }
};

// 用 fetch 拉 JSON（失败则用内联备份）
fetch("demo.json").then(r => r.ok ? r.json() : null).then(j => {
  if (j) {
    Object.assign(DEMO, j);
    render();
  }
});

function render() {
  // 样本 A
  document.getElementById("demo-a-instr").textContent = DEMO.dark_oak.instr;
  document.getElementById("demo-a").innerHTML = DEMO.dark_oak.frames.map((f, i) =>
    `<div class="step">
      <img src="assets/dark_oak_f${i}.jpg" alt="frame ${i}">
      <div class="meta">
        <div class="label">step ${i} · decision point</div>
        <div class="thought">${escapeHTML(f.thought)}</div>
        <div class="action">${escapeHTML(f.action)}</div>
      </div>
    </div>`).join("");
  // 样本 B
  document.getElementById("demo-b-instr").textContent = DEMO.gold.instr;
  document.getElementById("demo-b").innerHTML = DEMO.gold.frames.map((f, i) =>
    `<div class="step">
      <img src="assets/gold_f${i}.jpg" alt="frame ${i}">
      <div class="meta">
        <div class="label">step ${i} · decision point</div>
        <div class="thought">${escapeHTML(f.thought)}</div>
        <div class="action">${escapeHTML(f.action)}</div>
      </div>
    </div>`).join("");
}

function escapeHTML(s) {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
</script>
</body>
</html>