Settings

{#if !$config || ($config && !$config.auth)} {/if}

{#if selectedTab === 'general'}

Theme

Ollama Server URL

Trouble accessing Ollama? Click here for help.

System Prompt

</div>

<div class="flex justify-end pt-3 text-sm font-medium">
							<button
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
								on:click={() => {
									saveSettings({
										API_BASE_URL: API_BASE_URL === '' ? BUILD_TIME_API_BASE_URL : API_BASE_URL,
										system: system !== '' ? system : undefined
									});
									show = false;
								}}
							>
								Save
							</button>
						</div>
					</div>
				{: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=" self-center text-sm font-medium">Request Mode</div>

<button
										class="p-1 px-3 text-xs flex rounded transition"
										on:click={() => {
											toggleRequestFormat();
										}}
									>
										{#if requestFormat === ''}
											<span class="ml-2 self-center"> Default </span>
										{:else if requestFormat === 'json'}
											
											<span class="ml-2 self-center"> JSON </span>
										{/if}
									</button>
								</div>
							</div>

<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 class="flex justify-end pt-3 text-sm font-medium">
							<button
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
								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
									});
									show = false;
								}}
							>
								Save
							</button>
						</div>
					</div>
				{:else if selectedTab === 'models'}
					<div class="flex flex-col space-y-3 text-sm mb-10">
						<div>
							<div class=" mb-2.5 text-sm font-medium">Pull a model</div>
							<div class="flex w-full">
								<div class="flex-1 mr-2">
									<input
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
										placeholder="Enter model tag (e.g. mistral:7b)"
										bind:value={modelTag}
									/>
								</div>
								<button
									class="px-3 text-gray-100 bg-emerald-600 hover:bg-emerald-700 rounded transition"
									on:click={() => {
										pullModelHandler();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 20 20"
										fill="currentColor"
										class="w-4 h-4"
									>
										<path
											d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z"
										/>
										<path
											d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
										/>
									</svg>
								</button>
							</div>

<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
								To access the available model names for downloading, <a
									class=" text-gray-500 dark:text-gray-300 font-medium"
									href="https://ollama.ai/library"
									target="_blank">click here.</a
								>
							</div>

{#if pullProgress !== null}
								<div class="mt-2">
									<div class=" mb-2 text-xs">Pull Progress</div>
									<div class="w-full rounded-full dark:bg-gray-800">
										<div
											class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
											style="width: {Math.max(15, pullProgress ?? 0)}%"
										>
											{pullProgress ?? 0}%
										</div>
									</div>
									<div class="mt-1 text-xs dark:text-gray-700" style="font-size: 0.5rem;">
										{digest}
									</div>
								</div>
							{/if}
						</div>
						<hr class=" dark:border-gray-700" />

<div>
							<div class=" mb-2.5 text-sm font-medium">Delete a model</div>
							<div class="flex w-full">
								<div class="flex-1 mr-2">
									<input
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
										placeholder="Enter model tag (e.g. mistral:7b)"
										bind:value={deleteModelTag}
									/>
								</div>
								<button
									class="px-3 bg-red-700 hover:bg-red-800 text-gray-100 rounded transition"
									on:click={() => {
										deleteModelHandler();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 20 20"
										fill="currentColor"
										class="w-4 h-4"
									>
										<path
											fill-rule="evenodd"
											d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
											clip-rule="evenodd"
										/>
									</svg>
								</button>
							</div>
						</div>
					</div>
				{:else if selectedTab === 'addons'}
					<form
						class="flex flex-col h-full justify-between space-y-3 text-sm"
						on:submit|preventDefault={() => {
							saveSettings({
								gravatarEmail: gravatarEmail !== '' ? gravatarEmail : undefined,
								gravatarUrl: gravatarEmail !== '' ? getGravatarURL(gravatarEmail) : undefined,
								OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined
							});
							show = false;
						}}
					>
						<div class=" space-y-3">
							<div>
								<div class=" py-1 flex w-full justify-between">
									<div class=" self-center text-sm font-medium">Title Auto Generation</div>

<button
										class="p-1 px-3 text-xs flex rounded transition"
										on:click={() => {
											toggleTitleAutoGenerate();
										}}
										type="button"
									>
										{#if titleAutoGenerate === true}
											<span class="ml-2 self-center">On</span>
										{:else}
											<span class="ml-2 self-center">Off</span>
										{/if}
									</button>
								</div>
							</div>

<div>
								<div class=" py-1 flex w-full justify-between">
									<div class=" self-center text-sm font-medium">Voice Input Auto-Send</div>

<button
										class="p-1 px-3 text-xs flex rounded transition"
										on:click={() => {
											toggleSpeechAutoSend();
										}}
										type="button"
									>
										{#if speechAutoSend === true}
											<span class="ml-2 self-center">On</span>
										{:else}
											<span class="ml-2 self-center">Off</span>
										{/if}
									</button>
								</div>
							</div>

<hr class=" dark:border-gray-700" />
							<div>
								<div class=" mb-2.5 text-sm font-medium">
									Gravatar Email <span class=" text-gray-400 text-sm">(optional)</span>
								</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
											placeholder="Enter Your Email"
											bind:value={gravatarEmail}
											autocomplete="off"
											type="email"
										/>
									</div>
								</div>
								<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
									Changes user profile image to match your <a
										class=" text-gray-500 dark:text-gray-300 font-medium"
										href="https://gravatar.com/"
										target="_blank">Gravatar.</a
									>
								</div>
							</div>

<hr class=" dark:border-gray-700" />
							<div>
								<div class=" mb-2.5 text-sm font-medium">
									OpenAI API Key <span class=" text-gray-400 text-sm">(optional)</span>
								</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
											placeholder="Enter OpenAI API Key"
											bind:value={OPENAI_API_KEY}
											autocomplete="off"
										/>
									</div>
								</div>
								<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
									Adds optional support for 'gpt-*' models available.
								</div>
							</div>
						</div>

<div class="flex justify-end pt-3 text-sm font-medium">
							<button
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
								type="submit"
							>
								Save
							</button>
						</div>
					</form>
				{:else if selectedTab === 'auth'}
					<form
						class="flex flex-col h-full justify-between space-y-3 text-sm"
						on:submit|preventDefault={() => {
							console.log('auth save');
							saveSettings({
								authHeader: authEnabled ? `${authType} ${authContent}` : undefined
							});
							show = false;
						}}
					>
						<div class=" space-y-3">
							<div>
								<div class=" py-1 flex w-full justify-between">
									<div class=" self-center text-sm font-medium">Authorization Header</div>

<button
										class="p-1 px-3 text-xs flex rounded transition"
										type="button"
										on:click={() => {
											toggleAuthHeader();
										}}
									>
										{#if authEnabled === true}
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 24 24"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													fill-rule="evenodd"
													d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z"
													clip-rule="evenodd"
												/>
											</svg>

{#if authEnabled}
								<hr class=" dark:border-gray-700" />

<div class="mt-2">
									<div class=" py-1 flex w-full space-x-2">
										<button
											class=" py-1 font-semibold flex rounded transition"
											on:click={() => {
												authType = authType === 'Basic' ? 'Bearer' : 'Basic';
											}}
											type="button"
										>
											{#if authType === 'Basic'}
												<span class="self-center mr-2">Basic</span>
											{:else if authType === 'Bearer'}
												<span class="self-center mr-2">Bearer</span>
											{/if}
										</button>

<div class="flex-1">
											<input
												class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
												placeholder="Enter Authorization Header Content"
												bind:value={authContent}
											/>
										</div>
									</div>
									<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
										Toggle between <span class=" text-gray-500 dark:text-gray-300 font-medium"
											>'Basic'</span
										>
										and <span class=" text-gray-500 dark:text-gray-300 font-medium">'Bearer'</span> by
										clicking on the label next to the input.
									</div>
								</div>

<div>
									<div class=" mb-2.5 text-sm font-medium">Preview Authorization Header</div>
									<textarea
										value={JSON.stringify({
											Authorization: `${authType} ${authContent}`
										})}
										class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
										rows="2"
										disabled
									/>
								</div>
							{/if}
						</div>

<div class="flex justify-end pt-3 text-sm font-medium">
							<button
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
								type="submit"
							>
								Save
							</button>
						</div>
					</form>
				{:else if selectedTab === 'about'}
					<div class="flex flex-col h-full justify-between space-y-3 text-sm mb-6">
						<div class=" space-y-3">
							<div>
								<div class=" mb-2.5 text-sm font-medium">Ollama Web UI Version</div>
								<div class="flex w-full">
									<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
										{$config && $config.version ? $config.version : WEB_UI_VERSION}
									</div>
								</div>
							</div>

<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
								Created by <a
									class=" text-gray-500 dark:text-gray-300 font-medium"
									href="https://github.com/tjbck"
									target="_blank">Timothy J. Baek</a
								>
							</div>

.tabs::-webkit-scrollbar {
		display: none; /* for Chrome, Safari and Opera */
	}

.tabs {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}

input[type='number'] {
		-moz-appearance: textfield; /* Firefox */
	}
</style>