better loading logic

package.json

@@ -35,7 +35,7 @@
 		"@samchon/openapi": "^4.7.1",
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/adapter-node": "^5.3.2",
-		"@sveltejs/kit": "^2.41.0",
+		"@sveltejs/kit": "^2.42.1",
 		"@sveltejs/vite-plugin-svelte": "^4.0.4",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/postcss": "^4.0.9",

pnpm-lock.yaml

@@ -86,13 +86,13 @@ importers:
         version: 4.7.1
       '@sveltejs/adapter-auto':
         specifier: ^3.3.1
-        version: 3.3.1(@sveltejs/kit@2.41.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))
+        version: 3.3.1(@sveltejs/kit@2.42.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))
       '@sveltejs/adapter-node':
         specifier: ^5.3.2
-        version: 5.3.2(@sveltejs/kit@2.41.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))
+        version: 5.3.2(@sveltejs/kit@2.42.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))
       '@sveltejs/kit':
-        specifier: ^2.41.0
-        version: 2.41.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+        specifier: ^2.42.1
+        version: 2.42.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.4
         version: 4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
@@ -942,8 +942,8 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.4.0
 
-  '@sveltejs/kit@2.41.0':
-    resolution: {integrity: sha512-dCLIRufAoc3bbKtHCSzDr3g41sPY0bNpxYbMd6XD2D7xSeVLgPvZ0qFtK8W2hhwr7oj8i/6NtlcB0EKFjpMMUg==}
+  '@sveltejs/kit@2.42.1':
+    resolution: {integrity: sha512-SoWdb/OxEKHMlXZ78eNZa4pR1YdOGnUfcFj5NylJv+ZaTrnHK5xapw+7RJP2MiS1D4T+sEH25/tmMtmEl8p6VA==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -4076,20 +4076,20 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.41.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))':
+  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.42.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))':
     dependencies:
-      '@sveltejs/kit': 2.41.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+      '@sveltejs/kit': 2.42.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-node@5.3.2(@sveltejs/kit@2.41.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))':
+  '@sveltejs/adapter-node@5.3.2(@sveltejs/kit@2.42.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))':
     dependencies:
       '@rollup/plugin-commonjs': 28.0.2(rollup@4.34.9)
       '@rollup/plugin-json': 6.1.0(rollup@4.34.9)
       '@rollup/plugin-node-resolve': 16.0.0(rollup@4.34.9)
-      '@sveltejs/kit': 2.41.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+      '@sveltejs/kit': 2.42.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
       rollup: 4.34.9
 
-  '@sveltejs/kit@2.41.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))':
+  '@sveltejs/kit@2.42.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.38.10)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))':
     dependencies:
       '@standard-schema/spec': 1.0.0
       '@sveltejs/acorn-typescript': 1.0.5(acorn@8.15.0)

src/lib/components/inference-playground/hf-token-modal.svelte

@@ -1,121 +1,124 @@
 <script lang="ts">
-	import { createBubbler, preventDefault } from "svelte/legacy";
-
-	const bubble = createBubbler();
 	import { clickOutside } from "$lib/attachments/click-outside.js";
-	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
-	import IconCross from "~icons/carbon/close";
 	import { autofocus } from "$lib/attachments/autofocus.js";
-
-	interface Props {
-		storeLocallyHfToken?: boolean;
-	}
-
-	let { storeLocallyHfToken = $bindable(false) }: Props = $props();
+	import { token } from "$lib/state/token.svelte";
+	import IconCross from "~icons/carbon/close";
 
 	let backdropEl = $state<HTMLDivElement>();
 	let modalEl = $state<HTMLDivElement>();
 
-	const dispatch = createEventDispatcher<{ close: void }>();
-
 	function handleKeydown(event: KeyboardEvent) {
 		const { key } = event;
 		if (key === "Escape") {
 			event.preventDefault();
-			dispatch("close");
+			token.showModal = false;
 		}
 	}
 
