Add initial version of the background removal plugin

.eslintrc.js

@@ -0,0 +1,94 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'react'],
+  env: {
+    browser: true,
+    jest: true
+  },
+  extends: [
+    'airbnb',
+    'airbnb-typescript',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:react-hooks/recommended',
+    'prettier'
+  ],
+  ignorePatterns: [
+    'node_modules/',
+    '.eslintrc.js',
+    '**/dist/**/*',
+    'examples',
+    '**/esbuild/**/*'
+    '**/scripts/**/*'
+  ],
+  globals: {
+    globalThis: 'readonly'
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    project: true
+  },
+  settings: {
+    react: {
+      version: '^18.0.0'
+    }
+  },
+  rules: {
+    'import/extensions': [
+      1,
+      { tsx: 0, ts: 0, json: 1, scss: 1, svg: 1, lazy: 1 }
+    ],
+    'react/jsx-props-no-spreading': 0,
+    'import/no-extraneous-dependencies': 0,
+    'import/no-unresolved': 0,
+    'import/prefer-default-export': 0,
+    'import/no-named-as-default': 0,
+    'import/no-cycle': 0,
+    'import/order': 0,
+    'import/no-relative-packages': 2,
+    '@typescript-eslint/explicit-function-return-type': 0,
+    '@typescript-eslint/explicit-module-boundary-types': 0,
+    '@typescript-eslint/no-use-before-define': 0,
+    '@typescript-eslint/naming-convention': 0,
+    '@typescript-eslint/no-unused-vars': 1,
+    'react/prop-types': 0,
+    'react/no-unused-prop-types': 0,
+    'react/require-default-props': 0, // This rule is unaware of default values in destructuring
+    'react-hooks/exhaustive-deps': ['warn'],
+    'react/jsx-no-bind': 0,
+    'react/no-unstable-nested-components': [2, { allowAsProps: true }],
+    'react/jsx-no-useless-fragment': [2, { allowExpressions: true }],
+    'arrow-body-style': 0,
+    'prefer-arrow-callback': [2, { allowNamedFunctions: true }],
+    'max-classes-per-file': 0,
+    'consistent-return': 0,
+    'no-else-return': 0,
+    'class-methods-use-this': 0,
+    'no-continue': 0,
+    'no-inner-declarations': 0,
+    'no-restricted-syntax': 0,
+    'no-plusplus': 0,
+    'no-param-reassign': 0,
+    'global-require': 0,
+    'no-underscore-dangle': 0,
+    'prefer-destructuring': 0,
+    'no-nested-ternary': 0,
+    'no-restricted-exports': 0,
+    'no-lonely-if': 0,
+    'prefer-regex-literals': 0,
+    'prefer-exponentiation-operator': 0,
+    'valid-typeof': 2,
+    'vars-on-top': 0
+  },
+  overrides: [
+    {
+      files: ['esbuild/*', './types/*'],
+      extends: ['plugin:@typescript-eslint/disable-type-checked']
+    }
+  ]
+};

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: true,
+  arrowParens: 'always',
+  trailingComma: 'none'
+};

examples/web/src/addPlugins.ts

@@ -1,9 +1,12 @@
 import type CreativeEditorSDK from '@cesdk/cesdk-js';
 
+import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';
+
 async function addPlugins(cesdk: CreativeEditorSDK) {
   try {
+    cesdk.unstable_addPlugin(BackgroundRemovalPlugin());
   } catch (error) {
-    console.error("Could not add all plugins: ", error);
+    console.error('Could not add all plugins: ', error);
   }
 }
 

package.json

@@ -4,5 +4,21 @@
   "version": "0.0.0",
   "scripts": {
     "build": ""
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "eslint": "^8.51.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.8.5",
+    "prettier-plugin-organize-imports": "^3.2.2",
+    "pretty-quick": "^3.1.3",
+    "typescript": "^5.3.3"
   }
 }

packages/background-removal/LICENSE.md

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

packages/background-removal/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'
+```

packages/background-removal/esbuild/config.mjs

@@ -0,0 +1,52 @@
+import chalk from 'chalk';
+import { readFile } from 'fs/promises';
+
+// import packageJson from '../package.json' assert { type: 'json' };
+// Avoid the Experimental Feature warning when using the above.
+const packageJson = JSON.parse(
+  await readFile(new URL('../package.json', import.meta.url))
+);
+
+console.log(
+  chalk.yellow('Building version: '),
+  chalk.green(packageJson.version)
+);
+
+const configs = [
+  {
+    entryPoints: ['src/index.ts'],
+    define: {
+      PLUGIN_VERSION: `"${packageJson.version}"`
+    },
+    minify: false,
+    bundle: true,
+    sourcemap: true,
+    external: ['@imgly/background-removal', '@cesdk/cesdk-js', 'lodash'],
+    platform: 'browser',
+    format: 'esm',
+    outfile: 'dist/index.mjs',
+    plugins: [
+      {
+        name: 'reporter',
+        setup(build) {
+          build.onEnd((result) => {
+            console.log(
+              `[${new Date().toLocaleTimeString(undefined, {
+                hour: 'numeric',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false
+              })}] Build ${
+                result.errors.length
+                  ? chalk.red('failed')
+                  : chalk.green('succeeded')
+              }`
+            );
+          });
+        }
+      }
+    ]
+  }
+];
+
+export default configs;

packages/background-removal/esbuild/global.d.ts

@@ -0,0 +1,3 @@
+// These constants here are added by the base esbuild config
+
+declare const PLUGIN_VERSION: string;

packages/background-removal/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@imgly/plugin-background-removal-web",
+  "version": "0.1.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.git"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": {
+    "name": "IMG.LY GmbH",
+    "email": "[email protected]",
+    "url": "https://img.ly"
+  },
+  "bugs": {
+    "email": "[email protected]"
+  },
+  "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": "npm run build && npm publish --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"
+  }
+}

packages/background-removal/scripts/build.mjs

@@ -0,0 +1,5 @@
+import * as esbuild from 'esbuild';
+
+import configs from '../esbuild/config.mjs';
+
+await Promise.all(configs.map(async (config) => await esbuild.build(config)));

packages/background-removal/scripts/watch.mjs

@@ -0,0 +1,19 @@
+import chalk from 'chalk';
+import * as esbuild from 'esbuild';
+
+import configs from '../esbuild/config.mjs';
+
+console.log(
+  `[${new Date().toLocaleTimeString(undefined, {
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  })}] ${chalk.green('Watching...')}`
+);
+
+const contexts = await Promise.all(
+  configs.map((config) => esbuild.context(config))
+);
+
+await Promise.any(contexts.map((ctx) => ctx.watch()));

packages/background-removal/src/constants.ts

@@ -0,0 +1,4 @@
+export const BG_REMOVAL_ID = '@imgly/plugin-background-removal-web';
+export const CANVAS_MENU_COMPONENT_ID = `${BG_REMOVAL_ID}.canvasMenu`;
+export const CANVAS_MENU_COMPONENT_BUTTON_ID = `${CANVAS_MENU_COMPONENT_ID}.button`;
+export const FEATURE_ID = `${BG_REMOVAL_ID}.feature`;