Hugging Face's logo

Spaces:
UlrickBL
/
benchmark_overview
Running

App Files Community
UlrickBL commited on
Commit
50f726d
·
verified ·
1 Parent(s): 3f074b2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +52 -15
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CSV Table Viewer</title>
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
@@ -35,12 +35,25 @@
35
  overflow: hidden;
36
  text-overflow: ellipsis;
37
  white-space: nowrap;
 
38
  }
39
  th {
40
  background-color: #f7d9eb;
41
  color: #333;
42
  font-weight: bold;
43
  }
 
 
 
 
 
 
 
 
 
 
 
 
44
  td.expandable {
45
  cursor: pointer;
46
  }
@@ -69,9 +82,9 @@
69
  </style>
70
  </head>
71
  <body>
72
- <h1>CSV Table Viewer</h1>
73
  <div class="filter">
74
- <label for="metricFilter">Filter by Metric Type:</label>
75
  <select id="metricFilter">
76
  <option value="">All</option>
77
  </select>
@@ -88,7 +101,6 @@
88
  </div>
89
 
90
  <script>
91
- // Improved CSV parsing to handle quoted fields
92
  function parseCSV(content) {
93
  const rows = [];
94
  let currentRow = [];
@@ -113,7 +125,6 @@
113
  }
114
  }
115
 
116
- // Add the last field and row
117
  if (currentField) currentRow.push(currentField.trim());
118
  if (currentRow.length > 0) rows.push(currentRow);
119
 
@@ -121,19 +132,47 @@
121
  return { headers, rows };
122
  }
123
 
124
- // Load CSV file
125
  async function loadCSV(filePath) {
126
  const response = await fetch(filePath);
127
  const content = await response.text();
128
  return parseCSV(content);
129
  }
130
 
131
- // Populate filter options
132
  const metricFilter = document.getElementById('metricFilter');
133
  const table = document.getElementById('csvTable');
134
  const tableHead = table.querySelector('thead');
135
  const tableBody = table.querySelector('tbody');
136
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
137
  function populateFilterOptions(data, headerIndex) {
138
  const uniqueMetricTypes = [...new Set(data.map(row => row[headerIndex]))];
139
  uniqueMetricTypes.forEach(type => {
@@ -144,31 +183,28 @@
144
  });
145
  }
146
 
147
- // Populate table
148
  function populateTable(headers, rows, filterValue, headerIndex) {
149
  tableHead.innerHTML = '';
150
  tableBody.innerHTML = '';
151
 
152
- // Add headers dynamically
153
  const headerRow = document.createElement('tr');
154
  headers.forEach(header => {
155
  const th = document.createElement('th');
156
  th.textContent = header;
 
157
  headerRow.appendChild(th);
158
  });
159
  tableHead.appendChild(headerRow);
160
 
161
- // Add rows dynamically
162
  rows
163
  .filter(row => !filterValue || row[headerIndex] === filterValue)
164
- .sort((a, b) => a[0].localeCompare(b[0])) // Sort by the first column
165
  .forEach(row => {
166
  const tr = document.createElement('tr');
167
 
168
  row.forEach((value, index) => {
169
  const td = document.createElement('td');
170
 
171
- // Handle clickable links for specific columns
172
  if (headers[index] === 'Paper' && value) {
173
  const link = document.createElement('a');
174
  link.href = value;
@@ -195,18 +231,19 @@
195
 
196
  tableBody.appendChild(tr);
197
  });
 
 
198
  }
199
 
200
  metricFilter.addEventListener('change', () => {
201
  const filterValue = metricFilter.value;
202
- populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0); // Assuming Metric Type is the first column
203
  });
204
 
205
- // Initial load
206
  let parsedCSV;
207
  loadCSV('benchmark_overview_data.csv').then(({ headers, rows }) => {
208
  parsedCSV = { headers, rows };
209
- populateFilterOptions(rows, 0); // Assuming Metric Type is the first column
210
  populateTable(headers, rows, '', 0);
211
  });
212
  </script>
 
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
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
 
35
  overflow: hidden;
36
  text-overflow: ellipsis;
37
  white-space: nowrap;
38
+ position: relative;
39
  }
40
  th {
41
  background-color: #f7d9eb;
42
  color: #333;
43
  font-weight: bold;
44
  }
45
+ th.resizable {
46
+ position: relative;
47
+ }
48
+ th.resizable .resizer {
49
+ position: absolute;
50
+ top: 0;
51
+ right: 0;
52
+ width: 5px;
53
+ height: 100%;
54
+ cursor: col-resize;
55
+ background-color: transparent;
56
+ }
57
  td.expandable {
58
  cursor: pointer;
59
  }
 
82
  </style>
83
  </head>
84
  <body>
85
+ <h1>LLM Benchmark overview</h1>
86
  <div class="filter">
87
+ <label for="metricFilter">Filter by Evaluated task:</label>
88
  <select id="metricFilter">
89
  <option value="">All</option>
90
  </select>
 
101
  </div>
102
 
103
  <script>
 
104
  function parseCSV(content) {
105
  const rows = [];
106
  let currentRow = [];
 
125
  }
126
  }
