Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
Commit ·
76ee1db
1
Parent(s): 3c5f057
added leaderboard exploration section in about
Browse files- frontend/about.html +95 -0
frontend/about.html
CHANGED
|
@@ -75,6 +75,101 @@
|
|
| 75 |
</div>
|
| 76 |
</section>
|
| 77 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 78 |
<!-- Benchmarks & Metrics -->
|
| 79 |
<section
|
| 80 |
class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
|
|
|
|
| 75 |
</div>
|
| 76 |
</section>
|
| 77 |
|
| 78 |
+
<!-- Exploring the Leaderboard -->
|
| 79 |
+
<section
|
| 80 |
+
class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
|
| 81 |
+
<div class="flex items-center gap-3 mb-4">
|
| 82 |
+
<div class="p-2 bg-orange-100 dark:bg-orange-900/50 rounded-lg text-orange-600 dark:text-orange-400">
|
| 83 |
+
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
|
| 84 |
+
</div>
|
| 85 |
+
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Exploring the Leaderboard</h2>
|
| 86 |
+
</div>
|
| 87 |
+
<!-- Group 1: Finding Models -->
|
| 88 |
+
<div class="mb-6">
|
| 89 |
+
<p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Finding Models</p>
|
| 90 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
| 91 |
+
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
|
| 92 |
+
<div class="flex items-center gap-2 mb-2">
|
| 93 |
+
<i data-lucide="search" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
|
| 94 |
+
<h4 class="font-bold text-slate-800 dark:text-slate-200">Search</h4>
|
| 95 |
+
</div>
|
| 96 |
+
<p class="text-sm text-slate-600 dark:text-slate-400">Instantly find any model by typing the <strong class="font-semibold text-slate-700 dark:text-slate-300">name or organization</strong></p>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
|
| 99 |
+
<div class="flex items-center gap-2 mb-2">
|
| 100 |
+
<i data-lucide="sliders-horizontal" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
|
| 101 |
+
<h4 class="font-bold text-slate-800 dark:text-slate-200">Model Filters</h4>
|
| 102 |
+
</div>
|
| 103 |
+
<p class="text-sm text-slate-600 dark:text-slate-400">Filter by <strong class="font-semibold text-slate-700 dark:text-slate-300">model type</strong>, <strong class="font-semibold text-slate-700 dark:text-slate-300">model size</strong>, <strong class="font-semibold text-slate-700 dark:text-slate-300">organization</strong>, and <strong class="font-semibold text-slate-700 dark:text-slate-300">license</strong> to narrow comparisons to exactly the model families you care about.</p>
|
| 104 |
+
</div>
|
| 105 |
+
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
|
| 106 |
+
<div class="flex items-center gap-2 mb-2">
|
| 107 |
+
<i data-lucide="filter" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
|
| 108 |
+
<h4 class="font-bold text-slate-800 dark:text-slate-200">Benchmark Filters</h4>
|
| 109 |
+
</div>
|
| 110 |
+
<p class="text-sm text-slate-600 dark:text-slate-400">Filter by <strong class="font-semibold text-slate-700 dark:text-slate-300">task type</strong> (MCQ, QA, Code) or <strong class="font-semibold text-slate-700 dark:text-slate-300">domain</strong> (STEM, Medical, Legal, Cultural, etc.) to focus on evaluation dimensions most relevant to your work.</p>
|
| 111 |
+
</div>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
|
| 115 |
+
<!-- Group 2: Controlling the View -->
|
| 116 |
+
<div class="mb-6">
|
| 117 |
+
<p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Controlling the View</p>
|
| 118 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
| 119 |
+
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
|
| 120 |
+
<div class="flex items-center gap-2 mb-2">
|
| 121 |
+
<i data-lucide="eye" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
|
| 122 |
+
<h4 class="font-bold text-slate-800 dark:text-slate-200">Column Visibility</h4>
|
| 123 |
+
</div>
|
| 124 |
+
<p class="text-sm text-slate-600 dark:text-slate-400">Toggle individual <strong class="font-semibold text-slate-700 dark:text-slate-300">benchmark columns</strong> on or off to keep the table focused on the tasks relevant to your evaluation needs.</p>
|
| 125 |
+
</div>
|
| 126 |
+
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
|
| 127 |
+
<div class="flex items-center gap-2 mb-2">
|
| 128 |
+
<i data-lucide="arrow-up-down" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
|
| 129 |
+
<h4 class="font-bold text-slate-800 dark:text-slate-200">Sortable Columns</h4>
|
| 130 |
+
</div>
|
| 131 |
+
<p class="text-sm text-slate-600 dark:text-slate-400">Click any <strong class="font-semibold text-slate-700 dark:text-slate-300">column header</strong> to sort <strong class="font-semibold text-slate-700 dark:text-slate-300">ascending or descending</strong> to immediately see which models lead on any individual benchmark.</p>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
</div>
|
| 135 |
+
|
| 136 |
+
<!-- Group 3: Analyzing Results -->
|
| 137 |
+
<div class="mb-6">
|
| 138 |
+
<p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Analyzing Results</p>
|
| 139 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
| 140 |
+
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
|
| 141 |
+
<div class="flex items-center gap-2 mb-2">
|
| 142 |
+
<i data-lucide="trophy" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
|
| 143 |
+
<h4 class="font-bold text-slate-800 dark:text-slate-200">Ranking Mode</h4>
|
| 144 |
+
</div>
|
| 145 |
+
<p class="text-sm text-slate-600 dark:text-slate-400"><strong class="font-semibold text-slate-700 dark:text-slate-300">Global Rank</strong> shows fixed positions across all benchmarks. <strong class="font-semibold text-slate-700 dark:text-slate-300">Current View Rank</strong> recalculates live based on your active filters and sort.</p>
|
| 146 |
+
</div>
|
| 147 |
+
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
|
| 148 |
+
<div class="flex items-center gap-2 mb-2">
|
| 149 |
+
<i data-lucide="calculator" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
|
| 150 |
+
<h4 class="font-bold text-slate-800 dark:text-slate-200">Filtered Average</h4>
|
| 151 |
+
</div>
|
| 152 |
+
<p class="text-sm text-slate-600 dark:text-slate-400">Switch the Avg column between <strong class="font-semibold text-slate-700 dark:text-slate-300">Global Average</strong> (all benchmarks) and <strong class="font-semibold text-slate-700 dark:text-slate-300">Filtered Average</strong> (only visible columns) to compare models on a custom subset.</p>
|
| 153 |
+
</div>
|
| 154 |
+
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
|
| 155 |
+
<div class="flex items-center gap-2 mb-2">
|
| 156 |
+
<i data-lucide="panel-right-open" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
|
| 157 |
+
<h4 class="font-bold text-slate-800 dark:text-slate-200">Model Detail View</h4>
|
| 158 |
+
</div>
|
| 159 |
+
<p class="text-sm text-slate-600 dark:text-slate-400">Click any model name to open a full breakdown: <strong class="font-semibold text-slate-700 dark:text-slate-300">per-benchmark scores</strong>, <strong class="font-semibold text-slate-700 dark:text-slate-300">model size</strong>, type, license, and a link to the <strong class="font-semibold text-slate-700 dark:text-slate-300">Hugging Face model card</strong>.</p>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
|
| 164 |
+
<!-- Pro-tip callout -->
|
| 165 |
+
<!-- <div class="flex gap-3 p-4 bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-700/50 rounded-xl">
|
| 166 |
+
<i data-lucide="lightbulb" class="w-5 h-5 text-indigo-500 dark:text-indigo-400 shrink-0 mt-0.5"></i>
|
| 167 |
+
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
| 168 |
+
<span class="font-semibold text-indigo-700 dark:text-indigo-300">Pro tip:</span> Combine benchmark domain filters, column visibility, and Filtered Average to instantly rank models on the exact subset of skills relevant to your use case.
|
| 169 |
+
</p>
|
| 170 |
+
</div> -->
|
| 171 |
+
</section>
|
| 172 |
+
|
| 173 |
<!-- Benchmarks & Metrics -->
|
| 174 |
<section
|
| 175 |
class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
|