rn-remove-image-bg 0.0.16 → 0.0.19

package/lib/ImageProcessing.web.d.ts

@@ -1,7 +1,7 @@
 /**
- * Web implementation using Inline Web Worker & WebGPU.
+ * Web implementation using @imgly/background-removal via Inline Web Worker.
  * Moves all heavy processing to a background thread to prevent UI freezing.
- * Loads @huggingface/transformers from CDN to bypass Metro bundler issues.
+ * Loads library from CDN to bypass Metro bundler issues.
  */
 export type OutputFormat = 'PNG' | 'WEBP';
 export interface RemoveBgImageOptions {

package/lib/ImageProcessing.web.js

@@ -1,117 +1,53 @@
 /**
- * Web implementation using Inline Web Worker & WebGPU.
+ * Web implementation using @imgly/background-removal via Inline Web Worker.
  * Moves all heavy processing to a background thread to prevent UI freezing.
- * Loads @huggingface/transformers from CDN to bypass Metro bundler issues.
+ * Loads library from CDN to bypass Metro bundler issues.
  */
 // ==========================================
 // 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);
-  }
+  let removeBackground = null;
 
   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;
+        if (typeof self.imglyBackgroundRemoval === 'undefined' || !removeBackground) {
+          // Use importScripts (Classic Worker) - most robust for Blob URLs
+          importScripts('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js');
           
-          // 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 (!self.imglyBackgroundRemoval) {
+             throw new Error('imglyBackgroundRemoval not loaded via importScripts'); 
+          }
+          
+          removeBackground = self.imglyBackgroundRemoval.removeBackground;
         }
         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;
+        const { uri, config } = payload;
         
-        // 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;
+        if (!removeBackground) {
+           importScripts('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js');
+           removeBackground = self.imglyBackgroundRemoval.removeBackground;
         }
-        
-        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 
+
+        // Run Inference
+        // CRITICAL: Must point publicPath to CDN so it finds WASM/Models
+        // otherwise it tries to load from blob: URL
+        const blob = await removeBackground(uri, {
+           publicPath: 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/',
+           progress: (key, current, total) => {
+              const p = current / total;
+              self.postMessage({ id, type: 'progress', payload: { progress: p } });
+           },
+           ...config
         });
-        
+
         // Convert blob to DataURL for return
         const reader = new FileReader();
         reader.onloadend = () => {
@@ -120,7 +56,7 @@ const WORKER_CODE = `
         reader.readAsDataURL(blob);
       }
     } catch (err) {
-      self.postMessage({ id, type: 'error', payload: err.message });
+      self.postMessage({ id, type: 'error', payload: err.message || JSON.stringify(err) });
     }
   };
 `;
@@ -141,8 +77,7 @@ function getWorker() {
                 return;
             if (type === 'progress') {
                 if (deferred.onProgress && payload.progress) {
-                    // Map 0-100 progress
-                    deferred.onProgress(payload.progress);
+                    deferred.onProgress(payload.progress * 100);
                 }
             }
             else if (type === 'success') {
@@ -164,7 +99,7 @@ function sendToWorker(type, payload, onProgress) {
         getWorker().postMessage({ id, type, payload });
     });
 }
-// Initialize model
+// Initialize
 let initPromise = null;
 async function ensureInit() {
     if (!initPromise) {
@@ -173,15 +108,19 @@ async function ensureInit() {
     return initPromise;
 }
 export async function removeBgImage(uri, options = {}) {
-    const { format = 'PNG', quality = 100, onProgress } = options;
-    onProgress?.(1); // Start
+    const { onProgress, debug = false } = options;
+    if (debug)
+        console.log('[rmbg] Starting...');
+    onProgress?.(1);
+    // Ensure worker is ready
     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);
-    });
+    // Config for imgly
+    const config = {
+        debug: debug,
+        // We can pass other options supported by imgly if needed
+        // device: 'gpu' is auto-detected usually
+    };
+    const result = await sendToWorker('removeBg', { uri, config }, onProgress);
     onProgress?.(100);
     return result;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-remove-image-bg",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "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 Inline Web Worker & WebGPU.
+ * Web implementation using @imgly/background-removal via Inline Web Worker.
  * Moves all heavy processing to a background thread to prevent UI freezing.
- * Loads @huggingface/transformers from CDN to bypass Metro bundler issues.
+ * Loads library from CDN to bypass Metro bundler issues.
  */
 
 export type OutputFormat = 'PNG' | 'WEBP';
@@ -17,111 +17,47 @@ export interface RemoveBgImageOptions {
 // 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);
-  }
+  let removeBackground = null;
 
   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;
+        if (typeof self.imglyBackgroundRemoval === 'undefined' || !removeBackground) {
+          // Use importScripts (Classic Worker) - most robust for Blob URLs
+          importScripts('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js');
           
-          // 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 (!self.imglyBackgroundRemoval) {
+             throw new Error('imglyBackgroundRemoval not loaded via importScripts'); 
+          }
+          
+          removeBackground = self.imglyBackgroundRemoval.removeBackground;
         }
         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;
+        const { uri, config } = payload;
         
-        // 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;
+        if (!removeBackground) {
+           importScripts('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js');
+           removeBackground = self.imglyBackgroundRemoval.removeBackground;
         }
-        
-        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 
+
+        // Run Inference
+        // CRITICAL: Must point publicPath to CDN so it finds WASM/Models
+        // otherwise it tries to load from blob: URL
+        const blob = await removeBackground(uri, {
+           publicPath: 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/',
+           progress: (key, current, total) => {
+              const p = current / total;
+              self.postMessage({ id, type: 'progress', payload: { progress: p } });
+           },
+           ...config
         });
-        
+
         // Convert blob to DataURL for return
         const reader = new FileReader();
         reader.onloadend = () => {
@@ -130,7 +66,7 @@ const WORKER_CODE = `
         reader.readAsDataURL(blob);
       }
     } catch (err) {
-      self.postMessage({ id, type: 'error', payload: err.message });
+      self.postMessage({ id, type: 'error', payload: err.message || JSON.stringify(err) });
     }
   };
 `;
@@ -156,8 +92,7 @@ function getWorker() {
 
       if (type === 'progress') {
         if (deferred.onProgress && payload.progress) {
-             // Map 0-100 progress
-             deferred.onProgress(payload.progress); 
+             deferred.onProgress(payload.progress * 100); 
         }
       } else if (type === 'success') {
         deferred.resolve(payload);
@@ -179,7 +114,7 @@ function sendToWorker(type: string, payload: any, onProgress?: (p: number) => vo
   });
 }
 
-// Initialize model
+// Initialize
 let initPromise: Promise<void> | null = null;
 async function ensureInit() {
   if (!initPromise) {
@@ -192,17 +127,22 @@ export async function removeBgImage(
   uri: string,
   options: RemoveBgImageOptions = {}
 ): Promise<string> {
-    const { format = 'PNG', quality = 100, onProgress } = options;
+    const { onProgress, debug = false } = options;
+    
+    if (debug) console.log('[rmbg] Starting...');
+    onProgress?.(1); 
     
-    onProgress?.(1); // Start
+    // Ensure worker is ready
     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); 
-    });
+    // Config for imgly
+    const config = {
+       debug: debug,
+       // We can pass other options supported by imgly if needed
+       // device: 'gpu' is auto-detected usually
+    };
+    
+    const result = await sendToWorker('removeBg', { uri, config }, onProgress);
     
     onProgress?.(100);
     return result as string;