Spaces:

UlrickBL
/

benchmark_overview

Running

App Files Files Community

UlrickBL commited on 28 days ago

Commit

8eacfd8

verified ·

1 Parent(s): f99d766

Update index.html

Browse files

Files changed (1) hide show

index.html +278 -105

index.html CHANGED Viewed

@@ -3,96 +3,184 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>*LLM Benchmark overview (update ongoing)*</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
-            background-color: #fdf6fb;
-            color: #333;
             margin: 0;
             padding: 20px;
         }
         h1 {
             text-align: center;
-            color: #d16ba5;
         }
         .table-container {
             overflow-x: auto;
             margin-top: 20px;
             position: relative;
         }
         table {
             width: 100%;
             border-collapse: collapse;
             margin: 0 auto;
-            background-color: #fff;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            table-layout: fixed;
         }
         th, td {
-            padding: 10px;
             text-align: left;
-            border: 1px solid #ddd;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            position: relative;
         }
         th {
-            background-color: #f7d9eb;
-            color: #333;
-            font-weight: bold;
-        }
-        th.resizable {
             position: relative;
         }
         th.resizable .resizer {
             position: absolute;
             top: 0;
             right: 0;
-            width: 5px;
             height: 100%;
             cursor: col-resize;
-            background-color: transparent;
         }
-        td.expandable {
-            cursor: pointer;
         }
-        td:nth-child(2) {
-            background-color: #fcebf7;
         }
         .filter {
-            margin-bottom: 20px;
             text-align: center;
         }
         .filter label {
-            font-size: 16px;
-            margin-right: 10px;
-            color: #d16ba5;
         }
-        .filter select {
-            padding: 5px;
-            font-size: 16px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
         }
-        .expanded {
-            white-space: normal;
-            background-color: #fcebf7;
         }
         .modal {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            background-color: #fff;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            padding: 20px;
             z-index: 1000;
-            border-radius: 10px;
-            max-width: 80%;
-            max-height: 80%;
             overflow: auto;
         }
         .overlay {
             position: fixed;
@@ -100,22 +188,31 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.5);
             z-index: 999;
-            white-space: pre-wrap;
         }
     </style>
 </head>
 <body>
-    <h1>LLM Benchmark overview (update ongoing) </h1>
     <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>
     <div class="filter">
         <label for="metricFilter">Filter by Evaluated task:</label>
         <select id="metricFilter">
             <option value="">All</option>
         </select>
-        <h2></h2>
-        <input type="text" id="searchInput" placeholder="Search for benchmark names ..." style="margin-bottom: 10px; padding: 8px; width: 100%;">
     </div>
     <div class="table-container">
         <table id="csvTable">
@@ -132,6 +229,7 @@
     <div class="modal" id="modal" style="display: none;"></div>
     <script>
         function parseCSV(content) {
             const rows = [];
             let currentRow = [];
@@ -153,85 +251,131 @@
                     currentField += char;
                 }
             }
             if (currentField) currentRow.push(currentField.trim());
             if (currentRow.length > 0) rows.push(currentRow);
-            const headers = rows.shift();
             return { headers, rows };
         }
         async function loadCSVFromHuggingFace(dataset, filename, token) {
-            const url = 'https://huggingface.co/datasets/UlrickBL/benchmark_overview/resolve/main/benchmark_overview.csv'//`https://huggingface.co/datasets/${dataset}/blob/main/${filename}`;
-            const response = await fetch(url, {
-                headers: {
-                    'Authorization': `Bearer ${token}`,
-                },
-            });
-            if (!response.ok) {
-                throw new Error(`Failed to fetch file: ${response.statusText}`);
             }
-            const content = await response.text();
-            return parseCSV(content);
         }
         const metricFilter = document.getElementById('metricFilter');
         const table = document.getElementById('csvTable');
         const tableHead = table.querySelector('thead');
         const tableBody = table.querySelector('tbody');
         const overlay = document.getElementById('overlay');
         const modal = document.getElementById('modal');
