Update index.html

index.html

@@ -34,7 +34,6 @@
             --gradient-info: linear-gradient(135deg, var(--color-info) 0%, #3182ce 100%);
             --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, #dd6b20 100%);
             --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, #e53e3e 100%);
-
             /* Typography */
             --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
             --font-size-base: 16px;
@@ -42,7 +41,6 @@
             --font-weight-medium: 500;
             --font-weight-semibold: 600;
             --font-weight-bold: 700;
-
             /* Spacing & Sizing */
             --spacing-xs: 0.25rem; /* 4px */
             --spacing-sm: 0.5rem;  /* 8px */
@@ -56,7 +54,6 @@
             --transition-duration: 0.3s;
             --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
         }
-
         /*
          * =================================================================================================
          * 2. GLOBAL STYLES & RESETS
@@ -69,11 +66,9 @@
             box-sizing: border-box;
             user-select: none;
         }
-
         html {
             scroll-behavior: smooth;
         }
-
         body {
             font-family: var(--font-family-sans);
             background-color: var(--color-background);
@@ -83,12 +78,10 @@
             min-height: 100vh;
             padding: var(--spacing-xl) var(--spacing-md);
         }
-
         .container {
             max-width: var(--container-width);
             margin: 0 auto;
         }
-
         /*
          * =================================================================================================
          * 3. TYPOGRAPHY
@@ -104,24 +97,20 @@
             text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
             text-transform: capitalize;
         }
-
         .subtitle-group {
             text-align: center;
             margin-bottom: var(--spacing-xl);
         }
-
         .subtitle {
             color: var(--color-text-secondary);
             font-size: 1.1rem;
             line-height: 1.5;
         }
-
         .subtitle-meta {
             color: #555;
             font-size: 0.9rem;
             margin-top: var(--spacing-xs);
         }
-
         /*
          * =================================================================================================
          * 4. TABLE STYLES
@@ -136,13 +125,11 @@
             overflow: hidden;
             animation: fadeIn 0.6s ease-out;
         }
-
         table {
             width: 100%;
             border-collapse: collapse;
             text-align: left;
         }
-
         thead {
             background: var(--gradient-accent);
             color: white;
@@ -151,7 +138,6 @@
             top: 0;
             z-index: 10;
         }
-
         th {
             padding: var(--spacing-md);
             font-weight: var(--font-weight-semibold);
@@ -161,26 +147,21 @@
             text-align: center;
             user-select: none; /* Good place for this, prevents selecting header text by accident */
         }
-
         th:first-child, td:first-child { text-align: center; }
         th:last-child, td:last-child { text-align: center; }
-
         tbody tr {
             border-bottom: 1px solid var(--color-border);
             /* IMPROVEMENT: Transition specific properties for better performance than 'all' */
             transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;
         }
-
         tbody tr:hover {
             background-color: rgba(255, 255, 255, 0.03);
             /* IMPROVEMENT: 'translateY' is often smoother and less jarring than 'scale' */
             transform: translateY(-2px);
         }
-
         tbody tr:last-child {
             border-bottom: none;
         }
-
         td {
             padding: var(--spacing-lg) var(--spacing-md);
             font-size: 0.95rem;
@@ -196,21 +177,18 @@
             background-clip: text;
             padding-right: var(--spacing-sm);
         }
-
         .model-name {
             text-align: center;
             font-weight: var(--font-weight-semibold);
             color: var(--color-text-primary);
             font-size: 1rem;
         }
-
         .score {
             font-weight: var(--font-weight-bold);
             font-size: 0.9rem;
             text-align: center;
             color: var(--color-text-secondary);
         }
-
         .progress-container {
             width: 100%;
             height: 8px;
@@ -219,24 +197,20 @@
             overflow: hidden;
             margin-top: var(--spacing-sm);
         }
-
         .progress-bar {
             height: 100%;
             background: white;
             border-radius: 99px;
             animation: fillBar 1.5s cubic-bezier(0.25, 1, 0.5, 1); /* Use a more dynamic easing function */
         }
-
         .performance-notes { font-size: 0.85rem; line-height: 1.5; }
         
         /* IMPROVEMENT: DRY principle. Shared styles for strengths/weaknesses. */
         .strengths, .weaknesses {
             font-weight: var(--font-weight-medium);
         }
-
         .strengths { color: var(--color-success); }
         .weaknesses { color: var(--color-danger); }
-
         /*
          * =================================================================================================
          * 5. COMPONENTS (Badges & Legend)
@@ -256,13 +230,11 @@
             color: white;
             white-space: nowrap;
         }
-
         /* Modifier classes for colors */
         .badge--excellent { background: var(--gradient-success); }
         .badge--good { background: var(--gradient-info); }
         .badge--average { background: var(--gradient-warning); }
         .badge--poor { background: var(--gradient-danger); }
