mirror of
https://github.com/open-webui/open-webui
synced 2024-11-09 02:00:03 +00:00
511 lines
12 KiB
Svelte
511 lines
12 KiB
Svelte
<script lang="ts">
|
|
export let options = {
|
|
// Advanced
|
|
seed: 0,
|
|
stop: '',
|
|
temperature: '',
|
|
repeat_penalty: '',
|
|
repeat_last_n: '',
|
|
mirostat: '',
|
|
mirostat_eta: '',
|
|
mirostat_tau: '',
|
|
top_k: '',
|
|
top_p: '',
|
|
tfs_z: '',
|
|
num_ctx: ''
|
|
};
|
|
</script>
|
|
|
|
<div class=" space-y-3 text-xs">
|
|
<div>
|
|
<div class=" py-0.5 flex w-full justify-between">
|
|
<div class=" w-20 text-xs font-medium self-center">Seed</div>
|
|
<div class=" flex-1 self-center">
|
|
<input
|
|
class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
|
|
type="number"
|
|
placeholder="Enter Seed"
|
|
bind:value={options.seed}
|
|
autocomplete="off"
|
|
min="0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class=" py-0.5 flex w-full justify-between">
|
|
<div class=" w-20 text-xs font-medium self-center">Stop Sequence</div>
|
|
<div class=" flex-1 self-center">
|
|
<input
|
|
class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
|
|
type="text"
|
|
placeholder="Enter Stop Sequence"
|
|
bind:value={options.stop}
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Temperature</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.temperature = options.temperature === '' ? 0.8 : '';
|
|
}}
|
|
>
|
|
{#if options.temperature === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.temperature !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
bind:value={options.temperature}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
bind:value={options.temperature}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Mirostat</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.mirostat = options.mirostat === '' ? 0 : '';
|
|
}}
|
|
>
|
|
{#if options.mirostat === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.mirostat !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="1"
|
|
bind:value={options.mirostat}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
bind:value={options.mirostat}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="0"
|
|
max="2"
|
|
step="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Mirostat Eta</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.mirostat_eta = options.mirostat_eta === '' ? 0.1 : '';
|
|
}}
|
|
>
|
|
{#if options.mirostat_eta === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.mirostat_eta !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
bind:value={options.mirostat_eta}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
bind:value={options.mirostat_eta}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Mirostat Tau</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.mirostat_tau = options.mirostat_tau === '' ? 5.0 : '';
|
|
}}
|
|
>
|
|
{#if options.mirostat_tau === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.mirostat_tau !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="0"
|
|
max="10"
|
|
step="0.5"
|
|
bind:value={options.mirostat_tau}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
bind:value={options.mirostat_tau}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="0"
|
|
max="10"
|
|
step="0.5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Top K</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.top_k = options.top_k === '' ? 40 : '';
|
|
}}
|
|
>
|
|
{#if options.top_k === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.top_k !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
step="0.5"
|
|
bind:value={options.top_k}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
bind:value={options.top_k}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="0"
|
|
max="100"
|
|
step="0.5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Top P</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.top_p = options.top_p === '' ? 0.9 : '';
|
|
}}
|
|
>
|
|
{#if options.top_p === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.top_p !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
bind:value={options.top_p}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
bind:value={options.top_p}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Repeat Penalty</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.repeat_penalty = options.repeat_penalty === '' ? 1.1 : '';
|
|
}}
|
|
>
|
|
{#if options.repeat_penalty === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.repeat_penalty !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="0.05"
|
|
bind:value={options.repeat_penalty}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
bind:value={options.repeat_penalty}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="0"
|
|
max="2"
|
|
step="0.05"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Repeat Last N</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.repeat_last_n = options.repeat_last_n === '' ? 64 : '';
|
|
}}
|
|
>
|
|
{#if options.repeat_last_n === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.repeat_last_n !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="-1"
|
|
max="128"
|
|
step="1"
|
|
bind:value={options.repeat_last_n}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
bind:value={options.repeat_last_n}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="-1"
|
|
max="128"
|
|
step="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Tfs Z</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.tfs_z = options.tfs_z === '' ? 1 : '';
|
|
}}
|
|
>
|
|
{#if options.tfs_z === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.tfs_z !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="0.05"
|
|
bind:value={options.tfs_z}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
bind:value={options.tfs_z}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="0"
|
|
max="2"
|
|
step="0.05"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class=" py-0.5 w-full justify-between">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" self-center text-xs font-medium">Context Length</div>
|
|
|
|
<button
|
|
class="p-1 px-3 text-xs flex rounded transition"
|
|
type="button"
|
|
on:click={() => {
|
|
options.num_ctx = options.num_ctx === '' ? 2048 : '';
|
|
}}
|
|
>
|
|
{#if options.num_ctx === ''}
|
|
<span class="ml-2 self-center"> Default </span>
|
|
{:else}
|
|
<span class="ml-2 self-center"> Custom </span>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
|
|
{#if options.num_ctx !== ''}
|
|
<div class="flex mt-0.5 space-x-2">
|
|
<div class=" flex-1">
|
|
<input
|
|
id="steps-range"
|
|
type="range"
|
|
min="1"
|
|
max="16000"
|
|
step="1"
|
|
bind:value={options.num_ctx}
|
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
<div class="">
|
|
<input
|
|
bind:value={options.num_ctx}
|
|
type="number"
|
|
class=" bg-transparent text-center w-14"
|
|
min="1"
|
|
max="16000"
|
|
step="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|