Update index.html

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FlameF0X/SnowflakeCore-G1-Tiny Benchmark Report</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
     <style>
         * {
             margin: 0;
@@ -441,186 +441,187 @@
     </div>
 
     <script>
-        // Professional chart configuration
-        const baseConfig = {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: {
-                legend: {
-                    display: true,
-                    position: 'top',
-                    labels: {
-                        padding: 20,
-                        font: {
-                            size: 12,
-                            family: 'system-ui'
-                        },
-                        color: '#495057'
-                    }
-                }
-            },
-            scales: {
-                y: {
-                    beginAtZero: true,
-                    grid: {
-                        color: '#e9ecef',
-                        borderColor: '#dee2e6'
-                    },
-                    ticks: {
-                        font: {
-                            size: 11,
-                            family: 'system-ui'
-                        },
-                        color: '#6c757d'
-                    }
-                },
-                x: {
-                    grid: {
-                        color: '#e9ecef',
-                        borderColor: '#dee2e6'
-                    },
-                    ticks: {
-                        font: {
-                            size: 11,
-                            family: 'system-ui'
-                        },
-                        color: '#6c757d'
-                    }
-                }
+        // Wait for DOM and Chart.js to load
+        document.addEventListener('DOMContentLoaded', function() {
+            // Check if Chart.js is loaded
+            if (typeof Chart === 'undefined') {
+                console.error('Chart.js failed to load');
+                return;
             }
-        };
-
-        // Generation Speed Chart
-        new Chart(document.getElementById('speedChart'), {
-            type: 'bar',
-            data: {
-                labels: ['SnowflakeCore-G1-Tiny', 'GPT-2 Baseline'],
-                datasets: [{
-                    label: 'Tokens/Second',
-                    data: [57.26, 45.0],
-                    backgroundColor: ['#2c3e50', '#6c757d'],
-                    borderColor: ['#34495e', '#6c757d'],
-                    borderWidth: 1
-                }]
-            },
-            options: baseConfig
-        });
 
-        // Model Size Chart
-        new Chart(document.getElementById('sizeChart'), {
-            type: 'doughnut',
-            data: {
-                labels: ['SnowflakeCore-G1-Tiny (1.36GB)', 'GPT-2 Baseline (0.55GB)'],
-                datasets: [{
-                    data: [1357.54, 548.0],
-                    backgroundColor: ['#2c3e50', '#adb5bd'],
-                    borderWidth: 2,
-                    borderColor: '#fff'
-                }]
-            },
-            options: {
+            // Professional chart configuration
+            const baseConfig = {
                 responsive: true,
                 maintainAspectRatio: false,
                 plugins: {
                     legend: {
-                        position: 'bottom',
+                        display: true,
+                        position: 'top',
                         labels: {
                             padding: 20,
                             font: {
-                                size: 11,
-                                family: 'system-ui'
-                            }
+                                size: 12
+                            },
+                            color: '#495057'
                         }
                     }
-                }
-            }
-        });
-
-        // Task Accuracy Chart
-        new Chart(document.getElementById('accuracyChart'), {
-            type: 'bar',
-            data: {
-                labels: ['GSM8K', 'MMLU', 'HumanEval'],
-                datasets: [{
-                    label: 'SnowflakeCore-G1-Tiny',
-                    data: [20.0, 0.0, 0.0],
-                    backgroundColor: '#2c3e50',
-                    borderColor: '#34495e',
-                    borderWidth: 1
-                }, {
-                    label: 'GPT-2 Baseline',
-                    data: [15.0, 5.0, 2.0],
-                    backgroundColor: '#6c757d',
-                    borderColor: '#6c757d',
-                    borderWidth: 1
-                }]
-            },
-            options: {
-                ...baseConfig,
+                },
                 scales: {
-                    ...baseConfig.scales,
                     y: {
-                        ...baseConfig.scales.y,
-                        max: 100,
+                        beginAtZero: true,
+                        grid: {
+                            color: '#e9ecef',
+                            borderColor: '#dee2e6'
+                        },
                         ticks: {
-                            ...baseConfig.scales.y.ticks,
-                            callback: function(value) {
-                                return value + '%';
-                            }
-                        }
-                    }
-                }
-            }
-        });
-
-        // Memory Usage Chart
-        new Chart(document.getElementById('memoryChart'), {
-            type: 'line',
-            data: {
-                labels: ['128', '512', '1024', '2048'],
-                datasets: [{
-                    label: 'Peak Memory (GB)',
-                    data: [5.99, 6.04, 6.12, 6.35],
-                    borderColor: '#2c3e50',
-                    backgroundColor: 'rgba(44, 62, 80, 0.1)',
-                    borderWidth: 2,
-                    fill: true,
-                    tension: 0.2,
-                    pointBackgroundColor: '#2c3e50',
-                    pointBorderColor: '#fff',
-                    pointBorderWidth: 2,
-                    pointRadius: 4
-                }]
-            },
-            options: {
-                ...baseConfig,
-                scales: {
-                    ...baseConfig.scales,
-                    x: {
-                        ...baseConfig.scales.x,
-                        title: {
-                            display: true,
-                            text: 'Sequence Length (tokens)',
                             font: {
-                                size: 12,
-                                family: 'system-ui'
+                                size: 11
                             },
-                            color: '#495057'
+                            color: '#6c757d'
                         }
                     },
-                    y: {
-                        ...baseConfig.scales.y,
-                        title: {
-                            display: true,
-                            text: 'Memory Usage (GB)',
+                    x: {
+                        grid: {
+                            color: '#e9ecef',
+                            borderColor: '#dee2e6'
+                        },
+                        ticks: {
                             font: {
-                                size: 12,
-                                family: 'system-ui'
+                                size: 11
                             },
-                            color: '#495057'
+                            color: '#6c757d'
                         }
                     }
                 }
+            };
+
+            // Generation Speed Chart
+            try {
+                new Chart(document.getElementById('speedChart'), {
+                    type: 'bar',
+                    data: {
+                        labels: ['SnowflakeCore-G1-Tiny', 'GPT-2 Baseline'],
+                        datasets: [{
+                            label: 'Tokens/Second',
+                            data: [57.26, 45.0],
+                            backgroundColor: ['#2c3e50', '#6c757d'],
+                            borderColor: ['#34495e', '#6c757d'],
+                            borderWidth: 1
+                        }]
+                    },
+                    options: baseConfig
+                });
+            } catch(e) {
+                console.error('Error creating speed chart:', e);
+            }
+
+            // Model Size Chart
+            try {
+                new Chart(document.getElementById('sizeChart'), {
+                    type: 'doughnut',
+                    data: {
+                        labels: ['SnowflakeCore-G1-Tiny (1.36GB)', 'GPT-2 Baseline (0.55GB)'],
+                        datasets: [{
+                            data: [1357.54, 548.0],
+                            backgroundColor: ['#2c3e50', '#adb5bd'],
+                            borderWidth: 2,
+                            borderColor: '#fff'
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                                labels: {
+                                    padding: 20,
+                                    font: {
+                                        size: 11
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            } catch(e) {
+                console.error('Error creating size chart:', e);
+            }
+
+            // Task Accuracy Chart
+            try {
+                const accuracyConfig = JSON.parse(JSON.stringify(baseConfig));
+                accuracyConfig.scales.y.max = 100;
+                accuracyConfig.scales.y.ticks.callback = function(value) {
+                    return value + '%';
+                };
+
+                new Chart(document.getElementById('accuracyChart'), {
+                    type: 'bar',
+                    data: {
+                        labels: ['GSM8K', 'MMLU', 'HumanEval'],
+                        datasets: [{
+                            label: 'SnowflakeCore-G1-Tiny',
+                            data: [20.0, 0.0, 0.0],
+                            backgroundColor: '#2c3e50',
+                            borderColor: '#34495e',
+                            borderWidth: 1
+                        }, {
+                            label: 'GPT-2 Baseline',
+                            data: [15.0, 5.0, 2.0],
+                            backgroundColor: '#6c757d',
+                            borderColor: '#6c757d',
+                            borderWidth: 1
+                        }]
+                    },
+                    options: accuracyConfig
+                });
+            } catch(e) {
+                console.error('Error creating accuracy chart:', e);
+            }
+
+            // Memory Usage Chart
+            try {
+                const memoryConfig = JSON.parse(JSON.stringify(baseConfig));
+                memoryConfig.scales.x.title = {
+                    display: true,
+                    text: 'Sequence Length (tokens)',
+                    font: {
+                        size: 12
+                    },
+                    color: '#495057'
+                };
+                memoryConfig.scales.y.title = {
+                    display: true,
+                    text: 'Memory Usage (GB)',
+                    font: {
+                        size: 12
+                    },
+                    color: '#495057'
+                };
+
+                new Chart(document.getElementById('memoryChart'), {
+                    type: 'line',
+                    data: {
+                        labels: ['128', '512', '1024', '2048'],
+                        datasets: [{
+                            label: 'Peak Memory (GB)',
+                            data: [5.99, 6.04, 6.12, 6.35],
+                            borderColor: '#2c3e50',
+                            backgroundColor: 'rgba(44, 62, 80, 0.1)',
+                            borderWidth: 2,
+                            fill: true,
+                            tension: 0.2,
+                            pointBackgroundColor: '#2c3e50',
+                            pointBorderColor: '#fff',
+                            pointBorderWidth: 2,
+                            pointRadius: 4
+                        }]
+                    },
+                    options: memoryConfig
+                });
+            } catch(e) {
+                console.error('Error creating memory chart:', e);
             }
         });
     </script>