migrate code snippets

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

@@ -10,15 +10,19 @@
 	import { token } from "$lib/stores/token.js";
 	import { entries, fromEntries, keys } from "$lib/utils/object.js";
 	import type { InferenceProvider } from "@huggingface/inference";
-	import IconCopyCode from "~icons/carbon/copy";
 	import IconExternal from "~icons/carbon/arrow-up-right";
+	import IconCopyCode from "~icons/carbon/copy";
 	import { getInferenceSnippet, type GetInferenceSnippetReturn, type InferenceSnippetLanguage } from "./utils.js";
 
 	hljs.registerLanguage("javascript", javascript);
 	hljs.registerLanguage("python", python);
 	hljs.registerLanguage("http", http);
 
-	export let conversation: Conversation;
+	interface Props {
+		conversation: Conversation;
+	}
+
+	let { conversation }: Props = $props();
 
 	const dispatch = createEventDispatcher<{ closeCode: void }>();
 
@@ -29,10 +33,8 @@
 	} as const satisfies Record<string, string>;
 	type Language = keyof typeof labelsByLanguage;
 
-	let lang: Language = "javascript";
-	let showToken = false;
-
-	$: tokenStr = getTokenStr(showToken);
+	let lang: Language = $state("javascript");
+	let showToken = $state(false);
 
 	type GetSnippetArgs = {
 		tokenStr: string;
@@ -49,50 +51,20 @@
 		});
 	}
 
-	$: snippetsByLang = {
-		javascript: getSnippet({ lang: "js", tokenStr, conversation }),
-		python: getSnippet({ lang: "python", tokenStr, conversation }),
-		http: getSnippet({ lang: "curl", tokenStr, conversation }),
-	} as Record<Language, GetInferenceSnippetReturn>;
-
 	// { javascript: 0, python: 0, http: 0 } at first
-	const selectedSnippetIdxByLang: Record<Language, number> = fromEntries(
-		keys(labelsByLanguage).map(lang => {
-			return [lang, 0];
-		})
+	const selectedSnippetIdxByLang: Record<Language, number> = $state(
+		fromEntries(
+			keys(labelsByLanguage).map(lang => {
+				return [lang, 0];
+			})
+		)
 	);
-	$: selectedSnippet = snippetsByLang[lang][selectedSnippetIdxByLang[lang]];
 
 	type InstallInstructions = {
 		title: string;
 		content: string;
 		docs: string;
 	};
-	$: installInstructions = (function getInstallInstructions(): InstallInstructions | undefined {
-		if (lang === "javascript") {
-			const isHugging = selectedSnippet?.client.includes("hugging");
-			const toInstall = isHugging ? "@huggingface/inference" : "openai";
-			const docs = isHugging
-				? "https://huggingface.co/docs/huggingface.js/inference/README"
-				: "https://platform.openai.com/docs/libraries";
-			return {
-				title: `Install ${toInstall}`,
-				content: `npm install --save ${toInstall}`,
-				docs,
-			};
-		} else if (lang === "python") {
-			const isHugging = selectedSnippet?.client.includes("hugging");
-			const toInstall = isHugging ? "huggingface_hub" : "openai";
-			const docs = isHugging
-				? "https://huggingface.co/docs/huggingface_hub/guides/inference"
-				: "https://platform.openai.com/docs/libraries";
-			return {
-				title: `Install the latest`,
-				content: `pip install --upgrade ${toInstall}`,
-				docs,
-			};
-		}
-	})();
 
 	function getTokenStr(showToken: boolean) {
 		if ($token.value && showToken) {
@@ -132,6 +104,40 @@
 			},
 		};
 	}
+	let tokenStr = $derived(getTokenStr(showToken));
+	let snippetsByLang = $derived({
+		javascript: getSnippet({ lang: "js", tokenStr, conversation }),
+		python: getSnippet({ lang: "python", tokenStr, conversation }),
+		http: getSnippet({ lang: "curl", tokenStr, conversation }),
+	} as Record<Language, GetInferenceSnippetReturn>);
+	let selectedSnippet = $derived(snippetsByLang[lang][selectedSnippetIdxByLang[lang]]);
+	let installInstructions = $derived(
+		(function getInstallInstructions(): InstallInstructions | undefined {
+			if (lang === "javascript") {
+				const isHugging = selectedSnippet?.client.includes("hugging");
+				const toInstall = isHugging ? "@huggingface/inference" : "openai";
+				const docs = isHugging
+					? "https://huggingface.co/docs/huggingface.js/inference/README"
+					: "https://platform.openai.com/docs/libraries";
+				return {
+					title: `Install ${toInstall}`,
+					content: `npm install --save ${toInstall}`,
+					docs,
+				};
+			} else if (lang === "python") {
+				const isHugging = selectedSnippet?.client.includes("hugging");
+				const toInstall = isHugging ? "huggingface_hub" : "openai";
+				const docs = isHugging
+					? "https://huggingface.co/docs/huggingface_hub/guides/inference"
+					: "https://platform.openai.com/docs/libraries";
+				return {
+					title: `Install the latest`,
+					content: `pip install --upgrade ${toInstall}`,
+					docs,
+				};
+			}
+		})()
+	);
 </script>
 
 <div class="px-2 pt-2">
@@ -142,7 +148,7 @@
 			{#each entries(labelsByLanguage) as [language, label]}
 				<li>
 					<button
-						on:click={() => (lang = language)}
+						onclick={() => (lang = language)}
 						class="inline-block rounded-t-lg border-b-2 p-4 {lang === language
 							? 'border-black text-black dark:border-blue-500 dark:text-blue-500'
 							: 'border-transparent hover:border-gray-300 hover:text-gray-600 dark:hover:text-gray-300'}"
@@ -152,7 +158,7 @@
 			{/each}
 			<li class="ml-auto self-center max-sm:hidden">
 				<button
-					on:click={() => {
+					onclick={() => {
 						dispatch("closeCode");
 					}}
 					class="flex size-7 items-center justify-center rounded-lg px-3 py-2.5 text-xs font-medium text-gray-900 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"
@@ -172,7 +178,7 @@
 					{isActive
 						? 'bg-black text-gray-100 dark:border-gray-500 dark:bg-gray-700 dark:text-white'
 						: 'text-gray-500 hover:text-gray-600 dark:border-gray-600 dark:hover:text-gray-400'}"
-					on:click={() => (selectedSnippetIdxByLang[lang] = idx)}>{client}</button
+					onclick={() => (selectedSnippetIdxByLang[lang] = idx)}>{client}</button
 				>
 			{/each}
 		</div>

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

@@ -5,7 +5,7 @@
 	import { cn } from "$lib/utils/cn.js";
 	import { createSelect, createSync } from "@melt-ui/svelte";
 	import IconCaret from "~icons/carbon/chevron-down";
-	import IconProvider from "../icons/icon-provider.svelte";
+	import IconProvider from "../icon-provider.svelte";
 
 	export let conversation: Conversation;
 	let classes: string | undefined = undefined;

src/lib/state/models.svelte.ts

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