rn-remove-image-bg 0.0.15 → 0.0.16

package/lib/ImageProcessing.web.d.ts

@@ -1,7 +1,7 @@
 /**
- * Web implementation using @huggingface/transformers
- * Uses BRIAAI RMBG-1.4 model for background removal.
- * Loads from CDN to bypass Metro bundler issues.
+ * Web implementation using Inline Web Worker & WebGPU.
+ * Moves all heavy processing to a background thread to prevent UI freezing.
+ * Loads @huggingface/transformers from CDN to bypass Metro bundler issues.
  */
 export type OutputFormat = 'PNG' | 'WEBP';
 export interface RemoveBgImageOptions {
@@ -10,9 +10,6 @@ export interface RemoveBgImageOptions {
     onProgress?: (progress: number) => void;
     debug?: boolean;
 }
-/**
- * Remove background from image
- */
 export declare function removeBgImage(uri: string, options?: RemoveBgImageOptions): Promise<string>;
 export declare const removeBackground: typeof removeBgImage;
 export interface CompressImageOptions {

package/lib/ImageProcessing.web.js

@@ -1,152 +1,194 @@
 /**
- * Web implementation using @huggingface/transformers
- * Uses BRIAAI RMBG-1.4 model for background removal.
- * Loads from CDN to bypass Metro bundler issues.
+ * Web implementation using Inline Web Worker & WebGPU.
+ * Moves all heavy processing to a background thread to prevent UI freezing.
+ * Loads @huggingface/transformers from CDN to bypass Metro bundler issues.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let pipeline = null;
-let loadPromise = null;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let transformersModule = null;
-// Load transformers.js from CDN to avoid Metro bundling issues
-async function loadTransformers() {
-    if (transformersModule)
-        return transformersModule;
-    // Use dynamic import from CDN
-    const cdnUrl = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3';
-    transformersModule = await import(/* webpackIgnore: true */ cdnUrl);
-    return transformersModule;
-}
-async function ensureLoaded(onProgress, debug) {
-    if (pipeline)
-        return pipeline;
-    if (loadPromise) {
-        await loadPromise;
-        return pipeline;
-    }
-    loadPromise = (async () => {
-        if (debug)
-            console.log('[rmbg] Loading model...');
-        const { pipeline: createPipeline, env } = await loadTransformers();
-        env.allowLocalModels = false;
-        env.useBrowserCache = true;
-        onProgress?.(10);
-        pipeline = await createPipeline('image-segmentation', 'briaai/RMBG-1.4', {
-            dtype: 'q8',
+// ==========================================
+// INLINE WORKER CODE (Run in background)
+// ==========================================
+const WORKER_CODE = `
+  let pipeline = null;
+  let env = null;
+
+  // Helper to load image bitmap
+  async function loadImageBitmapFromUrl(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return await createImageBitmap(blob);
+  }
+
+  self.onmessage = async (e) => {
+    const { id, type, payload } = e.data;
+
+    try {
+      if (type === 'init') {
+        if (!pipeline) {
+          // Dynamic import from CDN
+          const transformers = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.3.0/+esm');
+          env = transformers.env;
+          
+          // Configure environment
+          env.allowLocalModels = false;
+          env.useBrowserCache = true;
+          // Try WebGPU, fallback to WASM
+          // env.backends.onnx.wasm.numThreads = 1; // Limit threads if needed
+
+          pipeline = await transformers.pipeline('image-segmentation', 'briaai/RMBG-1.4', {
+            device: 'webgpu', // Attempt WebGPU first
+            dtype: 'q8',      // Quantized for speed
             progress_callback: (info) => {
-                if (onProgress && 'progress' in info && typeof info.progress === 'number') {
-                    onProgress(Math.min(10 + (info.progress / 100) * 50, 60));
-                }
-            },
+               self.postMessage({ id, type: 'progress', payload: info });
+            }
+          });
+        }
+        self.postMessage({ id, type: 'success', payload: true });
+        return;
+      }
+
+      if (type === 'removeBg') {
+        const { uri, format, quality } = payload;
+        
+        if (!pipeline) throw new Error('Pipeline not initialized');
+
+        // 1. Run Inference
+        const results = await pipeline(uri);
+        const result = Array.isArray(results) ? results[0] : results;
+        if (!result || !result.mask) throw new Error('No mask generated');
+
+        // 2. Apply Mask (Pixel Manipulation)
+        // We use OffscreenCanvas if available, or just pixel math
+        // Since we are in a worker, we can't use DOM Image, but we can use ImageBitmap
+        
+        const originalBitmap = await loadImageBitmapFromUrl(uri);
+        const { width, height } = originalBitmap;
+
+        const offscreen = new OffscreenCanvas(width, height);
+        const ctx = offscreen.getContext('2d');
+        ctx.drawImage(originalBitmap, 0, 0);
+        
+        const imageData = ctx.getImageData(0, 0, width, height);
+        const pixelData = imageData.data;
+        
+        // Handle Mask
+        // mask.data is usually 1-channel or 3-channel
+        const mask = result.mask;
+        const maskData = mask.data;
+        
+        // Simple resizing logic if dimensions differ (Nearest Neighbor)
+        // (Preprocessing usually resizes input, so output mask matches input size typically? 
+        // Actually RMBG-1.4 output is fixed size 1024x1024 usually, need resize)
+        
+        const maskW = mask.width;
+        const maskH = mask.height;
+        
+        for (let i = 0; i < pixelData.length; i += 4) {
+           const pixelIndex = i / 4;
+           const x = pixelIndex % width;
+           const y = Math.floor(pixelIndex / width);
+           
+           // Map to mask coordinates
+           const mx = Math.floor(x * (maskW / width));
+           const my = Math.floor(y * (maskH / height));
+           const maskIdx = (my * maskW + mx);
+           
+           // Get Alpha
+           let alpha = 255;
+           if (maskData.length === maskW * maskH) {
+              alpha = maskData[maskIdx];
+           } else {
+              alpha = maskData[maskIdx * mask.channels]; // Assuming channels property or stride
+              // Fallback if channels undefined:
+              if (!mask.channels) alpha = maskData[maskIdx * 3]; // RGB assumption
+           }
+           
+           pixelData[i + 3] = alpha;
+        }
+        
+        ctx.putImageData(imageData, 0, 0);
+        
+        // 3. Convert to Blob/DataURL
+        const blob = await offscreen.convertToBlob({ 
+          type: format === 'WEBP' ? 'image/webp' : 'image/png', 
+          quality: quality / 100 
         });
-        if (debug)
-            console.log('[rmbg] Model ready');
-    })();
-    await loadPromise;
-    return pipeline;
-}
-/**
- * Remove background from image
- */
-export async function removeBgImage(uri, options = {}) {
-    const { format = 'PNG', quality = 100, onProgress, debug = false } = options;
-    if (debug)
-        console.log('[rmbg] Processing:', uri);
-    onProgress?.(5);
-    const segmenter = await ensureLoaded(onProgress, debug);
-    onProgress?.(60);
-    const results = await segmenter(uri);
-    onProgress?.(90);
-    const result = Array.isArray(results) ? results[0] : results;
-    if (!result?.mask)
-        throw new Error('No mask returned');
-    // Apply mask to original image
-    const original = await loadImage(uri);
-    const dataUrl = await applyMask(original, result.mask, format, quality);
-    if (debug)
-        console.log('[rmbg] Done');
-    onProgress?.(100);
-    return dataUrl;
-}
-async function applyMask(image, mask, format, quality) {
-    const canvas = document.createElement('canvas');
-    // Use original image dimensions
-    canvas.width = image.width;
-    canvas.height = image.height;
-    const ctx = canvas.getContext('2d');
-    if (!ctx)
-        throw new Error('Could not get canvas context');
-    // Draw original image
-    ctx.drawImage(image, 0, 0);
-    // Get image data to manipulate pixels
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    const pixelData = imageData.data;
-    // Process mask
-    let maskData;
-    let maskWidth;
-    let maskHeight;
-    if (typeof mask === 'string') {
-        // If mask is a URL, load it
-        const maskImg = await loadImage(mask);
-        const maskCanvas = document.createElement('canvas');
-        maskCanvas.width = canvas.width;
-        maskCanvas.height = canvas.height;
-        const maskCtx = maskCanvas.getContext('2d');
-        if (!maskCtx)
-            throw new Error('Could not get mask context');
-        // Draw and resize mask to match image
-        maskCtx.drawImage(maskImg, 0, 0, canvas.width, canvas.height);
-        const maskImageData = maskCtx.getImageData(0, 0, canvas.width, canvas.height);
-        maskData = maskImageData.data;
-        maskWidth = canvas.width;
-        maskHeight = canvas.height;
-    }
-    else {
-        // @ts-ignore - Transformers.js types are loose
-        maskData = mask.data;
-        maskWidth = mask.width;
-        maskHeight = mask.height;
+        
+        // Convert blob to DataURL for return
+        const reader = new FileReader();
+        reader.onloadend = () => {
+           self.postMessage({ id, type: 'success', payload: reader.result });
+        };
+        reader.readAsDataURL(blob);
+      }
+    } catch (err) {
+      self.postMessage({ id, type: 'error', payload: err.message });
     }
-    // Helper to get alpha value from mask data
-    const getAlpha = (index, data, width, height, targetWidth, targetHeight) => {
-        // If dimensions match
-        if (width === targetWidth && height === targetHeight) {
-            // Check if mask is single channel (grayscale) or RGBA
-            if (data.length === width * height) {
-                return data[index / 4];
+  };
+`;
+// ==========================================
+// MAIN THREAD BRIDGE
+// ==========================================
+let worker = null;
+const pendingMessages = new Map();
+function getWorker() {
+    if (!worker) {
+        const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });
+        const url = URL.createObjectURL(blob);
+        worker = new Worker(url);
+        worker.onmessage = (e) => {
+            const { id, type, payload } = e.data;
+            const deferred = pendingMessages.get(id);
+            if (!deferred)
+                return;
+            if (type === 'progress') {
+                if (deferred.onProgress && payload.progress) {
+                    // Map 0-100 progress
+                    deferred.onProgress(payload.progress);
+                }
             }
-            else if (data.length === width * height * 3) {
-                return data[Math.floor(index / 4) * 3];
+            else if (type === 'success') {
+                deferred.resolve(payload);
+                pendingMessages.delete(id);
             }
-            else {
-                return data[index]; // Assume RGBA red channel or alpha channel usage
+            else if (type === 'error') {
+                deferred.reject(new Error(payload));
+                pendingMessages.delete(id);
             }
-        }
-        // Nearest neighbor resizing
-        const x = (index / 4) % targetWidth;
-        const y = Math.floor((index / 4) / targetWidth);
-        const maskX = Math.floor(x * (width / targetWidth));
-        const maskY = Math.floor(y * (height / targetHeight));
-        const maskIndex = (maskY * width + maskX);
-        if (data.length === width * height) {
-            return data[maskIndex];
-        }
-        else if (data.length === width * height * 3) {
-            return data[maskIndex * 3];
-        }
-        else {
-            return data[maskIndex * 4];
-        }
-    };
-    // Apply alpha
-    for (let i = 0; i < pixelData.length; i += 4) {
-        const alpha = getAlpha(i, maskData, maskWidth, maskHeight, canvas.width, canvas.height) ?? 255;
-        pixelData[i + 3] = alpha;
+        };
+    }
+    return worker;
+}
+function sendToWorker(type, payload, onProgress) {
+    return new Promise((resolve, reject) => {
+        const id = Math.random().toString(36).substring(7);
+        pendingMessages.set(id, { resolve, reject, onProgress });
+        getWorker().postMessage({ id, type, payload });
+    });
+}
+// Initialize model
+let initPromise = null;
+async function ensureInit() {
+    if (!initPromise) {
+        initPromise = sendToWorker('init', {});
     }
-    ctx.putImageData(imageData, 0, 0);
-    return canvas.toDataURL(format === 'WEBP' ? 'image/webp' : 'image/png', quality / 100);
+    return initPromise;
+}
+export async function removeBgImage(uri, options = {}) {
+    const { format = 'PNG', quality = 100, onProgress } = options;
+    onProgress?.(1); // Start
+    await ensureInit();
+    // The worker handles the heavy calculation
+    const result = await sendToWorker('removeBg', { uri, format, quality }, (p) => {
+        // Transformers.js progress is model downloading mainly
+        // We can map it: 0-90% download/load, 90-100% inference
+        onProgress?.(p * 0.9);
+    });
+    onProgress?.(100);
+    return result;
 }
 export const removeBackground = removeBgImage;
+// ==========================================
+// UTILITIES (Main Thread - lightweight)
+// ==========================================
 // Helper to load image
 function loadImage(src) {
     return new Promise((resolve, reject) => {
@@ -200,7 +242,7 @@ export async function generateThumbhash(imageUri, options = {}) {
         ctx.drawImage(img, 0, 0, size, size);
         const imageData = ctx.getImageData(0, 0, size, size);
         // Load thumbhash from CDN
-        // @ts-expect-error CDN import works at runtime
+        // @ts-ignore
         const { rgbaToThumbHash } = await import(/* webpackIgnore: true */ 'https://cdn.jsdelivr.net/npm/thumbhash@0.1/+esm');
         const hash = rgbaToThumbHash(size, size, imageData.data);
         return btoa(String.fromCharCode(...hash));
@@ -211,12 +253,13 @@ export async function generateThumbhash(imageUri, options = {}) {
     }
 }
 export async function clearCache() {
-    pipeline = null;
-    loadPromise = null;
-}
-export function getCacheSize() {
-    return 0;
+    if (worker) {
+        worker.terminate();
+        worker = null;
+    }
+    initPromise = null;
 }
+export function getCacheSize() { return 0; }
 export async function onLowMemory() {
     await clearCache();
     return 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-remove-image-bg",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "rn-remove-image-bg",
   "homepage": "https://github.com/a-eid/rn-remove-image-bg",
   "main": "lib/index",

package/src/ImageProcessing.web.ts

@@ -1,7 +1,7 @@
 /**
- * Web implementation using @huggingface/transformers
- * Uses BRIAAI RMBG-1.4 model for background removal.
- * Loads from CDN to bypass Metro bundler issues.
+ * Web implementation using Inline Web Worker & WebGPU.
+ * Moves all heavy processing to a background thread to prevent UI freezing.
+ * Loads @huggingface/transformers from CDN to bypass Metro bundler issues.
  */
 
 export type OutputFormat = 'PNG' | 'WEBP';
@@ -13,177 +13,207 @@ export interface RemoveBgImageOptions {
   debug?: boolean;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let pipeline: any = null;
-let loadPromise: Promise<void> | null = null;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let transformersModule: any = null;
-
-// Load transformers.js from CDN to avoid Metro bundling issues
-async function loadTransformers() {
-  if (transformersModule) return transformersModule;
-  
-  // Use dynamic import from CDN
-  const cdnUrl = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3';
-  transformersModule = await import(/* webpackIgnore: true */ cdnUrl);
-  return transformersModule;
-}
-
-async function ensureLoaded(onProgress?: (p: number) => void, debug?: boolean) {
-  if (pipeline) return pipeline;
-  
-  if (loadPromise) {
-    await loadPromise;
-    return pipeline;
+// ==========================================
+// INLINE WORKER CODE (Run in background)
+// ==========================================
+const WORKER_CODE = `
+  let pipeline = null;
+  let env = null;
+
+  // Helper to load image bitmap
+  async function loadImageBitmapFromUrl(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return await createImageBitmap(blob);
   }
 
-  loadPromise = (async () => {
-    if (debug) console.log('[rmbg] Loading model...');
-    
-    const { pipeline: createPipeline, env } = await loadTransformers();
-    
-    env.allowLocalModels = false;
-    env.useBrowserCache = true;
-    
-    onProgress?.(10);
-    
-    pipeline = await createPipeline('image-segmentation', 'briaai/RMBG-1.4', {
-      dtype: 'q8',
-      progress_callback: (info: { progress?: number }) => {
-        if (onProgress && 'progress' in info && typeof info.progress === 'number') {
-          onProgress(Math.min(10 + (info.progress / 100) * 50, 60));
+  self.onmessage = async (e) => {
+    const { id, type, payload } = e.data;
+
+    try {
+      if (type === 'init') {
+        if (!pipeline) {
+          // Dynamic import from CDN
+          const transformers = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.3.0/+esm');
+          env = transformers.env;
+          
+          // Configure environment
+          env.allowLocalModels = false;
+          env.useBrowserCache = true;
+          // Try WebGPU, fallback to WASM
+          // env.backends.onnx.wasm.numThreads = 1; // Limit threads if needed
+
+          pipeline = await transformers.pipeline('image-segmentation', 'briaai/RMBG-1.4', {
+            device: 'webgpu', // Attempt WebGPU first
+            dtype: 'q8',      // Quantized for speed
+            progress_callback: (info) => {
+               self.postMessage({ id, type: 'progress', payload: info });
+            }
+          });
         }
-      },
-    });
-    
-    if (debug) console.log('[rmbg] Model ready');
-  })();
-
-  await loadPromise;
-  return pipeline;
-}
-
-/**
- * Remove background from image
- */
-export async function removeBgImage(
-  uri: string,
-  options: RemoveBgImageOptions = {}
-): Promise<string> {
-  const { format = 'PNG', quality = 100, onProgress, debug = false } = options;
-
-  if (debug) console.log('[rmbg] Processing:', uri);
-  onProgress?.(5);
+        self.postMessage({ id, type: 'success', payload: true });
+        return;
+      }
+
+      if (type === 'removeBg') {
+        const { uri, format, quality } = payload;
+        
+        if (!pipeline) throw new Error('Pipeline not initialized');
+
+        // 1. Run Inference
+        const results = await pipeline(uri);
+        const result = Array.isArray(results) ? results[0] : results;
+        if (!result || !result.mask) throw new Error('No mask generated');
+
+        // 2. Apply Mask (Pixel Manipulation)
+        // We use OffscreenCanvas if available, or just pixel math
+        // Since we are in a worker, we can't use DOM Image, but we can use ImageBitmap
+        
+        const originalBitmap = await loadImageBitmapFromUrl(uri);
+        const { width, height } = originalBitmap;
+
+        const offscreen = new OffscreenCanvas(width, height);
+        const ctx = offscreen.getContext('2d');
+        ctx.drawImage(originalBitmap, 0, 0);
+        
+        const imageData = ctx.getImageData(0, 0, width, height);
+        const pixelData = imageData.data;
+        
+        // Handle Mask
+        // mask.data is usually 1-channel or 3-channel
+        const mask = result.mask;
+        const maskData = mask.data;
+        
+        // Simple resizing logic if dimensions differ (Nearest Neighbor)
+        // (Preprocessing usually resizes input, so output mask matches input size typically? 
+        // Actually RMBG-1.4 output is fixed size 1024x1024 usually, need resize)
+        
+        const maskW = mask.width;
+        const maskH = mask.height;
+        
+        for (let i = 0; i < pixelData.length; i += 4) {
+           const pixelIndex = i / 4;
+           const x = pixelIndex % width;
+           const y = Math.floor(pixelIndex / width);
+           
+           // Map to mask coordinates
+           const mx = Math.floor(x * (maskW / width));
+           const my = Math.floor(y * (maskH / height));
+           const maskIdx = (my * maskW + mx);
+           
+           // Get Alpha
+           let alpha = 255;
+           if (maskData.length === maskW * maskH) {
+              alpha = maskData[maskIdx];
+           } else {
+              alpha = maskData[maskIdx * mask.channels]; // Assuming channels property or stride
+              // Fallback if channels undefined:
+              if (!mask.channels) alpha = maskData[maskIdx * 3]; // RGB assumption
+           }
+           
+           pixelData[i + 3] = alpha;
+        }
+        
+        ctx.putImageData(imageData, 0, 0);
+        
+        // 3. Convert to Blob/DataURL
+        const blob = await offscreen.convertToBlob({ 
+          type: format === 'WEBP' ? 'image/webp' : 'image/png', 
+          quality: quality / 100 
+        });
+        
+        // Convert blob to DataURL for return
+        const reader = new FileReader();
+        reader.onloadend = () => {
+           self.postMessage({ id, type: 'success', payload: reader.result });
+        };
+        reader.readAsDataURL(blob);
+      }
+    } catch (err) {
+      self.postMessage({ id, type: 'error', payload: err.message });
+    }
+  };
+`;
 
-  const segmenter = await ensureLoaded(onProgress, debug);
-  onProgress?.(60);
+// ==========================================
+// MAIN THREAD BRIDGE
+// ==========================================
 
-  const results = await segmenter(uri);
-  onProgress?.(90);
+let worker: Worker | null = null;
+const pendingMessages = new Map<string, { resolve: (v: any) => void; reject: (e: any) => void; onProgress?: (p: number) => void }>();
 
-  const result = Array.isArray(results) ? results[0] : results;
-  if (!result?.mask) throw new Error('No mask returned');
+function getWorker() {
+  if (!worker) {
+    const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });
+    const url = URL.createObjectURL(blob);
+    worker = new Worker(url);
+    
+    worker.onmessage = (e) => {
+      const { id, type, payload } = e.data;
+      const deferred = pendingMessages.get(id);
+      
+      if (!deferred) return;
+
+      if (type === 'progress') {
+        if (deferred.onProgress && payload.progress) {
+             // Map 0-100 progress
+             deferred.onProgress(payload.progress); 
+        }
+      } else if (type === 'success') {
+        deferred.resolve(payload);
+        pendingMessages.delete(id);
+      } else if (type === 'error') {
+        deferred.reject(new Error(payload));
+        pendingMessages.delete(id);
+      }
+    };
+  }
+  return worker;
+}
 
-  // Apply mask to original image
-  const original = await loadImage(uri);
-  const dataUrl = await applyMask(original, result.mask, format, quality);
+function sendToWorker(type: string, payload: any, onProgress?: (p: number) => void): Promise<any> {
+  return new Promise((resolve, reject) => {
+    const id = Math.random().toString(36).substring(7);
+    pendingMessages.set(id, { resolve, reject, onProgress });
+    getWorker().postMessage({ id, type, payload });
+  });
+}
 
-  if (debug) console.log('[rmbg] Done');
-  onProgress?.(100);
-  
-  return dataUrl;
+// Initialize model
+let initPromise: Promise<void> | null = null;
+async function ensureInit() {
+  if (!initPromise) {
+    initPromise = sendToWorker('init', {});
+  }
+  return initPromise;
 }
 
-async function applyMask(
-  image: HTMLImageElement,
-  mask: { width: number; height: number; data: Uint8Array | Uint8ClampedArray } | string,
-  format: OutputFormat,
-  quality: number
+export async function removeBgImage(
+  uri: string,
+  options: RemoveBgImageOptions = {}
 ): Promise<string> {
-  const canvas = document.createElement('canvas');
-  // Use original image dimensions
-  canvas.width = image.width;
-  canvas.height = image.height;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) throw new Error('Could not get canvas context');
-
-  // Draw original image
-  ctx.drawImage(image, 0, 0);
-
-  // Get image data to manipulate pixels
-  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  const pixelData = imageData.data;
-
-  // Process mask
-  let maskData: Uint8ClampedArray | Uint8Array;
-  let maskWidth: number;
-  let maskHeight: number;
-
-  if (typeof mask === 'string') {
-    // If mask is a URL, load it
-    const maskImg = await loadImage(mask);
-    const maskCanvas = document.createElement('canvas');
-    maskCanvas.width = canvas.width;
-    maskCanvas.height = canvas.height;
-    const maskCtx = maskCanvas.getContext('2d');
-    if (!maskCtx) throw new Error('Could not get mask context');
+    const { format = 'PNG', quality = 100, onProgress } = options;
     
-    // Draw and resize mask to match image
-    maskCtx.drawImage(maskImg, 0, 0, canvas.width, canvas.height);
-    const maskImageData = maskCtx.getImageData(0, 0, canvas.width, canvas.height);
-    maskData = maskImageData.data;
-    maskWidth = canvas.width;
-    maskHeight = canvas.height;
-  } else {
-    // @ts-ignore - Transformers.js types are loose
-    maskData = mask.data;
-    maskWidth = mask.width;
-    maskHeight = mask.height;
-  }
-
-  // Helper to get alpha value from mask data
-  const getAlpha = (index: number, data: Uint8ClampedArray | Uint8Array, width: number, height: number, targetWidth: number, targetHeight: number) => {
-    // If dimensions match
-    if (width === targetWidth && height === targetHeight) {
-       // Check if mask is single channel (grayscale) or RGBA
-       if (data.length === width * height) {
-         return data[index / 4];
-       } else if (data.length === width * height * 3) {
-         return data[Math.floor(index / 4) * 3];
-       } else {
-         return data[index]; // Assume RGBA red channel or alpha channel usage
-       }
-    }
+    onProgress?.(1); // Start
+    await ensureInit();
     
-    // Nearest neighbor resizing
-    const x = (index / 4) % targetWidth;
-    const y = Math.floor((index / 4) / targetWidth);
+    // The worker handles the heavy calculation
+    const result = await sendToWorker('removeBg', { uri, format, quality }, (p) => {
+       // Transformers.js progress is model downloading mainly
+       // We can map it: 0-90% download/load, 90-100% inference
+       onProgress?.(p * 0.9); 
+    });
     
-    const maskX = Math.floor(x * (width / targetWidth));
-    const maskY = Math.floor(y * (height / targetHeight));
-    const maskIndex = (maskY * width + maskX);
-
-    if (data.length === width * height) {
-       return data[maskIndex];
-    } else if (data.length === width * height * 3) {
-       return data[maskIndex * 3];
-    } else {
-       return data[maskIndex * 4];
-    }
-  };
-
-  // Apply alpha
-  for (let i = 0; i < pixelData.length; i += 4) {
-    const alpha = getAlpha(i, maskData, maskWidth, maskHeight, canvas.width, canvas.height) ?? 255;
-    pixelData[i + 3] = alpha;
-  }
-
-  ctx.putImageData(imageData, 0, 0);
-  return canvas.toDataURL(format === 'WEBP' ? 'image/webp' : 'image/png', quality / 100);
+    onProgress?.(100);
+    return result as string;
 }
 
 export const removeBackground = removeBgImage;
 
+// ==========================================
+// UTILITIES (Main Thread - lightweight)
+// ==========================================
+
 // Helper to load image
 function loadImage(src: string): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
@@ -269,7 +299,7 @@ export async function generateThumbhash(
     const imageData = ctx.getImageData(0, 0, size, size);
     
     // Load thumbhash from CDN
-    // @ts-expect-error CDN import works at runtime
+    // @ts-ignore
     const { rgbaToThumbHash } = await import(/* webpackIgnore: true */ 'https://cdn.jsdelivr.net/npm/thumbhash@0.1/+esm');
     const hash = rgbaToThumbHash(size, size, imageData.data);
     return btoa(String.fromCharCode(...hash));
@@ -280,18 +310,17 @@ export async function generateThumbhash(
 }
 
 export async function clearCache(): Promise<void> {
-  pipeline = null;
-  loadPromise = null;
-}
-
-export function getCacheSize(): number {
-  return 0;
+  if (worker) {
+     worker.terminate();
+     worker = null;
+  }
+  initPromise = null;
 }
 
+export function getCacheSize(): number { return 0; }
 export async function onLowMemory(): Promise<number> {
   await clearCache();
   return 0;
 }
-
 export function configureCache(_config: { maxEntries?: number }): void {}
 export function getCacheDirectory(): string { return ''; }