rn-remove-image-bg 0.0.11 → 0.0.13

package/README.md

@@ -15,28 +15,8 @@
 
 ## Installation
 
-Install from GitHub:
-
 ```bash
-# Using npm
-npm install github:a-eid/rn-remove-image-bg react-native-nitro-modules
-
-# Using yarn
-yarn add github:a-eid/rn-remove-image-bg react-native-nitro-modules
-
-# Using pnpm
-pnpm add github:a-eid/rn-remove-image-bg react-native-nitro-modules
-```
-
-Or add to your `package.json`:
-
-```json
-{
-  "dependencies": {
-    "rn-remove-image-bg": "github:a-eid/rn-remove-image-bg",
-    "react-native-nitro-modules": "0.31.10"
-  }
-}
+npm install rn-remove-image-bg react-native-nitro-modules
 ```
 
 ### Peer Dependencies
@@ -59,18 +39,86 @@ cd ios && pod install
 
 No additional setup required. The ML Kit model (~10MB) downloads automatically on first use.
 
+> **Important:** Android requires Google Play Services. The first call may take 10-15 seconds while the model downloads.
+
 ---
 
 ## Quick Start
 
+### Basic Usage
+
 ```typescript
 import { removeBgImage } from 'rn-remove-image-bg'
 
-// Remove background from an image
 const resultUri = await removeBgImage('file:///path/to/photo.jpg')
-console.log(resultUri) // file:///path/to/cache/bg_removed_xxx.png
+// Returns: file:///path/to/cache/bg_removed_xxx.png (native)
+// Returns: data:image/png;base64,... (web)
+```
+
+### With React Query (Recommended)
+
+```typescript
+import { useMutation } from '@tanstack/react-query'
+import { removeBgImage } from 'rn-remove-image-bg'
+import { Alert } from 'react-native'
+
+function useRemoveBackground() {
+  return useMutation({
+    mutationFn: async (imageUri: string) => {
+      return await removeBgImage(imageUri, {
+        maxDimension: 1024,  // Faster processing
+        format: 'PNG',       // Best for transparency
+        useCache: true,      // Cache results
+      })
+    },
+    onError: (error) => {
+      Alert.alert('Error', error.message)
+    },
+  })
+}
+
+// In your component:
+function ImageEditor() {
+  const removeBackground = useRemoveBackground()
+  
+  const handleRemoveBackground = () => {
+    removeBackground.mutate(selectedImageUri, {
+      onSuccess: (resultUri) => {
+        setProcessedImage(resultUri)
+      },
+    })
+  }
+  
+  return (
+    <Button 
+      onPress={handleRemoveBackground}
+      disabled={removeBackground.isPending}
+      title={removeBackground.isPending ? 'Processing...' : 'Remove Background'}
+    />
+  )
+}
 ```
 
+### With Expo Image Picker
+
+```typescript
+import * as ImagePicker from 'expo-image-picker'
+import { removeBgImage } from 'rn-remove-image-bg'
+
+async function pickAndProcessImage() {
+  // Pick image
+  const result = await ImagePicker.launchImageLibraryAsync({
+    mediaTypes: ImagePicker.MediaTypeOptions.Images,
+    quality: 1,
+  })
+  
+  if (result.canceled) return null
+  
+  // Remove background
+  const processedUri = await removeBgImage(result.assets[0].uri)
+  return processedUri
+}
+
 ---
 
 ## API Reference
@@ -270,10 +318,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)
@@ -359,9 +409,39 @@ If you don't need web support, you can tree-shake the `@imgly/background-removal
 
 ### Android Model Not Loading?
 
