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,11 +200,65 @@
 				</div>
 			{/each}
 
-			{#if localModelfiles.length > 0}
 			<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">
+					<input
+						id="modelfiles-import-input"
+						bind:files={importFiles}
+						type="file"
+						accept=".json"
+						hidden
+						on:change={() => {
+							console.log(importFiles);
+
+							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;
+									});
+								}
+
+								await modelfiles.set(await getModelfiles(localStorage.token));
+							};
+
+							reader.readAsText(importFiles[0]);
+						}}
+					/>
+
+					<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 localModelfiles.length > 0}
+					<div class="flex">
+						<div class=" self-center text-sm font-medium mr-4">
 							{localModelfiles.length} Local Modelfiles Detected
 						</div>
 
@@ -271,6 +326,7 @@
 						</div>
 					</div>
 				{/if}
+			</div>
 
 			<div class=" my-16">
 				<div class=" text-2xl font-semibold mb-6">Made by OllamaHub Community</div>