open source filter option

src/routes/+page.svelte

@@ -4,6 +4,9 @@
     import Viewer from "./Viewer.svelte";
     import Vote from "./Vote.svelte";
     import About from "./About.svelte";
+    import { Filter, CheckmarkOutline } from "carbon-icons-svelte";
+    import { onMount } from "svelte";
+    import { CaretDown, Code } from "carbon-icons-svelte";
 
     interface Scene {
         name: string;
@@ -14,6 +17,22 @@
     let currentView: "Leaderboard" | "Vote" | "ModelDetails" | "Viewer" | "About" = "Vote";
     let selectedEntry: { name: string } | null = null;
     let selectedScene: Scene | null = null;
+    let showOnlyOpenSource = false;
+    let showFilter = false;
+    let filterContainer: HTMLDivElement;
+
+    function handleClickOutside(event: MouseEvent) {
+        if (filterContainer && !filterContainer.contains(event.target as Node)) {
+            showFilter = false;
+        }
+    }
+
+    onMount(() => {
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    });
 
     function goHome() {
         window.location.href = "/";
@@ -45,11 +64,45 @@
             <button on:click={() => (currentView = "About")} class={currentView === "About" ? "active" : ""}
                 >About</button
             >
+            {#if currentView === "Leaderboard"}
+                <div class="filter-container" bind:this={filterContainer}>
+                    <button
+                        class="filter-button"
+                        on:click={() => (showFilter = !showFilter)}
+                        aria-expanded={showFilter}
+                        aria-haspopup="true"
+                    >
+                        <Filter size={20} />
+                        <CaretDown size={16} class="caret" />
+                    </button>
+                    {#if showFilter}
+                        <div class="filter-dropdown" role="menu" aria-label="Filter options">
+                            <div class="filter-section">
+                                <div class="filter-section-title">Filter Options</div>
+                                <div
+                                    class="filter-option {showOnlyOpenSource ? 'active' : ''}"
+                                    on:click={() => (showOnlyOpenSource = !showOnlyOpenSource)}
+                                    on:keydown={(e) => e.key === "Enter" && (showOnlyOpenSource = !showOnlyOpenSource)}
+                                    role="menuitemcheckbox"
+                                    aria-checked={showOnlyOpenSource}
+                                    tabindex="0"
+                                >
+                                    <div class="filter-label">
+                                        <Code size={16} class="filter-icon" />
+                                        Open source
+                                    </div>
+                                    <span class="filter-checkbox">✓</span>
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
+                </div>
+            {/if}
         </div>
     {/if}
 
     {#if currentView === "Leaderboard"}
-        <Leaderboard onEntryClick={showModelDetails} />
+        <Leaderboard onEntryClick={showModelDetails} {showOnlyOpenSource} />
     {:else if currentView === "Vote"}
         <Vote />
     {:else if currentView === "ModelDetails" && selectedEntry}

src/routes/Leaderboard.svelte

@@ -8,13 +8,16 @@
         rank: number;
         score: number;
         votes: number;
+        open_source: boolean;
         displayName?: string;
     }
 
     export let onEntryClick: (entry: Entry) => void;
+    export let showOnlyOpenSource: boolean;
 
     const baseUrl = "https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/outputs";
     let leaderboard: Entry[] = [];
+    let filteredLeaderboard: Entry[] = [];
 
     const fetchLeaderboardData = async () => {
         const url = "/api/leaderboard";
@@ -34,19 +37,29 @@
         entriesWithDisplayNames.sort((a, b) => a.rank - b.rank);
 
         leaderboard = entriesWithDisplayNames;
+        updateFilteredLeaderboard();
     };
 
+    const updateFilteredLeaderboard = () => {
+        filteredLeaderboard = showOnlyOpenSource ? leaderboard.filter((entry) => entry.open_source) : leaderboard;
+    };
+
+    $: {
+        showOnlyOpenSource;
+        updateFilteredLeaderboard();
+    }
+
     onMount(async () => {
         await fetchLeaderboardData();
     });
 </script>
 
-{#if leaderboard.length > 0}
+{#if filteredLeaderboard.length > 0}
     <div class="grid">
-        {#each leaderboard as entry}
+        {#each filteredLeaderboard as entry, index}
             <button class="grid-item" on:click={() => onEntryClick(entry)}>
                 <img src={`${baseUrl}/${entry.name}/thumbnail.png`} alt={entry.name} class="thumbnail" />
-                <div class="ranking">{entry.rank}</div>
+                <div class="ranking">{index + 1}</div>
                 <div class="title">{entry.displayName}</div>
                 <div class="score-container">
                     <div class="score">

static/global.css

@@ -476,6 +476,7 @@ body {
     margin-bottom: 10px;
     gap: 10px;
     width: 100%;
+    align-items: center;
 }
 
 .tabs button {
@@ -498,3 +499,118 @@ body {
 .tabs button.active {
     background-color: #444;
 }
+
+.filter-container {
+    position: relative;
+    margin-left: auto;
+}
+
+.filter-button {
+    background-color: #333;
+    border: 1px solid #444;
+    color: #fff;
+    padding: 8px 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+    gap: 4px;
+    font-size: 14px;
+}
+
+.filter-button:hover {
+    background-color: #444;
+}
+
+.filter-button .caret {
+    transition: transform 0.2s ease;
+    margin-left: 2px;
+}
+
+.filter-button[aria-expanded="true"] .caret {
+    transform: rotate(180deg);
+}
+
+.filter-dropdown {
+    position: absolute;
+    top: calc(100% + 5px);
+    right: 0;
+    background-color: #1a1b1e;
+    border: 1px solid #444;
+    border-radius: 4px;
+    padding: 4px;
+    min-width: 200px;
+    z-index: 1000;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.filter-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    color: #ddd;
+    cursor: pointer;
+    border-radius: 2px;
+    white-space: nowrap;
+    font-size: 14px;
+    transition: all 0.2s ease;
+    background-color: transparent;
+    position: relative;
+}
+
+.filter-option:hover {
+    background-color: #2a2d31;
+}
+
+.filter-option.active {
+    background-color: #333;
+}
+
+.filter-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.filter-icon {
+    color: #888;
+    transition: color 0.2s ease;
+}
+
+.filter-option:hover .filter-icon,
+.filter-option.active .filter-icon {
+    color: #ddd;
+}
+
+.filter-checkbox {
+    position: absolute;
+    right: 12px;
+    color: transparent;
+    transition: color 0.2s ease;
+    font-size: 14px;
+}
+
+.filter-option.active .filter-checkbox {
+    color: #fff;
+}
+
+.filter-section {
+    padding: 8px 0;
+    border-bottom: 1px solid #333;
+}
+
+.filter-section:last-child {
+    border-bottom: none;
+}
+
+.filter-section-title {
+    padding: 4px 12px;
+    color: #888;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}