Update index.html

index.html

@@ -142,28 +142,95 @@
 
 <section class="section">
   <div class="container is-max-desktop">
-
     <div class="columns is-centered">
-
-      <!-- Visual Effects. -->
+      <!-- Table and Filters Section -->
       <div class="column">
         <div class="content">
-          <h2 class="title is-3">Visual Effects</h2>
+          <h2 class="title is-3">Filtered Dataset Table</h2>
           <p>
-            Using <i>nerfies</i> you can create fun visual effects. This Dolly zoom effect
-            would be impossible without nerfies since it would require going through a wall.
+            Use the filters below to select a dataset view by task and stage. Each combination returns a filtered Hugging Face dataset.
           </p>
-          <video id="dollyzoom" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/dollyzoom-stacked.mp4"
-                    type="video/mp4">
-          </video>
+          <!-- Filters -->
+          <div class="filters">
+            <label for="task">Task:</label>
+            <select id="task" onchange="updateTable()">
+              <option value="binary_classification">Binary Classification</option>
+              <!-- Add more task options if needed -->
+            </select>
+            <label for="stage">Stage:</label>
+            <select id="stage" onchange="updateTable()">
+              <option value="preprocessing">Preprocessing</option>
+              <!-- Add more stage options if needed -->
+            </select>
+          </div>
+          <!--/ Filters -->
+
+          <!-- Table -->
+          <table id="datasetTable" class="table is-striped">
+            <thead>
+              <tr id="tableHeader">
+                <!-- Table headers will be dynamically populated -->
+              </tr>
+            </thead>
+            <tbody id="tableBody">
+              <!-- Table rows will be dynamically populated -->
+            </tbody>
+          </table>
+          <!--/ Table -->
         </div>
       </div>
-      <!--/ Visual Effects. -->
-
+    </div>
   </div>
 </section>
 
+<script>
+  async function fetchDataset(task, stage) {
+    // Create URL based on the selected task and stage
+    const datasetURL = `https://huggingface.co/datasets/holistic-ai/bias_mitigation_benchmark/resolve/main/benchmark_${task}_${stage}.csv`;
+
+    const response = await fetch(datasetURL);
+    const text = await response.text();
+    
+    // Parse CSV text into a format suitable for the table
+    const data = Papa.parse(text, { header: true }); // Use PapaParse library for CSV parsing
+    return data.data;
+  }
+
+  async function updateTable() {
+    const task = document.getElementById('task').value;
+    const stage = document.getElementById('stage').value;
+
+    // Fetch dataset based on current filter values
+    const dataset = await fetchDataset(task, stage);
+
+    // Populate table headers
+    const tableHeader = document.getElementById('tableHeader');
+    tableHeader.innerHTML = ''; // Clear existing headers
+    const headers = Object.keys(dataset[0] || {});
+    headers.forEach(column => {
+      const th = document.createElement('th');
+      th.textContent = column;
+      tableHeader.appendChild(th);
+    });
+
+    // Populate table rows
+    const tableBody = document.getElementById('tableBody');
+    tableBody.innerHTML = ''; // Clear existing rows
+    dataset.forEach(row => {
+      const tr = document.createElement('tr');
+      headers.forEach(column => {
+        const td = document.createElement('td');
+        td.textContent = row[column];
+        tr.appendChild(td);
+      });
+      tableBody.appendChild(tr);
+    });
+  }
+</script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
+
+
 
 <section class="section" id="BibTeX">
   <div class="container is-max-desktop content">