migrate stores to runes

src/lib/components/debug-menu.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
-	import { session } from "$lib/stores/session.js";
+	import { session } from "$lib/state/session.svelte.js";
 	import { createPopover } from "@melt-ui/svelte";
 	import { prompt } from "./prompts.svelte";
-	import { token } from "$lib/stores/token.js";
+	import { token } from "$lib/state/token.svelte.js";
 	import { compareStr } from "$lib/utils/compare.js";
 	import type { ToastData } from "./toaster.svelte.js";
 	import { addToast } from "./toaster.svelte.js";
@@ -29,7 +29,7 @@
 		{
 			label: "Log session to console",
 			cb: () => {
-				console.log($session);
+				console.log(session.$);
 			},
 		},
 		{
@@ -41,7 +41,7 @@
 		{
 			label: "Show token modal",
 			cb: () => {
-				$token.showModal = true;
+				token.showModal = true;
 			},
 		},
 		{

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

@@ -3,9 +3,9 @@
 
 	import { createEventDispatcher } from "svelte";
 
-	import { models } from "$lib/stores/models.js";
-	import Avatar from "../avatar.svelte";
+	import { models } from "$lib/state/models.svelte.js";
 	import IconCog from "~icons/carbon/settings";
+	import Avatar from "../avatar.svelte";
 	import GenerationConfig from "./generation-config.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ProviderSelect from "./provider-select.svelte";
@@ -22,7 +22,7 @@
 	let modelSelectorOpen = $state(false);
 
 	function changeModel(newModelId: ModelWithTokenizer["id"]) {
-		const model = $models.find(m => m.id === newModelId);
+		const model = models.all.find(m => m.id === newModelId);
 		if (!model) {
 			return;
 		}

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

@@ -60,8 +60,7 @@ https://svelte.dev/e/bind_invalid_expression -->
 	}
 
 	function deleteMessage(idx: number) {
-		conversation.messages.splice(idx, 1);
-		conversation = conversation;
+		conversation.messages = conversation.messages.slice(0, idx);
 	}
 </script>
 

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

@@ -6,6 +6,7 @@
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
 	import IconCross from "~icons/carbon/close";
+	import { autofocus } from "$lib/actions/autofocus.js";
 
 	interface Props {
 		storeLocallyHfToken?: boolean;
@@ -28,7 +29,6 @@
 
 	onMount(() => {
 		document.getElementById("app")?.setAttribute("inert", "true");
-		modalEl?.focus();
 	});
 
 	onDestroy(() => {
@@ -85,6 +85,7 @@
 						>Hugging Face Token</label
 					>
 					<input
+						use:autofocus
 						required
 						placeholder="Enter HF Token"
 						type="text"

src/lib/components/inference-playground/model-selector-modal.svelte

@@ -3,8 +3,7 @@
 
 	import { createEventDispatcher, onMount, tick } from "svelte";
 
-	import { models } from "$lib/stores/models.js";
-	import { getTrending } from "$lib/utils/model.js";
+	import { models } from "$lib/state/models.svelte.js";
 	import fuzzysearch from "$lib/utils/search.js";
 	import IconSearch from "~icons/carbon/search";
 	import IconStar from "~icons/carbon/star";
@@ -23,10 +22,8 @@
 
 	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
 
-	let trendingModels = $derived(getTrending($models));
-
-	let featuredModels = $derived(fuzzysearch({ needle: query, haystack: trendingModels, property: "id" }));
-	let otherModels = $derived(fuzzysearch({ needle: query, haystack: $models, property: "id" }));
+	let featuredModels = $derived(fuzzysearch({ needle: query, haystack: models.trending, property: "id" }));
+	let otherModels = $derived(fuzzysearch({ needle: query, haystack: models.all, property: "id" }));
 
 	onMount(() => {
 		if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {

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

@@ -18,7 +18,7 @@
 
 	// Model
 	function changeModel(modelId: ModelWithTokenizer["id"]) {
-		const model = models.$.find(m => m.id === modelId);
+		const model = models.all.find(m => m.id === modelId);
 		if (!model) {
 			return;
 		}
@@ -34,7 +34,7 @@
 
 <div class="flex flex-col gap-2">
 	<label for={id} class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
-		Models<span class="text-xs font-normal text-gray-400">{models.$.length}</span>
+		Models<span class="text-xs font-normal text-gray-400">{models.all.length}</span>
 	</label>
 
 	<button

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

@@ -1,35 +1,35 @@
 <script lang="ts">
-	import type { Conversation, ConversationMessage, ModelWithTokenizer } from "$lib/types.js";
+	import type { ConversationMessage, ModelWithTokenizer } from "$lib/types.js";
 
 	import { handleNonStreamingResponse, handleStreamingResponse, isSystemPromptSupported } from "./utils.js";
 
-	import { models } from "$lib/stores/models.js";
-	import { project, session } from "$lib/stores/session.js";
-	import { token } from "$lib/stores/token.js";
+	import { AbortManager } from "$lib/spells/abort-manager.svelte.js";
+	import { models } from "$lib/state/models.svelte.js";
+	import { session } from "$lib/state/session.svelte.js";
+	import { token } from "$lib/state/token.svelte.js";
 	import { isMac } from "$lib/utils/platform.js";
 	import { HfInference } from "@huggingface/inference";
-	import { onDestroy } from "svelte";
 	import IconExternal from "~icons/carbon/arrow-up-right";
 	import IconCode from "~icons/carbon/code";
 	import IconCompare from "~icons/carbon/compare";
 	import IconInfo from "~icons/carbon/information";
 	import { default as IconDelete, default as IconThrashcan } from "~icons/carbon/trash-can";
-	import PlaygroundConversation from "./conversation.svelte";
+	import { addToast } from "../toaster.svelte.js";
 	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 ModelSelector from "./model-selector.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
+	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
-	import { addToast } from "../toaster.svelte.js";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 
 	let viewCode = $state(false);
 	let viewSettings = $state(false);
 	let loading = $state(false);
-	let abortControllers: AbortController[] = [];
-	let waitForNonStreaming = true;
+
+	const abortManager = new AbortManager();
 	let selectCompareModelOpen = $state(false);
 
 	interface GenerationStatistics {
@@ -37,74 +37,61 @@
 		generatedTokensCount: number;
 	}
 	let generationStats = $state(
-		$project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
+		session.project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
 			| [GenerationStatistics]
 			| [GenerationStatistics, GenerationStatistics]
 	);
 
 	let systemPromptSupported = $derived(
-		$project.conversations.some(conversation => isSystemPromptSupported(conversation.model))
+		session.project.conversations.some(conversation => isSystemPromptSupported(conversation.model))
 	);
-	let compareActive = $derived($project.conversations.length === 2);
+	let compareActive = $derived(session.project.conversations.length === 2);
 
 	function reset() {
-		$project.conversations.map(conversation => {
-			conversation.systemMessage.content = "";
-			conversation.messages = [{ ...startMessageUser }];
+		session.project.conversations = session.project.conversations.map(conversation => {
+			return {
+				...conversation,
+				systemMessage: { role: "system", content: "" },
+				messages: [{ ...startMessageUser }],
+			};
 		});
-		$session = $session;
 	}
 
-	function abort() {
-		if (abortControllers.length) {
-			for (const abortController of abortControllers) {
-				abortController.abort();
-			}
-			abortControllers = [];
-		}
-		loading = false;
-		waitForNonStreaming = false;
-	}
+	async function runInference(conversationIdx: number) {
+		const conversation = session.project.conversations[conversationIdx];
+		if (!conversation) return;
 
-	async function runInference(conversation: Conversation, conversationIdx: number) {
 		const startTime = performance.now();
-		const hf = new HfInference($token.value);
+		const hf = new HfInference(token.value);
 
 		if (conversation.streaming) {
-			let addStreamingMessage = true;
-			const streamingMessage = { role: "assistant", content: "" };
-			const abortController = new AbortController();
-			abortControllers.push(abortController);
+			let addedMessage = false;
+			let streamingMessage = $state({ role: "assistant", content: "" });
 
 			await handleStreamingResponse(
 				hf,
 				conversation,
 				content => {
-					if (streamingMessage) {
-						streamingMessage.content = content;
-						if (addStreamingMessage) {
-							conversation.messages = [...conversation.messages, streamingMessage];
-							addStreamingMessage = false;
-						}
-						$session = $session;
-						const c = generationStats[conversationIdx];
-						if (c) c.generatedTokensCount += 1;
+					if (!streamingMessage) return;
+					streamingMessage.content = content;
+					if (!addedMessage) {
+						conversation.messages = [...conversation.messages, streamingMessage];
+						addedMessage = true;
 					}
+					// session.project.conversations[conversationIdx] = conversation;
+					const c = generationStats[conversationIdx];
+					if (c) c.generatedTokensCount += 1;
 				},
-				abortController
+				abortManager.createController()
 			);
 		} else {
-			waitForNonStreaming = true;
 			const { message: newMessage, completion_tokens: newTokensCount } = await handleNonStreamingResponse(
 				hf,
 				conversation
 			);
-			// check if the user did not abort the request
-			if (waitForNonStreaming) {
-				conversation.messages = [...conversation.messages, newMessage];
-				const c = generationStats[conversationIdx];
-				if (c) c.generatedTokensCount += newTokensCount;
-			}
+			conversation.messages = [...conversation.messages, newMessage];
+			const c = generationStats[conversationIdx];
+			if (c) c.generatedTokensCount += newTokensCount;
 		}
 
 		const endTime = performance.now();
@@ -113,39 +100,39 @@
 	}
 
 	async function submit() {
-		if (!$token.value) {
-			$token.showModal = true;
+		if (!token.value) {
+			token.showModal = true;
 			return;
 		}
 
-		for (const [idx, conversation] of $project.conversations.entries()) {
-			if (conversation.messages.at(-1)?.role === "assistant") {
-				let prefix = "";
-				if ($project.conversations.length === 2) {
-					prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
-				}
-				return addToast({
-					title: "Failed to run inference",
-					description: `${prefix}Messages must alternate between user/assistant roles.`,
-					variant: "error",
-				});
+		for (const [idx, conversation] of session.project.conversations.entries()) {
+			if (conversation.messages.at(-1)?.role !== "assistant") continue;
+			let prefix = "";
+			if (session.project.conversations.length === 2) {
+				prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
 			}
+			return addToast({
+				title: "Failed to run inference",
+				description: `${prefix}Messages must alternate between user/assistant roles.`,
+				variant: "error",
+			});
 		}
 
 		(document.activeElement as HTMLElement).blur();
 		loading = true;
 
 		try {
-			const promises = $project.conversations.map((conversation, idx) => runInference(conversation, idx));
+			const promises = session.project.conversations.map((_, idx) => runInference(idx));
 			await Promise.all(promises);
 		} catch (error) {
-			for (const conversation of $project.conversations) {
+			for (const conversation of session.project.conversations) {
 				if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
 					conversation.messages.pop();
 					conversation.messages = [...conversation.messages];
 				}
-				$session = $session;
+				session.$ = session.$;
 			}
+
 			if (error instanceof Error) {
 				if (error.message.includes("token seems invalid")) {
 					token.reset();
@@ -158,7 +145,7 @@
 			}
 		} finally {
 			loading = false;
-			abortControllers = [];
+			abortManager.clear();
 		}
 	}
 
@@ -174,7 +161,7 @@
 		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.setValue(submittedHfToken);
+			token.value = submittedHfToken;
 			submit();
 		} else {
 			alert("Please provide a valid HF token.");
@@ -182,33 +169,27 @@
 	}
 
 	function addCompareModel(modelId: ModelWithTokenizer["id"]) {
-		const model = $models.find(m => m.id === modelId);
-		if (!model || $project.conversations.length === 2) {
+		const model = models.all.find(m => m.id === modelId);
+		if (!model || session.project.conversations.length === 2) {
 			return;
 		}
-		const newConversation = { ...JSON.parse(JSON.stringify($project.conversations[0])), model };
-		$project.conversations = [...$project.conversations, newConversation];
+		const newConversation = { ...JSON.parse(JSON.stringify(session.project.conversations[0])), model };
+		session.project.conversations = [...session.project.conversations, newConversation];
 		generationStats = [generationStats[0], { latency: 0, generatedTokensCount: 0 }];
 	}
 
 	function removeCompareModal(conversationIdx: number) {
-		$project.conversations.splice(conversationIdx, 1)[0];
-		$session = $session;
+		session.project.conversations.splice(conversationIdx, 1)[0];
+		session.$ = session.$;
 		generationStats.splice(conversationIdx, 1)[0];
 		generationStats = generationStats;
 	}
-
-	onDestroy(() => {
-		for (const abortController of abortControllers) {
-			abortController.abort();
-		}
-	});
 </script>
 
-{#if $token.showModal}
+{#if token.showModal}
 	<HFTokenModal
-		bind:storeLocallyHfToken={$token.writeToLocalStorage}
-		on:close={() => ($token.showModal = false)}
+		bind:storeLocallyHfToken={token.writeToLocalStorage}
+		on:close={() => (token.showModal = false)}
 		on:submit={handleTokenSubmit}
 	/>
 {/if}
@@ -235,12 +216,12 @@
 				placeholder={systemPromptSupported
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
-				value={systemPromptSupported ? $project.conversations[0].systemMessage.content : ""}
+				value={systemPromptSupported ? session.project.conversations[0]?.systemMessage.content : ""}
 				oninput={e => {
-					for (const conversation of $project.conversations) {
+					for (const conversation of session.project.conversations) {
 						conversation.systemMessage.content = e.currentTarget.value;
 					}
-					$session = $session;
+					session.$ = session.$;
 				}}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-hidden"
 			></textarea>
@@ -250,18 +231,21 @@
 		<div
 			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
 		>
-			{#each $project.conversations as _conversation, conversationIdx}
+			{#each session.project.conversations as _conversation, conversationIdx}
 				<div class="max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
 							{conversationIdx}
-							bind:conversation={$project.conversations[conversationIdx]!}
+							bind:conversation={session.project.conversations[conversationIdx]!}
 							on:close={() => removeCompareModal(conversationIdx)}
 						/>
 					{/if}
 					<PlaygroundConversation
 						{loading}
-						bind:conversation={$project.conversations[conversationIdx]!}
+						bind:conversation={
+							() => session.project.conversations[conversationIdx]!,
+							v => (session.project.conversations[conversationIdx] = v)
+						}
 						{viewCode}
 						{compareActive}
 						on:closeCode={() => (viewCode = false)}
@@ -302,7 +286,7 @@
 				<button
 					onclick={() => {
 						viewCode = false;
-						loading ? abort() : submit();
+						loading ? abortManager.abortAll() : submit();
 					}}
 					type="button"
 					class="flex h-[39px] w-24 items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium text-white focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:focus:ring-gray-700 {loading
@@ -312,7 +296,7 @@
 					{#if loading}
 						<div class="flex flex-none items-center gap-[3px]">
 							<span class="mr-2">
-								{#if $project.conversations[0].streaming || $project.conversations[1]?.streaming}
+								{#if session.project.conversations[0]?.streaming || session.project.conversations[1]?.streaming}
 									Stop
 								{:else}
 									Cancel
@@ -347,7 +331,7 @@
 				class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
 			>
 				<div class="flex flex-col gap-2">
-					<ModelSelector bind:conversation={$project.conversations[0]} />
+					<ModelSelector bind:conversation={session.project.conversations[0]!} />
 					<div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
 						<button
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
@@ -357,8 +341,8 @@
 							Compare
 						</button>
 						<a
-							href="https://huggingface.co/{$project.conversations[0].model.id}?inference_provider={$project
-								.conversations[0].provider}"
+							href="https://huggingface.co/{session.project.conversations[0]?.model.id}?inference_provider={session
+								.project.conversations[0]?.provider}"
 							target="_blank"
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
 						>
@@ -368,8 +352,8 @@
 					</div>
 				</div>
 
-				<GenerationConfig bind:conversation={$project.conversations[0]} />
-				{#if $token.value}
+				<GenerationConfig bind:conversation={session.project.conversations[0]!} />
+				{#if token.value}
 					<button
 						onclick={token.reset}
 						class="mt-auto flex items-center gap-1 self-end text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
@@ -427,7 +411,7 @@
 
 {#if selectCompareModelOpen}
 	<ModelSelectorModal
-		conversation={$project.conversations[0]}
+		conversation={session.project.conversations[0]!}
 		on:modelSelected={e => addCompareModel(e.detail)}
 		on:close={() => (selectCompareModelOpen = false)}
 	/>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getActiveProject, session } from "$lib/stores/session.js";
+	import { session } from "$lib/state/session.svelte.js";
 	import { cn } from "$lib/utils/cn.js";
 	import { Select } from "melt/builders";
 	import IconCaret from "~icons/carbon/chevron-down";
@@ -15,18 +15,18 @@
 
 	let { class: classNames = "" }: Props = $props();
 
-	const isDefault = $derived($session.activeProjectId === "default");
+	const isDefault = $derived(session.$.activeProjectId === "default");
 
 	const select = new Select({
-		value: () => $session.activeProjectId,
+		value: () => session.$.activeProjectId,
 		onValueChange(v) {
-			if (v) $session.activeProjectId = v;
+			if (v) session.$.activeProjectId = v;
 		},
 		sameWidth: true,
 	});
 
 	async function saveProject() {
-		session.saveProject((await prompt("Set project name")) || "Project #" + ($session.projects.length + 1));
+		session.saveProject((await prompt("Set project name")) || "Project #" + (session.$.projects.length + 1));
 	}
 </script>
 
@@ -39,7 +39,7 @@
 		)}
 	>
 		<div class="flex items-center gap-1 text-sm">
-			{getActiveProject($session).name}
+			{session.project.name}
 		</div>
 		<div
 			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
@@ -52,14 +52,14 @@
 			<IconSave />
 		</button>
 	{:else}
-		<button class="btn size-[32px] p-0" onclick={() => ($session.activeProjectId = "default")}>
+		<button class="btn size-[32px] p-0" onclick={() => (session.$.activeProjectId = "default")}>
 			<IconCross />
 		</button>
 	{/if}
 </div>
 
 <div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-	{#each $session.projects as { name, id } (id)}
+	{#each session.$.projects as { name, id } (id)}
 		{@const option = select.getOption(id)}
 		<div {...option} class="group block w-full p-1 text-sm dark:text-white">
 			<div

src/lib/components/toaster.svelte

@@ -93,8 +93,8 @@
 		transition: all 350ms ease;
 	}
 
-	:global([data-theme="dark"] [data-melt-toaster-toast-content]) {
-		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
+	:global(.dark [data-melt-toaster-toast-content]) {
+		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
 	}
 
 	[data-melt-toaster-toast-content]:nth-last-child(n + 4) {

src/lib/spells/abort-manager.svelte.ts

@@ -0,0 +1,34 @@
+import { onDestroy } from "svelte";
+
+/**
+ * Manages abort controllers, and aborts them when the component unmounts.
+ */
+export class AbortManager {
+	private controllers: AbortController[] = [];
+
+	constructor() {
+		onDestroy(() => this.abortAll());
+	}
+
+	/**
+	 * Creates a new abort controller and adds it to the manager.
+	 */
+	public createController(): AbortController {
+		const controller = new AbortController();
+		this.controllers.push(controller);
+		return controller;
+	}
+
+	/**
+	 * Aborts all controllers and clears the manager.
+	 */
+	public abortAll(): void {
+		this.controllers.forEach(controller => controller.abort());
+		this.controllers = [];
+	}
+
+	/** Clears the manager without aborting the controllers. */
+	public clear(): void {
+		this.controllers = [];
+	}
+}

src/lib/spells/create-init.svelte.ts

@@ -0,0 +1,14 @@
+export function createInit(cb: () => void) {
+	let called = $state(false);
+
+	return {
+		fn: () => {
+			if (called) return;
+			called = true;
+			cb();
+		},
+		get called() {
+			return called;
+		},
+	};
+}

src/lib/spells/textarea-autosize.svelte.ts

@@ -53,7 +53,7 @@ export class TextareaAutosize {
 		);
 	}
 
-	triggerResize() {
+	triggerResize = () => {
 		if (!this.element) return;
 
 		let height = "";
@@ -63,5 +63,5 @@ export class TextareaAutosize {
 		height = `${this.textareaScrollHeight}px`;
 
 		this.element.style[this.styleProp] = height;
-	}
+	};
 }

src/lib/state/models.svelte.ts

@@ -2,7 +2,8 @@ import { page } from "$app/state";
 import type { ModelWithTokenizer } from "$lib/types.js";
 
 class Models {
-	$ = $derived(page.data.models as ModelWithTokenizer[]);
+	all = $derived(page.data.models as ModelWithTokenizer[]);
+	trending = $derived(this.all.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, 5));
 }
 
 export const models = new Models();

src/lib/{stores/session.ts → state/session.svelte.ts}

@@ -1,5 +1,5 @@
 import { defaultGenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
-import { models } from "$lib/stores/models.js";
+import { createInit } from "$lib/spells/create-init.svelte.js";
 import {
 	PipelineTag,
 	type Conversation,
@@ -10,9 +10,8 @@ import {
 	type Session,
 } from "$lib/types.js";
 import { safeParse } from "$lib/utils/json.js";
-import { getTrending } from "$lib/utils/model.js";
-import { get, writable } from "svelte/store";
 import typia from "typia";
+import { models } from "./models.svelte";
 
 const LOCAL_STORAGE_KEY = "hf_inference_playground_session";
 
@@ -38,9 +37,7 @@ const emptyModel: ModelWithTokenizer = {
 };
 
 function getDefaults() {
-	const $models = get(models);
-	const featured = getTrending($models);
-	const defaultModel = featured[0] ?? $models[0] ?? emptyModel;
+	const defaultModel = models.trending[0] ?? models.all[0] ?? emptyModel;
 
 	const defaultConversation: Conversation = {
 		model: defaultModel,
@@ -59,8 +56,11 @@ function getDefaults() {
 	return { defaultProject, defaultConversation };
 }
 
-function createSessionStore() {
-	const store = writable<Session>(undefined, set => {
+class SessionState {
+	#value = $state<Session>({} as Session);
+	// Call this only when the value is read, otherwise some values may have not
+	// been loaded yet (page.data, for example)
+	#init = createInit(() => {
 		const { defaultConversation, defaultProject } = getDefaults();
 
 		// Get saved session from localStorage if available
@@ -86,12 +86,11 @@ function createSessionStore() {
 		// is the maximum between the two.
 		const dp = savedSession.projects.find(p => p.id === "default");
 		if (typia.is<DefaultProject>(dp)) {
-			const $models = get(models);
 			// Parse URL query parameters
 			const searchParams = new URLSearchParams(window.location.search);
 			const searchProviders = searchParams.getAll("provider");
 			const searchModelIds = searchParams.getAll("modelId");
-			const modelsFromSearch = searchModelIds.map(id => $models.find(model => model.id === id)).filter(Boolean);
+			const modelsFromSearch = searchModelIds.map(id => models.all.find(model => model.id === id)).filter(Boolean);
 			if (modelsFromSearch.length > 0) savedSession.activeProjectId = "default";
 
 			const max = Math.max(dp.conversations.length, modelsFromSearch.length, searchProviders.length);
@@ -105,110 +104,78 @@ function createSessionStore() {
 			}
 		}
 
-		set(savedSession);
+		this.$ = savedSession;
 	});
 
-	// Override update method to sync with localStorage and URL params
-	const update: typeof store.update = cb => {
-		store.update($s => {
-			const s = cb($s);
-
-			try {
-				localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(s));
-			} catch (e) {
-				console.error("Failed to save session to localStorage:", e);
-			}
-
-			return s;
+	constructor() {
+		$effect.root(() => {
+			$effect(() => {
+				if (!this.#init.called) return;
+				const v = $state.snapshot(this.#value);
+				try {
+					localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(v));
+				} catch (e) {
+					console.error("Failed to save session to localStorage:", e);
+				}
+			});
 		});
-	};
-
-	const set: typeof store.set = (...args) => {
-		update(_ => args[0]);
-	};
-
-	// Add a method to clear localStorage
-	function clearSavedSession() {
-		localStorage.removeItem(LOCAL_STORAGE_KEY);
 	}
 
-	/**
-	 * Saves a new project with the data inside the default project
-	 */
-	function saveProject(name: string) {
-		update(s => {
-			const defaultProject = s.projects.find(p => p.id === "default");
-			if (!defaultProject) return s;
-
-			const project: Project = {
-				...defaultProject,
-				name,
-				id: crypto.randomUUID(),
-			};
-
-			defaultProject.conversations = [getDefaults().defaultConversation];
-
-			return { ...s, projects: [...s.projects, project], activeProjectId: project.id };
-		});
+	get $() {
+		this.#init.fn();
+		return this.#value;
 	}
 
-	function deleteProject(id: string) {
-		// Can't delete default project!
-		if (id === "default") return;
-
-		update(s => {
-			const projects = s.projects.filter(p => p.id !== id);
-			if (projects.length === 0) {
-				const { defaultProject } = getDefaults();
-				const newSession = { ...s, projects: [defaultProject], activeProjectId: defaultProject.id };
-				return typia.is<Session>(newSession) ? newSession : s;
-			}
-
-			const currProject = projects.find(p => p.id === s.activeProjectId);
-			const newSession = { ...s, projects, activeProjectId: currProject?.id ?? projects[0]?.id };
-			return typia.is<Session>(newSession) ? newSession : s;
-		});
+	set $(v: Session) {
+		this.#value = v;
 	}
 
-	function updateProject(id: string, data: Partial<Project>) {
-		update(s => {
-			const projects = s.projects.map(p => (p.id === id ? { ...p, ...data } : p));
-			const newSession = { ...s, projects };
-			return typia.is<Session>(newSession) ? newSession : s;
-		});
+	#setAnySession(s: unknown) {
+		if (typia.is<Session>(s)) this.$ = s;
 	}
 
-	return { ...store, set, update, clearSavedSession, deleteProject, saveProject, updateProject };
-}
+	saveProject = (name: string) => {
+		const defaultProject = this.$.projects.find(p => p.id === "default");
+		if (!defaultProject) return;
 
-export const session = createSessionStore();
+		const project: Project = {
+			...defaultProject,
+			name,
+			id: crypto.randomUUID(),
+		};
 
-export function getActiveProject(s: Session) {
-	return s.projects.find(p => p.id === s.activeProjectId) ?? s.projects[0];
-}
+		defaultProject.conversations = [getDefaults().defaultConversation];
 
-function createProjectStore() {
-	const store = writable<Project>(undefined, set => {
-		return session.subscribe(s => {
-			set(getActiveProject(s));
-		});
-	});
+		this.$ = { ...this.$, projects: [...this.$.projects, project], activeProjectId: project.id };
+	};
 
-	const update: (typeof store)["update"] = cb => {
-		session.update(s => {
-			const project = getActiveProject(s);
-			const newProject = cb(project);
-			const projects = s.projects.map(p => (p.id === project.id ? newProject : p));
-			const newSession = { ...s, projects };
-			return typia.is<Session>(newSession) ? newSession : s;
-		});
+	deleteProject = (id: string) => {
+		// Can't delete default project!
+		if (id === "default") return;
+
+		const projects = this.$.projects.filter(p => p.id !== id);
+		if (projects.length === 0) {
+			const { defaultProject } = getDefaults();
+			this.#setAnySession({ ...this.$, projects: [defaultProject], activeProjectId: defaultProject.id });
+		}
+
+		const currProject = projects.find(p => p.id === this.$.activeProjectId);
+		this.#setAnySession({ ...this.$, projects, activeProjectId: currProject?.id ?? projects[0]?.id });
 	};
 
-	const set: typeof store.set = (...args) => {
-		update(_ => args[0]);
+	updateProject = (id: string, data: Partial<Project>) => {
+		const projects = this.$.projects.map(p => (p.id === id ? { ...p, ...data } : p));
+		this.#setAnySession({ ...this.$, projects });
 	};
 
-	return { ...store, update, set };
+	get project() {
+		return this.$.projects.find(p => p.id === this.$.activeProjectId) ?? this.$.projects[0];
+	}
+
+	set project(np: Project) {
+		const projects = this.$.projects.map(p => (p.id === np.id ? np : p));
+		this.#setAnySession({ ...this.$, projects });
+	}
 }
 
-export const project = createProjectStore();
+export const session = new SessionState();

src/lib/state/token.svelte.ts

@@ -10,10 +10,8 @@ class Token {
 
 	constructor() {
 		const storedHfToken = localStorage.getItem(key);
-		if (storedHfToken !== null) {
-			const parsed = safeParse(storedHfToken);
-			this.value = typia.is<string>(parsed) ? parsed : "";
-		}
+		const parsed = safeParse(storedHfToken ?? "");
+		this.value = typia.is<string>(parsed) ? parsed : "";
 	}
 
 	get value() {
@@ -21,15 +19,17 @@ class Token {
 	}
 
 	set value(token: string) {
-		if (this.writeToLocalStorage) localStorage.setItem(key, JSON.stringify(token));
+		if (this.writeToLocalStorage) {
+			localStorage.setItem(key, JSON.stringify(token));
+		}
 		this.#value = token;
 		this.showModal = !token.length;
 	}
 
-	reset() {
+	reset = () => {
 		this.value = "";
 		localStorage.removeItem(key);
-	}
+	};
 }
 
 export const token = new Token();

src/lib/stores/models.ts

@@ -1,8 +0,0 @@
-import { page } from "$app/stores";
-import type { ModelWithTokenizer } from "$lib/types.js";
-import { readable } from "svelte/store";
-
-export const models = readable<ModelWithTokenizer[]>(undefined, set => {
-	const unsub = page.subscribe($p => set($p.data?.models));
-	return unsub;
-});

src/lib/stores/mounted.ts

@@ -1,9 +0,0 @@
-import { onMount } from "svelte";
-import { readonly, writable } from "svelte/store";
-
-export function isMounted() {
-	const store = writable(false);
-	onMount(() => store.set(true));
-
-	return readonly(store);
-}

src/lib/stores/token.ts

@@ -1,31 +0,0 @@
-import { writable } from "svelte/store";
-
-const key = "hf_token";
-
-function createTokenStore() {
-	const store = writable({ value: "", writeToLocalStorage: true, showModal: false });
-
-	function setValue(token: string) {
-		store.update(s => {
-			if (s.writeToLocalStorage) localStorage.setItem(key, JSON.stringify(token));
-			return { ...s, value: token, showModal: !token.length };
-		});
-	}
-
-	const storedHfToken = localStorage.getItem(key);
-	if (storedHfToken !== null) {
-		setValue(JSON.parse(storedHfToken));
-	}
-
-	return {
-		...store,
-		setValue,
-		reset() {
-			setValue("");
-			localStorage.removeItem(key);
-			store.update(s => ({ ...s, showModal: true }));
-		},
-	};
-}
-
-export const token = createTokenStore();

src/lib/types.ts

@@ -1,7 +1,9 @@
 import type { GenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 
-export type ConversationMessage = Omit<ChatCompletionInputMessage, "content"> & { content?: string };
+export type ConversationMessage = Pick<ChatCompletionInputMessage, "name" | "role" | "tool_calls"> & {
+	content?: string;
+};
 
 export type Conversation = {
 	model: ModelWithTokenizer;
@@ -13,7 +15,7 @@ export type Conversation = {
 };
 
 export type Project = {
-	conversations: [Conversation] | [Conversation, Conversation];
+	conversations: Conversation[];
 	id: string;
 	name: string;
 };

src/lib/utils/model.ts

@@ -1,5 +0,0 @@
-import type { ModelWithTokenizer } from "$lib/types.js";
-
-export function getTrending(models: ModelWithTokenizer[], limit = 5) {
-	return models.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, limit);
-}