rn-remove-image-bg 0.0.12 → 0.0.14

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
@@ -361,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/lib/ImageProcessing.web.d.ts

@@ -1,13 +1,20 @@
 /**
- * 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.
+ * Loads from CDN to bypass Metro bundler issues.
  */
+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 +25,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 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;

package/lib/ImageProcessing.web.js

@@ -1,59 +1,102 @@
 /**
- * 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.
+ * Loads from CDN to bypass Metro bundler issues.
  */
-// Web cache configuration
-const webCacheConfig = {
-    maxEntries: 50,
-    maxAgeMinutes: 30,
-};
-// Simple in-memory LRU cache for web
-const webCache = new Map();
-/**
- * Add entry to cache with LRU eviction
- */
-function setCacheEntry(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);
+// 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;
 }
-/**
- * Get entry from cache and update LRU order
- */
-function getCacheEntry(key) {
-    const value = webCache.get(key);
-    if (value !== undefined) {
-        // Move to end (most recently used)
-        webCache.delete(key);
-        webCache.set(key, value);
+async function ensureLoaded(onProgress, debug) {
+    if (pipeline)
+        return pipeline;
+    if (loadPromise) {
+        await loadPromise;
+        return pipeline;
     }
-    return value;
+    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) => {
+                if (onProgress && 'progress' in info && typeof info.progress === 'number') {
+                    onProgress(Math.min(10 + (info.progress / 100) * 50, 60));
+                }
+            },
+        });
+        if (debug)
+            console.log('[rmbg] Model ready');
+    })();
+    await loadPromise;
+    return pipeline;
 }
 /**
- * Compress image on web using canvas
- * @returns Compressed image as data URL
+ * 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');
+    // Convert to data URL
+    const dataUrl = typeof result.mask === 'string'
+        ? result.mask
+        : toDataUrl(result.mask, format, quality);
+    if (debug)
+        console.log('[rmbg] Done');
+    onProgress?.(100);
+    return dataUrl;
+}
+function toDataUrl(mask, format, quality) {
+    const canvas = document.createElement('canvas');
+    canvas.width = mask.width;
+    canvas.height = mask.height;
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.createImageData(mask.width, mask.height);
+    imageData.data.set(mask.data);
+    ctx.putImageData(imageData, 0, 0);
+    return canvas.toDataURL(format === 'WEBP' ? 'image/webp' : 'image/png', quality / 100);
+}
+export const removeBackground = removeBgImage;
+// Helper to load image
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
+}
 export async function compressImage(uri, options = {}) {
     const { maxSizeKB = 250, width = 1024, height = 1024, quality = 0.85, format = 'webp', } = options;
     try {
-        // Load image
         const img = await loadImage(uri);
-        // Calculate target dimensions maintaining aspect ratio
         const scale = Math.min(width / img.width, height / img.height, 1);
         const targetWidth = Math.round(img.width * scale);
         const targetHeight = Math.round(img.height * scale);
-        // Create canvas and draw resized image
         const canvas = document.createElement('canvas');
         canvas.width = targetWidth;
         canvas.height = targetHeight;
@@ -61,36 +104,25 @@ export async function compressImage(uri, options = {}) {
         if (!ctx)
             throw new Error('Could not get canvas context');
         ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
-        // Convert to data URL with compression
-        const mimeType = format === 'png'
-            ? 'image/png'
-            : format === 'jpeg'
-                ? 'image/jpeg'
-                : 'image/webp';
+        const mimeType = format === 'png' ? 'image/png' : format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         let dataUrl = canvas.toDataURL(mimeType, quality);
-        // If still too large, reduce quality iteratively
+        // Reduce quality if over size limit
         let currentQuality = quality;
-        while (getDataUrlSizeKB(dataUrl) > maxSizeKB && currentQuality > 0.5) {
+        const getSize = (url) => ((url.split(',')[1] || '').length * 3) / 4 / 1024;
+        while (getSize(dataUrl) > maxSizeKB && currentQuality > 0.5) {
             currentQuality -= 0.1;
             dataUrl = canvas.toDataURL(mimeType, currentQuality);
         }
         return dataUrl;
     }
     catch (error) {
-        console.warn('[rn-remove-image-bg] compressImage failed on web, returning original:', error);
+        console.warn('[rmbg] compressImage failed:', error);
         return uri;
     }
 }
-/**
- * Generate thumbhash on web using canvas
- * @returns Base64 thumbhash string
- */
 export async function generateThumbhash(imageUri, options = {}) {
     const { size = 32 } = options;
     try {
-        // Dynamically import thumbhash to avoid bundling issues
-        const { rgbaToThumbHash } = await import('thumbhash');
-        // Load and resize image
         const img = await loadImage(imageUri);
         const canvas = document.createElement('canvas');
         canvas.width = size;
@@ -99,151 +131,28 @@ export async function generateThumbhash(imageUri, options = {}) {
         if (!ctx)
             throw new Error('Could not get canvas context');
         ctx.drawImage(img, 0, 0, size, size);
-        // Get RGBA data
         const imageData = ctx.getImageData(0, 0, size, size);
+        // Load thumbhash from CDN
+        // @ts-expect-error CDN import works at runtime
+        const { rgbaToThumbHash } = await import(/* webpackIgnore: true */ 'https://cdn.jsdelivr.net/npm/thumbhash@0.1/+esm');
         const hash = rgbaToThumbHash(size, size, imageData.data);
-        // Convert to base64
         return btoa(String.fromCharCode(...hash));
     }
     catch (error) {
-        console.warn('[rn-remove-image-bg] generateThumbhash failed on web:', error);
+        console.warn('[rmbg] generateThumbhash failed:', error);
         return '';
     }
 }
-/**
- * Remove background from image on web using @imgly/background-removal
- * @returns Data URL of processed image with transparent background
- */
-export async function removeBgImage(uri, options = {}) {
-    const { format = 'PNG', quality = 100, onProgress, useCache = true, debug = false, } = options;
-    // Check cache
-    const cacheKey = `${uri}::${format}::${quality}`;
-    if (useCache) {
-        const cachedResult = getCacheEntry(cacheKey);
-        if (cachedResult) {
-            if (debug) {
-                console.log('[rn-remove-image-bg] Web cache hit');
-            }
-            onProgress?.(100);
-            return cachedResult;
-        }
-    }
-    if (debug) {
-        console.log('[rn-remove-image-bg] Starting web background removal:', uri);
-    }
-    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) => {
-                if (onProgress && total > 0) {
-                    // Map progress to 10-90 range
-                    const progress = Math.round(10 + (current / total) * 80);
-                    onProgress(Math.min(progress, 90));
-                }
-                if (debug) {
-                    console.log(`[rn-remove-image-bg] ${key}: ${current}/${total}`);
-                }
-            },
-            output: {
-                format: format === 'WEBP' ? 'image/webp' : 'image/png',
-                quality: quality / 100,
-            },
-        });
-        onProgress?.(95);
-        // Convert blob to data URL
-        const dataUrl = await blobToDataUrl(blob);
-        // Cache the result with LRU eviction
-        if (useCache) {
-            setCacheEntry(cacheKey, dataUrl);
-        }
-        if (debug) {
-            console.log('[rn-remove-image-bg] Web background removal complete');
-        }
-        onProgress?.(100);
-        return dataUrl;
-    }
-    catch (error) {
-        console.error('[rn-remove-image-bg] Web background removal failed:', error);
-        // Throw error instead of silent failure
-        const message = error instanceof Error ? error.message : 'Web background removal failed';
-        throw new Error(`Background removal failed: ${message}`);
-    }
-}
-/**
- * Backward compatibility alias
- * @deprecated Use removeBgImage instead
- */
-export const removeBackground = removeBgImage;
-/**
- * Clear the web background removal cache
- * @param _deleteFiles - Ignored on web (no disk cache)
- */
-export async function clearCache(_deleteFiles = false) {
-    webCache.clear();
+export async function clearCache() {
+    pipeline = null;
+    loadPromise = null;
 }
-/**
- * Get the current cache size
- */
 export function getCacheSize() {
-    return webCache.size;
-}
-/**
- * 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 async function onLowMemory(_deleteFiles = true) {
-    const size = webCache.size;
-    webCache.clear();
-    console.log(`[rn-remove-image-bg] Cleared ${size} web cache entries due to memory pressure`);
-    return size;
-}
-/**
- * Configure the background removal cache
- * On web, maxEntries limits cache size. Disk persistence options are no-ops.
- */
-export function configureCache(config) {
-    if (config.maxEntries !== undefined && config.maxEntries > 0) {
-        webCacheConfig.maxEntries = config.maxEntries;
-    }
-    if (config.maxAgeMinutes !== undefined && config.maxAgeMinutes > 0) {
-        webCacheConfig.maxAgeMinutes = config.maxAgeMinutes;
-    }
-    // persistToDisk and cacheDirectory are no-ops on web
-}
-/**
- * Get the cache directory path
- * On web, returns empty string as there is no disk cache
- */
-export function getCacheDirectory() {
-    return '';
-}
-// Helper functions
-function loadImage(src) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.crossOrigin = 'anonymous';
-        img.onload = () => resolve(img);
-        img.onerror = reject;
-        img.src = src;
-    });
-}
-function blobToDataUrl(blob) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-    });
+    return 0;
 }
