Jon
57770fd99d
🎯 Major Features: - Hybrid LLM configuration: Claude 3.7 Sonnet (primary) + GPT-4.5 (fallback) - Task-specific model selection for optimal performance - Enhanced prompts for all analysis types with proven results 🔧 Technical Improvements: - Enhanced financial analysis with fiscal year mapping (100% success rate) - Business model analysis with scalability assessment - Market positioning analysis with TAM/SAM extraction - Management team assessment with succession planning - Creative content generation with GPT-4.5 📊 Performance & Cost Optimization: - Claude 3.7 Sonnet: /5 per 1M tokens (82.2% MATH score) - GPT-4.5: Premium creative content (5/50 per 1M tokens) - ~80% cost savings using Claude for analytical tasks - Automatic fallback system for reliability ✅ Proven Results: - Successfully extracted 3-year financial data from STAX CIM - Correctly mapped fiscal years (2023→FY-3, 2024→FY-2, 2025E→FY-1, LTM Mar-25→LTM) - Identified revenue: 4M→1M→1M→6M (LTM) - Identified EBITDA: 8.9M→3.9M→1M→7.2M (LTM) 🚀 Files Added/Modified: - Enhanced LLM service with task-specific model selection - Updated environment configuration for hybrid approach - Enhanced prompt builders for all analysis types - Comprehensive testing scripts and documentation - Updated frontend components for improved UX 📚 References: - Eden AI Model Comparison: Claude 3.7 Sonnet vs GPT-4.5 - Artificial Analysis Benchmarks for performance metrics - Cost optimization based on model strengths and pricing
387 lines
16 KiB
TypeScript
387 lines
16 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { documentService } from '../services/documentService';
|
|
import { cn } from '../utils/cn';
|
|
|
|
interface AnalyticsData {
|
|
sessionStats: Array<{
|
|
date: string;
|
|
total_sessions: string;
|
|
successful_sessions: string;
|
|
failed_sessions: string;
|
|
avg_processing_time: string;
|
|
avg_cost: string;
|
|
}>;
|
|
agentStats: Array<{
|
|
agent_name: string;
|
|
total_executions: string;
|
|
successful_executions: string;
|
|
avg_processing_time: string;
|
|
avg_retries: string;
|
|
}>;
|
|
qualityStats: Array<{
|
|
metric_type: string;
|
|
avg_value: string;
|
|
min_value: string;
|
|
max_value: string;
|
|
}>;
|
|
period: {
|
|
startDate: string;
|
|
endDate: string;
|
|
days: number;
|
|
};
|
|
}
|
|
|
|
interface ProcessingStats {
|
|
totalDocuments: number;
|
|
chunkingSuccess: number;
|
|
ragSuccess: number;
|
|
agenticRagSuccess: number;
|
|
averageProcessingTime: {
|
|
chunking: number;
|
|
rag: number;
|
|
agenticRag: number;
|
|
};
|
|
averageApiCalls: {
|
|
chunking: number;
|
|
rag: number;
|
|
agenticRag: number;
|
|
};
|
|
}
|
|
|
|
interface AgenticRAGHealth {
|
|
status: string;
|
|
agents: Record<string, {
|
|
status: string;
|
|
lastExecutionTime: number;
|
|
successRate: number;
|
|
averageProcessingTime: string;
|
|
}>;
|
|
overall: {
|
|
successRate: number;
|
|
averageProcessingTime: number;
|
|
activeSessions: number;
|
|
errorRate: number;
|
|
};
|
|
timestamp: string;
|
|
}
|
|
|
|
const Analytics: React.FC = () => {
|
|
const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);
|
|
const [processingStats, setProcessingStats] = useState<ProcessingStats | null>(null);
|
|
const [healthStatus, setHealthStatus] = useState<AgenticRAGHealth | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [selectedPeriod, setSelectedPeriod] = useState(30);
|
|
|
|
useEffect(() => {
|
|
loadAnalyticsData();
|
|
}, [selectedPeriod]);
|
|
|
|
const loadAnalyticsData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const [analytics, stats, health] = await Promise.all([
|
|
documentService.getAnalytics(selectedPeriod),
|
|
documentService.getProcessingStats(),
|
|
documentService.getAgenticRAGHealth()
|
|
]);
|
|
|
|
setAnalyticsData(analytics);
|
|
setProcessingStats(stats);
|
|
setHealthStatus(health);
|
|
} catch (err) {
|
|
setError('Failed to load analytics data');
|
|
console.error('Analytics loading error:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const formatTime = (ms: number | string): string => {
|
|
const milliseconds = typeof ms === 'string' ? parseFloat(ms) : ms;
|
|
if (milliseconds < 1000) return `${Math.round(milliseconds)}ms`;
|
|
if (milliseconds < 60000) return `${(milliseconds / 1000).toFixed(1)}s`;
|
|
return `${(milliseconds / 60000).toFixed(1)}m`;
|
|
};
|
|
|
|
const formatCost = (cost: string | number): string => {
|
|
const value = typeof cost === 'string' ? parseFloat(cost) : cost;
|
|
return `$${value.toFixed(4)}`;
|
|
};
|
|
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div className="ml-3">
|
|
<h3 className="text-sm font-medium text-red-800">Error loading analytics</h3>
|
|
<p className="mt-1 text-sm text-red-700">{error}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-center">
|
|
<h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
|
|
<div className="flex items-center space-x-4">
|
|
<label className="text-sm font-medium text-gray-700">Time Period:</label>
|
|
<select
|
|
value={selectedPeriod}
|
|
onChange={(e) => setSelectedPeriod(Number(e.target.value))}
|
|
className="border border-gray-300 rounded-md px-3 py-1 text-sm"
|
|
>
|
|
<option value={7}>Last 7 days</option>
|
|
<option value={30}>Last 30 days</option>
|
|
<option value={90}>Last 90 days</option>
|
|
</select>
|
|
<button
|
|
onClick={loadAnalyticsData}
|
|
className="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700"
|
|
>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* System Health Overview */}
|
|
{healthStatus && (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">System Health</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
|
<div className="flex items-center">
|
|
<div className={cn(
|
|
"w-3 h-3 rounded-full mr-2",
|
|
healthStatus.status === 'healthy' ? 'bg-green-500' : 'bg-red-500'
|
|
)}></div>
|
|
<span className="text-sm font-medium text-gray-900">Overall Status</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-gray-900 mt-2">
|
|
{healthStatus.status.charAt(0).toUpperCase() + healthStatus.status.slice(1)}
|
|
</p>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
|
<p className="text-sm font-medium text-gray-500">Success Rate</p>
|
|
<p className="text-2xl font-bold text-gray-900">
|
|
{(healthStatus.overall.successRate * 100).toFixed(1)}%
|
|
</p>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
|
<p className="text-sm font-medium text-gray-500">Avg Processing Time</p>
|
|
<p className="text-2xl font-bold text-gray-900">
|
|
{formatTime(healthStatus.overall.averageProcessingTime)}
|
|
</p>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
|
<p className="text-sm font-medium text-gray-500">Active Sessions</p>
|
|
<p className="text-2xl font-bold text-gray-900">
|
|
{healthStatus.overall.activeSessions}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Processing Statistics */}
|
|
{processingStats && (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Processing Statistics</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="space-y-4">
|
|
<h3 className="text-md font-medium text-gray-700">Success Rates</h3>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-600">Chunking</span>
|
|
<span className="text-sm font-medium">
|
|
{processingStats.totalDocuments > 0
|
|
? ((processingStats.chunkingSuccess / processingStats.totalDocuments) * 100).toFixed(1)
|
|
: 0}%
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-600">RAG</span>
|
|
<span className="text-sm font-medium">
|
|
{processingStats.totalDocuments > 0
|
|
? ((processingStats.ragSuccess / processingStats.totalDocuments) * 100).toFixed(1)
|
|
: 0}%
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-600">Agentic RAG</span>
|
|
<span className="text-sm font-medium">
|
|
{processingStats.totalDocuments > 0
|
|
? ((processingStats.agenticRagSuccess / processingStats.totalDocuments) * 100).toFixed(1)
|
|
: 0}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<h3 className="text-md font-medium text-gray-700">Average Processing Time</h3>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-600">Chunking</span>
|
|
<span className="text-sm font-medium">{formatTime(processingStats.averageProcessingTime.chunking)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-600">RAG</span>
|
|
<span className="text-sm font-medium">{formatTime(processingStats.averageProcessingTime.rag)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-600">Agentic RAG</span>
|
|
<span className="text-sm font-medium">{formatTime(processingStats.averageProcessingTime.agenticRag)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<h3 className="text-md font-medium text-gray-700">Average API Calls</h3>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-600">Chunking</span>
|
|
<span className="text-sm font-medium">{processingStats.averageApiCalls.chunking.toFixed(1)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-600">RAG</span>
|
|
<span className="text-sm font-medium">{processingStats.averageApiCalls.rag.toFixed(1)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-600">Agentic RAG</span>
|
|
<span className="text-sm font-medium">{processingStats.averageApiCalls.agenticRag.toFixed(1)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Session Statistics */}
|
|
{analyticsData && (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Session Statistics</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Sessions</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Successful</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Failed</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Time</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Cost</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{analyticsData.sessionStats.map((stat, index) => (
|
|
<tr key={index}>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{new Date(stat.date).toLocaleDateString()}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{stat.total_sessions}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-green-600">{stat.successful_sessions}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-red-600">{stat.failed_sessions}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{formatTime(stat.avg_processing_time)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{formatCost(stat.avg_cost)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Agent Performance */}
|
|
{analyticsData && (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Agent Performance</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{analyticsData.agentStats.map((agent, index) => (
|
|
<div key={index} className="bg-gray-50 rounded-lg p-4">
|
|
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
|
{agent.agent_name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
|
|
</h3>
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-gray-600">Total Executions:</span>
|
|
<span className="font-medium">{agent.total_executions}</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-gray-600">Success Rate:</span>
|
|
<span className="font-medium text-green-600">
|
|
{parseInt(agent.total_executions) > 0
|
|
? ((parseInt(agent.successful_executions) / parseInt(agent.total_executions)) * 100).toFixed(1)
|
|
: 0}%
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-gray-600">Avg Time:</span>
|
|
<span className="font-medium">{formatTime(agent.avg_processing_time)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-gray-600">Avg Retries:</span>
|
|
<span className="font-medium">{parseFloat(agent.avg_retries).toFixed(1)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quality Metrics */}
|
|
{analyticsData && (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Quality Metrics</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{analyticsData.qualityStats.map((metric, index) => (
|
|
<div key={index} className="bg-gray-50 rounded-lg p-4">
|
|
<h3 className="text-sm font-medium text-gray-900 mb-2">
|
|
{metric.metric_type.charAt(0).toUpperCase() + metric.metric_type.slice(1)}
|
|
</h3>
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-gray-600">Average:</span>
|
|
<span className="font-medium">{(parseFloat(metric.avg_value) * 100).toFixed(1)}%</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-gray-600">Min:</span>
|
|
<span className="font-medium">{(parseFloat(metric.min_value) * 100).toFixed(1)}%</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-gray-600">Max:</span>
|
|
<span className="font-medium">{(parseFloat(metric.max_value) * 100).toFixed(1)}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Analytics;
|