127
 
 
128
  if (currentField) currentRow.push(currentField.trim());
129
  if (currentRow.length > 0) rows.push(currentRow);
130
 
 
132
  return { headers, rows };
133
  }
134
 
 
135
  async function loadCSV(filePath) {
136
  const response = await fetch(filePath);
137
  const content = await response.text();
138
  return parseCSV(content);
139
  }
140
 
 
141
  const metricFilter = document.getElementById('metricFilter');
142
  const table = document.getElementById('csvTable');
143
  const tableHead = table.querySelector('thead');
144
  const tableBody = table.querySelector('tbody');
145
 
146
+ function makeResizable() {
147
+ const thElements = document.querySelectorAll('th');
148
+ thElements.forEach(th => {
149
+ const resizer = document.createElement('div');
150
+ resizer.classList.add('resizer');
151
+ th.appendChild(resizer);
152
+
153
+ let startX;
154
+ let startWidth;
155
+
156
+ resizer.addEventListener('mousedown', (e) => {
157
+ startX = e.pageX;
158
+ startWidth = th.offsetWidth;
159
+
160
+ document.addEventListener('mousemove', resizeColumn);
161
+ document.addEventListener('mouseup', stopResize);
162
+ });
163
+
164
+ function resizeColumn(e) {
165
+ const newWidth = startWidth + (e.pageX - startX);
166
+ th.style.width = `${newWidth}px`;
167
+ }
168
+
169
+ function stopResize() {
170
+ document.removeEventListener('mousemove', resizeColumn);
171
+ document.removeEventListener('mouseup', stopResize);
172
+ }
173
+ });
174
+ }
175
+
176
  function populateFilterOptions(data, headerIndex) {
177
  const uniqueMetricTypes = [...new Set(data.map(row => row[headerIndex]))];
178
  uniqueMetricTypes.forEach(type => {
 
183
  });
184
  }
185
 
 
186
  function populateTable(headers, rows, filterValue, headerIndex) {
187
  tableHead.innerHTML = '';
188
  tableBody.innerHTML = '';
189
 
 
190
  const headerRow = document.createElement('tr');
191
  headers.forEach(header => {
192
  const th = document.createElement('th');
193
  th.textContent = header;
194
+ th.classList.add('resizable');
195
  headerRow.appendChild(th);
196
  });
197
  tableHead.appendChild(headerRow);
198
 
 
199
  rows
200
  .filter(row => !filterValue || row[headerIndex] === filterValue)
201
+ .sort((a, b) => a[0].localeCompare(b[0]))
202
  .forEach(row => {
203
  const tr = document.createElement('tr');
204
 
205
  row.forEach((value, index) => {
206
  const td = document.createElement('td');
207
 
 
208
  if (headers[index] === 'Paper' && value) {
209
  const link = document.createElement('a');
210
  link.href = value;
 
231
 
232
  tableBody.appendChild(tr);
233
  });
234
+
235
+ makeResizable();
236
  }
237
 
238
  metricFilter.addEventListener('change', () => {
239
  const filterValue = metricFilter.value;
240
+ populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0);
241
  });
242
 
 
243
  let parsedCSV;
244
  loadCSV('benchmark_overview_data.csv').then(({ headers, rows }) => {
245
  parsedCSV = { headers, rows };
246
+ populateFilterOptions(rows, 0);
247
  populateTable(headers, rows, '', 0);
248
  });
249
  </script>