Spaces:
Running
Running
File size: 3,305 Bytes
31a2d08 5679415 31a2d08 c99cc8d 5e88463 5679415 31a2d08 5e88463 a1b46a8 31a2d08 c99cc8d 31a2d08 5e88463 da194bd 31a2d08 da194bd c99cc8d da194bd 31a2d08 5e88463 a1b46a8 5e88463 7ceb966 31a2d08 da194bd 31a2d08 5e88463 31a2d08 a1b46a8 5e88463 5679415 c99cc8d 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<script lang="ts">
import { onMount } from "svelte";
import { ProgressBarRound } from "carbon-icons-svelte";
import { getConfig } from "./utils/getConfig";
interface Entry {
name: string;
rank: number;
score: number;
votes: number;
open_source: boolean;
displayName?: string;
}
export let onEntryClick: (entry: Entry) => void;
export let showOnlyOpenSource: boolean;
export let voteType: string = "render";
const baseUrl = "https://huggingface.co/datasets/dylanebert/3d-arena/resolve/main/outputs";
let leaderboard: Entry[] = [];
let filteredLeaderboard: Entry[] = [];
let isLoading = false;
const fetchLeaderboardData = async () => {
isLoading = true;
try {
const url = `/api/leaderboard?vote_type=${voteType}`;
const response = await fetch(url, {
method: "GET",
headers: {
"Cache-Control": "no-cache",
},
});
const data = (await response.json()) as Entry[];
const entriesWithDisplayNames = await Promise.all(
data.map(async (entry) => {
const config = await getConfig(entry.name);
return { ...entry, displayName: config.DisplayName || entry.name };
}),
);
entriesWithDisplayNames.sort((a, b) => a.rank - b.rank);
leaderboard = entriesWithDisplayNames;
updateFilteredLeaderboard();
} finally {
isLoading = false;
}
};
const updateFilteredLeaderboard = () => {
filteredLeaderboard = showOnlyOpenSource
? leaderboard.filter((entry) => entry.open_source)
: leaderboard;
};
$: {
showOnlyOpenSource;
updateFilteredLeaderboard();
}
$: {
voteType;
fetchLeaderboardData();
}
onMount(async () => {
await fetchLeaderboardData();
});
</script>
{#if isLoading}
<div class="loading-container">
<ProgressBarRound class="loading-icon" />
<div class="loading-text">Loading...</div>
</div>
{:else if filteredLeaderboard.length > 0}
<div class="grid">
{#each filteredLeaderboard as entry, index}
<button class="grid-item" on:click={() => onEntryClick(entry)}>
<img
src={`${baseUrl}/${entry.name}/thumbnail.png`}
alt={entry.name}
class="thumbnail"
/>
<div class="ranking">{index + 1}</div>
<div class="title">{entry.displayName}</div>
<div class="score-container">
<div class="score">
<span class="label">Score:</span>
{entry.score}
</div>
<div class="votes">
<span class="label">Votes:</span>
{entry.votes}
</div>
</div>
</button>
{/each}
</div>
{:else}
<div class="loading-container">
<ProgressBarRound class="loading-icon" />
<div class="loading-text">Loading...</div>
</div>
{/if}
|