src/lib/components/chat/Settings/Models.svelte

@@ -52,15 +52,17 @@
 				// Remove the downloaded model
 				delete modelDownloadStatus[modelName];
 
-				console.log(data);
+				modelDownloadStatus = {...modelDownloadStatus}
+
+				console.log('Cleaned:',modelDownloadStatus);
 
 				if (!data.success) {
 					toast.error(data.error);
 				} else {
-					toast.success(`Model '${modelName}' has been successfully downloaded.`);
+					toast.success(`Model '${sanitizedModelTag}' has been successfully downloaded.`);
 
 					const notification = new Notification(WEBUI_NAME, {
-						body: `Model '${modelName}' has been successfully downloaded.`,
+						body: `Model '${sanitizedModelTag}' has been successfully downloaded.`,
 						icon: '/favicon.png'
 					});
 
@@ -266,6 +268,7 @@
 										downloadProgress = 100;
 									}
 									modelDownloadStatus[opts.modelName] = {
+										reader,
 										pullProgress: downloadProgress,
 										digest: data.digest
 									};
@@ -286,6 +289,15 @@
 			opts.callback({ success: true, modelName: opts.modelName });
 		}
 	};
+	const deleteModelPull = async(model: string) => {
+		const {reader} = modelDownloadStatus[model];
+		if(reader){
+			await reader.cancel();
+			toast.success(`${model} download has been canceled`);
+			delete modelDownloadStatus[model];
+		}
+		
+	}
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
@@ -364,12 +376,36 @@
 					<div class="flex flex-col">
 						<div class="font-medium mb-1">{model}</div>
 						<div class="">
+							<div class="flex flex-row space-x-4">
 								<div
 								class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
 								style="width: {Math.max(15, modelDownloadStatus[model].pullProgress ?? 0)}%"
 							>
 								{modelDownloadStatus[model].pullProgress ?? 0}%
+								
 							</div>
+							
+							<button
+					class="px-3 bg-red-700 hover:bg-red-800 text-gray-100 rounded transition"
+					on:click={() => {
+						deleteModelPull(model);
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="w-4 h-4"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</button>
+							</div>
+							
 							<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
 								{modelDownloadStatus[model].digest}
 							</div>