forked from open-webui/open-webui
		
	feat: advanced settings refac
This commit is contained in:
		
							parent
							
								
									ffe18bcd6b
								
							
						
					
					
						commit
						a4712989db
					
				
					 1 changed files with 243 additions and 124 deletions
				
			
		| 
						 | 
				
			
			@ -26,11 +26,11 @@
 | 
			
		|||
	// Advanced
 | 
			
		||||
	let requestFormat = '';
 | 
			
		||||
	let seed = 0;
 | 
			
		||||
	let temperature = 0.8;
 | 
			
		||||
	let repeat_penalty = 1.1;
 | 
			
		||||
	let top_k = 40;
 | 
			
		||||
	let top_p = 0.9;
 | 
			
		||||
	let num_ctx = 2048;
 | 
			
		||||
	let temperature = '';
 | 
			
		||||
	let repeat_penalty = '';
 | 
			
		||||
	let top_k = '';
 | 
			
		||||
	let top_p = '';
 | 
			
		||||
	let num_ctx = '';
 | 
			
		||||
 | 
			
		||||
	// Models
 | 
			
		||||
	let modelTag = '';
 | 
			
		||||
| 
						 | 
				
			
			@ -228,11 +228,11 @@
 | 
			
		|||
 | 
			
		||||
		requestFormat = settings.requestFormat ?? '';
 | 
			
		||||
		seed = settings.seed ?? 0;
 | 
			
		||||
		temperature = settings.temperature ?? 0.8;
 | 
			
		||||
		repeat_penalty = settings.repeat_penalty ?? 1.1;
 | 
			
		||||
		top_k = settings.top_k ?? 40;
 | 
			
		||||
		top_p = settings.top_p ?? 0.9;
 | 
			
		||||
		num_ctx = settings.num_ctx ?? 2048;
 | 
			
		||||
		temperature = settings.temperature ?? '';
 | 
			
		||||
		repeat_penalty = settings.repeat_penalty ?? '';
 | 
			
		||||
		top_k = settings.top_k ?? '';
 | 
			
		||||
		top_p = settings.top_p ?? '';
 | 
			
		||||
		num_ctx = settings.num_ctx ?? '';
 | 
			
		||||
 | 
			
		||||
		titleAutoGenerate = settings.titleAutoGenerate ?? true;
 | 
			
		||||
		speechAutoSend = settings.speechAutoSend ?? false;
 | 
			
		||||
