index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="AdaSpatial-MLLM adaptive 3D spatial reasoning research demo"
    />
    <title>AdaSpatial-MLLM | Adaptive 3D Reasoning</title>
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22><rect width=%2264%22 height=%2264%22 fill=%22%23112b43%22/><path d=%22M14 46V32h8v14zm14 0V16h8v30zm14 0V25h8v21z%22 fill=%22%230d9698%22/></svg>"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="ambient-grid" aria-hidden="true"></div>
    <header class="site-header">
      <a class="brand" href="#top" aria-label="AdaSpatial-MLLM home">
        <span class="brand-mark" aria-hidden="true">
          <span></span><span></span><span></span>
        </span>
        <span>
          <strong>AdaSpatial-MLLM</strong>
          <small>Adaptive Latent Lab</small>
        </span>
      </a>
      <div id="run-origin" class="run-origin"><span></span> REAL EXPERIMENT REPLAY</div>
    </header>

    <main id="top">
      <section class="hero" aria-labelledby="hero-title">
        <div class="hero-copy">
          <p class="eyebrow">3D MLLM · ADAPTIVE INFERENCE</p>
          <h1 id="hero-title">让 3D 推理<br /><em>在收敛时停止。</em></h1>
          <p class="hero-lede">
            真实 Stage-1 checkpoint：fixed-12 对比 task-aware Adaptive+，支持置信门控、困难样本投票与实时输入。
          </p>
        </div>
        <div class="hero-measure" aria-label="headline results">
          <div class="measure-primary">
            <span class="measure-label">MEAN LATENT COMPUTE</span>
            <strong id="headline-saving">-19.0%</strong>
            <span>adaptive vs fixed-12</span>
          </div>
          <div class="measure-secondary">
            <div><span>Accuracy delta</span><strong id="headline-accuracy">-0.21 pp</strong></div>
            <div><span>Paired samples</span><strong id="headline-samples">950</strong></div>
            <div><span>McNemar exact p</span><strong id="headline-p">0.935</strong></div>
          </div>
        </div>
      </section>

      <section class="workbench" aria-labelledby="workbench-title">
        <div class="section-heading">
          <div>
            <p class="eyebrow">TRY A REAL TRACE</p>
            <h2 id="workbench-title">真实样例对比</h2>
          </div>
          <div class="workbench-controls">
            <div class="mode-switch" role="group" aria-label="演示模式">
              <button id="replay-mode" class="is-active" type="button" aria-pressed="true">REPLAY</button>
              <button id="live-mode" type="button" aria-pressed="false">LIVE GPU</button>
            </div>
            <label id="replay-picker" class="sample-picker">
              <span>真实样例</span>
              <select id="case-select" aria-label="选择真实样例"></select>
            </label>
          </div>
        </div>

        <section id="live-composer" class="live-composer" aria-labelledby="live-title" hidden>
          <div class="upload-column">
            <div class="live-kicker">
              <span>INPUT · 2–4 VIEWS</span>
              <span id="gpu-health" class="gpu-health"><i></i>连接 GPU</span>
            </div>
            <h3 id="live-title">上传同一场景的多视角图片</h3>
            <label class="upload-zone" for="live-images">
              <strong>选择 JPEG / PNG / WEBP</strong>
              <span>每张不超过 10 MB；建议按正、左、后、右顺序</span>
              <input id="live-images" name="images" type="file" multiple accept="image/jpeg,image/png,image/webp" />
            </label>
            <div id="upload-previews" class="upload-previews" aria-live="polite"></div>
          </div>

          <form id="live-form" class="live-form">
            <div class="live-kicker"><span>QUERY + CHOICES</span><span>FIXED-12 → ADAPTIVE+</span></div>
            <label class="field field-wide">
              <span>空间问题</span>
              <textarea id="live-question" name="question" rows="3" required placeholder="例如：从图 4 的视角看，咖啡桌左侧是什么？"></textarea>
            </label>
            <div class="choice-fields">
              <label class="field"><span>A</span><input id="option-a" name="option_a" required /></label>
              <label class="field"><span>B</span><input id="option-b" name="option_b" required /></label>
              <label class="field"><span>C</span><input id="option-c" name="option_c" required /></label>
              <label class="field"><span>D</span><input id="option-d" name="option_d" required /></label>
            </div>
            <div class="live-actions">
              <label class="field task-field">
                <span>任务类型</span>
                <select id="task-type" name="task_type">
                  <option value="auto">自动识别</option>
                  <option value="among">多物体 / Among</option>
                  <option value="rotation">旋转 / Rotation</option>
                  <option value="around">环绕 / Around</option>
                </select>
              </label>
              <label class="field reference-field">
                <span>参考答案（可选）</span>
                <select id="reference-answer" name="reference_answer">
                  <option value="">未知</option><option>A</option><option>B</option><option>C</option><option>D</option>
                </select>
              </label>
              <button id="live-submit" class="run-button" type="submit">
                <span class="run-icon" aria-hidden="true">▶</span><span>运行 GPU 对比</span>
              </button>
            </div>
            <label class="symmetry-toggle">
              <input type="checkbox" name="symmetry_check" value="true" />
              <span>方向题额外运行左右镜像一致性检查（会增加一次 GPU 推理）</span>
            </label>
            <p id="live-progress" class="live-progress" aria-live="polite">首次请求会加载约 7.2 GB checkpoint，随后保持驻留。</p>
          </form>
        </section>

        <div id="replay-shell" class="instrument-shell">
          <section class="scene-panel" aria-labelledby="scene-title">
            <div class="panel-kicker"><span>INPUT / 4 VIEWS</span><span>MINDCUBE</span></div>
            <h3 id="scene-title">围绕同一个物体重建空间</h3>
            <div id="view-grid" class="view-grid"></div>
            <div class="view-hint">点击视角可放大。图像与模型实验输入一致。</div>
          </section>

          <section class="question-panel" aria-labelledby="question-title">
            <div class="panel-kicker"><span>QUERY</span><span id="case-id">SAMPLE</span></div>
            <h3 id="question-title">空间问题</h3>
            <p id="question-text" class="question-text"></p>
            <div id="option-grid" class="option-grid"></div>
            <p id="case-note" class="case-note"></p>
            <button id="run-button" class="run-button" type="button">
              <span class="run-icon" aria-hidden="true">▶</span>
              <span>播放真实推理轨迹</span>
            </button>
          </section>
        </div>

        <section class="latent-console" aria-labelledby="latent-title">
          <div class="console-head">
            <div>
              <p class="eyebrow">SIGNATURE VIEW</p>
              <h3 id="latent-title">Latent 轨迹示波器</h3>
            </div>
            <div id="playback-status" class="playback-status" aria-live="polite">
              <span></span>就绪
            </div>
          </div>

          <div class="rail-block">
            <div class="rail-label">
              <strong>FIXED-12</strong>
              <span>预算预先固定</span>
            </div>
            <div id="fixed-rail" class="latent-rail" aria-label="fixed 12 latent steps"></div>
            <div id="fixed-exit" class="exit-readout">12 steps</div>
          </div>
          <div class="rail-block adaptive-rail-block">
            <div class="rail-label">
              <strong>ADAPTIVE+</strong>
              <span>收敛 + 置信门控 + 按需投票</span>
            </div>
            <div id="adaptive-rail" class="latent-rail" aria-label="adaptive latent steps"></div>
            <div id="adaptive-exit" class="exit-readout">-- steps</div>
          </div>

          <div class="signal-grid">
            <div class="signal-chart-wrap">
              <div class="signal-title">
                <span>cosine distance between h<sub>t</sub> and h<sub>t-1</sub></span>
                <span class="threshold-key"><i></i> epsilon = 0.04</span>
              </div>
              <div id="signal-chart" class="signal-chart" aria-label="hidden-state convergence chart"></div>
            </div>
            <div id="step-inspector" class="step-inspector">
              <span class="inspector-label">CURRENT STEP</span>
              <strong>00</strong>
              <dl>
                <div><dt>distance</dt><dd>--</dd></div>
                <div><dt>decision</dt><dd>waiting</dd></div>
              </dl>
            </div>
          </div>
        </section>

        <section id="comparison-section" class="comparison" aria-labelledby="comparison-title">
          <div class="section-heading compact">
            <div>
              <p class="eyebrow">PER-SAMPLE OUTCOME</p>
              <h3 id="comparison-title">答案、计算和退出原因</h3>
            </div>
            <div id="ground-truth" class="truth-chip">Ground truth --</div>
          </div>
          <div id="comparison-cards" class="comparison-cards"></div>
          <details class="reasoning-drawer">
            <summary>查看模型生成的文本 reasoning 对照</summary>
            <div id="reasoning-columns" class="reasoning-columns"></div>
          </details>
        </section>
      </section>

      <section class="evidence" aria-labelledby="evidence-title">
        <div class="section-heading">
          <div>
            <p class="eyebrow">FULL HOLDOUT · N=950</p>
            <h2 id="evidence-title">全量结果</h2>
          </div>
          <p class="evidence-intro">冻结 holdout 上的统计，不以单个 demo 样例代替总体证据。</p>
        </div>
        <div id="benchmark-grid" class="benchmark-grid"></div>
        <div class="evidence-footer">
          <div><span>57.8%</span><p>样本由收敛规则提前退出</p></div>
          <div><span>83.5%</span><p>adaptive 与 fixed-12 预测一致</p></div>
          <div><span>12.64 GiB</span><p>干净测速中的峰值显存</p></div>
          <div><span>27 / 27</span><p>自动化测试通过</p></div>
        </div>
      </section>

    </main>

    <div id="image-modal" class="image-modal" hidden>
      <button id="modal-close" type="button" aria-label="关闭大图">×</button>
      <figure>
        <img id="modal-image" alt="" />
        <figcaption id="modal-caption"></figcaption>
      </figure>
    </div>

    <footer>
      <span>AdaSpatial-MLLM · Training-Free Adaptive 3D Inference</span>
      <span>Checkpoint: jankin123/3DThinker-Mindcube Stage-1</span>
    </footer>
    <script src="app.js" defer></script>
  </body>
</html>