rn-remove-image-bg 0.0.13 → 0.0.14

package/lib/ImageProcessing.web.d.ts

@@ -1,6 +1,7 @@
 /**
  * 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 {
@@ -24,8 +25,8 @@ export interface CompressImageOptions {
 export interface GenerateThumbhashOptions {
     size?: number;
 }
-export declare function compressImage(uri: string, _options?: CompressImageOptions): Promise<string>;
-export declare function generateThumbhash(_uri: string, _options?: GenerateThumbhashOptions): Promise<string>;
+export declare function compressImage(uri: string, options?: CompressImageOptions): Promise<string>;
+export declare function generateThumbhash(imageUri: string, options?: GenerateThumbhashOptions): Promise<string>;
 export declare function clearCache(): Promise<void>;
 export declare function getCacheSize(): number;
 export declare function onLowMemory(): Promise<number>;

package/lib/ImageProcessing.web.js

@@ -1,10 +1,22 @@
 /**
  * Web implementation using @huggingface/transformers
  * Uses BRIAAI RMBG-1.4 model for background removal.
+ * Loads from CDN to bypass Metro bundler issues.
  */
 // 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;
+}
 async function ensureLoaded(onProgress, debug) {
     if (pipeline)
         return pipeline;
@@ -15,7 +27,7 @@ async function ensureLoaded(onProgress, debug) {
     loadPromise = (async () => {
         if (debug)
             console.log('[rmbg] Loading model...');
-        const { pipeline: createPipeline, env } = await import('@huggingface/transformers');
+        const { pipeline: createPipeline, env } = await loadTransformers();
         env.allowLocalModels = false;
         env.useBrowserCache = true;
         onProgress?.(10);
@@ -68,13 +80,68 @@ function toDataUrl(mask, format, quality) {
     return canvas.toDataURL(format === 'WEBP' ? 'image/webp' : 'image/png', quality / 100);
 }
 export const removeBackground = removeBgImage;
-export async function compressImage(uri, _options) {
-    console.warn('[rmbg] compressImage not implemented on web, returning original');
-    return uri;
+// 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 generateThumbhash(_uri, _options) {
-    console.warn('[rmbg] generateThumbhash not implemented on web');
-    return '';
+export async function compressImage(uri, options = {}) {
+    const { maxSizeKB = 250, width = 1024, height = 1024, quality = 0.85, format = 'webp', } = options;
+    try {
+        const img = await loadImage(uri);
+        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);
+        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);
+        const mimeType = format === 'png' ? 'image/png' : format === 'jpeg' ? 'image/jpeg' : 'image/webp';
+        let dataUrl = canvas.toDataURL(mimeType, quality);
+        // Reduce quality if over size limit
+        let currentQuality = quality;
+        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('[rmbg] compressImage failed:', error);
+        return uri;
+    }
+}
+export async function generateThumbhash(imageUri, options = {}) {
+    const { size = 32 } = options;
+    try {
+        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);
+        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);
+        return btoa(String.fromCharCode(...hash));
+    }
+    catch (error) {
+        console.warn('[rmbg] generateThumbhash failed:', error);
+        return '';
+    }
 }
 export async function clearCache() {
     pipeline = null;

package/package.json

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

package/src/ImageProcessing.web.ts

@@ -1,6 +1,7 @@
 /**
  * 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';
@@ -15,6 +16,18 @@ export interface RemoveBgImageOptions {
 // 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;
@@ -27,7 +40,7 @@ async function ensureLoaded(onProgress?: (p: number) => void, debug?: boolean) {
   loadPromise = (async () => {
     if (debug) console.log('[rmbg] Loading model...');
     
-    const { pipeline: createPipeline, env } = await import('@huggingface/transformers');
+    const { pipeline: createPipeline, env } = await loadTransformers();
     
     env.allowLocalModels = false;
     env.useBrowserCache = true;
@@ -36,7 +49,7 @@ async function ensureLoaded(onProgress?: (p: number) => void, debug?: boolean) {
     
     pipeline = await createPipeline('image-segmentation', 'briaai/RMBG-1.4', {
       dtype: 'q8',
-      progress_callback: (info) => {
+      progress_callback: (info: { progress?: number }) => {
         if (onProgress && 'progress' in info && typeof info.progress === 'number') {
           onProgress(Math.min(10 + (info.progress / 100) * 50, 60));
         }
@@ -99,7 +112,17 @@ function toDataUrl(
 
 export const removeBackground = removeBgImage;
 
-// Stub exports for API compatibility with native
+// 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;
@@ -112,14 +135,76 @@ export interface GenerateThumbhashOptions {
   size?: number;
 }
 
-export async function compressImage(uri: string, _options?: CompressImageOptions): Promise<string> {
-  console.warn('[rmbg] compressImage not implemented on web, returning original');
-  return uri;
+export async function compressImage(
+  uri: string,
+  options: CompressImageOptions = {}
+): Promise<string> {
+  const {
+    maxSizeKB = 250,
+    width = 1024,
+    height = 1024,
+    quality = 0.85,
+    format = 'webp',
+  } = options;
+
+  try {
+    const img = await loadImage(uri);
+    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);
+
+    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);
+
+    const mimeType = format === 'png' ? 'image/png' : format === 'jpeg' ? 'image/jpeg' : 'image/webp';
+    let dataUrl = canvas.toDataURL(mimeType, quality);
+
+    // Reduce quality if over size limit
+    let currentQuality = quality;
+    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('[rmbg] compressImage failed:', error);
+    return uri;
+  }
 }
 
-export async function generateThumbhash(_uri: string, _options?: GenerateThumbhashOptions): Promise<string> {
-  console.warn('[rmbg] generateThumbhash not implemented on web');
-  return '';
+export async function generateThumbhash(
+  imageUri: string,
+  options: GenerateThumbhashOptions = {}
+): Promise<string> {
+  const { size = 32 } = options;
+
+  try {
+    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);
+
+    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);
+    return btoa(String.fromCharCode(...hash));
+  } catch (error) {
+    console.warn('[rmbg] generateThumbhash failed:', error);
+    return '';
+  }
 }
 
 export async function clearCache(): Promise<void> {