rn-remove-image-bg 0.0.11 → 0.0.13

package/lib/ImageProcessing.web.js

@@ -1,249 +1,91 @@
 /**
- * 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.
  */
-// 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);
-}
-/**
- * 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);
-    }
-    return value;
-}
-/**
- * Compress image on web using canvas
- * @returns Compressed image as data URL
- */
-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;
-        const ctx = canvas.getContext('2d');
-        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';
-        let dataUrl = canvas.toDataURL(mimeType, quality);
-        // If still too large, reduce quality iteratively
-        let currentQuality = quality;
-        while (getDataUrlSizeKB(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);
-        return uri;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let pipeline = null;
+let loadPromise = null;
+async function ensureLoaded(onProgress, debug) {
+    if (pipeline)
+        return pipeline;
+    if (loadPromise) {
+        await loadPromise;
+        return pipeline;
     }
-}
-/**
- * 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;
-        canvas.height = size;
-        const ctx = canvas.getContext('2d');
-        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);
-        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);
-        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));
+    loadPromise = (async () => {
+        if (debug)
+            console.log('[rmbg] Loading model...');
+        const { pipeline: createPipeline, env } = await import('@huggingface/transformers');
+        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(`[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);
-        // Return original URI on failure
-        onProgress?.(100);
-        return uri;
-    }
-}
-/**
- * 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();
+        if (debug)
+            console.log('[rmbg] Model ready');
+    })();
+    await loadPromise;
+    return pipeline;
 }
 /**
- * Get the current cache size
+ * Remove background from image
  */
-export function getCacheSize() {
-    return webCache.size;
+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;
 }
-/**
- * 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;
+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);
 }
-/**
- * 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
+export const removeBackground = removeBgImage;
+export async function compressImage(uri, _options) {
+    console.warn('[rmbg] compressImage not implemented on web, returning original');
+    return uri;
 }
-/**
- * Get the cache directory path
- * On web, returns empty string as there is no disk cache
- */
-export function getCacheDirectory() {
+export async function generateThumbhash(_uri, _options) {
+    console.warn('[rmbg] generateThumbhash not implemented on web');
     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;
-    });
+export async function clearCache() {
+    pipeline = null;
+    loadPromise = null;
 }
-function blobToDataUrl(blob) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-    });
+export function getCacheSize() {
+    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.11",
+  "version": "0.0.13",
   "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"
   }
-}
+}