Spaces:

UlrickBL
/

benchmark_overview

Running

App Files Files Community

UlrickBL commited on Jan 10

Commit

c041a1a

verified ·

1 Parent(s): 429e7a2

Create index.html

Browse files

Files changed (1) hide show

index.html +169 -0

index.html ADDED Viewed

	@@ -0,0 +1,169 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSV Table Viewer</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;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 0 auto;
+            background-color: #fff;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        th, td {
+            padding: 10px;
+            text-align: left;
+            border: 1px solid #ddd;
+        }
+        th {
+            background-color: #f7d9eb;
+            color: #333;
+            font-weight: bold;
+        }
+        td {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        td.expandable {
+            cursor: pointer;
+        }
+        .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;
+        }
+    </style>
+</head>
+<body>
+    <h1>CSV Table Viewer</h1>
+    <div class="filter">
+        <label for="metricFilter">Filter by Metric Type:</label>
+        <select id="metricFilter">
+            <option value="">All</option>
+        </select>
+    </div>
+    <div class="table-container">
+        <table id="csvTable">
+            <thead>
+                <tr>
+                    <th>Metric Type</th>
+                    <th>Benchmark</th>
+                    <th>Output Type</th>
+                    <th>Details</th>
+                    <th>Metric Example</th>
+                    <th>Question + Context Example</th>
+                    <th>Answer Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- Rows will be dynamically added here -->
+            </tbody>
+        </table>
+    </div>
+    <script>
+        // Function to parse CSV file
+        function parseCSV(content) {
+            const rows = content.split("\n").filter(row => row.trim() !== "");
+            const headers = rows.shift().split(",");
+            return rows.map(row => {
+                const values = row.split(",");
+                const obj = {};
+                headers.forEach((header, index) => {
+                    obj[header.trim()] = values[index]?.trim() || "";
+                });
+                return obj;
+            });
+        }
+        // Load CSV file
+        async function loadCSV(filePath) {
+            const response = await fetch(filePath);
+            const content = await response.text();
+            return parseCSV(content);
+        }
+        // Populate filter options
+        const metricFilter = document.getElementById('metricFilter');
+        const tableBody = document.getElementById('csvTable').querySelector('tbody');
+        function populateFilterOptions(data) {
+            const uniqueMetricTypes = [...new Set(data.map(row => row["Metric Type"]))];
+            uniqueMetricTypes.forEach(type => {
+                const option = document.createElement('option');
+                option.value = type;
+                option.textContent = type;
+                metricFilter.appendChild(option);
+            });
+        }
+        // Populate table
+        function populateTable(filteredData) {
+            tableBody.innerHTML = '';
+            filteredData.forEach(row => {
+                const tr = document.createElement('tr');
+                Object.values(row).forEach((value, index) => {
+                    const td = document.createElement('td');
+                    td.textContent = value;
+                    if (index >= 4) { // Long content
+                        td.classList.add('expandable');
+                        td.title = 'Click to expand';
+                        td.addEventListener('click', () => {
+                            td.classList.toggle('expanded');
+                        });
+                    }
+                    tr.appendChild(td);
+                });
+                tableBody.appendChild(tr);
+            });
+        }
+        metricFilter.addEventListener('change', () => {
+            const filterValue = metricFilter.value;
+            const filteredData = filterValue ? tableData.filter(row => row["Metric Type"] === filterValue) : tableData;
+            populateTable(filteredData);
+        });
+        // Initial load
+        let tableData = [];
+        loadCSV('data.csv').then(data => {
+            tableData = data;
+            populateFilterOptions(data);
+            populateTable(data);
+        });
+    </script>
+</body>
+</html>