645 lines
27 KiB
HTML
645 lines
27 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>CLIProxyAPI Usage Dashboard</title>
|
|
<style>
|
|
/* ── Theme tokens ─────────────────────────────────────────────────────── */
|
|
:root {
|
|
--bg: #f6f7f9;
|
|
--panel: #ffffff;
|
|
--header: #ffffff;
|
|
--text: #17202a;
|
|
--muted: #667085;
|
|
--line: #d9dee7;
|
|
--input-bg:#ffffff;
|
|
--blue: #2563eb;
|
|
--green: #0f9f6e;
|
|
--red: #d92d20;
|
|
--amber: #b7791f;
|
|
--bar-bg: #edf1f7;
|
|
/* canvas text colours (read by JS) */
|
|
--c-label: #667085;
|
|
--c-value: #17202a;
|
|
--c-axis: #d9dee7;
|
|
--c-bar-h: #2563eb;
|
|
--c-bar-m: #0f9f6e;
|
|
}
|
|
[data-theme="dark"] {
|
|
--bg: #0f1117;
|
|
--panel: #1a1d27;
|
|
--header: #13161f;
|
|
--text: #e2e8f0;
|
|
--muted: #8896a5;
|
|
--line: #2d3348;
|
|
--input-bg:#1f2335;
|
|
--blue: #4d8ef7;
|
|
--green: #22c78e;
|
|
--red: #f06b6b;
|
|
--amber: #f0a848;
|
|
--bar-bg: #252a3a;
|
|
--c-label: #8896a5;
|
|
--c-value: #e2e8f0;
|
|
--c-axis: #2d3348;
|
|
--c-bar-h: #4d8ef7;
|
|
--c-bar-m: #22c78e;
|
|
}
|
|
|
|
/* ── Reset & base ─────────────────────────────────────────────────────── */
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
transition: background .25s, color .25s;
|
|
}
|
|
|
|
/* ── Header ───────────────────────────────────────────────────────────── */
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 16px 24px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--header);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
transition: background .25s, border-color .25s;
|
|
}
|
|
h1 { font-size: 18px; margin: 0; }
|
|
|
|
/* ── Toolbar controls ─────────────────────────────────────────────────── */
|
|
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
|
|
button, select {
|
|
border: 1px solid var(--line);
|
|
background: var(--input-bg);
|
|
color: var(--text);
|
|
border-radius: 6px;
|
|
padding: 7px 11px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: background .2s, border-color .2s, color .2s;
|
|
}
|
|
button:hover { opacity: .85; }
|
|
button.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
|
|
|
|
/* language toggle */
|
|
#langToggle {
|
|
background: transparent;
|
|
color: var(--blue);
|
|
border-color: var(--blue);
|
|
font-weight: 600;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* dark-mode toggle */
|
|
#themeToggle {
|
|
background: transparent;
|
|
border-color: var(--line);
|
|
font-size: 16px;
|
|
padding: 6px 10px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ── Layout ───────────────────────────────────────────────────────────── */
|
|
main { padding: 20px 24px 40px; max-width: 1440px; margin: 0 auto; }
|
|
.grid { display: grid; gap: 14px; }
|
|
.kpis { grid-template-columns: repeat(5, minmax(140px, 1fr)); }
|
|
.two { grid-template-columns: 1.2fr .8fr; margin-top: 14px; }
|
|
|
|
/* ── Panel ────────────────────────────────────────────────────────────── */
|
|
.panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
min-width: 0;
|
|
transition: background .25s, border-color .25s;
|
|
}
|
|
.panel h2 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
|
|
|
|
/* ── KPI cards ────────────────────────────────────────────────────────── */
|
|
.kpi .label { color: var(--muted); font-size: 12px; }
|
|
.kpi .value { font-size: 28px; font-weight: 700; margin-top: 6px; color: var(--text); }
|
|
.kpi .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
|
|
|
|
/* ── Tables ───────────────────────────────────────────────────────────── */
|
|
.scroll { overflow: auto; max-height: 400px; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 8px 10px; white-space: nowrap; }
|
|
th { color: var(--muted); font-weight: 600; font-size: 12px; position: sticky; top: 0; background: var(--panel); }
|
|
td.num, th.num { text-align: right; }
|
|
tr:last-child td { border-bottom: none; }
|
|
tbody tr:hover { background: var(--bar-bg); }
|
|
|
|
/* ── Status dot ───────────────────────────────────────────────────────── */
|
|
.status { display: inline-flex; align-items: center; gap: 6px; }
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--green); flex-shrink: 0; }
|
|
.dot.bad { background: var(--red); }
|
|
|
|
/* ── Quota bar ────────────────────────────────────────────────────────── */
|
|
.bar { height: 8px; background: var(--bar-bg); border-radius: 999px; overflow: hidden; min-width: 80px; display: inline-block; vertical-align: middle; margin-right: 6px; }
|
|
.bar > span { display: block; height: 100%; background: var(--green); transition: width .3s; }
|
|
.bar > span.warn { background: var(--amber); }
|
|
.bar > span.bad { background: var(--red); }
|
|
.quota-cell { display: flex; align-items: center; gap: 6px; }
|
|
|
|
/* ── Canvas charts ────────────────────────────────────────────────────── */
|
|
canvas { width: 100% !important; height: 240px !important; display: block; }
|
|
|
|
/* ── Misc ─────────────────────────────────────────────────────────────── */
|
|
.muted { color: var(--muted); }
|
|
#updated { font-size: 12px; }
|
|
|
|
/* ── Footer ────────────────────────────────────────────────────────────── */
|
|
footer {
|
|
text-align: center;
|
|
padding: 24px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
border-top: 1px solid var(--line);
|
|
margin-top: 40px;
|
|
}
|
|
footer a {
|
|
color: var(--blue);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ── Header icon ───────────────────────────────────────────────────────── */
|
|
.header-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.header-icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* ── Responsive ───────────────────────────────────────────────────────── */
|
|
@media (max-width: 960px) {
|
|
.kpis, .two { grid-template-columns: 1fr; }
|
|
header { align-items: flex-start; flex-direction: column; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.kpis { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="header-title">
|
|
<span class="header-icon">📊</span>
|
|
<h1 data-i18n="title">CLIProxyAPI Usage Dashboard</h1>
|
|
</div>
|
|
<div class="toolbar">
|
|
<!-- Dark / Light toggle -->
|
|
<button id="themeToggle" title="Toggle dark/light mode">🌙</button>
|
|
<!-- Language toggle -->
|
|
<button id="langToggle" title="Switch language / Chuyển ngôn ngữ">VI</button>
|
|
|
|
<select id="range">
|
|
<option value="today" data-i18n="rangeToday">Today</option>
|
|
<option value="1h" data-i18n="range1h">Last 1 hour</option>
|
|
<option value="5h" data-i18n="range5h">Last 5 hours</option>
|
|
<option value="24h" data-i18n="range24h">Last 24 hours</option>
|
|
<option value="7d" data-i18n="range7d">Last 7 days</option>
|
|
</select>
|
|
|
|
<button id="quota" class="primary" data-i18n="btnQuota">Refresh Quota</button>
|
|
<button id="refresh" data-i18n="btnRefresh">Refresh</button>
|
|
<span id="updated" class="muted"></span>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- KPI row -->
|
|
<section class="grid kpis">
|
|
<div class="panel kpi">
|
|
<div class="label" data-i18n="kpiRequests">Requests / Tasks</div>
|
|
<div class="value" id="kReq">0</div>
|
|
<div class="sub" id="kFail">Failed: 0</div>
|
|
</div>
|
|
<div class="panel kpi">
|
|
<div class="label" data-i18n="kpiTotal">Total Tokens</div>
|
|
<div class="value" id="kTok">0</div>
|
|
<div class="sub" data-i18n="kpiTotalSub">Input + Output + Reasoning</div>
|
|
</div>
|
|
<div class="panel kpi">
|
|
<div class="label" data-i18n="kpiInput">Input Tokens</div>
|
|
<div class="value" id="kIn">0</div>
|
|
<div class="sub" data-i18n="kpiInputSub">Cache hits counted separately</div>
|
|
</div>
|
|
<div class="panel kpi">
|
|
<div class="label" data-i18n="kpiOutput">Output Tokens</div>
|
|
<div class="value" id="kOut">0</div>
|
|
<div class="sub" data-i18n="kpiOutputSub">Model response</div>
|
|
</div>
|
|
<div class="panel kpi">
|
|
<div class="label" data-i18n="kpiReasoning">Reasoning Tokens</div>
|
|
<div class="value" id="kReason">0</div>
|
|
<div class="sub">reasoning</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Charts row -->
|
|
<section class="grid two">
|
|
<div class="panel">
|
|
<h2 data-i18n="chartHourly">Hourly Usage</h2>
|
|
<canvas id="hourChart"></canvas>
|
|
</div>
|
|
<div class="panel">
|
|
<h2 data-i18n="chartModel">Usage by Model</h2>
|
|
<canvas id="modelChart"></canvas>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tables row -->
|
|
<section class="grid two">
|
|
<div class="panel">
|
|
<h2 data-i18n="tableAccUsage">Usage by Account</h2>
|
|
<div class="scroll">
|
|
<table>
|
|
<thead><tr>
|
|
<th data-i18n="colAccount">Account</th>
|
|
<th class="num" data-i18n="colRequests">Requests</th>
|
|
<th class="num" data-i18n="colTotalToken">Total Tokens</th>
|
|
<th class="num" data-i18n="colInput">Input</th>
|
|
<th class="num" data-i18n="colOutput">Output</th>
|
|
<th class="num" data-i18n="colReasoning">Reasoning</th>
|
|
<th class="num" data-i18n="colFailed">Failed</th>
|
|
</tr></thead>
|
|
<tbody id="accounts"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<h2 data-i18n="tableQuota">Account Quota</h2>
|
|
<div class="scroll">
|
|
<table>
|
|
<thead><tr>
|
|
<th data-i18n="colAccount">Account</th>
|
|
<th data-i18n="colStatus">Status</th>
|
|
<th data-i18n="col5hRemain">5h Remaining</th>
|
|
<th data-i18n="col7dRemain">7d Remaining</th>
|
|
<th data-i18n="colResetTime">Reset Time</th>
|
|
</tr></thead>
|
|
<tbody id="quotas"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Recent requests -->
|
|
<section class="panel" style="margin-top:14px">
|
|
<h2 data-i18n="tableRecent">Recent Requests / Tasks</h2>
|
|
<div class="scroll">
|
|
<table>
|
|
<thead><tr>
|
|
<th data-i18n="colTime">Time</th>
|
|
<th data-i18n="colAccount">Account</th>
|
|
<th data-i18n="colModel">Model</th>
|
|
<th class="num" data-i18n="colTotalToken">Total Tokens</th>
|
|
<th class="num" data-i18n="colInput">Input</th>
|
|
<th class="num" data-i18n="colOutput">Output</th>
|
|
<th class="num" data-i18n="colReasoning">Reasoning</th>
|
|
<th class="num" data-i18n="colLatency">Latency</th>
|
|
<th data-i18n="colStatus">Status</th>
|
|
</tr></thead>
|
|
<tbody id="requests"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
Copyright 2026 - CLIProxyAPI Usage Dashboard - <a href="https://ttaisolutions.com" target="_blank" rel="noopener">TTAI Solutions Software</a>
|
|
</footer>
|
|
|
|
<script>
|
|
// ── i18n ───────────────────────────────────────────────────────────────────────
|
|
const STRINGS = {
|
|
en: {
|
|
title: "CLIProxyAPI Usage Dashboard",
|
|
rangeToday:"Today", range1h:"Last 1 hour", range5h:"Last 5 hours",
|
|
range24h:"Last 24 hours", range7d:"Last 7 days",
|
|
btnRefresh:"Refresh", btnQuota:"Refresh Quota",
|
|
kpiRequests:"Requests / Tasks", kpiTotal:"Total Tokens",
|
|
kpiTotalSub:"Input + Output + Reasoning", kpiInput:"Input Tokens",
|
|
kpiInputSub:"Cache hits counted separately", kpiOutput:"Output Tokens",
|
|
kpiOutputSub:"Model response", kpiReasoning:"Reasoning Tokens",
|
|
chartHourly:"Hourly Usage", chartModel:"Usage by Model",
|
|
tableAccUsage:"Usage by Account", tableQuota:"Account Quota",
|
|
tableRecent:"Recent Requests / Tasks",
|
|
colAccount:"Account", colRequests:"Requests", colTotalToken:"Total Tokens",
|
|
colInput:"Input", colOutput:"Output", colReasoning:"Reasoning",
|
|
colFailed:"Failed", colStatus:"Status", col5hRemain:"5h Remaining",
|
|
col7dRemain:"7d Remaining", colResetTime:"Reset Time", colTime:"Time",
|
|
colModel:"Model", colLatency:"Latency",
|
|
statusOk:"Active", statusLimited:"Limited",
|
|
statusSuccess:"Success", statusFailed:"Failed",
|
|
failedCount: n => `Failed: ${n}`,
|
|
updatedAt: t => `Updated at ${t}`,
|
|
},
|
|
vi: {
|
|
title: "Thống Kê Sử Dụng CLIProxyAPI",
|
|
rangeToday:"Hôm nay", range1h:"1 giờ qua", range5h:"5 giờ qua",
|
|
range24h:"24 giờ qua", range7d:"7 ngày qua",
|
|
btnRefresh:"Làm mới", btnQuota:"Làm mới hạn mức",
|
|
kpiRequests:"Yêu cầu / Tác vụ", kpiTotal:"Tổng Tokens",
|
|
kpiTotalSub:"Đầu vào + Đầu ra + Suy luận", kpiInput:"Tokens đầu vào",
|
|
kpiInputSub:"Cache hit tính riêng", kpiOutput:"Tokens đầu ra",
|
|
kpiOutputSub:"Phản hồi của mô hình", kpiReasoning:"Tokens suy luận",
|
|
chartHourly:"Tiêu thụ theo giờ", chartModel:"Tiêu thụ theo mô hình",
|
|
tableAccUsage:"Tiêu thụ theo tài khoản", tableQuota:"Hạn mức tài khoản",
|
|
tableRecent:"Các yêu cầu / tác vụ gần đây",
|
|
colAccount:"Tài khoản", colRequests:"Yêu cầu", colTotalToken:"Tổng Token",
|
|
colInput:"Đầu vào", colOutput:"Đầu ra", colReasoning:"Suy luận",
|
|
colFailed:"Thất bại", colStatus:"Trạng thái", col5hRemain:"Còn lại 5h",
|
|
col7dRemain:"Còn lại 7d", colResetTime:"Thời gian reset", colTime:"Thời gian",
|
|
colModel:"Mô hình", colLatency:"Độ trễ",
|
|
statusOk:"Hoạt động", statusLimited:"Bị giới hạn",
|
|
statusSuccess:"Thành công", statusFailed:"Thất bại",
|
|
failedCount: n => `Thất bại: ${n}`,
|
|
updatedAt: t => `Cập nhật lúc ${t}`,
|
|
}
|
|
};
|
|
|
|
// ── State ──────────────────────────────────────────────────────────────────────
|
|
let lang = localStorage.getItem('dashLang') || 'en';
|
|
let theme = localStorage.getItem('dashTheme') || 'light';
|
|
let lastSummary = null, lastQuota = null, lastReqs = null;
|
|
|
|
// ── Helpers ────────────────────────────────────────────────────────────────────
|
|
const nf = new Intl.NumberFormat();
|
|
const $ = id => document.getElementById(id);
|
|
const fmt = n => nf.format(n || 0);
|
|
const esc = s => String(s ?? '').replace(/[&<>"']/g,
|
|
c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
|
const cssVar = name => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
|
|
|
async function getJSON(url) {
|
|
const r = await fetch(url);
|
|
if (!r.ok) throw new Error(await r.text());
|
|
return r.json();
|
|
}
|
|
|
|
// ── Theme ──────────────────────────────────────────────────────────────────────
|
|
function applyTheme() {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
$('themeToggle').textContent = theme === 'dark' ? '☀️' : '🌙';
|
|
// Redraw charts with updated CSS-var colours
|
|
if (lastSummary) {
|
|
drawBars($('hourChart'), lastSummary.hours, 'hour', 'total_tokens', cssVar('--c-bar-h'));
|
|
drawHorizontal($('modelChart'), lastSummary.models);
|
|
}
|
|
}
|
|
|
|
$('themeToggle').onclick = () => {
|
|
theme = theme === 'dark' ? 'light' : 'dark';
|
|
localStorage.setItem('dashTheme', theme);
|
|
applyTheme();
|
|
};
|
|
|
|
// ── Language ───────────────────────────────────────────────────────────────────
|
|
function applyLang() {
|
|
const S = STRINGS[lang];
|
|
document.querySelectorAll('[data-i18n]').forEach(el => {
|
|
const key = el.getAttribute('data-i18n');
|
|
if (S[key] && typeof S[key] === 'string') el.textContent = S[key];
|
|
});
|
|
document.documentElement.setAttribute('lang', lang);
|
|
document.title = S.title;
|
|
$('langToggle').textContent = lang === 'en' ? 'VI' : 'EN';
|
|
}
|
|
|
|
$('langToggle').onclick = () => {
|
|
lang = lang === 'en' ? 'vi' : 'en';
|
|
localStorage.setItem('dashLang', lang);
|
|
applyLang();
|
|
if (lastSummary && lastQuota && lastReqs) renderAll(lastSummary, lastQuota, lastReqs);
|
|
};
|
|
|
|
// ── Charts ─────────────────────────────────────────────────────────────────────
|
|
function drawBars(canvas, rows, labelKey, valueKey, color) {
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const rect = canvas.parentElement.getBoundingClientRect();
|
|
canvas.width = rect.width * dpr;
|
|
canvas.height = 240 * dpr;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.scale(dpr, dpr);
|
|
const W = rect.width, H = 240;
|
|
ctx.clearRect(0, 0, W, H);
|
|
ctx.font = `12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
|
|
|
|
const pad = { l:48, r:16, t:12, b:44 };
|
|
const max = Math.max(1, ...rows.map(r => Number(r[valueKey] || 0)));
|
|
const n = Math.max(1, rows.length);
|
|
const slotW = (W - pad.l - pad.r) / n;
|
|
const bw = Math.max(8, slotW * 0.55);
|
|
|
|
rows.forEach((r, i) => {
|
|
const x = pad.l + i * slotW + (slotW - bw) / 2;
|
|
const bh = (H - pad.t - pad.b) * Number(r[valueKey] || 0) / max;
|
|
const y = H - pad.b - bh;
|
|
ctx.fillStyle = color;
|
|
ctx.beginPath();
|
|
ctx.roundRect(x, y, bw, bh, [4, 4, 0, 0]);
|
|
ctx.fill();
|
|
ctx.fillStyle = cssVar('--c-label');
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(String(r[labelKey] || '').slice(-5), x + bw / 2, H - 14);
|
|
if (bh > 20) {
|
|
ctx.fillStyle = cssVar('--c-value');
|
|
ctx.fillText(fmt(r[valueKey]), x + bw / 2, y - 6);
|
|
}
|
|
});
|
|
// axis line
|
|
ctx.strokeStyle = cssVar('--c-axis');
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(pad.l, H - pad.b);
|
|
ctx.lineTo(W - pad.r, H - pad.b);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawHorizontal(canvas, rows) {
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const rect = canvas.parentElement.getBoundingClientRect();
|
|
canvas.width = rect.width * dpr;
|
|
canvas.height = 240 * dpr;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.scale(dpr, dpr);
|
|
const W = rect.width, H = 240;
|
|
ctx.clearRect(0, 0, W, H);
|
|
ctx.font = `12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
|
|
|
|
const labelW = 160, valW = 70, barAreaW = W - labelW - valW - 16;
|
|
const max = Math.max(1, ...rows.map(r => Number(r.total_tokens || 0)));
|
|
const rowH = 28;
|
|
|
|
rows.slice(0, 8).forEach((r, i) => {
|
|
const y = 8 + i * rowH;
|
|
const bw = barAreaW * Number(r.total_tokens || 0) / max;
|
|
const name = String(r.model || 'unknown');
|
|
// label
|
|
ctx.fillStyle = cssVar('--c-value');
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText(name.length > 24 ? name.slice(0, 22) + '…' : name, 4, y + 18);
|
|
// bar
|
|
ctx.fillStyle = cssVar('--c-bar-m');
|
|
ctx.beginPath();
|
|
ctx.roundRect(labelW, y + 8, Math.max(0, bw), 12, 3);
|
|
ctx.fill();
|
|
// value
|
|
ctx.fillStyle = cssVar('--c-label');
|
|
ctx.fillText(fmt(r.total_tokens), labelW + Math.max(0, bw) + 6, y + 18);
|
|
});
|
|
}
|
|
|
|
// ── Quota bar HTML ─────────────────────────────────────────────────────────────
|
|
function quotaBar(v) {
|
|
const cls = v <= 10 ? 'bad' : v <= 30 ? 'warn' : '';
|
|
const pct = Math.max(0, Math.min(100, v));
|
|
return `<div class="quota-cell">
|
|
<div class="bar" style="width:80px"><span class="${cls}" style="width:${pct}%"></span></div>
|
|
<span>${v}%</span>
|
|
</div>`;
|
|
}
|
|
|
|
// ── Render ─────────────────────────────────────────────────────────────────────
|
|
function renderAll(summary, quota, reqs) {
|
|
const s = summary.summary;
|
|
const T = STRINGS[lang];
|
|
|
|
// KPIs
|
|
$('kReq').textContent = fmt(s.requests);
|
|
$('kFail').textContent = T.failedCount(fmt(s.failed));
|
|
$('kTok').textContent = fmt(s.total_tokens);
|
|
$('kIn').textContent = fmt(s.input_tokens);
|
|
$('kOut').textContent = fmt(s.output_tokens);
|
|
$('kReason').textContent = fmt(s.reasoning_tokens);
|
|
|
|
// Accounts table
|
|
$('accounts').innerHTML = summary.accounts.map(a => `
|
|
<tr>
|
|
<td>${esc(a.account)}</td>
|
|
<td class="num">${fmt(a.requests)}</td>
|
|
<td class="num">${fmt(a.total_tokens)}</td>
|
|
<td class="num">${fmt(a.input_tokens)}</td>
|
|
<td class="num">${fmt(a.output_tokens)}</td>
|
|
<td class="num">${fmt(a.reasoning_tokens)}</td>
|
|
<td class="num">${fmt(a.failed)}</td>
|
|
</tr>`).join('');
|
|
|
|
// Quota table
|
|
$('quotas').innerHTML = quota.quotas.map(q => `
|
|
<tr>
|
|
<td>${esc(q.email)}</td>
|
|
<td><span class="status"><span class="dot ${q.allowed ? '' : 'bad'}"></span>${q.allowed ? T.statusOk : T.statusLimited}</span></td>
|
|
<td>${quotaBar(q.primary_remaining_percent)}</td>
|
|
<td>${quotaBar(q.secondary_remaining_percent)}</td>
|
|
<td><div>${esc(q.primary_reset_at)}</div><div class="muted" style="font-size:11px">${esc(q.secondary_reset_at)}</div></td>
|
|
</tr>`).join('');
|
|
|
|
// Requests table
|
|
$('requests').innerHTML = reqs.requests.map(r => `
|
|
<tr>
|
|
<td>${esc(r.local_time)}</td>
|
|
<td>${esc(r.source || r.auth_index)}</td>
|
|
<td>${esc(r.model)}</td>
|
|
<td class="num">${fmt(r.total_tokens)}</td>
|
|
<td class="num">${fmt(r.input_tokens)}</td>
|
|
<td class="num">${fmt(r.output_tokens)}</td>
|
|
<td class="num">${fmt(r.reasoning_tokens)}</td>
|
|
<td class="num">${fmt(r.latency_ms)}ms</td>
|
|
<td>${r.failed ? `<span style="color:var(--red)">${T.statusFailed}</span>` : T.statusSuccess}</td>
|
|
</tr>`).join('');
|
|
|
|
// Charts
|
|
drawBars($('hourChart'), summary.hours, 'hour', 'total_tokens', cssVar('--c-bar-h'));
|
|
drawHorizontal($('modelChart'), summary.models);
|
|
|
|
$('updated').textContent = T.updatedAt(new Date().toLocaleTimeString());
|
|
}
|
|
|
|
// ── Load data ──────────────────────────────────────────────────────────────────
|
|
async function load(forceQuota = false) {
|
|
const range = $('range').value;
|
|
const [summary, quota, reqs] = await Promise.all([
|
|
getJSON('/api/summary?range=' + encodeURIComponent(range)),
|
|
getJSON('/api/quota' + (forceQuota ? '?force=1' : '')),
|
|
getJSON('/api/requests?limit=120'),
|
|
]);
|
|
lastSummary = summary;
|
|
lastQuota = quota;
|
|
lastReqs = reqs;
|
|
renderAll(summary, quota, reqs);
|
|
}
|
|
|
|
// ── Event listeners ────────────────────────────────────────────────────────
|
|
$('refresh').onclick = () => load(false);
|
|
|
|
// Quota button with 5-minute cooldown
|
|
let quotaCooldown = 0;
|
|
$('quota').onclick = () => {
|
|
const now = Date.now();
|
|
if (now < quotaCooldown) {
|
|
const remaining = Math.ceil((quotaCooldown - now) / 1000);
|
|
alert(`Please wait ${remaining} seconds before refreshing quota again.`);
|
|
return;
|
|
}
|
|
|
|
const btn = $('quota');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Refreshing...';
|
|
|
|
load(true).finally(() => {
|
|
quotaCooldown = Date.now() + 300000; // 5 minutes
|
|
|
|
// Re-enable after 5 minutes
|
|
setTimeout(() => {
|
|
btn.disabled = false;
|
|
applyLang(); // Restore button text
|
|
}, 300000);
|
|
|
|
// Show countdown
|
|
const updateCountdown = () => {
|
|
const remaining = Math.ceil((quotaCooldown - Date.now()) / 1000);
|
|
if (remaining > 0) {
|
|
btn.textContent = `Wait ${remaining}s`;
|
|
setTimeout(updateCountdown, 1000);
|
|
}
|
|
};
|
|
updateCountdown();
|
|
});
|
|
};
|
|
|
|
$('range').onchange = () => load(false);
|
|
|
|
// Redraw charts on window resize
|
|
window.addEventListener('resize', () => {
|
|
if (lastSummary) {
|
|
drawBars($('hourChart'), lastSummary.hours, 'hour', 'total_tokens', cssVar('--c-bar-h'));
|
|
drawHorizontal($('modelChart'), lastSummary.models);
|
|
}
|
|
});
|
|
|
|
// ── Boot ───────────────────────────────────────────────────────────────────────
|
|
applyTheme();
|
|
applyLang();
|
|
load(false);
|
|
setInterval(() => load(false), 30000);
|
|
</script>
|
|
</body>
|
|
</html>
|