added image foreground mask function. added ui buttons for removing background, masking foreground.HEADmaster

2 files changed, 44 insertions, 8 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 9fbc82bef..79942d7ee 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -834,8 +834,10 @@ pie title Minerals in my tap water
     }
     static imageTools() {
         return [
-            { title: "Pixels",toolTip: "Set Native Pixel Size", btnType: ButtonType.ClickButton,  icon: "portrait",  scripts: { onClick: 'imageSetPixelSize();' }},
-            { title: "Rotate",toolTip: "Rotate 90",             btnType: ButtonType.ClickButton,  icon: "redo-alt",  scripts: { onClick: 'imageRotate90();' }},
+            { title: "Pixels", toolTip: "Set Native Pixel Size", btnType: ButtonType.ClickButton,  icon: "portrait",  scripts: { onClick: 'imageSetPixelSize();' }},
+            { title: "Rotate", toolTip: "Rotate 90",             btnType: ButtonType.ClickButton,  icon: "redo-alt",  scripts: { onClick: 'imageRotate90();' }},
+            { title: "NoBkgd", toolTip: "Remove Background",     btnType: ButtonType.ClickButton,  icon: "portrait",  scripts: { onClick: 'imageRemoveBackground();' }},
+            { title: "MaskFgd",toolTip: "Mask Foreground",       btnType: ButtonType.ClickButton,  icon: "portrait",  scripts: { onClick: 'imageMaskForeground();' }},
         ];
     }
     static contextMenuTools():Button[] {
diff --git a/src/client/util/Import & Export/ImageUtils.ts b/src/client/util/Import & Export/ImageUtils.ts
index 23102e051..72c1b468a 100644
--- a/src/client/util/Import & Export/ImageUtils.ts
+++ b/src/client/util/Import & Export/ImageUtils.ts
@@ -42,14 +42,14 @@ export namespace ImageUtils {
             reader.readAsDataURL(blob as Blob);
         });
     }
-    export function createImageDocFromBlob(blob: Blob | undefined, options: DocumentOptions & { _nativeWidth: number; _nativeHeight: number }, filename: string): Promise<Doc> {
+    export function createImageDocFromBlob(blob: Blob | undefined, options: DocumentOptions & { _nativeWidth: number; _nativeHeight: number }, filename: string, overwriteDoc?: Doc): Promise<Doc> {
         return new Promise((resolve, reject) => {
             if (!blob) return reject('No image blob provided');
             convertImgBlobToDataURL(blob)
                 .then(durl => {
                     ClientUtils.convertDataUri(durl as string, filename)
                         .then(url => {
-                            const imageSnapshot = Docs.Create.ImageDocument(url, options);
+                            const imageSnapshot = Docs.Create.ImageDocument(url, options, overwriteDoc);
                             Doc.SetNativeWidth(imageSnapshot[DocData], options._nativeWidth);
                             Doc.SetNativeHeight(imageSnapshot[DocData], options._nativeHeight);
                             resolve(imageSnapshot);
@@ -71,9 +71,14 @@ export namespace ImageUtils {
             workerCallbackMap.delete(docId); //  worker.terminate();
         };
         backgroundRemovalWorker.onmessage = async (event: MessageEvent) => {
-            const map = workerCallbackMap.get(event.data.docId);
-            event.data.success ? map?.res(event.data.result) : map?.rej();
-            workerCallbackMap.delete(event.data.docId); // worker.terminate();
+            if (event.data.type === 'progress') {
+                // Handle progress updates if needed
+                console.log(`Progress for docId ${event.data.docId}: ${event.data.progress}`);
+            } else {
+                const map = workerCallbackMap.get(event.data.docId);
+                event.data.success ? map?.res(event.data.result) : map?.rej();
+                workerCallbackMap.delete(event.data.docId); // worker.terminate();
+            }
         };
         return backgroundRemovalWorker;
     }
@@ -81,7 +86,36 @@ export namespace ImageUtils {
         return new Promise<Blob | undefined>((res, rej) => {
             if (!imagePath) return rej('No image path provided');
             workerCallbackMap.set(docId, { res, rej }); // Store the callback by docId (or use a unique requestId)
-            getBackgroundRemovalWorker().postMessage({ imagePath, docId });
+            getBackgroundRemovalWorker().postMessage({
+                imagePath,
+                docId,
+                config: {
+                    output: {
+                        quality: 0.8, // The quality. (Default: 0.8)
+                    },
+                },
+            });
+        });
+    }
+    export function maskForeground(docId: string, imagePath: string) {
+        return new Promise<Blob | undefined>((res, rej) => {
+            if (!imagePath) return rej('No image path provided');
+            workerCallbackMap.set(docId, { res, rej }); // Store the callback by docId (or use a unique requestId)
+            getBackgroundRemovalWorker().postMessage({
+                imagePath,
+                docId,
+                config: {
+                    //publicPath: string; // The public path used for model and wasm files. Default: 'https://staticimgly.com/${PACKAGE_NAME}-data/${PACKAGE_VERSION}/dist/'
+                    //debug: bool; // enable or disable useful console.log outputs
+                    //device: 'gpu', // 'cpu' | 'gpu'; // choose the execution device. gpu will use webgpu if available
+                    //model: 'isnet' | 'isnet_fp16' | 'isnet_quint8'; // The model to use. (Default "isnet_fp16")
+                    output: {
+                        //format: 'image/png' | 'image/jpeg' | 'image/webp'; // The output format. (Default "image/png")
+                        quality: 0.8, // The quality. (Default: 0.8)
+                        type: 'mask', // 'foreground' | 'background' | 'mask'; // The output type. (Default "foreground")
+                    },
+                },
+            });
         });
     }
 }