support alternative display names

src/routes/+page.svelte

@@ -12,14 +12,14 @@
     }
 
     let currentView: "Leaderboard" | "Vote" | "ModelDetails" | "Viewer" | "About" = "Vote";
-    let selectedEntry: { name: string; path: string } | null = null;
+    let selectedEntry: { name: string } | null = null;
     let selectedScene: Scene | null = null;
 
     function goHome() {
         window.location.href = "/";
     }
 
-    function showModelDetails(entry: { name: string; path: string }) {
+    function showModelDetails(entry: { name: string }) {
         selectedEntry = entry;
         currentView = "ModelDetails";
     }
@@ -55,7 +55,6 @@
     {:else if currentView === "ModelDetails" && selectedEntry}
         <ModelDetails
             modelName={selectedEntry.name}
-            modelPath={selectedEntry.path}
             onBack={() => (currentView = "Leaderboard")}
             onSceneClick={showScene}
         />

src/routes/Leaderboard.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { ProgressBarRound } from "carbon-icons-svelte";
+    import { getConfig } from "./utils/getConfig";
 
     interface Entry {
         name: string;
         rank: number;
         score: number;
         votes: number;
+        displayName?: string;
     }
 
     export let onEntryClick: (entry: Entry) => void;
@@ -23,9 +25,15 @@
             },
         });
         const data = (await response.json()) as Entry[];
-        data.sort((a, b) => a.rank - b.rank);
+        const entriesWithDisplayNames = await Promise.all(
+            data.map(async (entry) => {
+                const config = await getConfig(entry.name);
+                return { ...entry, displayName: config.DisplayName || entry.name };
+            }),
+        );
+        entriesWithDisplayNames.sort((a, b) => a.rank - b.rank);
 
-        leaderboard = data;
+        leaderboard = entriesWithDisplayNames;
     };
 
     onMount(async () => {
@@ -39,7 +47,7 @@
             <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="title">{entry.name}</div>
+                <div class="title">{entry.displayName}</div>
                 <div class="score-container">
                     <div class="score">
                         <span class="label">Score:</span>

src/routes/ModelDetails.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { ProgressBarRound, ArrowLeft } from "carbon-icons-svelte";
+    import { getConfig } from "./utils/getConfig";
+    import type { Config } from "./utils/Config";
 
     interface Scene {
         name: string;
@@ -8,18 +10,13 @@
         thumbnail: string;
     }
 
-    interface Config {
-        Model: string;
-        Space: string;
-        Paper: string;
-    }
-
     export let modelName: string;
     export let onBack: () => void;
     export let onSceneClick: (scene: Scene) => void;
 
     let scenes: Scene[] = [];
     let config: Config;
+    let displayName: string;
 
     async function fetchScenes() {
         scenes = [];
@@ -44,14 +41,14 @@
                 return acc;
             }, []);
 
-        const configUrl = `https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/outputs/${modelName}/config.json`;
-        const configResponse = await fetch(configUrl);
-        config = (await configResponse.json()) as Config;
+        config = await getConfig(modelName);
+        displayName = config.DisplayName || modelName;
 
         scenes = [...scenes];
     }
 