-function getDataUrlSizeKB(dataUrl) {
-    // Data URL format: data:mime;base64,<base64data>
-    const base64 = dataUrl.split(',')[1] || '';
-    // Base64 encodes 3 bytes as 4 characters
-    return (base64.length * 3) / 4 / 1024;
+export async function onLowMemory() {
+    await clearCache();
+    return 0;
 }
+export function configureCache(_config) { }
+export function getCacheDirectory() { return ''; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-remove-image-bg",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "rn-remove-image-bg",
   "homepage": "https://github.com/a-eid/rn-remove-image-bg",
   "main": "lib/index",
@@ -35,17 +35,6 @@
     "*.podspec",
     "README.md"
   ],
-  "scripts": {
-    "postinstall": "tsc || exit 0;",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf android/build node_modules/**/android/build lib",
-    "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",
-    "lint-ci": "eslint \"**/*.{js,ts,tsx}\" -f @jamesacarr/github-actions",
-    "typescript": "tsc",
-    "specs": "tsc --noEmit false && nitrogen --logLevel=\"debug\"",
-    "prepare": "npm run typescript",
-    "test": "vitest run"
-  },
   "author": "Ahmed Eid <a.eid@yandex.com> (https://github.com/a-eid)",
   "license": "MIT",
   "devDependencies": {
@@ -96,9 +85,19 @@
     "lib/"
   ],
   "dependencies": {
-    "@imgly/background-removal": "^1.7.0",
+    "@huggingface/transformers": "^3.8.1",
     "buffer": "^6.0.3",
     "thumbhash": "^0.1.1",
     "upng-js": "^2.1.0"
+  },
+  "scripts": {
+    "postinstall": "tsc || exit 0;",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf android/build node_modules/**/android/build lib",
+    "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",
+    "lint-ci": "eslint \"**/*.{js,ts,tsx}\" -f @jamesacarr/github-actions",
+    "typescript": "tsc",
+    "specs": "tsc --noEmit false && nitrogen --logLevel=\"debug\"",
+    "test": "vitest run"
   }
-}
+}

