roboflow · onuralpszr · Sep 10, 2024 · Sep 10, 2024 · Sep 10, 2024 · Sep 10, 2024
diff --git a/index.html b/index.html
@@ -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>
@@ -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>
diff --git 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"
     }
   }
-];
+];
diff --git a/static/dark-theme.css 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
@@ -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
@@ -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
diff --git a/static/theme-toggle.js 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';
+        }
+    });
+});