feat(stickerizer): Added stickerizer as workflow from bg_remova and vectorizer

examples/web/package.json

@@ -14,6 +14,7 @@
     "@imgly/plugin-background-removal-web": "*",
     "@imgly/plugin-cutout-library-web": "*",
     "@imgly/plugin-remote-asset-source-web": "*",
+    "@imgly/plugin-stickerizer-web": "*",
     "@cesdk/cesdk-js": "^1.32.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/web/src/addPlugins.ts

@@ -4,6 +4,7 @@ import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';
 import CutoutLibraryPlugin from '@imgly/plugin-cutout-library-web';
 import RemoteAssetSourcePlugin from '@imgly/plugin-remote-asset-source-web';
 import VectorizerPlugin from '@imgly/plugin-vectorizer-web';
+import StickerizerPlugin from '@imgly/plugin-stickerizer-web';
 
 const ENABLE_DEMO_ASSET_SOURCES = false;
 
@@ -20,6 +21,7 @@ async function addPlugins(cesdk: CreativeEditorSDK): Promise<void> {
         BackgroundRemovalPlugin({ ui: { locations: 'canvasMenu' } })
       ),
       cesdk.addPlugin(VectorizerPlugin({ ui: { locations: 'canvasMenu' } })),
+      cesdk.addPlugin(StickerizerPlugin({ ui: { locations: 'canvasMenu' } })),
       ...addDemoRemoteAssetSourcesPlugins(cesdk)
     ]);
   } catch (error) {

packages/plugin-stickerizer-web/CHANGELOG.md

@@ -0,0 +1,10 @@
+# CHANGELOG
+
+## Version v0.3.0
+
+- Adds background removal provider configuration
+- Updates dependency `@imgly/background-removal` to 1.5.3
+    - Smaller model with the same quality
+    - GPU support
+- Removes lodash from the dependencies
+- Fixes multiple bugs

packages/plugin-stickerizer-web/README.md

@@ -0,0 +1,171 @@
+# 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, provides 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 add @imgly/plugin-background-removal-web
+npm 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-web';
+
+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.addPlugin(BackgroundRemovalPlugin());
+
+await cesdk.createDesignScene();
+```
+
+## Configuration
+
+### Adding Canvas Menu Component
+
+After adding the plugin to CE.SDK, it will register a component that can be
+used inside the canvas menu. It is not added by default but can be included
+using the following configuration:
+
+```typescript
+// Either pass a location via the configuration object, ...
+BackgroundRemovalPlugin({
+  ui: { locations: 'canvasMenu' }
+})
+```
+
+### Configuration of `@imgly/background-removal`
+By default, this plugin uses the `@imgly/background-removal-js` library to remove
+a background from the image fill. All configuration options from this underlying
+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-web';
+
+[...]
+
+await cesdk.addPlugin(BackgroundRemovalPlugin({
+  provider: {
+    type: '@imgly/background-removal',
+    configuration: {
+        publicPath: '...',
+        // All other configuration options 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'
+```
+
+## Custom Background Removal Provider
+
+It is possible to declare a different provider for the background removal process.
+
+```typescript
+BackgroundRemovalPlugin({
+    provider: {
+        type: 'custom',
+        // If the image has only one image file URI defined, this method will
+        // be called. It must return a single new image file URI with the
+        // removed background.
+        processImageFileURI: async (imageFileURI: string) => {
+            const blob = await removeBackground(imageFileURI);
+            const upload = await uploadBlob(blob);
+            return upload;
+        },
+        // Some images have a source set defined which provides multiple images
+        // in different sizes.
+        processSourceSet: async (
+            // Source set for the current block sorted by the resolution.
+            // URI with the highest URI is first
+            sourceSet: {
+                uri: string;
+                width: number;
+                height: number;
+            }[],
+        ) => {
+            // You should call the remove background method on every URI in the
+            // source set. Depending on your service or your algorithm, you
+            // have the following options:
+            // - Return a source set with a single image (will contradict the use-case of source sets and degrades the user experience)
+            // - Create a segmented mask and apply it to every image (not always available)
+            // - Create a new source set by resizing the resulting blob.
+
+            // In this example we will do the last case.
+            // First image has the highest resolution and might be the best
+            // candidate to remove the background.
+            const highestResolution = sourceSet[0];
+            const highestResolutionBlob = await removeBackground(highestResolution.uri);
+            const highestResolutionURI = await uploadBlob(highestResolutionBlob);
+
+            const remainingSources = await Promise.all(
+                sourceSet.slice(1).map((source) => {
+                    // ...
+                    const upload = uploadBlob(/* ... */)
+                    return { ...source, uri: upload };
+                })
+            );
+
+            return [{ ...highestResolution, uri: highestResolutionURI }, remainingSources];
+        }
+    }
+});
+```
+
+Depending on your use case or service you might end up with a blob that you want to upload by the
+configured upload handler of the editor. This might look like the following function:
+
+```typescript
+async function uploadBlob(
+  blob: Blob,
+  initialUri: string,
+  cesdk: CreativeEditorSDK
+) {
+  const pathname = new URL(initialUri).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 processed fill');
+  }
+  return url;
+}
+```

packages/plugin-stickerizer-web/esbuild/config.mjs

@@ -0,0 +1,23 @@
+import chalk from 'chalk';
+import { readFile } from 'fs/promises';
+
+import baseConfig from '../../../esbuild/config.mjs';
+import log from '../../../esbuild/log.mjs';
+
+// 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))
+);
+
+export default ({ isDevelopment }) => {
+  log(
+    `${chalk.yellow('Building version:')} ${chalk.bold(packageJson.version)}`
+  );
+
+  return baseConfig({
+    isDevelopment,
+    external: ['@imgly/background-removal', '@cesdk/cesdk-js'],
+    pluginVersion: packageJson.version
+  });
+};

