File size: 1,559 Bytes
9829d0c 97c4991 936176c 97c4991 936176c 97c4991 09bc654 936176c 97c4991 9829d0c 2488073 9c0f990 9829d0c 97c4991 2488073 97c4991 |
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 |
<script lang="ts">
import { isCustomModel, type CustomModel, type Model } from "$lib/types.js";
import IconCube from "~icons/carbon/cube";
interface Props {
model: Model | CustomModel;
orgName?: string | undefined;
size?: "sm" | "md";
}
let { model, orgName = undefined, size = "md" }: Props = $props();
let sizeClass = $derived(size === "sm" ? "size-3" : "size-4");
let isCustom = $derived(isCustomModel(model));
let _orgName = $derived(orgName ?? (!isCustom ? model.id.split("/")[0] : undefined));
async function getAvatarUrl(orgName?: string) {
if (!orgName) return;
const url = `https://huggingface.co/api/organizations/${orgName}/avatar`;
const res = await fetch(url);
if (!res.ok) {
console.error(`Error getting avatar url for org: ${orgName}`, res.status, res.statusText);
return;
}
const json = await res.json();
const { avatarUrl } = json;
return avatarUrl;
}
</script>
{#if isCustom}
<div
class="{sizeClass} grid place-items-center rounded-sm bg-gray-500/10 text-gray-500 dark:bg-gray-500/20 dark:text-gray-300"
>
<IconCube class="size-full p-0.5" />
</div>
{:else}
{#await getAvatarUrl(_orgName)}
<div class="{sizeClass} flex-none rounded-sm bg-gray-200"></div>
{:then avatarUrl}
{#if avatarUrl}
<img class="{sizeClass} flex-none rounded-sm bg-gray-200 object-cover" src={avatarUrl} alt="{_orgName} avatar" />
{:else}
<div class="{sizeClass} flex-none rounded-sm bg-gray-200"></div>
{/if}
{:catch}
<div class="{sizeClass} flex-none rounded-sm bg-gray-200"></div>
{/await}
{/if}
|