Delete plots

Browse files

Files changed (7) hide show

plots/.gitignore +0 -74
plots/404.html +0 -33
plots/README.md +0 -90
plots/code.js +0 -550
plots/data.json +0 -0
plots/index.html +0 -72
plots/style.css +0 -258

plots/.gitignore DELETED Viewed

@@ -1,74 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-firebase-debug.log*
-firebase-debug.*.log*
-# Firebase cache
-.firebase/
-# Firebase config
-# Uncomment this if you'd like others to create their own Firebase project.
-# For a team working on the same Firebase project(s), it is recommended to leave
-# it commented so all members can deploy to the same project(s) in .firebaserc.
-# .firebaserc
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-# Coverage directory used by tools like istanbul
-coverage
-# nyc test coverage
-.nyc_output
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-# Bower dependency directory (https://bower.io/)
-bower_components
-# node-waf configuration
-.lock-wscript
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-# Dependency directories
-node_modules/
-# Optional npm cache directory
-.npm
-# Optional eslint cache
-.eslintcache
-# Optional REPL history
-.node_repl_history
-# Output of 'npm pack'
-*.tgz
-# Yarn Integrity file
-.yarn-integrity
-# dotenv environment variables file
-.env
-# dataconnect generated files
-.dataconnect
-# firebase files
-.firebaserc
-firebase.json

plots/404.html DELETED Viewed

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Page Not Found</title>
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
-      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h2>404</h2>
-      <h1>Page Not Found</h1>
-      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
-      <h3>Why am I seeing this?</h3>
-      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
-    </div>
-  </body>
-</html>

plots/README.md DELETED Viewed

@@ -1,90 +0,0 @@
-# 🚀 Pico Training Metrics Dashboard
-A beautiful, interactive web dashboard for visualizing training progress across all your Pico model runs.
-## ✨ Features
-- **📈 Training Loss Visualization**: Track loss curves over time for all runs
-- **🎯 Learning Rate Schedules**: Monitor LR progression and warmup patterns
-- **📊 Paloma Evaluation**: View perplexity metrics during training
-- **🔄 Combined View**: See all metrics together for easy comparison
-- **🎨 Interactive Charts**: Built with Chart.js for smooth interactions
-- **📱 Responsive Design**: Works on desktop and mobile devices
-- **⚙️ Run Comparison**: Compare different model configurations side-by-side
-## �� Quick Start
-1. **Generate Data**: First, run the data generation script to parse your training logs:
-   ```bash
-   python scripts/generate_data.py
-   ```
-2. **View the Dashboard**: Open `index.html` in your web browser
-3. **Select Runs**: Use the dropdown to view specific runs or all runs together
-4. **Toggle Metrics**: Check/uncheck boxes to show/hide different metric types
-5. **Explore Charts**: Hover over data points for detailed information
-## 📁 Files
-- `index.html` - Main dashboard interface
-- `style.css` - Modern, responsive styling
-- `code.js` - Interactive chart functionality
-- `data.json` - Training metrics data (auto-generated from logs)
-## 🔧 Data Source
-The dashboard automatically extracts training metrics from:
-- Training loss at each step
-- Learning rate progression
-- Paloma evaluation results
-- Model configuration parameters
-## 🔄 Updating Data
-To refresh the dashboard with new training data:
-1. **Run new training sessions** - logs will be saved to `runs/*/logs/`
-2. **Generate updated data.json**:
-   ```bash
-   python scripts/generate_data.py
-   ```
-3. **Refresh the dashboard** - new runs will appear automatically
-## 🎨 Chart Types
-1. **Training Loss**: Line charts showing loss reduction over time
-2. **Learning Rate**: Logarithmic scale for LR schedule visualization
-3. **Evaluation**: Paloma perplexity metrics during training
-4. **Combined**: All metrics on one chart for easy comparison
-## 💡 Usage Tips
-- **Compare Runs**: Select "All Runs" to see how different configurations perform
-- **Zoom In**: Use the chart zoom features to focus on specific training phases
-- **Export**: Right-click charts to save as images
-- **Mobile**: Dashboard is fully responsive for mobile devices
-## 🎯 Key Metrics Tracked
-- **Training Loss**: Primary performance indicator
-- **Learning Rate**: Schedule adherence and warmup progress
-- **Paloma Perplexity**: Model evaluation quality
-- **Inf/NaN Counts**: Training stability monitoring
-- **Model Config**: Architecture and hyperparameter details
-## 🌟 Design Features
-- **Modern UI**: Clean, professional interface
-- **Color Coding**: Distinct colors for each model run
-- **Responsive Layout**: Adapts to different screen sizes
-- **Interactive Elements**: Hover effects and smooth animations
-- **Professional Typography**: Easy-to-read fonts and spacing
-## 📚 Documentation
-For more details on generating the data.json file, see:
-- `scripts/README.md` - Complete script documentation
-- `scripts/generate_data.py` - The data generation script
----
-Built with ❤️ for the Pico Language Model training community

