import React, { useState } from 'react'; import { BrainCircuit, Database, Target, TrendingUp, Activity, Crosshair, Layers, Settings, ChevronRight, Zap, Shield, FileText, BarChart2, Camera } from 'lucide-react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer, AreaChart, Area, Legend } from 'recharts'; // --- MOCK DATA FOR CHARTS --- const rawVisualLogs = [ [1, 0.0828, 0.0818, 90.48], [2, 0.2010, 0.0728, 91.04], [3, 0.0971, 0.0170, 97.65], [4, 0.0118, 0.0136, 98.38], [5, 0.0124, 0.0116, 98.51], [6, 0.0049, 0.0120, 98.86], [7, 0.0104, 0.0096, 98.78], [8, 0.0211, 0.0087, 99.09], [9, 0.0459, 0.0071, 99.23], [10, 0.0008, 0.0062, 99.33], [11, 0.0023, 0.0058, 99.37], [12, 0.1060, 0.0069, 99.22], [13, 0.0185, 0.0070, 99.25], [14, 0.0007, 0.0057, 99.33], [15, 0.0063, 0.0061, 99.33], [16, 0.0029, 0.0109, 98.81] ]; const lossDataVisual = rawVisualLogs.map(log => ({ epoch: log[0], trainLoss: log[1], valLoss: log[2] })); const accDataVisual = rawVisualLogs.map(log => ({ epoch: log[0], accuracy: log[3] })); const rawKaggleLogs = [ [1, 0.0470, 0.0422, 98.86], [2, 0.0435, 0.0412, 99.11], [3, 0.0426, 0.0415, 99.08], [4, 0.0424, 0.0406, 99.25], [5, 0.0422, 0.0405, 99.30], [6, 0.0419, 0.0404, 99.34], [7, 0.0418, 0.0402, 99.33], [8, 0.0415, 0.0403, 99.33], [9, 0.0414, 0.0401, 99.46], [10, 0.0414, 0.0402, 99.42], [11, 0.0413, 0.0404, 99.29], [12, 0.0414, 0.0401, 99.43], [13, 0.0410, 0.0401, 99.37], [14, 0.0407, 0.0399, 99.43], [15, 0.0407, 0.0398, 99.48], [16, 0.0406, 0.0400, 99.39], [17, 0.0407, 0.0399, 99.48], [18, 0.0406, 0.0400, 99.46], [19, 0.0406, 0.0398, 99.50], [20, 0.0403, 0.0399, 99.50], [21, 0.0403, 0.0397, 99.50], [22, 0.0403, 0.0398, 99.47], [23, 0.0402, 0.0398, 99.44], [24, 0.0402, 0.0399, 99.48], [25, 0.0403, 0.0398, 99.48], [26, 0.0401, 0.0397, 99.50], [27, 0.0401, 0.0398, 99.49], [28, 0.0401, 0.0397, 99.52], [29, 0.0401, 0.0397, 99.48], [30, 0.0400, 0.0398, 99.51], [31, 0.0399, 0.0398, 99.50], [32, 0.0400, 0.0399, 99.48], [33, 0.0400, 0.0397, 99.49], [34, 0.0400, 0.0397, 99.48], [35, 0.0400, 0.0397, 99.52], [36, 0.0400, 0.0399, 99.48], [37, 0.0400, 0.0399, 99.51], [38, 0.0399, 0.0397, 99.51], [39, 0.0399, 0.0397, 99.50], [40, 0.0399, 0.0397, 99.50], [41, 0.0398, 0.0397, 99.52], [42, 0.0398, 0.0397, 99.50], [43, 0.0398, 0.0397, 99.52], [44, 0.0398, 0.0397, 99.51] ]; const lossDataMeta = rawKaggleLogs.map(log => ({ epoch: log[0], trainLoss: log[1], valLoss: log[2] })); const accDataMeta = rawKaggleLogs.map(log => ({ epoch: log[0], accuracy: log[3] })); const MODELS_DATA = { visual: { id: 'visual', name: 'Visual Backbone (EfficientNet-B4)', icon: , description: 'The core visual feature extractor. We fine-tuned an EfficientNet-B4 pre-trained on ImageNet. The classification head was replaced with a custom dense block optimized for spatial anomaly detection (e.g., blending boundaries, spectral artifacts).', architecture: 'EfficientNet-B4 + Custom Spatial Attention Head', parameters: '19.3M', datasets: [ { name: 'Full DFDC + CelebDF + StyleGAN', size: '53,000+ extracted face frames' } ], hyperparameters: { optimizer: 'AdamW', learningRate: '1e-4', batchSize: '32', weightDecay: '1e-4', lossFunction: 'Focal Loss', epochs: '16 (Early Stopping)' }, metrics: { accuracy: '99.37%', auc: '0.998', precision: '99.5%', recall: '99.6%' }, lossData: lossDataVisual, accData: accDataVisual }, meta: { id: 'meta', name: 'PyTorch Meta-Classifier', icon: , description: 'A Multi-Layer Perceptron (MLP) ensemble judge. Instead of raw pixels, it ingests a 15-dimensional vector of continuous anomaly scores from our biological, spectral, and physical sensors. It employs Self-Attention to dynamically weight which sensors to trust based on the video context.', architecture: '3-Layer Tabular ResNet + Self-Attention Gating', parameters: '1.2M', datasets: [ { name: 'Ensemble Feature Vectors', size: 'Continuous Output Scores from Visual Backbone (EfficientNet-B4)' } ], hyperparameters: { optimizer: 'AdamW', learningRate: '5e-3', batchSize: '256', weightDecay: '1e-4', lossFunction: 'Tabular Focal Loss', epochs: '44 (Early Stopping)' }, metrics: { accuracy: '99.52%', auc: '0.9995', precision: '99.7%', recall: '99.8%' }, lossData: lossDataMeta, accData: accDataMeta }, audio: { id: 'audio', name: 'Audio CNN & SyncNet', icon: , description: 'A dual-stream architecture. The Audio CNN processes 128-bin Mel-Spectrograms to detect acoustic spoofing (synthetic voices). SyncNet evaluates the temporal synchronization between facial landmarks and the audio track, flagging lip-sync manipulations.', architecture: 'Lightweight 2D-CNN (Audio) + Dual-Stream 3D-CNN (SyncNet)', parameters: '4.5M', datasets: [ { name: 'ASVspoof 2019 Dataset', size: 'Full LA and PA Datasets' } ], hyperparameters: { optimizer: 'Adam', learningRate: '1e-3', batchSize: '32', weightDecay: '0', lossFunction: 'Binary Cross Entropy', epochs: '10' }, metrics: { accuracy: '98.5%', auc: '0.991', precision: '98.0%', recall: '98.8%' }, lossData: [ { epoch: 1, trainLoss: 0.112, valLoss: 0.120 }, { epoch: 2, trainLoss: 0.0149, valLoss: 0.021 }, { epoch: 3, trainLoss: 0.00676, valLoss: 0.015 }, { epoch: 4, trainLoss: 0.00327, valLoss: 0.012 }, { epoch: 5, trainLoss: 0.0044, valLoss: 0.010 }, { epoch: 6, trainLoss: 0.00293, valLoss: 0.009 }, { epoch: 7, trainLoss: 0.00297, valLoss: 0.009 }, { epoch: 8, trainLoss: 0.00475, valLoss: 0.011 }, { epoch: 9, trainLoss: 0.00244, valLoss: 0.008 }, { epoch: 10, trainLoss: 0.000325, valLoss: 0.005 } ], accData: [ { epoch: 1, accuracy: 89.2 }, { epoch: 2, accuracy: 94.5 }, { epoch: 3, accuracy: 96.1 }, { epoch: 4, accuracy: 97.3 }, { epoch: 5, accuracy: 97.6 }, { epoch: 6, accuracy: 97.9 }, { epoch: 7, accuracy: 98.1 }, { epoch: 8, accuracy: 97.8 }, { epoch: 9, accuracy: 98.3 }, { epoch: 10, accuracy: 98.5 } ] } }; const ModelsOverview = () => { const [activeModel, setActiveModel] = useState('visual'); const model = MODELS_DATA[activeModel]; return (
{/* Header Section */}
Research & Methodology

