Blame for src/performance/index.html

<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DeepSeek 2API — 性能监控</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
  <style>
    :root { --bg: #0f172a; --card: #1e293b; --border: #334155; --text: #e2e8f0; --muted: #94a3b8; --accent: #3b82f6; --green: #22c55e; --red: #ef4444; --yellow: #eab308; --purple: #a855f7; }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
    .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
    header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
    header h1 { font-size: 20px; font-weight: 600; }
    .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
    .status-running { background: rgba(34,197,94,.15); color: var(--green); }
    .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
    .meta { font-size: 12px; color: var(--muted); }

    /* Cards */
    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
    .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
    .card-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
    .card-value { font-size: 28px; font-weight: 700; line-height: 1.2; }
    .card-unit { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 2px; }
    .card-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

    /* Model table */
    .section-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
    table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 24px; }
    th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
    th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
    td { color: var(--text); }
    tbody tr:hover { background: rgba(59,130,246,.05); }

    /* Charts */
    .range-selector { display: flex; gap: 8px; margin-bottom: 16px; }
    .range-btn { padding: 4px 14px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; transition: all .15s; }
    .range-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .range-btn:hover:not(.active) { border-color: var(--accent); color: var(--text); }
    .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
    .chart-card h3 { font-size: 13px; color: var(--muted); margin-bottom: 12px; font-weight: 500; }
    canvas { width: 100%!important; height: 200px!important; }
    @media (max-width: 768px) { .charts { grid-template-columns: 1fr; } .cards { grid-template-columns: repeat(2, 1fr); } }
  </style>
</head>
<body>
<div class="container">
  <header>
    <div>
      <h1>🚀 DeepSeek 2API — 性能监控</h1>
      <div class="meta">实时数据每 15s 刷新 · 图表每 60s 刷新</div>
    </div>
    <div class="status-badge status-running"><span class="status-dot"></span> 运行中</div>
  </header>

  <div class="cards">
    <div class="card">
      <div class="card-label">每分钟请求</div>
      <div class="card-value"><span id="rpm">0</span><span class="card-unit"> rpm</span></div>
    </div>
    <div class="card">
      <div class="card-label">活跃 Token</div>
      <div class="card-value"><span id="activeTokens">0</span><span class="card-unit"> / <span id="totalCap">0</span></span></div>
      <div class="card-sub">当前并发 / 总容量</div>
    </div>
    <div class="card">
      <div class="card-label">Session 缓存率</div>
      <div class="card-value"><span id="cacheHit">100</span><span class="card-unit">%</span></div>
    </div>
    <div class="card">
      <div class="card-label">首字 P50</div>
      <div class="card-value"><span id="ttfbP50">0</span><span class="card-unit"> ms</span></div>
    </div>
    <div class="card">
      <div class="card-label">首字 P90</div>
      <div class="card-value"><span id="ttfbP90">0</span><span class="card-unit"> ms</span></div>
    </div>
    <div class="card">
      <div class="card-label">Token 速度</div>
      <div class="card-value"><span id="tokenSpeed">0</span><span class="card-unit"> tok/s</span></div>
    </div>
    <div class="card">
      <div class="card-label">错误率</div>
      <div class="card-value"><span id="errorRate">0</span><span class="card-unit">%</span></div>
    </div>
    <div class="card">
      <div class="card-label">队列</div>
      <div class="card-value"><span id="queueDepth">0</span><span class="card-unit"> / <span id="queueMax">100</span></span></div>
    </div>
  </div>

  <div class="section-title">实时模型指标</div>
  <table>
    <thead><tr><th>模型</th><th>RPM</th><th>首字 P50</th><th>首字 P90</th><th>Token/s</th><th>错误</th></tr></thead>
    <tbody id="modelTable"><tr><td colspan="6" style="color:var(--muted)">等待数据…</td></tr></tbody>
  </table>

  <div class="section-title">历史趋势</div>
  <div class="range-selector" id="rangeSelector">
    <button class="range-btn" data-range="1h">1h</button>
    <button class="range-btn" data-range="3h">3h</button>
    <button class="range-btn active" data-range="6h">6h</button>
    <button class="range-btn" data-range="12h">12h</button>
    <button class="range-btn" data-range="24h">24h</button>
    <button class="range-btn" data-range="48h">48h</button>
    <button class="range-btn" data-range="72h">72h</button>
  </div>

  <div class="charts">
    <div class="chart-card"><h3>RPM 趋势</h3><canvas id="chartRpm"></canvas></div>
    <div class="chart-card"><h3>首字延迟 (P50/P90)</h3><canvas id="chartTtfb"></canvas></div>
    <div class="chart-card"><h3>Token 速度 (tok/s)</h3><canvas id="chartSpeed"></canvas></div>
    <div class="chart-card"><h3>Session 缓存率 / 错误率</h3><canvas id="chartMisc"></canvas></div>
  </div>
