File size: 5,045 Bytes
39eb06d 5d3a236 fb2b35f 4a3f962 39eb06d 65b948d 39eb06d 5d3a236 8dc43df 5d3a236 8dc43df 5d3a236 39eb06d 5d3a236 39eb06d 5d3a236 39eb06d 65b948d 39eb06d 5d3a236 8dc43df 5d3a236 65b948d 91fd983 65b948d 5d3a236 39eb06d 5d3a236 39eb06d 5d3a236 65b948d 91fd983 65b948d 39eb06d a367e47 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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<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>
<form class="mx-auto max-w-sm">
<label for="countries" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
>Model</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>
</form>
</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 px-1 py-0.5 text-right text-sm"
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"
/>
</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 px-1 py-0.5 text-right text-sm"
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"
/>
</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"
></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"
></div>
</label>
</div>
<div
class="mt-auto flex max-w-xs flex-col items-start gap-2.5 rounded-lg border bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
role="alert"
>
<span class="text-sm font-semibold text-gray-900 dark:text-white">Get more usage</span>
<div class="text-sm font-normal">Larger models, x10 quota, and advanced features.</div>
<a
href="#"
class="inline-flex rounded-lg bg-black px-2.5 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:hover:bg-black dark:focus:ring-blue-800"
>Get PRO ($9/month)</a
>
</div>
<div
class="flex max-w-xs flex-col items-start gap-2.5 rounded-lg border bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
role="alert"
>
<span class="text-sm font-semibold text-gray-900 dark:text-white">Deploy dedicated</span>
<div class="text-sm font-normal">Deploy your own production ready endpoint</div>
<a
href="#"
class="inline-flex rounded-lg bg-black px-2.5 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:hover:bg-black dark:focus:ring-blue-800"
>Deploy dedicated</a
>
</div>
<div>
<div class="mb-3 flex items-center justify-between gap-2">
<label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white"
>API Quota</label
>
<span
class="rounded bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
>Free</span
>
<input type="text" class="ml-auto w-12 text-right text-sm" value="76%" />
</div>
<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-2 rounded-full bg-black" style="width: 75%"></div>
</div>
</div>
|