added about page

src/routes/+page.svelte

@@ -3,6 +3,7 @@
     import ModelDetails from "./ModelDetails.svelte";
     import Viewer from "./Viewer.svelte";
     import Vote from "./Vote.svelte";
+    import About from "./About.svelte";
 
     interface Scene {
         name: string;
@@ -10,7 +11,7 @@
         thumbnail: string;
     }
 
-    let currentView: "Leaderboard" | "Vote" | "ModelDetails" | "Viewer" = "Vote";
+    let currentView: "Leaderboard" | "Vote" | "ModelDetails" | "Viewer" | "About" = "Vote";
     let selectedEntry: { name: string; path: string } | null = null;
     let selectedScene: Scene | null = null;
 
@@ -35,12 +36,15 @@
         <p>Generative 3D Leaderboard</p>
     </div>
 
-    {#if currentView === "Leaderboard" || currentView === "Vote"}
+    {#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 = "About")} class={currentView === "About" ? "active" : ""}
+                >About</button
+            >
         </div>
     {/if}
 
@@ -57,5 +61,7 @@
         />
     {:else if currentView === "Viewer" && selectedScene && selectedEntry}
         <Viewer modelName={selectedEntry.name} scene={selectedScene} onBack={() => (currentView = "ModelDetails")} />
+    {:else if currentView === "About"}
+        <About />
     {/if}
 </div>

src/routes/About.svelte

@@ -0,0 +1,63 @@
+<div class="about">
+    <div class="section" style="padding: 10px 0;">
+        <p class="muted">
+            The <span class="emphasis">IGF</span> (In-Game Footage) 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>
+    </div>
+    <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.
+        </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.
+        </p>
+        <p class="muted">
+            To preview how your results will look in the leaderboard, upload them to any <a
+                class="emphasis"
+                target="_blank"
+                href="https://huggingface.co/spaces/gradio/model3D">gradio/model3d</a
+            > viewer.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="emphasis">Contributing</h3>
+        <p class="muted">
+            All inputs and outputs are publicly available <a
+                class="emphasis"
+                target="_blank"
+                href="https://huggingface.co/datasets/dylanebert/3d-arena">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.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="emphasis">Citing</h3>
+        <pre>
+            <code>
+                @misc&lbrace;igf-leaderboard,
+                    author = &lbrace;Dylan Ebert&rbrace;
+                    title = &lbrace;IGF Leaderboard&rbrace;
+                    year = &lbrace;2024&rbrace;
+                    publisher = &lbrace;Hugging Face&rbrace;
+                    howpublished = &lbrace;https://huggingface.co/spaces/dylanebert/igf&rbrace;
+                &rbrace;
+            </code>
+        </pre>
+    </div>
+</div>

static/global.css

@@ -36,6 +36,16 @@ body {
     color: #aaa;
 }
 
+.emphasis {
+    color: #ddd;
+    font-weight: bold;
+}
+
+.about {
+    overflow: auto;
+    max-height: 100%;
+}
+
 .loading-container {
     display: flex;
     flex-direction: column;