feat: token analytics

This commit is contained in:
Tim Baek
2026-02-01 10:19:59 +04:00
parent 3da4323ef3
commit 679e56c494
5 changed files with 147 additions and 26 deletions

View File

@@ -1,3 +1,4 @@
import json
import time
import uuid
from typing import Any, Optional
@@ -279,11 +280,34 @@ class ChatMessageTable:
end_date: Optional[int] = None,
db: Optional[Session] = None,
) -> dict[str, dict]:
"""Aggregate token usage by model. Works with SQLite and PostgreSQL."""
"""Aggregate token usage by model using database-level aggregation."""
with get_db_context(db) as db:
from sqlalchemy import func, cast, Integer
dialect = db.bind.dialect.name
if dialect == "sqlite":
input_tokens = cast(
func.json_extract(ChatMessage.usage, "$.input_tokens"), Integer
)
output_tokens = cast(
func.json_extract(ChatMessage.usage, "$.output_tokens"), Integer
)
elif dialect == "postgresql":
input_tokens = cast(
ChatMessage.usage["input_tokens"].astext, Integer
)
output_tokens = cast(
ChatMessage.usage["output_tokens"].astext, Integer
)
else:
raise NotImplementedError(f"Unsupported dialect: {dialect}")
query = db.query(
ChatMessage.model_id,
ChatMessage.usage,
func.coalesce(func.sum(input_tokens), 0).label("input_tokens"),
func.coalesce(func.sum(output_tokens), 0).label("output_tokens"),
func.count(ChatMessage.id).label("message_count"),
).filter(
ChatMessage.role == "assistant",
ChatMessage.model_id.isnot(None),
@@ -295,27 +319,17 @@ class ChatMessageTable:
if end_date:
query = query.filter(ChatMessage.created_at <= end_date)
results = query.all()
results = query.group_by(ChatMessage.model_id).all()
# Aggregate in Python for cross-database compatibility
usage_by_model: dict[str, dict] = {}
for model_id, usage in results:
if model_id not in usage_by_model:
usage_by_model[model_id] = {
"input_tokens": 0,
"output_tokens": 0,
"message_count": 0,
}
usage_by_model[model_id]["input_tokens"] += usage.get("input_tokens") or 0
usage_by_model[model_id]["output_tokens"] += usage.get("output_tokens") or 0
usage_by_model[model_id]["message_count"] += 1
# Add total_tokens
for data in usage_by_model.values():
data["total_tokens"] = data["input_tokens"] + data["output_tokens"]
return usage_by_model
return {
row.model_id: {
"input_tokens": row.input_tokens,
"output_tokens": row.output_tokens,
"total_tokens": row.input_tokens + row.output_tokens,
"message_count": row.message_count,
}
for row in results
}
def get_message_count_by_user(
self,

View File

@@ -192,3 +192,46 @@ async def get_daily_stats(
for date, models in sorted(counts.items())
]
)
class TokenUsageEntry(BaseModel):
model_id: str
input_tokens: int
output_tokens: int
total_tokens: int
message_count: int
class TokenUsageResponse(BaseModel):
models: list[TokenUsageEntry]
total_input_tokens: int
total_output_tokens: int
total_tokens: int
@router.get("/tokens", response_model=TokenUsageResponse)
async def get_token_usage(
start_date: Optional[int] = Query(None),
end_date: Optional[int] = Query(None),
user=Depends(get_admin_user),
db: Session = Depends(get_session),
):
"""Get token usage aggregated by model."""
usage = ChatMessages.get_token_usage_by_model(
start_date=start_date, end_date=end_date, db=db
)
models = [
TokenUsageEntry(model_id=model_id, **data)
for model_id, data in sorted(usage.items(), key=lambda x: -x[1]["total_tokens"])
]
total_input = sum(m.input_tokens for m in models)
total_output = sum(m.output_tokens for m in models)
return TokenUsageResponse(
models=models,
total_input_tokens=total_input,
total_output_tokens=total_output,
total_tokens=total_input + total_output,
)

View File

@@ -193,3 +193,39 @@ export const getDailyStats = async (
return res;
};
export const getTokenUsage = async (
token: string = '',
startDate: number | null = null,
endDate: number | null = null
) => {
let error = null;
const searchParams = new URLSearchParams();
if (startDate) searchParams.append('start_date', startDate.toString());
if (endDate) searchParams.append('end_date', endDate.toString());
const res = await fetch(`${WEBUI_API_BASE_URL}/analytics/tokens?${searchParams.toString()}`, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err.detail;
console.error(err);
return null;
});
if (error) {
throw error;
}
return res;
};

