<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Self-Consistency 自我一致性 · 交互演示</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="page">
    <header class="hero">
      <p class="eyebrow">大模型提示词 · 推理增强</p>
      <h1>Self-Consistency<br /><span>自我一致性</span></h1>
      <p class="lead">
        让模型用多种思路分别推理，再对答案做「多数表决」——
        当单条推理链会犯错时，一致性投票能显著提高正确率。
      </p>
    </header>

    <section class="card concept">
      <h2>核心流程</h2>
      <div class="flow">
        <div class="flow-step">
          <span class="num">1</span>
          <strong>同一问题</strong>
          <p>保持题目不变</p>
        </div>
        <div class="flow-arrow">→</div>
        <div class="flow-step">
          <span class="num">2</span>
          <strong>多条推理链</strong>
          <p>不同方法 / 多次采样</p>
        </div>
        <div class="flow-arrow">→</div>
        <div class="flow-step">
          <span class="num">3</span>
          <strong>各自得答案</strong>
          <p>可能出现分歧</p>
        </div>
        <div class="flow-arrow">→</div>
        <div class="flow-step highlight">
          <span class="num">4</span>
          <strong>多数表决</strong>
          <p>出现次数最多的答案胜出</p>
        </div>
      </div>
    </section>

    <section class="card compare">
      <h2>为什么原例「铅笔题」不够典型？</h2>
      <div class="compare-grid">
        <div class="compare-item weak">
          <h3>铅笔题（太简单）</h3>
          <p>20 ÷ 2 = 10，除法、累加、分段三种写法本质相同，<strong>不可能产生分歧</strong>，看不出投票的价值。</p>
        </div>
        <div class="compare-item strong">
          <h3>睡莲题（更适合）</h3>
          <p>指数增长容易触发「48÷2=24」的线性直觉错误；逆向递推与模拟会得到 <strong>47</strong>，分歧真实存在。</p>
        </div>
      </div>
    </section>

    <section class="card demo">
      <div class="demo-head">
        <h2>交互演示：池塘睡莲</h2>
        <p class="question">
          一个池塘里的睡莲每天覆盖面积都会翻倍。如果第 48 天睡莲刚好铺满整个池塘，
          那么睡莲在第几天会刚好覆盖池塘面积的一半？
        </p>
      </div>

      <div class="prompt-box">
        <div class="prompt-label">提示词模板</div>
        <pre id="prompt-text">你是一个逻辑推理助手。请用 3 种不同的方法来推理这个问题，并分别给出最终答案。
最后请总结：哪个答案出现次数最多，把它作为最终的正确答案输出。

问题如下：
一个池塘里的睡莲每天覆盖面积都会翻倍。如果第 48 天睡莲刚好铺满整个池塘，
那么睡莲在第几天会刚好覆盖池塘面积的一半？</pre>
      </div>

      <div class="controls">
        <button id="run-btn" class="btn primary">▶ 运行 3 条推理链</button>
        <button id="reset-btn" class="btn ghost">↺ 重置</button>
        <label class="toggle">
          <input type="checkbox" id="single-mode" />
          <span>对比：仅运行单条链（线性直觉，易错）</span>
        </label>
      </div>

      <div id="status" class="status">点击按钮，观察三条推理链如何产生答案并投票。</div>

      <div id="chains" class="chains"></div>

      <div id="vote-panel" class="vote-panel hidden">
        <h3>多数表决</h3>
        <div id="vote-bars" class="vote-bars"></div>
        <div id="final-answer" class="final-answer"></div>
      </div>
    </section>

    <section class="card takeaway">
      <h2>课堂要点</h2>
      <ul>
        <li>Self-Consistency 的价值在于<strong>纠错</strong>，而不只是「多算几遍」。</li>
        <li>题目要足够复杂，不同推理路径才<strong>可能 disagree</strong>。</li>
        <li>工程实践中常用：同一 prompt 多次采样（提高 temperature）→ 对最终答案投票。</li>
        <li>课堂演示可用「多种方法」来可视化不同推理路径。</li>
      </ul>
    </section>

    <footer>2026 深圳就业班 · 大模型提示词 · Coze</footer>
  </div>

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