Update index.html

index.html

@@ -140,46 +140,58 @@
 </section>
 
 
-<section class="section">
-  <div class="container">
-    <table class="table is-striped is-hoverable is-fullwidth">
-      <thead>
-        <tr>
-          <th>Task</th>
-          <th>Stage</th>
-          <th>Download Link</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Binary Classification</td>
-          <td>Preprocessing</td>
-          <td><a href="https://huggingface.co/datasets/holistic-ai/bias_mitigation_benchmark/resolve/main/benchmark_binary_classification_preprocessing.csv">Download CSV</a></td>
-        </tr>
-        <!-- Additional rows can be added here -->
-      </tbody>
-    </table>
-  </div>
-</section>
-
-<style>
-  .table {
-    width: 100%;
-    margin-top: 20px;
-  }
-  .table th, .table td {
-    padding: 10px;
-    text-align: center;
-  }
-  .table a {
-    color: #3273dc;
-    text-decoration: none;
-  }
-  .table a:hover {
-    text-decoration: underline;
-  }
-</style>
-
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js"></script>
+
+<div id="table-container"></div>
+
+<script>
+const task = 'binary_classification';
+const stage = 'preprocessing';
+const csvUrl = `https://huggingface.co/datasets/holistic-ai/bias_mitigation_benchmark/resolve/main/benchmark_${task}_${stage}.csv`;
+
+// Function to fetch and process the CSV data
+fetch(csvUrl)
+  .then(response => response.text())
+  .then(csvData => {
+    Papa.parse(csvData, {
+      header: true,
+      complete: function(results) {
+        const data = results.data;
+
+        // Get the headers
+        const headers = results.meta.fields;
+
+        // Create table
+        const table = document.createElement('table');
+        table.border = '1';
+
+        // Create header row
+        const headerRow = document.createElement('tr');
+        headers.forEach(headerText => {
+          const th = document.createElement('th');
+          th.appendChild(document.createTextNode(headerText));
+          headerRow.appendChild(th);
+        });
+        table.appendChild(headerRow);
+
+        // Add data rows
+        data.forEach(rowData => {
+          const row = document.createElement('tr');
+          headers.forEach(header => {
+            const td = document.createElement('td');
+            td.appendChild(document.createTextNode(rowData[header]));
+            row.appendChild(td);
+          });
+          table.appendChild(row);
+        });
+
+        // Add table to the container
+        document.getElementById('table-container').appendChild(table);
+      }
+    });
+  })
+  .catch(error => console.error(error));
+</script>