make stores ssr proof

src/lib/stores/models.ts

@@ -1,8 +1,33 @@
+import { page } from "$app/stores";
 import type { ModelEntryWithTokenizer } from "$lib/components/InferencePlayground/types";
-import { safePage } from "$lib/utils/store";
-import { derived } from "svelte/store";
+import { effect } from "$lib/utils/effect";
+import { get, writable } from "svelte/store";
 
-export const models = derived(safePage, $page => {
-	const res: ModelEntryWithTokenizer[] = $page?.data?.models ?? [];
-	return res;
-});
+function createModelsStore() {
+	let hasStarted = false;
+	const store = writable<ModelEntryWithTokenizer[]>([]);
+
+	function init() {
+		store.set(get(page)?.data.models ?? []);
+		hasStarted = true;
+	}
+
+	const subscribe: (typeof store)["subscribe"] = (...args) => {
+		if (!hasStarted) init();
+		hasStarted = true;
+		const unsubs = [
+			effect(page, $page => {
+				store.set($page.data.models);
+			}),
+			store.subscribe(...args),
+		];
+
+		return () => {
+			unsubs.forEach(unsub => unsub());
+		};
+	};
+
+	return { ...store, subscribe };
+}
+
+export const models = createModelsStore();

src/lib/stores/session.ts

@@ -11,50 +11,61 @@ import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 import { partialSet, safePage } from "$lib/utils/store";
 
 export function createSessionStore() {
-	const startMessageUser: ChatCompletionInputMessage = { role: "user", content: "" };
-	const modelIdsFromQueryParam = get(safePage)?.url?.searchParams?.get("modelId")?.split(",");
-	const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => get(models).find(model => model.id === id));
-	const systemMessage: ChatCompletionInputMessage = {
-		role: "system",
-		content: modelIdsFromQueryParam?.[0] ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
-	};
+	let hasStarted = false;
+	const store = writable<Session>();
+
+	function init() {
+		const startMessageUser: ChatCompletionInputMessage = { role: "user", content: "" };
+		const modelIdsFromQueryParam = get(safePage)?.url?.searchParams?.get("modelId")?.split(",");
+		const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => get(models).find(model => model.id === id));
+		const systemMessage: ChatCompletionInputMessage = {
+			role: "system",
+			content: modelIdsFromQueryParam?.[0] ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
+		};
+
+		store.set({
+			conversations: [
+				{
+					model: get(models).find(m => FEATURED_MODELS_IDS.includes(m.id)) ??
+						get(models)[0] ?? {
+							id: "",
+							downloads: 0,
+							gated: false,
+							likes: 0,
+							name: "",
+							private: false,
+							tokenizerConfig: {},
+							updatedAt: new Date(),
+						},
+					config: { ...defaultGenerationConfig },
+					messages: [{ ...startMessageUser }],
+					systemMessage,
+					streaming: true,
+				},
+			],
+		});
 
-	const store = writable<Session>({
-		conversations: [
-			{
-				model: get(models).find(m => FEATURED_MODELS_IDS.includes(m.id)) ??
-					get(models)[0] ?? {
-						id: "",
-						downloads: 0,
-						gated: false,
-						likes: 0,
-						name: "",
-						private: false,
-						tokenizerConfig: {},
-						updatedAt: new Date(),
-					},
-				config: { ...defaultGenerationConfig },
-				messages: [{ ...startMessageUser }],
-				systemMessage,
-				streaming: true,
-			},
-		],
-	});
-
-	if (modelsFromQueryParam?.length) {
-		const conversations = modelsFromQueryParam.map(model => {
-			return {
-				model,
-				config: { ...defaultGenerationConfig },
-				messages: [{ ...startMessageUser }],
-				systemMessage,
-				streaming: true,
-			};
-		}) as [Conversation] | [Conversation, Conversation];
-		partialSet(store, { conversations });
+		if (modelsFromQueryParam?.length) {
+			const conversations = modelsFromQueryParam.map(model => {
+				return {
+					model,
+					config: { ...defaultGenerationConfig },
+					messages: [{ ...startMessageUser }],
+					systemMessage,
+					streaming: true,
+				};
+			}) as [Conversation] | [Conversation, Conversation];
+			partialSet(store, { conversations });
+		}
 	}
 
-	return store;
+	const subscribe: (typeof store)["subscribe"] = (...args) => {
+		if (!hasStarted) init();
+		hasStarted = true;
+		return store.subscribe(...args);
+	};
+
+	return { ...store, subscribe };
 }
 
 export const session = createSessionStore();

src/routes/{+layout.server.ts → +page.server.ts}

@@ -1,9 +1,9 @@
 import type { ModelEntryWithTokenizer } from "$lib/components/InferencePlayground/types";
 import type { ModelEntry } from "@huggingface/hub";
-import type { LayoutServerLoad } from "./$types";
+import type { PageServerLoad } from "./$types";
 import { env } from "$env/dynamic/private";
 
-export const load: LayoutServerLoad = async ({ fetch }) => {
+export const load: PageServerLoad = async ({ fetch }) => {
 	const apiUrl =
 		"https://huggingface.co/api/models?pipeline_tag=text-generation&inference_provider=hf-inference&filter=conversational";
 	const HF_TOKEN = env.HF_TOKEN;