fix model picker bug

package.json

@@ -38,7 +38,7 @@
 		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
-		"melt": "^0.29.2",
+		"melt": "^0.29.3",
 		"openai": "^4.90.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",

src/lib/state/models.svelte.ts

@@ -1,10 +1,9 @@
 import { page } from "$app/state";
-import { createInit } from "$lib/spells/create-init.svelte";
 import type { CustomModel, Model } from "$lib/types.js";
+import { edit, randomPick } from "$lib/utils/array.js";
 import { safeParse } from "$lib/utils/json.js";
 import typia from "typia";
 import { session } from "./session.svelte";
-import { randomPick } from "$lib/utils/array.js";
 
 const LOCAL_STORAGE_KEY = "hf_inference_playground_custom_models";
 
@@ -12,11 +11,12 @@ class Models {
 	remote = $derived(page.data.models as Model[]);
 	trending = $derived(this.remote.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, 5));
 	nonTrending = $derived(this.remote.filter(m => !this.trending.includes(m)));
+	all = $derived([...this.remote, ...this.custom]);
 
-	#custom = $state<CustomModel[]>([]);
-	#initCustom = createInit(() => {
+	constructor() {
 		const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
 		if (!savedData) return;
+
 		const parsed = safeParse(savedData);
 		const res = typia.validate<CustomModel[]>(parsed);
 		if (res.success) {
@@ -24,36 +24,27 @@ class Models {
 		} else {
 			localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify([]));
 		}
-	});
-
-	all = $derived([...this.remote, ...this.custom]);
-
-	constructor() {
-		$effect.root(() => {
-			$effect(() => {
-				if (!this.#initCustom.called) return;
-				const v = $state.snapshot(this.#custom);
-				try {
-					localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(v));
-				} catch (e) {
-					console.error("Failed to save session to localStorage:", e);
-				}
-			});
-		});
 	}
 
+	#custom = $state.raw<CustomModel[]>([]);
+
 	get custom() {
-		this.#initCustom.fn();
 		return this.#custom;
 	}
 
-	// set local(v: CustomModel[]) {
-	// 	this.local = v;
-	// }
+	set custom(models: CustomModel[]) {
+		this.#custom = models;
+
+		try {
+			localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(models));
+		} catch (e) {
+			console.error("Failed to save session to localStorage:", e);
+		}
+	}
 
 	addCustom(model: CustomModel) {
 		if (this.#custom.find(m => m.id === model.id)) return null;
-		this.#custom = [...this.#custom, model];
+		this.custom = [...this.custom, model];
 		return model;
 	}
 
@@ -62,12 +53,12 @@ class Models {
 		if (index === -1) {
 			this.addCustom(model);
 		} else {
-			this.#custom[index] = model;
+			this.custom = edit(this.custom, index, model);
 		}
 	}
 
 	removeCustom(uuid: CustomModel["_id"]) {
-		this.#custom = this.#custom.filter(m => m._id !== uuid);
+		this.custom = this.custom.filter(m => m._id !== uuid);
 		session.project.conversations.forEach((c, i) => {
 			if (c.model._id !== uuid) return;
 			session.project.conversations[i]!.model = randomPick(models.trending)!;

src/lib/state/session.svelte.ts

@@ -58,9 +58,9 @@ function getDefaults() {
 
 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(() => {
+
+	// Call once in layout
+	init = createInit(() => {
 		const { defaultConversation, defaultProject } = getDefaults();
 
 		// Get saved session from localStorage if available
@@ -116,7 +116,7 @@ class SessionState {
 	constructor() {
 		$effect.root(() => {
 			$effect(() => {
-				if (!this.#init.called) return;
+				if (!this.init.called) return;
 				const v = $state.snapshot(this.#value);
 				try {
 					localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(v));
@@ -128,7 +128,6 @@ class SessionState {
 	}
 
 	get $() {
-		this.#init.fn();
 		return this.#value;
 	}
 

src/lib/utils/array.ts

@@ -5,3 +5,8 @@ export function last<T>(arr: T[]): T | undefined {
 export function randomPick<T>(arr: T[]): T | undefined {
 	return arr[Math.floor(Math.random() * arr.length)];
 }
+
+/** Return an array with an edited element at the given index. */
+export function edit<T>(arr: T[], index: number, newValue: T): T[] {
+	return arr.map((value, i) => (i === index ? newValue : value));
+}

src/routes/+layout.svelte

@@ -5,12 +5,14 @@
 	import QuotaModal from "$lib/components/quota-modal.svelte";
 	import ShareModal from "$lib/components/share-modal.svelte";
 	import "../app.css";
+	import { session } from "$lib/state/session.svelte";
 
 	interface Props {
 		children?: import("svelte").Snippet;
 	}
 
 	let { children }: Props = $props();
+	session.init.fn();
 </script>
 
 {@render children?.()}