📈 실시간 성능 차트
@@ -1291,6 +1322,203 @@ HTML_TEMPLATE = """
performanceChart.update();
gpuChart.update();
}
+
+ // 로그 새로고침 함수
+ function refreshLogs() {
+ fetch('/api/logs?lines=50')
+ .then(response => response.json())
+ .then(data => {
+ const container = document.getElementById('logs-container');
+ if (data.logs && data.logs.length > 0) {
+ let logHtml = '';
+ data.logs.forEach(log => {
+ if (log.raw) {
+ logHtml += `
${escapeHtml(log.raw)}
`;
+ } else {
+ const levelColor = getLevelColor(log.level);
+ logHtml += `
+ ${log.timestamp}
+ [${log.level}]
+ ${log.module}:
+ ${escapeHtml(log.message)}
+
`;
+ }
+ });
+ container.innerHTML = logHtml;
+ container.scrollTop = container.scrollHeight; // 스크롤을 맨 아래로
+ } else {
+ container.innerHTML = '
로그가 없습니다.
';
+ }
+ })
+ .catch(error => {
+ console.error('로그 로딩 실패:', error);
+ document.getElementById('logs-container').innerHTML = '
로그 로딩 실패
';
+ });
+ }
+
+ // 성능 통계 새로고침 함수
+ function refreshPerformanceStats() {
+ fetch('/api/performance-stats')
+ .then(response => response.json())
+ .then(data => {
+ const container = document.getElementById('performance-stats-container');
+ if (data.stats && Object.keys(data.stats).length > 0) {
+ let statsHtml = '
';
+
+ Object.entries(data.stats).forEach(([modelName, stats]) => {
+ statsHtml += `
+
${modelName}
+
+ 평균 로딩 시간:
+ ${stats.avg_ms.toFixed(1)}ms
+
+
+ 최소/최대:
+ ${stats.min_ms.toFixed(1)}ms / ${stats.max_ms.toFixed(1)}ms
+
+
+ 총 로딩 횟수:
+ ${stats.count}회
+
+
`;
+ });
+
+ statsHtml += '
';
+ container.innerHTML = statsHtml;
+ } else {
+ container.innerHTML = '
성능 데이터가 없습니다.
';
+ }
+ })
+ .catch(error => {
+ console.error('성능 통계 로딩 실패:', error);
+ document.getElementById('performance-stats-container').innerHTML = '
성능 통계 로딩 실패
';
+ });
+ }
+
+ // 헬퍼 함수들
+ function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ function getLevelColor(level) {
+ switch(level) {
+ case 'ERROR': return '#dc3545';
+ case 'WARNING': return '#ffc107';
+ case 'INFO': return '#17a2b8';
+ case 'DEBUG': return '#6c757d';
+ default: return '#333';
+ }
+ }
+
+ // 모델 사용 통계 새로고침 함수
+ function refreshModelUsageStats() {
+ fetch('/api/model-usage-stats')
+ .then(response => response.json())
+ .then(data => {
+ const container = document.getElementById('model-usage-stats-container');
+ if (data.model_usage && Object.keys(data.model_usage).length > 0) {
+ let statsHtml = '
';
+
+ // 모델별 사용량
+ statsHtml += '
';
+ statsHtml += '
🎯 모델별 요청
';
+ Object.entries(data.model_usage).forEach(([model, count]) => {
+ statsHtml += `
+ ${model}:
+ ${count}회
+
`;
+ });
+ statsHtml += '
';
+
+ // 엔드포인트별 사용량
+ if (data.endpoint_usage && Object.keys(data.endpoint_usage).length > 0) {
+ statsHtml += '
';
+ statsHtml += '
🔗 엔드포인트별
';
+ Object.entries(data.endpoint_usage).forEach(([endpoint, count]) => {
+ statsHtml += `
+ ${endpoint}:
+ ${count}회
+
`;
+ });
+ statsHtml += '
';
+ }
+
+ // 총 요청 수
+ statsHtml += '
';
+ statsHtml += '
📈 총계
';
+ statsHtml += `
+ 총 요청:
+ ${data.total_requests}회
+
`;
+ statsHtml += `
+ 분석 범위:
+ ${data.analysis_window}
+
`;
+ statsHtml += '
';
+
+ statsHtml += '
';
+ container.innerHTML = statsHtml;
+ } else {
+ container.innerHTML = '
사용 데이터가 없습니다.
';
+ }
+ })
+ .catch(error => {
+ console.error('모델 사용 통계 로딩 실패:', error);
+ document.getElementById('model-usage-stats-container').innerHTML = '
통계 로딩 실패
';
+ });
+ }
+
+ // 시스템 경고 새로고침 함수
+ function refreshSystemAlerts() {
+ fetch('/api/system-alerts')
+ .then(response => response.json())
+ .then(data => {
+ const container = document.getElementById('system-alerts-container');
+ if (data.alerts && data.alerts.length > 0) {
+ let alertsHtml = '';
+ data.alerts.forEach(alert => {
+ const levelColor = alert.level === 'critical' ? '#dc3545' :
+ alert.level === 'warning' ? '#ffc107' : '#28a745';
+ const levelIcon = alert.level === 'critical' ? '🚨' :
+ alert.level === 'warning' ? '⚠️' : 'ℹ️';
+
+ alertsHtml += `
+
+ ${levelIcon} ${alert.level.toUpperCase()}
+
+
${alert.message}
+
+ ${new Date(alert.timestamp).toLocaleString()}
+
+
`;
+ });
+ container.innerHTML = alertsHtml;
+ } else {
+ container.innerHTML = '
✅ 현재 시스템 경고가 없습니다.
';
+ }
+ })
+ .catch(error => {
+ console.error('시스템 경고 로딩 실패:', error);
+ document.getElementById('system-alerts-container').innerHTML = '
경고 로딩 실패
';
+ });
+ }
+
+ // 페이지 로드 시 초기화
+ document.addEventListener('DOMContentLoaded', function() {
+ // 로그 및 성능 통계 초기 로딩
+ refreshLogs();
+ refreshPerformanceStats();
+ refreshModelUsageStats();
+ refreshSystemAlerts();
+
+ // 30초마다 로그 및 성능 통계 자동 새로고침
+ setInterval(refreshLogs, 30000);
+ setInterval(refreshPerformanceStats, 30000);
+ setInterval(refreshModelUsageStats, 15000); // 15초마다
+ setInterval(refreshSystemAlerts, 10000); // 10초마다
+ });