Skip to content

Commit

Permalink
Cleanup html/script/css code
Browse files Browse the repository at this point in the history
  • Loading branch information
@profvjreddi
profvjreddi authored Dec 3, 2024
1 parent 8cfcb83 commit b27e901
Showing 1 changed file with 71 additions and 79 deletions.
150 changes: 71 additions & 79 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,34 +38,49 @@
min-width: 300px;
padding: 10px; /* Add some spacing around the logo */
}
/* Style for sort button */
.sortable {
cursor: pointer;
position: relative;
display: inline-block;
padding-right: 20px; /* Space for arrow */
}
.sortable::after {
content: "▼";
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
transition: transform 0.3s ease;
}
.sortable:checked::after {
transform: translateY(-50%) rotate(180deg);
}
/* Hide the input */
.sortable-input {
display: none;
}
/* Style for highlighting sorted column */
th.sorted {
background-color: var(--primary-color);
color: white;
}
/* Style for sort button */
.sortable {
cursor: pointer;
position: relative;
display: inline-block;
padding-right: 20px; /* Space for arrow */
}
.sortable::after {
content: "▼";
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
transition: transform 0.3s ease;
}
.sortable:checked::after {
transform: translateY(-50%) rotate(180deg);
}
/* Hide the input */
.sortable-input {
display: none;
}
/* Style for highlighting sorted column */
th.sorted {
background-color: var(--primary-color);
color: white;
}
th {
position: relative;
cursor: pointer;
}
.arrow {
margin-left: 8px;
font-size: 12px;
color: gray;
}
th.sorted-asc .arrow {
color: black;
}
th.sorted-desc .arrow {
color: black;
}
/* Leaderboard container with enhanced styles and shadow */
.leaderboard-container {
max-width: 1200px; /* Limit container width */
Expand Down Expand Up @@ -291,43 +306,24 @@
}
</style>
</head>

<style>
th {
position: relative;
cursor: pointer;
}
.arrow {
margin-left: 8px;
font-size: 12px;
color: gray;
}
th.sorted-asc .arrow {
color: black;
}
th.sorted-desc .arrow {
color: black;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
const table = document.querySelector(".leaderboard-container table");
const headers = table.querySelectorAll("thead th");
const tbody = table.querySelector("tbody");

const defaultSortColumnIndex = 5; // Index of the "Test Accuracy" column

headers.forEach((header, index) => {
// Create arrow span once for each header
const arrow = document.createElement("span");
arrow.classList.add("arrow");
header.appendChild(arrow);

header.addEventListener("click", () => {
const isAscending = header.classList.toggle("sorted-asc");
header.classList.toggle("sorted-desc", !isAscending);

// Update arrow directions for all headers
headers.forEach((h, i) => {
const hArrow = h.querySelector(".arrow");
Expand All @@ -338,66 +334,62 @@
hArrow.textContent = isAscending ? "▲" : "▼"; // Set arrow direction
}
});

const rows = Array.from(tbody.querySelectorAll("tr"));
const compare = (rowA, rowB) => {
const cellA = rowA.children[index].textContent.trim();
const cellB = rowB.children[index].textContent.trim();

const valueA = parseCellValue(cellA);
const valueB = parseCellValue(cellB);

if (valueA < valueB) return isAscending ? -1 : 1;
if (valueA > valueB) return isAscending ? 1 : -1;
return 0;
};

rows.sort(compare);
rows.forEach(row => tbody.appendChild(row)); // Re-append sorted rows
});
});

// Helper function to parse cell values
const parseCellValue = (value) => {
// Handle percentages
if (value.includes('%')) {
return parseFloat(value.replace(/[^\d.-]/g, ''));
}

// Handle numbers with commas
if (value.includes(',')) {
return parseFloat(value.replace(/,/g, ''));
}

// Default to text if not numeric
return isNaN(value) ? value.toLowerCase() : parseFloat(value);
};

// Trigger default sorting by "Test Accuracy" in descending order
const defaultSortHeader = headers[defaultSortColumnIndex];
defaultSortHeader.classList.add("sorted-desc"); // Add descending class
const rows = Array.from(tbody.querySelectorAll("tr"));
const compare = (rowA, rowB) => {
const cellA = rowA.children[defaultSortColumnIndex].textContent.trim();
const cellB = rowB.children[defaultSortColumnIndex].textContent.trim();

const valueA = parseCellValue(cellA);
const valueB = parseCellValue(cellB);

if (valueA < valueB) return 1; // Reverse logic for descending
if (valueA > valueB) return -1;
return 0;
};

rows.sort(compare);
rows.forEach(row => tbody.appendChild(row)); // Re-append sorted rows
defaultSortHeader.querySelector(".arrow").textContent = "▼"; // Set descending arrow
});
</script>




<body>
<header>
<div class="container">
Expand Down Expand Up @@ -475,17 +467,17 @@ <h2></h2>
<h2 class="fade-in">Leaderboard</h2>
<div class="leaderboard-wrapper fade-in">
<div class="leaderboard-container">
<table width="80%" style="margin: 0 auto; border:0px solid;text-align:center">
<thead>
<tr>
<th>Model Name</th>
<th>Input Size</th>
<th>RAM (KiB)</th>
<th>Flash (KiB)</th>
<th>MACs (MM)</th>
<th>Test Accuracy</th>
</tr>
</thead>
<table width="80%" style="margin: 0 auto; border:0px solid;text-align:center">
<thead>
<tr>
<th>Model Name</th>
<th>Input Size</th>
<th>RAM (KiB)</th>
<th>Flash (KiB)</th>
<th>MACs (MM)</th>
<th>Test Accuracy</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><a href="https://github.com/mit-han-lab/mcunet/blob/master/mcunet/model_zoo.py">mcunet-320kb-1mb_vww</a></td>
Expand Down Expand Up @@ -580,8 +572,8 @@ <h3>🙋‍♂️ Contribute</h3>
<a href="mailto:AndreaMattia.Garavagno@santannapisa.it">Share your results with us</a>
and contribute to the leaderboard, or you can issue a PR at
<a href="https://github.com/your-repository-link">this link</a>!
</p>
</div>
</p>
</div>
<div class="feature-item fade-in">
<h3>🏆 Challenge</h3>
<p>Stay tuned for an upcoming competition in conjunciton with the <a href="https://www.edgeaifoundation.org/">Edge AI Foundation</a>!</p>
Expand Down

0 comments on commit b27e901

Please sign in to comment.