diff --git a/db.py b/db.py index 9a96ca2..264bcfa 100644 --- a/db.py +++ b/db.py @@ -134,15 +134,23 @@ class TokenDatabase: } async def get_token_counts_for_model(self, model): - """Get token counts for a specific model.""" + """Get token counts for a specific model, aggregated across all endpoints.""" async with aiosqlite.connect(self.db_path) as db: async with db.execute('SELECT endpoint, model, input_tokens, output_tokens, total_tokens FROM token_counts WHERE model = ?', (model,)) as cursor: + total_input = 0 + total_output = 0 + total_tokens = 0 async for row in cursor: + total_input += row[2] + total_output += row[3] + total_tokens += row[4] + + if total_input > 0 or total_output > 0: return { - 'endpoint': row[0], - 'model': row[1], - 'input_tokens': row[2], - 'output_tokens': row[3], - 'total_tokens': row[4] + 'endpoint': 'aggregated', + 'model': model, + 'input_tokens': total_input, + 'output_tokens': total_output, + 'total_tokens': total_tokens } return None diff --git a/static/index.html b/static/index.html index 17e2ce0..50747c9 100644 --- a/static/index.html +++ b/static/index.html @@ -238,6 +238,23 @@ margin-top: 1rem; max-width: 400px; } + /* ---------- Stats Modal Layout ---------- */ + .stats-content-wrapper { + display: flex; + flex-direction: row; + gap: 20px; + } + .main-stats-content { + flex: 1; + } + .endpoint-distribution-container { + flex: 0 0 auto; + width: 400px; + position: relative; + } + .endpoint-distribution-container h3 { + margin-top: 0; + } @@ -602,9 +619,9 @@ function renderTimeSeriesChart(timeSeriesData, chart, minutes) { return `hsl(${h}, 80%, 30%)`; } function hashString(str) { - let hash = 0; + let hash = 42; for (let i = 0; i < str.length; i++) { - hash = (hash << 5) - hash + str.charCodeAt(i); + hash = ((hash << 5) + hash) + str.charCodeAt(i); hash |= 0; } return Math.abs(hash); @@ -782,23 +799,29 @@ function renderTimeSeriesChart(timeSeriesData, chart, minutes) { const data = await resp.json(); const content = document.getElementById("stats-content"); content.innerHTML = ` -

Token Usage

-

Input tokens: ${data.input_tokens}

-

Output tokens: ${data.output_tokens}

-

Total tokens: ${data.total_tokens}

-

Endpoint Distribution

-
- -
-

Usage Over Time

-
- - - - -
-
- +
+
+

Token Usage

+

Input tokens: ${data.input_tokens}

+

Output tokens: ${data.output_tokens}

+

Total tokens: ${data.total_tokens}

+

Usage Over Time

+
+ + + + +
+
+ +
+
+
+

Endpoint Distribution

+
+ +
+
`; document.getElementById("stats-modal").style.display = "flex";