Spaces:

dylanebert
/

3d-arena

Running

App Files Files Community

dylanebert HF staff commited on Oct 6, 2023

Commit

7ee5f8f

•

1 Parent(s): 64644c3

add solution

Browse files

Files changed (28) hide show

viewer/.gitignore +10 -0
viewer/.npmrc +1 -0
viewer/README.md +38 -0
viewer/bun.lockb +0 -0
viewer/package.json +26 -0
viewer/src/app.d.ts +12 -0
viewer/src/app.html +17 -0
viewer/src/lib/data/models.json +12 -0
viewer/src/lib/data/scenes.json +20 -0
viewer/src/lib/dataLoader.ts +10 -0
viewer/src/lib/index.ts +1 -0
viewer/src/lib/placeholder.png +0 -0
viewer/src/routes/+page.svelte +49 -0
viewer/src/routes/components/ModelsView.svelte +40 -0
viewer/src/routes/components/ScenesView.svelte +30 -0
viewer/src/routes/models/[slug]/+page.server.ts +17 -0
viewer/src/routes/models/[slug]/+page.svelte +132 -0
viewer/src/routes/store.js +3 -0
viewer/src/routes/viewer/[slug]/+page.server.ts +13 -0
viewer/src/routes/viewer/[slug]/+page.svelte +348 -0
viewer/static/favicon.png +0 -0
viewer/static/global.css +121 -0
viewer/static/thumbnails/boombox.png +0 -0
viewer/static/thumbnails/duck.png +0 -0
viewer/static/thumbnails/toycar.png +0 -0
viewer/svelte.config.js +18 -0
viewer/tsconfig.json +17 -0
viewer/vite.config.ts +6 -0

viewer/.gitignore ADDED Viewed

	@@ -0,0 +1,10 @@

+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

viewer/.npmrc ADDED Viewed

	@@ -0,0 +1 @@


1	+ engine-strict=true

viewer/README.md ADDED Viewed

	@@ -0,0 +1,38 @@

+# create-svelte
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+## Creating a project
+If you're seeing this, you've probably already done this step. Congrats!
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+## Developing
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+```bash
+npm run dev
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+## Building
+To create a production version of your app:
+```bash
+npm run build
+```
+You can preview the production build with `npm run preview`.
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

viewer/bun.lockb ADDED Viewed

Binary file (52.4 kB). View file

viewer/package.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "name": "viewer",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.20.4",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "@babylonjs/core": "^6.23.0",
+    "@babylonjs/loaders": "^6.23.0"
+  }
+}

viewer/src/app.d.ts ADDED Viewed

	@@ -0,0 +1,12 @@

+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+export {};

viewer/src/app.html ADDED Viewed

	@@ -0,0 +1,17 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<link rel="stylesheet" href="%sveltekit.assets%/global.css" />
+	<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
+	<meta name="viewport" content="width=device-width" />
+	%sveltekit.head%
+</head>
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+</html>

viewer/src/lib/data/models.json ADDED Viewed

	@@ -0,0 +1,12 @@

+[
+    {
+        "slug": "mv-dream",
+        "title": "MVDream",
+        "paper": "https://huggingface.co/papers/2308.16512"
+    },
+    {
+        "slug": "sync-dreamer",
+        "title": "SyncDreamer",
+        "paper": "https://huggingface.co/papers/2309.03453"
+    }
+]

viewer/src/lib/data/scenes.json ADDED Viewed

	@@ -0,0 +1,20 @@

+[
+    {
+        "slug": "boombox",
+        "model": "mv-dream",
+        "title": "BoomBox",
+        "url": "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBox/glTF-Binary/BoomBox.glb"
+    },
+    {
+        "slug": "duck",
+        "model": "mv-dream",
+        "title": "Duck",
+        "url": "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb"
+    },
+    {
+        "slug": "toycar",
+        "model": "sync-dreamer",
+        "title": "Toy Car",
+        "url": "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/ToyCar/glTF-Binary/ToyCar.glb"
+    }
+]

viewer/src/lib/dataLoader.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+import scenes from "$lib/data/scenes.json";
+import models from "$lib/data/models.json";
+export async function getScenes() {
+    return scenes;
+}
+export async function getModels() {
+    return models;
+}

viewer/src/lib/index.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ // place files you want to import through the `$lib` alias in this folder.

viewer/src/lib/placeholder.png ADDED Viewed

viewer/src/routes/+page.svelte ADDED Viewed

	@@ -0,0 +1,49 @@

+<script lang="ts">
+    import { activeTab } from "./store.js";
+    import ModelsView from "./components/ModelsView.svelte";
+    import ScenesView from "./components/ScenesView.svelte";
+</script>
+<div class="container">
+    <div class="tabs">
+        <button on:click={() => activeTab.set("Models")} class={$activeTab === "Models" ? "active" : ""}>Models</button>
+        <button on:click={() => activeTab.set("Scenes")} class={$activeTab === "Scenes" ? "active" : ""}>Scenes</button>
+    </div>
+    {#if $activeTab === "Models"}
+        <ModelsView />
+    {:else}
+        <ScenesView />
+    {/if}
+</div>
+<style>
+    .tabs {
+        display: flex;
+        justify-content: left;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        gap: 10px;
+        width: 100%;
+    }
+    .tabs button {
+        background-color: #1a1b1e;
+        color: #ddd;
+        border: none;
+        outline: none;
+        padding: 10px 10px 10px 10px;
+        font-family: "Roboto", sans-serif;
+        font-size: 14px;
+        font-weight: 600;
+        transition: background-color 0.2s ease;
+    }
+    .tabs button:hover {
+        cursor: pointer;
+        background-color: #555;
+    }
+    .tabs button.active {
+        background-color: #444;
+    }
+</style>

viewer/src/routes/components/ModelsView.svelte ADDED Viewed

	@@ -0,0 +1,40 @@

+<script lang="ts">
+    import { onMount } from "svelte";
+    import { getModels, getScenes } from "$lib/dataLoader";
+    import placeholderImage from "$lib/placeholder.png";
+    let models: any[] = [];
+    let sceneMap: any = {};
+    onMount(async () => {
+        models = await getModels();
+        const scenes = await getScenes();
+        for (let model of models) {
+            for (let scene of scenes) {
+                if (scene.model === model.slug) {
+                    sceneMap[model.slug] = scene.slug;
+                    break;
+                }
+            }
+        }
+    });
+    function handleImageError(event: Event) {
+        const image = event.currentTarget as HTMLImageElement;
+        image.src = placeholderImage;
+    }
+</script>
+<div class="grid">
+    {#each models as model}
+        <a href={`/models/${model.slug}`} class="grid-item">
+            <img
+                src={`/thumbnails/${sceneMap[model.slug]}.png`}
+                alt={model.title}
+                class="thumbnail"
+                on:error={(event) => handleImageError(event)}
+            />
+            <div class="title">{model.title}</div>
+        </a>
+    {/each}
+</div>

viewer/src/routes/components/ScenesView.svelte ADDED Viewed

	@@ -0,0 +1,30 @@

+<script lang="ts">
+    import { onMount } from "svelte";
+    import { getScenes } from "$lib/dataLoader";
+    import placeholderImage from "$lib/placeholder.png";
+    let scenes: any[] = [];
+    onMount(async () => {
+        scenes = await getScenes();
+    });
+    function handleImageError(event: Event) {
+        const image = event.currentTarget as HTMLImageElement;
+        image.src = placeholderImage;
+    }
+</script>
+<div class="grid">
+    {#each scenes as scene}
+        <a href={`/viewer/${scene.slug}`} class="grid-item">
+            <img
+                src={`/thumbnails/${scene.slug}.png`}
+                alt={scene.title}
+                class="thumbnail"
+                on:error={(event) => handleImageError(event)}
+            />
+            <div class="title">{scene.title}</div>
+        </a>
+    {/each}
+</div>

viewer/src/routes/models/[slug]/+page.server.ts ADDED Viewed

	@@ -0,0 +1,17 @@

+import { error } from "@sveltejs/kit";
+import { getModels, getScenes } from "$lib/dataLoader";
+export async function load({ params }) {
+    const models = await getModels();
+    const scenes = await getScenes();
+    const model = models.find((model: any) => model.slug === params.slug);
+    const modelScenes = scenes.filter((scene: any) => scene.model === params.slug);
+    if (!modelScenes.length) throw error(404);
+    return {
+        model: model,
+        scenes: modelScenes
+    };
+}

viewer/src/routes/models/[slug]/+page.svelte ADDED Viewed

	@@ -0,0 +1,132 @@

+<script lang="ts">
+    import placeholderImage from "$lib/placeholder.png";
+    export let data: {
+        model: {
+            title: string;
+            paper: string;
+        };
+        scenes: {
+            slug: string;
+            title: string;
+        }[];
+    };
+    function handleImageError(event: Event) {
+        const image = event.currentTarget as HTMLImageElement;
+        image.src = placeholderImage;
+    }
+</script>
+<div class="container">
+    <div class="header">{data.model.title}</div>
+    <div class="model-container">
+        <div class="grid-container">
+            <div class="grid">
+                {#each data.scenes as scene}
+                    <a href={`/viewer/${scene.slug}`} class="grid-item">
+                        <img
+                            src={`/thumbnails/${scene.slug}.png`}
+                            alt={scene.title}
+                            class="thumbnail"
+                            on:error={(event) => handleImageError(event)}
+                        />
+                        <div class="title">{scene.title}</div>
+                    </a>
+                {/each}
+            </div>
+        </div>
+        <div class="model-info">
+            <p class="model-header">Info</p>
+            <table class="table">
+                {#if data.model.paper}
+                    <tr>
+                        <td>Paper</td>
+                        <td><a href={data.model.paper} target="_blank">Link</a></td>
+                    </tr>
+                {/if}
+            </table>
+        </div>
+    </div>
+</div>
+<style>
+    .model-header {
+        padding: 10px;
+        font-size: 16px;
+        color: #aaa;
+        margin: 0;
+    }
+    .table {
+        width: auto;
+    }
+    .table td {
+        margin: 0;
+        padding: 10px;
+        border-top: 1px solid #333;
+        white-space: nowrap;
+    }
+    .table td:first-child {
+        min-width: 128px;
+        background-color: #222;
+        border-right: 1px solid #333;
+        font-size: 16px;
+        font-weight: bold;
+        color: #aaa;
+    }
+    .table td:last-child {
+        width: 100%;
+        font-size: 16px;
+    }
+    .table a {
+        color: #6d90b6;
+    }
+    .model-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+    }
+    .grid-container {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .model-info {
+        border: 1px solid #333;
+        box-sizing: border-box;
+        width: 100%;
+        margin: 10px;
+        @media (min-width: 576px) {
+            width: 384px;
+            margin-top: 0;
+        }
+    }
+    .grid-item {
+        @media (min-width: 576px) {
+            width: 100%;
+        }
+        @media (min-width: 768px) {
+            width: calc(50% - 10px);
+        }
+        @media (min-width: 992px) {
+            width: calc(33.333% - 10px);
+        }
+        @media (min-width: 1200px) {
+            width: calc(25% - 10px);
+        }
+    }
+</style>

viewer/src/routes/store.js ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ import { writable } from 'svelte/store';
2	+
3	+ export const activeTab = writable('Models');

viewer/src/routes/viewer/[slug]/+page.server.ts ADDED Viewed

	@@ -0,0 +1,13 @@

+import { error } from "@sveltejs/kit";
+import { getScenes } from "$lib/dataLoader";
+export async function load({ params }) {
+    const scenes = await getScenes();
+    const scene = scenes.find((scene: any) => scene.slug === params.slug);
+    if (!scene) throw error(404);
+    return {
+        scene
+    };
+}

viewer/src/routes/viewer/[slug]/+page.svelte ADDED Viewed

	@@ -0,0 +1,348 @@

+<script lang="ts">
+    import { onMount, onDestroy } from "svelte";
+    import * as BABYLON from "@babylonjs/core";
+    import "@babylonjs/loaders/glTF";
+    export let data: {
+        scene: {
+            url: string;
+        };
+    };
+    let overlay: HTMLDivElement | null = null;
+    let hud: HTMLDivElement | null = null;
+    let hudToggleBtn: HTMLButtonElement | null = null;
+    let triangleCount: HTMLSpanElement | null = null;
+    let fpsCount: HTMLSpanElement | null = null;
+    let engine: BABYLON.Engine | null = null;
+    let scene: BABYLON.Scene | null = null;
+    let camera: BABYLON.ArcRotateCamera | null = null;
+    let container: HTMLDivElement | null = null;
+    let canvas: HTMLCanvasElement | null = null;
+    let collapsed = false;
+    onMount(() => {
+        document.body.classList.add("viewer");
+        const isMobile = window.innerWidth < 768;
+        if (isMobile) {
+            collapsed = true;
+            hudToggleBtn!.textContent = ")";
+            container!.classList.remove("hud-expanded");
+        }
+        loadModel(data.scene.url);
+        hudToggleBtn!.addEventListener("click", () => {
+            collapsed = !collapsed;
+            hudToggleBtn!.textContent = collapsed ? ")" : "(";
+            if (collapsed) {
+                container!.classList.remove("hud-expanded");
+            } else {
+                container!.classList.add("hud-expanded");
+            }
+        });
+        const modeItems = document.querySelectorAll(".mode-item");
+        modeItems.forEach((item) => {
+            item.addEventListener("click", (event) => {
+                const currentTarget = event.currentTarget as HTMLElement;
+                const mode = currentTarget.getAttribute("data-mode");
+                modeItems.forEach((i) => i.classList.remove("active"));
+                currentTarget.classList.add("active");
+                switch (mode) {
+                    case "wireframe":
+                        scene!.forceWireframe = true;
+                        break;
+                    default:
+                        scene!.forceWireframe = false;
+                        break;
+                }
+            });
+        });
+    });
+    onDestroy(() => {
+        if (scene) {
+            scene.dispose();
+            document.body.classList.remove("viewer");
+        }
+    });
+    async function loadModel(url: string) {
+        overlay!.style.display = "flex";
+        engine = new BABYLON.Engine(canvas, true);
+        scene = new BABYLON.Scene(engine);
+        scene.clearColor = BABYLON.Color4.FromHexString("#1A1B1EFF");
+        await BABYLON.SceneLoader.AppendAsync("", url, scene);
+        scene.cameras.forEach((camera) => {
+            camera.dispose();
+        });
+        scene.lights.forEach((light) => {
+            light.dispose();
+        });
+        camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 3, Math.PI / 3, 30, BABYLON.Vector3.Zero(), scene);
+        camera.angularSensibilityY = 1000;
+        camera.panningSensibility = 500;
+        camera.wheelPrecision = 5;
+        camera.inertia = 0.9;
+        camera.panningInertia = 0.9;
+        camera.lowerRadiusLimit = 3;
+        camera.upperRadiusLimit = 100;
+        camera.setTarget(BABYLON.Vector3.Zero());
+        camera.attachControl(canvas, true);
+        camera.onAfterCheckInputsObservable.add(() => {
+            camera!.wheelPrecision = 150 / camera!.radius;
+            camera!.panningSensibility = 10000 / camera!.radius;
+        });
+        const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(-0.5, 1, 0.5), scene);
+        light.intensity = 0.7;
+        light.diffuse = new BABYLON.Color3(1, 1, 1);
+        light.groundColor = new BABYLON.Color3(0.3, 0.3, 0.3);
+        const standardSize = 10;
+        let scaleFactor = 1;
+        let center = BABYLON.Vector3.Zero();
+        if (scene.meshes.length > 0) {
+            let bounds = scene.meshes[0].getBoundingInfo().boundingBox;
+            let min = bounds.minimumWorld;
+            let max = bounds.maximumWorld;
+            for (let i = 1; i < scene.meshes.length; i++) {
+                bounds = scene.meshes[i].getBoundingInfo().boundingBox;
+                min = BABYLON.Vector3.Minimize(min, bounds.minimumWorld);
+                max = BABYLON.Vector3.Maximize(max, bounds.maximumWorld);
+            }
+            const extent = max.subtract(min).scale(0.5);
+            const size = extent.length();
+            center = BABYLON.Vector3.Center(min, max);
+            scaleFactor = standardSize / size;
+        }
+        const parentNode = new BABYLON.TransformNode("parent", scene);
+        let totalTriangles = 0;
+        scene.meshes.forEach((mesh) => {
+            mesh.setParent(parentNode);
+            if (mesh.getTotalVertices() > 0) {
+                totalTriangles += mesh.getTotalIndices() / 3;
+            }
+        });
+        triangleCount!.textContent = totalTriangles.toLocaleString();
+        parentNode.position = center.scale(-1 * scaleFactor);
+        parentNode.scaling.scaleInPlace(scaleFactor);
+        engine.runRenderLoop(() => {
+            scene!.render();
+            if (fpsCount) {
+                fpsCount.textContent = engine!.getFps().toFixed();
+            }
+        });
+        window.addEventListener("resize", () => {
+            updateCanvasSize();
+            engine!.resize();
+        });
+        updateCanvasSize();
+        overlay!.style.display = "none";
+    }
+    function updateCanvasSize() {
+        if (!canvas || !container) return;
+        canvas.width = container.clientWidth;
+        canvas.height = container.clientHeight;
+    }
+    function capture() {
+        if (!engine || !camera) return;
+        const cachedColor = scene!.clearColor;
+        scene!.clearColor = BABYLON.Color4.FromHexString("#00000000");
+        BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, 512, (data) => {
+            const a = document.createElement("a");
+            a.href = data;
+            a.download = "screenshot.png";
+            a.click();
+        });
+        scene!.clearColor = cachedColor;
+    }
+</script>
+<div bind:this={container} class="canvas-container hud-expanded">
+    <div bind:this={overlay} class="loading-overlay" />
+    <canvas bind:this={canvas} width="512" height="512" />
+    <div bind:this={hud} class="hud" class:collapsed>
+        <button bind:this={hudToggleBtn} class="hud-toggle-btn">(</button>
+        <div class="section">
+            <div class="section-title">Stats</div>
+            <div class="info-panel">
+                <div>FPS: <span bind:this={fpsCount}>0</span></div>
+                <div>Triangles: <span bind:this={triangleCount}>0</span></div>
+            </div>
+        </div>
+        <div class="section">
+            <div class="section-title">Render Mode</div>
+            <div class="button-group mode-list">
+                <div class="hud-button mode-item active" data-mode="rendered">Rendered</div>
+                <div class="hud-button mode-item" data-mode="wireframe">Wireframe</div>
+            </div>
+        </div>
+        <div class="section">
+            <div class="section-title">Actions</div>
+            <div class="button-group">
+                <div class="hud-button" on:pointerdown={capture}>Capture</div>
+            </div>
+        </div>
+    </div>
+</div>
+<style>
+    .canvas-container {
+        position: relative;
+        box-sizing: border-box;
+        transition: padding-left 0.2s ease;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+    }
+    .canvas-container.hud-expanded {
+        padding-left: 192px;
+    }
+    .loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #1a1b1e;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 100;
+    }
+    .loading-overlay::before {
+        content: "Loading...";
+        color: white;
+        font-size: 16px;
+    }
+    canvas {
+        max-width: 100%;
+        max-height: 100%;
+    }
+    canvas:focus {
+        outline: none;
+    }
+    .hud {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 192px;
+        height: 100%;
+        box-sizing: border-box;
+        font-size: 14px;
+        border-right: 1px solid #444;
+        background-color: #1a1b1e;
+        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
+        transition: transform 0.2s ease;
+        margin: 0;
+        padding: 0;
+    }
+    .hud-toggle-btn {
+        position: absolute;
+        right: -30px;
+        top: 50%;
+        transform: translateY(-50%);
+        background-color: #1a1b1e;
+        border: none;
+        color: #aaa;
+        font-size: 16px;
+        cursor: pointer;
+        outline: none;
+        width: 29px;
+        height: 100%;
+        box-sizing: border-box;
+        transition: background-color 0.2s ease;
+    }
+    .hud-toggle-btn:hover {
+        background-color: #444;
+    }
+    .hud.collapsed {
+        transform: translateX(-100%);
+    }
+    .section {
+        width: 100%;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+    .section-title {
+        font-size: 11px;
+        font-weight: light;
+        text-transform: uppercase;
+        color: #aaa;
+        width: 100%;
+        padding: 4px 4px 4px 4px;
+    }
+    .info-panel {
+        padding: 10px 10px 0px 10px;
+        color: #ddd;
+    }
+    .button-group {
+        border: none;
+        background-color: transparent;
+        box-sizing: border-box;
+    }
+    .hud-button {
+        padding: 10px 15px;
+        cursor: pointer;
+        background-color: #1a1b1e;
+        border-bottom: 1px solid #444;
+        transition: background-color 0.2s ease;
+        box-sizing: border-box;
+    }
+    .hud-button:last-child {
+        border-bottom: none;
+    }
+    .hud-button:hover {
+        background-color: #555;
+    }
+    .hud-button.active {
+        background-color: #444;
+        color: white;
+    }
+</style>

viewer/static/favicon.png ADDED Viewed

viewer/static/global.css ADDED Viewed

	@@ -0,0 +1,121 @@

+html,
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #1a1b1e;
+    color: white;
+}
+.container {
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-left: auto;
+    margin-right: auto;
+    @media (min-width: 576px) {
+        max-width: 540px;
+    }
+    @media (min-width: 768px) {
+        max-width: 720px;
+    }
+    @media (min-width: 992px) {
+        max-width: 960px;
+    }
+    @media (min-width: 1200px) {
+        max-width: 1140px;
+    }
+}
+.header {
+    padding: 20px 0;
+    font-size: 32px;
+    font-weight: bold;
+    color: #aaa;
+}
+.viewer {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+.grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    width: 100%;
+}
+.grid-item {
+    background: #333;
+    position: relative;
+    border: 1px solid #000;
+    box-sizing: border-box;
+    overflow: hidden;
+    width: 100%;
+    @media (min-width: 576px) {
+        width: calc(33.333% - 10px);
+    }
+    @media (min-width: 768px) {
+        width: calc(25% - 10px);
+    }
+    @media (min-width: 992px) {
+        width: calc(20% - 10px);
+    }
+    @media (min-width: 1200px) {
+        width: calc(16.666% - 10px);
+    }
+}
+.grid-item::before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+}
+.grid-item:hover {
+    cursor: pointer;
+}
+.grid-item .title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 14px;
+    height: 40px;
+    overflow: hidden;
+    transition: height 0.2s ease;
+}
+.grid-item:hover .title {
+    height: 48px;
+}
+.thumbnail {
+    position: absolute;
+    top: -10px;
+    ;
+    left: 0;
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    scale: 1;
+    transition: scale 0.2s ease;
+}
+.grid-item:hover .thumbnail {
+    scale: 1.1;
+}

viewer/static/thumbnails/boombox.png ADDED Viewed

viewer/static/thumbnails/duck.png ADDED Viewed

viewer/static/thumbnails/toycar.png ADDED Viewed

viewer/svelte.config.js ADDED Viewed

	@@ -0,0 +1,18 @@

+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+export default config;

viewer/tsconfig.json ADDED Viewed

	@@ -0,0 +1,17 @@

+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

viewer/vite.config.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+export default defineConfig({
+	plugins: [sveltekit()]
+});