package/src/ImageProcessing.web.ts

@@ -1,84 +1,140 @@
 /**
- * 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.
+ * Loads from CDN to bypass Metro bundler issues.
  */
 
-// @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
- */
 export type OutputFormat = 'PNG' | 'WEBP';
 
-export interface CompressImageOptions {
-  maxSizeKB?: number;
-  width?: number;
-  height?: number;
-  quality?: number;
-  format?: 'webp' | 'png' | 'jpeg';
-}
-
-export interface GenerateThumbhashOptions {
-  size?: number;
-}
-
 export interface RemoveBgImageOptions {
-  maxDimension?: number;
   format?: OutputFormat;
   quality?: number;
   onProgress?: (progress: number) => void;
-  useCache?: boolean;
   debug?: boolean;
 }
-// Web cache configuration
-const webCacheConfig = {
-  maxEntries: 50,
-  maxAgeMinutes: 30,
-};
-
-// Simple in-memory LRU cache for web
-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);
+// 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;
   }
 
-  // Evict oldest entries if at capacity
-  while (webCache.size >= webCacheConfig.maxEntries) {
-    const oldestKey = webCache.keys().next().value;
-    if (oldestKey) {
-      webCache.delete(oldestKey);
-    }
-  }
+  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));
+        }
+      },
+    });
+    
+    if (debug) console.log('[rmbg] Model ready');
+  })();
 
-  webCache.set(key, value);
+  await loadPromise;
+  return pipeline;
 }
 
 /**
- * Get entry from cache and update LRU order
+ * Remove background from image
  */