plots/code.js DELETED Viewed

@@ -1,550 +0,0 @@
-// Global variables
-let trainingData = null;
-let charts = {};
-// Color palette for different runs
-const colors = [
-    '#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe', '#00f2fe',
-    '#43e97b', '#38f9d7', '#fa7093', '#fee140', '#a8edea', '#fed6e3'
-];
-// Initialize the dashboard
-document.addEventListener('DOMContentLoaded', function() {
-    loadData();
-    setupEventListeners();
-});
-// Load training data from JSON file
-async function loadData() {
-    try {
-        const response = await fetch('data.json');
-        trainingData = await response.json();
-        // Merge continuation logs from the same model run
-        mergeContinuationLogs();
-        populateRunSelector();
-        createCharts();
-        updateRunSummary();
-        updateConfigDetails();
-        console.log('Data loaded and merged successfully:', trainingData);
-    } catch (error) {
-        console.error('Error loading data:', error);
-        document.body.innerHTML = '<div class="loading">Error loading training data. Please check the console for details.</div>';
-    }
-}
-// Merge continuation logs from the same model run
-function mergeContinuationLogs() {
-    const runGroups = {};
-    // Group runs by base model name
-    trainingData.runs.forEach(run => {
-        const baseName = run.run_name;
-        if (!runGroups[baseName]) {
-            runGroups[baseName] = [];
-        }
-        runGroups[baseName].push(run);
-    });
-    // Merge runs with the same base name
-    const mergedRuns = [];
-    Object.entries(runGroups).forEach(([baseName, runs]) => {
-        if (runs.length === 1) {
-            // Single run, no merging needed
-            mergedRuns.push(runs[0]);
-        } else {
-            // Multiple runs to merge
-            console.log(`Merging ${runs.length} continuation logs for ${baseName}`);
-            const mergedRun = {
-                run_name: baseName,
-                log_files: runs.map(r => r.log_file),
-                training_metrics: [],
-                evaluation_results: [],
-                config: runs[0].config || {}
-            };
-            // Merge training metrics (they should be continuous)
-            runs.forEach(run => {
-                if (run.training_metrics) {
-                    mergedRun.training_metrics.push(...run.training_metrics);
-                }
-            });
-            // Merge evaluation results (they should be continuous)
-            runs.forEach(run => {
-                if (run.evaluation_results) {
-                    mergedRun.evaluation_results.push(...run.evaluation_results);
-                }
-            });
-            // Sort by step number to ensure proper ordering
-            mergedRun.training_metrics.sort((a, b) => a.step - b.step);
-            mergedRun.evaluation_results.sort((a, b) => a.step - b.step);
-            // Remove duplicates based on step number
-            mergedRun.training_metrics = mergedRun.training_metrics.filter((metric, index, self) =>
-                index === 0 || metric.step !== self[index - 1].step
-            );
-            mergedRun.evaluation_results = mergedRun.evaluation_results.filter((result, index, self) =>
-                index === 0 || result.step !== self[index - 1].step
-            );
-            console.log(`Merged ${baseName}: ${mergedRun.training_metrics.length} training points, ${mergedRun.evaluation_results.length} eval points`);
-            mergedRuns.push(mergedRun);
-        }
-    });
-    trainingData.runs = mergedRuns;
-}
-// Setup event listeners for controls
-function setupEventListeners() {
-    document.getElementById('runSelect').addEventListener('change', function() {
-        updateCharts();
-        updateRunSummary();
-        updateConfigDetails();
-    });
-    document.getElementById('showTraining').addEventListener('change', updateCharts);
-    document.getElementById('showLearningRate').addEventListener('change', updateCharts);
-    document.getElementById('showEvaluation').addEventListener('change', updateCharts);
-}
-// Populate run selector dropdown
-function populateRunSelector() {
-    const select = document.getElementById('runSelect');
-    const runs = trainingData.runs;
-    // Clear existing options
-    select.innerHTML = '<option value="all">All Runs</option>';
-    runs.forEach((run, index) => {
-        const option = document.createElement('option');
-        option.value = index;
-        option.textContent = run.run_name;
-        select.appendChild(option);
-    });
-}
-// Create all charts
-function createCharts() {
-    createLossChart();
-    createLRChart();
-    createEvalChart();
-    createCombinedChart();
-}
-// Create training loss chart
-function createLossChart() {
-    const ctx = document.getElementById('lossChart').getContext('2d');
-    charts.loss = new Chart(ctx, {
-        type: 'line',
-        data: getChartData('loss'),
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: {
-                title: {
-                    display: true,
-                    text: 'Training Loss Over Time'
-                },
-                legend: {
-                    position: 'top'
-                }
-            },
-            scales: {
-                x: {
-                    type: 'linear',
-                    title: {
-                        display: true,
-                        text: 'Training Step'
-                    }
-                },
-                y: {
-                    title: {
-                        display: true,
-                        text: 'Loss'
-                    },
-                    beginAtZero: false
-                }
-            },
-            interaction: {
-                intersect: false,
-                mode: 'index'
-            }
-        }
-    });
-}
-// Create learning rate chart
-function createLRChart() {
-    const ctx = document.getElementById('lrChart').getContext('2d');
-    charts.lr = new Chart(ctx, {
-        type: 'line',
-        data: getChartData('lr'),
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: {
-                title: {
-                    display: true,
-                    text: 'Learning Rate Schedule'
-                },
-                legend: {
-                    position: 'top'
-                }
-            },
-            scales: {
-                x: {
-                    type: 'linear',
-                    title: {
-                        display: true,
-                        text: 'Training Step'
-                    }
-                },
-                y: {
-                    title: {
-                        display: true,
-                        text: 'Learning Rate'
-                    },
-                    type: 'logarithmic'
-                }
-            },
-            interaction: {
-                intersect: false,
-                mode: 'index'
-            }
-        }
-    });
-}
-// Create evaluation chart
-function createEvalChart() {
-    const ctx = document.getElementById('evalChart').getContext('2d');
-    charts.eval = new Chart(ctx, {
-        type: 'line',
-        data: getChartData('eval'),
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: {
-                title: {
-                    display: true,
-                    text: 'Paloma Evaluation Metrics'
-                },
-                legend: {
-                    position: 'top'
-                }
-            },
-            scales: {
-                x: {
-                    type: 'linear',
-                    title: {
-                        display: true,
-                        text: 'Training Step'
-                    }
-                },
-                y: {
-                    title: {
-                        display: true,
-                        text: 'Perplexity'
-                    },
-                    type: 'logarithmic'
-                }
-            },
-            interaction: {
-                intersect: false,
-                mode: 'index'
-            }
-        }
-    });
-}
-// Create combined chart
-function createCombinedChart() {
-    const ctx = document.getElementById('combinedChart').getContext('2d');
-    charts.combined = new Chart(ctx, {
-        type: 'line',
-        data: getCombinedChartData(),
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: {
-                title: {
-                    display: true,
-                    text: 'Combined Training Metrics'
-                },
-                legend: {
-                    position: 'top'
-                }
-            },
-            scales: {
-                x: {
-                    type: 'linear',
-                    title: {
-                        display: true,
-                        text: 'Training Step'
-                    }
-                },
-                y: {
-                    title: {
-                        display: true,
-                        text: 'Value'
-                    }
-                }
-            },
-            interaction: {
-                intersect: false,
-                mode: 'index'
-            }
-        }
-    });
-}
-// Get chart data for specific metric type
-function getChartData(metricType) {
-    const selectedRun = document.getElementById('runSelect').value;
-    const runs = selectedRun === 'all' ? trainingData.runs : [trainingData.runs[selectedRun]];
-    const datasets = [];
-    console.log(`Getting ${metricType} data for ${runs.length} runs:`, runs.map(r => r.run_name));
-    runs.forEach((run, runIndex) => {
-        const color = colors[runIndex % colors.length];
-        if (metricType === 'loss') {
-            if (run.training_metrics && run.training_metrics.length > 0) {
-                const data = run.training_metrics.map(m => ({ x: m.step, y: m.loss }));
-                console.log(`Loss data for ${run.run_name}:`, data.slice(0, 5), '...', data.slice(-5));
-                datasets.push({
-                    label: run.run_name,
-                    data: data,
-                    borderColor: color,
-                    backgroundColor: color + '20',
-                    borderWidth: 2,
-                    fill: false,
-                    tension: 0.1
-                });
-            }
-        } else if (metricType === 'lr') {
-            if (run.training_metrics && run.training_metrics.length > 0) {
-                const data = run.training_metrics.map(m => ({ x: m.step, y: m.learning_rate }));
-                console.log(`LR data for ${run.run_name}:`, data.slice(0, 5), '...', data.slice(-5));
-                datasets.push({
-                    label: run.run_name,
-                    data: data,
-                    borderColor: color,
-                    backgroundColor: color + '20',
-                    borderWidth: 2,
-                    fill: false,
-                    tension: 0.1
-                });
-            }
-        } else if (metricType === 'eval') {
-            if (run.evaluation_results && run.evaluation_results.length > 0) {
-                const data = run.evaluation_results.map(m => ({ x: m.step, y: m.paloma }));
-                console.log(`Eval data for ${run.run_name}:`, data.slice(0, 5), '...', data.slice(-5));
-                datasets.push({
-                    label: run.run_name,
-                    data: data,
-                    borderColor: color,
-                    backgroundColor: color + '20',
-                    borderWidth: 2,
-                    fill: false,
-                    tension: 0.1
-                });
-            }
-        }
-    });
-    console.log(`Final ${metricType} datasets:`, datasets);
-    return { datasets };
-}
-// Get combined chart data
-function getCombinedChartData() {
-    const selectedRun = document.getElementById('runSelect').value;
-    const runs = selectedRun === 'all' ? trainingData.runs : [trainingData.runs[selectedRun]];
-    const datasets = [];
-    runs.forEach((run, runIndex) => {
-        const color = colors[runIndex % colors.length];
-        // Training loss
-        if (run.training_metrics && run.training_metrics.length > 0) {
-            datasets.push({
-                label: `${run.run_name} - Loss`,
-                data: run.training_metrics.map(m => ({ x: m.step, y: m.loss })),
-                borderColor: color,
-                backgroundColor: color + '20',
-                borderWidth: 2,
-                fill: false,
-                tension: 0.1
-            });
-        }
-        // Learning rate (scaled)
-        if (run.training_metrics && run.training_metrics.length > 0) {
-            const maxLR = Math.max(...run.training_metrics.map(m => m.learning_rate));
-            const maxLoss = Math.max(...run.training_metrics.map(m => m.loss));
-            const scaleFactor = maxLoss / maxLR;
-            datasets.push({
-                label: `${run.run_name} - LR (scaled)`,
-                data: run.training_metrics.map(m => ({ x: m.step, y: m.learning_rate * scaleFactor })),
-                borderColor: color + '80',
-                backgroundColor: color + '10',
-                borderWidth: 1,
-                fill: false,
-                tension: 0.1
-            });
-        }
-    });
-    return { datasets };
-}
-// Update all charts based on current selection
-function updateCharts() {
-    if (charts.loss) {
-        charts.loss.data = getChartData('loss');
-        charts.loss.update();
-    }
-    if (charts.lr) {
-        charts.lr.data = getChartData('lr');
-        charts.lr.update();
-    }
-    if (charts.eval) {
-        charts.eval.data = getChartData('eval');
-        charts.eval.update();
-    }
-    if (charts.combined) {
-        charts.combined.data = getCombinedChartData();
-        charts.combined.update();
-    }
-}
-// Update run summary section
-function updateRunSummary() {
-    const container = document.getElementById('runSummary');
-    const selectedRun = document.getElementById('runSelect').value;
-    const runs = selectedRun === 'all' ? trainingData.runs : [trainingData.runs[selectedRun]];
-    let html = '<div class="run-grid">';
-    runs.forEach(run => {
-        const trainingPoints = run.training_metrics ? run.training_metrics.length : 0;
-        const evalPoints = run.evaluation_results ? run.evaluation_results.length : 0;
-        let finalLoss = 'N/A';
-        let finalLR = 'N/A';
-        let finalPaloma = 'N/A';
-        let stepRange = 'N/A';
-        if (run.training_metrics && run.training_metrics.length > 0) {
-            const first = run.training_metrics[0];
-            const last = run.training_metrics[run.training_metrics.length - 1];
-            finalLoss = last.loss.toFixed(4);
-            finalLR = last.learning_rate.toExponential(2);
-            stepRange = `${first.step} → ${last.step}`;
-        }
-        if (run.evaluation_results && run.evaluation_results.length > 0) {
-            const last = run.evaluation_results[run.evaluation_results.length - 1];
-            if (isFinite(last.paloma)) {
-                finalPaloma = last.paloma.toExponential(2);
-            } else {
-                finalPaloma = '∞';
-            }
-        }
-        const logFiles = run.log_files ? run.log_files.join(', ') : run.log_file;
-        html += `
-            <div class="run-card">
-                <h4>${run.run_name}</h4>
-                <p><strong>Logs:</strong> ${logFiles}</p>
-                <div class="metric">
-                    <span>Step Range:</span>
-                    <span class="value">${stepRange}</span>
-                </div>
-                <div class="metric">
-                    <span>Training Points:</span>
-                    <span class="value">${trainingPoints}</span>
-                </div>
-                <div class="metric">
-                    <span>Evaluation Points:</span>
-                    <span class="value">${evalPoints}</span>
-                </div>
-                <div class="metric">
-                    <span>Final Loss:</span>
-                    <span class="value">${finalLoss}</span>
-                </div>
-                <div class="metric">
-                    <span>Final LR:</span>
-                    <span class="value">${finalLR}</span>
-                </div>
-                <div class="metric">
-                    <span>Final Paloma:</span>
-                    <span class="value">${finalPaloma}</span>
-                </div>
-            </div>
-        `;
-    });
-    html += '</div>';
-    container.innerHTML = html;
-}
-// Update configuration details section
-function updateConfigDetails() {
-    const container = document.getElementById('configDetails');
-    const selectedRun = document.getElementById('runSelect').value;
-    const runs = selectedRun === 'all' ? trainingData.runs : [trainingData.runs[selectedRun]];
-    let html = '<div class="config-grid">';
-    // Get unique config keys
-    const allKeys = new Set();
-    runs.forEach(run => {
-        if (run.config) {
-            Object.keys(run.config).forEach(key => allKeys.add(key));
-        }
-    });
-    allKeys.forEach(key => {
-        const values = runs.map(run => run.config && run.config[key] !== undefined ? run.config[key] : 'N/A');
-        const uniqueValues = [...new Set(values)];
-        const displayValue = uniqueValues.length === 1 ? uniqueValues[0] : `${uniqueValues.join(' / ')}`;
-        html += `
-            <div class="config-item">
-                <div class="label">${key.replace(/_/g, ' ').toUpperCase()}</div>
-                <div class="value">${displayValue}</div>
-            </div>
-        `;
-    });
-    html += '</div>';
-    container.innerHTML = html;
-}
-// Utility function to format large numbers
-function formatNumber(num) {
-    if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B';
-    if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
-    if (num >= 1e3) return (num / 1e3).toFixed(2) + 'K';
-    return num.toString();
-}

