show input

src/routes/Vote.svelte

@@ -168,6 +168,13 @@
 {:else if statusMessage}
     <p class="center-title muted">{statusMessage}</p>
 {:else}
+    <div class="vote-input">
+        <img
+            src={`https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/${data.input_path}`}
+            class="input-image"
+            alt="Input"
+        />
+    </div>
     <h2 class="center-title">Which is better?</h2>
     <p class="center-subtitle">Use mouse/touch to change the view.</p>
     <div class="voting-container">

src/routes/viewers/BabylonViewer.ts

@@ -53,6 +53,7 @@ export class BabylonViewer implements IViewer {
 
         this.handleResize = this.handleResize.bind(this);
         window.addEventListener("resize", this.handleResize);
+        this.canvas.addEventListener("wheel", (e) => e.preventDefault());
     }
 
     handleResize() {
@@ -134,6 +135,7 @@ export class BabylonViewer implements IViewer {
         }
         this._originalColors.clear();
         window.removeEventListener("resize", this.handleResize);
+        this.canvas.removeEventListener("wheel", (e) => e.preventDefault());
     }
 
     async capture(): Promise<string | null> {

static/global.css

@@ -5,9 +5,8 @@ body {
     color: white;
     margin: 0;
     padding: 0;
-    height: 100%;
     width: 100%;
-    overflow: hidden;
+    overflow: auto;
 }
 
 .banner {
@@ -77,8 +76,6 @@ body {
     margin-left: auto;
     margin-right: auto;
     padding: 10px;
-    height: 100vh;
-    overflow: hidden;
     position: relative;
     box-sizing: border-box;
 
@@ -103,11 +100,6 @@ body {
     overflow-x: auto;
 }
 
-.content {
-    max-height: 100%;
-    overflow: auto;
-}
-
 .canvas-container {
     position: relative;
     width: 100%;
@@ -305,6 +297,19 @@ body {
     width: 100%;
 }
 
+.vote-input {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+}
+
+.input-image {
+    width: 128px;
+    height: 128px;
+    padding: 10px;
+}
+
 .stats {
     position: absolute;
     top: 0;