rn-remove-image-bg 0.0.10 → 0.0.12

package/README.md

@@ -270,10 +270,12 @@ try {
 ### Android
 
 - **Technology**: ML Kit Subject Segmentation (beta)
-- **Model**: Downloads ~10MB on first use
+- **Model**: Downloads ~10MB on first use (handled automatically)
 - **Output**: PNG or WEBP (lossy/lossless based on quality)
 - **Requires**: Google Play Services
 
+> **First-time Use**: On Android, the ML Kit model downloads automatically on first use. The library waits for the download to complete (up to ~15 seconds with retries) before processing. Subsequent calls are instant.
+
 ### Web
 
 - **Technology**: @imgly/background-removal (WebAssembly + ONNX)

package/android/src/main/java/com/margelo/nitro/rnremoveimagebg/HybridImageBackgroundRemover.kt

@@ -3,6 +3,9 @@ package com.margelo.nitro.rnremoveimagebg
 import android.graphics.Bitmap
 import android.graphics.BitmapFactory
 import android.os.Build
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
 import com.google.mlkit.vision.common.InputImage
 import com.google.mlkit.vision.segmentation.subject.SubjectSegmentation
 import com.google.mlkit.vision.segmentation.subject.SubjectSegmenterOptions
@@ -14,6 +17,7 @@ import com.margelo.nitro.NitroModules
 import java.io.File
 import java.io.FileOutputStream
 import java.util.UUID
+import kotlin.coroutines.Continuation
 import kotlin.coroutines.resume
 import kotlin.coroutines.resumeWithException
 import kotlin.coroutines.suspendCoroutine
@@ -25,6 +29,12 @@ class HybridImageBackgroundRemover : HybridImageBackgroundRemoverSpec() {
     override val memorySize: Long
         get() = 0L
 
+    companion object {
+        private const val TAG = "RNRemoveImageBg"
+        private const val MAX_RETRIES = 10
+        private const val BASE_DELAY_MS = 1500L
+    }
+
     private val segmenter by lazy {
         val options = SubjectSegmenterOptions.Builder()
             .enableForegroundBitmap()
@@ -55,44 +65,80 @@ class HybridImageBackgroundRemover : HybridImageBackgroundRemoverSpec() {
         val inputImage = InputImage.fromBitmap(bitmap, 0)
 
         return suspendCoroutine { continuation ->
-            segmenter.process(inputImage)
-                .addOnSuccessListener { result ->
-                    val foregroundBitmap = result.foregroundBitmap
-                    if (foregroundBitmap != null) {
-                        try {
-                            val context = NitroModules.applicationContext
-                            if (context == null) {
-                                bitmap.recycle()
-                                foregroundBitmap.recycle()
-                                continuation.resumeWithException(Exception("Application Context is null"))
-                                return@addOnSuccessListener
-                            }
-                            
-                            val outputPath = saveImage(
-                                foregroundBitmap,
-                                context.cacheDir,
-                                options.format,
-                                options.quality.toInt()
-                            )
-                            
-                            bitmap.recycle()
-                            foregroundBitmap.recycle()
-                            continuation.resume(outputPath)
-                        } catch (e: Exception) {
+            processWithRetry(inputImage, bitmap, options, continuation, retryCount = 0)
+        }
+    }
+
+    /**
+     * Process image with retry logic for ML Kit model download.
+     * ML Kit Subject Segmentation downloads ~10MB model on first use.
+     * This method waits and retries if the model is still downloading.
+     */
+    private fun processWithRetry(
+        inputImage: InputImage,
+        bitmap: Bitmap,
+        options: NativeRemoveBackgroundOptions,
+        continuation: Continuation<String>,
+        retryCount: Int
+    ) {
+        segmenter.process(inputImage)
+            .addOnSuccessListener { result ->
+                val foregroundBitmap = result.foregroundBitmap
+                if (foregroundBitmap != null) {
+                    try {
+                        val context = NitroModules.applicationContext
+                        if (context == null) {
                             bitmap.recycle()
                             foregroundBitmap.recycle()
-                            continuation.resumeWithException(e)
+                            continuation.resumeWithException(Exception("Application Context is null"))
+                            return@addOnSuccessListener
                         }
-                    } else {
+                        
+                        val outputPath = saveImage(
+                            foregroundBitmap,
+                            context.cacheDir,
+                            options.format,
+                            options.quality.toInt()
+                        )
+                        
+                        bitmap.recycle()
+                        foregroundBitmap.recycle()
+                        continuation.resume(outputPath)
+                    } catch (e: Exception) {
                         bitmap.recycle()
-                        continuation.resumeWithException(Exception("Could not generate foreground bitmap"))
+                        foregroundBitmap.recycle()
+                        continuation.resumeWithException(e)
                     }
+                } else {
+                    bitmap.recycle()
+                    continuation.resumeWithException(Exception("Could not generate foreground bitmap"))
                 }
-                .addOnFailureListener { e ->
+            }
+            .addOnFailureListener { e ->
+                // Check if error is due to model still downloading
+                val isModelDownloading = e.message?.contains("Waiting for", ignoreCase = true) == true ||
+                    e.message?.contains("downloading", ignoreCase = true) == true ||
+                    e.message?.contains("not yet available", ignoreCase = true) == true
+                
+                if (isModelDownloading && retryCount < MAX_RETRIES) {
+                    // Calculate delay with exponential backoff (1.5s, 3s, 4.5s, ...)
+                    val delayMs = BASE_DELAY_MS * (retryCount + 1)
+                    Log.d(TAG, "ML Kit model downloading, retry ${retryCount + 1}/$MAX_RETRIES in ${delayMs}ms")
+                    
+                    Handler(Looper.getMainLooper()).postDelayed({
+                        processWithRetry(inputImage, bitmap, options, continuation, retryCount + 1)
+                    }, delayMs)
+                } else {
                     bitmap.recycle()
-                    continuation.resumeWithException(e)
+                    if (isModelDownloading) {
+                        continuation.resumeWithException(
+                            Exception("ML Kit model download timed out. Please check your internet connection and try again.")
+                        )
+                    } else {
+                        continuation.resumeWithException(e)
+                    }
                 }
-        }
+            }
     }
 
     /**

package/lib/ImageProcessing.web.js

@@ -4,7 +4,6 @@
  * Provides real background removal on web using WebAssembly and ML models.
  * Falls back to no-op if the library fails to load.
  */
-import { removeBackground as imglyRemoveBackground } from '@imgly/background-removal';
 // Web cache configuration
 const webCacheConfig = {
     maxEntries: 50,
@@ -134,6 +133,8 @@ export async function removeBgImage(uri, options = {}) {
     }
     onProgress?.(5);
     try {
+        // Dynamically import the library to prevent Metro from parsing onnxruntime-web at build time
+        const { removeBackground: imglyRemoveBackground } = await import('@imgly/background-removal');
         // Call @imgly/background-removal
         const blob = await imglyRemoveBackground(uri, {
             progress: (key, current, total) => {
@@ -166,9 +167,9 @@ export async function removeBgImage(uri, options = {}) {
     }
     catch (error) {
         console.error('[rn-remove-image-bg] Web background removal failed:', error);
-        // Return original URI on failure
-        onProgress?.(100);
-        return uri;
+        // Throw error instead of silent failure
+        const message = error instanceof Error ? error.message : 'Web background removal failed';
+        throw new Error(`Background removal failed: ${message}`);
     }
 }
 /**

package/package.json

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

package/src/ImageProcessing.web.ts

@@ -5,7 +5,8 @@
  * Falls back to no-op if the library fails to load.
  */
 
-import { removeBackground as imglyRemoveBackground } from '@imgly/background-removal';
+// @imgly/background-removal is dynamically imported at runtime in removeBgImage()
+// to prevent Metro from parsing onnxruntime-web at build time
 
 /**
  * Output format for processed images
@@ -34,8 +35,8 @@ export interface RemoveBgImageOptions {
 }
 // Web cache configuration
 const webCacheConfig = {
-	maxEntries: 50,
-	maxAgeMinutes: 30,
+  maxEntries: 50,
+  maxAgeMinutes: 30,
 };
 
 // Simple in-memory LRU cache for web
@@ -45,33 +46,33 @@ const webCache = new Map<string, string>();
  * Add entry to cache with LRU eviction
  */
 function setCacheEntry(key: string, value: string): void {
-	// If key exists, delete it first (to update LRU order)
-	if (webCache.has(key)) {
-		webCache.delete(key);
-	}
-
-	// Evict oldest entries if at capacity
-	while (webCache.size >= webCacheConfig.maxEntries) {
-		const oldestKey = webCache.keys().next().value;
-		if (oldestKey) {
-			webCache.delete(oldestKey);
-		}
-	}
-
-	webCache.set(key, value);
+  // If key exists, delete it first (to update LRU order)
+  if (webCache.has(key)) {
+    webCache.delete(key);
+  }
+
+  // Evict oldest entries if at capacity
+  while (webCache.size >= webCacheConfig.maxEntries) {
+    const oldestKey = webCache.keys().next().value;
+    if (oldestKey) {
+      webCache.delete(oldestKey);
+    }
+  }
+
+  webCache.set(key, value);
 }
 
 /**
  * Get entry from cache and update LRU order
  */
 function getCacheEntry(key: string): string | undefined {
-	const value = webCache.get(key);
-	if (value !== undefined) {
-		// Move to end (most recently used)
-		webCache.delete(key);
-		webCache.set(key, value);
-	}
-	return value;
+  const value = webCache.get(key);
+  if (value !== undefined) {
+    // Move to end (most recently used)
+    webCache.delete(key);
+    webCache.set(key, value);
+  }
+  return value;
 }
 
 /**
@@ -207,6 +208,10 @@ export async function removeBgImage(
   onProgress?.(5);
 
   try {
+    // Dynamically import the library to prevent Metro from parsing onnxruntime-web at build time
+    const { removeBackground: imglyRemoveBackground } =
+      await import('@imgly/background-removal');
+
     // Call @imgly/background-removal
     const blob = await imglyRemoveBackground(uri, {
       progress: (key: string, current: number, total: number) => {
@@ -243,9 +248,9 @@ export async function removeBgImage(
     return dataUrl;
   } catch (error) {
     console.error('[rn-remove-image-bg] Web background removal failed:', error);
-    // Return original URI on failure
-    onProgress?.(100);
-    return uri;
+    // Throw error instead of silent failure
+    const message = error instanceof Error ? error.message : 'Web background removal failed';
+    throw new Error(`Background removal failed: ${message}`);
   }
 }
 

package/src/__tests__/ImageProcessing.test.ts

@@ -1,16 +1,18 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
 // Mock all dependencies before importing
 vi.mock('react-native', () => ({
   Image: {
     getSize: vi.fn((uri, success) => success(1024, 768)),
   },
-}))
+}));
 
 vi.mock('expo-image-manipulator', () => ({
-  manipulateAsync: vi.fn().mockResolvedValue({ uri: 'file:///mock/result.png' }),
+  manipulateAsync: vi
+    .fn()
+    .mockResolvedValue({ uri: 'file:///mock/result.png' }),
   SaveFormat: { WEBP: 'webp', PNG: 'png', JPEG: 'jpeg' },
-}))
+}));
 
 vi.mock('expo-file-system/legacy', () => ({
   cacheDirectory: '/mock/cache/',
@@ -19,26 +21,28 @@ vi.mock('expo-file-system/legacy', () => ({
   readAsStringAsync: vi.fn().mockResolvedValue('{}'),
   writeAsStringAsync: vi.fn().mockResolvedValue(undefined),
   deleteAsync: vi.fn().mockResolvedValue(undefined),
-}))
+}));
 
 vi.mock('thumbhash', () => ({
   rgbaToThumbHash: vi.fn().mockReturnValue(new Uint8Array([1, 2, 3, 4])),
-}))
+}));
 
 vi.mock('upng-js', () => ({
   decode: vi.fn().mockReturnValue({ width: 32, height: 32 }),
   toRGBA8: vi.fn().mockReturnValue([new Uint8Array(32 * 32 * 4)]),
-}))
+}));
 
 // Mock Nitro modules
-const mockRemoveBackground = vi.fn().mockResolvedValue('file:///mock/bg_removed.png')
+const mockRemoveBackground = vi
+  .fn()
+  .mockResolvedValue('file:///mock/bg_removed.png');
 vi.mock('react-native-nitro-modules', () => ({
   NitroModules: {
     createHybridObject: vi.fn(() => ({
       removeBackground: mockRemoveBackground,
     })),
   },
-}))
+}));
 
 // Import after mocking
 import {
@@ -48,53 +52,61 @@ import {
   onLowMemory,
   configureCache,
   getCacheDirectory,
-} from '../ImageProcessing'
-import { BackgroundRemovalError } from '../errors'
+} from '../ImageProcessing';
+import { BackgroundRemovalError } from '../errors';
 
 describe('ImageProcessing', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-  })
+    vi.clearAllMocks();
+  });
 
   afterEach(async () => {
-    await clearCache()
-  })
+    await clearCache();
+  });
 
   describe('removeBgImage', () => {
     describe('input validation', () => {
       it('should throw INVALID_PATH for empty string', async () => {
-        await expect(removeBgImage('')).rejects.toThrow(BackgroundRemovalError)
+        await expect(removeBgImage('')).rejects.toThrow(BackgroundRemovalError);
         await expect(removeBgImage('')).rejects.toMatchObject({
           code: 'INVALID_PATH',
-        })
-      })
+        });
+      });
 
       it('should throw INVALID_PATH for whitespace-only string', async () => {
         await expect(removeBgImage('   ')).rejects.toMatchObject({
           code: 'INVALID_PATH',
-        })
-      })
+        });
+      });
 
       it('should throw INVALID_PATH for http URLs', async () => {
-        await expect(removeBgImage('http://example.com/image.jpg')).rejects.toMatchObject({
+        await expect(
+          removeBgImage('http://example.com/image.jpg')
+        ).rejects.toMatchObject({
           code: 'INVALID_PATH',
-        })
-      })
+        });
+      });
 
       it('should throw INVALID_PATH for https URLs', async () => {
-        await expect(removeBgImage('https://example.com/image.jpg')).rejects.toMatchObject({
+        await expect(
+          removeBgImage('https://example.com/image.jpg')
+        ).rejects.toMatchObject({
           code: 'INVALID_PATH',
-        })
-      })
+        });
+      });
 
       it('should accept file:// URIs', async () => {
-        await expect(removeBgImage('file:///path/to/image.jpg')).resolves.toBeDefined()
-      })
+        await expect(
+          removeBgImage('file:///path/to/image.jpg')
+        ).resolves.toBeDefined();
+      });
 
       it('should accept absolute paths starting with /', async () => {
-        await expect(removeBgImage('/path/to/image.jpg')).resolves.toBeDefined()
-      })
-    })
+        await expect(
+          removeBgImage('/path/to/image.jpg')
+        ).resolves.toBeDefined();
+      });
+    });
 
     describe('options validation', () => {
       it('should throw INVALID_OPTIONS for maxDimension < 100', async () => {
@@ -102,40 +114,40 @@ describe('ImageProcessing', () => {
           removeBgImage('file:///test.jpg', { maxDimension: 50 })
         ).rejects.toMatchObject({
           code: 'INVALID_OPTIONS',
-        })
-      })
+        });
+      });
 
       it('should throw INVALID_OPTIONS for maxDimension > 8192', async () => {
         await expect(
           removeBgImage('file:///test.jpg', { maxDimension: 10000 })
         ).rejects.toMatchObject({
           code: 'INVALID_OPTIONS',
-        })
-      })
+        });
+      });
 
       it('should throw INVALID_OPTIONS for quality < 0', async () => {
         await expect(
           removeBgImage('file:///test.jpg', { quality: -10 })
         ).rejects.toMatchObject({
           code: 'INVALID_OPTIONS',
-        })
-      })
+        });
+      });
 
       it('should throw INVALID_OPTIONS for quality > 100', async () => {
         await expect(
           removeBgImage('file:///test.jpg', { quality: 150 })
         ).rejects.toMatchObject({
           code: 'INVALID_OPTIONS',
-        })
-      })
+        });
+      });
 
       it('should throw INVALID_OPTIONS for invalid format', async () => {
         await expect(
           removeBgImage('file:///test.jpg', { format: 'JPEG' as any })
         ).rejects.toMatchObject({
           code: 'INVALID_OPTIONS',
-        })
-      })
+        });
+      });
 
       it('should accept valid options', async () => {
         await expect(
@@ -144,45 +156,49 @@ describe('ImageProcessing', () => {
             quality: 90,
             format: 'WEBP',
           })
-        ).resolves.toBeDefined()
-      })
-    })
+        ).resolves.toBeDefined();
+      });
+    });
 
     describe('progress callback', () => {
       it('should call onProgress during processing', async () => {
-        const onProgress = vi.fn()
-        await removeBgImage('file:///test.jpg', { onProgress })
+        const onProgress = vi.fn();
+        await removeBgImage('file:///test.jpg', { onProgress });
 
         // Should be called at least for start and end
-        expect(onProgress).toHaveBeenCalled()
-        expect(onProgress).toHaveBeenCalledWith(expect.any(Number))
-      })
-    })
+        expect(onProgress).toHaveBeenCalled();
+        expect(onProgress).toHaveBeenCalledWith(expect.any(Number));
+      });
+    });
 
     describe('caching', () => {
       it('should cache results when useCache is true', async () => {
-        await removeBgImage('file:///test.jpg', { useCache: true })
-        expect(getCacheSize()).toBe(1)
-      })
+        await removeBgImage('file:///test.jpg', { useCache: true });
+        expect(getCacheSize()).toBe(1);
+      });
 
       it('should not cache results when useCache is false', async () => {
-        await removeBgImage('file:///test.jpg', { useCache: false })
-        expect(getCacheSize()).toBe(0)
-      })
+        await removeBgImage('file:///test.jpg', { useCache: false });
+        expect(getCacheSize()).toBe(0);
+      });
 
       it('should return cached result on second call', async () => {
-        const result1 = await removeBgImage('file:///test.jpg', { useCache: true })
-        
+        const result1 = await removeBgImage('file:///test.jpg', {
+          useCache: true,
+        });
+
         // Reset mock to verify it's not called again
-        mockRemoveBackground.mockClear()
-        
-        const result2 = await removeBgImage('file:///test.jpg', { useCache: true })
-        
-        expect(result1).toBe(result2)
+        mockRemoveBackground.mockClear();
+
+        const result2 = await removeBgImage('file:///test.jpg', {
+          useCache: true,
+        });
+
+        expect(result1).toBe(result2);
         // Native should not be called on second request (cache hit)
-        expect(mockRemoveBackground).not.toHaveBeenCalled()
-      })
-    })
+        expect(mockRemoveBackground).not.toHaveBeenCalled();
+      });
+    });
 
     describe('native call', () => {
       it('should call native removeBackground with correct options', async () => {
@@ -191,7 +207,7 @@ describe('ImageProcessing', () => {
           format: 'WEBP',
           quality: 85,
           useCache: false, // Don't cache so we can verify the call
-        })
+        });
 
         expect(mockRemoveBackground).toHaveBeenCalledWith(
           'file:///test.jpg',
@@ -200,61 +216,63 @@ describe('ImageProcessing', () => {
             format: 'WEBP',
             quality: 85,
           })
-        )
-      })
+        );
+      });
 
       it('should normalize result path to file:// URI', async () => {
-        mockRemoveBackground.mockResolvedValueOnce('/path/without/scheme.png')
-        
-        const result = await removeBgImage('file:///test.jpg', { useCache: false })
-        
-        expect(result).toBe('file:///path/without/scheme.png')
-      })
-    })
-  })
+        mockRemoveBackground.mockResolvedValueOnce('/path/without/scheme.png');
+
+        const result = await removeBgImage('file:///test.jpg', {
+          useCache: false,
+        });
+
+        expect(result).toBe('file:///path/without/scheme.png');
+      });
+    });
+  });
 
   describe('cache management functions', () => {
     describe('clearCache', () => {
       it('should clear all cache entries', async () => {
-        await removeBgImage('file:///test1.jpg', { useCache: true })
-        await removeBgImage('file:///test2.jpg', { useCache: true })
-        expect(getCacheSize()).toBe(2)
+        await removeBgImage('file:///test1.jpg', { useCache: true });
+        await removeBgImage('file:///test2.jpg', { useCache: true });
+        expect(getCacheSize()).toBe(2);
 
-        await clearCache()
-        expect(getCacheSize()).toBe(0)
-      })
-    })
+        await clearCache();
+        expect(getCacheSize()).toBe(0);
+      });
+    });
 
     describe('getCacheSize', () => {
       it('should return 0 for empty cache', () => {
-        expect(getCacheSize()).toBe(0)
-      })
+        expect(getCacheSize()).toBe(0);
+      });
 
       it('should return correct count after adding entries', async () => {
-        await removeBgImage('file:///test1.jpg', { useCache: true })
-        expect(getCacheSize()).toBe(1)
-        
-        await removeBgImage('file:///test2.jpg', { useCache: true })
-        expect(getCacheSize()).toBe(2)
-      })
-    })
+        await removeBgImage('file:///test1.jpg', { useCache: true });
+        expect(getCacheSize()).toBe(1);
+
+        await removeBgImage('file:///test2.jpg', { useCache: true });
+        expect(getCacheSize()).toBe(2);
+      });
+    });
 
     describe('onLowMemory', () => {
       it('should clear cache and return count', async () => {
-        await removeBgImage('file:///test1.jpg', { useCache: true })
-        await removeBgImage('file:///test2.jpg', { useCache: true })
-        
-        const cleared = await onLowMemory()
-        
-        expect(cleared).toBe(2)
-        expect(getCacheSize()).toBe(0)
-      })
+        await removeBgImage('file:///test1.jpg', { useCache: true });
+        await removeBgImage('file:///test2.jpg', { useCache: true });
+
+        const cleared = await onLowMemory();
+
+        expect(cleared).toBe(2);
+        expect(getCacheSize()).toBe(0);
+      });
 
       it('should return 0 when cache is empty', async () => {
-        const cleared = await onLowMemory()
-        expect(cleared).toBe(0)
-      })
-    })
+        const cleared = await onLowMemory();
+        expect(cleared).toBe(0);
+      });
+    });
 
     describe('configureCache', () => {
       it('should not throw when configuring cache', () => {
@@ -264,15 +282,15 @@ describe('ImageProcessing', () => {
             maxAgeMinutes: 60,
             persistToDisk: true,
           })
-        ).not.toThrow()
-      })
-    })
+        ).not.toThrow();
+      });
+    });
 
     describe('getCacheDirectory', () => {
       it('should return a string containing bg-removal', () => {
-        const dir = getCacheDirectory()
-        expect(dir).toContain('bg-removal')
-      })
-    })
-  })
-})
+        const dir = getCacheDirectory();
+        expect(dir).toContain('bg-removal');
+      });
+    });
+  });
+});