fix: Token统计准确性修复 + 仪表盘增强

1. 修复eval_count只记最后一轮的bug:改为每轮累加
2. 新增prompt_eval_count(输入token)统计
3. 修复total_duration使用Ollama实际推理时间而非墙钟时间
4. 数据库messages表新增prompt_eval_count列(含兼容迁移)
5. 仪表盘显示输入/输出token分项统计
6. 柱状图堆叠显示输入(紫色)+输出(橙色)比例
7. 明细表格新增输入/输出/合计三列
This commit is contained in:
thzxx
2026-04-23 16:11:17 +08:00
parent e96b2a840e
commit 21b9a14824
8 changed files with 125 additions and 29 deletions
+28 -10
View File
@@ -52,6 +52,7 @@ interface RoundData {
round: number;
role: string;
eval_count: number;
prompt_eval_count: number;
total_duration: number;
timestamp: number;
model?: string;
@@ -61,12 +62,13 @@ function collectRoundData(messages: ChatMessage[]): RoundData[] {
const rounds: RoundData[] = [];
let roundNum = 0;
for (const msg of messages) {
if (msg.role === 'assistant' && (msg.eval_count || msg.total_duration)) {
if (msg.role === 'assistant' && (msg.eval_count || msg.prompt_eval_count || msg.total_duration)) {
roundNum++;
rounds.push({
round: roundNum,
role: msg.role,
eval_count: msg.eval_count || 0,
prompt_eval_count: msg.prompt_eval_count || 0,
total_duration: msg.total_duration || 0,
timestamp: msg.timestamp,
model: msg.model,
@@ -101,7 +103,9 @@ function renderDashboard(): void {
const aiMsgs = messages.filter(m => m.role === 'assistant');
const rounds = collectRoundData(messages);
const totalTokens = rounds.reduce((sum, r) => sum + r.eval_count, 0);
const totalOutputTokens = rounds.reduce((sum, r) => sum + r.eval_count, 0);
const totalInputTokens = rounds.reduce((sum, r) => sum + r.prompt_eval_count, 0);
const totalTokens = totalInputTokens + totalOutputTokens;
const totalDurationNs = rounds.reduce((sum, r) => sum + r.total_duration, 0);
const avgTokens = rounds.length > 0 ? Math.round(totalTokens / rounds.length) : 0;
@@ -112,6 +116,7 @@ function renderDashboard(): void {
<div class="td-stat-icon">🔥</div>
<div class="td-stat-value">${formatTokenCount(totalTokens)}</div>
<div class="td-stat-label">总 Token 消耗</div>
<div class="td-stat-detail">输入 ${formatTokenCount(totalInputTokens)} / 输出 ${formatTokenCount(totalOutputTokens)}</div>
</div>
<div class="td-stat-card">
<div class="td-stat-icon">💬</div>
@@ -135,15 +140,19 @@ function renderDashboard(): void {
if (rounds.length === 0) {
chartEl.innerHTML = '<div class="td-empty">暂无数据,发送消息后开始统计</div>';
} else {
const maxTokens = Math.max(...rounds.map(r => r.eval_count), 1);
const maxTokens = Math.max(...rounds.map(r => r.eval_count + r.prompt_eval_count), 1);
const barsHtml = rounds.map(r => {
const heightPct = Math.max((r.eval_count / maxTokens) * 100, 2);
const tooltip = `${r.round}轮 · ${formatTokenCount(r.eval_count)} tokens · ${formatDuration(r.total_duration)}`;
const total = r.eval_count + r.prompt_eval_count;
const heightPct = Math.max((total / maxTokens) * 100, 2);
const inputPct = total > 0 ? (r.prompt_eval_count / total) * 100 : 0;
const tooltip = `${r.round}轮 · 输入 ${formatTokenCount(r.prompt_eval_count)} + 输出 ${formatTokenCount(r.eval_count)} = ${formatTokenCount(total)} tokens · ${formatDuration(r.total_duration)}`;
return `
<div class="td-bar-col" title="${tooltip}">
<div class="td-bar-value">${formatTokenCount(r.eval_count)}</div>
<div class="td-bar-value">${formatTokenCount(total)}</div>
<div class="td-bar" style="height:${heightPct}%;">
<div class="td-bar-fill"></div>
<div class="td-bar-fill">
<div class="td-bar-input" style="height:${inputPct}%;"></div>
</div>
</div>
<div class="td-bar-label">R${r.round}</div>
</div>
@@ -151,6 +160,10 @@ function renderDashboard(): void {
}).join('');
chartEl.innerHTML = `
<div class="td-chart-legend">
<span class="td-legend-item"><span class="td-legend-dot td-legend-output"></span>输出 Token</span>
<span class="td-legend-item"><span class="td-legend-dot td-legend-input"></span>输入 Token</span>
</div>
<div class="td-chart-container">
<div class="td-chart-y-axis">
<span>${formatTokenCount(maxTokens)}</span>
@@ -165,18 +178,23 @@ function renderDashboard(): void {
// C. 明细表格
const tableEl = dashboardModalEl.querySelector('#tdTableBody')!;
if (rounds.length === 0) {
tableEl.innerHTML = '<tr><td colspan="5" class="td-empty-row">暂无数据</td></tr>';
tableEl.innerHTML = '<tr><td colspan="6" class="td-empty-row">暂无数据</td></tr>';
} else {
// 按时间倒序
const sorted = [...rounds].reverse();
tableEl.innerHTML = sorted.map(r => `
tableEl.innerHTML = sorted.map(r => {
const total = r.eval_count + r.prompt_eval_count;
return `
<tr>
<td>R${r.round}</td>
<td><span class="td-role-badge">🤖 AI</span>${r.model ? ` <span class="td-model-tag">${r.model}</span>` : ''}</td>
<td class="td-num">${formatTokenCount(r.prompt_eval_count)}</td>
<td class="td-num">${formatTokenCount(r.eval_count)}</td>
<td class="td-num td-num-total">${formatTokenCount(total)}</td>
<td class="td-num">${formatDuration(r.total_duration)}</td>
<td class="td-time">${r.timestamp ? formatTime(r.timestamp) : '-'}</td>
</tr>
`).join('');
`;
}).join('');
}
}