-        document.getElementById('searchInput').addEventListener('input', function () {
-            const filter = this.value.trim().toLowerCase(); // Normalize input
-            const table = document.getElementById('csvTable');
             const rows = table.querySelectorAll('tbody tr');
             rows.forEach(row => {
-              const nameCell = row.cells[1];
-              if (nameCell) {
-                const name = nameCell.textContent.trim().toLowerCase();
-                row.style.display = name.includes(filter) ? '' : 'none';
-              }
             });
-          });
         function makeResizable() {
             const thElements = document.querySelectorAll('th');
             thElements.forEach(th => {
                 const resizer = document.createElement('div');
                 resizer.classList.add('resizer');
                 th.appendChild(resizer);
                 let startX;
                 let startWidth;
-                resizer.addEventListener('mousedown', (e) => {
-                    startX = e.pageX;
                     startWidth = th.offsetWidth;
                     document.addEventListener('mousemove', resizeColumn);
                     document.addEventListener('mouseup', stopResize);
-                });
-                function resizeColumn(e) {
-                    const newWidth = startWidth + (e.pageX - startX);
                     th.style.width = `${newWidth}px`;
-                }
-                function stopResize() {
                     document.removeEventListener('mousemove', resizeColumn);
                     document.removeEventListener('mouseup', stopResize);
-                }
             });
         }
         function populateFilterOptions(data, headerIndex) {
-            const uniqueMetricTypes = [...new Set(data.map(row => row[headerIndex]))];
             uniqueMetricTypes.forEach(type => {
-                const option = document.createElement('option');
-                option.value = type;
-                option.textContent = type;
-                metricFilter.appendChild(option);
             });
         }
         function populateTable(headers, rows, filterValue, headerIndex) {
             tableHead.innerHTML = '';
             tableBody.innerHTML = '';
             const headerRow = document.createElement('tr');
             headers.forEach(header => {
                 const th = document.createElement('th');
@@ -240,56 +384,85 @@
                 headerRow.appendChild(th);
             });
             tableHead.appendChild(headerRow);
             rows
-                .filter(row => !filterValue || row[headerIndex] === filterValue)
-                .sort((a, b) => a[0].localeCompare(b[0]))
                 .forEach(row => {
                     const tr = document.createElement('tr');
                     row.forEach((value, index) => {
                         const td = document.createElement('td');
                         if (headers[index] === 'Paper' && value) {
                             const link = document.createElement('a');
                             link.href = value;
-                            link.textContent = 'paper link';
                             link.target = '_blank';
-                            td.appendChild(link);
                         } else if (headers[index] === 'HF or Git link' && value) {
                             const link = document.createElement('a');
                             link.href = value;
-                            link.textContent = 'dataset link';
                             link.target = '_blank';
-                            td.appendChild(link);
                         } else {
-                            td.textContent = value;
                         }
-                        td.classList.add('expandable');
                         td.title = 'Click to expand';
                         td.addEventListener('click', () => {
                             overlay.style.display = 'block';
                             modal.style.display = 'block';
-                            modal.textContent = value;
-                            modal.style.whiteSpace = 'pre-wrap';
                         });
                         tr.appendChild(td);
                     });
                     tableBody.appendChild(tr);
                 });
-            makeResizable();
         }
         overlay.addEventListener('click', () => {
             overlay.style.display = 'none';
             modal.style.display = 'none';
         });
         metricFilter.addEventListener('change', () => {
             const filterValue = metricFilter.value;
-            populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0);
         });
         let parsedCSV;