View File

@@ -1,12 +1,13 @@
<script lang="ts">
import { onMount, getContext } from 'svelte';
import { models } from '$lib/stores';
import { getSummary, getModelAnalytics, getUserAnalytics, getDailyStats } from '$lib/apis/analytics';
import { getSummary, getModelAnalytics, getUserAnalytics, getDailyStats, getTokenUsage } from '$lib/apis/analytics';
import Spinner from '$lib/components/common/Spinner.svelte';
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import ChartLine from './ChartLine.svelte';
import { WEBUI_API_BASE_URL } from '$lib/constants';
import { formatNumber } from '$lib/utils';
const i18n = getContext('i18n');
@@ -37,6 +38,8 @@
let modelStats: Array<{ model_id: string; count: number; name?: string }> = [];
let userStats: Array<{ user_id: string; name?: string; email?: string; count: number }> = [];
let dailyStats: Array<{ date: string; models: Record<string, number> }> = [];
let tokenStats: Record<string, { input_tokens: number; output_tokens: number; total_tokens: number }> = {};
let totalTokens = { input: 0, output: 0, total: 0 };
let loading = true;
@@ -69,11 +72,12 @@
try {
const { start, end } = getDateRange(selectedPeriod);
const granularity = selectedPeriod === '24h' ? 'hourly' : 'daily';
const [summaryRes, modelsRes, usersRes, dailyRes] = await Promise.all([
const [summaryRes, modelsRes, usersRes, dailyRes, tokensRes] = await Promise.all([
getSummary(localStorage.token, start, end),
getModelAnalytics(localStorage.token, start, end),
getUserAnalytics(localStorage.token, start, end, 50),
getDailyStats(localStorage.token, start, end, granularity)
getDailyStats(localStorage.token, start, end, granularity),
getTokenUsage(localStorage.token, start, end)
]);
summary = summaryRes ?? summary;
@@ -86,6 +90,23 @@
userStats = usersRes?.users ?? [];
dailyStats = dailyRes?.data ?? [];
// Process token data
if (tokensRes) {
tokenStats = {};
for (const m of tokensRes.models) {
tokenStats[m.model_id] = {
input_tokens: m.input_tokens,
output_tokens: m.output_tokens,
total_tokens: m.total_tokens
};
}
totalTokens = {
input: tokensRes.total_input_tokens,
output: tokensRes.total_output_tokens,
total: tokensRes.total_tokens
};
}
} catch (err) {
console.error('Dashboard load failed:', err);
}
@@ -140,6 +161,7 @@
{#if !loading}
<div class="flex gap-3 text-xs text-gray-500 dark:text-gray-400 px-0.5 pb-2">
<span><span class="font-medium text-gray-900 dark:text-gray-300">{summary.total_messages.toLocaleString()}</span> {$i18n.t('messages')}</span>
<span><span class="font-medium text-gray-900 dark:text-gray-300">{formatNumber(totalTokens.total)}</span> {$i18n.t('tokens')}</span>
<span><span class="font-medium text-gray-900 dark:text-gray-300">{summary.total_chats.toLocaleString()}</span> {$i18n.t('chats')}</span>
<span><span class="font-medium text-gray-900 dark:text-gray-300">{summary.total_users}</span> {$i18n.t('users')}</span>
</div>
@@ -213,6 +235,7 @@
{/if}
</div>
</th>
<th scope="col" class="px-2.5 py-2 text-right">{$i18n.t('Tokens')}</th>
<th scope="col" class="px-2.5 py-2 text-right w-16">%</th>
</tr>
</thead>
@@ -231,13 +254,14 @@
</div>
</td>
<td class="px-3 py-1 text-right">{model.count.toLocaleString()}</td>
<td class="px-3 py-1 text-right">{formatNumber(tokenStats[model.model_id]?.total_tokens ?? 0)}</td>
<td class="px-3 py-1 text-right text-gray-400">
{totalModelMessages > 0 ? ((model.count / totalModelMessages) * 100).toFixed(1) : 0}%
</td>
</tr>
{/each}
{#if sortedModels.length === 0}
<tr><td colspan="4" class="px-3 py-2 text-center text-gray-400">{$i18n.t('No data')}</td></tr>
<tr><td colspan="5" class="px-3 py-2 text-center text-gray-400">{$i18n.t('No data')}</td></tr>
{/if}
</tbody>
</table>

View File

@@ -28,6 +28,10 @@ import hljs from 'highlight.js';
export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
export const formatNumber = (num: number): string => {
return new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 }).format(num);
};
function escapeRegExp(string: string): string {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}