plots/data.json DELETED Viewed

The diff for this file is too large to render. See raw diff

plots/index.html DELETED Viewed

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pico Training Metrics Dashboard</title>
-    <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-</head>
-<body>
-    <div class="container">
-        <header>
-            <h1>🚀 Pico Training Metrics Dashboard</h1>
-            <p>Real-time visualization of training progress across all model runs</p>
-        </header>
-        <div class="controls">
-            <div class="run-selector">
-                <label for="runSelect">Select Run:</label>
-                <select id="runSelect">
-                    <option value="all">All Runs</option>
-                </select>
-            </div>
-            <div class="metric-toggle">
-                <label>
-                    <input type="checkbox" id="showTraining" checked> Training Loss
-                </label>
-                <label>
-                    <input type="checkbox" id="showLearningRate" checked> Learning Rate
-                </label>
-                <label>
-                    <input type="checkbox" id="showEvaluation" checked> Paloma Evaluation
-                </label>
-            </div>
-        </div>
-        <div class="charts-container">
-            <div class="chart-card">
-                <h3>📈 Training Loss Over Time</h3>
-                <canvas id="lossChart"></canvas>
-            </div>
-            <div class="chart-card">
-                <h3>🎯 Learning Rate Schedule</h3>
-                <canvas id="lrChart"></canvas>
-            </div>
-            <div class="chart-card">
-                <h3>📊 Paloma Evaluation Metrics</h3>
-                <canvas id="evalChart"></canvas>
-            </div>
-            <div class="chart-card">
-                <h3>🔄 Combined View</h3>
-                <canvas id="combinedChart"></canvas>
-            </div>
-        </div>
-        <div class="run-summary">
-            <h3>📋 Run Summary</h3>
-            <div id="runSummary"></div>
-        </div>
-        <div class="config-details">
-            <h3>⚙️ Model Configuration</h3>
-            <div id="configDetails"></div>
-        </div>
-    </div>
-    <script src="code.js"></script>
-</body>
-</html>

