File size: 3,135 Bytes
39eb06d 18f6e61 d5e14b5 f2e5687 18f6e61 3d94876 39eb06d d5e14b5 7e29a25 d5e14b5 7e29a25 d5e14b5 7e29a25 d5e14b5 3d94876 d5e14b5 7e29a25 d5e14b5 3d94876 d5e14b5 18f6e61 3d94876 d5e14b5 3d94876 39eb06d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<script lang="ts">
import {
GENERATION_CONFIG_KEYS,
GENERATION_CONFIG_KEYS_ADVANCED,
GENERATION_CONFIG_SETTINGS
} from './generationConfigSettings';
export let config;
export let streaming: boolean;
export let classNames = '';
</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}
<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">{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}
max={key === 'max_tokens' ? 1000 : max}
{step}
bind:value={config[key]}
/>
</div>
<input
id="temperature-range"
type="range"
{min}
max={key === 'max_tokens' ? 1000 : max}
{step}
bind:value={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>
{/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" />
<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"
></div>
</label>
</div>
</div>
|