492 lines
17 KiB
HTML
492 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Performance Stats</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: transparent;
|
|
color: #e0e0e0;
|
|
padding: 15px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.error {
|
|
background: rgba(245, 101, 101, 0.1);
|
|
border: 1px solid rgba(245, 101, 101, 0.4);
|
|
color: #f56565;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-panel {
|
|
background: rgba(40, 40, 40, 0.95);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.panel-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.panel-subtitle {
|
|
font-size: 11px;
|
|
color: #a0a0a0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.metrics-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.metric-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 13px;
|
|
color: #b0b0b0;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.metric-value.excellent {
|
|
color: #48bb78;
|
|
}
|
|
|
|
.metric-value.good {
|
|
color: #68d391;
|
|
}
|
|
|
|
.metric-value.warning {
|
|
color: #ed8936;
|
|
}
|
|
|
|
.metric-value.critical {
|
|
color: #f56565;
|
|
}
|
|
|
|
.metric-value.neutral {
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
.tools-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tool-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
padding: 4px 8px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.tool-name {
|
|
color: #d0d0d0;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.tool-stats {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.tool-calls {
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
.tool-success-rate {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bottom-links {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.link-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 14px;
|
|
background: rgba(66, 153, 225, 0.15);
|
|
color: #4299e1;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.link-btn:hover {
|
|
background: rgba(66, 153, 225, 0.25);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 30px;
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-top-color: #fff;
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.badge.success {
|
|
background: rgba(72, 187, 120, 0.2);
|
|
color: #48bb78;
|
|
}
|
|
|
|
.badge.error {
|
|
background: rgba(245, 101, 101, 0.2);
|
|
color: #f56565;
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div id="error-container"></div>
|
|
<div id="stats-container" class="loading">
|
|
<div class="spinner"></div>Loading AI performance metrics...
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Use relative URL to work in any context
|
|
const API_BASE = '';
|
|
|
|
let metricsData = null;
|
|
|
|
function formatDuration(ms) {
|
|
if (ms < 1000) return `${Math.round(ms)}ms`;
|
|
if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
|
|
return `${(ms / 60000).toFixed(1)}m`;
|
|
}
|
|
|
|
function formatUptime(seconds) {
|
|
if (seconds < 60) return `${seconds}s`;
|
|
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
return `${hours}h ${minutes}m`;
|
|
}
|
|
|
|
function getResponseTimeClass(ms) {
|
|
if (ms < 1000) return 'excellent';
|
|
if (ms < 3000) return 'good';
|
|
if (ms < 10000) return 'warning';
|
|
return 'critical';
|
|
}
|
|
|
|
function getSuccessRateClass(rate) {
|
|
if (rate >= 0.99) return 'excellent';
|
|
if (rate >= 0.95) return 'good';
|
|
if (rate >= 0.90) return 'warning';
|
|
return 'critical';
|
|
}
|
|
|
|
function getHitRateClass(rate) {
|
|
if (rate >= 0.85) return 'excellent';
|
|
if (rate >= 0.70) return 'good';
|
|
if (rate >= 0.50) return 'warning';
|
|
return 'critical';
|
|
}
|
|
|
|
async function fetchMetrics() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/ai/metrics`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
metricsData = await response.json();
|
|
renderMetrics();
|
|
document.getElementById('error-container').innerHTML = '';
|
|
|
|
} catch (error) {
|
|
console.error('Error fetching AI metrics:', error);
|
|
document.getElementById('error-container').innerHTML =
|
|
`<div class="error">❌ Core-AI service unavailable: ${error.message}</div>`;
|
|
document.getElementById('stats-container').innerHTML =
|
|
'<div class="loading">Waiting for Core-AI service...</div>';
|
|
}
|
|
}
|
|
|
|
function renderMetrics() {
|
|
if (!metricsData) return;
|
|
|
|
const agent = metricsData.agent || {};
|
|
const tools = metricsData.tools || {};
|
|
const memory = metricsData.memory || {};
|
|
const users = metricsData.users || {};
|
|
const concurrency = metricsData.concurrency || {};
|
|
|
|
const html = `
|
|
<div class="stats-grid">
|
|
<!-- Agent Performance Panel -->
|
|
<div class="stat-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">🤖</span>
|
|
<span class="panel-title">Agent Performance</span>
|
|
<span class="panel-subtitle">${agent.total_requests || 0} requests</span>
|
|
</div>
|
|
<div class="metrics-list">
|
|
<div class="metric-row">
|
|
<span class="metric-label">Avg Response</span>
|
|
<span class="metric-value ${getResponseTimeClass(agent.avg_response_time_ms)}">
|
|
${formatDuration(agent.avg_response_time_ms || 0)}
|
|
</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">P95 Latency</span>
|
|
<span class="metric-value ${getResponseTimeClass(agent.p95_response_time_ms)}">
|
|
${formatDuration(agent.p95_response_time_ms || 0)}
|
|
</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Requests/min</span>
|
|
<span class="metric-value neutral">${(agent.requests_per_minute || 0).toFixed(1)}</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Errors</span>
|
|
<span class="metric-value ${agent.errors_total > 0 ? 'warning' : 'excellent'}">
|
|
${agent.errors_total || 0}
|
|
</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Concurrent</span>
|
|
<span class="metric-value neutral">
|
|
${concurrency.current || 0} / ${concurrency.max || 0} max
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tool Execution Panel -->
|
|
<div class="stat-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">🔧</span>
|
|
<span class="panel-title">Tool Execution</span>
|
|
<span class="panel-subtitle">${tools.total_calls || 0} calls</span>
|
|
</div>
|
|
<div class="metrics-list">
|
|
<div class="metric-row">
|
|
<span class="metric-label">Success Rate</span>
|
|
<span class="metric-value ${getSuccessRateClass(tools.success_rate || 0)}">
|
|
${((tools.success_rate || 0) * 100).toFixed(1)}%
|
|
</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Unique Tools</span>
|
|
<span class="metric-value neutral">${tools.total_unique_tools || 0}</span>
|
|
</div>
|
|
</div>
|
|
${renderTopTools(tools.top_tools || {})}
|
|
</div>
|
|
|
|
<!-- Memory System Panel -->
|
|
<div class="stat-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">💾</span>
|
|
<span class="panel-title">Memory System</span>
|
|
<span class="panel-subtitle">Tier 1 Cache</span>
|
|
</div>
|
|
<div class="metrics-list">
|
|
<div class="metric-row">
|
|
<span class="metric-label">Hit Rate</span>
|
|
<span class="metric-value ${getHitRateClass(memory.tier1_hit_rate || 0)}">
|
|
${((memory.tier1_hit_rate || 0) * 100).toFixed(1)}%
|
|
</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Cache Hits</span>
|
|
<span class="metric-value neutral">${memory.tier1_hits || 0}</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Tier 2 Queries</span>
|
|
<span class="metric-value neutral">${memory.tier2_queries || 0}</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Consolidations</span>
|
|
<span class="metric-value neutral">${memory.total_consolidations || 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Health Panel -->
|
|
<div class="stat-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">📊</span>
|
|
<span class="panel-title">System Health</span>
|
|
<span class="panel-subtitle">Live Status</span>
|
|
</div>
|
|
<div class="metrics-list">
|
|
<div class="metric-row">
|
|
<span class="metric-label">Service Uptime</span>
|
|
<span class="metric-value excellent">${formatUptime(metricsData.uptime_seconds || 0)}</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Active Users</span>
|
|
<span class="metric-value neutral">${users.total_active || 0}</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Streaming</span>
|
|
<span class="metric-value neutral">${agent.streaming_requests || 0}</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Non-Streaming</span>
|
|
<span class="metric-value neutral">${agent.non_streaming_requests || 0}</span>
|
|
</div>
|
|
${renderAgentStatus()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom-links">
|
|
<a href="${API_BASE}/ai/metrics" target="_blank" class="link-btn">
|
|
📄 Full Metrics JSON
|
|
</a>
|
|
<a href="${API_BASE}/ai/health" target="_blank" class="link-btn">
|
|
🏥 Health Check
|
|
</a>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('stats-container').innerHTML = html;
|
|
}
|
|
|
|
function renderTopTools(topTools) {
|
|
if (!topTools || Object.keys(topTools).length === 0) {
|
|
return '<div class="metric-row"><span class="metric-label">No tool calls yet</span></div>';
|
|
}
|
|
|
|
const toolsArray = Object.entries(topTools).slice(0, 5);
|
|
const toolsHtml = toolsArray.map(([name, stats]) => {
|
|
const successRate = stats.success_rate || 0;
|
|
const successClass = getSuccessRateClass(successRate);
|
|
|
|
return `
|
|
<div class="tool-row">
|
|
<span class="tool-name">${name}</span>
|
|
<div class="tool-stats">
|
|
<span class="tool-calls">${stats.calls} calls</span>
|
|
<span class="tool-success-rate ${successClass}">
|
|
${(successRate * 100).toFixed(0)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
return `
|
|
<div style="margin-top: 8px;">
|
|
<div class="metric-label" style="margin-bottom: 6px;">Top 5 Tools:</div>
|
|
<div class="tools-list">${toolsHtml}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderAgentStatus() {
|
|
const agent = metricsData.agent || {};
|
|
const hasActivity = (agent.total_requests || 0) > 0;
|
|
|
|
return `
|
|
<div class="metric-row">
|
|
<span class="metric-label">Agent Status</span>
|
|
<span class="badge ${hasActivity ? 'success' : 'neutral'}">
|
|
${hasActivity ? '✓ Active' : 'Idle'}
|
|
</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Initial fetch
|
|
fetchMetrics();
|
|
|
|
// Auto-refresh every 10 seconds
|
|
setInterval(fetchMetrics, 10000);
|
|
</script>
|
|
</body>
|
|
</html>
|