File size: 3,494 Bytes
39eb06d 5d3a236 fb2b35f 4a3f962 39eb06d 1d3bdab 39eb06d 65b948d 39eb06d 5d3a236 8dc43df 9c0f4e3 5d3a236 8dc43df 5d3a236 39eb06d 5d3a236 39eb06d 5d3a236 9c0f4e3 39eb06d 65b948d 39eb06d 5d3a236 8dc43df 9c0f4e3 5d3a236 65b948d 91fd983 65b948d 5d3a236 39eb06d 5d3a236 39eb06d 5d3a236 65b948d 91fd983 65b948d 9c0f4e3 39eb06d a367e47 39eb06d 9c0f4e3 39eb06d 9c0f4e3 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 92 |
<script lang="ts">
export let compatibleModels: string[] = [];
export let currentModel = compatibleModels[0];
export let temperature = 0.5;
export let maxTokens = 2048;
export let streaming = true;
</script>
<div>
<label
for="countries"
class="mb-2 flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
>Models<span class="ml-4 font-normal text-gray-400">{compatibleModels.length}</span>
</label>
<select
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"
>
{#each compatibleModels as model}
<option value={model}>{model}</option>
{/each}
</select>
</div>
<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">Temperature</label
>
<input
type="number"
class="w-16 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
bind:value={temperature}
min="0"
max="1"
step="0.1"
/>
</div>
<input
id="temperature-range"
type="range"
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 dark:accent-blue-500"
/>
</div>
<div>
<div class="flex items-center justify-between">
<label
for="max-tokens-range"
class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Max tokens</label
>
<input
type="number"
class="w-20 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
bind:value={maxTokens}
min="0"
max="4096"
step="512"
/>
</div>
<input
id="max-tokens-range"
type="range"
bind:value={maxTokens}
min="0"
max="4096"
step="512"
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>
<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 class="mt-2">
<label class="flex cursor-pointer items-center justify-between">
<input type="checkbox" value="" class="peer sr-only" disabled />
<span class="text-sm font-medium text-gray-900 dark:text-gray-300">JSON Mode</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>
|