abstract models

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -12,6 +12,7 @@
 	} from "./inferencePlaygroundUtils";
 
 	import { goto } from "$app/navigation";
+	import { models } from "$lib/stores/models";
 	import { isMac } from "$lib/utils/platform";
 	import { onDestroy, onMount } from "svelte";
 	import IconCode from "../Icons/IconCode.svelte";
@@ -26,11 +27,9 @@
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 
-	export let models: ModelEntryWithTokenizer[];
-
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 	const modelIdsFromQueryParam = $page.url.searchParams.get("modelId")?.split(",");
-	const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => models.find(model => model.id === id));
+	const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => $models.find(model => model.id === id));
 	const systemMessage: ConversationMessage = {
 		role: "system",
 		content: modelIdsFromQueryParam ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
@@ -39,7 +38,7 @@
 	let session: Session = {
 		conversations: [
 			{
-				model: models.find(m => FEATURED_MODELS_IDS.includes(m.id)) ?? models[0],
+				model: $models.find(m => FEATURED_MODELS_IDS.includes(m.id)) ?? $models[0],
 				config: { ...defaultGenerationConfig },
 				messages: [{ ...startMessageUser }],
 				systemMessage,
@@ -242,7 +241,7 @@
 	}
 
 	function addCompareModel(modelId: ModelEntryWithTokenizer["id"]) {
-		const model = models.find(m => m.id === modelId);
+		const model = $models.find(m => m.id === modelId);
 		if (!model || session.conversations.length === 2) {
 			return;
 		}
@@ -336,7 +335,6 @@
 				<div class="max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
-							{models}
 							{conversationIdx}
 							bind:conversation
 							on:close={() => removeCompareModal(conversationIdx)}
@@ -439,7 +437,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 {models} bind:conversation={session.conversations[0]} />
+					<ModelSelector bind:conversation={session.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"
@@ -518,7 +516,6 @@
 
 {#if selectCompareModelOpen}
 	<ModelSelectorModal
-		{models}
 		conversation={session.conversations[0]}
 		on:modelSelected={e => addCompareModel(e.detail)}
 		on:close={() => (selectCompareModelOpen = false)}

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -9,8 +9,8 @@
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	import Avatar from "../Avatar.svelte";
 	import { goto } from "$app/navigation";
+	import { models } from "$lib/stores/models";
 
-	export let models: ModelEntryWithTokenizer[];
 	export let conversation: Conversation;
 	export let conversationIdx: number;
 
@@ -19,7 +19,7 @@
 	let modelSelectorOpen = false;
 
 	function changeModel(newModelId: ModelEntryWithTokenizer["id"]) {
-		const model = models.find(m => m.id === newModelId);
+		const model = $models.find(m => m.id === newModelId);
 		if (!model) {
 			return;
 		}
@@ -46,7 +46,6 @@
 
 {#if modelSelectorOpen}
 	<ModelSelectorModal
-		{models}
 		{conversation}
 		on:modelSelected={e => changeModel(e.detail)}
 		on:close={() => (modelSelectorOpen = false)}

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -8,14 +8,14 @@
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	import Avatar from "../Avatar.svelte";
 	import { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
+	import { models } from "$lib/stores/models";
 
-	export let models: ModelEntryWithTokenizer[] = [];
 	export let conversation: Conversation;
 
 	let showModelPickerModal = false;
 
 	function changeModel(modelId: ModelEntryWithTokenizer["id"]) {
-		const model = models.find(m => m.id === modelId);
+		const model = $models.find(m => m.id === modelId);
 		if (!model) {
 			return;
 		}
@@ -36,7 +36,6 @@
 
 {#if showModelPickerModal}
 	<ModelSelectorModal
-		{models}
 		{conversation}
 		on:modelSelected={e => changeModel(e.detail)}
 		on:close={() => (showModelPickerModal = false)}

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -6,8 +6,8 @@
 	import { FEATURED_MODELS_IDS } from "./inferencePlaygroundUtils";
 	import IconSearch from "../Icons/IconSearch.svelte";
 	import IconStar from "../Icons/IconStar.svelte";
+	import { models } from "$lib/stores/models";
 
-	export let models: ModelEntryWithTokenizer[];
 	export let conversation: Conversation;
 
 	let backdropEl: HTMLDivElement;
@@ -17,8 +17,8 @@
 
 	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
 
-	let featuredModels = models.filter(m => FEATURED_MODELS_IDS.includes(m.id));
-	let otherModels = models.filter(m => !FEATURED_MODELS_IDS.includes(m.id));
+	let featuredModels = $models.filter(m => FEATURED_MODELS_IDS.includes(m.id));
+	let otherModels = $models.filter(m => !FEATURED_MODELS_IDS.includes(m.id));
 
 	if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
 		highlightIdx = featuredModels.findIndex(model => model.id === conversation.model.id);
@@ -81,13 +81,13 @@
 	}
 
 	function filterModels(query: string) {
-		featuredModels = models.filter(m =>
+		featuredModels = $models.filter(m =>
 			query
 				? FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
 				: FEATURED_MODELS_IDS.includes(m.id)
 		);
 
-		otherModels = models.filter(m =>
+		otherModels = $models.filter(m =>
 			query
 				? !FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
 				: !FEATURED_MODELS_IDS.includes(m.id)

src/lib/stores/models.ts

@@ -0,0 +1,5 @@
+import { page } from "$app/stores";
+import type { ModelEntryWithTokenizer } from "$lib/components/InferencePlayground/types";
+import { derived } from "svelte/store";
+
+export const models = derived(page, $page => $page.data.models as ModelEntryWithTokenizer[]);

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	export let data;
 	import InferencePlayground from "$lib/components/InferencePlayground/InferencePlayground.svelte";
 </script>
 
-<InferencePlayground models={data.models} />
+<InferencePlayground />