Spaces:
Running
Running
| <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: <感知：画面里有什么> | <状态：血量/手持/进度> | <决策：为什么这么做> | |
| 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, "&").replace(/</g, "<").replace(/>/g, ">"); | |
| } | |
| </script> | |
| </body> | |
| </html> |