feat: import modelfiles

src/routes/(app)/modelfiles/+page.svelte

@@ -15,6 +15,7 @@
 	} from '$lib/apis/modelfiles';
 
 	let localModelfiles = [];
+	let importFiles;
 
 	const deleteModelHandler = async (tagName) => {
 		let success = null;
@@ -199,78 +200,133 @@
 				</div>
 			{/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=" self-center text-sm font-medium">
-						{localModelfiles.length} Local Modelfiles Detected
-					</div>
+			<div class=" flex justify-between w-full mb-3">
+				<div class="flex space-x-1">
+					<input
+						id="modelfiles-import-input"
+						bind:files={importFiles}
+						type="file"
+						accept=".json"
+						hidden
+						on:change={() => {
+							console.log(importFiles);
 
-					<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) {
+							let reader = new FileReader();
+							reader.onload = async (event) => {
+								let savedModelfiles = JSON.parse(event.target.result);
+								console.log(savedModelfiles);
+
+								for (const modelfile of savedModelfiles) {
 									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);
+							reader.readAsText(importFiles[0]);
+						}}
+					/>
 
-								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>
+					<button
+						class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
+						on:click={async () => {
+							document.getElementById('modelfiles-import-input')?.click();
+						}}
+					>
+						<div class=" self-center mr-2 font-medium">Import Modelfiles</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="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"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</div>
+					</button>
 				</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=" text-2xl font-semibold mb-6">Made by OllamaHub Community</div>