-
         .legend {
             display: flex;
             justify-content: center;
@@ -270,20 +242,17 @@
             margin-top: var(--spacing-xl);
             flex-wrap: wrap;
         }
-
         .legend-item {
             display: flex;
             align-items: center;
             gap: var(--spacing-sm);
             font-size: 0.9rem;
         }
-
         .legend-color {
             width: 30px;
             height: 8px;
             border-radius: 4px;
         }
-
         /*
          * =================================================================================================
          * 6. ANIMATIONS & MEDIA QUERIES
@@ -293,11 +262,9 @@
             from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
         }
-
         @keyframes fillBar {
             from { width: 0; }
         }
-
         /* Responsive adjustments */
         @media (max-width: 768px) {
             body { padding: var(--spacing-xl) var(--spacing-sm); }
@@ -305,22 +272,18 @@
             h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
             
             .subtitle { font-size: 1rem; }
-
             th, td {
                 padding: var(--spacing-md) var(--spacing-sm);
                 font-size: 0.85rem;
             }
-
             .table-wrapper {
                 /* On mobile, allow the table itself to scroll horizontally */
                 overflow-x: auto;
             }
-
             table {
                 /* Ensure table has a minimum width to make scrolling meaningful */
                 min-width: 600px;
             }
-
             .legend {
                 flex-direction: column;
                 align-items: center;
@@ -396,24 +359,20 @@
             { rank: 15, name: "Llama-3.2-SUN-HDIC-1B-Instruct.Q8_0.gguf", score: 79, strengths: "Strong in synonyms, math, and factual recall; decent at core NLP.", weaknesses: "Complete failure at summarization and misconception correction; bad factual hallucinations." },
             { rank: 16, name: "Piaget-0.6B.Q8_0.gguf", score: 78, strengths: "Excellent at core knowledge tasks: Sentiment, Object Location, Antonyms, Categorization, Math, Factual QA.", weaknesses: "Complete failure at Summarization, Sequencing, and Rhyming. Very poor at Grammar and Misconception Correction." },
             { rank: 17, name: "lfm2-700m", score: 75.5, strengths: "Handles sentiment, math, and logic correctly.", weaknesses: "Many failures in reasoning (cause/effect), tool use, synonyms, and grammar." },
-            { rank: 18, name: "Qwen3-psychological-reasoning-0.6B.Q8_0.gguf", score: 73, strengths: "Excels at factual recall and classification (Sentiment, Object Location, Math, Factual QA, NER).", weaknesses: "Very poor at reasoning and creativity; complete failure in summarization, sequencing, and rhyming." },
-            { rank: 19, name: "qwen2.5-0.5b-instruct", score: 72, strengths: "Decent at math, basic commands, and some logic.", weaknesses: "Fails creative tasks (rhyming, synonyms) and suffers major headline hallucinations." },
-            { rank: 20, name: "qwen3-0.6b-notetaker-q8_0.gguf", score: 71, strengths: "Excels at a wide range of core knowledge and classification tasks (sentiment, math, NER, factual QA).", weaknesses: "Complete failure at complex reasoning, creativity, and nuanced language (cause/effect, idioms, sequencing)." }
+            { rank: 18, name: "granite-4.0-350m-q8_0.gguf", score: 75.0, strengths: "Perfect translation and math; strong vocabulary (synonyms/antonyms) and common-sense knowledge.", weaknesses: "Complete failure on grammar correction; severe factual hallucinations in summarization; weak sequencing." },
+            { rank: 19, name: "Qwen3-psychological-reasoning-0.6B.Q8_0.gguf", score: 73, strengths: "Excels at factual recall and classification (Sentiment, Object Location, Math, Factual QA, NER).", weaknesses: "Very poor at reasoning and creativity; complete failure in summarization, sequencing, and rhyming." },
+            { rank: 20, name: "qwen2.5-0.5b-instruct", score: 72, strengths: "Decent at math, basic commands, and some logic.", weaknesses: "Fails creative tasks (rhyming, synonyms) and suffers major headline hallucinations." }
         ];
-
         const maxScore = 125;
-
         function getRatingBadge(score) {
             if (score >= 108) return '<span class="badge badge--excellent">Excellent</span>';
             if (score >= 91) return '<span class="badge badge--good">Good</span>';
             if (score >= 75) return '<span class="badge badge--average">Average</span>';
             return '<span class="badge badge--poor">Poor</span>';
         }
-
         function populateTable() {
             const tbody = document.querySelector('#performanceTable tbody');
             const top20Models = models.slice(0, 20);
-
             top20Models.forEach((model, index) => {
                 const percentage = (model.score / maxScore) * 100;
                 const row = document.createElement('tr');
@@ -439,7 +398,6 @@
                 tbody.appendChild(row);
             });
         }
-
         document.addEventListener('DOMContentLoaded', populateTable);
     </script>
 </body>