-    function isValidUrl(url: string): boolean {
+    function isValidUrl(url: string | undefined): boolean {
+        if (!url) return false;
         try {
             new URL(url);
             return true;
@@ -69,7 +66,7 @@
     </div>
     <div class="spacer" />
     <button class="title-button" on:click={fetchScenes}>
-        <h2 class="muted">{modelName}</h2>
+        <h2 class="muted">{displayName || "Loading..."}</h2>
     </button>
     <div class="desktop-spacer" />
 </div>
@@ -99,7 +96,7 @@
                     <a class="muted" href={config.Paper} target="_blank">
                         {config.Paper.replace("https://huggingface.co/papers/", "").replace(
                             "https://arxiv.org/abs/",
-                            ""
+                            "",
                         )}
                     </a>
                 </div>

src/routes/Viewer.svelte

@@ -3,6 +3,8 @@
     import type { IViewer } from "./viewers/IViewer";
     import { createViewer } from "./viewers/ViewerFactory";
     import { ArrowLeft, Cube, WatsonHealth3DPrintMesh } from "carbon-icons-svelte";
+    import type { Config } from "./utils/Config";
+    import { getConfig } from "./utils/getConfig";
 
     interface Scene {
         name: string;
@@ -20,9 +22,11 @@
     let loadingBarFill: HTMLDivElement;
 
     let viewer: IViewer;
+    let displayName: string;
 
     async function loadScene() {
         overlay.style.display = "flex";
+        displayName = (await getConfig(modelName)).DisplayName || modelName;
         viewer = await createViewer(scene.url, canvas, (progress) => {
             loadingBarFill.style.width = `${progress * 100}%`;
         });
@@ -78,9 +82,13 @@
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <h2>
-            <span class="muted" on:click={onBack}>{modelName}/</span>{scene.name.length > 16
-                ? `${scene.name.slice(0, 16)}...`
-                : scene.name}
+            {#if displayName}
+                <span class="muted" on:click={onBack}>{displayName}/</span>{scene.name.length > 16
+                    ? `${scene.name.slice(0, 16)}...`
+                    : scene.name}
+            {:else}
+                Loading...
+            {/if}
         </h2>
     </button>
     <div class="desktop-spacer" />

src/routes/Vote.svelte

@@ -3,14 +3,17 @@
     import type { IViewer } from "./viewers/IViewer";
     import { createViewer } from "./viewers/ViewerFactory";
     import { Cube, WatsonHealth3DPrintMesh } from "carbon-icons-svelte";
+    import { getConfig } from "./utils/getConfig";
 
     interface Data {
         input: string;
         input_path: string;
         model1: string;
         model1_path: string;
+        model1_displayName: string;
         model2: string;
         model2_path: string;
+        model2_displayName: string;
     }
 
     let viewerA: IViewer;
@@ -78,6 +81,12 @@
         const model1_path = `${baseUrl}${data.model1_path}`;
         const model2_path = `${baseUrl}${data.model2_path}`;
 
+        const config1 = await getConfig(data.model1);
+        const config2 = await getConfig(data.model2);
+
+        data.model1_displayName = config1.DisplayName || data.model1;
+        data.model2_displayName = config2.DisplayName || data.model2;
+
         try {
             [viewerA, viewerB] = await Promise.all([
                 createViewer(model1_path, canvasA, (progress) => {
@@ -214,7 +223,7 @@
                     <div bind:this={loadingBarFillA} class="loading-bar-fill" />
                 </div>
             </div>
-            <div bind:this={voteOverlayA} class="vote-overlay">{data.model1}</div>
+            <div bind:this={voteOverlayA} class="vote-overlay">{data.model1_displayName}</div>
             <canvas bind:this={canvasA} class="viewer-canvas" id="canvas1"> </canvas>
             <div class="stats">
                 {#if viewerA}
@@ -253,7 +262,7 @@
                     <div bind:this={loadingBarFillB} class="loading-bar-fill" />
                 </div>
             </div>
-            <div bind:this={voteOverlayB} class="vote-overlay">{data.model2}</div>
+            <div bind:this={voteOverlayB} class="vote-overlay">{data.model2_displayName}</div>
             <canvas bind:this={canvasB} class="viewer-canvas" id="canvas2"></canvas>
             <div class="stats">
                 {#if viewerB}

src/routes/utils/Config.ts

@@ -0,0 +1,6 @@
+export interface Config {
+    Model?: string;
+    Space?: string;
+    Paper?: string;
+    DisplayName?: string;
+}

src/routes/utils/getConfig.ts

@@ -0,0 +1,8 @@
+import type { Config } from "./Config";
+
+export async function getConfig(modelName: string): Promise<Config> {
+    const configUrl = `https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/outputs/${modelName}/config.json`;
+    const configResponse = await fetch(configUrl);
+    const config = await configResponse.json();
+    return config;
+}