@pexip/media-processor 22.0.0 → 22.2.0

package/dist/common/backends/webgl/blur.js

@@ -5,11 +5,12 @@ import { m3 } from '../../m3';
 import { createFrameBuffer, createGLProgram, createMaskTexture, createRGBAFrameTexture, } from './webglUtils';
 import vertexSrc from './shaders/matrix.vert';
 import fragmentSrc from './shaders/dualFilterBlur.frag';
-const clampBlurAmount = clamping(1, 9);
+const MAX_BLUR_LEVEL = 9;
+const clampBlurAmount = clamping(1, MAX_BLUR_LEVEL);
 /**
  * Blur provided frame
  */
-export const createBlurRenderer = (processor, pass, redOnly = false) => {
+export const createBlurRenderer = (processor, redOnly = false) => {
     const { gl, program, attribLocations, uniformLocations, floatSingleChannelSupported, floatFullChannelSupported, release, } = createGLProgram(processor, {
         attribs: {
             position: 'a_position',
@@ -62,23 +63,19 @@ export const createBlurRenderer = (processor, pass, redOnly = false) => {
     };
     const createFramebufferAndTexture = (idx) => {
         // Avoid fractional value
-        const width = Math.trunc(processor.width / 2 ** idx);
-        const height = Math.trunc(processor.height / 2 ** idx);
+        const width = Math.max(Math.trunc(processor.width / 2 ** idx), 1);
+        const height = Math.max(Math.trunc(processor.height / 2 ** idx), 1);
         const texture = redOnly
             ? createMaskTexture(gl, width, height, true, floatSingleChannelSupported, floatFullChannelSupported)
             : createRGBAFrameTexture(gl, width, height, true, floatFullChannelSupported);
         const frameBuffer = createFrameBuffer(gl, texture);
         return { texture, frameBuffer, width, height };
     };
-    const generateBlurBuffers = (pass, offset = 0) => {
-        const length = Math.max(clampBlurAmount(offset + pass) - offset, 0);
-        return Array.from({
-            length,
-        }).map((_, currentIdx) => createFramebufferAndTexture(offset + currentIdx));
-    };
-    // Generate multiple FrameBuffers, textures and the widths and heights are of size
+    // Allocate all levels upfront, textures and the widths and heights are of size
     // of half of the previous one. E.g. 640x480 -> 320x240 -> 160x120 -> 80x60
-    const blurBuffers = generateBlurBuffers(pass + 1);
+    const blurBuffers = Array.from({
+        length: MAX_BLUR_LEVEL,
+    }).map((_, currentIdx) => createFramebufferAndTexture(currentIdx));
     return {
         render: (frame, pass) => {
             assert(!gl.isContextLost(), RENDERING_EVENTS.ContextLost);
@@ -98,18 +95,7 @@ export const createBlurRenderer = (processor, pass, redOnly = false) => {
             // Dual filter blur
             // Downsampling
             gl.uniform1i(uniformLocations.downsampling, 1);
-            // Adjust pass number accordingly
-            const currentPass = pass + 1;
-            if (currentPass > blurBuffers.length) {
-                for (const buffer of generateBlurBuffers(currentPass - blurBuffers.length, blurBuffers.length)) {
-                    blurBuffers.push(buffer);
-                }
-            }
-            while (currentPass < blurBuffers.length) {
-                const buffer = blurBuffers.pop();
-                gl.deleteTexture(buffer?.texture ?? null);
-                gl.deleteFramebuffer(buffer?.frameBuffer ?? null);
-            }
+            const currentPass = clampBlurAmount(pass + 1);
             // Skip the first pass
             for (let i = 1; i < currentPass; i++) {
                 const { frameBuffer = null, texture = null, width = processor.width, height = processor.height, } = blurBuffers[i] ?? {};
@@ -134,7 +120,7 @@ export const createBlurRenderer = (processor, pass, redOnly = false) => {
             // Upsampling
             gl.uniform1i(uniformLocations.downsampling, 0);
             // Skip the first pass
-            for (let i = pass - 1; i >= 0; i--) {
+            for (let i = currentPass - 2; i >= 0; i--) {
                 const { frameBuffer = null, texture = null, width = processor.width, height = processor.height, } = blurBuffers[i] ?? {};
                 // console.log(`Drawing upsampling pass ${i}, ${width}x${height}`);
                 // Setup to draw to the frame buffer

package/dist/common/backends/webgl/renderer.js

@@ -1,5 +1,5 @@
 import { assert } from '@pexip/utils';
-import { BACKGROUND_BLUR_AMOUNT, PROCESSING_HEIGHT, PROCESSING_WIDTH, RENDERING_EVENTS, STRONG_EDGE_BLUR_AMOUNT, } from '../../constants';
+import { PROCESSING_HEIGHT, PROCESSING_WIDTH, RENDERING_EVENTS, STRONG_EDGE_BLUR_AMOUNT, } from '../../constants';
 import { createLazyProps, handleWebGLContextLoss } from '../../utils';
 import { createBinaryMaskRenderer } from './binaryMask';
 import { createBlendRenderer } from './blender';
@@ -25,7 +25,7 @@ export const createRenderer = (renderEventHandlers, canvas = new OffscreenCanvas
     const rendererCreator = {
         backgroundImageRenderer: () => createTextureRenderer(canvas, false),
         blendRenderer: () => createBlendRenderer(canvas),
-        blurRenderer: () => createBlurRenderer(canvas, BACKGROUND_BLUR_AMOUNT),
+        blurRenderer: () => createBlurRenderer(canvas),
         canvasRenderer: () => createCanvasRenderer(canvas),
         frameDownsampler2: () => createTextureToTextureRenderer(canvas, false, true, halfWidth, halfHeight),
         frameDownsampler4: () => createTextureToTextureRenderer(canvas, false, true, quarterWidth, quarterHeight),
@@ -34,9 +34,9 @@ export const createRenderer = (renderEventHandlers, canvas = new OffscreenCanvas
         jointBilateralFilterRenderer2: () => createJointBilateralFilterRenderer(canvas, halfWidth, halfHeight),
         jointBilateralFilterRenderer4: () => createJointBilateralFilterRenderer(canvas, quarterWidth, quarterHeight),
         jointBilateralFilterRenderer: () => createJointBilateralFilterRenderer(canvas, canvas.width, canvas.height),
-        lightWrapBlurRenderer: () => createBlurRenderer(canvas, BACKGROUND_BLUR_AMOUNT),
+        lightWrapBlurRenderer: () => createBlurRenderer(canvas),
         maskBlurRenderer: () => createTentBlurRenderer(canvas, canvas.width, canvas.height),
-        strongMaskBlurRenderer: () => createBlurRenderer(canvas, STRONG_EDGE_BLUR_AMOUNT),
+        strongMaskBlurRenderer: () => createBlurRenderer(canvas),
         maskDownsampler2: () => createTextureToTextureRenderer(canvas, true, false, halfWidth, halfHeight),
         maskDownsampler4: () => createTextureToTextureRenderer(canvas, true, false, quarterWidth, quarterHeight),
         maskRenderer: () => createTextureRenderer(canvas, true),

package/dist/common/backends/webgpu/dualFilterBlur.js

@@ -2,7 +2,8 @@ import { assert } from '@pexip/utils';
 import { RENDERING_EVENTS } from '../../constants';
 import blurComputeShader from './shaders/dualBlurComputeShader.wgsl';
 import { clamping } from '../../utils';
-const clampBlurAmount = clamping(1, 9);
+const MAX_BLUR_LEVEL = 9;
+const clampBlurAmount = clamping(1, MAX_BLUR_LEVEL);
 export const createBlurRenderer = (device, width, height, textureFormat, isContextLost) => {
     const shaderModule = device.createShaderModule({
         label: 'dual blur compute shader',
@@ -34,103 +35,80 @@ export const createBlurRenderer = (device, width, height, textureFormat, isConte
         addressModeU: 'clamp-to-edge',
         addressModeV: 'clamp-to-edge',
     });
-    // Helper to create a texture of given size
-    const createTexture = (w, h) => device.createTexture({
-        label: 'dual filter blur texture',
-        format: textureFormat,
-        size: [w, h],
-        usage: GPUTextureUsage.TEXTURE_BINDING |
-            GPUTextureUsage.RENDER_ATTACHMENT,
-    });
-    // --- State for persistent textures and bind groups ---
-    let blurTextures = [];
-    let lastWidth = -1;
-    let lastHeight = -1;
-    let downsampleRenderPassDescriptor = [];
-    let upsampleRenderPassDescriptor = [];
-    let downsampleBindGroups = [];
-    let upsampleBindGroups = [];
+    // Allocate all levels upfront at max blur depth
+    const blurTextures = [];
+    for (let i = 0; i < MAX_BLUR_LEVEL; i++) {
+        const w = Math.max(Math.trunc(width / 2 ** i), 1);
+        const h = Math.max(Math.trunc(height / 2 ** i), 1);
+        const texture = device.createTexture({
+            label: `dual filter blur texture level ${i}`,
+            format: textureFormat,
+            size: [w, h],
+            usage: GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        blurTextures.push({
+            texture,
+            view: texture.createView(),
+            width: w,
+            height: h,
+        });
+    }
+    // Pre-create all downsample bind groups: blurTextures[i-1] → blurTextures[i]
+    const downsampleBindGroups = [];
+    const downsampleRenderPassDescriptors = [];
+    for (let i = 2; i < MAX_BLUR_LEVEL; i++) {
+        const src = blurTextures[i - 1];
+        const dst = blurTextures[i];
+        assert(src);
+        assert(dst);
+        downsampleBindGroups.push(device.createBindGroup({
+            layout: downsamplePipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: sampler },
+                { binding: 1, resource: src.view },
+            ],
+        }));
+        downsampleRenderPassDescriptors.push({
+            label: `downsample render pass ${i}`,
+            colorAttachments: [
+                { loadOp: 'load', storeOp: 'store', view: dst.view },
+            ],
+        });
+    }
+    // Pre-create all upsample bind groups: blurTextures[i+1] → blurTextures[i]
+    // Index 0 = deepest pair (MAX_BLUR_LEVELS-1 → MAX_BLUR_LEVEL-2)
+    const upsampleBindGroups = [];
+    const upsampleRenderPassDescriptors = [];
+    for (let i = MAX_BLUR_LEVEL - 2; i >= 0; i--) {
+        const src = blurTextures[i + 1];
+        const dst = blurTextures[i];
+        assert(src);
+        assert(dst);
+        upsampleBindGroups.push(device.createBindGroup({
+            layout: upsamplePipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: sampler },
+                { binding: 1, resource: src.view },
+            ],
+        }));
+        upsampleRenderPassDescriptors.push({
+            label: `upsample render pass ${i}`,
+            colorAttachments: [
+                { loadOp: 'load', storeOp: 'store', view: dst.view },
+            ],
+        });
+    }
     let cacheFrameTexture = null;
     let cacheFirstDownsampleBindGroup = null;
     let cacheFirstDownsampleRenderPassDescriptor = null;
-    // Helper to (re)generate textures and bind groups if needed
-    function ensureBlurTextures(pass, frameWidth, frameHeight) {
-        const length = clampBlurAmount(pass + 1);
-        if (blurTextures.length !== length ||
-            lastWidth !== frameWidth ||
-            lastHeight !== frameHeight) {
-            // Destroy old textures
-            for (const t of blurTextures) {
-                t.texture.destroy();
-            }
-            blurTextures = [];
-            downsampleBindGroups = [];
-            downsampleRenderPassDescriptor = [];
-            upsampleBindGroups = [];
-            // Invalidate frame cache since firstDst view has changed
-            cacheFrameTexture = null;
-            cacheFirstDownsampleBindGroup = null;
-            for (let i = 0; i < length; i++) {
-                const w = Math.max(Math.trunc(frameWidth / 2 ** i), 1);
-                const h = Math.max(Math.trunc(frameHeight / 2 ** i), 1);
-                const texture = createTexture(w, h);
-                blurTextures.push({
-                    texture,
-                    view: texture.createView(),
-                    width: w,
-                    height: h,
-                });
-            }
-            // Pre-create downsample bind groups: blurTextures[i-1] → blurTextures[i]
-            for (let i = 2; i < blurTextures.length; i++) {
-                const src = blurTextures[i - 1];
-                const dst = blurTextures[i];
-                assert(src);
-                assert(dst);
-                downsampleBindGroups.push(device.createBindGroup({
-                    layout: downsamplePipeline.getBindGroupLayout(0),
-                    entries: [
-                        { binding: 0, resource: sampler },
-                        { binding: 1, resource: src.view },
-                    ],
-                }));
-                downsampleRenderPassDescriptor.push({
-                    label: `downsample render pass ${i}`,
-                    colorAttachments: [
-                        { loadOp: 'load', storeOp: 'store', view: dst.view },
-                    ],
-                });
-            }
-            // Pre-create upsample bind groups: blurTextures[i+1] → blurTextures[i]
-            // Filled in descending order so upsampleBindGroups[0] is the deepest pair.
-            for (let i = blurTextures.length - 2; i >= 0; i--) {
-                const src = blurTextures[i + 1];
-                const dst = blurTextures[i];
-                assert(src);
-                assert(dst);
-                upsampleBindGroups.push(device.createBindGroup({
-                    layout: upsamplePipeline.getBindGroupLayout(0),
-                    entries: [
-                        { binding: 0, resource: sampler },
-                        { binding: 1, resource: src.view },
-                    ],
-                }));
-                upsampleRenderPassDescriptor.push({
-                    label: `upsample render pass ${i}`,
-                    colorAttachments: [
-                        { loadOp: 'load', storeOp: 'store', view: dst.view },
-                    ],
-                });
-            }
-            lastWidth = frameWidth;
-            lastHeight = frameHeight;
-        }
-    }
     return {
         render: (encoder, frame, pass) => {
             assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
-            // Ensure textures and bind groups are up-to-date
-            ensureBlurTextures(pass, width, height);
+            if (!pass) {
+                return frame;
+            }
+            const length = clampBlurAmount(pass + 1);
             const firstDst = blurTextures[1];
             assert(firstDst);
             // Cache the first downsample bind group (frame → blurTextures[1])
@@ -158,34 +136,34 @@ export const createBlurRenderer = (device, width, height, textureFormat, isConte
             firstComputePass.draw(3);
             firstComputePass.end();
             // Subsequent downsampling passes: blurTextures[i-1] → blurTextures[i]
-            for (let i = 2; i < blurTextures.length; i++) {
+            for (let i = 2; i < length; i++) {
                 const dst = blurTextures[i];
                 assert(dst);
                 // downsampleBindGroups[i-1] covers blurTextures[i-1] → blurTextures[i]
                 const bindGroup = downsampleBindGroups[i - 2];
-                const renderPassDescriptor = downsampleRenderPassDescriptor[i - 2];
+                const renderPassDescriptor = downsampleRenderPassDescriptors[i - 2];
                 assert(bindGroup);
                 assert(renderPassDescriptor);
-                const pass = encoder.beginRenderPass(renderPassDescriptor);
-                pass.setPipeline(downsamplePipeline);
-                pass.setBindGroup(0, bindGroup);
-                pass.draw(3);
-                pass.end();
+                const renderPass = encoder.beginRenderPass(renderPassDescriptor);
+                renderPass.setPipeline(downsamplePipeline);
+                renderPass.setBindGroup(0, bindGroup);
+                renderPass.draw(3);
+                renderPass.end();
             }
             // Upsampling passes (deepest level first, up to blurTextures[0])
-            for (let i = 0; i < upsampleBindGroups.length; i++) {
-                const dstIdx = blurTextures.length - 2 - i;
-                const dst = blurTextures[dstIdx];
-                assert(dst);
+            // upsampleBindGroups are indexed from deepest (MAX-2 → MAX-1) at [0]
+            // We need to start from the pair ending at `length-1` and go up to 0
+            const upsampleStartIdx = MAX_BLUR_LEVEL - 1 - (length - 1);
+            for (let i = upsampleStartIdx; i < upsampleBindGroups.length; i++) {
                 const bindGroup = upsampleBindGroups[i];
-                const renderPassDescriptor = upsampleRenderPassDescriptor[i];
+                const renderPassDescriptor = upsampleRenderPassDescriptors[i];
                 assert(bindGroup);
                 assert(renderPassDescriptor);
-                const pass = encoder.beginRenderPass(renderPassDescriptor);
-                pass.setPipeline(upsamplePipeline);
-                pass.setBindGroup(0, bindGroup);
-                pass.draw(3);
-                pass.end();
+                const renderPass = encoder.beginRenderPass(renderPassDescriptor);
+                renderPass.setPipeline(upsamplePipeline);
+                renderPass.setBindGroup(0, bindGroup);
+                renderPass.draw(3);
+                renderPass.end();
             }
             const finalTexture = blurTextures[0];
             assert(finalTexture);
@@ -195,13 +173,14 @@ export const createBlurRenderer = (device, width, height, textureFormat, isConte
             for (const t of blurTextures) {
                 t.texture.destroy();
             }
-            blurTextures = [];
-            downsampleRenderPassDescriptor = [];
-            upsampleRenderPassDescriptor = [];
-            downsampleBindGroups = [];
-            upsampleBindGroups = [];
+            blurTextures.length = 0;
+            downsampleBindGroups.length = 0;
+            downsampleRenderPassDescriptors.length = 0;
+            upsampleBindGroups.length = 0;
+            upsampleRenderPassDescriptors.length = 0;
             cacheFrameTexture = null;
             cacheFirstDownsampleBindGroup = null;
+            cacheFirstDownsampleRenderPassDescriptor = null;
         },
     };
 };

package/dist/common/canvasRenderUtils.d.ts

@@ -1,4 +1,23 @@
-import type { Segmentation } from './types/media';
+/**
+ * Create a reusable converter that transforms a single-channel mask into
+ * RGBA ImageData with values written into the alpha channel.
+ * The returned function reuses the same ImageData buffer across calls.
+ *
+ * @example
+ * ```ts
+ * const toAlphaMask = createAlphaMaskConverter();
+ * const imageData = toAlphaMask(mask);
+ * ctx.putImageData(imageData, 0, 0);
+ * ```
+ */
+export declare const createAlphaMaskConverter: () => (mask: {
+    getAsUint8Array(): Uint8Array;
+    width: number;
+    height: number;
+}) => ImageData;
+export declare const createCpuMaskRenderer: (canvas: OffscreenCanvas) => {
+    render: (imageData: ImageData) => void;
+};
 declare const INTERNAL_CANVAS_KEYS: {
     readonly drawImageDataCanvas: "drawImageDataCanvas";
     readonly maskCanvas: "maskCanvas";
@@ -52,12 +71,12 @@ export declare const clearCanvas: (canvas: OffscreenCanvas) => void;
 export declare const createCanvasRenderUtils: (processingWidth: number, processingHeight: number) => {
     evaluateInput: (inputImage: CanvasImageSource) => OffscreenCanvas;
     renderImageToCanvas: (image: CanvasImageSource, canvas: OffscreenCanvas, dw?: number, dh?: number, options?: CanvasRenderingContext2DOptions) => void;
-    drawBlurEffect: (canvas: OffscreenCanvas, inputImage: CanvasImageSource, segmentations: Segmentation | Segmentation[], foregroundThreshold?: number, backgroundBlurAmount?: number, edgeBlurAmount?: number, flipHorizontal?: boolean) => void;
-    drawOverlayEffect: (canvas: OffscreenCanvas, inputImage: CanvasImageSource, backgroundImage: CanvasImageSource | OffscreenCanvas, segmentations: Segmentation | Segmentation[], foregroundThreshold?: number, backgroundBlurAmount?: number, edgeBlurAmount?: number, flipHorizontal?: boolean) => void;
+    drawBlurEffect: (canvas: OffscreenCanvas, inputImage: CanvasImageSource, mask: CanvasImageSource | OffscreenCanvas, foregroundThreshold?: number, backgroundBlurAmount?: number, edgeBlurAmount?: number, flipHorizontal?: boolean) => void;
+    drawOverlayEffect: (canvas: OffscreenCanvas, inputImage: CanvasImageSource, backgroundImage: CanvasImageSource | OffscreenCanvas, mask: CanvasImageSource | OffscreenCanvas, foregroundThreshold?: number, backgroundBlurAmount?: number, edgeBlurAmount?: number, flipHorizontal?: boolean) => void;
     renderImageToOffScreenCanvas: (image: CanvasImageSource, canvasName: keyof InternalCanvases) => OffscreenCanvas;
     renderImageDataToOffScreenCanvas: (image: ImageData, canvasName: keyof InternalCanvases) => OffscreenCanvas;
     drawAndBlurImageOnOffScreenCanvas: ({ image, blurAmount, offscreenCanvasName, preserveOldDrawing, }: {
-        image: CanvasImageSource;
+        image: CanvasImageSource | OffscreenCanvas;
         blurAmount: number;
         offscreenCanvasName: keyof InternalCanvases;
         preserveOldDrawing?: boolean;

package/dist/common/canvasRenderUtils.js

@@ -1,4 +1,46 @@
 import { resize } from './utils';
+/**
+ * Create a reusable converter that transforms a single-channel mask into
+ * RGBA ImageData with values written into the alpha channel.
+ * The returned function reuses the same ImageData buffer across calls.
+ *
+ * @example
+ * ```ts
+ * const toAlphaMask = createAlphaMaskConverter();
+ * const imageData = toAlphaMask(mask);
+ * ctx.putImageData(imageData, 0, 0);
+ * ```
+ */
+export const createAlphaMaskConverter = () => {
+    let imageData;
+    return (mask) => {
+        const maskData = mask.getAsUint8Array();
+        if (!imageData ||
+            imageData.width !== mask.width ||
+            imageData.height !== mask.height) {
+            imageData = new ImageData(mask.width, mask.height);
+        }
+        const pixels = imageData.data;
+        for (let i = 0; i < maskData.length; i++) {
+            pixels[i * 4 + 3] = maskData[i];
+        }
+        return imageData;
+    };
+};
+export const createCpuMaskRenderer = (canvas) => {
+    let ctx = getCanvasRenderingContext2D(canvas);
+    return {
+        render: (imageData) => {
+            if (canvas.height !== imageData.height ||
+                canvas.width !== imageData.width) {
+                canvas.width = imageData.width;
+                canvas.height = imageData.height;
+                ctx = getCanvasRenderingContext2D(canvas);
+            }
+            ctx.putImageData(imageData, 0, 0);
+        },
+    };
+};
 const INTERNAL_CANVAS_KEYS = {
     drawImageDataCanvas: 'drawImageDataCanvas',
     maskCanvas: 'maskCanvas',
@@ -197,10 +239,8 @@ export const createCanvasRenderUtils = (processingWidth, processingHeight) => {
         }
         return canvas;
     };
-    const createPersonMask = (segmentation, _foregroundThreshold, edgeBlurAmount) => {
-        const backgroundMaskImage = Array.isArray(segmentation)
-            ? segmentation[0]?.canvas
-            : segmentation.canvas;
+    const createPersonMask = (mask, _foregroundThreshold, edgeBlurAmount) => {
+        const backgroundMaskImage = mask;
         if (!backgroundMaskImage) {
             return getCanvas('maskCanvas');
         }
@@ -219,17 +259,14 @@ export const createCanvasRenderUtils = (processingWidth, processingHeight) => {
             preserveOldDrawing: false,
         });
     };
-    const drawBokehEffect = (canvas, inputImage, backgroundImage, segmentations, foregroundThreshold = 0.5, backgroundBlurAmount = 3, edgeBlurAmount = 3, flipHorizontal = false) => {
+    const drawBokehEffect = (canvas, inputImage, backgroundImage, mask, foregroundThreshold = 0.5, backgroundBlurAmount = 3, edgeBlurAmount = 3, flipHorizontal = false) => {
         const blurredImage = drawAndBlurImageOnOffScreenCanvas({
             image: backgroundImage,
             blurAmount: backgroundBlurAmount,
             offscreenCanvasName: 'blurredCanvas',
         });
         const ctx = getCanvasRenderingContext2D(canvas);
-        if (Array.isArray(segmentations) && segmentations.length === 0) {
-            return drawImage(ctx, blurredImage, 0, 0);
-        }
-        const personMask = createPersonMask(segmentations, foregroundThreshold, edgeBlurAmount);
+        const personMask = createPersonMask(mask, foregroundThreshold, edgeBlurAmount);
         ctx.save();
         if (flipHorizontal) {
             flipCanvasHorizontal(canvas);
@@ -250,8 +287,8 @@ export const createCanvasRenderUtils = (processingWidth, processingHeight) => {
         drawWithCompositing(ctx, blurredImage, 'destination-over');
         ctx.restore();
     };
-    const drawBlurEffect = (canvas, inputImage, segmentations, foregroundThreshold = 0.5, backgroundBlurAmount = 3, edgeBlurAmount = 3, flipHorizontal = false) => drawBokehEffect(canvas, inputImage, inputImage, segmentations, foregroundThreshold, backgroundBlurAmount, edgeBlurAmount, flipHorizontal);
-    const drawOverlayEffect = (canvas, inputImage, backgroundImage, segmentations, foregroundThreshold = 0.5, backgroundBlurAmount = 0, edgeBlurAmount = 3, flipHorizontal = false) => drawBokehEffect(canvas, inputImage, backgroundImage, segmentations, foregroundThreshold, backgroundBlurAmount, edgeBlurAmount, flipHorizontal);
+    const drawBlurEffect = (canvas, inputImage, mask, foregroundThreshold = 0.5, backgroundBlurAmount = 3, edgeBlurAmount = 3, flipHorizontal = false) => drawBokehEffect(canvas, inputImage, inputImage, mask, foregroundThreshold, backgroundBlurAmount, edgeBlurAmount, flipHorizontal);
+    const drawOverlayEffect = (canvas, inputImage, backgroundImage, mask, foregroundThreshold = 0.5, backgroundBlurAmount = 0, edgeBlurAmount = 3, flipHorizontal = false) => drawBokehEffect(canvas, inputImage, backgroundImage, mask, foregroundThreshold, backgroundBlurAmount, edgeBlurAmount, flipHorizontal);
     const evaluateInput = (inputImage) => {
         const image = renderImageToOffScreenCanvas(inputImage, 'inputCanvas');
         return image;

package/dist/common/constants.d.ts

@@ -45,6 +45,7 @@ export declare const RENDER_EFFECT: {
 export declare const RENDER_BACKEND: {
     readonly WebGL: "webgl";
     readonly WebGPU: "webgpu";
+    readonly Canvas2D: "canvas2d";
 };
 export type RenderBackend = ExtractValueTypes<typeof RENDER_BACKEND>;
 export type RenderEffects = ExtractValueTypes<typeof RENDER_EFFECT>;

package/dist/common/constants.js

@@ -43,6 +43,7 @@ export const RENDER_EFFECT = {
 export const RENDER_BACKEND = {
     WebGL: 'webgl',
     WebGPU: 'webgpu',
+    Canvas2D: 'canvas2d',
 };
 export const RENDERING_EVENTS = {
     /**

package/dist/common/inferencer.d.ts

@@ -0,0 +1,18 @@
+import { Environment, type CompileOptions, type EnvironmentOptions, type LoadLiteRtOptions, type Tensor } from '@litertjs/core';
+export { Tensor, type CompiledModel, type TensorDetails } from '@litertjs/core';
+export interface RuntimeOptions extends LoadLiteRtOptions {
+}
+export interface ModelCompileOptions extends Omit<CompileOptions, 'environment'> {
+}
+export declare const createInferencer: () => {
+    init: (path: string, runtimeOptions?: RuntimeOptions) => Promise<void>;
+    prepareEnv: (options: EnvironmentOptions) => Promise<void>;
+    loadModel: (modelRef: string | URL | Uint8Array | ReadableStreamDefaultReader<Uint8Array>, options?: ModelCompileOptions) => Promise<void>;
+    release: () => void;
+    run(input: Record<string, Tensor>): Promise<Record<string, Tensor>>;
+    readonly initialized: boolean;
+    readonly environment: Environment | undefined;
+    readonly signatures: Record<string, import("@litertjs/core").SignatureRunner> | undefined;
+    readonly inputs: readonly import("@litertjs/core").TensorDetails[] | undefined;
+    readonly outputs: readonly import("@litertjs/core").TensorDetails[] | undefined;
+};

package/dist/common/inferencer.js

@@ -0,0 +1,60 @@
+import { Environment, loadLiteRt, unloadLiteRt, } from '@litertjs/core';
+export { Tensor } from '@litertjs/core';
+import { assert } from '@pexip/utils';
+export const createInferencer = () => {
+    let runtime;
+    let env;
+    let model;
+    let initialized = false;
+    const init = async (path, runtimeOptions) => {
+        runtime?.delete();
+        runtime = await loadLiteRt(path, runtimeOptions);
+        initialized = true;
+    };
+    const prepareEnv = async (options) => {
+        env?.delete();
+        env = await Environment.create(options);
+    };
+    const loadModel = async (modelRef, options) => {
+        assert(runtime, 'Runtime has not been populated!');
+        model?.delete();
+        model = await runtime.loadAndCompile(modelRef, {
+            environment: env,
+            ...options,
+        });
+    };
+    const release = () => {
+        runtime?.delete();
+        model?.delete();
+        initialized = false;
+        runtime = undefined;
+        model = undefined;
+        env = undefined;
+        unloadLiteRt();
+    };
+    return {
+        init,
+        prepareEnv,
+        loadModel,
+        release,
+        run(input) {
+            assert(model, 'Model has not been compiled!');
+            return model?.run(input);
+        },
+        get initialized() {
+            return initialized;
+        },
+        get environment() {
+            return env;
+        },
+        get signatures() {
+            return model?.signatures;
+        },
+        get inputs() {
+            return model?.getInputDetails();
+        },
+        get outputs() {
+            return model?.getOutputDetails();
+        },
+    };
+};