-1. Ensure device has Google Play Services
-2. Check internet connection for first download
-3. Clear app cache and retry
+1. Ensure device has Google Play Services installed
+2. Check internet connection (model downloads on first use)
+3. Wait 10-15 seconds - the library automatically retries during download
+4. Clear app cache and retry: `adb shell pm clear com.yourapp`
+
+### Web Not Working?
+
+1. Check browser console for errors
+2. Ensure your bundler supports WebAssembly
+3. The first call downloads a ~35MB WASM model
+4. CORS may block model download - check network tab
+
+### Native Module Not Found?
+
+```bash
+# iOS
+cd ios && pod install && cd ..
+npx expo run:ios --device
+
+# Android  
+npx expo run:android --device
+
+# For Expo managed workflow
+npx expo prebuild --clean
+```
+
+### TypeScript Errors?
+
+Ensure peer dependencies match:
+```bash
+npx expo install expo-file-system expo-image-manipulator
+npm install react-native-nitro-modules@0.31.10
+```
 
 ---
 

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.d.ts

@@ -1,13 +1,19 @@
 /**
- * Web implementation using @imgly/background-removal
- *
- * Provides real background removal on web using WebAssembly and ML models.
- * Falls back to no-op if the library fails to load.
+ * Web implementation using @huggingface/transformers
+ * Uses BRIAAI RMBG-1.4 model for background removal.
  */
+export type OutputFormat = 'PNG' | 'WEBP';
+export interface RemoveBgImageOptions {
+    format?: OutputFormat;
+    quality?: number;
+    onProgress?: (progress: number) => void;
+    debug?: boolean;
+}
 /**
- * Output format for processed images
+ * Remove background from image
  */
-export type OutputFormat = 'PNG' | 'WEBP';
+export declare function removeBgImage(uri: string, options?: RemoveBgImageOptions): Promise<string>;
+export declare const removeBackground: typeof removeBgImage;
 export interface CompressImageOptions {
     maxSizeKB?: number;
     width?: number;
@@ -18,63 +24,12 @@ export interface CompressImageOptions {
 export interface GenerateThumbhashOptions {
     size?: number;
 }
-export interface RemoveBgImageOptions {
-    maxDimension?: number;
-    format?: OutputFormat;
-    quality?: number;
-    onProgress?: (progress: number) => void;
-    useCache?: boolean;
-    debug?: boolean;
-}
-/**
- * Compress image on web using canvas
- * @returns Compressed image as data URL
- */
-export declare function compressImage(uri: string, options?: CompressImageOptions): Promise<string>;
-/**
- * Generate thumbhash on web using canvas
- * @returns Base64 thumbhash string
- */
-export declare function generateThumbhash(imageUri: string, options?: GenerateThumbhashOptions): Promise<string>;
-/**
- * Remove background from image on web using @imgly/background-removal
- * @returns Data URL of processed image with transparent background
- */
-export declare function removeBgImage(uri: string, options?: RemoveBgImageOptions): Promise<string>;
-/**
- * Backward compatibility alias
- * @deprecated Use removeBgImage instead
- */
-export declare const removeBackground: typeof removeBgImage;
-/**
- * Clear the web background removal cache
- * @param _deleteFiles - Ignored on web (no disk cache)
- */
-export declare function clearCache(_deleteFiles?: boolean): Promise<void>;
-/**
- * Get the current cache size
- */
+export declare function compressImage(uri: string, _options?: CompressImageOptions): Promise<string>;
+export declare function generateThumbhash(_uri: string, _options?: GenerateThumbhashOptions): Promise<string>;
+export declare function clearCache(): Promise<void>;
 export declare function getCacheSize(): number;
-/**
- * Handle low memory conditions by clearing the cache
- * On web, this simply clears the in-memory cache
- *
- * @param _deleteFiles - Ignored on web (no disk cache)
- * @returns Number of entries that were cleared
- */
-export declare function onLowMemory(_deleteFiles?: boolean): Promise<number>;
-/**
- * Configure the background removal cache
- * On web, maxEntries limits cache size. Disk persistence options are no-ops.
- */
-export declare function configureCache(config: {
+export declare function onLowMemory(): Promise<number>;
+export declare function configureCache(_config: {
     maxEntries?: number;
-    maxAgeMinutes?: number;
-    persistToDisk?: boolean;
-    cacheDirectory?: string;
 }): void;
-/**
- * Get the cache directory path
- * On web, returns empty string as there is no disk cache
- */
 export declare function getCacheDirectory(): string;