File size: 4,712 Bytes
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 |
<script lang="ts">
export let compatibleModels: string[] = [];
export let currentModel = compatibleModels[0];
</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="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
>Temperature</label
>
<input type="text" class="w-12 rounded border px-1 py-0.5 text-right text-sm" value="0,5" />
</div>
<input
id="default-range"
type="range"
value="50"
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="default-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
>Max tokens</label
>
<input type="text" class="w-16 rounded border px-1 py-0.5 text-right text-sm" value="32,000" />
</div>
<input
id="default-range"
type="range"
value="50"
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" value="" class="peer sr-only" disabled />
<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>
|