Max tokens

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -365,10 +365,7 @@
 					</select>
 				</div>
 
-				<PlaygroundOptions
-					bind:config={conversations[0].config}
-					bind:streaming={conversations[0].streaming}
-				/>
+				<PlaygroundOptions bind:conversation={conversations[0]} />
 				<div class="mt-auto">
 					<div class="mb-3 flex items-center justify-between gap-2">
 						<label

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -4,9 +4,10 @@
 	import Message from './InferencePlaygroundMessage.svelte';
 	import PlaygroundOptions from './InferencePlaygroundGenerationConfig.svelte';
 	import IconPlus from '../Icons/IconPlus.svelte';
+	import type { Conversation } from '$lib/types';
 
 	export let loading;
-	export let conversation;
+	export let conversation: Conversation;
 	export let index;
 	export let viewCode;
 	export let sideBySide = false;
@@ -65,8 +66,7 @@
 					/></svg
 				>
 				<PlaygroundOptions
-					bind:config={conversation.config}
-					bind:streaming={conversation.streaming}
+					bind:conversation
 					classNames="absolute top-8 right-0 w-56 invisible group-focus:visible hover:visible border border-gray-200/80 bg-white z-10 px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800 rounded-xl"
 				/>
 			</button>

src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
+	import type { Conversation } from '$lib/types';
 	import {
 		GENERATION_CONFIG_KEYS,
 		GENERATION_CONFIG_KEYS_ADVANCED,
 		GENERATION_CONFIG_SETTINGS
 	} from './generationConfigSettings';
 
-	export let config;
-	export let streaming: boolean;
+	export let conversation: Conversation;
 	export let classNames = '';
+
+	$: modelMaxLength = conversation.model.tokenizerConfig.model_max_length;
+	$: maxTokens = Math.min(modelMaxLength ?? GENERATION_CONFIG_SETTINGS['max_tokens'].max, 64_000);
 </script>
 
 <div class="flex flex-col gap-y-5 {classNames}">
 	{#each GENERATION_CONFIG_KEYS as key}
 		{@const { label, min, step } = GENERATION_CONFIG_SETTINGS[key]}
-		{@const max = key === 'max_tokens' ? 1000 : GENERATION_CONFIG_SETTINGS[key].max}
+		{@const max = key === 'max_tokens' ? maxTokens : GENERATION_CONFIG_SETTINGS[key].max}
 		<div>
 			<div class="flex items-center justify-between">
 				<label
@@ -24,18 +27,18 @@
 					type="number"
 					class="w-16 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
 					{min}
-					max={key === 'max_tokens' ? 1000 : max}
+					{max}
 					{step}
-					bind:value={config[key]}
+					bind:value={conversation.config[key]}
 				/>
 			</div>
 			<input
 				id="temperature-range"
 				type="range"
 				{min}
-				max={key === 'max_tokens' ? 1000 : max}
+				{max}
 				{step}
-				bind:value={config[key]}
+				bind:value={conversation.config[key]}
 				class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
 			/>
 		</div>
@@ -59,8 +62,8 @@
 							min={settings.min}
 							max={settings.max}
 							step={settings.step}
-							value={config[key] ?? settings.default}
-							on:input={(e) => (config[key] = e.currentTarget.value)}
+							value={conversation.config[key] ?? settings.default}
+							on:input={(e) => (conversation.config[key] = Number(e.currentTarget.value))}
 						/>
 					</div>
 					<input
@@ -69,8 +72,8 @@
 						min={settings.min}
 						max={settings.max}
 						step={settings.step}
-						value={config[key] ?? settings.default}
-						on:input={(e) => (config[key] = e.currentTarget.value)}
+						value={conversation.config[key] ?? settings.default}
+						on:input={(e) => (conversation.config[key] = Number(e.currentTarget.value))}
 						class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
 					/>
 				</div>
@@ -80,7 +83,7 @@
 
 	<div class="mt-2">
 		<label class="flex cursor-pointer items-center justify-between">
-			<input type="checkbox" bind:checked={streaming} class="peer sr-only" />
+			<input type="checkbox" bind:checked={conversation.streaming} class="peer sr-only" />
 			<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Streaming</span>
 			<div
 				class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"