add provider to search params

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
 	import type { Conversation, ConversationMessage, ModelEntryWithTokenizer } from "./types";
 
-	import { page } from "$app/stores";
 	import {
 		handleNonStreamingResponse,
 		handleStreamingResponse,
 		isSystemPromptSupported,
 	} from "./inferencePlaygroundUtils";
 
-	import { goto } from "$app/navigation";
 	import { models } from "$lib/stores/models";
 	import { session } from "$lib/stores/session";
 	import { token } from "$lib/stores/token";
@@ -204,15 +202,6 @@
 		const newConversation = { ...JSON.parse(JSON.stringify($session.conversations[0])), model };
 		$session.conversations = [...$session.conversations, newConversation];
 		generationStats = [generationStats[0], { latency: 0, generatedTokensCount: 0 }];
-
-		// update query param
-		const url = new URL($page.url);
-		const queryParamValue = `${$session.conversations[0].model.id},${modelId}`;
-		url.searchParams.set("modelId", queryParamValue);
-
-		const parentOrigin = "https://huggingface.co";
-		window.parent.postMessage({ queryString: `modelId=${queryParamValue}` }, parentOrigin);
-		goto(url.toString(), { replaceState: true });
 	}
 
 	function removeCompareModal(conversationIdx: number) {
@@ -220,19 +209,6 @@
 		$session = $session;
 		generationStats.splice(conversationIdx, 1)[0];
 		generationStats = generationStats;
-
-		// update query param
-		const url = new URL($page.url);
-		const queryParamValue = url.searchParams.get("modelId");
-		if (queryParamValue) {
-			const modelIds = queryParamValue.split(",") as [string, string];
-			const newQueryParamValue = conversationIdx === 1 ? modelIds[0] : modelIds[1];
-			url.searchParams.set("modelId", newQueryParamValue);
-
-			const parentOrigin = "https://huggingface.co";
-			window.parent.postMessage({ queryString: `modelId=${newQueryParamValue}` }, parentOrigin);
-			goto(url.toString(), { replaceState: true });
-		}
 	}
 
 	onDestroy(() => {

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -3,13 +3,11 @@
 
 	import { createEventDispatcher } from "svelte";
 
-	import { page } from "$app/stores";
+	import { models } from "$lib/stores/models";
+	import Avatar from "../Avatar.svelte";
 	import IconCog from "../Icons/IconCog.svelte";
 	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import Avatar from "../Avatar.svelte";
-	import { goto } from "$app/navigation";
-	import { models } from "$lib/stores/models";
 	import InferencePlaygroundProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
 
 	export let conversation: Conversation;
@@ -25,21 +23,7 @@
 			return;
 		}
 		conversation.model = model;
-
-		const url = new URL($page.url);
-		const queryParamValue = url.searchParams.get("modelId");
-		if (queryParamValue) {
-			const modelIds = queryParamValue.split(",") as [string, string];
-			modelIds[conversationIdx] = newModelId;
-
-			const newQueryParamValue = modelIds.join(",");
-			url.searchParams.set("modelId", newQueryParamValue);
-
-			const parentOrigin = "https://huggingface.co";
-			window.parent.postMessage({ queryString: `modelId=${newQueryParamValue}` }, parentOrigin);
-
-			goto(url.toString(), { replaceState: true });
-		}
+		conversation.provider = undefined;
 	}
 
 	$: nameSpace = conversation.model.id.split("/")[0] ?? "";

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
 	import type { Conversation, ModelEntryWithTokenizer } from "./types";
 
-	import { goto } from "$app/navigation";
-	import { page } from "$app/stores";
-
 	import { models } from "$lib/stores/models";
 	import Avatar from "../Avatar.svelte";
 	import IconCaret from "../Icons/IconCaret.svelte";
@@ -23,14 +20,7 @@
 		}
 		conversation.model = model;
 		conversation.systemMessage = { role: "system", content: defaultSystemMessage?.[modelId] ?? "" };