packages/plugin-stickerizer-web/esbuild/global.d.ts

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

packages/plugin-stickerizer-web/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@imgly/plugin-stickerizer-web",
+  "version": "1.0.0",
+  "description": "Sticker Creation plugin for the CE.SDK editor",
+  "keywords": [
+    "CE.SDK",
+    "plugin",
+    "Sticker",
+    "client-side",
+    "data-privacy",
+    "vectorization",
+    "image-segmentation",
+    "image-matting",
+    "onnx"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/imgly/plugins.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",
+    "purge": "npx rimraf node_modules",
+    "build": "npm run clean && node scripts/build.mjs",
+    "dev": "node scripts/watch.mjs",
+    "dev:wait": "npx wait-on ./dist/index.mjs ./dist/index.d.ts --timeout 30000",
+    "dev:types": "tsc --emitDeclarationOnly --watch --preserveWatchOutput",
+    "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:types\" \"yarn check:pretty\"",
+    "check:lint": "eslint --max-warnings 0 './src/**/*.{ts,tsx}'",
+    "check:pretty": "prettier --list-different './src/**/*.{ts,tsx}'",
+    "check:types": "tsc --noEmit",
+    "types:create": "tsc --emitDeclarationOnly"
+  },
+  "devDependencies": {
+    "@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",
+    "lodash-es": "^4.17.21",
+    "@imgly/plugin-utils": "*"
+  },
+  "peerDependencies": {
+    "@cesdk/cesdk-js": "^1.32.0"
+  },
+  "dependencies": {
+    "@imgly/background-removal": "^1.5.3",
+    "@imgly/vectorizer": "1.0.0"
+  }
+}

packages/plugin-stickerizer-web/scripts/build.mjs

@@ -0,0 +1,4 @@
+import * as esbuild from 'esbuild';
+import config from '../esbuild/config.mjs';
+
+await esbuild.build(config({ isDevelopment: false }));

packages/plugin-stickerizer-web/scripts/watch.mjs

@@ -0,0 +1,5 @@
+import * as esbuild from 'esbuild';
+import config from '../esbuild/config.mjs';
+
+const context = await esbuild.context(config({ isDevelopment: true }));
+await context.watch();

packages/plugin-stickerizer-web/src/constants.ts

@@ -0,0 +1,9 @@
+export const PLUGIN_ID = '@imgly/plugin-stickerizer-web';
+export const PLUGIN_LABEL = 'Stickerize';
+export const PLUGIN_ICON = '@imgly/icons/BGRemove';
+// export const PLUGIN_VERSION = ""; // This is commented out because the version is not defined in this file
+
+export const VECTORIZER_THRESHOLD = 5;
+export const VECTORIZER_TIMEOUT = 30000;
+
+export const BGREMOVE_RESOLUTION_THRESHOLD = 1024;

packages/plugin-stickerizer-web/src/index.ts

@@ -0,0 +1,56 @@
+import {
+  initializeFillProcessing,
+  registerFillProcessingComponents
+} from '@imgly/plugin-utils';
+
+import { EditorPlugin } from '@cesdk/cesdk-js';
+import { processFill, ProviderConfig } from './process';
+
+import { UserInterfaceConfiguration } from './types';
+
+import { PLUGIN_ID, PLUGIN_LABEL, PLUGIN_ICON } from './constants';
+
+export default (pluginConfiguration?: PluginConfiguration) => ({
+  name: PLUGIN_ID,
+  version: PLUGIN_VERSION,
+  ...createPlugin(pluginConfiguration)
+});
+
+export interface PluginConfiguration {
+  ui?: UserInterfaceConfiguration;
+  provider?: ProviderConfig;
+}
+
+const createPlugin = (
+  pluginConfiguration: PluginConfiguration = {}
+): Omit<EditorPlugin, 'name' | 'version'> => {
+  return {
+    initialize({ cesdk }) {
+      if (cesdk == null) return;
+
+      initializeFillProcessing(cesdk, {
+        pluginId: PLUGIN_ID,
+        process: (blockId, metadata) => {
+          processFill(
+            cesdk,
+            blockId,
+            metadata,
+            pluginConfiguration.provider
+          );
+        }
+      });
+
+      const { translationsKeys } = registerFillProcessingComponents(cesdk, {
+        pluginId: PLUGIN_ID,
+        icon: PLUGIN_ICON,
+        locations: pluginConfiguration.ui?.locations
+      });
+
+      cesdk.setTranslations({
+        en: {
+          [translationsKeys.canvasMenuLabel]: PLUGIN_LABEL
+        }
+      });
+    }
+  };
+};