UlrickBL/benchmark_overview
10
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>LLM Benchmark Overview</title>7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">8 <style>9 /* General Body and Font Styles */10 body {11 font-family: 'Inter', sans-serif;12 background-color: #1a1a2e; /* Dark background */13 color: #e0e0e0; /* Light text */14 margin: 0;15 padding: 20px;16 line-height: 1.6;17 font-size: 14px; /* Reduced base font size */18 }19 20 /* Header Styling */21 h1 {22 text-align: center;23 color: #a766ff; /* Neo purple */24 margin-bottom: 30px;25 font-weight: 600;26 font-size: 2.2em;27 text-shadow: 0 0 10px rgba(167, 102, 255, 0.4);28 }29 30 /* Introduction Text */31 body > div:nth-of-type(1) { /* Targeting the intro div */32 max-width: 900px;33 margin: 0 auto 30px auto;34 text-align: justify;35 background-color: #2a2a4a; /* Slightly lighter dark background */36 padding: 20px;37 border-radius: 12px;38 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);39 font-size: 0.95em;40 }41 42 /* Table Container and Shadow */43 .table-container {44 overflow-x: auto;45 margin-top: 20px;46 position: relative;47 border-radius: 12px;48 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Stronger shadow */49 }50 51 /* Table Styling */52 table {53 width: auto; /* Changed from 100% to auto to allow min-width to force overflow */54 border-collapse: collapse;55 margin: 0 auto;56 background-color: #2a2a4a; /* Darker table background */57 border-radius: 12px;58 overflow: hidden; /* Ensures rounded corners apply */59 min-width: 950px; /* Ensure a minimum width for the table itself (sum of column min-widths) */60 table-layout: fixed; /* Keep fixed layout for column width control */61 }62 63 /* Table Headers and Cells */64 th, td {65 padding: 10px 15px; /* Reduced vertical padding from 12px to 10px */66 text-align: left;67 border: 1px solid #3a3a5a; /* Darker border */68 font-size: 0.9em; /* Smaller font for table content */69 vertical-align: top; /* Align content to top */70 white-space: normal; /* Ensure cells allow content to wrap */71 word-wrap: break-word; /* Ensure long words break within cells */72 }73 74 /* Table Header Specifics */75 th {76 background-color: #3a3a5a; /* Dark header background */77 color: #c0c0c0; /* Lighter header text */78 font-weight: 600;79 position: relative;80 /* white-space: normal and word-wrap: break-word are now in th, td general rule */81 }82 83 /* Resizable Column Handler */84 th.resizable .resizer {85 position: absolute;86 top: 0;87 right: 0;88 width: 8px; /* Wider resizer for easier grabbing */89 height: 100%;90 cursor: col-resize;91 background-color: rgba(167, 102, 255, 0.2); /* Semi-transparent purple */92 transition: background-color 0.2s ease-in-out;93 }94 95 th.resizable .resizer:hover {96 background-color: rgba(167, 102, 255, 0.5); /* More visible on hover */97 }98 99 /* Alternating Row Colors */100 tr:nth-child(even) {101 background-color: #2f2f50; /* Slightly different shade for even rows */102 }103 104 /* Specific Column Styling for wider columns */105 /* Adjusted widths for better display */106 th:nth-child(1), td:nth-child(1) { width: 15%; min-width: 120px; } /* Evaluated task */107 th:nth-child(2), td:nth-child(2) { width: 15%; min-width: 120px; } /* Benchmark Name */108 th:nth-child(3), td:nth-child(3) { width: 20%; min-width: 150px; } /* Metric often used */109 th:nth-child(4), td:nth-child(4) { width: 20%; min-width: 150px; } /* Question + context example */110 th:nth-child(5), td:nth-child(5) { width: 20%; min-width: 150px; } /* Answer examp */111 th:nth-child(6), td:nth-child(6) { width: 15%; min-width: 120px; } /* Paper */112 th:nth-child(7), td:nth-child(7) { width: 15%; min-width: 120px; } /* HF or Git link */113 114 115 /* Inner div for truncated content */116 .cell-content {117 cursor: pointer; /* Keep cursor pointer for expandability */118 overflow: hidden;119 text-overflow: ellipsis;120 display: -webkit-box;121 -webkit-line-clamp: 4; /* Limit to 4 lines */122 -webkit-box-orient: vertical;123 /* white-space: normal and word-wrap: break-word are now in th, td general rule */124 }125 126 /* Hover effect on the cell, not the inner content */127 td:hover {128 background-color: #3a3a5a; /* Highlight on hover */129 }130 131 /* Filter and Search Bar Styling */132 .filter {133 margin-bottom: 25px;134 text-align: center;135 display: flex;136 flex-wrap: wrap;137 justify-content: center;138 align-items: center;139 gap: 15px;140 }141 .filter label {142 font-size: 1em;143 margin-right: 5px;144 color: #a766ff; /* Neo purple */145 font-weight: 600;146 }147 .filter select, .filter input[type="text"] {148 padding: 8px 12px;149 font-size: 0.95em;150 border: 1px solid #5a5a7a; /* Darker border */151 border-radius: 8px;152 background-color: #3a3a5a; /* Dark input background */153 color: #e0e0e0; /* Light input text */154 outline: none;155 transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;156 }157 .filter select:focus, .filter input[type="text"]:focus {158 border-color: #a766ff;159 box-shadow: 0 0 8px rgba(167, 102, 255, 0.5);160 }161 .filter input[type="text"] {162 flex-grow: 1; /* Allow search input to grow */163 max-width: 400px;164 }165 166 /* Modal and Overlay Styling */167 .modal {168 position: fixed;169 top: 50%;170 left: 50%;171 transform: translate(-50%, -50%);172 background-color: #2a2a4a; /* Dark modal background */173 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Stronger shadow */174 padding: 30px;175 z-index: 1000;176 border-radius: 12px;177 max-width: 90%;178 max-height: 90%;179 overflow: auto;180 color: #e0e0e0; /* Light text */181 font-size: 1em;182 white-space: pre-wrap; /* Preserve formatting for modal content */183 }184 .overlay {185 position: fixed;186 top: 0;187 left: 0;188 width: 100%;189 height: 100%;190 background: rgba(0, 0, 0, 0.8); /* Darker overlay */191 z-index: 999;192 }193 194 /* Link Styling */195 a {196 color: #a766ff; /* Neo purple for links */197 text-decoration: none;198 transition: color 0.2s ease-in-out;199 }200 a:hover {201 color: #c08cff; /* Lighter purple on hover */202 text-decoration: underline;203 }204 </style>205</head>206<body>207 <h1>LLM Benchmark Overview (Update Ongoing)</h1>208 <div>As the development and evaluation of large language models (LLMs) continue to evolve, I conducted an overview of the principal benchmarks commonly found in research papers. My goal is to create a clear and comprehensive resource that summarizes what is being tested in LLMs, with concrete examples, key metrics, and direct links to related papers and repositories. This document serves as a centralized matrix that will be continuously updated with insights from future papers I review.</div>209 <div class="filter">210 <label for="metricFilter">Filter by Evaluated task:</label>211 <select id="metricFilter">212 <option value="">All</option>213 </select>214 <input type="text" id="searchInput" placeholder="Search for benchmark names..." style="margin-bottom: 0;">215 </div>216 <div class="table-container">217 <table id="csvTable">218 <thead>219 <!-- Headers will be dynamically added -->220 </thead>221 <tbody>222 <!-- Rows will be dynamically added here -->223 </tbody>224 </table>225 </div>226 227 <div class="overlay" id="overlay" style="display: none;"></div>228 <div class="modal" id="modal" style="display: none;"></div>229 230 <script>231 // Custom CSV parser to handle quoted fields with commas/newlines232 function parseCSV(content) {233 const rows = [];234 let currentRow = [];235 let currentField = '';236 let insideQuotes = false;237 for (let i = 0; i < content.length; i++) {238 const char = content[i];239 if (char === '"') {240 insideQuotes = !insideQuotes;241 } else if (char === ',' && !insideQuotes) {242 currentRow.push(currentField.trim());243 currentField = '';244 } else if (char === '\n' && !insideQuotes) {245 currentRow.push(currentField.trim());246 rows.push(currentRow);247 currentRow = [];248 currentField = '';249 } else {250 currentField += char;251 }252 }253 // Add the last field and row if any254 if (currentField) currentRow.push(currentField.trim());255 if (currentRow.length > 0) rows.push(currentRow);256 257 const headers = rows.shift(); // First row is headers258 return { headers, rows };259 }260 261 // Function to load CSV from Hugging Face (commented out for Canvas preview)262 async function loadCSVFromHuggingFace(dataset, filename, token) {263 const url = `https://huggingface.co/datasets/${dataset}/resolve/main/${filename}`;264 try {265 const response = await fetch(url, {266 headers: {267 'Authorization': `Bearer ${token}`, // Uncommented for authentication268 },269 });270 271 if (!response.ok) {272 throw new Error(`Failed to fetch file: ${response.statusText}`);273 }274 275 const content = await response.text();276 return parseCSV(content);277 } catch (error) {278 console.error("Error loading CSV from Hugging Face:", error);279 // Display a user-friendly message if data loading fails280 return { headers: [], rows: [] };281 }282 }283 284 const metricFilter = document.getElementById('metricFilter');285 const table = document.getElementById('csvTable');286 const tableHead = table.querySelector('thead');287 const tableBody = table.querySelector('tbody');288 const overlay = document.getElementById('overlay');289 const modal = document.getElementById('modal');290 const searchInput = document.getElementById('searchInput');291 292 // Search functionality293 searchInput.addEventListener('input', function () {294 const filterText = this.value.trim().toLowerCase();295 const rows = table.querySelectorAll('tbody tr');296 297 rows.forEach(row => {298 const benchmarkNameCell = row.cells[1]; // Assuming Benchmark Name is the second column299 if (benchmarkNameCell) {300 const name = benchmarkNameCell.textContent.trim().toLowerCase();301 // Check if the current filter value from the dropdown is also applied302 const currentMetricFilter = metricFilter.value;303 const rowMetricType = row.dataset.metricType; // Get the original metric type304 305 const matchesSearch = name.includes(filterText);306 const matchesMetric = !currentMetricFilter || rowMetricType === currentMetricFilter;307 308 row.style.display = (matchesSearch && matchesMetric) ? '' : 'none';309 }310 });311 });312 313 // Makes table columns resizable314 function makeResizable() {315 const thElements = document.querySelectorAll('th');316 thElements.forEach(th => {317 // Remove existing resizer to prevent duplicates on re-render318 let existingResizer = th.querySelector('.resizer');319 if (existingResizer) {320 existingResizer.remove();321 }322 323 const resizer = document.createElement('div');324 resizer.classList.add('resizer');325 th.appendChild(resizer);326 327 let startX;328 let startWidth;329 330 const initResize = (e) => {331 startX = e.type === 'mousedown' ? e.pageX : e.touches[0].pageX;332 startWidth = th.offsetWidth;333 document.addEventListener('mousemove', resizeColumn);334 document.addEventListener('mouseup', stopResize);335 document.addEventListener('touchmove', resizeColumn, { passive: false });336 document.addEventListener('touchend', stopResize);337 };338 339 const resizeColumn = (e) => {340 const currentX = e.type === 'mousemove' ? e.pageX : e.touches[0].pageX;341 const newWidth = startWidth + (currentX - startX);342 th.style.width = `${newWidth}px`;343 // Prevent text selection during resize344 e.preventDefault();345 };346 347 const stopResize = () => {348 document.removeEventListener('mousemove', resizeColumn);349 document.removeEventListener('mouseup', stopResize);350 document.removeEventListener('touchmove', resizeColumn);351 document.removeEventListener('touchend', stopResize);352 };353 354 resizer.addEventListener('mousedown', initResize);355 resizer.addEventListener('touchstart', initResize, { passive: false });356 });357 }358 359 // Populates the filter dropdown with unique metric types360 function populateFilterOptions(data, headerIndex) {361 const uniqueMetricTypes = [...new Set(data.map(row => row[headerIndex]))].sort(); // Sort options alphabetically362 metricFilter.innerHTML = '<option value="">All</option>'; // Reset and add "All" option363 uniqueMetricTypes.forEach(type => {364 if (type) { // Avoid adding empty strings as options365 const option = document.createElement('option');366 option.value = type;367 option.textContent = type;368 metricFilter.appendChild(option);369 }370 });371 }372 373 // Populates the table with data, applying filters and search374 function populateTable(headers, rows, filterValue, headerIndex) {375 tableHead.innerHTML = '';376 tableBody.innerHTML = '';377 378 const headerRow = document.createElement('tr');379 headers.forEach(header => {380 const th = document.createElement('th');381 th.textContent = header;382 th.classList.add('resizable');383 headerRow.appendChild(th);384 });385 tableHead.appendChild(headerRow);386 387 const searchFilterText = searchInput.value.trim().toLowerCase();388 389 rows390 .filter(row => {391 const matchesMetric = !filterValue || row[headerIndex] === filterValue;392 const benchmarkName = row[1] ? row[1].toLowerCase() : ''; // Assuming Benchmark Name is at index 1393 const matchesSearch = benchmarkName.includes(searchFilterText);394 return matchesMetric && matchesSearch;395 })396 .sort((a, b) => a[0].localeCompare(b[0])) // Sort by the first column (Evaluated task)397 .forEach(row => {398 const tr = document.createElement('tr');399 tr.dataset.metricType = row[headerIndex]; // Store original metric type for search filtering400 401 row.forEach((value, index) => {402 const td = document.createElement('td');403 const contentDiv = document.createElement('div'); // Create inner div for content404 contentDiv.classList.add('cell-content'); // Add class for truncation styles405 406 // Handle links for 'Paper' and 'HF or Git link' columns407 if (headers[index] === 'Paper' && value) {408 const link = document.createElement('a');409 link.href = value;410 link.textContent = 'Paper Link';411 link.target = '_blank';412 contentDiv.appendChild(link); // Append link to inner div413 } else if (headers[index] === 'HF or Git link' && value) {414 const link = document.createElement('a');415 link.href = value;416 link.textContent = 'Dataset Link';417 link.target = '_blank';418 contentDiv.appendChild(link); // Append link to inner div419 } else {420 contentDiv.textContent = value; // Set text content to inner div421 }422 423 td.appendChild(contentDiv); // Append inner div to td424 425 // Add click listener to the td for modal display426 td.title = 'Click to expand';427 td.addEventListener('click', () => {428 overlay.style.display = 'block';429 modal.style.display = 'block';430 modal.textContent = value; // Display full content in modal431 });432 tr.appendChild(td);433 });434 tableBody.appendChild(tr);435 });436 makeResizable(); // Re-apply resizable functionality after table population437 }438 439 // Close modal on overlay click440 overlay.addEventListener('click', () => {441 overlay.style.display = 'none';442 modal.style.display = 'none';443 });444 445 // Filter change listener446 metricFilter.addEventListener('change', () => {447 const filterValue = metricFilter.value;448 populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0); // Re-populate table with new filter449 });450 451 let parsedCSV;452 453 loadCSVFromHuggingFace('UlrickBL/benchmark_overview', 'benchmark_overview.csv', window.huggingface.variables.HF_TOKEN)454 .then(({ headers, rows }) => {455 parsedCSV = { headers, rows };456 populateFilterOptions(rows, 0);457 populateTable(headers, rows, '', 0);458 })459 .catch(error => {460 console.error("Failed to load CSV data:", error);461 // Display a user-friendly message if data loading fails462 tableBody.innerHTML = '<tr><td colspan="7" style="text-align: center; color: #ff6b6b;">Failed to load data. Please check the dataset link or your internet connection.</td></tr>';463 });464 465 </script>466</body>467</html>468