Advanced generation options (#30)

src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
-	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from './generationConfigSettings';
+	import {
+		GENERATION_CONFIG_KEYS,
+		GENERATION_CONFIG_KEYS_ADVANCED,
+		GENERATION_CONFIG_SETTINGS
+	} from './generationConfigSettings';
 
 	export let config;
-	export let streaming;
+	export let streaming: boolean;
 	export let classNames = '';
 </script>
 
@@ -37,6 +41,43 @@
 		</div>
 	{/each}
 
+	<details>
+		<summary>Advanced Options</summary>
+		<div class="mt-4 flex flex-col gap-y-5">
+			{#each GENERATION_CONFIG_KEYS_ADVANCED as key}
+				{@const settings = GENERATION_CONFIG_SETTINGS[key]}
+				<div>
+					<div class="flex items-center justify-between">
+						<label
+							for="temperature-range"
+							class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+							>{settings.label}</label
+						>
+						<input
+							type="number"
+							class="w-16 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
+							min={settings.min}
+							max={settings.max}
+							step={settings.step}
+							value={config[key] ?? settings.default}
+							on:input={(e) => (config[key] = e.currentTarget.value)}
+						/>
+					</div>
+					<input
+						id="temperature-range"
+						type="range"
+						min={settings.min}
+						max={settings.max}
+						step={settings.step}
+						value={config[key] ?? settings.default}
+						on:input={(e) => (config[key] = 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>
+			{/each}
+		</div>
+	</details>
+
 	<div class="mt-2">
 		<label class="flex cursor-pointer items-center justify-between">
 			<input type="checkbox" bind:checked={streaming} class="peer sr-only" />

src/lib/components/InferencePlayground/generationConfigSettings.ts

@@ -46,16 +46,17 @@ export const GENERATION_CONFIG_SETTINGS: Record<string, GenerationKeySettings> =
 
 export type GenerationConfigKey = keyof typeof GENERATION_CONFIG_SETTINGS;
 
-export const GENERATION_CONFIG_KEYS: GenerationConfigKey[] = Object.keys(
-	GENERATION_CONFIG_SETTINGS
-);
+export const GENERATION_CONFIG_KEYS: GenerationConfigKey[] = ['temperature', 'max_tokens'];
+
+export const GENERATION_CONFIG_KEYS_ADVANCED: GenerationConfigKey[] = [
+	'top_p',
+	'top_k',
+	'repetition_penalty'
+];
 
 export type GenerationConfig = Record<GenerationConfigKey, number>;
 
-export const defaultGenerationConfig = Object.keys(GENERATION_CONFIG_SETTINGS).reduce(
-	(acc, key) => {
-		acc[key] = GENERATION_CONFIG_SETTINGS[key].default;
-		return acc;
-	},
-	{} as GenerationConfig
-);
+export const defaultGenerationConfig = GENERATION_CONFIG_KEYS.reduce((acc, key) => {
+	acc[key] = GENERATION_CONFIG_SETTINGS[key].default;
+	return acc;
+}, {} as GenerationConfig);