| <!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 { 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; } |
| |
| |
| .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); } |
| |
| |
| .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'; |
| |
| |
| 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('%') }); |
| |
| |
| 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()), |
| ]); |
| |
| |
| 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; |
| |
| |
| 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(''); |
| } |
| |
| |
| 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); |
| } |
| } |
| |
| |
| 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(); |
| }); |
| |
| |
| refreshMetrics(); |
| setInterval(refreshMetrics, 15000); |
| </script> |
| </body> |
| </html> |
|
|