-        loadCSVFromHuggingFace('UlrickBL/benchmark_overview', 'benchmark_overview.csv', window.huggingface.variables.HF_TOKEN).then(({ headers, rows }) => {
-            parsedCSV = { headers, rows };
-            populateFilterOptions(rows, 0);
-            populateTable(headers, rows, '', 0);
-        });
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LLM Benchmark Overview</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
     <style>
         body {
+            font-family: 'Inter', sans-serif;
+            background-color: #1a1a2e;
+            color: #e0e0e0;
             margin: 0;
             padding: 20px;
+            line-height: 1.6;
+            font-size: 14px;
         }
         h1 {
             text-align: center;
+            color: #a766ff;
+            margin-bottom: 30px;
+            font-weight: 600;
+            font-size: 2.2em;
+            text-shadow: 0 0 10px rgba(167, 102, 255, 0.4);
+        }
+        body > div:nth-of-type(1) {
+            max-width: 900px;
+            margin: 0 auto 30px auto;
+            text-align: justify;
+            background-color: #2a2a4a;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            font-size: 0.95em;
         }
         .table-container {
             overflow-x: auto;
             margin-top: 20px;
             position: relative;
+            border-radius: 12px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
         }
         table {
             width: 100%;
             border-collapse: collapse;
             margin: 0 auto;
+            background-color: #2a2a4a;
+            border-radius: 12px;
+            overflow: hidden;
+            min-width: 900px;
+            table-layout: fixed;
         }
         th, td {
+            padding: 12px 15px;
             text-align: left;
+            border: 1px solid #3a3a5a;
+            font-size: 0.9em;
+            vertical-align: top;
         }
         th {
+            background-color: #3a3a5a;
+            color: #c0c0c0;
+            font-weight: 600;
             position: relative;
+            white-space: normal;
+            word-wrap: break-word;
         }
         th.resizable .resizer {
             position: absolute;
             top: 0;
             right: 0;
+            width: 8px;
             height: 100%;
             cursor: col-resize;
+            background-color: rgba(167, 102, 255, 0.2);
+            transition: background-color 0.2s ease-in-out;
         }
+        th.resizable .resizer:hover {
+            background-color: rgba(167, 102, 255, 0.5);
         }
+        tr:nth-child(even) {
+            background-color: #2f2f50;
+        }
+        th:nth-child(1), td:nth-child(1) { width: 15%; min-width: 120px; }
+        th:nth-child(2), td:nth-child(2) { width: 15%; min-width: 120px; }
+        th:nth-child(3), td:nth-child(3) { width: 20%; min-width: 150px; }
+        th:nth-child(4), td:nth-child(4) { width: 25%; min-width: 200px; }
+        th:nth-child(5), td:nth-child(5) { width: 25%; min-width: 200px; }
+        th:nth-child(6), td:nth-child(6) { width: 10%; min-width: 80px; }
+        th:nth-child(7), td:nth-child(7) { width: 10%; min-width: 80px; }
+        .cell-content {
+            cursor: pointer;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 4;
+            -webkit-box-orient: vertical;
+            white-space: normal;
+            word-wrap: break-word;
         }
+        td:hover {
+            background-color: #3a3a5a;
+        }
         .filter {
+            margin-bottom: 25px;
             text-align: center;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+            gap: 15px;
         }
         .filter label {
+            font-size: 1em;
+            margin-right: 5px;
+            color: #a766ff;
+            font-weight: 600;
+        }
+        .filter select, .filter input[type="text"] {
+            padding: 8px 12px;
+            font-size: 0.95em;
+            border: 1px solid #5a5a7a;
+            border-radius: 8px;
+            background-color: #3a3a5a;
+            color: #e0e0e0;
+            outline: none;
+            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
         }
+        .filter select:focus, .filter input[type="text"]:focus {
+            border-color: #a766ff;
+            box-shadow: 0 0 8px rgba(167, 102, 255, 0.5);
         }
+        .filter input[type="text"] {
+            flex-grow: 1;
+            max-width: 400px;
         }
         .modal {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            background-color: #2a2a4a;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
+            padding: 30px;
             z-index: 1000;
+            border-radius: 12px;
+            max-width: 90%;
+            max-height: 90%;
             overflow: auto;
+            color: #e0e0e0;
+            font-size: 1em;
+            white-space: pre-wrap;
         }
         .overlay {
             position: fixed;
             left: 0;
             width: 100%;
             height: 100%;
+            background: rgba(0, 0, 0, 0.8);
             z-index: 999;
+        }
+        a {
+            color: #a766ff;
+            text-decoration: none;
+            transition: color 0.2s ease-in-out;
+        }
+        a:hover {
+            color: #c08cff;
+            text-decoration: underline;
         }
     </style>
 </head>
 <body>
+    <h1>LLM Benchmark Overview</h1>
     <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>
     <div class="filter">
         <label for="metricFilter">Filter by Evaluated task:</label>
         <select id="metricFilter">
             <option value="">All</option>
         </select>