Neural Network Architecture

Our platform utilizes a multi-modal ensemble of fine-tuned deep learning models. Below you can explore the architecture, hyperparameter configurations, and empirical evaluation metrics for each sub-network.

{/* Main Split Layout */}
{/* Left Sidebar: Model Selector */}
Available Models
{Object.values(MODELS_DATA).map(m => ( ))}
{/* Right Content: Model Details */}
{/* Top Panel: Overview & Metrics */}

{model.name}

{model.architecture} • {model.parameters} Parameters
Test Accuracy
{model.metrics.accuracy}
ROC-AUC
{model.metrics.auc}

{model.description}

Precision {model.metrics.precision}
Recall {model.metrics.recall}
F1-Score {((parseFloat(model.metrics.precision) + parseFloat(model.metrics.recall)) / 2).toFixed(1)}%
{/* Grid Layout for Charts & Training Details */}
{/* Training Loss Curve */}
Training vs Validation Loss
{/* Validation Accuracy Curve */}
Validation Accuracy Over Time
`${val}%`} /> [`${value}%`, 'Validation Accuracy']} labelFormatter={(label) => `Epoch: ${label}`} />
{/* Hyperparameters Table */}
Training Hyperparameters
{Object.entries(model.hyperparameters).map(([key, value]) => (
{key.replace(/([A-Z])/g, ' $1').trim()} {value}
))}
{/* Datasets Table */}
Evaluation Datasets
{model.datasets.map((ds, idx) => (
{ds.name}
{ds.size}
))}
); }; export default ModelsOverview;