@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/edit-image/remove-bg.md

@@ -1,420 +1,366 @@
-> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Guides](./guides.md) > [Create and Edit Images](./edit-image.md) > [Remove Background](./edit-image/remove-bg.md) > [Plugins](./plugins.md) > [Background Removal](./edit-image/remove-bg.md)
 
 ---
 
-Remove image backgrounds to isolate subjects for compositing, product photography, or creating transparent overlays.
-
-![Remove Background example showing an image with its background removed](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Remove image backgrounds programmatically on the server for automated processing pipelines and batch operations.
 
 > **Reading time:** 10 minutes
 >
 > **Resources:**
 >
 > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-remove-bg-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-remove-bg-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-remove-bg-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-remove-bg-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-remove-bg-server-js)
 
-The `@imgly/plugin-background-removal-web` plugin adds AI-powered background removal directly to the CE.SDK editor. Processing runs locally in the browser using WebAssembly and WebGPU, ensuring privacy since images never leave the client.
+The `@imgly/background-removal-node` package provides AI-powered background removal for Node.js applications. Processing runs entirely on your server using native bindings, eliminating external API dependencies and ensuring data privacy.
 
-```typescript file=@cesdk_web_examples/guides-edit-image-remove-bg-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+```typescript file=@cesdk_web_examples/guides-edit-image-remove-bg-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { removeBackground, type Config } from '@imgly/background-removal-node';
 
