Added temperature and max tokens controls to the Playground component.

src/lib/components/Playground/Playground.svelte

@@ -19,6 +19,8 @@
 	let currentModel = compatibleModels[0];
 	let systemMessage: Message = { role: 'system', content: '' };
 	let messages: Message[] = startMessages;
+	let temperature = 0.5;
+	let maxTokens = 32000;
 
 	let loading = false;
 
@@ -60,8 +62,8 @@
 			const out = await hf.chatCompletion({
 				model: currentModel,
 				messages: systemMessage.content ? [systemMessage, ...messages] : messages,
-				max_tokens: 500,
-				temperature: 0.1,
+				max_tokens: maxTokens,
+				temperature: temperature,
 				seed: 0
 			});
 
@@ -155,6 +157,11 @@
 		</div>
 	</div>
 	<div class="flex flex-col gap-6 overflow-hidden p-5">
-		<PlaygroundOptions {compatibleModels} bind:currentModel />
+		<PlaygroundOptions
+			{compatibleModels}
+			bind:currentModel
+			bind:temperature
+			bind:maxTokens
+		/>
 	</div>
 </div>

src/lib/components/Playground/PlaygroundOptions.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	export let compatibleModels: string[] = [];
 	export let currentModel = compatibleModels[0];
+	export let temperature = 0.5;
+	export let maxTokens = 32000;
 </script>
 
 <div>
@@ -20,29 +22,43 @@
 </div>
 <div>
 	<div class="flex items-center justify-between">
-		<label for="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+		<label for="temperature-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
 			>Temperature</label
 		>
-		<input type="text" class="w-12 rounded border px-1 py-0.5 text-right text-sm" value="0,5" />
+		<input
+			type="text"
+			class="w-12 rounded border px-1 py-0.5 text-right text-sm"
+			bind:value={temperature}
+		/>
 	</div>
 	<input
-		id="default-range"
+		id="temperature-range"
 		type="range"
-		value="50"
+		bind:value={temperature}
+		min="0"
+		max="1"
+		step="0.1"
 		class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700"
 	/>
 </div>
 <div>
 	<div class="flex items-center justify-between">
-		<label for="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+		<label for="max-tokens-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
 			>Max tokens</label
 		>
-		<input type="text" class="w-16 rounded border px-1 py-0.5 text-right text-sm" value="32,000" />
+		<input
+			type="text"
+			class="w-16 rounded border px-1 py-0.5 text-right text-sm"
+			bind:value={maxTokens}
+		/>
 	</div>
 	<input
-		id="default-range"
+		id="max-tokens-range"
 		type="range"
-		value="50"
+		bind:value={maxTokens}
+		min="1"
+		max="32000"
+		step="1"
 		class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700"
 	/>
 </div>