forked from open-webui/open-webui
		
	Merge pull request #86 from ollama-webui/dev
feat: json request mode support
This commit is contained in:
		
						commit
						27b7118ba7
					
				
					 2 changed files with 154 additions and 12 deletions
				
			
		|  | @ -13,8 +13,16 @@ | ||||||
| 
 | 
 | ||||||
| 	// General | 	// General | ||||||
| 	let API_BASE_URL = BUILD_TIME_API_BASE_URL; | 	let API_BASE_URL = BUILD_TIME_API_BASE_URL; | ||||||
| 	let system = ''; |  | ||||||
| 	let theme = 'dark'; | 	let theme = 'dark'; | ||||||
|  | 	let system = ''; | ||||||
|  | 
 | ||||||
|  | 	// Advanced | ||||||
|  | 	let requestFormat = ''; | ||||||
|  | 	let seed = 0; | ||||||
|  | 	let temperature = 0.8; | ||||||
|  | 	let repeat_penalty = 1.1; | ||||||
|  | 	let top_k = 40; | ||||||
|  | 	let top_p = 0.9; | ||||||
| 
 | 
 | ||||||
| 	// Models | 	// Models | ||||||
| 	let modelTag = ''; | 	let modelTag = ''; | ||||||
|  | @ -22,13 +30,6 @@ | ||||||
| 	let digest = ''; | 	let digest = ''; | ||||||
| 	let pullProgress = null; | 	let pullProgress = null; | ||||||
| 
 | 
 | ||||||
| 	// Advanced |  | ||||||
| 	let seed = 0; |  | ||||||
| 	let temperature = 0.8; |  | ||||||
| 	let repeat_penalty = 1.1; |  | ||||||
| 	let top_k = 40; |  | ||||||
| 	let top_p = 0.9; |  | ||||||
| 
 |  | ||||||
| 	// Addons | 	// Addons | ||||||
| 	let gravatarEmail = ''; | 	let gravatarEmail = ''; | ||||||
| 	let OPENAI_API_KEY = ''; | 	let OPENAI_API_KEY = ''; | ||||||
|  | @ -88,6 +89,16 @@ | ||||||
| 		document.documentElement.classList.add(theme); | 		document.documentElement.classList.add(theme); | ||||||
| 	}; | 	}; | ||||||
| 
 | 
 | ||||||
