add topology voting support

src/routes/+page.svelte

@@ -22,6 +22,7 @@
     let showOnlyOpenSource = false;
     let showFilter = false;
     let filterContainer: HTMLDivElement;
+    let voteType: 'render' | 'topology' = 'render';
     
     $: apiConfig = getApiConfig();
     $: isDevelopment = dev || apiConfig.isLocal;
@@ -89,6 +90,35 @@
                     </button>
                     {#if showFilter}
                         <div class="filter-dropdown" role="menu" aria-label="Filter options">
+                            <div class="filter-section">
+                                <div class="filter-section-title">Vote Type</div>
+                                <div
+                                    class="filter-option {voteType === 'render' ? 'active' : ''}"
+                                    on:click={() => (voteType = 'render')}
+                                    on:keydown={(e) => e.key === "Enter" && (voteType = 'render')}
+                                    role="menuitemradio"
+                                    aria-checked={voteType === 'render'}
+                                    tabindex="0"
+                                >
+                                    <div class="filter-label">
+                                        Render Quality
+                                    </div>
+                                    <span class="filter-checkbox">✓</span>
+                                </div>
+                                <div
+                                    class="filter-option {voteType === 'topology' ? 'active' : ''}"
+                                    on:click={() => (voteType = 'topology')}
+                                    on:keydown={(e) => e.key === "Enter" && (voteType = 'topology')}
+                                    role="menuitemradio"
+                                    aria-checked={voteType === 'topology'}
+                                    tabindex="0"
+                                >
+                                    <div class="filter-label">
+                                        Topology
+                                    </div>
+                                    <span class="filter-checkbox">✓</span>
+                                </div>
+                            </div>
                             <div class="filter-section">
                                 <div class="filter-section-title">Filter Options</div>
                                 <div
@@ -114,7 +144,7 @@
     {/if}
 
     {#if currentView === "Leaderboard"}
-        <Leaderboard onEntryClick={showModelDetails} {showOnlyOpenSource} />
+        <Leaderboard onEntryClick={showModelDetails} {showOnlyOpenSource} {voteType} />
     {:else if currentView === "Vote"}
         <Vote />
     {:else if currentView === "ModelDetails" && selectedEntry}

src/routes/Leaderboard.svelte

@@ -14,13 +14,14 @@
 
     export let onEntryClick: (entry: Entry) => void;
     export let showOnlyOpenSource: boolean;
+    export let voteType: string = 'render';
 
     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";
+        const url = `/api/leaderboard?vote_type=${voteType}`;
         const response = await fetch(url, {
             method: "GET",
             headers: {
@@ -49,6 +50,11 @@
         updateFilteredLeaderboard();
     }
 
+    $: {
+        voteType;
+        fetchLeaderboardData();
+    }
+
     onMount(async () => {
         await fetchLeaderboardData();
     });

src/routes/Vote.svelte

@@ -14,6 +14,7 @@
         model2: string;
         model2_path: string;
         model2_displayName: string;
+        vote_type: string;
     }
 
     let viewerA: IViewer;
@@ -88,15 +89,21 @@
         data.model2_displayName = config2.DisplayName || data.model2;
 
         try {
+            const isTopology = data.vote_type === "topology";
             [viewerA, viewerB] = await Promise.all([
                 createViewer(model1_path, canvasA, (progress) => {
                     loadingBarFillA.style.width = `${progress * 100}%`;
-                }),
+                }, isTopology),
                 createViewer(model2_path, canvasB, (progress) => {
                     loadingBarFillB.style.width = `${progress * 100}%`;
-                }),
+                }, isTopology),
             ]);
 
+            if (isTopology) {
+                viewerA.setRenderMode("wireframe");
+                viewerB.setRenderMode("wireframe");
+            }
+
             window.addEventListener("resize", handleResize);
             handleResize();
         } catch (error) {
@@ -122,6 +129,7 @@
             input: data.input,
             better: option == "A" ? data.model1 : data.model2,
             worse: option == "A" ? data.model2 : data.model1,
+            vote_type: data.vote_type,
         };
         const url = `/api/vote`;
 
@@ -210,7 +218,11 @@
         />
     </div>
     <h2 class="center-title">Which is better?</h2>
-    <p class="center-subtitle">Use mouse/touch to change the view.</p>
+    {#if data.vote_type === "topology"}
+        <p class="center-subtitle">Topology comparison: wireframe view only</p>
+    {:else}
+        <p class="center-subtitle">Use mouse/touch to change the view.</p>
+    {/if}
     <div class="voting-container">
         <div bind:this={containerA} class="canvas-container">
             <div bind:this={overlayA} class="loading-overlay">
@@ -225,7 +237,7 @@
                     <p>vertex count: {viewerA.vertexCount}</p>
                 {/if}
             </div>
-            {#if viewerA && !viewerA.topoOnly}
+            {#if viewerA && !viewerA.topoOnly && data.vote_type !== "topology"}
                 <div class="mode-toggle">
                     <label>
                         <input
@@ -264,7 +276,7 @@
                     <p>vertex count: {viewerB.vertexCount}</p>
                 {/if}
             </div>
-            {#if viewerB && !viewerB.topoOnly}
+            {#if viewerB && !viewerB.topoOnly && data.vote_type !== "topology"}
                 <div class="mode-toggle">
                     <label>
                         <input

src/routes/api/leaderboard/+server.ts

@@ -1,10 +1,11 @@
 import { getApiEndpoint, ApiEndpoints } from "$lib/config";
 
-export const GET = async () => {
-    const url = getApiEndpoint(ApiEndpoints.LEADERBOARD);
+export const GET = async ({ url }) => {
+    const voteType = url.searchParams.get('vote_type') || 'render';
+    const apiUrl = `${getApiEndpoint(ApiEndpoints.LEADERBOARD)}?vote_type=${voteType}`;
 
     try {
-        const response = await fetch(url, {
+        const response = await fetch(apiUrl, {
             method: "GET",
             headers: {
                 Authorization: `Bearer ${import.meta.env.VITE_HF_TOKEN}`,

src/routes/viewers/ViewerFactory.ts

@@ -8,7 +8,8 @@ const splatFormats = ["splat", "ply"];
 export async function createViewer(
     url: string,
     canvas: HTMLCanvasElement,
-    onProgress: (progress: number) => void
+    onProgress: (progress: number) => void,
+    forceTopoOnly: boolean = false
 ): Promise<IViewer> {
     let viewer: IViewer;
     if (meshFormats.some((format) => url.endsWith(format))) {
@@ -18,7 +19,7 @@ export async function createViewer(
     } else {
         throw new Error("Unsupported file format");
     }
-    const topoOnly: boolean = url.endsWith(".obj");
+    const topoOnly: boolean = forceTopoOnly || url.endsWith(".obj");
     await viewer.loadScene(url, onProgress, topoOnly);
     return viewer;
 }