feat: Add AI usage monitoring dashboard
- Add AIUsageLog, AIUsageDaily, AIRateLimit models to database.py - Update gemini_service.py to log to new AIUsageLog table - Create /admin/ai-usage dashboard with stats and charts - Show daily/weekly/monthly requests, tokens, costs - Track usage by type (chat, news_evaluation, etc.) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
340e39515f
commit
bfe1cd897c
124
app.py
124
app.py
@ -5719,6 +5719,130 @@ def chat_analytics():
|
||||
db.close()
|
||||
|
||||
|
||||
@app.route('/admin/ai-usage')
|
||||
@login_required
|
||||
def admin_ai_usage():
|
||||
"""Admin dashboard for AI (Gemini) API usage monitoring"""
|
||||
if not current_user.is_admin:
|
||||
flash('Brak uprawnień do tej strony.', 'error')
|
||||
return redirect(url_for('dashboard'))
|
||||
|
||||
from database import AIUsageLog, AIUsageDaily
|
||||
from sqlalchemy import func, desc
|
||||
from datetime import timedelta
|
||||
|
||||
db = SessionLocal()
|
||||
try:
|
||||
now = datetime.now()
|
||||
today = now.date()
|
||||
week_ago = today - timedelta(days=7)
|
||||
month_ago = today - timedelta(days=30)
|
||||
day_ago = now - timedelta(hours=24)
|
||||
|
||||
# Today's stats
|
||||
today_stats = db.query(
|
||||
func.count(AIUsageLog.id).label('requests'),
|
||||
func.coalesce(func.sum(AIUsageLog.tokens_input), 0).label('tokens_input'),
|
||||
func.coalesce(func.sum(AIUsageLog.tokens_output), 0).label('tokens_output'),
|
||||
func.coalesce(func.sum(AIUsageLog.cost_cents), 0).label('cost_cents')
|
||||
).filter(
|
||||
func.date(AIUsageLog.created_at) == today
|
||||
).first()
|
||||
|
||||
# Week stats
|
||||
week_requests = db.query(func.count(AIUsageLog.id)).filter(
|
||||
func.date(AIUsageLog.created_at) >= week_ago
|
||||
).scalar() or 0
|
||||
|
||||
# Month stats
|
||||
month_stats = db.query(
|
||||
func.count(AIUsageLog.id).label('requests'),
|
||||
func.coalesce(func.sum(AIUsageLog.cost_cents), 0).label('cost_cents')
|
||||
).filter(
|
||||
func.date(AIUsageLog.created_at) >= month_ago
|
||||
).first()
|
||||
|
||||
# Error rate (last 24h)
|
||||
last_24h_total = db.query(func.count(AIUsageLog.id)).filter(
|
||||
AIUsageLog.created_at >= day_ago
|
||||
).scalar() or 0
|
||||
|
||||
last_24h_errors = db.query(func.count(AIUsageLog.id)).filter(
|
||||
AIUsageLog.created_at >= day_ago,
|
||||
AIUsageLog.success == False
|
||||
).scalar() or 0
|
||||
|
||||
error_rate = (last_24h_errors / last_24h_total * 100) if last_24h_total > 0 else 0
|
||||
|
||||
# Average response time (last 24h)
|
||||
avg_response_time = db.query(func.avg(AIUsageLog.response_time_ms)).filter(
|
||||
AIUsageLog.created_at >= day_ago,
|
||||
AIUsageLog.success == True
|
||||
).scalar() or 0
|
||||
|
||||
# Usage by type (last 30 days)
|
||||
type_stats = db.query(
|
||||
AIUsageLog.request_type,
|
||||
func.count(AIUsageLog.id).label('count')
|
||||
).filter(
|
||||
func.date(AIUsageLog.created_at) >= month_ago
|
||||
).group_by(AIUsageLog.request_type).order_by(desc('count')).all()
|
||||
|
||||
# Calculate percentages for type breakdown
|
||||
total_type_count = sum(t.count for t in type_stats) if type_stats else 0
|
||||
type_labels = {
|
||||
'chat': ('Chat AI', 'chat'),
|
||||
'news_evaluation': ('Ocena newsów', 'news'),
|
||||
'user_creation': ('Tworzenie user', 'user'),
|
||||
'image_analysis': ('Analiza obrazu', 'image'),
|
||||
'general': ('Ogólne', 'other')
|
||||
}
|
||||
usage_by_type = []
|
||||
for t in type_stats:
|
||||
label, css_class = type_labels.get(t.request_type, (t.request_type, 'other'))
|
||||
percentage = (t.count / total_type_count * 100) if total_type_count > 0 else 0
|
||||
usage_by_type.append({
|
||||
'type': t.request_type,
|
||||
'type_label': label,
|
||||
'type_class': css_class,
|
||||
'count': t.count,
|
||||
'percentage': round(percentage, 1)
|
||||
})
|
||||
|
||||
# Recent logs
|
||||
recent_logs = db.query(AIUsageLog).order_by(desc(AIUsageLog.created_at)).limit(20).all()
|
||||
for log in recent_logs:
|
||||
label, _ = type_labels.get(log.request_type, (log.request_type, 'other'))
|
||||
log.type_label = label
|
||||
|
||||
# Daily history (last 14 days)
|
||||
daily_history = db.query(AIUsageDaily).filter(
|
||||
AIUsageDaily.date >= today - timedelta(days=14)
|
||||
).order_by(desc(AIUsageDaily.date)).all()
|
||||
|
||||
stats = {
|
||||
'today_requests': today_stats.requests or 0,
|
||||
'today_tokens_input': int(today_stats.tokens_input) or 0,
|
||||
'today_tokens_output': int(today_stats.tokens_output) or 0,
|
||||
'today_cost': float(today_stats.cost_cents or 0) / 100,
|
||||
'week_requests': week_requests,
|
||||
'month_requests': month_stats.requests or 0,
|
||||
'month_cost': float(month_stats.cost_cents or 0) / 100,
|
||||
'error_rate': error_rate,
|
||||
'avg_response_time': int(avg_response_time)
|
||||
}
|
||||
|
||||
return render_template(
|
||||
'admin/ai_usage_dashboard.html',
|
||||
stats=stats,
|
||||
usage_by_type=usage_by_type,
|
||||
recent_logs=recent_logs,
|
||||
daily_history=daily_history
|
||||
)
|
||||
finally:
|
||||
db.close()
|
||||
|
||||
|
||||
@app.route('/api/admin/chat-stats')
|
||||
@login_required
|
||||
def api_chat_stats():
|
||||
|
||||
115
database.py
115
database.py
@ -16,10 +16,11 @@ Models:
|
||||
- GBPAudit: Google Business Profile audit results
|
||||
- ITAudit: IT infrastructure audit results
|
||||
- ITCollaborationMatch: IT collaboration matches between companies
|
||||
- AIUsageLog, AIUsageDaily, AIRateLimit: AI API usage monitoring
|
||||
|
||||
Author: Norda Biznes Development Team
|
||||
Created: 2025-11-23
|
||||
Updated: 2026-01-09 (IT Audit Tool, IT Collaboration Matching)
|
||||
Updated: 2026-01-11 (AI Usage Tracking)
|
||||
"""
|
||||
|
||||
import os
|
||||
@ -1941,6 +1942,118 @@ class ZOPKNewsFetchJob(Base):
|
||||
user = relationship('User', foreign_keys=[triggered_by_user])
|
||||
|
||||
|
||||
# ============================================================
|
||||
# AI USAGE TRACKING MODELS
|
||||
# ============================================================
|
||||
|
||||
class AIUsageLog(Base):
|
||||
"""
|
||||
Individual AI API call logs.
|
||||
Tracks tokens, costs, and performance for each Gemini API request.
|
||||
"""
|
||||
__tablename__ = 'ai_usage_logs'
|
||||
|
||||
id = Column(Integer, primary_key=True)
|
||||
|
||||
# Request info
|
||||
request_type = Column(String(50), nullable=False) # chat, news_evaluation, user_creation, image_analysis
|
||||
model = Column(String(100), nullable=False) # gemini-2.0-flash, gemini-1.5-pro, etc.
|
||||
|
||||
# Token counts
|
||||
tokens_input = Column(Integer, default=0)
|
||||
tokens_output = Column(Integer, default=0)
|
||||
# Note: tokens_total is a generated column in PostgreSQL
|
||||
|
||||
# Cost (in USD cents for precision)
|
||||
cost_cents = Column(Numeric(10, 4), default=0)
|
||||
|
||||
# Context
|
||||
user_id = Column(Integer, ForeignKey('users.id'))
|
||||
company_id = Column(Integer, ForeignKey('companies.id'))
|
||||
related_entity_type = Column(String(50)) # zopk_news, chat_message, company, etc.
|
||||
related_entity_id = Column(Integer)
|
||||
|
||||
# Request details
|
||||
prompt_length = Column(Integer)
|
||||
response_length = Column(Integer)
|
||||
response_time_ms = Column(Integer) # How long the API call took
|
||||
|
||||
# Status
|
||||
success = Column(Boolean, default=True)
|
||||
error_message = Column(Text)
|
||||
|
||||
# Timestamps
|
||||
created_at = Column(DateTime, default=datetime.now)
|
||||
|
||||
# Relationships
|
||||
user = relationship('User', foreign_keys=[user_id])
|
||||
company = relationship('Company', foreign_keys=[company_id])
|
||||
|
||||
|
||||
class AIUsageDaily(Base):
|
||||
"""
|
||||
Pre-aggregated daily AI usage statistics.
|
||||
Auto-updated by PostgreSQL trigger on ai_usage_logs insert.
|
||||
"""
|
||||
__tablename__ = 'ai_usage_daily'
|
||||
|
||||
id = Column(Integer, primary_key=True)
|
||||
date = Column(Date, unique=True, nullable=False)
|
||||
|
||||
# Request counts by type
|
||||
chat_requests = Column(Integer, default=0)
|
||||
news_evaluation_requests = Column(Integer, default=0)
|
||||
user_creation_requests = Column(Integer, default=0)
|
||||
image_analysis_requests = Column(Integer, default=0)
|
||||
other_requests = Column(Integer, default=0)
|
||||
total_requests = Column(Integer, default=0)
|
||||
|
||||
# Token totals
|
||||
total_tokens_input = Column(Integer, default=0)
|
||||
total_tokens_output = Column(Integer, default=0)
|
||||
total_tokens = Column(Integer, default=0)
|
||||
|
||||
# Cost (in USD cents)
|
||||
total_cost_cents = Column(Numeric(10, 4), default=0)
|
||||
|
||||
# Performance
|
||||
avg_response_time_ms = Column(Integer)
|
||||
error_count = Column(Integer, default=0)
|
||||
|
||||
# Timestamps
|
||||
created_at = Column(DateTime, default=datetime.now)
|
||||
updated_at = Column(DateTime, default=datetime.now, onupdate=datetime.now)
|
||||
|
||||
|
||||
class AIRateLimit(Base):
|
||||
"""
|
||||
Rate limit tracking for AI API quota management.
|
||||
"""
|
||||
__tablename__ = 'ai_rate_limits'
|
||||
|
||||
id = Column(Integer, primary_key=True)
|
||||
|
||||
# Limit type
|
||||
limit_type = Column(String(50), nullable=False) # daily, hourly, per_minute
|
||||
limit_scope = Column(String(50), nullable=False) # global, user, ip
|
||||
scope_identifier = Column(String(255)) # user_id, ip address, or NULL for global
|
||||
|
||||
# Limits
|
||||
max_requests = Column(Integer, nullable=False)
|
||||
current_requests = Column(Integer, default=0)
|
||||
|
||||
# Reset
|
||||
reset_at = Column(DateTime, nullable=False)
|
||||
|
||||
# Timestamps
|
||||
created_at = Column(DateTime, default=datetime.now)
|
||||
updated_at = Column(DateTime, default=datetime.now, onupdate=datetime.now)
|
||||
|
||||
__table_args__ = (
|
||||
UniqueConstraint('limit_type', 'limit_scope', 'scope_identifier', name='uq_rate_limit'),
|
||||
)
|
||||
|
||||
|
||||
# ============================================================
|
||||
# DATABASE INITIALIZATION
|
||||
# ============================================================
|
||||
|
||||
@ -28,7 +28,7 @@ logger = logging.getLogger(__name__)
|
||||
|
||||
# Database imports for cost tracking
|
||||
try:
|
||||
from database import SessionLocal, AIAPICostLog
|
||||
from database import SessionLocal, AIAPICostLog, AIUsageLog
|
||||
DB_AVAILABLE = True
|
||||
except ImportError:
|
||||
logger.warning("Database not available - cost tracking disabled")
|
||||
@ -101,7 +101,10 @@ class GeminiService:
|
||||
max_tokens: Optional[int] = None,
|
||||
stream: bool = False,
|
||||
feature: str = 'general',
|
||||
user_id: Optional[int] = None
|
||||
user_id: Optional[int] = None,
|
||||
company_id: Optional[int] = None,
|
||||
related_entity_type: Optional[str] = None,
|
||||
related_entity_id: Optional[int] = None
|
||||
) -> str:
|
||||
"""
|
||||
Generate text using Gemini API with automatic cost tracking.
|
||||
@ -111,10 +114,11 @@ class GeminiService:
|
||||
temperature: Sampling temperature (0.0-1.0). Higher = more creative
|
||||
max_tokens: Maximum tokens to generate (None = model default)
|
||||
stream: Whether to stream the response
|
||||
feature: Feature name for cost tracking ('ai_coach', 'ai_nutrition', etc.)
|
||||
feature: Feature name for cost tracking ('chat', 'news_evaluation', etc.)
|
||||
user_id: Optional user ID for cost tracking
|
||||
user_id: Optional rider ID for cost tracking
|
||||
event_id: Optional event ID for cost tracking
|
||||
company_id: Optional company ID for context
|
||||
related_entity_type: Entity type ('zopk_news', 'chat_message', etc.)
|
||||
related_entity_id: Entity ID for reference
|
||||
|
||||
Returns:
|
||||
Generated text response
|
||||
@ -191,7 +195,10 @@ class GeminiService:
|
||||
latency_ms=latency_ms,
|
||||
success=True,
|
||||
feature=feature,
|
||||
user_id=user_id
|
||||
user_id=user_id,
|
||||
company_id=company_id,
|
||||
related_entity_type=related_entity_type,
|
||||
related_entity_id=related_entity_id
|
||||
)
|
||||
|
||||
return response_text
|
||||
@ -209,7 +216,10 @@ class GeminiService:
|
||||
success=False,
|
||||
error_message=str(e),
|
||||
feature=feature,
|
||||
user_id=user_id
|
||||
user_id=user_id,
|
||||
company_id=company_id,
|
||||
related_entity_type=related_entity_type,
|
||||
related_entity_id=related_entity_id
|
||||
)
|
||||
|
||||
logger.error(f"Gemini API error: {str(e)}")
|
||||
@ -302,7 +312,10 @@ class GeminiService:
|
||||
success: bool = True,
|
||||
error_message: Optional[str] = None,
|
||||
feature: str = 'general',
|
||||
user_id: Optional[int] = None
|
||||
user_id: Optional[int] = None,
|
||||
company_id: Optional[int] = None,
|
||||
related_entity_type: Optional[str] = None,
|
||||
related_entity_id: Optional[int] = None
|
||||
):
|
||||
"""
|
||||
Log API call costs to database for monitoring
|
||||
@ -315,10 +328,11 @@ class GeminiService:
|
||||
latency_ms: Response time in milliseconds
|
||||
success: Whether API call succeeded
|
||||
error_message: Error details if failed
|
||||
feature: Feature name ('ai_coach', 'ai_nutrition', 'test', etc.)
|
||||
feature: Feature name ('chat', 'news_evaluation', 'user_creation', etc.)
|
||||
user_id: Optional user ID
|
||||
user_id: Optional rider ID
|
||||
event_id: Optional event ID
|
||||
company_id: Optional company ID for context
|
||||
related_entity_type: Entity type ('zopk_news', 'chat_message', etc.)
|
||||
related_entity_id: Entity ID for reference
|
||||
"""
|
||||
if not DB_AVAILABLE:
|
||||
return
|
||||
@ -330,13 +344,17 @@ class GeminiService:
|
||||
output_cost = (output_tokens / 1_000_000) * pricing['output']
|
||||
total_cost = input_cost + output_cost
|
||||
|
||||
# Cost in cents for AIUsageLog (more precise)
|
||||
cost_cents = total_cost * 100
|
||||
|
||||
# Create prompt hash (for debugging, not storing full prompt for privacy)
|
||||
prompt_hash = hashlib.sha256(prompt.encode()).hexdigest()
|
||||
|
||||
# Save to database
|
||||
db = SessionLocal()
|
||||
try:
|
||||
log_entry = AIAPICostLog(
|
||||
# Log to legacy AIAPICostLog table
|
||||
legacy_log = AIAPICostLog(
|
||||
timestamp=datetime.now(),
|
||||
api_provider='gemini',
|
||||
model_name=self.model_name,
|
||||
@ -353,7 +371,27 @@ class GeminiService:
|
||||
latency_ms=latency_ms,
|
||||
prompt_hash=prompt_hash
|
||||
)
|
||||
db.add(log_entry)
|
||||
db.add(legacy_log)
|
||||
|
||||
# Log to new AIUsageLog table (with automatic daily aggregation via trigger)
|
||||
usage_log = AIUsageLog(
|
||||
request_type=feature,
|
||||
model=self.model_name,
|
||||
tokens_input=input_tokens,
|
||||
tokens_output=output_tokens,
|
||||
cost_cents=cost_cents,
|
||||
user_id=user_id,
|
||||
company_id=company_id,
|
||||
related_entity_type=related_entity_type,
|
||||
related_entity_id=related_entity_id,
|
||||
prompt_length=len(prompt),
|
||||
response_length=len(response_text),
|
||||
response_time_ms=latency_ms,
|
||||
success=success,
|
||||
error_message=error_message
|
||||
)
|
||||
db.add(usage_log)
|
||||
|
||||
db.commit()
|
||||
|
||||
logger.info(
|
||||
|
||||
432
templates/admin/ai_usage_dashboard.html
Normal file
432
templates/admin/ai_usage_dashboard.html
Normal file
@ -0,0 +1,432 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Monitoring AI - Panel Admina{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--surface);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-card.highlight {
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.stat-card.warning {
|
||||
border-left: 4px solid var(--warning);
|
||||
}
|
||||
|
||||
.stat-card.success {
|
||||
border-left: 4px solid var(--success);
|
||||
}
|
||||
|
||||
.stat-card.error {
|
||||
border-left: 4px solid var(--error);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stat-value.primary { color: var(--primary); }
|
||||
.stat-value.success { color: var(--success); }
|
||||
.stat-value.warning { color: var(--warning); }
|
||||
.stat-value.error { color: var(--error); }
|
||||
|
||||
.stat-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.stat-sublabel {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: var(--surface);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
color: var(--text-primary);
|
||||
border-bottom: 2px solid var(--border);
|
||||
padding-bottom: var(--spacing-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.section h2 .icon {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
/* Usage breakdown bars */
|
||||
.usage-breakdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.usage-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.usage-label {
|
||||
width: 150px;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.usage-bar-container {
|
||||
flex: 1;
|
||||
height: 24px;
|
||||
background: var(--background);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.usage-bar {
|
||||
height: 100%;
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: var(--spacing-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
min-width: 40px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.usage-bar.chat { background: #3b82f6; }
|
||||
.usage-bar.news { background: #10b981; }
|
||||
.usage-bar.user { background: #f59e0b; }
|
||||
.usage-bar.image { background: #8b5cf6; }
|
||||
.usage-bar.other { background: #6b7280; }
|
||||
|
||||
.usage-count {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
/* Daily history table */
|
||||
.daily-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.daily-table th,
|
||||
.daily-table td {
|
||||
padding: var(--spacing-md);
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.daily-table th {
|
||||
background: var(--background);
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.daily-table tr:hover {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.cost-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.cost-badge.medium {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.cost-badge.high {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* Recent logs */
|
||||
.log-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.log-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.log-type {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.log-type.chat { background: #dbeafe; color: #1d4ed8; }
|
||||
.log-type.news_evaluation { background: #d1fae5; color: #065f46; }
|
||||
.log-type.user_creation { background: #fef3c7; color: #92400e; }
|
||||
.log-type.image_analysis { background: #ede9fe; color: #5b21b6; }
|
||||
.log-type.other { background: #f3f4f6; color: #374151; }
|
||||
|
||||
.log-meta {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.log-tokens {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.log-error {
|
||||
color: var(--error);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* No data state */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-2xl);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state .icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Two column layout for sections */
|
||||
.sections-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sections-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.usage-label {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Monitoring AI</h1>
|
||||
<p class="text-muted">Statystyki wykorzystania Gemini API</p>
|
||||
</div>
|
||||
<a href="{{ url_for('admin_dashboard') }}" class="btn btn-secondary">Powrót</a>
|
||||
</div>
|
||||
|
||||
<!-- Main Stats -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card highlight">
|
||||
<div class="stat-value primary">{{ stats.today_requests }}</div>
|
||||
<div class="stat-label">Dzisiaj</div>
|
||||
<div class="stat-sublabel">zapytań do AI</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ stats.week_requests }}</div>
|
||||
<div class="stat-label">Ten tydzień</div>
|
||||
<div class="stat-sublabel">zapytań</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ stats.month_requests }}</div>
|
||||
<div class="stat-label">Ten miesiąc</div>
|
||||
<div class="stat-sublabel">zapytań</div>
|
||||
</div>
|
||||
<div class="stat-card success">
|
||||
<div class="stat-value success">${{ "%.4f"|format(stats.today_cost) }}</div>
|
||||
<div class="stat-label">Koszt dziś</div>
|
||||
<div class="stat-sublabel">USD</div>
|
||||
</div>
|
||||
<div class="stat-card warning">
|
||||
<div class="stat-value warning">${{ "%.4f"|format(stats.month_cost) }}</div>
|
||||
<div class="stat-label">Koszt miesiąc</div>
|
||||
<div class="stat-sublabel">USD</div>
|
||||
</div>
|
||||
<div class="stat-card {% if stats.error_rate > 10 %}error{% elif stats.error_rate > 5 %}warning{% else %}success{% endif %}">
|
||||
<div class="stat-value {% if stats.error_rate > 10 %}error{% elif stats.error_rate > 5 %}warning{% else %}success{% endif %}">{{ "%.1f"|format(stats.error_rate) }}%</div>
|
||||
<div class="stat-label">Błędy</div>
|
||||
<div class="stat-sublabel">ostatnie 24h</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Token Stats -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ "{:,}".format(stats.today_tokens_input) }}</div>
|
||||
<div class="stat-label">Tokeny input</div>
|
||||
<div class="stat-sublabel">dzisiaj</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ "{:,}".format(stats.today_tokens_output) }}</div>
|
||||
<div class="stat-label">Tokeny output</div>
|
||||
<div class="stat-sublabel">dzisiaj</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ stats.avg_response_time }}ms</div>
|
||||
<div class="stat-label">Avg czas odpowiedzi</div>
|
||||
<div class="stat-sublabel">ostatnie 24h</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sections-grid">
|
||||
<!-- Usage by Type -->
|
||||
<div class="section">
|
||||
<h2><span class="icon">📊</span> Wykorzystanie wg typu</h2>
|
||||
{% if usage_by_type %}
|
||||
<div class="usage-breakdown">
|
||||
{% for item in usage_by_type %}
|
||||
<div class="usage-row">
|
||||
<div class="usage-label">{{ item.type_label }}</div>
|
||||
<div class="usage-bar-container">
|
||||
<div class="usage-bar {{ item.type_class }}" style="width: {{ item.percentage }}%">
|
||||
{{ item.percentage }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-count">{{ item.count }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="icon">📭</div>
|
||||
<p>Brak danych</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Recent Logs -->
|
||||
<div class="section">
|
||||
<h2><span class="icon">📜</span> Ostatnie zapytania</h2>
|
||||
{% if recent_logs %}
|
||||
<ul class="log-list">
|
||||
{% for log in recent_logs %}
|
||||
<li class="log-item">
|
||||
<div>
|
||||
<span class="log-type {{ log.request_type }}">{{ log.type_label }}</span>
|
||||
{% if not log.success %}
|
||||
<div class="log-error">{{ log.error_message[:50] }}...</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="log-meta">
|
||||
<span class="log-tokens">{{ log.tokens_input }}+{{ log.tokens_output }}</span>
|
||||
<span class="log-time">{{ log.created_at.strftime('%H:%M:%S') }}</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<p>Brak ostatnich zapytań</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Daily History -->
|
||||
<div class="section">
|
||||
<h2><span class="icon">📅</span> Historia dzienna (ostatnie 14 dni)</h2>
|
||||
{% if daily_history %}
|
||||
<table class="daily-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Data</th>
|
||||
<th>Zapytania</th>
|
||||
<th>Chat</th>
|
||||
<th>News</th>
|
||||
<th>Tokeny</th>
|
||||
<th>Koszt</th>
|
||||
<th>Błędy</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for day in daily_history %}
|
||||
<tr>
|
||||
<td>{{ day.date.strftime('%d.%m.%Y') }}</td>
|
||||
<td><strong>{{ day.total_requests }}</strong></td>
|
||||
<td>{{ day.chat_requests }}</td>
|
||||
<td>{{ day.news_evaluation_requests }}</td>
|
||||
<td>{{ "{:,}".format(day.total_tokens) }}</td>
|
||||
<td>
|
||||
<span class="cost-badge {% if day.total_cost_cents > 10 %}high{% elif day.total_cost_cents > 1 %}medium{% endif %}">
|
||||
${{ "%.4f"|format(day.total_cost_cents / 100) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{% if day.error_count > 0 %}<span style="color: var(--error)">{{ day.error_count }}</span>{% else %}-{% endif %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="icon">📭</div>
|
||||
<p>Brak historii - dane pojawią się po pierwszym użyciu AI</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user