-
-		const url = new URL($page.url);
-		url.searchParams.set("modelId", model.id);
-
-		const parentOrigin = "https://huggingface.co";
-		window.parent.postMessage({ queryString: `modelId=${model.id}` }, parentOrigin);
-
-		goto(url.toString(), { replaceState: true });
+		conversation.provider = undefined;
 	}
 
 	$: nameSpace = conversation.model.id.split("/")[0] ?? "";

src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte

@@ -15,13 +15,12 @@
 	export { classes as class };
 
 	async function loadProviders(modelId: string) {
-		console.log(modelId);
 		if (!browser) return;
 		providerMap = {};
 		const res = await fetchHuggingFaceModel(modelId, $token.value);
 		providerMap = res.inferenceProviderMapping;
 		// Commented out. I'm not sure we want to maintain, or always random pick
-		// if ((conversation.provider ?? "") in providerMap) return;
+		if ((conversation.provider ?? "") in providerMap) return;
 		conversation.provider = randomPick(Object.keys(providerMap));
 	}
 

src/lib/stores/session.ts

@@ -1,3 +1,5 @@
+import { browser } from "$app/environment";
+import { goto } from "$app/navigation";
 import { defaultGenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
 import {
 	defaultSystemMessage,
@@ -6,50 +8,85 @@ import {
 import type { Conversation, ConversationMessage, Session } from "$lib/components/InferencePlayground/types";
 
 import { models } from "$lib/stores/models";
-import { safePage } from "$lib/utils/store";
 import { get, writable } from "svelte/store";
 
-export const session = writable<Session>(undefined, (set, update) => {
-	const startMessageUser: ConversationMessage = { 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: ConversationMessage = {
-		role: "system",
-		content: modelIdsFromQueryParam?.[0] ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
-	};
+function createSessionStore() {
+	const store = writable<Session>(undefined, (set, update) => {
+		const searchParams = new URLSearchParams(browser ? window.location.search : undefined);
+
+		const modelIdsFromSearchParam = searchParams.getAll("modelId");
+		const modelsFromSearchParam = modelIdsFromSearchParam?.map(id => get(models).find(model => model.id === id));
+
+		const providersFromSearchParam = searchParams.getAll("provider");
+
+		const startMessageUser: ConversationMessage = { role: "user", content: "" };
+		const systemMessage: ConversationMessage = {
+			role: "system",
+			content: modelIdsFromSearchParam?.[0] ? (defaultSystemMessage?.[modelIdsFromSearchParam[0]] ?? "") : "",
+		};
 
-	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,
-			},
-		],
+		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,
+				},
+			],
+		});
+
+		if (modelsFromSearchParam?.length) {
+			const conversations = modelsFromSearchParam.map((model, i) => {
+				return {
+					model,
+					config: { ...defaultGenerationConfig },
+					messages: [{ ...startMessageUser }],
+					systemMessage,
+					streaming: true,
+					provider: providersFromSearchParam?.[i],
+				};
+			}) as [Conversation] | [Conversation, Conversation];
+			update(s => ({ ...s, conversations }));
+		}
 	});
 
-	if (modelsFromQueryParam?.length) {
-		const conversations = modelsFromQueryParam.map(model => {
-			return {
-				model,
-				config: { ...defaultGenerationConfig },
-				messages: [{ ...startMessageUser }],
-				systemMessage,
-				streaming: true,
-			};
-		}) as [Conversation] | [Conversation, Conversation];
-		update(s => ({ ...s, conversations }));
-	}
-});
+	const update: typeof store.update = cb => {
+		const query = new URLSearchParams(window.location.search);
+		query.delete("modelId");
+		query.delete("provider");
+
+		store.update($s => {
+			const s = cb($s);
+
+			const modelIds = s.conversations.map(c => c.model.id);
+			modelIds.forEach(m => query.append("modelId", m));
+
+			const providers = s.conversations.map(c => c.provider ?? "hf-inference");
+			providers.forEach(p => query.append("provider", p));
+
+			goto(`?${query}`, { replaceState: true });
+
+			return s;
+		});
+	};
+
+	const set: typeof store.set = (...args) => {
+		update(_ => args[0]);
+	};
+
+	return { ...store, set, update };
+}
+
+export const session = createSessionStore();