From f544768784238b3517fe0f5d80bee324575442a2 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 15 Jan 2025 23:14:29 +0600
Subject: [PATCH] web/cutout: add a button to cancel the job

---
 web/src/lib/workers/removebg.ts    |  3 +++
 web/src/routes/cutout/+page.svelte | 39 +++++++++++++++++++++++++-----
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/workers/removebg.ts b/web/src/lib/workers/removebg.ts
index 0ab8d6ed..811e5f13 100644
--- a/web/src/lib/workers/removebg.ts
+++ b/web/src/lib/workers/removebg.ts
@@ -38,6 +38,9 @@ const removeImageBackground = async (file: File) => {
 
     const model_type = "light";
     const model = await AutoModel.from_pretrained(models[model_type].id, {
+        progress_callback: (progress) => {
+            console.log(progress);
+        },
         device: "wasm",
         dtype: "fp32",
     });
diff --git a/web/src/routes/cutout/+page.svelte b/web/src/routes/cutout/+page.svelte
index eed2ef19..23ff14c3 100644
--- a/web/src/routes/cutout/+page.svelte
+++ b/web/src/routes/cutout/+page.svelte
@@ -19,13 +19,15 @@
 
     let state: "empty" | "busy" | "done" = "empty";
 
-    const worker = new RemoveBgWorker();
+    let worker: Worker;
 
     const processImage = async () => {
         if (!file) return;
 
         state = "busy";
 
+        worker = new RemoveBgWorker();
+
         worker.postMessage({ file });
         worker.onmessage = async (event) => {
             const maskedCanvas = await maskImage(event.data.source, event.data.mask);
@@ -39,6 +41,8 @@
 
             result = maskedCanvas;
             imageContainer.append(maskedCanvas);
+
+            worker.terminate();
         };
 
         worker.onerror = (e) => {
@@ -73,12 +77,21 @@
             acceptTypes={["image/*"]}
             acceptExtensions={["jpg", "png", "webp"]}
         />
+        {#if file}
+            <div class="button-row">
+                <button on:click={processImage}>process files</button>
+                <button
+                    on:click={() => {
+                        file = undefined;
+                    }}
+                >
+                    clear imported files
+                </button>
+            </div>
+        {/if}
         <div class="subtext early-note">
             this is a very early & basic proof-of-concept, nothing about this feature is final or complete. please don't share or talk about it.
         </div>
-        {#if file}
-            <button on:click={processImage}>process imported stuff</button>
-        {/if}
     {/if}
 
     {#if state === "busy"}
@@ -97,8 +110,22 @@
         </div>
     {/if}
 
+    {#if state === "busy"}
+        <div class="button-row">
+            <button
+                on:click={() => {
+                    worker?.terminate();
+                    file = undefined;
+                    state = "empty";
+                }}
+            >
+                cancel
+            </button>
+        </div>
+    {/if}
+
     {#if state === "done"}
-        <div id="finished-actions">
+        <div class="button-row">
             <button
                 on:click={() => {
                     state = "empty"
@@ -140,7 +167,7 @@
         box-shadow: var(--button-box-shadow);
     }
 
-    #finished-actions {
+    .button-row {
         display: flex;
         flex-direction: row;
         gap: 6px;