migrate token store

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

@@ -7,7 +7,7 @@
 	import python from "highlight.js/lib/languages/python";
 	import { createEventDispatcher } from "svelte";
 
-	import { token } from "$lib/stores/token.js";
+	import { token } from "$lib/state/token.svelte.js";
 	import { entries, fromEntries, keys } from "$lib/utils/object.js";
 	import type { InferenceProvider } from "@huggingface/inference";
 	import IconExternal from "~icons/carbon/arrow-up-right";
@@ -67,8 +67,8 @@
 	};
 
 	function getTokenStr(showToken: boolean) {
-		if ($token.value && showToken) {
-			return $token.value;
+		if (token.value && showToken) {
+			return token.value;
 		}
 		return "YOUR_HF_TOKEN";
 	}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
 
-	import { models } from "$lib/stores/models.js";
+	import { models } from "$lib/state/models.svelte.js";
 	import IconCaret from "~icons/carbon/chevron-down";
 	import Avatar from "../avatar.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
@@ -18,7 +18,7 @@
 
 	// Model
 	function changeModel(modelId: ModelWithTokenizer["id"]) {
-		const model = $models.find(m => m.id === modelId);
+		const model = models.$.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.$.length}</span>
 	</label>
 
 	<button

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

@@ -124,7 +124,7 @@
 				if ($project.conversations.length === 2) {
 					prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
 				}
-				addToast({
+				return addToast({
 					title: "Failed to run inference",
 					description: `${prefix}Messages must alternate between user/assistant roles.`,
 					variant: "error",

src/lib/state/models.svelte.ts

@@ -1,4 +1,8 @@
 import { page } from "$app/state";
 import type { ModelWithTokenizer } from "$lib/types.js";
 
-export const models = $derived({ current: page.data.models as ModelWithTokenizer[] });
+class Models {
+	$ = $derived(page.data.models as ModelWithTokenizer[]);
+}
+
+export const models = new Models();

src/lib/state/token.svelte.ts

@@ -0,0 +1,35 @@
+import { safeParse } from "$lib/utils/json.js";
+import typia from "typia";
+
+const key = "hf_token";
+
+class Token {
+	#value = $state("");
+	writeToLocalStorage = $state(true);
+	showModal = $state(false);
+
+	constructor() {
+		const storedHfToken = localStorage.getItem(key);
+		if (storedHfToken !== null) {
+			const parsed = safeParse(storedHfToken);
+			this.value = typia.is<string>(parsed) ? parsed : "";
+		}
+	}
+
+	get value() {
+		return this.#value;
+	}
+
+	set value(token: string) {
+		if (this.writeToLocalStorage) localStorage.setItem(key, JSON.stringify(token));
+		this.#value = token;
+		this.showModal = !token.length;
+	}
+
+	reset() {
+		this.value = "";
+		localStorage.removeItem(key);
+	}
+}
+
+export const token = new Token();