add model details; fix sizing

src/routes/ModelDetails.svelte

@@ -8,11 +8,18 @@
         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;
 
     async function fetchScenes() {
         scenes = [];
@@ -37,6 +44,10 @@
                 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;
+
         scenes = [...scenes];
     }
 
@@ -53,18 +64,59 @@
     </button>
     <div class="desktop-spacer" />
 </div>
-{#if scenes.length > 0}
-    <div class="grid">
-        {#each scenes as scene}
-            <button class="grid-item" on:click={() => onSceneClick(scene)}>
-                <img src={scene.thumbnail} alt={scene.name} class="thumbnail" />
-                <div class="title">{scene.name}</div>
-            </button>
-        {/each}
-    </div>
-{:else}
-    <div class="loading-container">
-        <ProgressBarRound class="loading-icon" />
-        <div class="loading-text">Loading...</div>
-    </div>
-{/if}
+
+<div class="model-details">
+    {#if config && (config.Model || config.Space || config.Paper)}
+        <table class="config-table">
+            {#if config.Model}
+                <tr>
+                    <td>Model:</td>
+                    <td
+                        ><a class="muted" href={config.Model} target="_blank"
+                            >{config.Model.replace("https://huggingface.co/", "")}</a
+                        ></td
+                    >
+                </tr>
+            {/if}
+            {#if config.Space}
+                <tr>
+                    <td>Space:</td>
+                    <td
+                        ><a class="muted" href={config.Space} target="_blank"
+                            >{config.Space.replace("https://huggingface.co/spaces/", "")}</a
+                        ></td
+                    >
+                </tr>
+            {/if}
+            {#if config.Paper}
+                <tr>
+                    <td>Paper:</td>
+                    <td
+                        ><a class="muted" href={config.Paper} target="_blank"
+                            >{config.Paper.replace("https://huggingface.co/papers/", "").replace(
+                                "https://arxiv.org/abs/",
+                                ""
+                            )}</a
+                        ></td
+                    >
+                </tr>
+            {/if}
+        </table>
+    {/if}
+
+    {#if scenes.length > 0}
+        <div class="grid">
+            {#each scenes as scene}
+                <button class="grid-item" on:click={() => onSceneClick(scene)}>
+                    <img src={scene.thumbnail} alt={scene.name} class="thumbnail" />
+                    <div class="title">{scene.name}</div>
+                </button>
+            {/each}
+        </div>
+    {:else}
+        <div class="loading-container">
+            <ProgressBarRound class="loading-icon" />
+            <div class="loading-text">Loading...</div>
+        </div>
+    {/if}
+</div>

src/routes/Viewer.svelte

@@ -89,5 +89,5 @@
             <div bind:this={loadingBarFill} class="loading-bar-fill" />
         </div>
     </div>
-    <canvas bind:this={canvas} width={800} height={600} />
+    <canvas class="viewer-canvas" bind:this={canvas} width={800} height={600} />
 </div>

static/global.css

@@ -66,6 +66,17 @@ body {
     }
 }
 
+.config-table {
+    margin: 1rem auto;
+}
+
+@media (min-width: 768px) {
+    .config-table tr {
+        display: inline-block;
+        margin-right: 1rem;
+    }
+}
+
 .container {
     padding: 10px 15px 80px 15px;
     margin-left: auto;
@@ -343,6 +354,10 @@ body {
     aspect-ratio: 1 / 1;
 }
 
+.viewer-canvas {
+    aspect-ratio: 16 / 9;
+}
+
 .vote-button {
     background-color: #333;
     color: #fff;