RSK World - Text Classification Dataset - Project Files Browser | RSK World

<!--
================================================================================
  Text Classification Dataset - Model Comparison Dashboard
================================================================================
  Project: Text Classification Dataset
  Category: Text Data / NLP
  
  Author: Molla Samser
  Designer & Tester: Rima Khatun
  Website: https://rskworld.in
  Email: help@rskworld.in | support@rskworld.in
  Phone: +91 93305 39277
  
  Copyright (c) 2026 RSK World - All Rights Reserved
  This content is provided for educational purposes only.
  
  Created: December 2026
================================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Model Comparison Dashboard - Compare different ML models for text classification. By RSK World.">
    <meta name="author" content="Molla Samser - RSK World">
    
    <title>Model Dashboard | Text Classification - RSK World</title>
    
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    
    <style>
        /*
        ================================================================================
          Dashboard Styles - RSK World (https://rskworld.in)
        ================================================================================
        */
        
        .dashboard-page {
            background: linear-gradient(135deg, #0f0a1f 0%, #1a1333 50%, #0f0a1f 100%);
            min-height: 100vh;
        }
        
        .dashboard-main {
            padding: 6rem 0 3rem;
        }
        
        .dashboard-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .dashboard-header h1 {
            font-family: var(--font-display);
            font-size: 2.5rem;
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }
        
        .dashboard-header p {
            color: var(--text-secondary);
            font-size: 1.1rem;
        }
        
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .dashboard-card {
            background: var(--gradient-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--dark-border);
            padding: 1.5rem;
            transition: var(--transition-base);
        }
        
        .dashboard-card:hover {
            border-color: var(--primary);
            box-shadow: var(--shadow-glow);
            transform: translateY(-2px);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--dark-border);
        }
        
        .card-header h3 {
            font-family: var(--font-display);
            font-size: 1.25rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .card-header h3 i {
            color: var(--primary);
        }
        
        .card-badge {
            background: var(--gradient-primary);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-full);
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        /* Model Cards */
        .model-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .model-card {
            background: rgba(255, 255, 255, 0.02);
            border-radius: var(--radius-md);
            padding: 1.5rem;
            border: 1px solid var(--dark-border);
            transition: var(--transition-base);
            position: relative;
            overflow: hidden;
        }
        
        .model-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
            opacity: 0;
            transition: var(--transition-base);
        }
        
        .model-card:hover::before {
            opacity: 1;
        }
        
        .model-card:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: var(--primary);
        }
        
        .model-card.best-model {
            border-color: var(--accent);
        }
        
        .model-card.best-model::before {
            background: var(--accent);
            opacity: 1;
        }
        
        .model-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .model-name i {
            color: var(--primary);
        }
        
        .best-badge {
            background: var(--accent);
            color: var(--dark);
            padding: 0.15rem 0.5rem;
            border-radius: var(--radius-full);
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
        }
        
        .model-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }
        
        .stat-item {
            background: rgba(0, 0, 0, 0.2);
            padding: 0.75rem;
            border-radius: var(--radius-sm);
        }
        
        .stat-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 0.25rem;
        }
        
        .stat-value {
            font-size: 1.25rem;
            font-weight: 600;
            font-family: var(--font-mono);
        }
        
        .stat-value.accuracy {
            color: #22c55e;
        }
        
        .stat-value.f1 {
            color: #3b82f6;
        }
        
        .stat-value.precision {
            color: #8b5cf6;
        }
        
        .stat-value.recall {
            color: #ec4899;
        }
        
        /* Progress bars */
        .progress-bar-container {
            margin-top: 1rem;
        }
        
        .progress-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            margin-bottom: 0.25rem;
        }
        
        .progress-bar {
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-full);
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: var(--gradient-primary);
            border-radius: var(--radius-full);
            transition: width 1s ease;
        }
        
        /* Charts */
        .chart-container {
            position: relative;
            height: 300px;
            margin-top: 1rem;
        }
        
        .chart-container.large {
            height: 400px;
        }
        
        /* Metrics Table */
        .metrics-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        
        .metrics-table th,
        .metrics-table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid var(--dark-border);
        }
        
        .metrics-table th {
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 0.85rem;
            text-transform: uppercase;
        }
        
        .metrics-table td {
            font-family: var(--font-mono);
            font-size: 0.9rem;
        }
        
        .metrics-table tr:hover {
            background: rgba(255, 255, 255, 0.02);
        }
        
        /* Category Legend */
        .category-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1rem;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        
        /* Controls */
        .controls-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 2rem;
            padding: 1rem;
            background: var(--gradient-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--dark-border);
        }
        
        .control-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .control-group label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        .control-select {
            background: var(--dark-surface);
            border: 1px solid var(--dark-border);
            color: var(--text-primary);
            padding: 0.5rem 1rem;
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
        }
        
        .control-select:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .control-btn {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition-fast);
        }
        
        .control-btn:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-glow);
        }
        
        /* Full Width Card */
        .full-width {
            grid-column: 1 / -1;
        }
        
        /* Animations */
        @keyframes countUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-count {
            animation: countUp 0.5s ease forwards;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .dashboard-header h1 {
                font-size: 1.75rem;
            }
            
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
            
            .model-grid {
                grid-template-columns: 1fr;
            }
            
            .controls-bar {
                flex-direction: column;
            }
        }
    </style>
