Skip to content

Commit

Permalink
Merge pull request #16 from roboflow/develop
Browse files Browse the repository at this point in the history
Develop into main, website theming
  • Loading branch information
onuralpszr authored Sep 10, 2024
2 parents 2cf21e7 + 3d379d7 commit 797640f
Show file tree
Hide file tree
Showing 7 changed files with 267 additions and 51 deletions.
49 changes: 38 additions & 11 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,48 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Model Leaderboard</title>
<link rel="stylesheet" href="static/light-theme.css">
<link rel="stylesheet" href="static/dark-theme.css" id="theme-link">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.5/css/dataTables.dataTables.min.css">
<link rel="stylesheet" href="static/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

</head>

<body>
<div class="container">
<h1>Model Leaderboard</h1>
<div class="header-row">
<h1>Model Leaderboard</h1>
<div class="theme-toggle-container">
<input type="checkbox" id="theme-toggle" class="theme-toggle">
<label for="theme-toggle" class="theme-toggle-label">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</label>
</div>
</div>
<h3>🚧 Under construction: the values may be incorrect! 🏗️</h3>
<div class="subtitle-row">
<p class="sv-row">powered by&nbsp<a class="sv-row" href='https://github.com/roboflow/supervision'><img src='https://supervision.roboflow.com/latest/assets/supervision-lenny.png' height=24 width=24 style='display: inline-block'> supervision</a></p>
<span>benchmarked on: <a href="https://universe.roboflow.com/microsoft/coco/dataset/3">COCO</a><br/>(custom test subset, 11k images)</span>
<p class="sv-row">
powered by&nbsp;
<img src='https://supervision.roboflow.com/latest/assets/supervision-lenny.png' height=24 width=24
style='display: inline-block'>
<a class="sv-row" href='https://github.com/roboflow/supervision'>
supervision
</a>
&nbsp;|&nbsp;
<i class="fab fa-github" style="font-size: 24px; width: 24px; height: 24px;"></i>
<a class="sv-row" href='https://github.com/roboflow/model-leaderboard'>
model-leaderboard
</a>
</p>
<span>benchmarked on: <a href="https://universe.roboflow.com/microsoft/coco/dataset/3">COCO</a><br />(custom
test subset, 11k images)</span>
</div>
<table id="leaderboard">
<thead>
Expand All @@ -35,12 +62,12 @@ <h1>Model Leaderboard</h1>
</table>
</div>

<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/2.1.5/js/dataTables.min.js"></script>
<script src="static/aggregate_results.js"></script>
<script src="static/script.js"></script>
<script src="static/theme-toggle.js"></script>
</body>

</html>
2 changes: 1 addition & 1 deletion static/aggregate_results.js
Original file line number Diff line number Diff line change
Expand Up @@ -739,4 +739,4 @@ const results = [
"run_date": "2024-09-06T02:11:13.496070+00:00"
}
}
];
];
102 changes: 102 additions & 0 deletions static/dark-theme.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
body {
background-color: #000;
color: #fff;
font-family: 'Source Code Pro', Arial, sans-serif;
padding: 20px;
}

.container {
width: 80%;
margin: 0 auto;
background-color: #333;
}

.header-row {
display: flex;
justify-content: space-between;
align-items: center;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 2px;
font-size: 14px;
}

th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #555;
}

th {
background-color: #444;
}

a {
color: #4493f8;
background-color: #388bfd1a;
padding: 2px 4px;
margin: 0px 4px;
border-radius: 5px;
}

.subtitle-row {
color: #ccc;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.sv-row {
display: flex;
flex-direction: row;
justify-items: center;
}

tr:nth-child(even) {
background-color: #222;
}

tr:nth-child(odd) {
background-color: #111;
}

.theme-toggle-container {
display: flex;
align-items: center;
}

.theme-toggle {
display: none;
}

.theme-toggle-label {
display: flex;
align-items: center;
cursor: pointer;
}

.theme-toggle-label .fas {
font-size: 1.5em;
margin: 0 5px;
}

.theme-toggle-label .fa-sun {
color: #000;
}

.theme-toggle-label .fa-moon {
color: #fff;
display: none;
}

.theme-toggle:checked + .theme-toggle-label .fa-sun {
display: none;
}

.theme-toggle:checked + .theme-toggle-label .fa-moon {
display: inline;
}
92 changes: 92 additions & 0 deletions static/light-theme.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
body {
font-family: 'Source Code Pro', Arial, sans-serif;
padding: 20px;
}

.container {
width: 80%;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
}

.header-row {
display: flex;
justify-content: space-between;
align-items: center;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 2px;
font-size: 14px;
}

th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}

th {
background-color: #f2f2f2;
}

a {
color: #4493f8;
background-color: #388bfd1a;
padding: 2px 4px;
margin: 0px 4px;
border-radius: 5px;
}

.subtitle-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.sv-row {
display: flex;
flex-direction: row;
justify-items: center;
}

.theme-toggle-container {
display: flex;
align-items: center;
}

.theme-toggle {
display: none;
}

.theme-toggle-label {
display: flex;
align-items: center;
cursor: pointer;
}

.theme-toggle-label .fas {
font-size: 1.5em;
margin: 0 5px;
}

.theme-toggle-label .fa-sun {
color: #000;
}

.theme-toggle-label .fa-moon {
color: #fff;
display: none;
}

.theme-toggle:checked + .theme-toggle-label .fa-sun {
display: inline;
}

.theme-toggle:checked + .theme-toggle-label .fa-moon {
display: none;
}
3 changes: 2 additions & 1 deletion static/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,12 @@ function populateTable() {
});

// Fancy table
let table = new DataTable('#leaderboard', {
new DataTable('#leaderboard', {
scrollY: '60vh', // Set table height to 50% of the viewport height
scrollCollapse: true, // Collapse the table if it has fewer rows
paging: false // Disable pagination
});
}


document.addEventListener('DOMContentLoaded', populateTable);
38 changes: 0 additions & 38 deletions static/style.css

This file was deleted.

32 changes: 32 additions & 0 deletions static/theme-toggle.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// theme-toggle.js
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.getElementById('theme-toggle');
const themeLink = document.getElementById('theme-link');

const currentTheme = localStorage.getItem('theme') || 'light';
if (currentTheme === 'dark') {
themeLink.href = 'static/dark-theme.css';
themeToggle.checked = true;
document.querySelector('.fa-sun').style.display = 'none';
document.querySelector('.fa-moon').style.display = 'inline';
} else {
themeLink.href = 'static/light-theme.css';
themeToggle.checked = false;
document.querySelector('.fa-sun').style.display = 'inline';
document.querySelector('.fa-moon').style.display = 'none';
}

themeToggle.addEventListener('change', () => {
if (themeToggle.checked) {
themeLink.href = 'static/dark-theme.css';
localStorage.setItem('theme', 'dark');
document.querySelector('.fa-sun').style.display = 'none';
document.querySelector('.fa-moon').style.display = 'inline';
} else {
themeLink.href = 'static/light-theme.css';
localStorage.setItem('theme', 'light');
document.querySelector('.fa-sun').style.display = 'inline';
document.querySelector('.fa-moon').style.display = 'none';
}
});
});

0 comments on commit 797640f

Please sign in to comment.