+        <input type="text" id="searchInput" placeholder="Search for benchmark names..." style="margin-bottom: 0;">
     </div>
     <div class="table-container">
         <table id="csvTable">
     <div class="modal" id="modal" style="display: none;"></div>
     <script>
+        // Custom CSV parser to handle quoted fields with commas/newlines
         function parseCSV(content) {
             const rows = [];
             let currentRow = [];
                     currentField += char;
                 }
             }
+            // Add the last field and row if any
             if (currentField) currentRow.push(currentField.trim());
             if (currentRow.length > 0) rows.push(currentRow);
+            const headers = rows.shift(); // First row is headers
             return { headers, rows };
         }
+        // Function to load CSV from Hugging Face (commented out for Canvas preview)
         async function loadCSVFromHuggingFace(dataset, filename, token) {
+            const url = `https://huggingface.co/datasets/${dataset}/resolve/main/${filename}`;
+            try {
+                const response = await fetch(url, {
+                    headers: {
+                        // 'Authorization': `Bearer ${token}`, // Uncomment if a token is required
+                    },
+                });
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch file: ${response.statusText}`);
+                }
+                const content = await response.text();
+                return parseCSV(content);
+            } catch (error) {
+                console.error("Error loading CSV from Hugging Face:", error);
+                // Fallback or error message to user could go here
+                return { headers: [], rows: [] };
             }
         }
         const metricFilter = document.getElementById('metricFilter');
         const table = document.getElementById('csvTable');
         const tableHead = table.querySelector('thead');
         const tableBody = table.querySelector('tbody');
         const overlay = document.getElementById('overlay');
         const modal = document.getElementById('modal');
+        const searchInput = document.getElementById('searchInput');
+        // Search functionality
+        searchInput.addEventListener('input', function () {
+            const filterText = this.value.trim().toLowerCase();
             const rows = table.querySelectorAll('tbody tr');
             rows.forEach(row => {
+                const benchmarkNameCell = row.cells[1]; // Assuming Benchmark Name is the second column
+                if (benchmarkNameCell) {
+                    const name = benchmarkNameCell.textContent.trim().toLowerCase();
+                    // Check if the current filter value from the dropdown is also applied
+                    const currentMetricFilter = metricFilter.value;
+                    const rowMetricType = row.dataset.metricType; // Get the original metric type
+                    const matchesSearch = name.includes(filterText);
+                    const matchesMetric = !currentMetricFilter || rowMetricType === currentMetricFilter;
+                    row.style.display = (matchesSearch && matchesMetric) ? '' : 'none';
+                }
             });
+        });
+        // Makes table columns resizable
         function makeResizable() {
             const thElements = document.querySelectorAll('th');
             thElements.forEach(th => {
+                // Remove existing resizer to prevent duplicates on re-render
+                let existingResizer = th.querySelector('.resizer');
+                if (existingResizer) {
+                    existingResizer.remove();
+                }
                 const resizer = document.createElement('div');
                 resizer.classList.add('resizer');
                 th.appendChild(resizer);
                 let startX;
                 let startWidth;
+                const initResize = (e) => {
+                    startX = e.type === 'mousedown' ? e.pageX : e.touches[0].pageX;
                     startWidth = th.offsetWidth;
                     document.addEventListener('mousemove', resizeColumn);
                     document.addEventListener('mouseup', stopResize);
+                    document.addEventListener('touchmove', resizeColumn, { passive: false });
+                    document.addEventListener('touchend', stopResize);
+                };
+                const resizeColumn = (e) => {
+                    const currentX = e.type === 'mousemove' ? e.pageX : e.touches[0].pageX;
+                    const newWidth = startWidth + (currentX - startX);
                     th.style.width = `${newWidth}px`;
+                    // Prevent text selection during resize
+                    e.preventDefault();
+                };
+                const stopResize = () => {
                     document.removeEventListener('mousemove', resizeColumn);
                     document.removeEventListener('mouseup', stopResize);
+                    document.removeEventListener('touchmove', resizeColumn);
+                    document.removeEventListener('touchend', stopResize);
+                };
+                resizer.addEventListener('mousedown', initResize);
+                resizer.addEventListener('touchstart', initResize, { passive: false });
             });
         }
+        // Populates the filter dropdown with unique metric types
         function populateFilterOptions(data, headerIndex) {
+            const uniqueMetricTypes = [...new Set(data.map(row => row[headerIndex]))].sort(); // Sort options alphabetically
+            metricFilter.innerHTML = '<option value="">All</option>'; // Reset and add "All" option
             uniqueMetricTypes.forEach(type => {
+                if (type) { // Avoid adding empty strings as options
+                    const option = document.createElement('option');
+                    option.value = type;
+                    option.textContent = type;
+                    metricFilter.appendChild(option);
+                }
             });
         }
+        // Populates the table with data, applying filters and search
         function populateTable(headers, rows, filterValue, headerIndex) {
             tableHead.innerHTML = '';
             tableBody.innerHTML = '';
             const headerRow = document.createElement('tr');
             headers.forEach(header => {
                 const th = document.createElement('th');
                 headerRow.appendChild(th);
             });
             tableHead.appendChild(headerRow);
+            const searchFilterText = searchInput.value.trim().toLowerCase();
             rows
+                .filter(row => {
+                    const matchesMetric = !filterValue || row[headerIndex] === filterValue;
+                    const benchmarkName = row[1] ? row[1].toLowerCase() : ''; // Assuming Benchmark Name is at index 1
+                    const matchesSearch = benchmarkName.includes(searchFilterText);
+                    return matchesMetric && matchesSearch;
+                })
+                .sort((a, b) => a[0].localeCompare(b[0])) // Sort by the first column (Evaluated task)
                 .forEach(row => {
                     const tr = document.createElement('tr');
+                    tr.dataset.metricType = row[headerIndex]; // Store original metric type for search filtering
                     row.forEach((value, index) => {
                         const td = document.createElement('td');
+                        const contentDiv = document.createElement('div'); // Create inner div for content
+                        contentDiv.classList.add('cell-content'); // Add class for truncation styles
+                        // Handle links for 'Paper' and 'HF or Git link' columns
                         if (headers[index] === 'Paper' && value) {
                             const link = document.createElement('a');
                             link.href = value;
+                            link.textContent = 'Paper Link';
                             link.target = '_blank';
+                            contentDiv.appendChild(link); // Append link to inner div
                         } else if (headers[index] === 'HF or Git link' && value) {
                             const link = document.createElement('a');
                             link.href = value;
+                            link.textContent = 'Dataset Link';
                             link.target = '_blank';
+                            contentDiv.appendChild(link); // Append link to inner div
                         } else {
+                            contentDiv.textContent = value; // Set text content to inner div
                         }
+                        td.appendChild(contentDiv); // Append inner div to td
+                        // Add click listener to the td for modal display
                         td.title = 'Click to expand';
                         td.addEventListener('click', () => {
                             overlay.style.display = 'block';
                             modal.style.display = 'block';
+                            modal.textContent = value; // Display full content in modal
                         });
                         tr.appendChild(td);
                     });
                     tableBody.appendChild(tr);
                 });
+            makeResizable(); // Re-apply resizable functionality after table population
         }
+        // Close modal on overlay click
         overlay.addEventListener('click', () => {
             overlay.style.display = 'none';
             modal.style.display = 'none';
         });
+        // Filter change listener
         metricFilter.addEventListener('change', () => {
             const filterValue = metricFilter.value;
+            populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0); // Re-populate table with new filter
         });
         let parsedCSV;
+        // --- UNCOMMENT THE FOLLOWING BLOCK TO LOAD LIVE DATA FROM HUGGING FACE ---
+        loadCSVFromHuggingFace('UlrickBL/benchmark_overview', 'benchmark_overview.csv', window.huggingface.variables.HF_TOKEN)
+            .then(({ headers, rows }) => {
+                parsedCSV = { headers, rows };
+                populateFilterOptions(rows, 0);
+                populateTable(headers, rows, '', 0);
+            })
+            .catch(error => {
+                console.error("Failed to load CSV data:", error);
+                // Display a user-friendly message if data loading fails
+                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>';
+            });
     </script>
 </body>
+</html>