Settings dynamically change (#27)

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -194,6 +194,10 @@
 			submit();
 		}
 	}
+
+	function changeSelectedModel(modelIdx: number) {
+		conversations[0] = { ...conversations[0], model: models[modelIdx] };
+	}
 </script>
 
 <svelte:window on:keydown={onKeydown} />
@@ -364,7 +368,7 @@
 			>
 				<PlaygroundModelSelector
 					compatibleModels={models}
-					bind:currentModel={conversations[0].model}
+					on:modelIdxChange={(e) => changeSelectedModel(e.detail)}
 				/>
 				<div
 					class="group relative -mt-4 flex h-[26px] w-full items-center justify-center gap-2 rounded-lg bg-black px-5 text-sm text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -25,10 +25,10 @@
 		language?: Language;
 	}
 
-	const snippetsByLanguage: Record<Language, Snippet[]> = {
-		javascript: getJavascriptSnippets(),
-		python: getPythonSnippets(),
-		bash: getBashSnippets()
+	$: snippetsByLanguage = {
+		javascript: getJavascriptSnippets(conversation),
+		python: getPythonSnippets(conversation),
+		bash: getBashSnippets(conversation)
 	};
 
 	let selectedLanguage: Language = 'javascript';
@@ -46,7 +46,7 @@
 		return hljs.highlight(code, { language }).value;
 	}
 
-	function getJavascriptSnippets() {
+	function getJavascriptSnippets(conversation: Conversation) {
 		const messagesStr = getMessages().replace(/"([^"]+)":/g, '$1:');
 		const snippets: Snippet[] = [];
 		snippets.push({
@@ -66,7 +66,7 @@ const inference = new HfInference("your HF token")
 let out = "";
 
 for await (const chunk of inference.chatCompletionStream({
-  model: "${conversation.model}",
+  model: "${conversation.model.id}",
   messages: ${messagesStr},
   temperature: ${conversation.config.temperature},
   max_tokens: ${conversation.config.maxTokens},
@@ -89,7 +89,7 @@ for await (const chunk of inference.chatCompletionStream({
 const inference = new HfInference("your access token")
 
 const out = await inference.chatCompletion({
-    model: "${conversation.model}",
+    model: "${conversation.model.id}",
     messages: ${messagesStr}, 
     temperature: ${conversation.config.temperature},
     max_tokens: ${conversation.config.maxTokens},
@@ -103,7 +103,7 @@ console.log(out.choices[0].message);`
 		return snippets;
 	}
 
-	function getPythonSnippets() {
+	function getPythonSnippets(conversation: Conversation) {
 		const messagesStr = getMessages();
 		const snippets: Snippet[] = [];
 		snippets.push({
@@ -116,7 +116,7 @@ console.log(out.choices[0].message);`
 				label: 'Streaming API',
 				code: `from huggingface_hub import InferenceClient
 
-model_id="${conversation.model}"
+model_id="${conversation.model.id}"
 hf_token = "your HF token"
 inference_client = InferenceClient(model_id, token=hf_token)
 
@@ -135,7 +135,7 @@ for token in client.chat_completion(messages, stream=True, temperature=${convers
 				label: 'Non-Streaming API',
 				code: `from huggingface_hub import InferenceClient
 
-model_id="${conversation.model}"
+model_id="${conversation.model.id}"
 hf_token = "your HF token"
 inference_client = InferenceClient(model_id, token=hf_token)
 
@@ -150,14 +150,14 @@ print(output.choices[0].message)`
 		return snippets;
 	}
 
-	function getBashSnippets() {
+	function getBashSnippets(conversation: Conversation) {
 		const messagesStr = getMessages();
 		const snippets: Snippet[] = [];
 
 		if (conversation.config.streaming) {
 			snippets.push({
 				label: 'Streaming API',
-				code: `curl 'https://api-inference.huggingface.co/models/${conversation.model}/v1/chat/completions' \
+				code: `curl 'https://api-inference.huggingface.co/models/${conversation.model.id}/v1/chat/completions' \
 --header "Authorization: Bearer {YOUR_HF_TOKEN}" \
 --header 'Content-Type: application/json' \
 --data '{
@@ -172,7 +172,7 @@ print(output.choices[0].message)`
 			// non-streaming
 			snippets.push({
 				label: 'Non-Streaming API',
-				code: `curl 'https://api-inference.huggingface.co/models/${conversation.model}/v1/chat/completions' \
+				code: `curl 'https://api-inference.huggingface.co/models/${conversation.model.id}/v1/chat/completions' \
 --header "Authorization: Bearer {YOUR_HF_TOKEN}" \
 --header 'Content-Type: application/json' \
 --data '{

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { type ModelEntry } from '@huggingface/hub';
+	import { createEventDispatcher } from 'svelte';
 
 	export let compatibleModels: ModelEntry[] = [];
-	export let currentModel = compatibleModels[0];
 	export let disabled = false;
+
+	const dispatch = createEventDispatcher<{ modelIdxChange: number }>();
 </script>
 
 <div>
@@ -14,8 +16,8 @@
 	</label>
 	<select
 		{disabled}
-		bind:value={currentModel}
 		class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+		on:change={(e) => dispatch('modelIdxChange', e.currentTarget.selectedIndex)}
 	>
 		{#each compatibleModels as model}
 			<option value={model.id}>{model.id}</option>