Update index.html

index.html

@@ -141,90 +141,44 @@
 
 
 <section class="section">
-  <div class="container is-max-desktop">
-    <div class="columns is-centered">
-      <div class="column">
-        <div class="content">
-          <h2 class="title is-3">Filtered Dataset Table</h2>
-          <p>
-            Use the filters below to load the dataset based on task and stage.
-          </p>
-          <!-- Filters -->
-          <div class="filters">
-            <label for="task">Task:</label>
-            <select id="task" onchange="updateTable()">
-              <option value="binary_classification">Binary Classification</option>
-            </select>
-            <label for="stage">Stage:</label>
-            <select id="stage" onchange="updateTable()">
-              <option value="preprocessing">Preprocessing</option>
-            </select>
-          </div>
-
-          <!-- Table -->
-          <table id="datasetTable" class="table is-striped">
-            <thead>
-              <tr id="tableHeader"></tr>
-            </thead>
-            <tbody id="tableBody"></tbody>
-          </table>
-        </div>
-      </div>
-    </div>
+  <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>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
-<script>
-  async function fetchDataset(task, stage) {
-    const datasetURL = `https://huggingface.co/datasets/holistic-ai/bias_mitigation_benchmark/resolve/main/benchmark_${task}_${stage}.csv`;
-    try {
-      const response = await fetch(datasetURL);
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-      const text = await response.text();
-      return Papa.parse(text, { header: true }).data;
-    } catch (error) {
-      console.error("Failed to fetch dataset:", error);
-      alert("Failed to load dataset. Please check the console for details.");
-      return [];
-    }
+<style>
+  .table {
+    width: 100%;
+    margin-top: 20px;
   }
-
-  async function updateTable() {
-    const task = document.getElementById('task').value;
-    const stage = document.getElementById('stage').value;
-    const dataset = await fetchDataset(task, stage);
-
-    if (dataset.length === 0) {
-      document.getElementById('tableHeader').innerHTML = "<th>No data available</th>";
-      document.getElementById('tableBody').innerHTML = "<tr><td>No data</td></tr>";
-      return;
-    }
-
-    const headers = Object.keys(dataset[0]);
-    const tableHeader = document.getElementById('tableHeader');
-    tableHeader.innerHTML = ""; // Clear existing headers
-    headers.forEach(header => {
-      const th = document.createElement('th');
-      th.textContent = header;
-      tableHeader.appendChild(th);
-    });
-
-    const tableBody = document.getElementById('tableBody');
-    tableBody.innerHTML = ""; // Clear existing rows
-    dataset.forEach(row => {
-      const tr = document.createElement('tr');
-      headers.forEach(header => {
-        const td = document.createElement('td');
-        td.textContent = row[header];
-        tr.appendChild(td);
-      });
-      tableBody.appendChild(tr);
-    });
+  .table th, .table td {
+    padding: 10px;
+    text-align: center;
+  }
+  .table a {
+    color: #3273dc;
+    text-decoration: none;
+  }
+  .table a:hover {
+    text-decoration: underline;
   }
-</script>
+</style>