-import {
-  BlurAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { DesignEditorConfig } from './design-editor/plugin';
-import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';
-import packageJson from './package.json';
+// Load environment variables
+config();
 
 /**
- * CE.SDK Browser Guide: Remove Background with Plugin
+ * CE.SDK Server Guide: Remove Background with @imgly/background-removal-node
  *
- * Demonstrates adding and configuring the background removal plugin
- * for the CE.SDK editor with various UI placement options.
+ * Demonstrates configuring and using the background removal library
+ * for server-side image processing in Node.js.
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-  version = packageJson.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
-
-    const engine = cesdk.engine;
-    await cesdk.addPlugin(new DesignEditorConfig());
-
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({ include: ['ly.img.image.upload'] })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.blank.*',
-          'ly.img.templates.presentation.*',
-          'ly.img.templates.print.*',
-          'ly.img.templates.social.*',
-          'ly.img.image.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(new PagePresetsAssetSource());
-    await cesdk.addPlugin(new StickerAssetSource());
-    await cesdk.addPlugin(new TextAssetSource());
-    await cesdk.addPlugin(new TextComponentAssetSource());
-    await cesdk.addPlugin(new TypefaceAssetSource());
-    await cesdk.addPlugin(new VectorShapeAssetSource());
-
-    await cesdk.actions.run('scene.create', {
-      page: { width: 800, height: 600, unit: 'Pixel' }
-    });
-
-    // Get page and set dimensions
-    const page = engine.block.findByType('page')[0];
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-
-    // Add the background removal plugin with canvas menu button
-    await cesdk.addPlugin(
-      BackgroundRemovalPlugin({
-        ui: {
-          locations: ['canvasMenu']
-        }
-      })
-    );
-
-    // Create a gradient background (deep teal to soft purple)
-    const gradientFill = engine.block.createFill('gradient/linear');
-    engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [
-      { stop: 0, color: { r: 0.08, g: 0.22, b: 0.35, a: 1 } }, // Deep teal
-      { stop: 1, color: { r: 0.35, g: 0.2, b: 0.45, a: 1 } } // Soft purple
-    ]);
-    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0);
-    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0);
-    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1);
-    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1);
-    engine.block.setFill(page, gradientFill);
-
-    // Create centered title text
-    const titleBlock = engine.block.create('text');
-    engine.block.setString(titleBlock, 'text/text', 'Remove Background');
-    engine.block.setFloat(titleBlock, 'text/fontSize', 140);
-    engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(titleBlock, pageWidth);
-    engine.block.setHeightMode(titleBlock, 'Auto');
-    engine.block.appendChild(page, titleBlock);
-    engine.block.setTextColor(titleBlock, { r: 1, g: 1, b: 1, a: 1 });
-
-    // Create image block with a portrait photo
-    const imageBlock = engine.block.create('graphic');
-    const rectShape = engine.block.createShape('rect');
-    engine.block.setShape(imageBlock, rectShape);
-
-    const imageFill = engine.block.createFill('image');
-    engine.block.setString(
-      imageFill,
-      'fill/image/imageFileURI',
-      'https://img.ly/static/ubq_samples/sample_4.jpg'
-    );
-    engine.block.setFill(imageBlock, imageFill);
-    engine.block.setContentFillMode(imageBlock, 'Cover');
-
-    const imageWidth = 202;
-    const imageHeight = 230;
-    engine.block.setWidth(imageBlock, imageWidth);
-    engine.block.setHeight(imageBlock, imageHeight);
-    engine.block.appendChild(page, imageBlock);
-
-    // Create img.ly logo at bottom center
-    const logoBlock = engine.block.create('graphic');
-    const logoShape = engine.block.createShape('rect');
-    engine.block.setShape(logoBlock, logoShape);
-
-    const logoFill = engine.block.createFill('image');
-    engine.block.setString(
-      logoFill,
-      'fill/image/imageFileURI',
-      'https://img.ly/static/ubq_samples/imgly_logo.jpg'
-    );
-    engine.block.setFill(logoBlock, logoFill);
-    engine.block.setContentFillMode(logoBlock, 'Contain');
-
-    const logoWidth = 72;
-    const logoHeight = 45;
-    engine.block.setWidth(logoBlock, logoWidth);
-    engine.block.setHeight(logoBlock, logoHeight);
-    engine.block.setOpacity(logoBlock, 0.9);
-    engine.block.appendChild(page, logoBlock);
-
-    // Position elements
-    const titleHeight = engine.block.getFrameHeight(titleBlock);
-    const imageGap = 30;
-    const padding = 20;
-
-    // Calculate vertical layout - title and image centered
-    const totalContentHeight = titleHeight + imageGap + imageHeight;
-    const startY = (pageHeight - totalContentHeight) / 2;
-
-    // Position title at top of content area
-    engine.block.setPositionX(titleBlock, 0);
-    engine.block.setPositionY(titleBlock, startY);
-
-    // Position image centered below title
-    engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2);
-    engine.block.setPositionY(imageBlock, startY + titleHeight + imageGap);
-
-    // Position logo at bottom center
-    engine.block.setPositionX(logoBlock, (pageWidth - logoWidth) / 2);
-    engine.block.setPositionY(logoBlock, pageHeight - logoHeight - padding);
-
-    // Select the image to show the canvas menu with BG Removal button
-    engine.block.select(imageBlock);
-
-    // Zoom to fit
-    await engine.scene.zoomToBlock(page, { padding: 40 });
-    engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40);
+
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+  // license: process.env.CESDK_LICENSE, // Optional (trial mode available)
+});
+
+try {
+  // Create a design scene with specific page dimensions
+  engine.scene.create('VerticalStack', {
+    page: { size: { width: 800, height: 600 } },
+  });
+  const page = engine.block.findByType('page')[0];
+
+  const pageWidth = engine.block.getWidth(page);
+  const pageHeight = engine.block.getHeight(page);
+
+  // Create a graphic block with an image that has a background
+  const imageBlock = engine.block.create('graphic');
+
+  // Create a rect shape for the image
+  const rectShape = engine.block.createShape('rect');
+  engine.block.setShape(imageBlock, rectShape);
+
+  // Create an image fill with a sample portrait image
+  const imageFill = engine.block.createFill('image');
+  const imageUri = 'https://img.ly/static/ubq_samples/sample_4.jpg';
+  engine.block.setString(imageFill, 'fill/image/imageFileURI', imageUri);
+
+  // Apply the fill to the graphic block
+  engine.block.setFill(imageBlock, imageFill);
+
+  // Set content fill mode to cover the block
+  engine.block.setContentFillMode(imageBlock, 'Cover');
+
+  // Size and position the image block
+  const imageWidth = 400;
+  const imageHeight = 450;
+  engine.block.setWidth(imageBlock, imageWidth);
+  engine.block.setHeight(imageBlock, imageHeight);
+  engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2);
+  engine.block.setPositionY(imageBlock, (pageHeight - imageHeight) / 2);
+
+  // Add to page
+  engine.block.appendChild(page, imageBlock);
+
+  // Create output directory
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
   }
-}
 
-export default Example;
+  // Configure background removal options
+  const removalConfig: Config = {
+    // Model size: 'small' for speed, 'medium' for balance, 'large' for quality
+    model: 'medium',
+    // Output format and quality
+    output: {
+      format: 'image/png',
+      quality: 0.9,
+    },
+    // Progress callback for monitoring
+    progress: (key, current, total) => {
+      const percentage = Math.round((current / total) * 100);
+      console.log(`  ${key}: ${percentage}%`);
+    },
+  };
+
+  // Export the image block as PNG blob
+  console.log('Removing background...');
+  const imageBlob = await engine.block.export(imageBlock, {
+    mimeType: 'image/png',
+  });
+
+  // Remove background using the configured options
+  const processedBlob = await removeBackground(imageBlob, removalConfig);
+  console.log('✓ Background removed successfully');
+
+  // Convert the processed blob to a data URL and apply it back to the scene
+  const processedBuffer = Buffer.from(await processedBlob.arrayBuffer());
+  const base64Image = processedBuffer.toString('base64');
+  const dataUrl = `data:image/png;base64,${base64Image}`;
+
+  // Update the image fill with the processed image
+  engine.block.setString(imageFill, 'fill/image/imageFileURI', dataUrl);
+  console.log('✓ Applied processed image to scene');
+
+  // Export the final result with transparent background
+  const resultBlob = await engine.block.export(page, { mimeType: 'image/png' });
+  const resultBuffer = Buffer.from(await resultBlob.arrayBuffer());
+  writeFileSync(`${outputDir}/remove-bg-result.png`, resultBuffer);
+  console.log('✓ Exported result to output/remove-bg-result.png');
+
+  console.log('\n✓ Processing complete!');
+  console.log('  Output directory:', outputDir);
+} finally {
+  // Always dispose the engine to free resources
+  engine.dispose();
+}
 ```
 
-This guide covers installing the plugin, configuring UI placement, and customizing the background removal process.
+This guide covers installing the library, configuring processing options, and integrating with CE.SDK for automated image processing pipelines.
 
-## Installing the Plugin
+## Installing the Library
 
-Install the background removal plugin and its ONNX runtime peer dependency:
+Install the background removal library alongside the CE.SDK Node engine:
 
 ```bash
-npm install @imgly/plugin-background-removal-web@$UBQ_VERSION$ onnxruntime-web@1.21.0
+npm install @cesdk/node@$UBQ_VERSION$ @imgly/background-removal-node
 ```
 
-Import the plugin in your application:
+Import the `removeBackground` function and `Config` type:
 
 ```typescript highlight-import
-import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';
+import { removeBackground, type Config } from '@imgly/background-removal-node';
 ```
 
-## Initializing the Editor
+## Initializing the Engine
 
-Set up the CE.SDK editor with asset sources before adding the plugin:
+Initialize the CE.SDK engine in headless mode for server-side processing:
 
 ```typescript highlight-setup
-const engine = cesdk.engine;
-await cesdk.addPlugin(new DesignEditorConfig());
-
-// Add asset source plugins
-await cesdk.addPlugin(new BlurAssetSource());
-await cesdk.addPlugin(new ColorPaletteAssetSource());
-await cesdk.addPlugin(new CropPresetsAssetSource());
-await cesdk.addPlugin(
-  new UploadAssetSources({ include: ['ly.img.image.upload'] })
-);
-await cesdk.addPlugin(
-  new DemoAssetSources({
-    include: [
-      'ly.img.templates.blank.*',
-      'ly.img.templates.presentation.*',
-      'ly.img.templates.print.*',
-      'ly.img.templates.social.*',
-      'ly.img.image.*'
-    ]
-  })
-);
-await cesdk.addPlugin(new EffectsAssetSource());
-await cesdk.addPlugin(new FiltersAssetSource());
-await cesdk.addPlugin(new PagePresetsAssetSource());
-await cesdk.addPlugin(new StickerAssetSource());
-await cesdk.addPlugin(new TextAssetSource());
-await cesdk.addPlugin(new TextComponentAssetSource());
-await cesdk.addPlugin(new TypefaceAssetSource());
-await cesdk.addPlugin(new VectorShapeAssetSource());
-
-await cesdk.actions.run('scene.create', {
-  page: { width: 800, height: 600, unit: 'Pixel' }
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+  // license: process.env.CESDK_LICENSE, // Optional (trial mode available)
 });
 ```
 
-## Adding the Plugin
+The engine runs without a UI, making it suitable for automated workflows and background processing tasks.
 
-Add the plugin to the editor using `cesdk.addPlugin()`. The `ui.locations` option controls where the background removal button appears:
+## Creating an Image Block
 
-```typescript highlight-add-plugin
-// Add the background removal plugin with canvas menu button
-await cesdk.addPlugin(
-  BackgroundRemovalPlugin({
-    ui: {
-      locations: ['canvasMenu']
-    }
-  })
-);
+Create a scene with a graphic block containing an image:
+
+```typescript highlight-create-image
+  // Create a graphic block with an image that has a background
+  const imageBlock = engine.block.create('graphic');
+
+  // Create a rect shape for the image
+  const rectShape = engine.block.createShape('rect');
+  engine.block.setShape(imageBlock, rectShape);
+
+  // Create an image fill with a sample portrait image
+  const imageFill = engine.block.createFill('image');
+  const imageUri = 'https://img.ly/static/ubq_samples/sample_4.jpg';
+  engine.block.setString(imageFill, 'fill/image/imageFileURI', imageUri);
+
+  // Apply the fill to the graphic block
+  engine.block.setFill(imageBlock, imageFill);
+
+  // Set content fill mode to cover the block
+  engine.block.setContentFillMode(imageBlock, 'Cover');
+
+  // Size and position the image block
+  const imageWidth = 400;
+  const imageHeight = 450;
+  engine.block.setWidth(imageBlock, imageWidth);
+  engine.block.setHeight(imageBlock, imageHeight);
+  engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2);
+  engine.block.setPositionY(imageBlock, (pageHeight - imageHeight) / 2);
+
+  // Add to page
+  engine.block.appendChild(page, imageBlock);
+```
+
+## Configuring Background Removal
+
+The `removeBackground` function accepts a configuration object to customize the processing:
+
+```typescript highlight-configure
+// Configure background removal options
+const removalConfig: Config = {
+  // Model size: 'small' for speed, 'medium' for balance, 'large' for quality
+  model: 'medium',
+  // Output format and quality
+  output: {
+    format: 'image/png',
+    quality: 0.9,
+  },
+  // Progress callback for monitoring
+  progress: (key, current, total) => {
+    const percentage = Math.round((current / total) * 100);
+    console.log(`  ${key}: ${percentage}%`);
+  },
+};
 ```
 
-When a user selects an image and clicks the button, the plugin handles the entire workflow: exporting the image, processing it through the AI model, and applying the result back to the scene.
+### Configuration Options
 
-![A BG Removal button added to the Canvas Menu](https://img.ly/docs/cesdk/./screenshot-bg-removal-button-v1.43.0.gif)
+| Option | Type | Description |
+| --- | --- | --- |
+| `model` | `'small'` | `'medium'` | `'large'` | Model size for quality/speed trade-off |
+| `output.format` | string | Output format: `'image/png'`, `'image/webp'`, `'image/jpeg'` |
+| `output.quality` | number | Quality for lossy formats (0-1) |
+| `progress` | function | Callback receiving `(key, current, total)` for progress updates |
+| `debug` | boolean | Enable debug logging |
 
-> **Note:** The plugin requires a correctly configured upload setting. 'local' works for testing but production requires stable storage. See the [Upload Images](./import-media/from-local-source/user-upload.md) guide for details.
+Model selection guidelines:
 
-## UI Placement Options
+- **`'small'`**: Fastest processing, suitable for thumbnails or previews
+- **`'medium'`**: Best balance of quality and speed for most use cases
+- **`'large'`**: Maximum edge quality, slower processing
 
-The plugin supports multiple UI locations:
+## Removing the Background
 
-| Location            | Description                                    |
-| ------------------- | ---------------------------------------------- |
-| `'canvasMenu'`      | Context menu when selecting an image on canvas |
-| `'dock'`            | Panel in the left dock sidebar                 |
-| `'inspectorBar'`    | Top bar of the inspector panel                 |
-| `'navigationBar'`   | Main navigation bar                            |
-| `'canvasBarTop'`    | Top bar above the canvas                       |
-| `'canvasBarBottom'` | Bottom bar below the canvas                    |
+Export the image block and process it with the configured options:
 
-You can specify a single location or an array:
+```typescript highlight-remove-background
+  // Export the image block as PNG blob
+  console.log('Removing background...');
+  const imageBlob = await engine.block.export(imageBlock, {
+    mimeType: 'image/png',
+  });
 
-```typescript
-BackgroundRemovalPlugin({
-  ui: { locations: ['canvasMenu', 'dock'] }
-});
+  // Remove background using the configured options
+  const processedBlob = await removeBackground(imageBlob, removalConfig);
+  console.log('✓ Background removed successfully');
 ```
 
-## Provider Configuration
+The `removeBackground` function accepts various input types:
 
-Configure the underlying background removal library through the `provider` option:
+- **Blob**: Direct blob from CE.SDK export
+- **URL string**: Remote image URL
+- **File path**: Local file path
+- **Buffer**: Node.js Buffer
 
-```typescript
-BackgroundRemovalPlugin({
-  ui: { locations: ['canvasMenu'] },
-  provider: {
-    type: '@imgly/background-removal',
-    configuration: {
-      model: 'medium', // 'small' | 'medium' | 'large'
-      output: {
-        format: 'image/png',
-        quality: 0.9
-      }
-    }
-  }
-});
-```
+## Applying the Result
 
-| Option           | Type      | Description                                  |
-| ---------------- | --------- | -------------------------------------------- | --------- | -------------------------------------- |
-| `model`          | `'small'` | `'medium'`                                   | `'large'` | Model size for quality/speed trade-off |
-| `output.format`  | string    | Output format: `'image/png'`, `'image/webp'` |
-| `output.quality` | number    | Quality for lossy formats (0-1)              |
+Convert the processed blob to a data URL and apply it back to the scene:
 
-The `'medium'` model provides the best balance of quality and speed. Use `'small'` for faster processing or `'large'` for maximum edge quality.
+```typescript highlight-apply-result
+  // Convert the processed blob to a data URL and apply it back to the scene
+  const processedBuffer = Buffer.from(await processedBlob.arrayBuffer());
+  const base64Image = processedBuffer.toString('base64');
+  const dataUrl = `data:image/png;base64,${base64Image}`;
 
-## Custom Provider
+  // Update the image fill with the processed image
+  engine.block.setString(imageFill, 'fill/image/imageFileURI', dataUrl);
+  console.log('✓ Applied processed image to scene');
+```
 
-For advanced use cases, implement a custom background removal provider:
+## Exporting the Final Result
 
-```typescript
-BackgroundRemovalPlugin({
-  provider: {
-    type: 'custom',
-    processImageFileURI: async (imageFileURI: string) => {
-      // Call your own background removal service
-      const response = await fetch('/api/remove-background', {
-        method: 'POST',
-        body: JSON.stringify({ imageUrl: imageFileURI })
-      });
-      const { processedUrl } = await response.json();
-      return processedUrl;
-    },
-    processSourceSet: async (sourceSet) => {
-      // Handle multi-resolution source sets
-      // Process the highest resolution and resize for others
-      return sourceSet;
-    }
-  }
-});
+Export the scene with the processed image as a PNG file:
+
+```typescript highlight-export
+// Export the final result with transparent background
+const resultBlob = await engine.block.export(page, { mimeType: 'image/png' });
+const resultBuffer = Buffer.from(await resultBlob.arrayBuffer());
+writeFileSync(`${outputDir}/remove-bg-result.png`, resultBuffer);
+console.log('✓ Exported result to output/remove-bg-result.png');
 ```
 
-## Creating an Image Block
+PNG format preserves the alpha channel, maintaining the transparent background.
 
-Add an image to the scene for background removal:
+## Cleanup
 
-```typescript highlight-create-image
-// Create image block with a portrait photo
-const imageBlock = engine.block.create('graphic');
-const rectShape = engine.block.createShape('rect');
-engine.block.setShape(imageBlock, rectShape);
-
-const imageFill = engine.block.createFill('image');
-engine.block.setString(
-  imageFill,
-  'fill/image/imageFileURI',
-  'https://img.ly/static/ubq_samples/sample_4.jpg'
-);
-engine.block.setFill(imageBlock, imageFill);
-engine.block.setContentFillMode(imageBlock, 'Cover');
-
-const imageWidth = 202;
-const imageHeight = 230;
-engine.block.setWidth(imageBlock, imageWidth);
-engine.block.setHeight(imageBlock, imageHeight);
-engine.block.appendChild(page, imageBlock);
+Always dispose the engine when processing completes to free resources:
+
+```typescript highlight-cleanup
+// Always dispose the engine to free resources
+engine.dispose();
 ```
 
-Select the image block to display the canvas menu with the background removal button.
+The `finally` block ensures cleanup happens even if an error occurs during processing.
 
-## Performance Considerations
+## Additional Functions
+
+The library provides additional functions for specialized use cases:
+
+```typescript
+import {
+  removeBackground,
+  removeForeground,
+  segmentForeground,
+  applySegmentationMask
+} from '@imgly/background-removal-node';
 
-The first background removal operation downloads AI models (~40MB) which are then cached:
+// Remove foreground instead of background
+const foregroundRemoved = await removeForeground(image, config);
 
-- **Model caching**: First run fetches models; subsequent runs use the cache
-- **GPU acceleration**: WebGPU provides faster processing than WebGL fallback
-- **CORS headers**: For optimal performance, configure these headers on your server:
+// Get just the segmentation mask
+const mask = await segmentForeground(image, config);
 
+// Apply a custom mask to an image
+const masked = await applySegmentationMask(image, mask, config);
 ```
-Cross-Origin-Opener-Policy: same-origin
-Cross-Origin-Embedder-Policy: require-corp
-```
+
+## Performance Considerations
+
+Server-side background removal has different performance characteristics than browser processing:
+
+- **First run**: Downloads AI models (~40MB) which are cached for subsequent runs
+- **Memory usage**: Processing large images requires significant memory; monitor server resources
+- **CPU utilization**: Background removal is CPU-intensive; consider dedicated workers for high-volume processing
+- **Batch optimization**: Process images sequentially or with limited concurrency to avoid memory exhaustion
+
+For production deployments, consider:
+
+- Pre-loading models during server startup
+- Implementing job queues for batch processing
+- Setting memory limits per processing task
+- Using horizontal scaling for high-volume workloads
 
 ## Troubleshooting
 
-| Issue                  | Solution                                                          |
-| ---------------------- | ----------------------------------------------------------------- |
-| Model download slow    | First run fetches models; subsequent runs use cache               |
-| Poor edge quality      | Use higher resolution input or 'medium'/'large' model             |
-| Out of memory          | Reduce image size before processing                               |
-| WebGL errors           | Check browser WebGL support; try different device setting         |
-| Plugin not showing     | Verify plugin added and UI location configured                    |
-| Result not transparent | Ensure export uses PNG format (JPEG doesn't support transparency) |
+| Issue | Solution |
+| --- | --- |
+| Model download slow | First run fetches models; subsequent runs use cache |
+| Out of memory | Reduce image size or process fewer images concurrently |
+| Poor edge quality | Use higher resolution input or 'medium'/'large' model |
+| File not found | Verify file paths are absolute or relative to working directory |
+| Permission denied | Check file system permissions for output directory |
 
 ## Next Steps
 
+- [Chroma Key](./filters-and-effects/chroma-key-green-screen.md) - Alternative background removal using green screen
 - [Export Overview](./export-save-publish/export/overview.md) - Export options for images with transparency
-- [Vectorize Images](./edit-image/vectorize.md) - Convert images to vector graphics
 - [Replace Colors](./edit-image/replace-colors.md) - Replace specific colors in images
 
+
+
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js documentation
 - **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
-- **[Web Documentation](./js.md)** - Interactive documentation with examples
-- **[Support](mailto:support@img.ly)** - Contact IMG.LY support
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support