topology toggle, brighter models, more layout improvements

src/routes/ModelDetails.svelte

@@ -67,41 +67,35 @@
 
 <div class="model-details">
     {#if config && (config.Model || config.Space || config.Paper)}
-        <table class="config-table">
+        <div class="config-container">
             {#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>
+                <div class="config-item">
+                    <span class="config-label">Model:</span>
+                    <a class="muted" href={config.Model} target="_blank">
+                        {config.Model.replace("https://huggingface.co/", "")}
+                    </a>
+                </div>
             {/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>
+                <div class="config-item">
+                    <span class="config-label">Space:</span>
+                    <a class="muted" href={config.Space} target="_blank">
+                        {config.Space.replace("https://huggingface.co/spaces/", "")}
+                    </a>
+                </div>
             {/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>
+                <div class="config-item">
+                    <span class="config-label">Paper:</span>
+                    <a class="muted" href={config.Paper} target="_blank">
+                        {config.Paper.replace("https://huggingface.co/papers/", "").replace(
+                            "https://arxiv.org/abs/",
+                            ""
+                        )}
+                    </a>
+                </div>
             {/if}
-        </table>
+        </div>
     {/if}
 
     {#if scenes.length > 0}

src/routes/Viewer.svelte

@@ -2,7 +2,7 @@
     import { onMount, onDestroy } from "svelte";
     import type { IViewer } from "./viewers/IViewer";
     import { createViewer } from "./viewers/ViewerFactory";
-    import ArrowLeft from "carbon-icons-svelte/lib/ArrowLeft.svelte";
+    import { ArrowLeft, Cube, WatsonHealth3DPrintMesh } from "carbon-icons-svelte";
 
     interface Scene {
         name: string;
@@ -35,10 +35,8 @@
     function handleResize() {
         if (!canvas || !container) return;
         requestAnimationFrame(() => {
-            const maxWidth = container.clientHeight * 16 / 9;
-            const maxHeight = container.clientWidth * 9 / 16;
-            canvas.width = Math.min(container.clientWidth, maxWidth);
-            canvas.height = Math.min(container.clientHeight, maxHeight);
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight;
         });
     }
 
@@ -89,5 +87,21 @@
             <div bind:this={loadingBarFill} class="loading-bar-fill" />
         </div>
     </div>
-    <canvas class="viewer-canvas" bind:this={canvas} width={800} height={600} />
+    <canvas class="viewer-canvas" bind:this={canvas} width={800} height={600}> </canvas>
+    <div class="mode-toggle">
+        <label>
+            <input
+                type="radio"
+                name="modeB"
+                value="default"
+                checked
+                on:change={() => viewer.setRenderMode("default")}
+            />
+            <Cube class="mode-toggle-icon" />
+        </label>
+        <label>
+            <input type="radio" name="modeB" value="wireframe" on:change={() => viewer.setRenderMode("wireframe")} />
+            <WatsonHealth3DPrintMesh class="mode-toggle-icon" />
+        </label>
+    </div>
 </div>

src/routes/Vote.svelte

@@ -3,6 +3,7 @@
     import { v4 as uuidv4 } from "uuid";
     import type { IViewer } from "./viewers/IViewer";
     import { createViewer } from "./viewers/ViewerFactory";
+    import { Cube, WatsonHealth3DPrintMesh } from "carbon-icons-svelte";
 
     interface Data {
         input: string;
@@ -79,15 +80,14 @@
         const model2_path = `${baseUrl}${data.model2_path}`;
 
         try {
-            const promises = [
+            [viewerA, viewerB] = await Promise.all([
                 createViewer(model1_path, canvasA, (progress) => {
                     loadingBarFillA.style.width = `${progress * 100}%`;
                 }),
                 createViewer(model2_path, canvasB, (progress) => {
                     loadingBarFillB.style.width = `${progress * 100}%`;
                 }),
-            ];
-            await Promise.all(promises);
+            ]);
 
             window.addEventListener("resize", handleResize);
             handleResize();
@@ -138,20 +138,20 @@
     function handleResize() {
         requestAnimationFrame(() => {
             if (canvasA && containerA) {
-                const maxWidth = (containerA.clientHeight * 16) / 9;
-                const maxHeight = (containerA.clientWidth * 9) / 16;
-                canvasA.width = Math.min(containerA.clientWidth, maxWidth);
-                canvasA.height = Math.min(containerA.clientHeight, maxHeight);
+                canvasA.width = containerA.clientWidth;
+                canvasA.height = containerA.clientHeight;
             }
             if (canvasB && containerB) {
-                const maxWidth = (containerB.clientHeight * 16) / 9;
-                const maxHeight = (containerB.clientWidth * 9) / 16;
-                canvasB.width = Math.min(containerB.clientWidth, maxWidth);
-                canvasB.height = Math.min(containerB.clientHeight, maxHeight);
+                canvasB.width = containerB.clientWidth;
+                canvasB.height = containerB.clientHeight;
             }
         });
     }
 
+    function setRenderMode(viewer: IViewer, mode: string) {
+        viewer.setRenderMode(mode);
+    }
+
     onMount(loadScenes);
 
     onDestroy(() => {
@@ -169,26 +169,71 @@
     <p class="center-title muted">{statusMessage}</p>
 {:else}
     <h2 class="center-title">Which is better?</h2>
+    <p class="center-subtitle">Use mouse/touch to change the view.</p>
     <div class="voting-container">
-        <div bind:this={containerA} class="voting-canvas-wrapper">
+        <div bind:this={containerA} class="canvas-container">
             <div bind:this={overlayA} class="loading-overlay">
                 <div class="loading-bar">
                     <div bind:this={loadingBarFillA} class="loading-bar-fill" />
                 </div>
             </div>
-            <canvas bind:this={canvasA} class="voting-canvas" id="canvas1"></canvas>
-            <button class="vote-button" on:click={() => vote("A")}>A is Better</button>
+            <canvas bind:this={canvasA} class="viewer-canvas" id="canvas1"> </canvas>
+            <div class="mode-toggle">
+                <label>
+                    <input
+                        type="radio"
+                        name="modeA"
+                        value="default"
+                        checked
+                        on:change={() => setRenderMode(viewerA, "default")}
+                    />
+                    <Cube class="mode-toggle-icon" />
+                </label>
+                <label>
+                    <input
+                        type="radio"
+                        name="modeA"
+                        value="wireframe"
+                        on:change={() => setRenderMode(viewerA, "wireframe")}
+                    />
+                    <WatsonHealth3DPrintMesh class="mode-toggle-icon" />
+                </label>
+            </div>
         </div>
-        <div bind:this={containerB} class="voting-canvas-wrapper">
+        <div bind:this={containerB} class="canvas-container">
             <div bind:this={overlayB} class="loading-overlay">
                 <div class="loading-bar">
                     <div bind:this={loadingBarFillB} class="loading-bar-fill" />
                 </div>
             </div>
-            <canvas bind:this={canvasB} class="voting-canvas" id="canvas2"></canvas>
-            <button class="vote-button" on:click={() => vote("B")}>B is Better</button>
+            <canvas bind:this={canvasB} class="viewer-canvas" id="canvas2"></canvas>
+            <div class="mode-toggle">
+                <label>
+                    <input
+                        type="radio"
+                        name="modeB"
+                        value="default"
+                        checked
+                        on:change={() => setRenderMode(viewerB, "default")}
+                    />
+                    <Cube class="mode-toggle-icon" />
+                </label>
+                <label>
+                    <input
+                        type="radio"
+                        name="modeB"
+                        value="wireframe"
+                        on:change={() => setRenderMode(viewerB, "wireframe")}
+                    />
+                    <WatsonHealth3DPrintMesh class="mode-toggle-icon" />
+                </label>
+            </div>
         </div>
     </div>
+    <div class="vote-buttons-container">
+        <button class="vote-button" on:click={() => vote("A")}>A is Better</button>
+        <button class="vote-button" on:click={() => vote("B")}>B is Better</button>
+    </div>
     <div class="skip-container">
         <button class="vote-button" on:click={() => loadScenes()}>Skip</button>
     </div>

src/routes/viewers/BabylonViewer.ts

@@ -12,6 +12,14 @@ export class BabylonViewer implements IViewer {
 
     triangleCount: number = 0;
 
+    private _originalColors: Map<
+        BABYLON.AbstractMesh,
+        {
+            albedoColor: BABYLON.Color3;
+            emissiveColor: BABYLON.Color3;
+        }
+    > = new Map();
+
     constructor(canvas: HTMLCanvasElement) {
         this.canvas = canvas;
 
@@ -19,6 +27,7 @@ export class BabylonViewer implements IViewer {
 
         this.scene = new BABYLON.Scene(this.engine);
         this.scene.clearColor = BABYLON.Color4.FromHexString("#000000FF");
+        this.scene.imageProcessingConfiguration.exposure = 3;
 
         this.camera = new BABYLON.ArcRotateCamera(
             "camera",
@@ -68,13 +77,13 @@ export class BabylonViewer implements IViewer {
         });
 
         // Add lights
-        const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), this.scene);
-        light.intensity = 1;
-        light.diffuse = new BABYLON.Color3(1, 1, 1);
-        light.groundColor = new BABYLON.Color3(0.3, 0.3, 0.3);
+        const hemi = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), this.scene);
+        hemi.intensity = 0.5;
+        hemi.diffuse = new BABYLON.Color3(1, 1, 1);
+        hemi.groundColor = new BABYLON.Color3(1, 1, 1);
 
         const sun = new BABYLON.DirectionalLight("sun", new BABYLON.Vector3(-0.5, -1, -0.5), this.scene);
-        sun.intensity = 2;
+        sun.intensity = 1;
         sun.diffuse = new BABYLON.Color3(1, 1, 1);
 
         // Center and scale model
@@ -123,6 +132,7 @@ export class BabylonViewer implements IViewer {
         if (this.engine) {
             this.engine.dispose();
         }
+        this._originalColors.clear();
         window.removeEventListener("resize", this.handleResize);
     }
 
@@ -141,6 +151,30 @@ export class BabylonViewer implements IViewer {
 
     setRenderMode(mode: string) {
         this.scene.forceWireframe = mode === "wireframe";
+        if (mode === "wireframe") {
+            this.scene.meshes.forEach((mesh) => {
+                const material = mesh.material as BABYLON.PBRMaterial;
+                if (material) {
+                    this._originalColors.set(mesh, {
+                        albedoColor: material.albedoColor,
+                        emissiveColor: material.emissiveColor,
+                    });
+                    material.albedoColor = new BABYLON.Color3(0, 0, 0);
+                    material.emissiveColor = new BABYLON.Color3(1, 0.65, 0);
+                }
+            });
+        } else {
+            this.scene.meshes.forEach((mesh) => {
+                const material = mesh.material as BABYLON.PBRMaterial;
+                if (material) {
+                    const originalColors = this._originalColors.get(mesh);
+                    if (originalColors) {
+                        material.albedoColor = originalColors.albedoColor;
+                        material.emissiveColor = originalColors.emissiveColor;
+                    }
+                }
+            });
+        }
     }
 
     getStats(): { name: string; value: any }[] {

src/routes/viewers/IViewer.ts

@@ -2,5 +2,6 @@ export interface IViewer {
     loadScene(url: string, onProgress?: (progress: number) => void): Promise<void>;
     dispose(): void;
     capture(): Promise<string | null>;
+    setRenderMode(mode: string): void;
     getStats(): { name: string; value: any }[];
 }

src/routes/viewers/SplatViewer.ts

@@ -8,6 +8,7 @@ export class SplatViewer implements IViewer {
     scene: SPLAT.Scene;
     camera: SPLAT.Camera;
     controls: SPLAT.OrbitControls;
+    splat: SPLAT.Splat | null;
 
     disposed: boolean = false;
 
@@ -19,17 +20,18 @@ export class SplatViewer implements IViewer {
         this.camera = new SPLAT.Camera();
         this.controls = new SPLAT.OrbitControls(this.camera, canvas);
         this.controls.orbitSpeed = 3.0;
+        this.splat = null;
 
         this.handleResize = this.handleResize.bind(this);
     }
 
     async loadScene(url: string, loadingBarCallback?: (progress: number) => void) {
         if (url.endsWith(".splat")) {
-            await SPLAT.Loader.LoadAsync(url, this.scene, (progress) => {
+            this.splat = await SPLAT.Loader.LoadAsync(url, this.scene, (progress) => {
                 loadingBarCallback?.(progress);
             });
         } else if (url.endsWith(".ply")) {
-            await SPLAT.PLYLoader.LoadAsync(url, this.scene, (progress) => {
+            this.splat = await SPLAT.PLYLoader.LoadAsync(url, this.scene, (progress) => {
                 loadingBarCallback?.(progress);
             });
         } else {
@@ -96,6 +98,16 @@ export class SplatViewer implements IViewer {
         });
     }
 
+    setRenderMode(mode: string): void {
+        if (!this.splat) return;
+
+        if (mode === "wireframe") {
+            this.splat.selected = true;
+        } else {
+            this.splat.selected = false;
+        }
+    }
+
     getStats(): { name: string; value: any }[] {
         return [];
     }

static/global.css

@@ -66,52 +66,37 @@ 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;
+    display: flex;
+    flex-direction: column;
     margin-left: auto;
     margin-right: auto;
     height: 100vh;
-    overflow-y: auto;
+    overflow: hidden;
     position: relative;
     box-sizing: border-box;
 
     @media (min-width: 576px) {
-        max-width: 540px;
+        max-width: 320px;
     }
 
     @media (min-width: 768px) {
-        max-width: 720px;
+        max-width: 480px;
     }
 
     @media (min-width: 992px) {
-        max-width: 960px;
+        max-width: 600px;
     }
 
     @media (min-width: 1200px) {
-        max-width: 1140px;
+        max-width: 800px;
     }
 }
 
 .canvas-container {
     position: relative;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
     width: 100%;
-    max-height: 50%;
+    padding-top: 56.25%;
     overflow: hidden;
 }
 
@@ -174,6 +159,16 @@ body {
     transform: scale(1.2);
 }
 
+.config-container {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    flex-wrap: wrap;
+}
+
 .spacer {
     flex: 1;
 }
@@ -214,19 +209,11 @@ body {
     width: 100%;
 
     @media (min-width: 576px) {
-        width: calc(33.333% - 10px);
-    }
-
-    @media (min-width: 768px) {
-        width: calc(25% - 10px);
+        width: calc(50% - 10px);
     }
 
     @media (min-width: 992px) {
-        width: calc(20% - 10px);
-    }
-
-    @media (min-width: 1200px) {
-        width: calc(16.666% - 10px);
+        width: calc(33.333% - 10px);
     }
 }
 
@@ -329,33 +316,35 @@ body {
     text-align: center;
     display: block;
     margin: 0 auto;
-    padding: 10px;
+    padding-top: 10px 0 0 0;
 }
 
-.voting-container {
-    display: flex;
-    justify-content: space-around;
+.center-subtitle {
+    text-align: center;
+    display: block;
+    margin: 0 auto;
+    padding: 10px 10px 20px 10px;
+    color: #aaa;
 }
 
-.voting-canvas-wrapper {
-    position: relative;
+.vote-buttons-container {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    max-width: 50%;
-    box-sizing: border-box;
-    padding: 10px;
+    flex-direction: row;
+    gap: 10px;
 }
 
-.voting-canvas {
-    width: 100%;
-    height: auto;
-    aspect-ratio: 16 / 9;
+.voting-container {
+    display: flex;
+    justify-content: space-around;
+    gap: 10px;
 }
 
 .viewer-canvas {
-    aspect-ratio: 16 / 9;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .vote-button {
@@ -363,7 +352,7 @@ body {
     color: #fff;
     border: 1px solid #444;
     outline: none;
-    padding: 10px 10px 10px 10px;
+    padding: 10px;
     font-family: "Roboto", sans-serif;
     font-size: 14px;
     font-weight: 600;
@@ -378,8 +367,40 @@ body {
 }
 
 .skip-container {
-    max-width: 50%;
-    margin: 0 auto;
+    width: 50%;
+    margin: 10px auto;
+}
+
+.mode-toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.mode-toggle input[type="radio"] {
+    display: none;
+}
+
+.mode-toggle-icon {
+    padding: 10px;
+    color: #aaa;
+    background-color: #1a1b1e;
+    width: 14px;
+    height: 14px;
+    transition: background-color 0.2s ease;
+}
+
+.mode-toggle-icon:hover {
+    cursor: pointer;
+    background-color: #333;
+}
+
+.mode-toggle input[type="radio"]:checked + .mode-toggle-icon {
+    background-color: #444;
 }
 
 .tabs {