-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;
+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);
+
+  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');
+
+  // Convert to data URL
+  const dataUrl = typeof result.mask === 'string' 
+    ? result.mask 
+    : toDataUrl(result.mask, format, quality);
+
+  if (debug) console.log('[rmbg] Done');
+  onProgress?.(100);
+  
+  return dataUrl;
+}
+
+function toDataUrl(
+  mask: { width: number; height: number; data: Uint8Array | Uint8ClampedArray },
+  format: OutputFormat,
+  quality: number
+): string {
+  const canvas = document.createElement('canvas');
+  canvas.width = mask.width;
+  canvas.height = mask.height;
+  const ctx = canvas.getContext('2d')!;
+  const imageData = ctx.createImageData(mask.width, mask.height);
+  imageData.data.set(mask.data);
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL(format === 'WEBP' ? 'image/webp' : 'image/png', quality / 100);
+}
+
+export const removeBackground = removeBgImage;
+
+// Helper to load image
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+export interface CompressImageOptions {
+  maxSizeKB?: number;
+  width?: number;
+  height?: number;
+  quality?: number;
+  format?: 'webp' | 'png' | 'jpeg';
+}
+
+export interface GenerateThumbhashOptions {
+  size?: number;
 }
 
-/**
- * Compress image on web using canvas
- * @returns Compressed image as data URL
- */
 export async function compressImage(
   uri: string,
   options: CompressImageOptions = {}
@@ -92,15 +148,11 @@ export async function compressImage(
   } = options;
 
   try {
-    // Load image
     const img = await loadImage(uri);
-
-    // Calculate target dimensions maintaining aspect ratio
     const scale = Math.min(width / img.width, height / img.height, 1);
     const targetWidth = Math.round(img.width * scale);
     const targetHeight = Math.round(img.height * scale);
 
-    // Create canvas and draw resized image
     const canvas = document.createElement('canvas');
     canvas.width = targetWidth;
     canvas.height = targetHeight;
@@ -108,36 +160,24 @@ export async function compressImage(
     if (!ctx) throw new Error('Could not get canvas context');
     ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
 
-    // Convert to data URL with compression
-    const mimeType =
-      format === 'png'
-        ? 'image/png'
-        : format === 'jpeg'
-          ? 'image/jpeg'
-          : 'image/webp';
+    const mimeType = format === 'png' ? 'image/png' : format === 'jpeg' ? 'image/jpeg' : 'image/webp';
     let dataUrl = canvas.toDataURL(mimeType, quality);
 
-    // If still too large, reduce quality iteratively
+    // Reduce quality if over size limit
     let currentQuality = quality;
-    while (getDataUrlSizeKB(dataUrl) > maxSizeKB && currentQuality > 0.5) {
+    const getSize = (url: string) => ((url.split(',')[1] || '').length * 3) / 4 / 1024;
+    while (getSize(dataUrl) > maxSizeKB && currentQuality > 0.5) {
       currentQuality -= 0.1;
       dataUrl = canvas.toDataURL(mimeType, currentQuality);
     }
 
     return dataUrl;
   } catch (error) {
-    console.warn(
-      '[rn-remove-image-bg] compressImage failed on web, returning original:',
-      error
-    );
+    console.warn('[rmbg] compressImage failed:', error);
     return uri;
   }
 }
 
-/**
- * Generate thumbhash on web using canvas
- * @returns Base64 thumbhash string
- */
 export async function generateThumbhash(
   imageUri: string,
   options: GenerateThumbhashOptions = {}
@@ -145,11 +185,8 @@ export async function generateThumbhash(
   const { size = 32 } = options;
 
   try {
-    // Dynamically import thumbhash to avoid bundling issues
-    const { rgbaToThumbHash } = await import('thumbhash');
-
-    // Load and resize image
     const img = await loadImage(imageUri);
+    
     const canvas = document.createElement('canvas');
     canvas.width = size;
     canvas.height = size;
@@ -157,191 +194,32 @@ export async function generateThumbhash(
     if (!ctx) throw new Error('Could not get canvas context');
     ctx.drawImage(img, 0, 0, size, size);
 
-    // Get RGBA data
     const imageData = ctx.getImageData(0, 0, size, size);
+    
+    // Load thumbhash from CDN
+    // @ts-expect-error CDN import works at runtime
+    const { rgbaToThumbHash } = await import(/* webpackIgnore: true */ 'https://cdn.jsdelivr.net/npm/thumbhash@0.1/+esm');
     const hash = rgbaToThumbHash(size, size, imageData.data);
-
-    // Convert to base64
     return btoa(String.fromCharCode(...hash));
   } catch (error) {
-    console.warn(
-      '[rn-remove-image-bg] generateThumbhash failed on web:',
-      error
-    );
+    console.warn('[rmbg] generateThumbhash failed:', error);
     return '';
   }
 }
 
-/**
- * Remove background from image on web using @imgly/background-removal
- * @returns Data URL of processed image with transparent background
- */
-export async function removeBgImage(
-  uri: string,
-  options: RemoveBgImageOptions = {}
-): Promise<string> {
-  const {
-    format = 'PNG',
-    quality = 100,
-    onProgress,
-    useCache = true,
-    debug = false,
-  } = options;
-
-  // Check cache
-  const cacheKey = `${uri}::${format}::${quality}`;
-  if (useCache) {
-    const cachedResult = getCacheEntry(cacheKey);
-    if (cachedResult) {
-      if (debug) {
-        console.log('[rn-remove-image-bg] Web cache hit');
-      }
-      onProgress?.(100);
-      return cachedResult;
-    }
-  }
-
-  if (debug) {
-    console.log('[rn-remove-image-bg] Starting web background removal:', uri);
-  }
-
-  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) => {
-        if (onProgress && total > 0) {
-          // Map progress to 10-90 range
-          const progress = Math.round(10 + (current / total) * 80);
-          onProgress(Math.min(progress, 90));
-        }
-        if (debug) {
-          console.log(`[rn-remove-image-bg] ${key}: ${current}/${total}`);
-        }
-      },
-      output: {
-        format: format === 'WEBP' ? 'image/webp' : 'image/png',
-        quality: quality / 100,
-      },
-    });
-
-    onProgress?.(95);
-
-    // Convert blob to data URL
-    const dataUrl = await blobToDataUrl(blob);
-
-    // Cache the result with LRU eviction
-    if (useCache) {
-      setCacheEntry(cacheKey, dataUrl);
-    }
-
-    if (debug) {
-      console.log('[rn-remove-image-bg] Web background removal complete');
-    }
-
-    onProgress?.(100);
-    return dataUrl;
-  } catch (error) {
-    console.error('[rn-remove-image-bg] Web background removal failed:', error);
-    // Throw error instead of silent failure
-    const message = error instanceof Error ? error.message : 'Web background removal failed';
-    throw new Error(`Background removal failed: ${message}`);
-  }
-}
-
-/**
- * Backward compatibility alias
- * @deprecated Use removeBgImage instead
- */
-export const removeBackground = removeBgImage;
-
-/**
- * Clear the web background removal cache
- * @param _deleteFiles - Ignored on web (no disk cache)
- */
-export async function clearCache(_deleteFiles = false): Promise<void> {
-  webCache.clear();
+export async function clearCache(): Promise<void> {
+  pipeline = null;
+  loadPromise = null;
 }
 
-/**
- * Get the current cache size
- */
 export function getCacheSize(): number {
-  return webCache.size;
-}
-
-/**
- * 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 async function onLowMemory(_deleteFiles = true): Promise<number> {
-  const size = webCache.size;
-  webCache.clear();
-  console.log(
-    `[rn-remove-image-bg] Cleared ${size} web cache entries due to memory pressure`
-  );
-  return size;
-}
-
-/**
- * Configure the background removal cache
- * On web, maxEntries limits cache size. Disk persistence options are no-ops.
- */
-export function configureCache(config: {
-  maxEntries?: number;
-  maxAgeMinutes?: number;
-  persistToDisk?: boolean;
-  cacheDirectory?: string;
-}): void {
-  if (config.maxEntries !== undefined && config.maxEntries > 0) {
-    webCacheConfig.maxEntries = config.maxEntries;
-  }
-  if (config.maxAgeMinutes !== undefined && config.maxAgeMinutes > 0) {
-    webCacheConfig.maxAgeMinutes = config.maxAgeMinutes;
-  }
-  // persistToDisk and cacheDirectory are no-ops on web
-}
-
-/**
- * Get the cache directory path
- * On web, returns empty string as there is no disk cache
- */
-export function getCacheDirectory(): string {
-  return '';
+  return 0;
 }
 
-// Helper functions
-
-function loadImage(src: string): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = () => resolve(img);
-    img.onerror = reject;
-    img.src = src;
-  });
-}
-
-function blobToDataUrl(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as string);
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
+export async function onLowMemory(): Promise<number> {
+  await clearCache();
+  return 0;
 }
 
-function getDataUrlSizeKB(dataUrl: string): number {
-  // Data URL format: data:mime;base64,<base64data>
-  const base64 = dataUrl.split(',')[1] || '';
-  // Base64 encodes 3 bytes as 4 characters
-  return (base64.length * 3) / 4 / 1024;
-}
+export function configureCache(_config: { maxEntries?: number }): void {}
+export function getCacheDirectory(): string { return ''; }