</div>

<script>
const base = '';
let currentRange = '6h';

// --- Charts setup ---
const chartOpts = (yLabel) => ({
  responsive: true,
  maintainAspectRatio: false,
  animation: { duration: 300 },
  scales: {
    x: { display: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', maxTicksLimit: 8, callback: v => { const d = new Date(v); return d.getHours().toString().padStart(2,'0')+':'+d.getMinutes().toString().padStart(2,'0'); } } },
    y: { display: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b' }, title: { display: !!yLabel, text: yLabel, color: '#64748b' } }
  },
  plugins: { legend: { labels: { color: '#94a3b8', boxWidth: 12 } } }
});

const mkDataset = (label, color, data=[]) => ({ label, data, borderColor: color, backgroundColor: color+'20', borderWidth: 2, pointRadius: 0, fill: true, tension: .3 });
const mkData = (labels=[]) => ({ labels, datasets: [] });

const chRpm = new Chart(document.getElementById('chartRpm'), { type: 'line', data: mkData(), options: chartOpts('rpm') });
const chTtfb = new Chart(document.getElementById('chartTtfb'), { type: 'line', data: mkData(), options: chartOpts('ms') });
const chSpeed = new Chart(document.getElementById('chartSpeed'), { type: 'line', data: mkData(), options: chartOpts('tok/s') });
const chMisc = new Chart(document.getElementById('chartMisc'), { type: 'line', data: mkData(), options: chartOpts('%') });

// --- Fetch metrics ---
async function refreshMetrics() {
  try {
    const [m, q, p] = await Promise.all([
      fetch(base + '/performance/api/metrics').then(r => r.json()),
      fetch(base + '/admin/api/stats').then(r => r.json()),
      fetch(base + '/performance/api/timeseries?range=' + currentRange).then(r => r.json()),
    ]);

    // Cards
    document.getElementById('rpm').textContent = m.rpm;
    const active = p.pool?.reduce((s, t) => s + t.activeRequests, 0) || 0;
    document.getElementById('activeTokens').textContent = active;
    document.getElementById('totalCap').textContent = p.totalCapacity || 0;
    document.getElementById('cacheHit').textContent = m.sessionHitRate;
    document.getElementById('ttfbP50').textContent = m.ttfbP50;
    document.getElementById('ttfbP90').textContent = m.ttfbP90;
    document.getElementById('tokenSpeed').textContent = m.tokenSpeed;
    document.getElementById('errorRate').textContent = m.errorRate;
    document.getElementById('queueDepth').textContent = p.queue?.queued || 0;
    document.getElementById('queueMax').textContent = p.queue?.maxQueueSize || 100;

    // Model table
    const tbody = document.getElementById('modelTable');
    const models = Object.entries(m.perModel || {});
    if (models.length) {
      tbody.innerHTML = models.map(([name, d]) =>
        `<tr><td>${name}</td><td>${d.rpm}</td><td>${d.ttfbP50} ms</td><td>${d.ttfbP90} ms</td><td>${d.tokenSpeed}</td><td>${d.errors}</td></tr>`
      ).join('');
    }

    // Charts
    const ts = p.points || [];
    const labels = ts.map(p => p.ts);
    const timeFmt = v => { const d = new Date(v); return d.getHours().toString().padStart(2,'0')+':'+d.getMinutes().toString().padStart(2,'0'); };

    chRpm.data = { labels, datasets: [mkDataset('RPM', '#3b82f6', ts.map(p=>p.rpm))] };
    chRpm.options.scales.x.ticks.callback = timeFmt;
    chRpm.update();

    chTtfb.data = { labels, datasets: [mkDataset('P50','#3b82f6',ts.map(p=>p.ttfbP50)), mkDataset('P90','#a855f7',ts.map(p=>p.ttfbP90))] };
    chTtfb.options.scales.x.ticks.callback = timeFmt;
    chTtfb.update();

    chSpeed.data = { labels, datasets: [mkDataset('Token/s','#22c55e',ts.map(p=>p.tokenSpeed))] };
    chSpeed.options.scales.x.ticks.callback = timeFmt;
    chSpeed.update();

    chMisc.data = { labels, datasets: [mkDataset('缓存率','#3b82f6',ts.map(p=>p.sessionHitRate)), mkDataset('错误率','#ef4444',ts.map(p=>p.errorRate))] };
    chMisc.options.scales.x.ticks.callback = timeFmt;
    chMisc.update();
  } catch (e) {
    console.error('Metrics fetch failed:', e);
  }
}

// Range selector
document.getElementById('rangeSelector').addEventListener('click', e => {
  if (!e.target.classList.contains('range-btn')) return;
  document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
  e.target.classList.add('active');
  currentRange = e.target.dataset.range;
  refreshMetrics();
});

// Auto refresh
refreshMetrics();
setInterval(refreshMetrics, 15000);
</script>
</body>
</html>