</head>
<body class="dashboard-page">
    <!-- Background Animation -->
    <div class="bg-animation">
        <div class="floating-shapes">
            <span></span><span></span><span></span><span></span><span></span>
        </div>
    </div>
    
    <!-- Header -->
    <header class="header">
        <div class="container">
            <nav class="navbar">
                <a href="index.html" class="logo">
                    <i class="fas fa-brain"></i>
                    <span>RSK<span class="highlight">World</span></span>
                </a>
                <ul class="nav-links">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="classifier.html">Classifier</a></li>
                    <li><a href="dashboard.html" class="active">Dashboard</a></li>
                    <li><a href="index.html#download">Download</a></li>
                </ul>
                <button class="mobile-menu-btn" aria-label="Toggle Menu">
                    <span></span><span></span><span></span>
                </button>
            </nav>
        </div>
    </header>
    
    <main class="dashboard-main">
        <div class="container">
            <!-- Header -->
            <div class="dashboard-header">
                <h1><i class="fas fa-chart-line"></i> Model Comparison Dashboard</h1>
                <p>Compare performance metrics across different classification models</p>
            </div>
            
            <!-- Controls -->
            <div class="controls-bar">
                <div class="control-group">
                    <label><i class="fas fa-database"></i> Dataset:</label>
                    <select class="control-select" id="datasetSelect">
                        <option value="full">Full Dataset</option>
                        <option value="train">Training Set</option>
                        <option value="test" selected>Test Set</option>
                    </select>
                </div>
                <div class="control-group">
                    <label><i class="fas fa-sort"></i> Sort By:</label>
                    <select class="control-select" id="sortSelect">
                        <option value="accuracy" selected>Accuracy</option>
                        <option value="f1">F1 Score</option>
                        <option value="precision">Precision</option>
                        <option value="recall">Recall</option>
                    </select>
                </div>
                <button class="control-btn" id="refreshBtn">
                    <i class="fas fa-sync-alt"></i> Refresh
                </button>
            </div>
            
            <!-- Model Cards -->
            <div class="model-grid" id="modelGrid">
                <!-- Cards will be populated by JavaScript -->
            </div>
            
            <!-- Charts Grid -->
            <div class="dashboard-grid" style="margin-top: 2rem;">
                <!-- Accuracy Comparison -->
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3><i class="fas fa-chart-bar"></i> Model Comparison</h3>
                        <span class="card-badge">Performance</span>
                    </div>
                    <div class="chart-container">
                        <canvas id="comparisonChart"></canvas>
                    </div>
                </div>
                
                <!-- Radar Chart -->
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3><i class="fas fa-spider"></i> Metrics Radar</h3>
                        <span class="card-badge">Multi-Metric</span>
                    </div>
                    <div class="chart-container">
                        <canvas id="radarChart"></canvas>
                    </div>
                </div>
                
                <!-- Per-Category Performance -->
                <div class="dashboard-card full-width">
                    <div class="card-header">
                        <h3><i class="fas fa-layer-group"></i> Per-Category F1 Scores</h3>
                        <span class="card-badge">Detailed</span>
                    </div>
                    <div class="chart-container large">
                        <canvas id="categoryChart"></canvas>
                    </div>
                    <div class="category-legend" id="categoryLegend">
                        <!-- Legend items will be populated -->
                    </div>
                </div>
                
                <!-- Confusion Matrix Heatmap -->
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3><i class="fas fa-th"></i> Confusion Matrix</h3>
                        <select class="control-select" id="confusionModelSelect" style="margin-left: auto;">
                            <!-- Options populated by JS -->
                        </select>
                    </div>
                    <div class="chart-container large">
                        <canvas id="confusionChart"></canvas>
                    </div>
                </div>
                
                <!-- Training Time -->
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3><i class="fas fa-clock"></i> Training Time</h3>
                        <span class="card-badge">Efficiency</span>
                    </div>
                    <div class="chart-container">
                        <canvas id="timeChart"></canvas>
                    </div>
                </div>
                
                <!-- Detailed Metrics Table -->
                <div class="dashboard-card full-width">
                    <div class="card-header">
                        <h3><i class="fas fa-table"></i> Detailed Metrics</h3>
                        <span class="card-badge">All Models</span>
                    </div>
                    <div style="overflow-x: auto;">
                        <table class="metrics-table" id="metricsTable">
                            <thead>
                                <tr>
                                    <th>Model</th>
                                    <th>Accuracy</th>
                                    <th>Precision</th>
                                    <th>Recall</th>
                                    <th>F1 Score</th>
                                    <th>Training Time</th>
                                    <th>Prediction Time</th>
                                </tr>
                            </thead>
                            <tbody id="metricsTableBody">
                                <!-- Rows populated by JS -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p>
                    Created by <strong>Molla Samser</strong> | 
                    Designed by <strong>Rima Khatun</strong>
                </p>
                <p>&copy; 2026 <a href="https://rskworld.in" target="_blank">RSK World</a> - All Rights Reserved</p>
            </div>
        </div>
    </footer>
    
    <script>
        /*
        ================================================================================
          Model Comparison Dashboard - JavaScript
        ================================================================================
          Project: Text Classification Dataset
          Author: Molla Samser | Website: https://rskworld.in
          Copyright (c) 2026 RSK World - All Rights Reserved
        ================================================================================
        */
        
        // Model Performance Data (Simulated - would come from backend in production)
        const modelData = {
            'Naive Bayes': {
                accuracy: 0.852,
                precision: 0.847,
                recall: 0.845,
                f1: 0.846,
                trainingTime: 0.12,
                predictionTime: 0.008,
                perCategory: {
                    'Technology': 0.89,
                    'Sports': 0.92,
                    'Politics': 0.78,
                    'Entertainment': 0.85,
                    'Business': 0.81,
                    'Science': 0.83
                },
                confusionMatrix: [
                    [45, 2, 1, 1, 0, 1],
                    [1, 48, 0, 1, 0, 0],
                    [2, 0, 40, 3, 3, 2],
                    [1, 1, 2, 44, 1, 1],
                    [0, 0, 3, 1, 42, 4],
                    [1, 0, 2, 1, 3, 43]
                ]
            },
            'Logistic Regression': {
                accuracy: 0.897,
                precision: 0.894,
                recall: 0.892,
                f1: 0.893,
                trainingTime: 0.45,
                predictionTime: 0.005,
                perCategory: {
                    'Technology': 0.93,
                    'Sports': 0.95,
                    'Politics': 0.85,
                    'Entertainment': 0.91,
                    'Business': 0.87,
                    'Science': 0.88
                },
                confusionMatrix: [
                    [47, 1, 1, 0, 0, 1],
                    [0, 49, 0, 1, 0, 0],
                    [1, 0, 44, 2, 2, 1],
                    [0, 1, 1, 46, 1, 1],
                    [0, 0, 2, 1, 45, 2],
                    [1, 0, 1, 1, 2, 45]
                ]
            },
            'Linear SVM': {
                accuracy: 0.889,
                precision: 0.886,
                recall: 0.884,
                f1: 0.885,
                trainingTime: 0.38,
                predictionTime: 0.004,
                perCategory: {
                    'Technology': 0.92,
                    'Sports': 0.94,
                    'Politics': 0.83,
                    'Entertainment': 0.90,
                    'Business': 0.86,
                    'Science': 0.86
                },
                confusionMatrix: [
                    [46, 1, 1, 1, 0, 1],
                    [0, 48, 0, 1, 1, 0],
                    [2, 0, 43, 2, 2, 1],
                    [1, 1, 1, 45, 1, 1],
                    [0, 0, 2, 1, 44, 3],
                    [1, 0, 2, 1, 2, 44]
                ]
            },
            'Random Forest': {
                accuracy: 0.875,
                precision: 0.871,
                recall: 0.869,
                f1: 0.870,
                trainingTime: 2.34,
                predictionTime: 0.12,
                perCategory: {
                    'Technology': 0.91,
                    'Sports': 0.93,
                    'Politics': 0.81,
                    'Entertainment': 0.88,
                    'Business': 0.84,
                    'Science': 0.85
                },
                confusionMatrix: [
                    [46, 1, 1, 1, 0, 1],
                    [1, 47, 0, 1, 1, 0],
                    [2, 0, 42, 2, 3, 1],
                    [1, 1, 2, 44, 1, 1],
                    [0, 0, 3, 1, 43, 3],
                    [1, 0, 2, 1, 3, 43]
                ]
            },
            'BERT (Fine-tuned)': {
                accuracy: 0.943,
                precision: 0.941,
                recall: 0.940,
                f1: 0.941,
                trainingTime: 245.6,
                predictionTime: 0.85,
                perCategory: {
                    'Technology': 0.97,
                    'Sports': 0.98,
                    'Politics': 0.92,
                    'Entertainment': 0.95,
                    'Business': 0.93,
                    'Science': 0.94
                },
                confusionMatrix: [
                    [49, 0, 0, 0, 0, 1],
                    [0, 50, 0, 0, 0, 0],
                    [0, 0, 47, 1, 1, 1],
                    [0, 0, 1, 48, 1, 0],
                    [0, 0, 1, 0, 48, 1],
                    [0, 0, 1, 0, 1, 48]
                ]
            }
        };
        
        const categories = ['Technology', 'Sports', 'Politics', 'Entertainment', 'Business', 'Science'];
        const categoryColors = ['#3b82f6', '#22c55e', '#8b5cf6', '#ec4899', '#f59e0b', '#06b6d4'];
        
        let charts = {};
        
        // Initialize Dashboard
        document.addEventListener('DOMContentLoaded', () => {
            initializeModelCards();
            initializeCharts();
            initializeTable();
            setupEventListeners();
        });
        
        function initializeModelCards() {
            const grid = document.getElementById('modelGrid');
            const sortedModels = Object.entries(modelData)
                .sort((a, b) => b[1].accuracy - a[1].accuracy);
            
            const bestModel = sortedModels[0][0];
            
            grid.innerHTML = sortedModels.map(([name, data], index) => `
                <div class="model-card ${name === bestModel ? 'best-model' : ''}" data-model="${name}">
                    <div class="model-name">
                        <i class="fas fa-robot"></i>
                        ${name}
                        ${name === bestModel ? '<span class="best-badge">Best</span>' : ''}
                    </div>
                    <div class="model-stats">
                        <div class="stat-item">
                            <div class="stat-label">Accuracy</div>
                            <div class="stat-value accuracy animate-count" style="animation-delay: ${index * 0.1}s">
                                ${(data.accuracy * 100).toFixed(1)}%
                            </div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">F1 Score</div>
                            <div class="stat-value f1 animate-count" style="animation-delay: ${index * 0.1 + 0.05}s">
                                ${(data.f1 * 100).toFixed(1)}%
                            </div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">Precision</div>
                            <div class="stat-value precision animate-count" style="animation-delay: ${index * 0.1 + 0.1}s">
                                ${(data.precision * 100).toFixed(1)}%
                            </div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">Recall</div>
                            <div class="stat-value recall animate-count" style="animation-delay: ${index * 0.1 + 0.15}s">
                                ${(data.recall * 100).toFixed(1)}%
                            </div>
                        </div>
                    </div>
                    <div class="progress-bar-container">
                        <div class="progress-label">
                            <span>Overall Performance</span>
                            <span>${(data.accuracy * 100).toFixed(1)}%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: ${data.accuracy * 100}%"></div>
                        </div>
                    </div>
                </div>
            `).join('');
            
            // Populate confusion matrix dropdown
            const select = document.getElementById('confusionModelSelect');
            select.innerHTML = sortedModels.map(([name]) => 
                `<option value="${name}">${name}</option>`
            ).join('');
        }
        
        function initializeCharts() {
            // Chart.js global config
            Chart.defaults.color = '#a5a3b8';
            Chart.defaults.borderColor = '#352d54';
            
            // Comparison Bar Chart
            const comparisonCtx = document.getElementById('comparisonChart').getContext('2d');
            charts.comparison = new Chart(comparisonCtx, {
                type: 'bar',
                data: {
                    labels: Object.keys(modelData),
                    datasets: [
                        {
                            label: 'Accuracy',
                            data: Object.values(modelData).map(d => d.accuracy * 100),
                            backgroundColor: '#dc2626',
                            borderRadius: 4
                        },
                        {
                            label: 'F1 Score',
                            data: Object.values(modelData).map(d => d.f1 * 100),
                            backgroundColor: '#3b82f6',
                            borderRadius: 4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            min: 80,
                            max: 100,
                            grid: {
                                color: 'rgba(255,255,255,0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
            
            // Radar Chart
            const radarCtx = document.getElementById('radarChart').getContext('2d');
            charts.radar = new Chart(radarCtx, {
                type: 'radar',
                data: {
                    labels: ['Accuracy', 'Precision', 'Recall', 'F1 Score', 'Speed'],
                    datasets: Object.entries(modelData).slice(0, 3).map(([name, data], i) => ({
                        label: name,
                        data: [
                            data.accuracy * 100,
                            data.precision * 100,
                            data.recall * 100,
                            data.f1 * 100,
                            100 - Math.min(data.trainingTime, 100)
                        ],
                        borderColor: ['#dc2626', '#3b82f6', '#22c55e'][i],
                        backgroundColor: ['rgba(220,38,38,0.1)', 'rgba(59,130,246,0.1)', 'rgba(34,197,94,0.1)'][i],
                        pointBackgroundColor: ['#dc2626', '#3b82f6', '#22c55e'][i]
                    }))
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            min: 0,
                            max: 100,
                            ticks: {
                                stepSize: 20
                            },
                            grid: {
                                color: 'rgba(255,255,255,0.1)'
                            }
                        }
                    }
                }
            });
            
            // Category Performance Chart
            const categoryCtx = document.getElementById('categoryChart').getContext('2d');
            charts.category = new Chart(categoryCtx, {
                type: 'bar',
                data: {
                    labels: categories,
                    datasets: Object.entries(modelData).map(([name, data], i) => ({
                        label: name,
                        data: categories.map(cat => data.perCategory[cat] * 100),
                        backgroundColor: `hsla(${i * 60}, 70%, 50%, 0.7)`,
                        borderRadius: 4
                    }))
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            min: 70,
                            max: 100,
                            grid: {
                                color: 'rgba(255,255,255,0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
            
            // Category Legend
            const legend = document.getElementById('categoryLegend');
            legend.innerHTML = categories.map((cat, i) => `
                <div class="legend-item">
                    <div class="legend-dot" style="background: ${categoryColors[i]}"></div>
                    <span>${cat}</span>
                </div>
            `).join('');
            
            // Confusion Matrix (default: best model)
            updateConfusionMatrix('BERT (Fine-tuned)');
            
            // Training Time Chart
            const timeCtx = document.getElementById('timeChart').getContext('2d');
            charts.time = new Chart(timeCtx, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(modelData),
                    datasets: [{
                        data: Object.values(modelData).map(d => d.trainingTime),
                        backgroundColor: [
                            '#dc2626', '#3b82f6', '#22c55e', '#f59e0b', '#8b5cf6'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right'
                        },
                        tooltip: {
                            callbacks: {
                                label: (ctx) => `${ctx.label}: ${ctx.raw.toFixed(2)}s`
                            }
                        }
                    }
                }
            });
        }
        
        function updateConfusionMatrix(modelName) {
            const ctx = document.getElementById('confusionChart').getContext('2d');
            const matrix = modelData[modelName].confusionMatrix;
            
            // Destroy existing chart
            if (charts.confusion) {
                charts.confusion.destroy();
            }
            
            // Create heatmap data
            const data = [];
            for (let i = 0; i < matrix.length; i++) {
                for (let j = 0; j < matrix[i].length; j++) {
                    data.push({
                        x: categories[j],
                        y: categories[i],
                        v: matrix[i][j]
                    });
                }
            }
            
            // Find max for color scaling
            const maxVal = Math.max(...matrix.flat());
            
            charts.confusion = new Chart(ctx, {
                type: 'scatter',
                data: {
                    datasets: [{
                        data: data.map(d => ({
                            x: categories.indexOf(d.x),
                            y: categories.indexOf(d.y),
                            v: d.v
                        })),
                        backgroundColor: data.map(d => {
                            const intensity = d.v / maxVal;
                            return `rgba(220, 38, 38, ${0.2 + intensity * 0.8})`;
                        }),
                        pointRadius: data.map(d => 15 + (d.v / maxVal) * 15),
                        pointHoverRadius: data.map(d => 20 + (d.v / maxVal) * 15)
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: (ctx) => {
                                    const d = data[ctx.dataIndex];
                                    return `${d.y} → ${d.x}: ${d.v}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            type: 'linear',
                            min: -0.5,
                            max: 5.5,
                            ticks: {
                                stepSize: 1,
                                callback: (val) => categories[val] || ''
                            },
                            title: {
                                display: true,
                                text: 'Predicted'
                            },
                            grid: { color: 'rgba(255,255,255,0.05)' }
                        },
                        y: {
                            type: 'linear',
                            min: -0.5,
                            max: 5.5,
                            reverse: true,
                            ticks: {
                                stepSize: 1,
                                callback: (val) => categories[val] || ''
                            },
                            title: {
                                display: true,
                                text: 'Actual'
                            },
                            grid: { color: 'rgba(255,255,255,0.05)' }
                        }
                    }
                }
            });
        }
        
        function initializeTable() {
            const tbody = document.getElementById('metricsTableBody');
            const sortedModels = Object.entries(modelData)
                .sort((a, b) => b[1].accuracy - a[1].accuracy);
            
            tbody.innerHTML = sortedModels.map(([name, data]) => `
                <tr>
                    <td><strong>${name}</strong></td>
                    <td style="color: #22c55e">${(data.accuracy * 100).toFixed(2)}%</td>
                    <td>${(data.precision * 100).toFixed(2)}%</td>
                    <td>${(data.recall * 100).toFixed(2)}%</td>
                    <td style="color: #3b82f6">${(data.f1 * 100).toFixed(2)}%</td>
                    <td>${data.trainingTime.toFixed(2)}s</td>
                    <td>${data.predictionTime.toFixed(3)}s</td>
                </tr>
            `).join('');
        }
        
        function setupEventListeners() {
            // Confusion matrix model selector
            document.getElementById('confusionModelSelect').addEventListener('change', (e) => {
                updateConfusionMatrix(e.target.value);
            });
            
            // Sort selector
            document.getElementById('sortSelect').addEventListener('change', (e) => {
                const metric = e.target.value;
                const cards = Array.from(document.querySelectorAll('.model-card'));
                const grid = document.getElementById('modelGrid');
                
                cards.sort((a, b) => {
                    const modelA = modelData[a.dataset.model];
                    const modelB = modelData[b.dataset.model];
                    return modelB[metric] - modelA[metric];
                });
                
                cards.forEach(card => grid.appendChild(card));
            });
            
            // Refresh button
            document.getElementById('refreshBtn').addEventListener('click', () => {
                // Animate refresh
                const btn = document.getElementById('refreshBtn');
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
                
                setTimeout(() => {
                    btn.innerHTML = '<i class="fas fa-sync-alt"></i> Refresh';
                    // Could fetch new data here
                    initializeCharts();
                }, 1000);
            });
            
            // Mobile menu
            const mobileBtn = document.querySelector('.mobile-menu-btn');
            const navLinks = document.querySelector('.nav-links');
            
            if (mobileBtn) {
                mobileBtn.addEventListener('click', () => {
                    navLinks.classList.toggle('active');
                    mobileBtn.classList.toggle('active');
                });
            }
        }
        
        // Console log for attribution
        console.log('%c RSK World - Model Dashboard ', 
            'background: linear-gradient(135deg, #dc2626, #f59e0b); color: white; padding: 10px 20px; font-size: 14px; border-radius: 4px;');
        console.log('Author: Molla Samser | https://rskworld.in');
    </script>
</body>
</html>

1,128 lines•41.4 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size