Merge pull request #16863 from silentoplayz/ollama-cancel-and-toast-cleanup

feat: improve Ollama model management modal

src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte

@@ -36,6 +36,8 @@
 
 	let updateModelId = null;
 	let updateProgress = null;
+	let updateModelsControllers = {};
+	let updateCancelled = false;
 	let showExperimentalOllama = false;
 
 	const MAX_PARALLEL_DOWNLOADS = 3;
@@ -65,17 +67,31 @@
 	let deleteModelTag = '';
 
 	const updateModelsHandler = async () => {
+		updateCancelled = false;
+		toast.info('Checking for model updates...');
+
 		for (const model of ollamaModels) {
+			if (updateCancelled) {
+				break;
+			}
+
 			console.debug(model);
 
 			updateModelId = model.id;
 			const [res, controller] = await pullModel(localStorage.token, model.id, urlIdx).catch(
 				(error) => {
+					if (error.name !== 'AbortError') {
 						toast.error(`${error}`);
-					return null;
+					}
+					return [null, null];
 				}
 			);
 
+			updateModelsControllers = {
+				...updateModelsControllers,
+				[model.id]: controller
+			};
+
 			if (res) {
 				const reader = res.body
 					.pipeThrough(new TextDecoderStream())
@@ -108,19 +124,28 @@
 										} else {
 											updateProgress = 100;
 										}
-									} else {
-										toast.success(data.status);
 									}
 								}
 							}
 						}
 					} catch (err) {
+						if (err.name !== 'AbortError') {
 							console.error(err);
 						}
+						break;
 					}
 				}
 			}
 
+			delete updateModelsControllers[model.id];
+			updateModelsControllers = { ...updateModelsControllers };
+		}
+
+		if (updateCancelled) {
+			toast.info('Model update cancelled');
+		} else {
+			toast.success('All models are up to date');
+		}
 		updateModelId = null;
 		updateProgress = null;
 	};
@@ -143,10 +168,13 @@
 			return;
 		}
 
+		modelTransferring = true;
 		const [res, controller] = await pullModel(localStorage.token, sanitizedModelTag, urlIdx).catch(
 			(error) => {
+				if (error.name !== 'AbortError') {
 					toast.error(`${error}`);
-				return null;
+				}
+				return [null, null];
 			}
 		);
 
@@ -202,8 +230,6 @@
 										}
 									});
 								} else {
-									toast.success(data.status);
-
 									MODEL_DOWNLOAD_POOL.set({
 										...$MODEL_DOWNLOAD_POOL,
 										[sanitizedModelTag]: {
@@ -216,6 +242,7 @@
 						}
 					}
 				} catch (err) {
+					if (err.name !== 'AbortError') {
 						console.error(err);
 						if (typeof err !== 'string') {
 							err = err.message;
@@ -223,12 +250,15 @@
 
 						toast.error(`${err}`);
 						// opts.callback({ success: false, error, modelName: opts.modelName });
+					} else {
+						break;
+					}
 				}
 			}
 
 			console.log($MODEL_DOWNLOAD_POOL[sanitizedModelTag]);
 
-			if ($MODEL_DOWNLOAD_POOL[sanitizedModelTag].done) {
+			if ($MODEL_DOWNLOAD_POOL[sanitizedModelTag]?.done) {
 				toast.success(
 					$i18n.t(`Model '{{modelName}}' has been successfully downloaded.`, {
 						modelName: sanitizedModelTag
@@ -425,6 +455,14 @@
 		);
 	};
 
+	const cancelUpdateModelHandler = async (model: string) => {
+		const controller = updateModelsControllers[model];
+		if (controller) {
+			controller.abort();
+			updateCancelled = true;
+		}
+	};
+
 	const cancelModelPullHandler = async (model: string) => {
 		const { reader, abortController } = $MODEL_DOWNLOAD_POOL[model];
 		if (abortController) {
@@ -605,12 +643,13 @@
 								bind:value={modelTag}
 							/>
 						</div>
+						<Tooltip content={$i18n.t('Pull Model')} placement="top">
 							<button
 								class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
 								on:click={() => {
 									pullModelHandler();
 								}}
-							disabled={modelTransferring}
+								disabled={modelTransferring || modelTag.trim() === ''}
 							>
 								{#if modelTransferring}
 									<div class="self-center">
@@ -658,6 +697,7 @@
 									</svg>
 								{/if}
 							</button>
+						</Tooltip>
 					</div>
 
 					<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
@@ -670,8 +710,35 @@
 					</div>
 
 					{#if updateModelId}
-						<div class="text-xs">
+						<div class="text-xs flex justify-between items-center">
-							Updating "{updateModelId}" {updateProgress ? `(${updateProgress}%)` : ''}
+							<div>Updating "{updateModelId}" {updateProgress ? `(${updateProgress}%)` : ''}</div>
+
+							<Tooltip content={$i18n.t('Cancel')}>
+								<button
+									class="text-gray-800 dark:text-gray-100"
+									on:click={() => {
+										cancelUpdateModelHandler(updateModelId);
+									}}
+								>
+									<svg
+										class="w-4 h-4 text-gray-800 dark:text-white"
+										aria-hidden="true"
+										xmlns="http://www.w3.org/2000/svg"
+										width="24"
+										height="24"
+										fill="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke="currentColor"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M6 18 17.94 6M18 18 6.06 6"
+										/>
+									</svg>
+								</button>
+							</Tooltip>
 						</div>
 					{/if}
 
@@ -754,11 +821,13 @@
 								{/each}
 							</select>
 						</div>
+						<Tooltip content={$i18n.t('Delete Model')} placement="top">
 							<button
 								class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
 								on:click={() => {
 									showModelDeleteConfirm = true;
 								}}
+								disabled={deleteModelTag === ''}
 							>
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
@@ -773,6 +842,7 @@
 									/>
 								</svg>
 							</button>
+						</Tooltip>
 					</div>
 				</div>
 
@@ -799,12 +869,15 @@
 						</div>
 
 						<div class="flex self-start">
+							<Tooltip content={$i18n.t('Create Model')} placement="top">
 								<button
 									class="px-2.5 py-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition disabled:cursor-not-allowed"
 									on:click={() => {
 										createModelHandler();
 									}}
-								disabled={createModelLoading}
+									disabled={
+										createModelLoading || createModelName.trim() === '' || createModelObject.trim() === ''
+									}
 								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
@@ -820,6 +893,7 @@
 										/>
 									</svg>
 								</button>
+							</Tooltip>
 						</div>
 					</div>
 
@@ -936,6 +1010,7 @@
 							</div>
 
 							{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
+								<Tooltip content={$i18n.t('Upload Model')} placement="top">
 									<button
 										class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg disabled:cursor-not-allowed transition"
 										type="submit"
@@ -987,6 +1062,7 @@
 											</svg>
 										{/if}
 									</button>
+								</Tooltip>
 							{/if}
 						</div>