|  | 	const togglerequestFormat = async () => { | ||||||
|  | 		if (requestFormat === '') { | ||||||
|  | 			requestFormat = 'json'; | ||||||
|  | 		} else { | ||||||
|  | 			requestFormat = ''; | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		saveSettings({ requestFormat: requestFormat !== '' ? requestFormat : undefined }); | ||||||
|  | 	}; | ||||||
|  | 
 | ||||||
| 	const pullModelHandler = async () => { | 	const pullModelHandler = async () => { | ||||||
| 		const res = await fetch(`${API_BASE_URL}/pull`, { | 		const res = await fetch(`${API_BASE_URL}/pull`, { | ||||||
| 			method: 'POST', | 			method: 'POST', | ||||||
|  | @ -200,6 +211,7 @@ | ||||||
| 		API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL; | 		API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL; | ||||||
| 		system = settings.system ?? ''; | 		system = settings.system ?? ''; | ||||||
| 
 | 
 | ||||||
|  | 		requestFormat = settings.requestFormat ?? ''; | ||||||
| 		seed = settings.seed ?? 0; | 		seed = settings.seed ?? 0; | ||||||
| 		temperature = settings.temperature ?? 0.8; | 		temperature = settings.temperature ?? 0.8; | ||||||
| 		repeat_penalty = settings.repeat_penalty ?? 1.1; | 		repeat_penalty = settings.repeat_penalty ?? 1.1; | ||||||
|  | @ -483,9 +495,40 @@ | ||||||
| 					<div class="flex flex-col h-full justify-between space-y-3 text-sm"> | 					<div class="flex flex-col h-full justify-between space-y-3 text-sm"> | ||||||
| 						<div class=" space-y-3"> | 						<div class=" space-y-3"> | ||||||
| 							<div> | 							<div> | ||||||
| 								<div class=" mb-2.5 text-sm font-medium">Seed</div> | 								<div class=" py-1 flex w-full justify-between"> | ||||||
| 								<div class="flex w-full"> | 									<div class=" self-center text-sm font-medium">Request Mode</div> | ||||||
| 									<div class="flex-1"> | 
 | ||||||
|  | 									<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'} | ||||||
|  | 											<!-- <svg | ||||||
|  | 												xmlns="http://www.w3.org/2000/svg" | ||||||
|  | 												viewBox="0 0 20 20" | ||||||
|  | 												fill="currentColor" | ||||||
|  | 												class="w-4 h-4 self-center" | ||||||
|  | 											> | ||||||
|  | 												<path | ||||||
|  | 													d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z" | ||||||
|  | 												/> | ||||||
|  | 											</svg> --> | ||||||
|  | 											<span class="ml-2 self-center"> JSON </span> | ||||||
|  | 										{/if} | ||||||
|  | 									</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 | 										<input | ||||||
| 											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" | 											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" | ||||||
| 											type="number" | 											type="number" | ||||||
|  |  | ||||||
|  | @ -473,6 +473,7 @@ | ||||||
| 					top_k: settings.top_k ?? undefined, | 					top_k: settings.top_k ?? undefined, | ||||||
| 					top_p: settings.top_p ?? undefined | 					top_p: settings.top_p ?? undefined | ||||||
| 				}, | 				}, | ||||||
|  | 				format: settings.requestFormat ?? undefined, | ||||||
| 				context: | 				context: | ||||||
| 					messages.length > 3 && messages.at(-3).context != undefined | 					messages.length > 3 && messages.at(-3).context != undefined | ||||||
| 						? messages.at(-3).context | 						? messages.at(-3).context | ||||||
|  | @ -845,6 +846,104 @@ | ||||||
| 						</button> | 						</button> | ||||||
| 					</div> | 					</div> | ||||||
| 
 | 
 | ||||||
|  | 					<!-- <div class="flex flex-col"> | ||||||
|  | 						{#each selectedModels as selectedModel, selectedModelIdx} | ||||||
|  | 							<div class="flex"> | ||||||
|  | 								<select | ||||||
|  | 									id="models" | ||||||
|  | 									class="outline-none bg-transparent text-lg font-semibold rounded-lg block w-full placeholder-gray-400" | ||||||
|  | 									bind:value={selectedModel} | ||||||
|  | 									disabled={messages.length != 0} | ||||||
|  | 								> | ||||||
|  | 									<option value="" selected>Select a model</option> | ||||||
|  | 
 | ||||||
|  | 									{#each models as model} | ||||||
|  | 										{#if model.name === 'hr'} | ||||||
|  | 											<hr /> | ||||||
|  | 										{:else} | ||||||
|  | 											<option value={model.name} class=" text-lg">{model.name}</option> | ||||||
|  | 										{/if} | ||||||
|  | 									{/each} | ||||||
|  | 								</select> | ||||||
|  | 
 | ||||||
|  | 								{#if selectedModelIdx === selectedModels.length - 1} | ||||||
|  | 									<button | ||||||
|  | 										class="  self-center {selectedModelIdx === 0 | ||||||
|  | 											? 'mr-3' | ||||||
|  | 											: 'mr-7'} disabled:text-gray-600 disabled:hover:text-gray-600" | ||||||
|  | 										disabled={selectedModels.length === 3} | ||||||
|  | 										on:click={() => { | ||||||
|  | 											if (selectedModels.length < 3) { | ||||||
|  | 												selectedModels = ['', ...selectedModels]; | ||||||
|  | 											} | ||||||
|  | 										}} | ||||||
|  | 									> | ||||||
|  | 										<svg | ||||||
|  | 											xmlns="http://www.w3.org/2000/svg" | ||||||
|  | 											fill="none" | ||||||
|  | 											viewBox="0 0 24 24" | ||||||
|  | 											stroke-width="1.5" | ||||||
|  | 											stroke="currentColor" | ||||||
|  | 											class="w-4 h-4" | ||||||
|  | 										> | ||||||
|  | 											<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" /> | ||||||
|  | 										</svg> | ||||||
|  | 									</button> | ||||||
|  | 								{:else} | ||||||
|  | 									<button | ||||||
|  | 										class="  self-center dark:hover:text-gray-300 {selectedModelIdx === 0 | ||||||
|  | 											? 'mr-3' | ||||||
|  | 											: 'mr-7'}" | ||||||
|  | 										on:click={() => { | ||||||
|  | 											selectedModels.splice(selectedModelIdx, 1); | ||||||
|  | 											selectedModels = selectedModels; | ||||||
|  | 										}} | ||||||
|  | 									> | ||||||
|  | 										<svg | ||||||
|  | 											xmlns="http://www.w3.org/2000/svg" | ||||||
|  | 											fill="none" | ||||||
|  | 											viewBox="0 0 24 24" | ||||||
|  | 											stroke-width="1.5" | ||||||
|  | 											stroke="currentColor" | ||||||
|  | 											class="w-4 h-4" | ||||||
|  | 										> | ||||||
|  | 											<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" /> | ||||||
|  | 										</svg> | ||||||
|  | 									</button> | ||||||
|  | 								{/if} | ||||||
|  | 
 | ||||||
|  | 								{#if selectedModelIdx === 0} | ||||||
|  | 									<button | ||||||
|  | 										class=" self-center dark:hover:text-gray-300" | ||||||
|  | 										on:click={() => { | ||||||
|  | 											openSettings(); | ||||||
|  | 										}} | ||||||
|  | 									> | ||||||
|  | 										<svg | ||||||
|  | 											xmlns="http://www.w3.org/2000/svg" | ||||||
|  | 											fill="none" | ||||||
|  | 											viewBox="0 0 24 24" | ||||||
|  | 											stroke-width="1.5" | ||||||
|  | 											stroke="currentColor" | ||||||
|  | 											class="w-4 h-4" | ||||||
|  | 										> | ||||||
|  | 											<path | ||||||
|  | 												stroke-linecap="round" | ||||||
|  | 												stroke-linejoin="round" | ||||||
|  | 												d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" | ||||||
|  | 											/> | ||||||
|  | 											<path | ||||||
|  | 												stroke-linecap="round" | ||||||
|  | 												stroke-linejoin="round" | ||||||
|  | 												d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" | ||||||
|  | 											/> | ||||||
|  | 										</svg> | ||||||
|  | 									</button> | ||||||
|  | 								{/if} | ||||||
|  | 							</div> | ||||||
|  | 						{/each} | ||||||
|  | 					</div> --> | ||||||
|  | 
 | ||||||
| 					<div class="text-left mt-1.5 text-xs text-gray-500"> | 					<div class="text-left mt-1.5 text-xs text-gray-500"> | ||||||
| 						<button on:click={saveDefaultModel}> Set as default</button> | 						<button on:click={saveDefaultModel}> Set as default</button> | ||||||
| 					</div> | 					</div> | ||||||
|  | @ -1123,7 +1222,7 @@ | ||||||
| 										<button | 										<button | ||||||
| 											class="{prompt !== '' | 											class="{prompt !== '' | ||||||
| 												? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 ' | 												? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 ' | ||||||
| 												: 'text-white bg-gray-100 dark:text-gray-400 dark:bg-gray-600 disabled'} transition rounded-lg p-1.5" | 												: 'text-white bg-gray-100 dark:text-gray-800 dark:bg-gray-600 disabled'} transition rounded-lg p-1.5" | ||||||
| 											type="submit" | 											type="submit" | ||||||
| 											disabled={prompt === ''} | 											disabled={prompt === ''} | ||||||
| 										> | 										> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Timothy Jaeryang Baek
						Timothy Jaeryang Baek