prettier, formatting

src/app.html

@@ -14,4 +14,4 @@
 	<div style="display: contents">%sveltekit.body%</div>
 </body>
 
-</html>
+</html>

src/routes/+page.svelte

@@ -7,8 +7,8 @@
     import { Filter } from "carbon-icons-svelte";
     import { onMount } from "svelte";
     import { CaretDown, Code, Development } from "carbon-icons-svelte";
-    import { dev } from '$app/environment';
-    import { getApiConfig } from '$lib/config';
+    import { dev } from "$app/environment";
+    import { getApiConfig } from "$lib/config";
 
     interface Scene {
         name: string;
@@ -22,8 +22,8 @@
     let showOnlyOpenSource = false;
     let showFilter = false;
     let filterContainer: HTMLDivElement;
-    let voteType: 'render' | 'topology' = 'render';
-    
+    let voteType: "render" | "topology" = "render";
+
     $: apiConfig = getApiConfig();
     $: isDevelopment = dev || apiConfig.isLocal;
 
@@ -62,7 +62,7 @@
             <span>Development Mode - Backend: {apiConfig.baseUrl}</span>
         </div>
     {/if}
-    
+
     <div on:pointerdown={goHome} class="banner">
         <h1>3D Arena</h1>
         <p>Generative 3D Leaderboard</p>
@@ -70,12 +70,17 @@
 
     {#if currentView === "Leaderboard" || currentView === "Vote" || currentView === "About"}
         <div class="tabs">
-            <button on:click={() => (currentView = "Vote")} class={currentView === "Vote" ? "active" : ""}>Vote</button>
-            <button on:click={() => (currentView = "Leaderboard")} class={currentView === "Leaderboard" ? "active" : ""}
-                >Leaderboard</button
+            <button
+                on:click={() => (currentView = "Vote")}
+                class={currentView === "Vote" ? "active" : ""}>Vote</button
+            >
+            <button
+                on:click={() => (currentView = "Leaderboard")}
+                class={currentView === "Leaderboard" ? "active" : ""}>Leaderboard</button
             >
-            <button on:click={() => (currentView = "About")} class={currentView === "About" ? "active" : ""}
-                >About</button
+            <button
+                on:click={() => (currentView = "About")}
+                class={currentView === "About" ? "active" : ""}>About</button
             >
             {#if currentView === "Leaderboard"}
                 <div class="filter-container" bind:this={filterContainer}>
@@ -94,28 +99,24 @@
                                 <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')}
+                                    on:click={() => (voteType = "render")}
+                                    on:keydown={(e) => e.key === "Enter" && (voteType = "render")}
                                     role="menuitemradio"
-                                    aria-checked={voteType === 'render'}
+                                    aria-checked={voteType === "render"}
                                     tabindex="0"
                                 >
-                                    <div class="filter-label">
-                                        Render Quality
-                                    </div>
+                                    <div class="filter-label">Render</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')}
+                                    on:click={() => (voteType = "topology")}
+                                    on:keydown={(e) => e.key === "Enter" && (voteType = "topology")}
                                     role="menuitemradio"
-                                    aria-checked={voteType === 'topology'}
+                                    aria-checked={voteType === "topology"}
                                     tabindex="0"
                                 >
-                                    <div class="filter-label">
-                                        Topology
-                                    </div>
+                                    <div class="filter-label">Topology</div>
                                     <span class="filter-checkbox">✓</span>
                                 </div>
                             </div>
@@ -124,7 +125,9 @@
                                 <div
                                     class="filter-option {showOnlyOpenSource ? 'active' : ''}"
                                     on:click={() => (showOnlyOpenSource = !showOnlyOpenSource)}
-                                    on:keydown={(e) => e.key === "Enter" && (showOnlyOpenSource = !showOnlyOpenSource)}
+                                    on:keydown={(e) =>
+                                        e.key === "Enter" &&
+                                        (showOnlyOpenSource = !showOnlyOpenSource)}
                                     role="menuitemcheckbox"
                                     aria-checked={showOnlyOpenSource}
                                     tabindex="0"
@@ -154,7 +157,11 @@
             onSceneClick={showScene}
         />
     {:else if currentView === "Viewer" && selectedScene && selectedEntry}
-        <Viewer modelName={selectedEntry.name} scene={selectedScene} onBack={() => (currentView = "ModelDetails")} />
+        <Viewer
+            modelName={selectedEntry.name}
+            scene={selectedScene}
+            onBack={() => (currentView = "ModelDetails")}
+        />
     {:else if currentView === "About"}
         <About />
     {/if}

src/routes/About.svelte

@@ -1,7 +1,10 @@
 <div class="section" style="padding: 10px 0;">
     <p class="muted">
-        The <span class="emphasis">3D Arena</span> leaderboard evaluates leading generative 3D models. It is inspired by
-        <a class="emphasis" target="_blank" href="https://huggingface.co/spaces/TTS-AGI/TTS-Arena">TTS-Arena</a>
+        The <span class="emphasis">3D Arena</span> leaderboard evaluates leading generative 3D
+        models. It is inspired by
+        <a class="emphasis" target="_blank" href="https://huggingface.co/spaces/TTS-AGI/TTS-Arena"
+            >TTS-Arena</a
+        >
         and
         <a class="emphasis" target="_blank" href="https://chat.lmsys.org/">Chatbot Arena</a>.
     </p>
@@ -15,18 +18,20 @@
 <div class="section">
     <h3 class="emphasis">Motivation</h3>
     <p class="muted">
-        Evaluating generated 3D quality quantitatively is challenging, and there is no standard practice for reporting
-        critical factors like mesh topology in real-world applications.
+        Evaluating generated 3D quality quantitatively is challenging, and there is no standard
+        practice for reporting critical factors like mesh topology in real-world applications.
+    </p>
+    <p class="muted">
+        This leaderboard displays usable, final results side-by-side for the community to rank.
     </p>
-    <p class="muted">This leaderboard displays usable, final results side-by-side for the community to rank.</p>
 </div>
 <div class="section">
     <h3 class="emphasis">Criteria</h3>
     <p class="muted">
         Models must handle <span class="emphasis">image</span> (.png, .jpg) inputs and produce
         <span class="emphasis">mesh</span>
-        (.obj, .glb) or <span class="emphasis">splat</span> (.splat, .ply) outputs. They should run end-to-end without human
-        intervention, including UV unwrapping, texture mapping, and other post-processing.
+        (.obj, .glb) or <span class="emphasis">splat</span> (.splat, .ply) outputs. They should run end-to-end
+        without human intervention, including UV unwrapping, texture mapping, and other post-processing.
     </p>
     <p class="muted">
         To preview how your results will look in the leaderboard, upload them to any <a
@@ -43,13 +48,17 @@
             class="emphasis"
             target="_blank"
             href="https://huggingface.co/datasets/dylanebert/3d-arena">here</a
+        >. Input image URLs are provided
+        <a
+            class="emphasis"
+            target="_blank"
+            href="https://huggingface.co/datasets/dylanebert/3d-arena/raw/main/inputs.txt">here</a
         >.
-        Input image URLs are provided 
-        <a class="emphasis" target="_blank" href="https://huggingface.co/datasets/dylanebert/3d-arena/raw/main/inputs.txt">here</a>.
     </p>
     <p class="muted">
-        To contribute a model, run your model on all input images and create a pull request with your model's output.
-        Refer to other examples in the dataset to understand the expected format.
+        To contribute a model, run your model on all input images and create a pull request with
+        your model's output. Refer to other examples in the dataset to understand the expected
+        format.
     </p>
 </div>
 <div class="section">

src/routes/Leaderboard.svelte

@@ -14,7 +14,7 @@
 
     export let onEntryClick: (entry: Entry) => void;
     export let showOnlyOpenSource: boolean;
-    export let voteType: string = 'render';
+    export let voteType: string = "render";
 
     const baseUrl = "https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/outputs";
     let leaderboard: Entry[] = [];
@@ -42,7 +42,9 @@
     };
 
     const updateFilteredLeaderboard = () => {
-        filteredLeaderboard = showOnlyOpenSource ? leaderboard.filter((entry) => entry.open_source) : leaderboard;
+        filteredLeaderboard = showOnlyOpenSource
+            ? leaderboard.filter((entry) => entry.open_source)
+            : leaderboard;
     };
 
     $: {
@@ -64,7 +66,11 @@
     <div class="grid">
         {#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" />
+                <img
+                    src={`${baseUrl}/${entry.name}/thumbnail.png`}
+                    alt={entry.name}
+                    class="thumbnail"
+                />
                 <div class="ranking">{index + 1}</div>
                 <div class="title">{entry.displayName}</div>
                 <div class="score-container">

src/routes/ModelDetails.svelte

@@ -116,7 +116,9 @@
             {#each scenes as scene}
                 <button class="grid-item" on:click={() => onSceneClick(scene)}>
                     <img loading="lazy" src={scene.thumbnail} alt={scene.name} class="thumbnail" />
-                    <div class="title">{scene.name.length > 16 ? `${scene.name.slice(0, 16)}...` : scene.name}</div>
+                    <div class="title">
+                        {scene.name.length > 16 ? `${scene.name.slice(0, 16)}...` : scene.name}
+                    </div>
                 </button>
             {/each}
         </div>

src/routes/Vote.svelte

@@ -91,12 +91,22 @@
         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),
+                createViewer(
+                    model1_path,
+                    canvasA,
+                    (progress) => {
+                        loadingBarFillA.style.width = `${progress * 100}%`;
+                    },
+                    isTopology,
+                ),
+                createViewer(
+                    model2_path,
+                    canvasB,
+                    (progress) => {
+                        loadingBarFillB.style.width = `${progress * 100}%`;
+                    },
+                    isTopology,
+                ),
             ]);
 
             if (isTopology) {
@@ -209,7 +219,6 @@
             window.removeEventListener("resize", handleResize);
         }
     });
-
 </script>
 
 {#if errorMessage}