forked from open-webui/open-webui
		
	Merge pull request #298 from ollama-webui/import-modelfiles
feat: import modelfiles
This commit is contained in:
		
						commit
						657318ae9b
					
				
					 1 changed files with 116 additions and 60 deletions
				
			
		|  | @ -15,6 +15,7 @@ | ||||||
| 	} from '$lib/apis/modelfiles'; | 	} from '$lib/apis/modelfiles'; | ||||||
| 
 | 
 | ||||||
| 	let localModelfiles = []; | 	let localModelfiles = []; | ||||||
|  | 	let importFiles; | ||||||
| 
 | 
 | ||||||
| 	const deleteModelHandler = async (tagName) => { | 	const deleteModelHandler = async (tagName) => { | ||||||
| 		let success = null; | 		let success = null; | ||||||
|  | @ -199,78 +200,133 @@ | ||||||
| 				</div> | 				</div> | ||||||
| 			{/each} | 			{/each} | ||||||
| 
 | 
 | ||||||
| 			{#if localModelfiles.length > 0} | 			<hr class=" dark:border-gray-700 my-2.5" /> | ||||||
| 				<hr class=" dark:border-gray-700 my-2.5" /> |  | ||||||
| 
 | 
 | ||||||
| 				<div class=" flex justify-end space-x-4 w-full mb-3"> | 			<div class=" flex justify-between w-full mb-3"> | ||||||
| 					<div class=" self-center text-sm font-medium"> | 				<div class="flex space-x-1"> | ||||||
| 						{localModelfiles.length} Local Modelfiles Detected | 					<input | ||||||
| 					</div> | 						id="modelfiles-import-input" | ||||||
|  | 						bind:files={importFiles} | ||||||
|  | 						type="file" | ||||||
|  | 						accept=".json" | ||||||
|  | 						hidden | ||||||
|  | 						on:change={() => { | ||||||
|  | 							console.log(importFiles); | ||||||
| 
 | 
 | ||||||
| 					<div class="flex space-x-1"> | 							let reader = new FileReader(); | ||||||
| 						<button | 							reader.onload = async (event) => { | ||||||
| 							class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex" | 								let savedModelfiles = JSON.parse(event.target.result); | ||||||
| 							on:click={async () => { | 								console.log(savedModelfiles); | ||||||
| 								for (const modelfile of localModelfiles) { | 
 | ||||||
|  | 								for (const modelfile of savedModelfiles) { | ||||||
| 									await createNewModelfile(localStorage.token, modelfile).catch((error) => { | 									await createNewModelfile(localStorage.token, modelfile).catch((error) => { | ||||||
| 										return null; | 										return null; | ||||||
| 									}); | 									}); | ||||||
| 								} | 								} | ||||||
| 
 | 
 | ||||||
| 								saveModelfiles(localModelfiles); |  | ||||||
| 								localStorage.removeItem('modelfiles'); |  | ||||||
| 								localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]'); |  | ||||||
| 								await modelfiles.set(await getModelfiles(localStorage.token)); | 								await modelfiles.set(await getModelfiles(localStorage.token)); | ||||||
| 							}} | 							}; | ||||||
| 						> |  | ||||||
| 							<div class=" self-center mr-2 font-medium">Sync All</div> |  | ||||||
| 
 | 
 | ||||||
| 							<div class=" self-center"> | 							reader.readAsText(importFiles[0]); | ||||||
| 								<svg | 						}} | ||||||
| 									xmlns="http://www.w3.org/2000/svg" | 					/> | ||||||
| 									viewBox="0 0 16 16" |  | ||||||
| 									fill="currentColor" |  | ||||||
| 									class="w-3.5 h-3.5" |  | ||||||
| 								> |  | ||||||
| 									<path |  | ||||||
| 										fill-rule="evenodd" |  | ||||||
| 										d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z" |  | ||||||
| 										clip-rule="evenodd" |  | ||||||
| 									/> |  | ||||||
| 								</svg> |  | ||||||
| 							</div> |  | ||||||
| 						</button> |  | ||||||
| 
 | 
 | ||||||
| 						<button | 					<button | ||||||
| 							class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex" | 						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex" | ||||||
| 							on:click={async () => { | 						on:click={async () => { | ||||||
| 								saveModelfiles(localModelfiles); | 							document.getElementById('modelfiles-import-input')?.click(); | ||||||
|  | 						}} | ||||||
|  | 					> | ||||||
|  | 						<div class=" self-center mr-2 font-medium">Import Modelfiles</div> | ||||||
| 
 | 
 | ||||||
| 								localStorage.removeItem('modelfiles'); | 						<div class=" self-center"> | ||||||
| 								localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]'); | 							<svg | ||||||
| 								await modelfiles.set(await getModelfiles(localStorage.token)); | 								xmlns="http://www.w3.org/2000/svg" | ||||||
| 							}} | 								viewBox="0 0 16 16" | ||||||
| 						> | 								fill="currentColor" | ||||||
| 							<div class=" self-center"> | 								class="w-3.5 h-3.5" | ||||||
| 								<svg | 							> | ||||||
| 									xmlns="http://www.w3.org/2000/svg" | 								<path | ||||||
| 									fill="none" | 									fill-rule="evenodd" | ||||||
| 									viewBox="0 0 24 24" | 									d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z" | ||||||
| 									stroke-width="1.5" | 									clip-rule="evenodd" | ||||||
| 									stroke="currentColor" | 								/> | ||||||
| 									class="w-4 h-4" | 							</svg> | ||||||
| 								> | 						</div> | ||||||
| 									<path | 					</button> | ||||||
| 										stroke-linecap="round" |  | ||||||
| 										stroke-linejoin="round" |  | ||||||
| 										d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" |  | ||||||
| 									/> |  | ||||||
| 								</svg> |  | ||||||
| 							</div> |  | ||||||
| 						</button> |  | ||||||
| 					</div> |  | ||||||
| 				</div> | 				</div> | ||||||
| 			{/if} | 
 | ||||||
|  | 				{#if localModelfiles.length > 0} | ||||||
|  | 					<div class="flex"> | ||||||
|  | 						<div class=" self-center text-sm font-medium mr-4"> | ||||||
|  | 							{localModelfiles.length} Local Modelfiles Detected | ||||||
|  | 						</div> | ||||||
|  | 
 | ||||||
|  | 						<div class="flex space-x-1"> | ||||||
|  | 							<button | ||||||
|  | 								class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex" | ||||||
|  | 								on:click={async () => { | ||||||
|  | 									for (const modelfile of localModelfiles) { | ||||||
|  | 										await createNewModelfile(localStorage.token, modelfile).catch((error) => { | ||||||
|  | 											return null; | ||||||
|  | 										}); | ||||||
|  | 									} | ||||||
|  | 
 | ||||||
|  | 									saveModelfiles(localModelfiles); | ||||||
|  | 									localStorage.removeItem('modelfiles'); | ||||||
|  | 									localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]'); | ||||||
|  | 									await modelfiles.set(await getModelfiles(localStorage.token)); | ||||||
|  | 								}} | ||||||
|  | 							> | ||||||
|  | 								<div class=" self-center mr-2 font-medium">Sync All</div> | ||||||
|  | 
 | ||||||
|  | 								<div class=" self-center"> | ||||||
|  | 									<svg | ||||||
|  | 										xmlns="http://www.w3.org/2000/svg" | ||||||
|  | 										viewBox="0 0 16 16" | ||||||
|  | 										fill="currentColor" | ||||||
|  | 										class="w-3.5 h-3.5" | ||||||
|  | 									> | ||||||
|  | 										<path | ||||||
|  | 											fill-rule="evenodd" | ||||||
|  | 											d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z" | ||||||
|  | 											clip-rule="evenodd" | ||||||
|  | 										/> | ||||||
|  | 									</svg> | ||||||
|  | 								</div> | ||||||
|  | 							</button> | ||||||
|  | 
 | ||||||
|  | 							<button | ||||||
|  | 								class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex" | ||||||
|  | 								on:click={async () => { | ||||||
|  | 									saveModelfiles(localModelfiles); | ||||||
|  | 
 | ||||||
|  | 									localStorage.removeItem('modelfiles'); | ||||||
|  | 									localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]'); | ||||||
|  | 									await modelfiles.set(await getModelfiles(localStorage.token)); | ||||||
|  | 								}} | ||||||
|  | 							> | ||||||
|  | 								<div class=" self-center"> | ||||||
|  | 									<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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" | ||||||
|  | 										/> | ||||||
|  | 									</svg> | ||||||
|  | 								</div> | ||||||
|  | 							</button> | ||||||
|  | 						</div> | ||||||
|  | 					</div> | ||||||
|  | 				{/if} | ||||||
|  | 			</div> | ||||||
| 
 | 
 | ||||||
| 			<div class=" my-16"> | 			<div class=" my-16"> | ||||||
| 				<div class=" text-2xl font-semibold mb-6">Made by OllamaHub Community</div> | 				<div class=" text-2xl font-semibold mb-6">Made by OllamaHub Community</div> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Timothy Jaeryang Baek
						Timothy Jaeryang Baek