WIP feat: cancel model download

This commit is contained in:
Anuraag Jain 2024-02-18 21:29:47 +02:00
parent 9f869f6573
commit ae97a96379

View File

@ -52,15 +52,17 @@
// Remove the downloaded model // Remove the downloaded model
delete modelDownloadStatus[modelName]; delete modelDownloadStatus[modelName];
console.log(data); modelDownloadStatus = {...modelDownloadStatus}
console.log('Cleaned:',modelDownloadStatus);
if (!data.success) { if (!data.success) {
toast.error(data.error); toast.error(data.error);
} else { } else {
toast.success(`Model '${modelName}' has been successfully downloaded.`); toast.success(`Model '${sanitizedModelTag}' has been successfully downloaded.`);
const notification = new Notification(WEBUI_NAME, { const notification = new Notification(WEBUI_NAME, {
body: `Model '${modelName}' has been successfully downloaded.`, body: `Model '${sanitizedModelTag}' has been successfully downloaded.`,
icon: '/favicon.png' icon: '/favicon.png'
}); });
@ -266,6 +268,7 @@
downloadProgress = 100; downloadProgress = 100;
} }
modelDownloadStatus[opts.modelName] = { modelDownloadStatus[opts.modelName] = {
reader,
pullProgress: downloadProgress, pullProgress: downloadProgress,
digest: data.digest digest: data.digest
}; };
@ -286,6 +289,15 @@
opts.callback({ success: true, modelName: opts.modelName }); 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> </script>
<div class="flex flex-col h-full justify-between text-sm"> <div class="flex flex-col h-full justify-between text-sm">
@ -364,12 +376,36 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="font-medium mb-1">{model}</div> <div class="font-medium mb-1">{model}</div>
<div class=""> <div class="">
<div class="flex flex-row space-x-4">
<div <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" 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)}%" style="width: {Math.max(15, modelDownloadStatus[model].pullProgress ?? 0)}%"
> >
{modelDownloadStatus[model].pullProgress ?? 0}% {modelDownloadStatus[model].pullProgress ?? 0}%
</div> </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;"> <div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
{modelDownloadStatus[model].digest} {modelDownloadStatus[model].digest}
</div> </div>