<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LLM 安全攻防演示平台</title>
  <link rel="stylesheet" href="/static/css/style.css" />
</head>
<body>
  <header class="header">
    <div class="header-brand">
      <div class="logo">🛡️</div>
      <div>
        <h1>LLM 安全攻防演示平台</h1>
        <p class="subtitle">看得见攻击 · 看得见后果 · 看得见防御生效</p>
      </div>
    </div>
    <div class="header-actions">
      <div class="steps-hint">
        <span class="step">① 选样本</span>
        <span class="step-arrow">→</span>
        <span class="step">② 发攻击</span>
        <span class="step-arrow">→</span>
        <span class="step">③ 看对比</span>
      </div>
      <button id="btnRedteam" class="btn btn-outline">红队批量测试</button>
    </div>
  </header>

  <div id="defenseWarning" class="defense-warning hidden"></div>

  <main class="layout">
    <!-- 左侧：场景与样本 -->
    <aside class="sidebar">
      <section class="panel">
        <div class="panel-title">
          <span class="panel-icon">📂</span>
          <h2>攻击场景</h2>
        </div>
        <div id="scenarioTabs" class="tabs"></div>
      </section>

      <section class="panel">
        <div class="panel-title">
          <span class="panel-icon">🎯</span>
          <h2>攻击样本库</h2>
        </div>
        <p id="scenarioDesc" class="desc"></p>
        <ul id="sampleList" class="sample-list"></ul>
      </section>

      <section class="panel attack-guide">
        <div class="panel-title">
          <span class="panel-icon">📖</span>
          <h2>攻击说明</h2>
        </div>
        <div id="attackGuide">
          <p class="empty-hint">选择样本后，这里会显示攻击手法与预期后果</p>
        </div>
      </section>
    </aside>

    <!-- 中间：实验区 -->
    <section class="main-content">
      <div class="input-area panel">
        <div class="panel-title">
          <span class="panel-icon">⚡</span>
          <h2>攻击输入</h2>
        </div>
        <textarea id="attackInput" rows="4" placeholder="输入攻击 payload，或从左侧选择样本一键填充…"></textarea>
        <div class="input-actions">
          <button id="btnSend" class="btn btn-primary">
            <span class="btn-icon">▶</span> 发送对比实验
          </button>
          <span id="loadingHint" class="loading hidden">处理中…</span>
        </div>
      </div>

      <div class="compare-section-label">实验结果对比</div>
      <div id="compareSummary" class="compare-summary hidden">
        <div class="summary-side summary-vuln">
          <span class="summary-label">无防护模式</span>
          <span id="summaryVulnStatus" class="summary-status">—</span>
          <span id="summaryVulnDetail" class="summary-detail"></span>
        </div>
        <div class="summary-vs">VS</div>
        <div class="summary-side summary-secure">
          <span class="summary-label">安全模式</span>
          <span id="summarySecureStatus" class="summary-status">—</span>
          <span id="summarySecureDetail" class="summary-detail"></span>
        </div>
      </div>
      <div class="compare-grid">
        <article class="panel result-card vulnerable">
          <div class="card-top-bar"></div>
          <div class="card-header">
            <div class="card-title-group">
              <span class="card-icon">🔓</span>
              <div>
                <h3>无防护模式</h3>
                <p class="card-sub">用户输入直接拼接进提示词</p>
              </div>
            </div>
            <span id="vulnBadge" class="badge badge-neutral">等待实验</span>
          </div>
          <div id="vulnOutput" class="output-box placeholder">发送实验后，这里展示脆弱模式的输出结果</div>
          <div class="result-meta">
            <span class="meta-label">后果标签</span>
            <div id="vulnConsequences" class="consequences"></div>
          </div>
          <p id="vulnExplain" class="explain"></p>
        </article>

        <article class="panel result-card secure">
          <div class="card-top-bar"></div>
          <div class="card-header">
            <div class="card-title-group">
              <span class="card-icon">🔒</span>
              <div>
                <h3>安全模式</h3>
                <p class="card-sub">经过统一安全防护层处理</p>
              </div>
            </div>
            <div class="card-header-right">
              <button id="btnPipeline" class="btn btn-pipeline hidden" type="button">查看处理流程</button>
              <span id="secureBadge" class="badge badge-neutral">等待实验</span>
            </div>
          </div>
          <div id="secureOutput" class="output-box placeholder">发送实验后，这里展示安全模式的输出结果</div>
          <div class="result-meta">
            <span class="meta-label">防御信息</span>
            <div id="secureDefense" class="defense-info"></div>
          </div>
          <p id="secureExplain" class="explain"></p>
        </article>
      </div>

      <section class="panel">
        <div class="panel-title">
          <span class="panel-icon">📋</span>
          <h2>审计日志</h2>
        </div>
        <div id="auditLog" class="audit-log">
          <p class="empty-hint">暂无记录，发送实验后显示</p>
        </div>
      </section>
    </section>

    <!-- 右侧：安全设定 -->
    <aside class="settings-sidebar">
      <section class="panel">
        <div class="panel-title">
          <span class="panel-icon">⚙️</span>
          <h2>统一安全设定</h2>
        </div>
        <form id="securityForm" class="settings-form">
          <div class="settings-group">
            <p class="group-label">防护开关</p>
            <label class="checkbox"><input type="checkbox" name="enable_input_isolation" checked /><span>输入隔离</span></label>
            <label class="checkbox"><input type="checkbox" name="enable_injection_detection" checked /><span>注入检测</span></label>
            <label class="checkbox"><input type="checkbox" name="enable_jailbreak_detection" checked /><span>越狱检测</span></label>
            <label class="checkbox"><input type="checkbox" name="enable_output_filter" checked /><span>输出过滤</span></label>
            <label class="checkbox"><input type="checkbox" name="audit_enabled" checked /><span>审计日志</span></label>
          </div>

          <div class="settings-group">
            <label class="field">
              <span>任务白名单</span>
              <input type="text" name="task_whitelist" value="translate,summarize,faq" placeholder="逗号分隔" />
            </label>
            <label class="field">
              <span>统一拒绝话术</span>
              <textarea name="refusal_message" rows="2">抱歉，我只能协助完成规定范围内的请求，无法处理该内容。</textarea>
            </label>
          </div>

          <button type="submit" class="btn btn-secondary">保存设定</button>
        </form>
        <p id="settingsStatus" class="status-msg"></p>
      </section>

      <section class="panel legend">
        <div class="panel-title">
          <span class="panel-icon">🏷️</span>
          <h2>状态图例</h2>
        </div>
        <ul>
          <li><span class="badge badge-danger">攻击成功</span><span>脆弱模式被攻破</span></li>
          <li><span class="badge badge-success">防御成功</span><span>安全模式拦截攻击</span></li>
          <li><span class="badge badge-warn">部分风险</span><span>需检查输出层</span></li>
        </ul>
      </section>
    </aside>
  </main>

  <div id="pipelineModal" class="modal hidden">
    <div class="modal-content panel pipeline-modal">
      <div class="modal-header">
        <div>
          <h2>安全模式处理流程</h2>
          <p class="modal-sub">展示统一安全防护层对本次请求的逐步处理</p>
        </div>
        <button id="btnClosePipeline" class="btn btn-ghost" type="button">✕</button>
      </div>
      <div id="pipelineTimeline" class="pipeline-timeline"></div>
    </div>
  </div>

  <div id="redteamModal" class="modal hidden">
    <div class="modal-content panel">
      <div class="modal-header">
        <h2>红队批量测试报告</h2>
        <button id="btnCloseModal" class="btn btn-ghost">✕</button>
      </div>
      <div id="redteamSummary" class="redteam-summary"></div>
      <div id="redteamResults" class="redteam-results"></div>
    </div>
  </div>

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