vote layout

dual viewers

loading bars

loading bar max width

voting title

fetch pairs

record votes (fixed username)

more robust error handling

display score, votes

add oauth

README.md

@@ -7,6 +7,8 @@ sdk: docker
 pinned: false
 license: mit
 app_port: 3000
+hf_oauth: true
+hf_oauth_expiration_minutes: 480
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

src/routes/+page.svelte

@@ -2,6 +2,7 @@
     import Leaderboard from "./Leaderboard.svelte";
     import ModelDetails from "./ModelDetails.svelte";
     import Viewer from "./Viewer.svelte";
+    import Vote from "./Vote.svelte";
 
     interface Scene {
         name: string;
@@ -9,7 +10,7 @@
         thumbnail: string;
     }
 
-    let currentView: "Leaderboard" | "Vote" | "ModelDetails" | "Viewer" = "Leaderboard";
+    let currentView: "Leaderboard" | "Vote" | "ModelDetails" | "Viewer" = "Vote";
     let selectedEntry: { name: string; path: string } | null = null;
     let selectedScene: Scene | null = null;
 
@@ -46,9 +47,7 @@
     {#if currentView === "Leaderboard"}
         <Leaderboard onEntryClick={showModelDetails} />
     {:else if currentView === "Vote"}
-        <div class="loading-container">
-            <div class="loading-text">Coming Soon</div>
-        </div>
+        <Vote />
     {:else if currentView === "ModelDetails" && selectedEntry}
         <ModelDetails
             modelName={selectedEntry.name}

src/routes/Leaderboard.svelte

@@ -4,35 +4,29 @@
 
     interface Entry {
         name: string;
-        path: string;
-        thumbnail: string;
+        rank: number;
+        score: number;
+        votes: number;
     }
 
     export let onEntryClick: (entry: Entry) => void;
 
+    const baseUrl = "https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/outputs";
     let leaderboard: Entry[] = [];
 
     const fetchLeaderboardData = async () => {
-        const baseUrl = "https://huggingface.co";
-        const repoId = "dylanebert/3d-arena";
-        const url = `${baseUrl}/api/datasets/${repoId}`;
-        const response = await fetch(url);
-        const data = await response.json();
-
-        const entries: Entry[] = [];
-
-        for (const item of data.siblings) {
-            const filename = item.rfilename;
-            if (!filename.endsWith(".json")) continue;
-
-            const directory = filename.split("/").slice(0, -1).join("/");
-            const name = directory.split("/").pop();
-            const thumbnail = `${baseUrl}/datasets/${repoId}/resolve/main/${directory}/thumbnail.png`;
-
-            entries.push({ name, path: filename, thumbnail });
-        }
-
-        leaderboard = entries;
+        const url = "https://dylanebert-3d-arena-backend.hf.space/leaderboard";
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+                "Cache-Control": "no-cache",
+            },
+        });
+        const data = (await response.json()) as Entry[];
+        data.sort((a, b) => a.rank - b.rank);
+
+        leaderboard = data;
     };
 
     onMount(async () => {
@@ -42,11 +36,21 @@
 
 {#if leaderboard.length > 0}
     <div class="grid">
-        {#each leaderboard as entry, index}
+        {#each leaderboard as entry}
             <button class="grid-item" on:click={() => onEntryClick(entry)}>
-                <img src={entry.thumbnail} alt={entry.name} class="thumbnail" />
-                <div class="ranking">{index + 1}</div>
+                <img src={`${baseUrl}/${entry.name}/thumbnail.png`} alt={entry.name} class="thumbnail" />
+                <div class="ranking">{entry.rank}</div>
                 <div class="title">{entry.name}</div>
+                <div class="score-container">
+                    <div class="score">
+                        <span class="label">Score:</span>
+                        {entry.score}
+                    </div>
+                    <div class="votes">
+                        <span class="label">Votes:</span>
+                        {entry.votes}
+                    </div>
+                </div>
             </button>
         {/each}
     </div>

src/routes/ModelDetails.svelte

@@ -9,7 +9,6 @@
     }
 
     export let modelName: string;
-    export let modelPath: string;
     export let onBack: () => void;
     export let onSceneClick: (scene: Scene) => void;
 
@@ -18,14 +17,12 @@
     async function fetchScenes() {
         scenes = [];
 
-        const baseUrl = "https://huggingface.co";
-        const repoId = "dylanebert/3d-arena";
-        const url = `${baseUrl}/api/datasets/${repoId}`;
+        const url = `https://huggingface.co/api/datasets/dylanebert/3d-arena`;
         const response = await fetch(url);
         const responseData = await response.json();
 
+        const directory = `outputs/${modelName}`;
         const extensions = ["obj", "glb", "ply", "splat"];
-        const directory = modelPath.split("/").slice(0, -1).join("/");
 
         scenes = responseData.siblings
             .filter((scene: any) => {
@@ -34,7 +31,7 @@
             })
             .reduce((acc: Scene[], scene: any) => {
                 const name = scene.rfilename.split("/").pop().split(".").slice(0, -1).join(".");
-                const url = `${baseUrl}/datasets/${repoId}/resolve/main/${scene.rfilename}`;
+                const url = `https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/${scene.rfilename}`;
                 const thumbnail = url.replace(/\.[^.]+$/, ".png");
                 acc.push({ name, url, thumbnail });
                 return acc;

src/routes/Viewer.svelte

@@ -16,22 +16,30 @@
 
     let container: HTMLDivElement;
     let canvas: HTMLCanvasElement;
+    let overlay: HTMLDivElement;
+    let loadingBarFill: HTMLDivElement;
 
     let viewer: IViewer;
 
     async function loadScene() {
-        viewer = await createViewer(scene.url, canvas);
+        overlay.style.display = "flex";
+        viewer = await createViewer(scene.url, canvas, (progress) => {
+            loadingBarFill.style.width = `${progress * 100}%`;
+        });
         window.addEventListener("resize", handleResize);
         window.addEventListener("keydown", handleKeyDown);
         handleResize();
+        overlay.style.display = "none";
     }
 
     function handleResize() {
         if (!canvas || !container) return;
-        const maxWidth = container.clientHeight * (16 / 9);
-        const maxHeight = container.clientWidth * (9 / 16);
-        canvas.width = Math.min(container.clientWidth, maxWidth);
-        canvas.height = Math.min(container.clientHeight, maxHeight);
+        requestAnimationFrame(() => {
+            const maxWidth = container.clientHeight * (16 / 9);
+            const maxHeight = container.clientWidth * (9 / 16);
+            canvas.width = Math.min(container.clientWidth, maxWidth);
+            canvas.height = Math.min(container.clientHeight, maxHeight);
+        });
     }
 
     function handleKeyDown(e: KeyboardEvent) {
@@ -56,8 +64,10 @@
 
     onDestroy(() => {
         viewer?.dispose();
-        window.removeEventListener("resize", handleResize);
-        window.removeEventListener("keydown", handleKeyDown);
+        if (typeof window !== "undefined") {
+            window.removeEventListener("resize", handleResize);
+            window.removeEventListener("keydown", handleKeyDown);
+        }
     });
 </script>
 
@@ -74,5 +84,10 @@
     <div class="desktop-spacer" />
 </div>
 <div class="canvas-container" bind:this={container}>
+    <div bind:this={overlay} class="loading-overlay">
+        <div class="loading-bar">
+            <div bind:this={loadingBarFill} class="loading-bar-fill" />
+        </div>
+    </div>
     <canvas bind:this={canvas} width={800} height={600} />
 </div>

src/routes/Vote.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+    import { onMount, onDestroy } from "svelte";
+    import type { IViewer } from "./viewers/IViewer";
+    import { createViewer } from "./viewers/ViewerFactory";
+
+    interface Data {
+        input: string;
+        input_path: string;
+        model1: string;
+        model1_path: string;
+        model2: string;
+        model2_path: string;
+    }
+
+    let viewerA: IViewer;
+    let viewerB: IViewer;
+    let canvasA: HTMLCanvasElement;
+    let canvasB: HTMLCanvasElement;
+    let containerA: HTMLDivElement;
+    let containerB: HTMLDivElement;
+    let overlayA: HTMLDivElement;
+    let overlayB: HTMLDivElement;
+    let loadingBarFillA: HTMLDivElement;
+    let loadingBarFillB: HTMLDivElement;
+    let statusMessage: string = "Loading...";
+    let errorMessage: string = "";
+    let data: Data;
+
+    async function fetchScenes() {
+        statusMessage = "Loading...";
+        errorMessage = "";
+
+        try {
+            const username = "dylanebert";
+            const url = `https://dylanebert-3d-arena-backend.hf.space/pair?username=${username}`;
+            const response = await fetch(url, {
+                method: "GET",
+                headers: {
+                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+                    "Cache-Control": "no-cache",
+                },
+            });
+            const result = await response.json();
+            if (result.input) {
+                data = result;
+                statusMessage = "";
+                return true;
+            } else {
+                statusMessage = "Voting complete.";
+                return false;
+            }
+        } catch (error) {
+            errorMessage = "Failed to fetch pair.";
+            statusMessage = "";
+            return false;
+        }
+    }
+
+    async function loadScenes() {
+        const success = await fetchScenes();
+        if (!success) return;
+
+        overlayA.style.display = "flex";
+        overlayB.style.display = "flex";
+
+        const baseUrl = "https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/";
+        const model1_path = `${baseUrl}${data.model1_path}`;
+        const model2_path = `${baseUrl}${data.model2_path}`;
+
+        try {
+            const promises = [
+                createViewer(model1_path, canvasA, (progress) => {
+                    loadingBarFillA.style.width = `${progress * 100}%`;
+                }),
+                createViewer(model2_path, canvasB, (progress) => {
+                    loadingBarFillB.style.width = `${progress * 100}%`;
+                }),
+            ];
+            await Promise.all(promises);
+
+            window.addEventListener("resize", handleResize);
+            handleResize();
+        } catch (error) {
+            errorMessage = "Failed to load scenes.";
+        }
+
+        overlayA.style.display = "none";
+        overlayB.style.display = "none";
+    }
+
+    async function vote(option: "A" | "B") {
+        statusMessage = "Processing vote...";
+        errorMessage = "";
+
+        const payload = {
+            username: "dylanebert",
+            input: data.input,
+            better: option == "A" ? data.model1 : data.model2,
+            worse: option == "A" ? data.model2 : data.model1,
+        };
+        const url = `https://dylanebert-3d-arena-backend.hf.space/vote`;
+
+        try {
+            const response = await fetch(url, {
+                method: "POST",
+                headers: {
+                    Authorization: "Bearer " + import.meta.env.VITE_HF_TOKEN,
+                    "Cache-Control": "no-cache",
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(payload),
+            });
+
+            if (response.ok) {
+                const result = await response.json();
+                console.log(result);
+                loadScenes();
+            } else {
+                errorMessage = "Failed to process vote.";
+            }
+        } catch (error) {
+            errorMessage = "Failed to process vote.";
+            statusMessage = "";
+        }
+    }
+
+    function handleResize() {
+        requestAnimationFrame(() => {
+            if (canvasA && containerA) {
+                const maxWidth = containerA.clientHeight;
+                const maxHeight = containerA.clientWidth;
+                canvasA.width = Math.min(containerA.clientWidth, maxWidth);
+                canvasA.height = Math.min(containerA.clientHeight, maxHeight);
+            }
+            if (canvasB && containerB) {
+                const maxWidth = containerB.clientHeight;
+                const maxHeight = containerB.clientWidth;
+                canvasB.width = Math.min(containerB.clientWidth, maxWidth);
+                canvasB.height = Math.min(containerB.clientHeight, maxHeight);
+            }
+        });
+    }
+
+    onMount(loadScenes);
+
+    onDestroy(() => {
+        viewerA?.dispose();
+        viewerB?.dispose();
+        if (typeof window !== "undefined") {
+            window.removeEventListener("resize", handleResize);
+        }
+    });
+</script>
+
+{#if errorMessage}
+    <p class="center-title muted" style="color: red;">{errorMessage}</p>
+{:else if statusMessage}
+    <p class="center-title muted">{statusMessage}</p>
+{:else}
+    <h2 class="center-title">Which is better?</h2>
+    <div class="voting-container">
+        <div bind:this={containerA} class="voting-canvas-wrapper">
+            <div bind:this={overlayA} class="loading-overlay">
+                <div class="loading-bar">
+                    <div bind:this={loadingBarFillA} class="loading-bar-fill" />
+                </div>
+            </div>
+            <canvas bind:this={canvasA} class="voting-canvas" id="canvas1"></canvas>
+            <button class="vote-button" on:click={() => vote("A")}>A is Better</button>
+        </div>
+        <div bind:this={containerB} class="voting-canvas-wrapper">
+            <div bind:this={overlayB} class="loading-overlay">
+                <div class="loading-bar">
+                    <div bind:this={loadingBarFillB} class="loading-bar-fill" />
+                </div>
+            </div>
+            <canvas bind:this={canvasB} class="voting-canvas" id="canvas2"></canvas>
+            <button class="vote-button" on:click={() => vote("B")}>B is Better</button>
+        </div>
+    </div>
+{/if}

src/routes/viewers/ViewerFactory.ts

@@ -5,7 +5,11 @@ import { SplatViewer } from "./SplatViewer";
 const meshFormats = ["obj", "stl", "gltf", "glb"];
 const splatFormats = ["splat", "ply"];
 
-export async function createViewer(url: string, canvas: HTMLCanvasElement): Promise<IViewer> {
+export async function createViewer(
+    url: string,
+    canvas: HTMLCanvasElement,
+    onProgress: (progress: number) => void
+): Promise<IViewer> {
     let viewer: IViewer;
     if (meshFormats.some((format) => url.endsWith(format))) {
         viewer = new BabylonViewer(canvas);
@@ -14,6 +18,6 @@ export async function createViewer(url: string, canvas: HTMLCanvasElement): Prom
     } else {
         throw new Error("Unsupported file format");
     }
-    await viewer.loadScene(url);
+    await viewer.loadScene(url, onProgress);
     return viewer;
 }

static/global.css

@@ -104,6 +104,46 @@ body {
     overflow: hidden;
 }
 
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1b1e;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    gap: 10px;
+}
+
+.loading-overlay::before {
+    content: "Loading...";
+    color: white;
+    font-size: 16px;
+}
+
+.loading-bar {
+    position: relative;
+    width: 256px;
+    max-width: 62%;
+    height: 20px;
+    border: 2px solid #aaa;
+    background-color: #1a1b1e;
+}
+
+.loading-bar-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 100%;
+    background-color: #555;
+    transition: width 0.2s ease;
+}
+
 .header {
     display: flex;
     align-items: center;
@@ -232,6 +272,32 @@ body {
     background-color: #26272c;
 }
 
+.score-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    box-sizing: border-box;
+    color: #aaa;
+    font-size: 12px;
+}
+
+.score,
+.votes {
+    display: flex;
+    gap: 10px;
+    width: 100%;
+}
+
+.label {
+    font-weight: bold;
+    justify-content: flex-end;
+    width: 50px;
+}
+
 .thumbnail {
     position: absolute;
     top: 50%;
@@ -248,6 +314,54 @@ body {
     transform: translate(-50%, -50%) scale(1.1);
 }
 
+.center-title {
+    text-align: center;
+    display: block;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+.voting-container {
+    display: flex;
+    justify-content: space-around;
+}
+
+.voting-canvas-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+}
+
+.voting-canvas {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+}
+
+.vote-button {
+    background-color: #333;
+    color: #fff;
+    border: 1px solid #444;
+    outline: none;
+    padding: 10px 10px 10px 10px;
+    font-family: "Roboto", sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    width: 100%;
+    height: 56px;
+    transition: background-color 0.2s ease;
+}
+
+.vote-button:hover {
+    background-color: #444;
+    cursor: pointer;
+}
+
 .tabs {
     display: flex;
     justify-content: left;