| 
						 | 
				
			
			@ -614,6 +614,234 @@
 | 
			
		|||
				{:else if selectedTab === 'advanced'}
 | 
			
		||||
					<div class="flex flex-col h-full justify-between space-y-3 text-sm">
 | 
			
		||||
						<div class=" space-y-3">
 | 
			
		||||
							<div>
 | 
			
		||||
								<div class=" py-1 flex w-full justify-between">
 | 
			
		||||
									<div class=" w-20 text-sm font-medium self-center">Seed</div>
 | 
			
		||||
									<div class=" flex-1 self-center">
 | 
			
		||||
										<input
 | 
			
		||||
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
 | 
			
		||||
											type="number"
 | 
			
		||||
											placeholder="Enter Seed"
 | 
			
		||||
											bind:value={seed}
 | 
			
		||||
											autocomplete="off"
 | 
			
		||||
											min="0"
 | 
			
		||||
										/>
 | 
			
		||||
									</div>
 | 
			
		||||
								</div>
 | 
			
		||||
							</div>
 | 
			
		||||
 | 
			
		||||
							<div class=" py-0.5 w-full justify-between">
 | 
			
		||||
								<div class="flex w-full justify-between">
 | 
			
		||||
									<div class=" self-center text-sm font-medium">Temperature</div>
 | 
			
		||||
 | 
			
		||||
									<button
 | 
			
		||||
										class="p-1 px-3 text-xs flex rounded transition"
 | 
			
		||||
										on:click={() => {
 | 
			
		||||
											temperature = temperature === '' ? 0.8 : '';
 | 
			
		||||
										}}
 | 
			
		||||
									>
 | 
			
		||||
										{#if temperature === ''}
 | 
			
		||||
											<span class="ml-2 self-center"> Default </span>
 | 
			
		||||
										{:else}
 | 
			
		||||
											<span class="ml-2 self-center"> Custom </span>
 | 
			
		||||
										{/if}
 | 
			
		||||
									</button>
 | 
			
		||||
								</div>
 | 
			
		||||
 | 
			
		||||
								{#if temperature !== ''}
 | 
			
		||||
									<div class="flex mt-0.5 space-x-2">
 | 
			
		||||
										<div class=" flex-1">
 | 
			
		||||
											<input
 | 
			
		||||
												id="steps-range"
 | 
			
		||||
												type="range"
 | 
			
		||||
												min="0"
 | 
			
		||||
												max="1"
 | 
			
		||||
												bind:value={temperature}
 | 
			
		||||
												step="0.05"
 | 
			
		||||
												class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
											/>
 | 
			
		||||
										</div>
 | 
			
		||||
										<div>
 | 
			
		||||
											<input
 | 
			
		||||
												bind:value={temperature}
 | 
			
		||||
												type="number"
 | 
			
		||||
												class=" bg-transparent text-center w-10"
 | 
			
		||||
											/>
 | 
			
		||||
										</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-sm font-medium">Repeat Penalty</div>
 | 
			
		||||
 | 
			
		||||
									<button
 | 
			
		||||
										class="p-1 px-3 text-xs flex rounded transition"
 | 
			
		||||
										on:click={() => {
 | 
			
		||||
											repeat_penalty = repeat_penalty === '' ? 1.1 : '';
 | 
			
		||||
										}}
 | 
			
		||||
									>
 | 
			
		||||
										{#if repeat_penalty === ''}
 | 
			
		||||
											<span class="ml-2 self-center"> Default </span>
 | 
			
		||||
										{:else}
 | 
			
		||||
											<span class="ml-2 self-center"> Custom </span>
 | 
			
		||||
										{/if}
 | 
			
		||||
									</button>
 | 
			
		||||
								</div>
 | 
			
		||||
 | 
			
		||||
								{#if 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"
 | 
			
		||||
												bind:value={repeat_penalty}
 | 
			
		||||
												step="0.05"
 | 
			
		||||
												class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
											/>
 | 
			
		||||
										</div>
 | 
			
		||||
										<div>
 | 
			
		||||
											<input
 | 
			
		||||
												bind:value={repeat_penalty}
 | 
			
		||||
												type="number"
 | 
			
		||||
												class=" bg-transparent text-center w-10"
 | 
			
		||||
											/>
 | 
			
		||||
										</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-sm font-medium">Top K</div>
 | 
			
		||||
 | 
			
		||||
									<button
 | 
			
		||||
										class="p-1 px-3 text-xs flex rounded transition"
 | 
			
		||||
										on:click={() => {
 | 
			
		||||
											top_k = top_k === '' ? 40 : '';
 | 
			
		||||
										}}
 | 
			
		||||
									>
 | 
			
		||||
										{#if top_k === ''}
 | 
			
		||||
											<span class="ml-2 self-center"> Default </span>
 | 
			
		||||
										{:else}
 | 
			
		||||
											<span class="ml-2 self-center"> Custom </span>
 | 
			
		||||
										{/if}
 | 
			
		||||
									</button>
 | 
			
		||||
								</div>
 | 
			
		||||
 | 
			
		||||
								{#if 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"
 | 
			
		||||
												bind:value={top_k}
 | 
			
		||||
												step="0.5"
 | 
			
		||||
												class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
											/>
 | 
			
		||||
										</div>
 | 
			
		||||
										<div>
 | 
			
		||||
											<input
 | 
			
		||||
												bind:value={top_k}
 | 
			
		||||
												type="number"
 | 
			
		||||
												class=" bg-transparent text-center w-10"
 | 
			
		||||
											/>
 | 
			
		||||
										</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-sm font-medium">Top P</div>
 | 
			
		||||
 | 
			
		||||
									<button
 | 
			
		||||
										class="p-1 px-3 text-xs flex rounded transition"
 | 
			
		||||
										on:click={() => {
 | 
			
		||||
											top_p = top_p === '' ? 0.9 : '';
 | 
			
		||||
										}}
 | 
			
		||||
									>
 | 
			
		||||
										{#if top_p === ''}
 | 
			
		||||
											<span class="ml-2 self-center"> Default </span>
 | 
			
		||||
										{:else}
 | 
			
		||||
											<span class="ml-2 self-center"> Custom </span>
 | 
			
		||||
										{/if}
 | 
			
		||||
									</button>
 | 
			
		||||
								</div>
 | 
			
		||||
 | 
			
		||||
								{#if 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"
 | 
			
		||||
												bind:value={top_p}
 | 
			
		||||
												step="0.05"
 | 
			
		||||
												class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
											/>
 | 
			
		||||
										</div>
 | 
			
		||||
										<div>
 | 
			
		||||
											<input
 | 
			
		||||
												bind:value={top_p}
 | 
			
		||||
												type="number"
 | 
			
		||||
												class=" bg-transparent text-center w-10"
 | 
			
		||||
											/>
 | 
			
		||||
										</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-sm font-medium">Context Length</div>
 | 
			
		||||
 | 
			
		||||
									<button
 | 
			
		||||
										class="p-1 px-3 text-xs flex rounded transition"
 | 
			
		||||
										on:click={() => {
 | 
			
		||||
											num_ctx = num_ctx === '' ? 2048 : '';
 | 
			
		||||
										}}
 | 
			
		||||
									>
 | 
			
		||||
										{#if num_ctx === ''}
 | 
			
		||||
											<span class="ml-2 self-center"> Default </span>
 | 
			
		||||
										{:else}
 | 
			
		||||
											<span class="ml-2 self-center"> Custom </span>
 | 
			
		||||
										{/if}
 | 
			
		||||
									</button>
 | 
			
		||||
								</div>
 | 
			
		||||
 | 
			
		||||
								{#if 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"
 | 
			
		||||
												bind:value={num_ctx}
 | 
			
		||||
												step="1"
 | 
			
		||||
												class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
											/>
 | 
			
		||||
										</div>
 | 
			
		||||
										<div>
 | 
			
		||||
											<input
 | 
			
		||||
												bind:value={num_ctx}
 | 
			
		||||
												type="number"
 | 
			
		||||
												class=" bg-transparent text-center w-10"
 | 
			
		||||
											/>
 | 
			
		||||
										</div>
 | 
			
		||||
									</div>
 | 
			
		||||
								{/if}
 | 
			
		||||
							</div>
 | 
			
		||||
 | 
			
		||||
							<hr class=" dark:border-gray-700" />
 | 
			
		||||
 | 
			
		||||
							<div>
 | 
			
		||||
								<div class=" py-1 flex w-full justify-between">
 | 
			
		||||
									<div class=" self-center text-sm font-medium">Request Mode</div>
 | 
			
		||||
| 
						 | 
				
			
			@ -642,115 +870,6 @@
 | 
			
		|||
									</button>
 | 
			
		||||
								</div>
 | 
			
		||||
							</div>
 | 
			
		||||
 | 
			
		||||
							<hr class=" dark:border-gray-700" />
 | 
			
		||||
 | 
			
		||||
							<div>
 | 
			
		||||
								<div class=" py-1 flex w-full justify-between">
 | 
			
		||||
									<div class=" w-20 text-sm font-medium self-center">Seed</div>
 | 
			
		||||
									<div class=" flex-1 self-center">
 | 
			
		||||
										<input
 | 
			
		||||
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
 | 
			
		||||
											type="number"
 | 
			
		||||
											placeholder="Enter Seed"
 | 
			
		||||
											bind:value={seed}
 | 
			
		||||
											autocomplete="off"
 | 
			
		||||
											min="0"
 | 
			
		||||
										/>
 | 
			
		||||
									</div>
 | 
			
		||||
								</div>
 | 
			
		||||
							</div>
 | 
			
		||||
 | 
			
		||||
							<hr class=" dark:border-gray-700" />
 | 
			
		||||
 | 
			
		||||
							<div>
 | 
			
		||||
								<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
 | 
			
		||||
									<div>Temperature</div>
 | 
			
		||||
									<div>
 | 
			
		||||
										{temperature}
 | 
			
		||||
									</div></label
 | 
			
		||||
								>
 | 
			
		||||
								<input
 | 
			
		||||
									id="steps-range"
 | 
			
		||||
									type="range"
 | 
			
		||||
									min="0"
 | 
			
		||||
									max="1"
 | 
			
		||||
									bind:value={temperature}
 | 
			
		||||
									step="0.05"
 | 
			
		||||
									class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
								/>
 | 
			
		||||
							</div>
 | 
			
		||||
 | 
			
		||||
							<div>
 | 
			
		||||
								<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
 | 
			
		||||
									<div>Repeat Penalty</div>
 | 
			
		||||
									<div>
 | 
			
		||||
										{repeat_penalty}
 | 
			
		||||
									</div></label
 | 
			
		||||
								>
 | 
			
		||||
								<input
 | 
			
		||||
									id="steps-range"
 | 
			
		||||
									type="range"
 | 
			
		||||
									min="0"
 | 
			
		||||
									max="2"
 | 
			
		||||
									bind:value={repeat_penalty}
 | 
			
		||||
									step="0.05"
 | 
			
		||||
									class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
								/>
 | 
			
		||||
							</div>
 | 
			
		||||
 | 
			
		||||
							<div>
 | 
			
		||||
								<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
 | 
			
		||||
									<div>Top K</div>
 | 
			
		||||
									<div>
 | 
			
		||||
										{top_k}
 | 
			
		||||
									</div></label
 | 
			
		||||
								>
 | 
			
		||||
								<input
 | 
			
		||||
									id="steps-range"
 | 
			
		||||
									type="range"
 | 
			
		||||
									min="0"
 | 
			
		||||
									max="100"
 | 
			
		||||
									bind:value={top_k}
 | 
			
		||||
									step="0.5"
 | 
			
		||||
									class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
								/>
 | 
			
		||||
							</div>
 | 
			
		||||
 | 
			
		||||
							<div>
 | 
			
		||||
								<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
 | 
			
		||||
									<div>Top P</div>
 | 
			
		||||
									<div>
 | 
			
		||||
										{top_p}
 | 
			
		||||
									</div></label
 | 
			
		||||
								>
 | 
			
		||||
								<input
 | 
			
		||||
									id="steps-range"
 | 
			
		||||
									type="range"
 | 
			
		||||
									min="0"
 | 
			
		||||
									max="1"
 | 
			
		||||
									bind:value={top_p}
 | 
			
		||||
									step="0.05"
 | 
			
		||||
									class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
								/>
 | 
			
		||||
							</div>
 | 
			
		||||
							<div>
 | 
			
		||||
								<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
 | 
			
		||||
									<div>Context Length</div>
 | 
			
		||||
									<div>
 | 
			
		||||
										{num_ctx}
 | 
			
		||||
									</div></label
 | 
			
		||||
								>
 | 
			
		||||
								<input
 | 
			
		||||
									id="steps-range"
 | 
			
		||||
									type="range"
 | 
			
		||||
									min="1"
 | 
			
		||||
									max="16000"
 | 
			
		||||
									bind:value={num_ctx}
 | 
			
		||||
									step="1"
 | 
			
		||||
									class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
 | 
			
		||||
								/>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="flex justify-end pt-3 text-sm font-medium">
 | 
			
		||||
							<button
 | 
			
		||||
| 
						 | 
				
			
			@ -758,11 +877,11 @@
 | 
			
		|||
								on:click={() => {
 | 
			
		||||
									saveSettings({
 | 
			
		||||
										seed: (seed !== 0 ? seed : undefined) ?? undefined,
 | 
			
		||||
										temperature: temperature !== 0.8 ? temperature : undefined,
 | 
			
		||||
										repeat_penalty: repeat_penalty !== 1.1 ? repeat_penalty : undefined,
 | 
			
		||||
										top_k: top_k !== 40 ? top_k : undefined,
 | 
			
		||||
										top_p: top_p !== 0.9 ? top_p : undefined,
 | 
			
		||||
										num_ctx: num_ctx !== 2048 ? num_ctx : undefined
 | 
			
		||||
										temperature: temperature !== '' ? temperature : undefined,
 | 
			
		||||
										repeat_penalty: repeat_penalty !== '' ? repeat_penalty : undefined,
 | 
			
		||||
										top_k: top_k !== '' ? top_k : undefined,
 | 
			
		||||
										top_p: top_p !== '' ? top_p : undefined,
 | 
			
		||||
										num_ctx: num_ctx !== '' ? num_ctx : undefined
 | 
			
		||||
									});
 | 
			
		||||
									show = false;
 | 
			
		||||
								}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue