Spaces:
Running
Running
File size: 2,320 Bytes
31a2d08 c99cc8d 31a2d08 c99cc8d 31a2d08 c99cc8d 31a2d08 5743069 31a2d08 99c8110 31a2d08 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<script lang="ts">
import { onMount } from "svelte";
import { ProgressBarRound, ArrowLeft } from "carbon-icons-svelte";
interface Scene {
name: string;
url: string;
thumbnail: string;
}
export let modelName: string;
export let onBack: () => void;
export let onSceneClick: (scene: Scene) => void;
let scenes: Scene[] = [];
async function fetchScenes() {
scenes = [];
const url = `https://huggingface.co/api/datasets/dylanebert/3d-arena`;
const response = await fetch(url);
const responseData = await response.json();
const directory = `outputs/${modelName}`;
const extensions = ["obj", "glb", "ply", "splat"];
scenes = responseData.siblings
.filter((scene: any) => {
const fileExtension = scene.rfilename.split(".").pop();
return scene.rfilename.startsWith(directory) && extensions.includes(fileExtension);
})
.reduce((acc: Scene[], scene: any) => {
const name = scene.rfilename.split("/").pop().split(".").slice(0, -1).join(".");
const url = `https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/${scene.rfilename}`;
const thumbnail = url.replace(/\.[^.]+$/, ".png");
acc.push({ name, url, thumbnail });
return acc;
}, []);
scenes = [...scenes];
}
onMount(fetchScenes);
</script>
<div class="header">
<div class="back" aria-label="Back" aria-hidden="true" on:click={onBack}>
<ArrowLeft size={24} />
</div>
<div class="spacer" />
<button class="title-button" on:click={fetchScenes}>
<h2 class="muted">{modelName}</h2>
</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}
|