-	onMount(() => {
-		document.getElementById("app")?.setAttribute("inert", "true");
-	});
-
-	onDestroy(() => {
-		// remove inert attribute if this is the last modal
-		if (document.querySelectorAll('[role="dialog"]:not(#app *)').length === 1) {
+	$effect(() => {
+		if (token.showModal) {
+			document.getElementById("app")?.setAttribute("inert", "true");
+		} else {
 			document.getElementById("app")?.removeAttribute("inert");
 		}
 	});
+
+	function handleTokenSubmit(e: Event) {
+		e.preventDefault();
+		const form = e.target as HTMLFormElement;
+		const formData = new FormData(form);
+		const submittedHfToken = (formData.get("hf-token") as string).trim() ?? "";
+		const RE_HF_TOKEN = /\bhf_[a-zA-Z0-9]{34}\b/;
+		if (RE_HF_TOKEN.test(submittedHfToken)) {
+			token.value = submittedHfToken;
+		} else {
+			alert("Please provide a valid HF token.");
+		}
+	}
 </script>
 
-<div
-	id="default-modal"
-	aria-hidden="true"
-	class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85"
-	bind:this={backdropEl}
->
+{#if token.showModal}
 	<div
-		role="dialog"
-		tabindex="-1"
-		class="relative max-h-full w-full max-w-xl p-4 outline-hidden"
-		bind:this={modalEl}
-		onkeydown={handleKeydown}
-		{@attach clickOutside(() => dispatch("close"))}
+		id="default-modal"
+		aria-hidden="true"
+		class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85"
+		bind:this={backdropEl}
 	>
-		<form onsubmit={preventDefault(bubble("submit"))} class="relative rounded-lg bg-white shadow-sm dark:bg-gray-900">
-			<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
-				<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
-					<img
-						alt="Hugging Face's logo"
-						class="w-7"
-						src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
-					/> Add a Hugging Face Token
-				</h3>
-				<button
-					type="button"
-					onclick={() => dispatch("close")}
-					class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-				>
-					<div class="text-xl">
-						<IconCross />
+		<div
+			role="dialog"
+			tabindex="-1"
+			class="relative max-h-full w-full max-w-xl p-4 outline-hidden"
+			bind:this={modalEl}
+			onkeydown={handleKeydown}
+			{@attach clickOutside(() => (token.showModal = false))}
+		>
+			<form onsubmit={handleTokenSubmit} class="relative rounded-lg bg-white shadow-sm dark:bg-gray-900">
+				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
+					<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
+						<img
+							alt="Hugging Face's logo"
+							class="w-7"
+							src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
+						/> Add a Hugging Face Token
+					</h3>
+					<button
+						type="button"
+						onclick={() => (token.showModal = false)}
+						class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+					>
+						<div class="text-xl">
+							<IconCross />
+						</div>
+						<span class="sr-only">Close modal</span>
+					</button>
+				</div>
+				<!-- Modal body -->
+				<div class="p-4 md:p-5">
+					<p class="mb-5 text-base leading-relaxed text-gray-800 2xl:text-balance dark:text-gray-300">
+						You need a free Hugging Face token to use this application. <strong class="font-semibold"
+							>Make sure you create a token with Inference API permission.</strong
+						><br /> Your token is kept safe by only being used from your browser.
+					</p>
+					<div>
+						<label for="hf-token" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
+							Hugging Face Token
+						</label>
+						<input
+							required
+							placeholder="Enter HF Token"
+							type="text"
+							id="hf-token"
+							name="hf-token"
+							class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+							{@attach autofocus()}
+						/>
 					</div>
-					<span class="sr-only">Close modal</span>
-				</button>
-			</div>
-			<!-- Modal body -->
-			<div class="p-4 md:p-5">
-				<p class="mb-5 text-base leading-relaxed text-gray-800 2xl:text-balance dark:text-gray-300">
-					You need a free Hugging Face token to use this application. <strong class="font-semibold"
-						>Make sure you create a token with Inference API permission.</strong
-					><br /> Your token is kept safe by only being used from your browser.
-				</p>
-				<div>
-					<label for="hf-token" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
-						Hugging Face Token
-					</label>
-					<input
-						required
-						placeholder="Enter HF Token"
-						type="text"
-						id="hf-token"
-						name="hf-token"
-						class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-						{@attach autofocus()}
-					/>
+					<label class="mt-4 flex items-center gap-x-1.5 text-gray-900 dark:text-gray-200">
+						<input type="checkbox" bind:checked={token.writeToLocalStorage} />
+						<p class="text-sm leading-none">Save to local storage for future use</p></label
+					>
 				</div>
-				<label class="mt-4 flex items-center gap-x-1.5 text-gray-900 dark:text-gray-200">
-					<input type="checkbox" bind:checked={storeLocallyHfToken} />
-					<p class="text-sm leading-none">Save to local storage for future use</p></label
-				>
-			</div>
 
-			<!-- Modal footer -->
-			<div class="flex items-center justify-between rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
-				<a
-					href="https://huggingface.co/settings/tokens/new?ownUserPermissions=inference.serverless.write&tokenType=fineGrained"
-					tabindex="-1"
-					target="_blank"
-					class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-					>Create new token</a
+				<!-- Modal footer -->
+				<div
+					class="flex items-center justify-between rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800"
 				>
+					<a
+						href="https://huggingface.co/settings/tokens/new?ownUserPermissions=inference.serverless.write&tokenType=fineGrained"
+						tabindex="-1"
+						target="_blank"
+						class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+						>Create new token</a
+					>
 
-				<button
-					type="submit"
-					class="rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-					>Submit</button
-				>
-			</div>
-		</form>
+					<button
+						type="submit"
+						class="rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+						>Submit</button
+					>
+				</div>
+			</form>
+		</div>
 	</div>
-</div>
+{/if}

src/lib/components/inference-playground/playground.svelte

@@ -1,35 +1,34 @@
 <script lang="ts">
 	import { observe, observed, ObservedElements } from "$lib/attachments/observe.svelte.js";
+	import { TEST_IDS } from "$lib/constants.js";
 	import { conversations } from "$lib/state/conversations.svelte";
 	import { projects } from "$lib/state/projects.svelte";
 	import { token } from "$lib/state/token.svelte.js";
 	import { isHFModel } from "$lib/types.js";
 	import { iterate } from "$lib/utils/array.js";
 	import { isSystemPromptSupported } from "$lib/utils/business.svelte.js";
+	import { atLeastNDecimals } from "$lib/utils/number.js";
 	import IconExternal from "~icons/carbon/arrow-up-right";
 	import IconWaterfall from "~icons/carbon/chart-waterfall";
+	import IconClose from "~icons/carbon/close";
 	import IconCode from "~icons/carbon/code";
 	import IconCompare from "~icons/carbon/compare";
 	import IconInfo from "~icons/carbon/information";
 	import IconSettings from "~icons/carbon/settings";
 	import IconShare from "~icons/carbon/share";
 	import { default as IconDelete } from "~icons/carbon/trash-can";
+	import BillingIndicator from "../billing-indicator.svelte";
 	import { showShareModal } from "../share-modal.svelte";
 	import Toaster from "../toaster.svelte";
 	import Tooltip from "../tooltip.svelte";
+	import BillingModal from "./billing-modal.svelte";
 	import PlaygroundConversationHeader from "./conversation-header.svelte";
 	import PlaygroundConversation from "./conversation.svelte";
 	import GenerationConfig from "./generation-config.svelte";
-	import HFTokenModal from "./hf-token-modal.svelte";
+	import MessageTextarea from "./message-textarea.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
-	import BillingModal from "./billing-modal.svelte";
-	import BillingIndicator from "../billing-indicator.svelte";
-	import { TEST_IDS } from "$lib/constants.js";
-	import MessageTextarea from "./message-textarea.svelte";
-	import { atLeastNDecimals } from "$lib/utils/number.js";
-	import IconClose from "~icons/carbon/close";
 
 	let viewCode = $state(false);
 	let viewSettings = $state(false);
@@ -39,30 +38,8 @@
 
 	const systemPromptSupported = $derived(conversations.active.some(c => isSystemPromptSupported(c.model)));
 	const compareActive = $derived(conversations.active.length === 2);
-
-	function handleTokenSubmit(e: Event) {
-		const form = e.target as HTMLFormElement;
-		const formData = new FormData(form);
-		const submittedHfToken = (formData.get("hf-token") as string).trim() ?? "";
-		const RE_HF_TOKEN = /\bhf_[a-zA-Z0-9]{34}\b/;
-		if (RE_HF_TOKEN.test(submittedHfToken)) {
-			token.value = submittedHfToken;
-			// TODO: Only submit when previous action was trying to submit
-			// submit();
-		} else {
-			alert("Please provide a valid HF token.");
-		}
-	}
 </script>
 
-{#if token.showModal}
-	<HFTokenModal
-		bind:storeLocallyHfToken={token.writeToLocalStorage}
-		on:close={() => (token.showModal = false)}
-		on:submit={handleTokenSubmit}
-	/>
-{/if}
-
 <div
 	class={[
 		"motion-safe:animate-fade-in grid h-dvh divide-gray-200 overflow-hidden bg-gray-100/50",

src/lib/state/models.svelte.ts

@@ -16,6 +16,8 @@ class Models {
 	nonTrending = $derived(this.remote.filter(m => !this.trending.includes(m)).toSorted(trendingSort));
 	all = $derived([...this.remote, ...this.custom]);
 
+	loading: Promise<void> | null = null;
+
 	constructor() {
 		const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
 		if (!savedData) return;
@@ -30,10 +32,16 @@ class Models {
 	}
 
 	async load() {
-		await Promise.all([getModels(), getRouterData()]).then(([models, data]) => {
+		if (this.loading || this.remote.length > 0) {
+			return await this.loading;
+		}
+
+		this.loading = Promise.all([getModels(), getRouterData()]).then(([models, data]) => {
 			this.remote = models;
 			this.routerData = data;
 		});
+		await this.loading;
+		this.loading = null;
 	}
 
 	#custom = $state.raw<CustomModel[]>([]);

src/routes/+layout.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
 	import IconLoadingLoop from "~icons/line-md/loading-loop";
 	import "../app.css";
-	import { models } from "$lib/state/models.svelte";
+	import HfTokenModal from "$lib/components/inference-playground/hf-token-modal.svelte";
 
 	interface Props {
 		children?: import("svelte").Snippet;
 	}
 
 	let { children }: Props = $props();
-	models.load();
 </script>
 
 <svelte:boundary>
@@ -18,3 +17,5 @@
 		<IconLoadingLoop class="abs-center absolute text-6xl dark:text-blue-300" />
 	{/snippet}
 </svelte:boundary>
+
+<HfTokenModal />

src/routes/canvas/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import "@xyflow/svelte/dist/style.css";
 	import type { Node } from "@xyflow/svelte";
 	import { Background, Controls, MiniMap, SvelteFlow } from "@xyflow/svelte";
 	import "@xyflow/svelte/dist/style.css";

src/routes/canvas/chat-node.svelte

@@ -20,6 +20,8 @@
 	};
 	let { id, data }: Props = $props();
 
+	await models.load();
+
 	let { updateNodeData, updateNode, getNode } = useSvelteFlow();
 	onMount(() => {
 		if (!data.modelId) data.modelId = models.trending[0]?.id;