andreas/llama-swap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tokens processed to ui models page

Browse Source
This commit is contained in:
Benson Wong
2025-08-08 11:05:36 -07:00
parent 74556c3a36
commit 7985e94ba4
1 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
ui/src/pages/Models.tsx
View File

@@ -133,35 +133,41 @@ function ModelsPanel() {
function StatsPanel() { function StatsPanel() {
const { metrics } = useAPI(); const { metrics } = useAPI();
const [totalRequests, totalTokens, avgTokensPerSecond] = useMemo(() => { const [totalRequests, totalInputTokens, totalOutputTokens, avgTokensPerSecond] = useMemo(() => {
const totalRequests = metrics.length; const totalRequests = metrics.length;
if (totalRequests === 0) { if (totalRequests === 0) {
return [0, 0, 0]; return [0, 0, 0];
} }
const totalTokens = metrics.reduce((sum, m) => sum + m.output_tokens, 0); const totalInputTokens = metrics.reduce((sum, m) => sum + m.input_tokens, 0);
const totalOutputTokens = metrics.reduce((sum, m) => sum + m.output_tokens, 0);
const avgTokensPerSecond = (metrics.reduce((sum, m) => sum + m.tokens_per_second, 0) / totalRequests).toFixed(2); const avgTokensPerSecond = (metrics.reduce((sum, m) => sum + m.tokens_per_second, 0) / totalRequests).toFixed(2);
return [totalRequests, totalTokens, avgTokensPerSecond]; return [totalRequests, totalInputTokens, totalOutputTokens, avgTokensPerSecond];
}, [metrics]); }, [metrics]);
return ( return (
<div className="card"> <div className="card">
<h2>Chat Activity</h2> <div className="rounded-lg overflow-hidden border border-gray-200">
<table className="w-full border border-gray-200"> <table className="w-full">
<tbody> <tbody>
<tr className="border-b border-gray-200"> <tr>
<td className="py-2 px-4 font-medium border-r border-gray-200">Requests</td> <th className="p-2 font-medium border-b border-gray-200 text-right">Requests</th>
<td className="py-2 px-4 text-right">{totalRequests}</td> <th className="p-2 font-medium border-l border-b border-gray-200 text-right">Processed</th>
</tr> <th className="p-2 font-medium border-l border-b border-gray-200 text-right">Generated</th>
<tr className="border-b border-gray-200"> <th className="p-2 font-medium border-l border-b border-gray-200 text-right">Tokens/Sec</th>
<td className="py-2 px-4 font-medium border-r border-gray-200">Total Tokens Generated</td> </tr>
<td className="py-2 px-4 text-right">{totalTokens}</td> <tr>
</tr> <td className="p-2 text-right border-r border-gray-200">{totalRequests}</td>
<tr> <td className="p-2 text-right border-r border-gray-200">
<td className="py-2 px-4 font-medium border-r border-gray-200">Average Tokens/Second</td> {new Intl.NumberFormat().format(totalInputTokens)}
<td className="py-2 px-4 text-right">{avgTokensPerSecond}</td> </td>
</tr> <td className="p-2 text-right border-r border-gray-200">
</tbody> {new Intl.NumberFormat().format(totalOutputTokens)}
</table> </td>
<td className="p-2 text-right">{avgTokensPerSecond}</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
); );
} }