feat: add Avatar component and use it in InferencePlaygroundModelSelector

src/lib/components/Avatar.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    export let orgName: string;
+    export let size: number = 12;
+
+    async function getAvatarUrl(orgName: string) {
+        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>
+
+{#await getAvatarUrl(orgName)}
+    <div class="size-{size} flex-none rounded bg-gray-200"></div>
+{:then avatarUrl}
+    <img class="size-{size} flex-none rounded bg-gray-200 object-cover" src={avatarUrl} alt="{orgName} avatar" />
+{:catch}
+    <div class="size-{size} flex-none rounded bg-gray-200"></div>
+{/await}

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -6,24 +6,13 @@
 
 	import IconCaret from "../Icons/IconCaret.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
+	import Avatar from "../Avatar.svelte";
 
 	export let models: ModelEntryWithTokenizer[] = [];
 	export let conversation: Conversation;
 
 	let showModelPickerModal = false;
 
-	async function getAvatarUrl(orgName: string) {
-		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;
-	}
-
 	function changeModel(modelId: ModelEntryWithTokenizer["id"]) {
 		const model = models.find(m => m.id === modelId);
 		if (!model) {
@@ -63,9 +52,7 @@
 	>
 		<div class="flex flex-col items-start">
 			<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
-				{#await getAvatarUrl(nameSpace) then avatarUrl}
-					<img class="size-3 flex-none rounded bg-gray-200 object-cover" src={avatarUrl} alt="{nameSpace} avatar" />
-				{/await}
+				<Avatar orgName={nameSpace} size={3} />
 				{nameSpace}
 			</div>
 			<div>{modelName}</div>