web/removebg: differentiate messaging even more, add temporary logging

web/src/lib/workers/removebg.ts

@@ -40,24 +40,31 @@ const removeImageBackground = async (file: File) => {
         dtype: "fp32",
     });
 
+    console.log("we're past model loading!");
+
     const processor = await AutoProcessor.from_pretrained(models[model_type].id, {});
 
+    console.log("now also past processor!");
+
     if (model && processor) {
         const { pixel_values } = await processor(image);
+        console.log("got pixel values");
         const { output } = await model({ [models[model_type].input]: pixel_values });
+        console.log("got output");
         const mask = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height);
+        console.log("got the mask");
 
         self.postMessage({
             cobaltRemoveBgWorker: {
                 result: maskImage(image, mask),
             }
-         });
+        });
     }
 }
 
 self.onmessage = async (event: MessageEvent) => {
-    if (event.data.file) {
-        await removeImageBackground(event.data.file);
+    if (event.data.cobaltRemoveBgWorker.file) {
+        await removeImageBackground(event.data.cobaltRemoveBgWorker.file);
+        self.close();
     }
-    self.close();
 }

web/src/routes/cutout/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import settings from "$lib/state/settings";
-    import RemoveBgWorker from '$lib/workers/removebg?worker';
+    import RemoveBgWorker from "$lib/workers/removebg?worker";
 
     import { onMount } from "svelte";
     import { goto } from "$app/navigation";
@@ -23,9 +23,11 @@
         if (canvas && result) {
             canvas.width = result.width;
             canvas.height = result.height;
-            canvas.getContext('bitmaprenderer')?.transferFromImageBitmap(result);
+            canvas
+                .getContext("bitmaprenderer")
+                ?.transferFromImageBitmap(result);
         }
-    }
+    };
 
     const processImage = async () => {
         if (!file) return;
@@ -33,9 +35,12 @@
         state = "busy";
         worker = new RemoveBgWorker();
 
-        worker.postMessage({ file });
+        worker.postMessage({
+            cobaltRemoveBgWorker: { file },
+        });
+
         worker.onmessage = async (event) => {
-            console.log("event received by removebg page:", event)
+            console.log("event received by removebg page:", event);
             const eventData = event.data.cobaltRemoveBgWorker;
             if (eventData.result) {
                 state = "done";
@@ -47,18 +52,18 @@
             state = "empty";
             console.error("bg removal worker exploded:", e);
             worker.terminate();
-        }
+        };
     };
 
     const exportImage = async () => {
         if (!file) return;
 
         const resultBlob = await new Promise<Blob>((resolve, reject) => {
-            canvas.toBlob(blob => {
+            canvas.toBlob((blob) => {
                 if (blob) resolve(blob);
                 else reject();
-            }, "image/png")
-        })
+            }, "image/png");
+        });
 
         return await downloadFile({
             file: new File([resultBlob], `${file.name} (cutout).png`, {
@@ -134,7 +139,7 @@
         <div class="button-row">
             <button
                 on:click={() => {
-                    state = "empty"
+                    state = "empty";
                     file = undefined;
                 }}
             >