plots/style.css DELETED Viewed

@@ -1,258 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
-    color: #333;
-}
-.container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 20px;
-}
-header {
-    text-align: center;
-    margin-bottom: 30px;
-    color: white;
-}
-header h1 {
-    font-size: 2.5rem;
-    margin-bottom: 10px;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-}
-header p {
-    font-size: 1.1rem;
-    opacity: 0.9;
-}
-.controls {
-    background: white;
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-    margin-bottom: 30px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 20px;
-}
-.run-selector select {
-    padding: 8px 16px;
-    border: 2px solid #e1e5e9;
-    border-radius: 8px;
-    font-size: 14px;
-    background: white;
-    cursor: pointer;
-    transition: border-color 0.3s ease;
-}
-.run-selector select:focus {
-    outline: none;
-    border-color: #667eea;
-}
-.metric-toggle {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
-}
-.metric-toggle label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    font-weight: 500;
-    color: #555;
-}
-.metric-toggle input[type="checkbox"] {
-    width: 18px;
-    height: 18px;
-    accent-color: #667eea;
-}
-.charts-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
-    gap: 30px;
-    margin-bottom: 30px;
-}
-.chart-card {
-    background: white;
-    padding: 25px;
-    border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-.chart-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
-}
-.chart-card h3 {
-    margin-bottom: 20px;
-    color: #333;
-    font-size: 1.2rem;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.chart-card canvas {
-    max-height: 400px;
-    width: 100% !important;
-}
-.run-summary, .config-details {
-    background: white;
-    padding: 25px;
-    border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-    margin-bottom: 30px;
-}
-.run-summary h3, .config-details h3 {
-    margin-bottom: 20px;
-    color: #333;
-    font-size: 1.2rem;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.run-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 20px;
-}
-.run-card {
-    background: #f8f9fa;
-    padding: 20px;
-    border-radius: 8px;
-    border-left: 4px solid #667eea;
-}
-.run-card h4 {
-    color: #667eea;
-    margin-bottom: 10px;
-    font-size: 1.1rem;
-}
-.run-card p {
-    margin-bottom: 8px;
-    color: #666;
-    font-size: 0.9rem;
-}
-.run-card .metric {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 5px;
-}
-.run-card .metric .value {
-    font-weight: 600;
-    color: #333;
-}
-.config-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 15px;
-}
-.config-item {
-    background: #f8f9fa;
-    padding: 15px;
-    border-radius: 8px;
-    text-align: center;
-}
-.config-item .label {
-    font-size: 0.8rem;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 5px;
-}
-.config-item .value {
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: #333;
-}
-@media (max-width: 768px) {
-    .container {
-        padding: 15px;
-    }
-    header h1 {
-        font-size: 2rem;
-    }
-    .controls {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    .charts-container {
-        grid-template-columns: 1fr;
-    }
-    .chart-card {
-        padding: 20px;
-    }
-    .run-grid, .config-grid {
-        grid-template-columns: 1fr;
-    }
-}
-/* Chart.js customizations */
-.chartjs-tooltip {
-    background: rgba(0,0,0,0.8) !important;
-    color: white !important;
-    border-radius: 8px !important;
-    padding: 10px !important;
-    font-size: 12px !important;
-}
-/* Loading state */
-.loading {
-    text-align: center;
-    padding: 40px;
-    color: #666;
-}
-.loading::after {
-    content: '';
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 3px solid #f3f3f3;
-    border-top: 3px solid #667eea;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-left: 10px;
-}
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}