<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>金融文本统一打标</title>
    <link rel="stylesheet" href="/static/style.css?v=20260611" />
  </head>
  <body>
    <div class="page-bg"></div>
    <main class="app-shell">
      <header class="hero">
        <div class="hero-badge">FinLabel Studio</div>
        <h1>金融文本统一打标工作台</h1>
        <p class="subtitle">
          点选任务与示例数据，左右对比提示词与模型结果；支持按难度 AI 生成测试样本。
        </p>
        <div class="hero-tags">
          <span class="hero-tag">分类</span>
          <span class="hero-tag">抽取</span>
          <span class="hero-tag">匹配</span>
        </div>
      </header>

      <section class="card step-card">
        <div class="step-header">
          <span class="step-num">01</span>
          <div>
            <h2>选择打标任务</h2>
            <p>切换任务后，下方会自动加载对应提示词。</p>
          </div>
        </div>
        <div class="task-cards" id="taskCards">
          <button class="task-card active" data-task="classify" type="button">
            <span class="task-icon classify-icon">CL</span>
            <div class="task-copy">
              <strong>金融文本分类</strong>
              <span>输出固定类别标签</span>
            </div>
          </button>
          <button class="task-card" data-task="extract" type="button">
            <span class="task-icon extract-icon">EX</span>
            <div class="task-copy">
              <strong>金融信息抽取</strong>
              <span>输出结构化 JSON</span>
            </div>
          </button>
          <button class="task-card" data-task="match" type="button">
            <span class="task-icon match-icon">MT</span>
            <div class="task-copy">
              <strong>金融文本匹配</strong>
              <span>判断两段文本是否匹配</span>
            </div>
          </button>
        </div>
      </section>

      <section class="card step-card">
        <div class="step-header row-between">
          <div class="step-header-main">
            <span class="step-num">02</span>
            <div>
              <h2>选择待打标数据</h2>
              <p>推荐使用示例数据，标准答案与模型结果可直接对比。</p>
            </div>
          </div>
          <div class="segmented" id="sourceToggle">
            <button class="segment-btn active" data-source="sample" type="button">
              示例数据
            </button>
            <button class="segment-btn" data-source="manual" type="button">
              手动输入
            </button>
          </div>
        </div>

        <div id="sampleMode">
          <div class="control-deck">
            <div class="control-block">
              <span class="control-label">难度等级</span>
              <div class="segmented segmented-wide" id="difficultyBar">
                <button class="segment-btn active" data-difficulty="easy" type="button">
                  简单
                </button>
                <button class="segment-btn" data-difficulty="medium" type="button">
                  中等
                </button>
                <button class="segment-btn" data-difficulty="hard" type="button">
                  困难
                </button>
              </div>
            </div>
            <div class="control-divider"></div>
            <div class="control-block control-block-grow">
              <span class="control-label">AI 生成</span>
              <div class="generate-row">
                <button id="generateBtn" class="btn-generate" type="button">
                  <span class="btn-generate-icon" aria-hidden="true">✦</span>
                  <span class="btn-generate-label">生成测试数据</span>
                </button>
                <span id="generateStatus" class="status-chip status-idle">待生成</span>
              </div>
            </div>
          </div>
          <p class="hint-text" id="generateHint">
            点击生成后，大模型会按当前任务与难度创建 1 条带标准答案的新样本。
          </p>
          <div class="sample-list" id="sampleList"></div>
        </div>

        <div id="manualMode" class="hidden">
          <div id="manualSingle" class="manual-fields">
            <label class="field-label" for="textInput">待打标文本</label>
            <textarea id="textInput" rows="5" placeholder="输入一段金融文本..."></textarea>
          </div>
          <div id="manualMatch" class="hidden manual-fields two-col">
            <label>
              <span class="field-label">文本 A</span>
              <textarea id="textAInput" rows="5" placeholder="输入文本 A..."></textarea>
            </label>
            <label>
              <span class="field-label">文本 B</span>
              <textarea id="textBInput" rows="5" placeholder="输入文本 B..."></textarea>
            </label>
          </div>
        </div>
      </section>

      <section class="card step-card preview-card">
        <div class="step-header">
          <span class="step-num">03</span>
          <div>
            <h2>当前待打标内容</h2>
            <p id="previewHint">请选择一条示例，或切换到手动输入。</p>
          </div>
        </div>
        <div class="preview-box is-empty" id="previewBox">尚未选择数据</div>
      </section>

      <section class="compare-grid">
        <article class="card compare-card prompt-card">
          <div class="compare-header">
            <span class="compare-dot prompt-dot"></span>
            <div>
              <h3>提示词</h3>
              <p>模型收到的完整指令</p>
            </div>
          </div>
          <pre id="promptView">正在读取提示词...</pre>
        </article>
        <article class="card compare-card result-card">
          <div class="compare-header">
            <span class="compare-dot result-dot"></span>
            <div>
              <h3>模型结果</h3>
              <p>打标返回内容</p>
            </div>
          </div>
          <pre id="resultView"><span class="result-placeholder">点击「开始打标」后，结果会显示在这里。</span></pre>
        </article>
      </section>

      <div class="action-bar">
        <button id="submitBtn" class="btn-primary" type="button">开始打标</button>
      </div>
    </main>
    <script src="/static/app.js?v=20260611b"></script>
  </body>
</html>