<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CoT 思维链 · 交互对比演示</title>
  <link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
  <div class="page">
    <header class="hero">
      <p class="eyebrow">大模型提示词 · Day02</p>
      <h1>Chain-of-Thought<br /><span>思维链 CoT 对比演示</span></h1>
      <p class="lead">
        同一道题，三种提示词策略，<strong>真实调用百炼 qwen-plus</strong>。
        左侧看提示词差异，右侧看模型回复，底部一览对比结果。
      </p>
    </header>

    <section class="card runtime" id="runtime-card">
      <h2>运行环境</h2>
      <div class="runtime-grid" id="runtime-info">
        <div class="runtime-item"><span>状态</span><strong>加载中…</strong></div>
      </div>
    </section>

    <section class="card controls">
      <h2>选择题目并运行</h2>
      <div class="control-row">
        <label for="question-select">演示题目</label>
        <select id="question-select"></select>
        <button id="run-btn" class="btn-primary">开始对比演示</button>
      </div>
      <div class="question-detail" id="question-detail"></div>
      <div class="progress" id="progress" hidden>
        <div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
        <p id="progress-text">准备中…</p>
      </div>
    </section>

    <section class="card flow" id="flow-card" hidden>
      <h2>运行过程</h2>
      <ol class="flow-steps" id="flow-steps">
        <li data-step="1"><span>模式 A · 无 CoT</span><em>等待</em></li>
        <li data-step="2"><span>模式 B · 零样本 CoT</span><em>等待</em></li>
        <li data-step="3"><span>模式 C · 少样本 CoT</span><em>等待</em></li>
      </ol>
    </section>

    <section class="compare-grid" id="results-grid"></section>

    <section class="card summary" id="summary-card" hidden>
      <h2>本题对比小结</h2>
      <div class="summary-tables">
        <div>
          <h3>提示词差异</h3>
          <table id="prompt-table">
            <thead><tr><th>模式</th><th>消息条数</th><th>结构说明</th></tr></thead>
            <tbody></tbody>
          </table>
        </div>
        <div>
          <h3>结果对比</h3>
          <table id="result-table">
            <thead><tr><th>模式</th><th>最终答案</th><th>正确性</th><th>分步推理</th></tr></thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
      <div class="tips">
        <strong>课堂观察要点</strong>
        <ul>
          <li>对比各模式【发送给模型的提示词】：A 最短，B 多了分步要求，C 多了示例推理链</li>
          <li>无 CoT 往往只有一行答案，复杂题容易跳步答错</li>
          <li>零样本 CoT 会展开推理链，过程可审查</li>
          <li>少样本 CoT 会模仿示例格式，输出更稳定</li>
        </ul>
      </div>
    </section>
  </div>

  <script src="/static/app.js"></script>
</body>
</html>