@imgly/plugin-background-removal-web 0.1.0-rc.0

package/LICENSE.md

@@ -0,0 +1 @@
+TBD

package/README.md

@@ -0,0 +1,72 @@
+# IMG.LY CE.SDK Plugin Background Removal
+
+![Hero image showing the configuration abilities of the Background Removal plugin](https://img.ly/static/plugins/background-removal/gh-repo-header.jpg)
+
+This plugin introduces background removal for the CE.SDK editor, leveraging the power of the [background-removal-js library](https://github.com/imgly/background-removal-js). It integrates seamlessly with CE.SDK, providing users with an efficient tool to remove backgrounds from images directly in the browser with ease and no additional costs or privacy concerns.
+
+## Installation
+
+You can install the plugin via npm or yarn. Use the following commands to install the package:
+
+```
+yarn install @imgly/plugin-background-removal-web
+```
+
+## Usage
+
+Adding the plugin to CE.SDK will automatically add a background removal
+canvas menu entry for every block with an image fill.
+
+```typescript
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+import BackgroundRemovalPlugin from '@imgly/plugin-background-removal';
+
+const config = {
+  license: '<your-license-here>',
+  callbacks: {
+    // Please note that the background removal plugin depends on an correctly
+    // configured upload. 'local' will work for local testing, but in
+    // production you will need something stable. Please take a look at:
+    // https://img.ly/docs/cesdk/ui/guides/upload-images/
+    onUpload: 'local'
+  }
+};
+
+const cesdk = await CreativeEditorSDK.create(container, config);
+await cesdk.addDefaultAssetSources(),
+  await cesdk.addDemoAssetSources({ sceneMode: 'Design' }),
+  await cesdk.unstable_addPlugin(BackgroundRemovalPlugin());
+
+await cesdk.createDesignScene();
+```
+
+## Configuration
+
+All configuration options from the underlying background removal library
+can be used in this plugin.
+
+[See the documentation](https://github.com/imgly/background-removal-js/tree/main/packages/web#advanced-configuration) for further information.
+
+```typescript
+import BackgroundRemovalPlugin from '@imgly/plugin-background-removal';
+
+[...]
+
+await cesdk.unstable_addPlugin(BackgroundRemovalPlugin({
+  backgroundRemoval: {
+    publicPath: '...',
+    // All other configuration option that are passed to the bg removal
+    // library. See https://github.com/imgly/background-removal-js/tree/main/packages/web#advanced-configuration
+  }
+}))
+
+```
+
+## Performance
+
+For optimal performance using the correct CORS headers is important. See the library documentation [here](https://github.com/imgly/background-removal-js/tree/main/packages/web#performance) for more details.
+
+```
+'Cross-Origin-Opener-Policy': 'same-origin',
+'Cross-Origin-Embedder-Policy': 'require-corp'
+```

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const BG_REMOVAL_ID = "@imgly/plugin-background-removal-web";
+export declare const CANVAS_MENU_COMPONENT_ID = "@imgly/plugin-background-removal-web.canvasMenu";
+export declare const CANVAS_MENU_COMPONENT_BUTTON_ID = "@imgly/plugin-background-removal-web.canvasMenu.button";
+export declare const FEATURE_ID = "@imgly/plugin-background-removal-web.feature";

package/dist/enableFeatures.d.ts

@@ -0,0 +1,6 @@
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+/**
+ * Defines the feature that determines in which context (on which block)
+ * background removal is allowed/enabled.
+ */
+export declare function enableFeatures(cesdk: CreativeEditorSDK): void;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { type PluginConfiguration } from './plugin';
+declare const Plugin: (pluginConfiguration?: PluginConfiguration) => {
+    initialize(): void;
+    update(): void;
+    initializeUserInterface({ cesdk }: {
+        cesdk: import("@cesdk/cesdk-js").default;
+    }): void;
+    name: string;
+    version: string;
+};
+export default Plugin;

package/dist/index.mjs

@@ -0,0 +1,492 @@
+// src/utils.ts
+import isEqual from "lodash/isEqual";
+
+// src/constants.ts
+var BG_REMOVAL_ID = "@imgly/plugin-background-removal-web";
+var CANVAS_MENU_COMPONENT_ID = `${BG_REMOVAL_ID}.canvasMenu`;
+var CANVAS_MENU_COMPONENT_BUTTON_ID = `${CANVAS_MENU_COMPONENT_ID}.button`;
+var FEATURE_ID = `${BG_REMOVAL_ID}.feature`;
+
+// src/utils.ts
+function setBGRemovalMetadata(cesdk, id, metadata) {
+  cesdk.engine.block.setMetadata(id, BG_REMOVAL_ID, JSON.stringify(metadata));
+}
+function getBGRemovalMetadata(cesdk, id) {
+  if (cesdk.engine.block.hasMetadata(id, BG_REMOVAL_ID)) {
+    return JSON.parse(cesdk.engine.block.getMetadata(id, BG_REMOVAL_ID));
+  } else {
+    return {
+      status: "IDLE"
+    };
+  }
+}
+function clearBGRemovalMetadata(cesdk, id) {
+  if (cesdk.engine.block.hasMetadata(id, BG_REMOVAL_ID)) {
+    cesdk.engine.block.removeMetadata(id, BG_REMOVAL_ID);
+  }
+}
+function isDuplicate(cesdk, blockId, metadata) {
+  if (!cesdk.engine.block.isValid(blockId))
+    return false;
+  if (metadata.status === "IDLE" || metadata.status === "PENDING" || metadata.status === "ERROR")
+    return false;
+  if (!cesdk.engine.block.hasFill(blockId))
+    return false;
+  const fillId = cesdk.engine.block.getFill(blockId);
+  if (metadata.blockId === blockId || metadata.fillId === fillId)
+    return false;
+  return true;
+}
+function fixDuplicateMetadata(cesdk, blockId) {
+  const fillId = cesdk.engine.block.getFill(blockId);
+  const metadata = getBGRemovalMetadata(cesdk, blockId);
+  if (metadata.status === "IDLE" || metadata.status === "PENDING" || metadata.status === "ERROR")
+    return;
+  setBGRemovalMetadata(cesdk, blockId, {
+    ...metadata,
+    blockId,
+    fillId
+  });
+}
+function isMetadataConsistent(cesdk, blockId) {
+  if (!cesdk.engine.block.isValid(blockId))
+    return false;
+  const metadata = getBGRemovalMetadata(cesdk, blockId);
+  if (metadata.status === "IDLE" || metadata.status === "PENDING")
+    return true;
+  if (!cesdk.engine.block.hasFill(blockId))
+    return false;
+  const fillId = cesdk.engine.block.getFill(blockId);
+  if (fillId == null)
+    return false;
+  if (blockId !== metadata.blockId || fillId !== metadata.fillId)
+    return false;
+  const sourceSet = cesdk.engine.block.getSourceSet(
+    fillId,
+    "fill/image/sourceSet"
+  );
+  const imageFileURI = cesdk.engine.block.getString(
+    fillId,
+    "fill/image/imageFileURI"
+  );
+  if (sourceSet.length === 0 && !imageFileURI && metadata.status === "PROCESSING") {
+    return true;
+  }
+  if (sourceSet?.length > 0) {
+    const initialSourceSet = metadata.initialSourceSet;
+    if (metadata.status === "PROCESSED_WITH_BG" || metadata.status === "PROCESSED_WITHOUT_BG") {
+      const removedBackground = metadata.removedBackground;
+      if (!isEqual(sourceSet, removedBackground) && !isEqual(sourceSet, initialSourceSet)) {
+        return false;
+      }
+    } else {
+      if (!isEqual(sourceSet, initialSourceSet)) {
+        return false;
+      }
+    }
+  } else {
+    if (metadata.status === "PROCESSED_WITH_BG" || metadata.status === "PROCESSED_WITHOUT_BG") {
+      if (imageFileURI !== metadata.initialImageFileURI && imageFileURI !== metadata.removedBackground) {
+        return false;
+      }
+    } else {
+      if (imageFileURI !== metadata.initialImageFileURI) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function toggleBackgroundRemovalData(cesdk, blockId) {
+  const blockApi = cesdk.engine.block;
+  if (!blockApi.hasFill(blockId))
+    return;
+  const fillId = blockApi.getFill(blockId);
+  const metadata = getBGRemovalMetadata(cesdk, blockId);
+  if (metadata.status === "PROCESSED_WITH_BG") {
+    setBGRemovalMetadata(cesdk, blockId, {
+      ...metadata,
+      status: "PROCESSED_WITHOUT_BG"
+    });
+    if (typeof metadata.removedBackground === "string") {
+      blockApi.setString(
+        fillId,
+        "fill/image/imageFileURI",
+        metadata.removedBackground
+      );
+    } else {
+      blockApi.setSourceSet(
+        fillId,
+        "fill/image/sourceSet",
+        metadata.removedBackground
+      );
+    }
+    cesdk.engine.editor.addUndoStep();
+  } else if (metadata.status === "PROCESSED_WITHOUT_BG") {
+    setBGRemovalMetadata(cesdk, blockId, {
+      ...metadata,
+      status: "PROCESSED_WITH_BG"
+    });
+    blockApi.setString(
+      fillId,
+      "fill/image/imageFileURI",
+      metadata.initialImageFileURI
+    );
+    blockApi.setSourceSet(
+      fillId,
+      "fill/image/sourceSet",
+      metadata.initialSourceSet
+    );
+    cesdk.engine.editor.addUndoStep();
+  }
+}
+function recoverInitialImageData(cesdk, blockId) {
+  const blockApi = cesdk.engine.block;
+  if (!blockApi.hasFill(blockId))
+    return;
+  const metadata = getBGRemovalMetadata(cesdk, blockId);
+  if (metadata.status === "PENDING" || metadata.status === "IDLE") {
+    return;
+  }
+  const initialSourceSet = metadata.initialSourceSet;
+  const initialImageFileURI = metadata.initialImageFileURI;
+  const fillId = getValidFill(cesdk, blockId, metadata);
+  if (fillId == null)
+    return;
+  if (initialImageFileURI) {
+    cesdk.engine.block.setString(
+      fillId,
+      "fill/image/imageFileURI",
+      initialImageFileURI
+    );
+  }
+  if (initialSourceSet.length > 0) {
+    cesdk.engine.block.setSourceSet(
+      fillId,
+      "fill/image/sourceSet",
+      initialSourceSet
+    );
+  }
+}
+function getValidFill(cesdk, blockId, metadata) {
+  if (!cesdk.engine.block.isValid(blockId) || !cesdk.engine.block.hasFill(blockId) || blockId !== metadata.blockId) {
+    return void 0;
+  }
+  const fillId = cesdk.engine.block.getFill(blockId);
+  if (fillId !== metadata.fillId) {
+    return void 0;
+  }
+  return fillId;
+}
+
+// src/registerComponents.ts
+function registerComponents(cesdk) {
+  cesdk.ui.unstable_setCanvasMenuOrder([
+    CANVAS_MENU_COMPONENT_ID,
+    ...cesdk.ui.unstable_getCanvasMenuOrder()
+  ]);
+  cesdk.ui.unstable_registerComponent(
+    CANVAS_MENU_COMPONENT_ID,
+    ({ builder: { Button }, engine }) => {
+      if (!cesdk.feature.unstable_isEnabled(FEATURE_ID, {
+        engine
+      })) {
+        return;
+      }
+      const [id] = engine.block.findAllSelected();
+      const metadata = getBGRemovalMetadata(cesdk, id);
+      const isActive = metadata.status === "PROCESSED_WITHOUT_BG";
+      const isLoading = metadata.status === "PROCESSING";
+      const isDisabled = metadata.status === "PENDING" || metadata.status === "PROCESSING";
+      let loadingProgress;
+      if (isLoading && metadata.progress) {
+        const { key, current, total } = metadata.progress;
+        if (key === "compute:inference") {
+          loadingProgress = void 0;
+        } else if (key.startsWith("fetch:/models/")) {
+          loadingProgress = current / total * 50;
+        } else if (key.startsWith("fetch:/onnxruntime-web/")) {
+          loadingProgress = 50 + current / total * 50;
+        } else {
+          loadingProgress = void 0;
+        }
+      }
+      Button(CANVAS_MENU_COMPONENT_BUTTON_ID, {
+        label: "BG Removal",
+        icon: "@imgly/icons/BGRemove",
+        isActive,
+        isLoading,
+        isDisabled,
+        loadingProgress,
+        onClick: () => {
+          switch (metadata.status) {
+            case "IDLE":
+            case "ERROR": {
+              setBGRemovalMetadata(cesdk, id, {
+                status: "PENDING"
+              });
+              break;
+            }
+            case "PROCESSED_WITHOUT_BG":
+            case "PROCESSED_WITH_BG": {
+              toggleBackgroundRemovalData(cesdk, id);
+              break;
+            }
+            default: {
+            }
+          }
+        }
+      });
+    }
+  );
+}
+
+// src/enableFeatures.ts
+function enableFeatures(cesdk) {
+  cesdk.feature.unstable_enable(FEATURE_ID, ({ engine }) => {
+    const selectedIds = engine.block.findAllSelected();
+    if (selectedIds.length !== 1) {
+      return false;
+    }
+    const [selectedId] = selectedIds;
+    if (cesdk.engine.block.hasFill(selectedId)) {
+      const fillId = cesdk.engine.block.getFill(selectedId);
+      const fillType = cesdk.engine.block.getType(fillId);
+      if (fillType !== "//ly.img.ubq/fill/image") {
+        return false;
+      }
+      const fileUri = engine.block.getString(fillId, "fill/image/imageFileURI");
+      const sourceSet = engine.block.getSourceSet(
+        fillId,
+        "fill/image/sourceSet"
+      );
+      if (sourceSet.length > 0 || fileUri !== "")
+        return true;
+      const metadata = getBGRemovalMetadata(cesdk, selectedId);
+      return metadata.status === "PROCESSING";
+    }
+    return false;
+  });
+}
+
+// src/processBackgroundRemoval.ts
+import {
+  segmentForeground,
+  applySegmentationMask
+} from "@imgly/background-removal";
+import throttle from "lodash/throttle";
+async function processBackgroundRemoval(cesdk, blockId, configuration) {
+  const blockApi = cesdk.engine.block;
+  if (!blockApi.hasFill(blockId))
+    throw new Error("Block has no fill to remove the background from");
+  const fillId = blockApi.getFill(blockId);
+  const initialSourceSet = blockApi.getSourceSet(
+    fillId,
+    "fill/image/sourceSet"
+  );
+  const initialImageFileURI = blockApi.getString(
+    fillId,
+    "fill/image/imageFileURI"
+  );
+  try {
+    blockApi.setString(fillId, "fill/image/imageFileURI", "");
+    blockApi.setSourceSet(fillId, "fill/image/sourceSet", []);
+    const metadata = getBGRemovalMetadata(cesdk, blockId);
+    setBGRemovalMetadata(cesdk, blockId, {
+      ...metadata,
+      version: "0.1.0-rc.0",
+      initialSourceSet,
+      initialImageFileURI,
+      blockId,
+      fillId,
+      status: "PROCESSING"
+    });
+    const uriToProcess = (
+      // Source sets have priority in the engine
+      initialSourceSet.length > 0 ? (
+        // Choose the highest resolution image in the source set
+        initialSourceSet.sort(
+          (a, b) => b.width * b.height - a.height * a.width
+        )[0].uri
+      ) : initialImageFileURI
+    );
+    const mask = await segmentForeground(uriToProcess, configuration);
+    if (initialSourceSet.length > 0) {
+      const uploaded = await maskSourceSet(
+        cesdk,
+        blockId,
+        initialSourceSet,
+        mask,
+        configuration
+      );
+      if (uploaded == null)
+        return;
+      if (uploaded.every((url) => url == null)) {
+        throw new Error("Could not upload any BG removed image");
+      }
+      const newSourceSet = initialSourceSet.map((source, index) => {
+        return {
+          ...source,
+          uri: uploaded[index]
+        };
+      });
+      setBGRemovalMetadata(cesdk, blockId, {
+        version: "0.1.0-rc.0",
+        initialSourceSet,
+        initialImageFileURI,
+        blockId,
+        fillId,
+        status: "PROCESSED_WITHOUT_BG",
+        removedBackground: newSourceSet
+      });
+      blockApi.setSourceSet(fillId, "fill/image/sourceSet", newSourceSet);
+    } else {
+      const uploaded = await maskSourceSet(
+        cesdk,
+        blockId,
+        [{ uri: uriToProcess }],
+        mask,
+        configuration
+      );
+      if (uploaded == null)
+        return;
+      const uploadedUrl = uploaded[0];
+      if (uploadedUrl == null) {
+        throw new Error("Could not upload BG removed image");
+      }
+      setBGRemovalMetadata(cesdk, blockId, {
+        version: "0.1.0-rc.0",
+        initialSourceSet,
+        initialImageFileURI,
+        blockId,
+        fillId,
+        status: "PROCESSED_WITHOUT_BG",
+        removedBackground: uploadedUrl
+      });
+      blockApi.setString(fillId, "fill/image/imageFileURI", uploadedUrl);
+    }
+    cesdk.engine.editor.addUndoStep();
+  } catch (error) {
+    if (cesdk.engine.block.isValid(blockId)) {
+      setBGRemovalMetadata(cesdk, blockId, {
+        version: "0.1.0-rc.0",
+        initialSourceSet,
+        initialImageFileURI,
+        blockId,
+        fillId,
+        status: "ERROR"
+      });
+      recoverInitialImageData(cesdk, blockId);
+    }
+    console.log(error);
+  }
+}
+async function maskSourceSet(cesdk, blockId, urisOrSources, mask, configurationFromArgs) {
+  const configuration = {
+    ...configurationFromArgs,
+    progress: throttle((key, current, total) => {
+      const metadataDuringProgress = getBGRemovalMetadata(cesdk, blockId);
+      if (metadataDuringProgress.status !== "PROCESSING" || !isMetadataConsistent(cesdk, blockId))
+        return;
+      configurationFromArgs.progress?.(key, current, total);
+      setBGRemovalMetadata(cesdk, blockId, {
+        ...metadataDuringProgress,
+        progress: { key, current, total }
+      });
+    }, 100)
+  };
+  const masked = await Promise.all(
+    urisOrSources.map(async (source) => {
+      const blob = await applySegmentationMask(source.uri, mask, configuration);
+      return [blob, source];
+    })
+  );
+  if (getBGRemovalMetadata(cesdk, blockId).status !== "PROCESSING" || !isMetadataConsistent(cesdk, blockId))
+    return;
+  const uploaded = await Promise.all(
+    masked.map(async ([blob, source]) => {
+      const pathname = new URL(source.uri).pathname;
+      const parts = pathname.split("/");
+      const filename = parts[parts.length - 1];
+      const uploadedAssets = await cesdk.unstable_upload(
+        new File([blob], filename, { type: blob.type }),
+        () => {
+        }
+      );
+      const url = uploadedAssets.meta?.uri;
+      if (url == null) {
+        throw new Error("Could not upload BG removed image");
+      }
+      return [url, source];
+    })
+  );
+  if (getBGRemovalMetadata(cesdk, blockId).status !== "PROCESSING" || !isMetadataConsistent(cesdk, blockId))
+    return;
+  return uploaded.map(([url]) => url);
+}
+
+// src/plugin.ts
+var plugin_default = (pluginConfiguration = {}) => {
+  const backgroundRemovalConfiguration = pluginConfiguration?.backgroundRemoval ?? {};
+  return {
+    initialize() {
+    },
+    update() {
+    },
+    initializeUserInterface({ cesdk }) {
+      cesdk.engine.event.subscribe([], async (events) => {
+        events.forEach((e) => {
+          const id = e.block;
+          if (!cesdk.engine.block.isValid(id) || !cesdk.engine.block.hasMetadata(id, BG_REMOVAL_ID)) {
+            return;
+          }
+          if (e.type === "Created") {
+            const metadata = getBGRemovalMetadata(cesdk, id);
+            if (isDuplicate(cesdk, id, metadata)) {
+              fixDuplicateMetadata(cesdk, id);
+            }
+          } else if (e.type === "Updated") {
+            handleUpdateEvent(cesdk, id, backgroundRemovalConfiguration);
+          }
+        });
+      });
+      registerComponents(cesdk);
+      enableFeatures(cesdk);
+    }
+  };
+};
+async function handleUpdateEvent(cesdk, blockId, configuration) {
+  const metadata = getBGRemovalMetadata(cesdk, blockId);
+  switch (metadata.status) {
+    case "PENDING": {
+      if (cesdk.feature.unstable_isEnabled(FEATURE_ID, {
+        engine: cesdk.engine
+      })) {
+        processBackgroundRemoval(cesdk, blockId, configuration);
+      }
+      break;
+    }
+    case "PROCESSING":
+    case "PROCESSED_WITH_BG":
+    case "PROCESSED_WITHOUT_BG": {
+      if (!isMetadataConsistent(cesdk, blockId)) {
+        clearBGRemovalMetadata(cesdk, blockId);
+      }
+      break;
+    }
+    default: {
+    }
+  }
+}
+
+// src/index.ts
+var Plugin = (pluginConfiguration) => ({
+  name: BG_REMOVAL_ID,
+  version: "0.1.0-rc.0",
+  ...plugin_default(pluginConfiguration)
+});
+var src_default = Plugin;
+export {
+  src_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/utils.ts", "../src/constants.ts", "../src/registerComponents.ts", "../src/enableFeatures.ts", "../src/processBackgroundRemoval.ts", "../src/plugin.ts", "../src/index.ts"],
+  "sourcesContent": ["import type CreativeEditorSDK from '@cesdk/cesdk-js';\nimport isEqual from 'lodash/isEqual';\n\nimport {\n  BGRemovalError,\n  BGRemovalMetadata,\n  BGRemovalProcessed,\n  BGRemovalProcessing\n} from './types';\nimport { BG_REMOVAL_ID } from './constants';\n\n/**\n * Sets the metadata for the background removal state.\n */\nexport function setBGRemovalMetadata(\n  cesdk: CreativeEditorSDK,\n  id: number,\n  metadata: BGRemovalMetadata\n) {\n  cesdk.engine.block.setMetadata(id, BG_REMOVAL_ID, JSON.stringify(metadata));\n}\n\n/**\n * Returns the current metadata for the background removal state. If no metadata\n * is set on the given block, it will return an IDLE state.\n */\nexport function getBGRemovalMetadata(\n  cesdk: CreativeEditorSDK,\n  id: number\n): BGRemovalMetadata {\n  if (cesdk.engine.block.hasMetadata(id, BG_REMOVAL_ID)) {\n    return JSON.parse(cesdk.engine.block.getMetadata(id, BG_REMOVAL_ID));\n  } else {\n    return {\n      status: 'IDLE'\n    };\n  }\n}\n\n/**\n * If BG Removal metadata is set, it will be cleared.\n */\nexport function clearBGRemovalMetadata(cesdk: CreativeEditorSDK, id: number) {\n  if (cesdk.engine.block.hasMetadata(id, BG_REMOVAL_ID)) {\n    cesdk.engine.block.removeMetadata(id, BG_REMOVAL_ID);\n  }\n}\n\n/**\n * Detect if the block has been duplicated with processed or processing\n * background removal. In that case the background removal state is still\n * valid, but blockId and fillId have changed.\n */\nexport function isDuplicate(\n  cesdk: CreativeEditorSDK,\n  blockId: number,\n  metadata: BGRemovalMetadata\n): boolean {\n  if (!cesdk.engine.block.isValid(blockId)) return false;\n  if (\n    metadata.status === 'IDLE' ||\n    metadata.status === 'PENDING' ||\n    metadata.status === 'ERROR'\n  )\n    return false;\n\n  if (!cesdk.engine.block.hasFill(blockId)) return false;\n  const fillId = cesdk.engine.block.getFill(blockId);\n\n  // It cannot be a duplicate if the blockId or fillId are the same\n  if (metadata.blockId === blockId || metadata.fillId === fillId) return false;\n\n  return true;\n}\n\n/**\n * Fixes the metadata if the block has been duplicated, i.e. the blockId and\n * fillId will be updated to the current block/fill.\n *\n * Please note: Call this method only on duplicates (see isDuplicate).\n */\nexport function fixDuplicateMetadata(\n  cesdk: CreativeEditorSDK,\n  blockId: number\n) {\n  const fillId = cesdk.engine.block.getFill(blockId);\n  const metadata = getBGRemovalMetadata(cesdk, blockId);\n  if (\n    metadata.status === 'IDLE' ||\n    metadata.status === 'PENDING' ||\n    metadata.status === 'ERROR'\n  )\n    return;\n  setBGRemovalMetadata(cesdk, blockId, {\n    ...metadata,\n    blockId,\n    fillId\n  });\n}\n\n/**\n * Check if the image has a consisten metadata state. A inconsistent state is\n * caused by outside changes of the fill data.\n *\n * @returns true if the metadata is consistent, false otherwise\n */\nexport function isMetadataConsistent(\n  cesdk: CreativeEditorSDK,\n  blockId: number\n): boolean {\n  // In case the block was removed, we just abort and mark it\n  // as reset by returning true\n  if (!cesdk.engine.block.isValid(blockId)) return false;\n  const metadata = getBGRemovalMetadata(cesdk, blockId);\n  if (metadata.status === 'IDLE' || metadata.status === 'PENDING') return true;\n\n  if (!cesdk.engine.block.hasFill(blockId)) return false;\n  const fillId = cesdk.engine.block.getFill(blockId);\n  if (fillId == null) return false;\n\n  if (blockId !== metadata.blockId || fillId !== metadata.fillId) return false;\n\n  const sourceSet = cesdk.engine.block.getSourceSet(\n    fillId,\n    'fill/image/sourceSet'\n  );\n  const imageFileURI = cesdk.engine.block.getString(\n    fillId,\n    'fill/image/imageFileURI'\n  );\n\n  if (\n    sourceSet.length === 0 &&\n    !imageFileURI &&\n    metadata.status === 'PROCESSING'\n  ) {\n    // While we process it is OK to have no image file URI and no source set\n    // (which we cleared to show the spinning loader)\n    return true;\n  }\n\n  // Source sets have precedence over imageFileURI so if we have a source set,\n  // we only need to check if it has changed to something else.\n  if (sourceSet?.length > 0) {\n    const initialSourceSet = metadata.initialSourceSet;\n    // If we have already processed the image, we need to check if the source set\n    // we need to check against both source sets, the removed and the initial\n    if (\n      metadata.status === 'PROCESSED_WITH_BG' ||\n      metadata.status === 'PROCESSED_WITHOUT_BG'\n    ) {\n      const removedBackground = metadata.removedBackground;\n      if (\n        !isEqual(sourceSet, removedBackground) &&\n        !isEqual(sourceSet, initialSourceSet)\n      ) {\n        return false;\n      }\n    } else {\n      if (!isEqual(sourceSet, initialSourceSet)) {\n        return false;\n      }\n    }\n  } else {\n    if (\n      metadata.status === 'PROCESSED_WITH_BG' ||\n      metadata.status === 'PROCESSED_WITHOUT_BG'\n    ) {\n      if (\n        imageFileURI !== metadata.initialImageFileURI &&\n        imageFileURI !== metadata.removedBackground\n      ) {\n        return false;\n      }\n    } else {\n      if (imageFileURI !== metadata.initialImageFileURI) {\n        return false;\n      }\n    }\n  }\n  return true;\n}\n\n/**\n * Toggle between the background removed image and the original image if either\n * in the state \"PROCESSED_WITH_BG\" or \"PROCESSED_WITHOUT_BG\". Otherwise do\n * nothing.\n */\nexport function toggleBackgroundRemovalData(\n  cesdk: CreativeEditorSDK,\n  blockId: number\n) {\n  const blockApi = cesdk.engine.block;\n  if (!blockApi.hasFill(blockId)) return; // Nothing to recover (no fill anymore)\n  const fillId = blockApi.getFill(blockId);\n\n  const metadata = getBGRemovalMetadata(cesdk, blockId);\n\n  if (metadata.status === 'PROCESSED_WITH_BG') {\n    setBGRemovalMetadata(cesdk, blockId, {\n      ...metadata,\n      status: 'PROCESSED_WITHOUT_BG'\n    });\n\n    if (typeof metadata.removedBackground === 'string') {\n      blockApi.setString(\n        fillId,\n        'fill/image/imageFileURI',\n        metadata.removedBackground\n      );\n    } else {\n      blockApi.setSourceSet(\n        fillId,\n        'fill/image/sourceSet',\n        metadata.removedBackground\n      );\n    }\n\n    cesdk.engine.editor.addUndoStep();\n  } else if (metadata.status === 'PROCESSED_WITHOUT_BG') {\n    setBGRemovalMetadata(cesdk, blockId, {\n      ...metadata,\n      status: 'PROCESSED_WITH_BG'\n    });\n\n    blockApi.setString(\n      fillId,\n      'fill/image/imageFileURI',\n      metadata.initialImageFileURI\n    );\n    blockApi.setSourceSet(\n      fillId,\n      'fill/image/sourceSet',\n      metadata.initialSourceSet\n    );\n    cesdk.engine.editor.addUndoStep();\n  }\n}\n\n/**\n * Recover the initial values to avoid the loading spinner and have the same\n * state as before the background removal was started.\n */\nexport function recoverInitialImageData(\n  cesdk: CreativeEditorSDK,\n  blockId: number\n) {\n  const blockApi = cesdk.engine.block;\n  if (!blockApi.hasFill(blockId)) return; // Nothing to recover (no fill anymore)\n\n  const metadata = getBGRemovalMetadata(cesdk, blockId);\n\n  if (metadata.status === 'PENDING' || metadata.status === 'IDLE') {\n    return;\n  }\n\n  const initialSourceSet = metadata.initialSourceSet;\n  const initialImageFileURI = metadata.initialImageFileURI;\n\n  const fillId = getValidFill(cesdk, blockId, metadata);\n  if (fillId == null) return;\n\n  if (initialImageFileURI) {\n    cesdk.engine.block.setString(\n      fillId,\n      'fill/image/imageFileURI',\n      initialImageFileURI\n    );\n  }\n  if (initialSourceSet.length > 0) {\n    cesdk.engine.block.setSourceSet(\n      fillId,\n      'fill/image/sourceSet',\n      initialSourceSet\n    );\n  }\n}\n\n/**\n * Returns the fill id of the block if it has a valid fill that was used for\n * background removal. Returns undefined otherwise.\n */\nfunction getValidFill(\n  cesdk: CreativeEditorSDK,\n  blockId: number,\n  metadata: BGRemovalProcessing | BGRemovalError | BGRemovalProcessed\n): number | undefined {\n  if (\n    !cesdk.engine.block.isValid(blockId) ||\n    !cesdk.engine.block.hasFill(blockId) ||\n    blockId !== metadata.blockId\n  ) {\n    return undefined;\n  }\n  const fillId = cesdk.engine.block.getFill(blockId);\n  if (fillId !== metadata.fillId) {\n    return undefined;\n  }\n\n  return fillId;\n}\n", "export const BG_REMOVAL_ID = '@imgly/plugin-background-removal-web';\nexport const CANVAS_MENU_COMPONENT_ID = `${BG_REMOVAL_ID}.canvasMenu`;\nexport const CANVAS_MENU_COMPONENT_BUTTON_ID = `${CANVAS_MENU_COMPONENT_ID}.button`;\nexport const FEATURE_ID = `${BG_REMOVAL_ID}.feature`;\n", "import type CreativeEditorSDK from '@cesdk/cesdk-js';\n\nimport {\n  CANVAS_MENU_COMPONENT_BUTTON_ID,\n  CANVAS_MENU_COMPONENT_ID,\n  FEATURE_ID\n} from './constants';\nimport {\n  getBGRemovalMetadata,\n  setBGRemovalMetadata,\n  toggleBackgroundRemovalData\n} from './utils';\n\n/**\n * Registers the components that can be used to remove the background of\n * a block.\n */\nexport function registerComponents(cesdk: CreativeEditorSDK) {\n  // Always prepend the registered component to the canvas menu order.\n  cesdk.ui.unstable_setCanvasMenuOrder([\n    CANVAS_MENU_COMPONENT_ID,\n    ...cesdk.ui.unstable_getCanvasMenuOrder()\n  ]);\n  cesdk.ui.unstable_registerComponent(\n    CANVAS_MENU_COMPONENT_ID,\n    ({ builder: { Button }, engine }) => {\n      if (\n        !cesdk.feature.unstable_isEnabled(FEATURE_ID, {\n          engine\n        })\n      ) {\n        return;\n      }\n\n      const [id] = engine.block.findAllSelected();\n\n      const metadata = getBGRemovalMetadata(cesdk, id);\n\n      const isActive = metadata.status === 'PROCESSED_WITHOUT_BG';\n      const isLoading = metadata.status === 'PROCESSING';\n      const isDisabled =\n        metadata.status === 'PENDING' || metadata.status === 'PROCESSING';\n\n      let loadingProgress: number | undefined;\n      if (isLoading && metadata.progress) {\n        const { key, current, total } = metadata.progress;\n\n        if (key === 'compute:inference') {\n          loadingProgress = undefined;\n        } else if (key.startsWith('fetch:/models/')) {\n          loadingProgress = (current / total) * 50;\n        } else if (key.startsWith('fetch:/onnxruntime-web/')) {\n          loadingProgress = 50 + (current / total) * 50;\n        } else {\n          loadingProgress = undefined;\n        }\n      }\n\n      Button(CANVAS_MENU_COMPONENT_BUTTON_ID, {\n        label: 'BG Removal',\n        icon: '@imgly/icons/BGRemove',\n        isActive,\n        isLoading,\n        isDisabled,\n        loadingProgress,\n        onClick: () => {\n          switch (metadata.status) {\n            case 'IDLE':\n            case 'ERROR': {\n              setBGRemovalMetadata(cesdk, id, {\n                status: 'PENDING'\n              });\n              break;\n            }\n\n            case 'PROCESSED_WITHOUT_BG':\n            case 'PROCESSED_WITH_BG': {\n              toggleBackgroundRemovalData(cesdk, id);\n              break;\n            }\n\n            default: {\n              // We do not care about the other states in the button\n            }\n          }\n        }\n      });\n    }\n  );\n}\n", "import type CreativeEditorSDK from '@cesdk/cesdk-js';\nimport { FEATURE_ID } from './constants';\nimport { getBGRemovalMetadata } from './utils';\n\n/**\n * Defines the feature that determines in which context (on which block)\n * background removal is allowed/enabled.\n */\nexport function enableFeatures(cesdk: CreativeEditorSDK) {\n  cesdk.feature.unstable_enable(FEATURE_ID, ({ engine }) => {\n    const selectedIds = engine.block.findAllSelected();\n    if (selectedIds.length !== 1) {\n      return false;\n    }\n    const [selectedId] = selectedIds;\n\n    if (cesdk.engine.block.hasFill(selectedId)) {\n      const fillId = cesdk.engine.block.getFill(selectedId);\n      const fillType = cesdk.engine.block.getType(fillId);\n\n      if (fillType !== '//ly.img.ubq/fill/image') {\n        return false;\n      }\n\n      const fileUri = engine.block.getString(fillId, 'fill/image/imageFileURI');\n      const sourceSet = engine.block.getSourceSet(\n        fillId,\n        'fill/image/sourceSet'\n      );\n\n      if (sourceSet.length > 0 || fileUri !== '') return true;\n\n      // If we are in a processing state we do not have a imageFileURI or\n      // source set set (to show the loading spinner), but the feature is still\n      // enabled.\n      const metadata = getBGRemovalMetadata(cesdk, selectedId);\n      return metadata.status === 'PROCESSING';\n    }\n\n    return false;\n  });\n}\n", "import type CreativeEditorSDK from '@cesdk/cesdk-js';\nimport { type Source } from '@cesdk/cesdk-js';\nimport {\n  segmentForeground,\n  applySegmentationMask,\n  type Config\n} from '@imgly/background-removal';\n\nimport throttle from 'lodash/throttle';\n\nimport {\n  getBGRemovalMetadata,\n  recoverInitialImageData,\n  isMetadataConsistent,\n  setBGRemovalMetadata\n} from './utils';\n\n/**\n * Triggers the background removal process.\n */\nexport async function processBackgroundRemoval(\n  cesdk: CreativeEditorSDK,\n  blockId: number,\n  configuration: Config\n) {\n  const blockApi = cesdk.engine.block;\n  if (!blockApi.hasFill(blockId))\n    throw new Error('Block has no fill to remove the background from');\n\n  const fillId = blockApi.getFill(blockId);\n\n  // Get the current image URI and source set as initial values.\n  const initialSourceSet = blockApi.getSourceSet(\n    fillId,\n    'fill/image/sourceSet'\n  );\n  const initialImageFileURI = blockApi.getString(\n    fillId,\n    'fill/image/imageFileURI'\n  );\n\n  try {\n    // Clear values in the engine to trigger the loading spinner\n    blockApi.setString(fillId, 'fill/image/imageFileURI', '');\n    blockApi.setSourceSet(fillId, 'fill/image/sourceSet', []);\n\n    const metadata = getBGRemovalMetadata(cesdk, blockId);\n    setBGRemovalMetadata(cesdk, blockId, {\n      ...metadata,\n      version: PLUGIN_VERSION,\n      initialSourceSet,\n      initialImageFileURI,\n      blockId,\n      fillId,\n      status: 'PROCESSING'\n    });\n\n    const uriToProcess =\n      // Source sets have priority in the engine\n      initialSourceSet.length > 0\n        ? // Choose the highest resolution image in the source set\n          initialSourceSet.sort(\n            (a, b) => b.width * b.height - a.height * a.width\n          )[0].uri\n        : initialImageFileURI;\n\n    // Creating the mask from the highest resolution image\n    const mask = await segmentForeground(uriToProcess, configuration);\n\n    if (initialSourceSet.length > 0) {\n      // Source set code path\n      // ====================\n      const uploaded = await maskSourceSet<Source>(\n        cesdk,\n        blockId,\n        initialSourceSet,\n        mask,\n        configuration\n      );\n      if (uploaded == null) return;\n\n      if (uploaded.every((url) => url == null)) {\n        throw new Error('Could not upload any BG removed image');\n      }\n\n      const newSourceSet = initialSourceSet.map((source, index) => {\n        return {\n          ...source,\n          uri: uploaded[index]\n        };\n      });\n\n      setBGRemovalMetadata(cesdk, blockId, {\n        version: PLUGIN_VERSION,\n        initialSourceSet,\n        initialImageFileURI,\n        blockId,\n        fillId,\n        status: 'PROCESSED_WITHOUT_BG',\n        removedBackground: newSourceSet\n      });\n      blockApi.setSourceSet(fillId, 'fill/image/sourceSet', newSourceSet);\n    } else {\n      // ImageFileURI code path\n      // ======================\n      const uploaded = await maskSourceSet<{ uri: string }>(\n        cesdk,\n        blockId,\n        [{ uri: uriToProcess }],\n        mask,\n        configuration\n      );\n      if (uploaded == null) return;\n\n      const uploadedUrl = uploaded[0];\n      if (uploadedUrl == null) {\n        throw new Error('Could not upload BG removed image');\n      }\n\n      setBGRemovalMetadata(cesdk, blockId, {\n        version: PLUGIN_VERSION,\n        initialSourceSet,\n        initialImageFileURI,\n        blockId,\n        fillId,\n        status: 'PROCESSED_WITHOUT_BG',\n        removedBackground: uploadedUrl\n      });\n      blockApi.setString(fillId, 'fill/image/imageFileURI', uploadedUrl);\n    }\n    // Finally, create an undo step\n    cesdk.engine.editor.addUndoStep();\n  } catch (error) {\n    if (cesdk.engine.block.isValid(blockId)) {\n      setBGRemovalMetadata(cesdk, blockId, {\n        version: PLUGIN_VERSION,\n        initialSourceSet,\n        initialImageFileURI,\n        blockId,\n        fillId,\n        status: 'ERROR'\n      });\n\n      recoverInitialImageData(cesdk, blockId);\n    }\n    // eslint-disable-next-line no-console\n    console.log(error);\n  }\n}\n\nasync function maskSourceSet<T extends { uri: string }>(\n  cesdk: CreativeEditorSDK,\n  blockId: number,\n  urisOrSources: T[],\n  mask: Blob,\n  configurationFromArgs: Config\n): Promise<string[] | undefined> {\n  const configuration = {\n    ...configurationFromArgs,\n    progress: throttle((key, current, total) => {\n      const metadataDuringProgress = getBGRemovalMetadata(cesdk, blockId);\n      if (\n        metadataDuringProgress.status !== 'PROCESSING' ||\n        !isMetadataConsistent(cesdk, blockId)\n      )\n        return;\n      configurationFromArgs.progress?.(key, current, total);\n      setBGRemovalMetadata(cesdk, blockId, {\n        ...metadataDuringProgress,\n        progress: { key, current, total }\n      });\n    }, 100)\n  };\n\n  const masked = await Promise.all(\n    urisOrSources.map(async (source): Promise<[Blob, T]> => {\n      // Applying the mask to the original image\n      const blob = await applySegmentationMask(source.uri, mask, configuration);\n      return [blob, source];\n    })\n  );\n\n  // Check for externally changed state while we were applying the mask and\n  // do not proceed if the state was reset.\n  if (\n    getBGRemovalMetadata(cesdk, blockId).status !== 'PROCESSING' ||\n    !isMetadataConsistent(cesdk, blockId)\n  )\n    return;\n\n  const uploaded = await Promise.all(\n    masked.map(async ([blob, source]): Promise<[string, T]> => {\n      const pathname = new URL(source.uri).pathname;\n      const parts = pathname.split('/');\n      const filename = parts[parts.length - 1];\n\n      const uploadedAssets = await cesdk.unstable_upload(\n        new File([blob], filename, { type: blob.type }),\n        () => {\n          // TODO Delegate process to UI component\n        }\n      );\n\n      const url = uploadedAssets.meta?.uri;\n      if (url == null) {\n        throw new Error('Could not upload BG removed image');\n      }\n      return [url, source];\n    })\n  );\n\n  // Check for externally changed state while we were uploading and\n  // do not proceed if the state was reset.\n  if (\n    getBGRemovalMetadata(cesdk, blockId).status !== 'PROCESSING' ||\n    !isMetadataConsistent(cesdk, blockId)\n  )\n    return;\n\n  return uploaded.map(([url]) => url);\n}\n", "import type CreativeEditorSDK from '@cesdk/cesdk-js';\n\nimport {\n  clearBGRemovalMetadata,\n  fixDuplicateMetadata,\n  getBGRemovalMetadata,\n  isDuplicate,\n  isMetadataConsistent\n} from './utils';\nimport { BG_REMOVAL_ID, FEATURE_ID } from './constants';\nimport { registerComponents } from './registerComponents';\nimport { enableFeatures } from './enableFeatures';\nimport { processBackgroundRemoval } from './processBackgroundRemoval';\nimport type { Config as BackgroundRemovalConfiguration } from '@imgly/background-removal';\n\nexport interface PluginConfiguration {\n  backgroundRemoval?: BackgroundRemovalConfiguration;\n}\n\nexport default (pluginConfiguration: PluginConfiguration = {}) => {\n  const backgroundRemovalConfiguration: BackgroundRemovalConfiguration =\n    pluginConfiguration?.backgroundRemoval ?? {};\n\n  return {\n    initialize() {},\n\n    update() {},\n\n    initializeUserInterface({ cesdk }: { cesdk: CreativeEditorSDK }) {\n      cesdk.engine.event.subscribe([], async (events) => {\n        events.forEach((e) => {\n          const id = e.block;\n          if (\n            !cesdk.engine.block.isValid(id) ||\n            !cesdk.engine.block.hasMetadata(id, BG_REMOVAL_ID)\n          ) {\n            return;\n          }\n\n          if (e.type === 'Created') {\n            const metadata = getBGRemovalMetadata(cesdk, id);\n            if (isDuplicate(cesdk, id, metadata)) {\n              fixDuplicateMetadata(cesdk, id);\n            }\n          } else if (e.type === 'Updated') {\n            handleUpdateEvent(cesdk, id, backgroundRemovalConfiguration);\n          }\n        });\n      });\n\n      registerComponents(cesdk);\n      enableFeatures(cesdk);\n    }\n  };\n};\n\n/**\n * Handle every possible state of the background removal state if the block was\n * updated.\n */\nasync function handleUpdateEvent(\n  cesdk: CreativeEditorSDK,\n  blockId: number,\n  configuration: BackgroundRemovalConfiguration\n) {\n  const metadata = getBGRemovalMetadata(cesdk, blockId);\n\n  switch (metadata.status) {\n    case 'PENDING': {\n      if (\n        cesdk.feature.unstable_isEnabled(FEATURE_ID, {\n          engine: cesdk.engine\n        })\n      ) {\n        processBackgroundRemoval(cesdk, blockId, configuration);\n      }\n      break;\n    }\n\n    case 'PROCESSING':\n    case 'PROCESSED_WITH_BG':\n    case 'PROCESSED_WITHOUT_BG': {\n      if (!isMetadataConsistent(cesdk, blockId)) {\n        clearBGRemovalMetadata(cesdk, blockId);\n      }\n      break;\n    }\n\n    default: {\n      // We do not care about other states\n    }\n  }\n}\n", "import plugin, { type PluginConfiguration } from './plugin';\n\nimport { BG_REMOVAL_ID } from './constants';\n\nconst Plugin = (pluginConfiguration?: PluginConfiguration) => ({\n  name: BG_REMOVAL_ID,\n  version: PLUGIN_VERSION,\n  ...plugin(pluginConfiguration)\n});\n\nexport default Plugin;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/plugin.d.ts

@@ -0,0 +1,13 @@
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import type { Config as BackgroundRemovalConfiguration } from '@imgly/background-removal';
+export interface PluginConfiguration {
+    backgroundRemoval?: BackgroundRemovalConfiguration;
+}
+declare const _default: (pluginConfiguration?: PluginConfiguration) => {
+    initialize(): void;
+    update(): void;
+    initializeUserInterface({ cesdk }: {
+        cesdk: CreativeEditorSDK;
+    }): void;
+};
+export default _default;

package/dist/processBackgroundRemoval.d.ts

@@ -0,0 +1,6 @@
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import { type Config } from '@imgly/background-removal';
+/**
+ * Triggers the background removal process.
+ */
+export declare function processBackgroundRemoval(cesdk: CreativeEditorSDK, blockId: number, configuration: Config): Promise<void>;

package/dist/registerComponents.d.ts

@@ -0,0 +1,6 @@
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+/**
+ * Registers the components that can be used to remove the background of
+ * a block.
+ */
+export declare function registerComponents(cesdk: CreativeEditorSDK): void;

package/dist/types.d.ts

@@ -0,0 +1,38 @@
+import { type Source } from '@cesdk/cesdk-js';
+export type BGRemovalIdle = {
+    status: 'IDLE';
+};
+export type BGRemovalPending = {
+    status: 'PENDING';
+};
+export type BGRemovalProcessing = {
+    version: string;
+    status: 'PROCESSING';
+    initialImageFileURI: string;
+    initialSourceSet: Source[];
+    blockId: number;
+    fillId: number;
+    progress?: {
+        key: string;
+        current: number;
+        total: number;
+    };
+};
+export type BGRemovalProcessed = {
+    version: string;
+    status: 'PROCESSED_WITH_BG' | 'PROCESSED_WITHOUT_BG';
+    initialImageFileURI: string;
+    initialSourceSet: Source[];
+    blockId: number;
+    fillId: number;
+    removedBackground: string | Source[];
+};
+export type BGRemovalError = {
+    version: string;
+    status: 'ERROR';
+    initialImageFileURI: string;
+    initialSourceSet: Source[];
+    blockId: number;
+    fillId: number;
+};
+export type BGRemovalMetadata = BGRemovalIdle | BGRemovalError | BGRemovalPending | BGRemovalProcessing | BGRemovalProcessed;

package/dist/utils.d.ts

@@ -0,0 +1,46 @@
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import { BGRemovalMetadata } from './types';
+/**
+ * Sets the metadata for the background removal state.
+ */
+export declare function setBGRemovalMetadata(cesdk: CreativeEditorSDK, id: number, metadata: BGRemovalMetadata): void;
+/**
+ * Returns the current metadata for the background removal state. If no metadata
+ * is set on the given block, it will return an IDLE state.
+ */
+export declare function getBGRemovalMetadata(cesdk: CreativeEditorSDK, id: number): BGRemovalMetadata;
+/**
+ * If BG Removal metadata is set, it will be cleared.
+ */
+export declare function clearBGRemovalMetadata(cesdk: CreativeEditorSDK, id: number): void;
+/**
+ * Detect if the block has been duplicated with processed or processing
+ * background removal. In that case the background removal state is still
+ * valid, but blockId and fillId have changed.
+ */
+export declare function isDuplicate(cesdk: CreativeEditorSDK, blockId: number, metadata: BGRemovalMetadata): boolean;
+/**
+ * Fixes the metadata if the block has been duplicated, i.e. the blockId and
+ * fillId will be updated to the current block/fill.
+ *
+ * Please note: Call this method only on duplicates (see isDuplicate).
+ */
+export declare function fixDuplicateMetadata(cesdk: CreativeEditorSDK, blockId: number): void;
+/**
+ * Check if the image has a consisten metadata state. A inconsistent state is
+ * caused by outside changes of the fill data.
+ *
+ * @returns true if the metadata is consistent, false otherwise
+ */
+export declare function isMetadataConsistent(cesdk: CreativeEditorSDK, blockId: number): boolean;
+/**
+ * Toggle between the background removed image and the original image if either
+ * in the state "PROCESSED_WITH_BG" or "PROCESSED_WITHOUT_BG". Otherwise do
+ * nothing.
+ */
+export declare function toggleBackgroundRemovalData(cesdk: CreativeEditorSDK, blockId: number): void;
+/**
+ * Recover the initial values to avoid the loading spinner and have the same
+ * state as before the background removal was started.
+ */
+export declare function recoverInitialImageData(cesdk: CreativeEditorSDK, blockId: number): void;

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@imgly/plugin-background-removal-web",
+  "version": "0.1.0-rc.0",
+  "description": "Background Removal plugin for the CE.SDK editor",
+  "keywords": [
+    "CE.SDK",
+    "plugin",
+    "background-removal",
+    "client-side",
+    "data-privacy",
+    "image-segmentation",
+    "image-matting",
+    "onnx"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/imgly/plugin-background-removal-web.git"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": {
+    "name": "IMG.LY GmbH",
+    "email": "support@img.ly",
+    "url": "https://img.ly"
+  },
+  "bugs": {
+    "email": "support@img.ly"
+  },
+  "source": "./src/index.ts",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "homepage": "https://img.ly/products/creative-sdk",
+  "files": [
+    "LICENSE.md",
+    "README.md",
+    "CHANGELOG.md",
+    "dist/",
+    "bin/"
+  ],
+  "scripts": {
+    "start": "npm run watch",
+    "clean": "npx rimraf dist",
+    "build": "npm run clean && node scripts/build.mjs && yarn run types:create",
+    "watch": "npm run clean && node scripts/watch.mjs",
+    "publish:latest": "npm run build && npm publish --tag latest --access public",
+    "publish:next": "npm run build && npm publish --tag next --access public",
+    "check:all": "concurrently -n lint,type,pretty \"yarn check:lint\" \"yarn check:type\" \"yarn check:pretty\"",
+    "check:lint": "eslint --max-warnings 0 './src/**/*.{ts,tsx}'",
+    "check:pretty": "prettier --list-different './src/**/*.{ts,tsx}'",
+    "check:type": "tsc --noEmit",
+    "types:create": "tsc --emitDeclarationOnly"
+  },
+  "devDependencies": {
+    "@cesdk/cesdk-js": "1.20.0-rc.0",
+    "@types/ndarray": "^1.0.14",
+    "chalk": "^5.3.0",
+    "concurrently": "^8.2.2",
+    "esbuild": "^0.19.11",
+    "eslint": "^8.51.0",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "@cesdk/cesdk-js": "1.20.0-rc.0"
+  },
+  "dependencies": {
+    "@imgly/background-removal": "^1.4.1",
+    "lodash": "^4.17.21"
+  }
+}