diff --git a/index.html b/index.html index a4020c7..6871c85 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,48 @@ + Model Leaderboard + + + + - - - - + +
-

Model Leaderboard

+
+

Model Leaderboard

+
+ + +
+
+

🚧 Under construction: the values may be incorrect! 🏗️

-

powered by  supervision

- benchmarked on: COCO
(custom test subset, 11k images) +

+ powered by  + + + supervision + +  |  + + + model-leaderboard + +

+ benchmarked on: COCO
(custom + test subset, 11k images)
@@ -35,12 +62,12 @@

Model Leaderboard

- + + + diff --git a/static/aggregate_results.js b/static/aggregate_results.js index 58c5db3..df0a33c 100644 --- a/static/aggregate_results.js +++ b/static/aggregate_results.js @@ -739,4 +739,4 @@ const results = [ "run_date": "2024-09-06T02:11:13.496070+00:00" } } -]; \ No newline at end of file +]; diff --git a/static/dark-theme.css b/static/dark-theme.css new file mode 100644 index 0000000..dd0cc3b --- /dev/null +++ b/static/dark-theme.css @@ -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; +} diff --git a/static/light-theme.css b/static/light-theme.css new file mode 100644 index 0000000..5888097 --- /dev/null +++ b/static/light-theme.css @@ -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; +} diff --git a/static/script.js b/static/script.js index 0d5225c..2f53ada 100644 --- a/static/script.js +++ b/static/script.js @@ -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); diff --git a/static/style.css b/static/style.css deleted file mode 100644 index 5c1180f..0000000 --- a/static/style.css +++ /dev/null @@ -1,38 +0,0 @@ -body { - font-family: 'Source Code Pro', Arial, sans-serif; - padding: 20px; -} - -.container { - width: 80%; - margin: 0 auto; -} - -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; -} - -.subtitle-row { - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.sv-row { - display: flex; - flex-direction: row; - justify-items: center; -} diff --git a/static/theme-toggle.js b/static/theme-toggle.js new file mode 100644 index 0000000..d78d6dd --- /dev/null +++ b/static/theme-toggle.js @@ -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'; + } + }); +});