rn-remove-image-bg 0.0.11 → 0.0.13

package/src/ImageProcessing.web.ts

@@ -1,346 +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.
  */
 
-// @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);
-	}
-
-	// 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;
-}
-
-/**
- * Compress image on web using canvas
- * @returns Compressed image as data URL
- */
-export async function compressImage(
-  uri: string,
-  options: CompressImageOptions = {}
-): Promise<string> {
-  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);
-    }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let pipeline: any = null;
+let loadPromise: Promise<void> | null = null;
 
-    return dataUrl;
-  } catch (error) {
-    console.warn(
-      '[rn-remove-image-bg] compressImage failed on web, returning original:',
-      error
-    );
-    return uri;
+async function ensureLoaded(onProgress?: (p: number) => void, debug?: boolean) {
+  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: string,
-  options: GenerateThumbhashOptions = {}
-): Promise<string> {
-  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);
+  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('[rmbg] Model ready');
+  })();
 
-    // Convert to base64
-    return btoa(String.fromCharCode(...hash));
-  } catch (error) {
-    console.warn(
-      '[rn-remove-image-bg] generateThumbhash failed on web:',
-      error
-    );
-    return '';
-  }
+  await loadPromise;
+  return pipeline;
 }
 
 /**
- * Remove background from image on web using @imgly/background-removal
- * @returns Data URL of processed image with transparent background
+ * Remove background from image
  */
 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);
-  }
+  const { format = 'PNG', quality = 100, onProgress, debug = false } = options;
 
+  if (debug) console.log('[rmbg] Processing:', 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,
-      },
-    });
+  const segmenter = await ensureLoaded(onProgress, debug);
+  onProgress?.(60);
 
-    onProgress?.(95);
+  const results = await segmenter(uri);
+  onProgress?.(90);
 
-    // Convert blob to data URL
-    const dataUrl = await blobToDataUrl(blob);
+  const result = Array.isArray(results) ? results[0] : results;
+  if (!result?.mask) throw new Error('No mask returned');
 
-    // Cache the result with LRU eviction
-    if (useCache) {
-      setCacheEntry(cacheKey, dataUrl);
-    }
+  // Convert to data URL
+  const dataUrl = typeof result.mask === 'string' 
+    ? result.mask 
+    : toDataUrl(result.mask, format, quality);
 
-    if (debug) {
-      console.log('[rn-remove-image-bg] Web background removal complete');
-    }
+  if (debug) console.log('[rmbg] Done');
+  onProgress?.(100);
+  
+  return dataUrl;
+}
 
-    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;
-  }
+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);
 }
 
-/**
- * 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();
-}
-
-/**
- * Get the current cache size
- */
-export function getCacheSize(): number {
-  return webCache.size;
+// Stub exports for API compatibility with native
+export interface CompressImageOptions {
+  maxSizeKB?: number;
+  width?: number;
+  height?: number;
+  quality?: number;
+  format?: 'webp' | 'png' | 'jpeg';
 }
 
-/**
- * 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;
+export interface GenerateThumbhashOptions {
+  size?: number;
 }
 
-/**
- * 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
+export async function compressImage(uri: string, _options?: CompressImageOptions): Promise<string> {
+  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(): string {
+export async function generateThumbhash(_uri: string, _options?: GenerateThumbhashOptions): Promise<string> {
+  console.warn('[rmbg] generateThumbhash not implemented on web');
   return '';
 }
 
-// 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;
-  });
+export async function clearCache(): Promise<void> {
+  pipeline = null;
+  loadPromise = null;
 }
 
-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 function getCacheSize(): number {
+  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 async function onLowMemory(): Promise<number> {
+  await clearCache();
+  return 0;
 }
+
+export function configureCache(_config: { maxEntries?: number }): void {}
+export function getCacheDirectory(): string { return ''; }