Support React Native

jest.config.mjs

@@ -86,7 +86,10 @@ export default {
   // ],
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
+  moduleNameMapper: {
+    'native-universal-fs': 'node:fs/promises',
+    'react-native': new URL('./tests/react-native.mock.js', import.meta.url).pathname,
+  },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   // modulePathIgnorePatterns: [],

package.json

@@ -56,10 +56,15 @@
   "homepage": "https://github.com/huggingface/transformers.js#readme",
   "dependencies": {
     "@huggingface/jinja": "^0.3.4",
+    "native-universal-fs": "^0.2.0",
     "onnxruntime-node": "1.21.0",
+    "onnxruntime-react-native": "1.20.1",
     "onnxruntime-web": "1.22.0-dev.20250409-89f8206ba4",
     "sharp": "^0.34.1"
   },
+  "optionalDependencies": {
+    "path-browserify": "^1.0.1"
+  },
   "devDependencies": {
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.1",
@@ -82,8 +87,20 @@
     "README.md",
     "LICENSE"
   ],
+  "react-native": {
+    "react-native": "react-native",
+    "fs": false,
+    "onnxruntime-web": false,
+    "onnxruntime-node": "onnxruntime-react-native",
+    "native-universal-fs": "native-universal-fs",
+    "sharp": false,
+    "path": "path-browserify",
+    "stream/web": false
+  },
   "browser": {
     "fs": false,
+    "native-universal-fs": false,
+    "react-native": false,
     "path": false,
     "url": false,
     "sharp": false,

src/backends/onnx.js

@@ -22,6 +22,7 @@ import { env, apis } from '../env.js';
 // In either case, we select the default export if it exists, otherwise we use the named export.
 import * as ONNX_NODE from 'onnxruntime-node';
 import * as ONNX_WEB from 'onnxruntime-web';
+import * as RN from 'react-native';
 
 export { Tensor } from 'onnxruntime-common';
 
@@ -38,6 +39,9 @@ const DEVICE_TO_EXECUTION_PROVIDER_MAPPING = Object.freeze({
     webgpu: 'webgpu', // WebGPU
     cuda: 'cuda', // CUDA
     dml: 'dml', // DirectML
+    xnnpack: 'xnnpack', // XNNPACK
+    nnapi: 'nnapi', // NNAPI
+    coreml: 'coreml', // CoreML
 
     webnn: { name: 'webnn', deviceType: 'cpu' }, // WebNN (default)
     'webnn-npu': { name: 'webnn', deviceType: 'npu' }, // WebNN NPU
@@ -60,6 +64,19 @@ if (ORT_SYMBOL in globalThis) {
     // If the JS runtime exposes their own ONNX runtime, use it
     ONNX = globalThis[ORT_SYMBOL];
 
+} else if (apis.IS_REACT_NATIVE_ENV) {
+    ONNX = ONNX_NODE.default ?? ONNX_NODE;
+
+    if (RN?.Platform?.OS === 'android') {
+        supportedDevices.push('nnapi', 'xnnpack', 'cpu');
+        defaultDevices = ['nnapi', 'cpu'];
+    } else if (RN?.Platform?.OS === 'ios') {
+        supportedDevices.push('coreml', 'xnnpack', 'cpu');
+        defaultDevices = ['coreml', 'cpu'];
+    } else {
+        supportedDevices.push('xnnpack', 'cpu');
+        defaultDevices = ['cpu'];
+    }
 } else if (apis.IS_NODE_ENV) {
     ONNX = ONNX_NODE.default ?? ONNX_NODE;
 

src/env.js

@@ -22,6 +22,7 @@
  * @module env
  */
 
+import * as NativeFS from 'native-universal-fs';
 import fs from 'fs';
 import path from 'path';
 import url from 'url';
@@ -37,9 +38,11 @@ const IS_WEBNN_AVAILABLE = typeof navigator !== 'undefined' && 'ml' in navigator
 
 const IS_PROCESS_AVAILABLE = typeof process !== 'undefined';
 const IS_NODE_ENV = IS_PROCESS_AVAILABLE && process?.release?.name === 'node';
-const IS_FS_AVAILABLE = !isEmpty(fs);
+const IS_FS_AVAILABLE = !isEmpty(fs) || !isEmpty(NativeFS);
 const IS_PATH_AVAILABLE = !isEmpty(path);
 
+const IS_REACT_NATIVE_ENV = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+
 /**
  * A read-only object containing information about the APIs available in the current environment.
  */
@@ -50,6 +53,9 @@ export const apis = Object.freeze({
     /** Whether we are running in a web worker environment */
     IS_WEBWORKER_ENV,
 
+    /** Whether we are running in a React Native environment */
+    IS_REACT_NATIVE_ENV,
+
     /** Whether the Cache API is available */
     IS_WEB_CACHE_AVAILABLE,
 
@@ -75,16 +81,13 @@ export const apis = Object.freeze({
 const RUNNING_LOCALLY = IS_FS_AVAILABLE && IS_PATH_AVAILABLE;
 
 let dirname__ = './';
-if (RUNNING_LOCALLY) {
-    // NOTE: We wrap `import.meta` in a call to `Object` to prevent Webpack from trying to bundle it in CommonJS.
-    // Although we get the warning: "Accessing import.meta directly is unsupported (only property access or destructuring is supported)",
-    // it is safe to ignore since the bundled value (`{}`) isn't used for CommonJS environments (we use __dirname instead).
-    const _import_meta_url = Object(import.meta).url;
-
-    if (_import_meta_url) {
-        dirname__ = path.dirname(path.dirname(url.fileURLToPath(_import_meta_url))) // ESM
+if (IS_REACT_NATIVE_ENV) {
+    dirname__ = NativeFS.DocumentDirectoryPath;
+} else if (RUNNING_LOCALLY) {
+    if (typeof __filename !== 'undefined') {
+        dirname__ = path.dirname(path.dirname(__filename));
     } else if (typeof __dirname !== 'undefined') {
-        dirname__ = path.dirname(__dirname) // CommonJS
+        dirname__ = path.dirname(__dirname);
     }
 }
 
@@ -115,6 +118,7 @@ const localModelPath = RUNNING_LOCALLY
  * @property {boolean} useFS Whether to use the file system to load files. By default, it is `true` if available.
  * @property {boolean} useBrowserCache Whether to use Cache API to cache models. By default, it is `true` if available.
  * @property {boolean} useFSCache Whether to use the file system to cache files. By default, it is `true` if available.
+ * @property {boolean} rnUseCanvas Whether to use the Canvas API to load images on React Native. By default, it is `true`.
  * @property {string} cacheDir The directory to use for caching files with the file system. By default, it is `./.cache`.
  * @property {boolean} useCustomCache Whether to use a custom cache system (defined by `customCache`), defaults to `false`.
  * @property {Object} customCache The custom cache to use. Defaults to `null`. Note: this must be an object which
@@ -129,7 +133,7 @@ export const env = {
     /////////////////// Backends settings ///////////////////
     // NOTE: These will be populated later by the backends themselves.
     backends: {
-        // onnxruntime-web/onnxruntime-node
+        // onnxruntime-web/onnxruntime-node/onnxruntime-react-native
         onnx: {},
     },
 
@@ -142,6 +146,8 @@ export const env = {
     localModelPath: localModelPath,
     useFS: IS_FS_AVAILABLE,
 
+    rnUseCanvas: true,
+
     /////////////////// Cache settings ///////////////////
     useBrowserCache: IS_WEB_CACHE_AVAILABLE,
 

src/models.js

@@ -121,6 +121,7 @@ import { apis, env } from './env.js';
 import { WhisperGenerationConfig } from './models/whisper/generation_whisper.js';
 import { whisper_language_to_code } from './models/whisper/common_whisper.js';
 
+
 //////////////////////////////////////////////////
 // Model types: used internally
 const MODEL_TYPES = {
@@ -172,7 +173,7 @@ async function getSession(pretrained_model_name_or_path, fileName, options) {
 
     // If the device is not specified, we use the default (supported) execution providers.
     const selectedDevice = /** @type {import("./utils/devices.js").DeviceType} */(
-        device ?? (apis.IS_NODE_ENV ? 'cpu' : 'wasm')
+        device ?? (apis.IS_NODE_ENV || apis.IS_REACT_NATIVE_ENV ? 'cpu' : 'wasm')
     );
 
     const executionProviders = deviceToExecutionProviders(selectedDevice);
@@ -260,7 +261,7 @@ async function getSession(pretrained_model_name_or_path, fileName, options) {
         );
     }
 
-    const return_path = apis.IS_NODE_ENV && env.useFSCache;
+    const return_path = apis.IS_NODE_ENV && env.useFSCache || apis.IS_REACT_NATIVE_ENV;
     const bufferOrPathPromise = getModelFile(pretrained_model_name_or_path, modelFileName, true, options, return_path);
 
     // Handle onnx external data files

src/pipelines.js

@@ -75,6 +75,9 @@ import {
     topk,
 } from './utils/tensor.js';
 import { RawImage } from './utils/image.js';
+import {
+    fetchBinary
+} from './utils/hub.js';
 
 
 /**
@@ -2881,7 +2884,7 @@ export class TextToAudioPipeline extends (/** @type {new (options: TextToAudioPi
         if (typeof speaker_embeddings === 'string' || speaker_embeddings instanceof URL) {
             // Load from URL with fetch
             speaker_embeddings = new Float32Array(
-                await (await fetch(speaker_embeddings)).arrayBuffer()
+                await (await fetchBinary(speaker_embeddings)).arrayBuffer()
             );
         }
 

src/tokenizers.js

@@ -38,6 +38,8 @@ import {
 import { max, min, round } from './utils/maths.js';
 import { Tensor } from './utils/tensor.js';
 
+import { env } from './env.js';
+
 import {
     PriorityQueue,
     TokenLattice,
@@ -2119,7 +2121,7 @@ class ByteLevelDecoder extends Decoder {
      */
     convert_tokens_to_string(tokens) {
         const text = tokens.join('');
-        const byteArray = new Uint8Array([...text].map(c => this.byte_decoder[c]));
+        const byteArray = Uint8Array.from([...text].map(c => this.byte_decoder[c]));
         const decoded_text = this.text_decoder.decode(byteArray);
         return decoded_text;
     }

src/utils/audio.js

@@ -16,9 +16,16 @@ import {
 } from './core.js';
 import { apis } from '../env.js';
 import fs from 'fs';
+import * as NativeFS from 'native-universal-fs';
 import { Tensor, matmul } from './tensor.js';
 
 
+/**
+ * Helper function to read audio from a path/URL.
+ * @param {string|URL} url The path/URL to load the audio from.
+ * @param {number} sampling_rate The sampling rate to use when decoding the audio.
+ * @returns {Promise<Float32Array>} The decoded audio as a `Float32Array`.
+ */
 /**
  * Helper function to read audio from a path/URL.
  * @param {string|URL} url The path/URL to load the audio from.
@@ -814,9 +821,16 @@ export class RawAudio {
             }
             fn = saveBlob;
         } else if (apis.IS_FS_AVAILABLE) {
-            fn = async (/** @type {string} */ path, /** @type {Blob} */ blob) => {
-                let buffer = await blob.arrayBuffer();
-                fs.writeFileSync(path, Buffer.from(buffer));
+            if (apis.IS_REACT_NATIVE_ENV) {
+                fn = async (/** @type {string} */ path, /** @type {Blob} */ blob) => {
+                    let buffer = await blob.arrayBuffer();
+                    await NativeFS.writeFile(path, Buffer.from(buffer).toString('base64'), 'base64');
+                }
+            } else {
+                fn = async (/** @type {string} */ path, /** @type {Blob} */ blob) => {
+                    let buffer = await blob.arrayBuffer();
+                    fs.writeFileSync(path, Buffer.from(buffer));
+                }
             }
         } else {
             throw new Error('Unable to save because filesystem is disabled in this environment.')

src/utils/devices.js

@@ -10,6 +10,9 @@ export const DEVICE_TYPES = Object.freeze({
     webgpu: 'webgpu', // WebGPU
     cuda: 'cuda', // CUDA
     dml: 'dml', // DirectML
+    xnnpack: 'xnnpack', // XNNPACK
+    nnapi: 'nnapi', // NNAPI
+    coreml: 'coreml', // CoreML
 
     webnn: 'webnn', // WebNN (default)
     'webnn-npu': 'webnn-npu', // WebNN NPU

src/utils/generic.js

@@ -22,6 +22,17 @@ export const Callable = /** @type {any} */ (class {
         return Object.setPrototypeOf(closure, new.target.prototype)
     }
 
+    /**
+     * This method is called when the object is called as a function.
+     * @param {any} thisArg The value of `this` provided for the call.
+     * @param {any[]} args The arguments passed to the call.
+     * @returns {*} The result of calling the `_call` method.
+     * @throws {Error} If the subclass does not implement the `_call` method.
+     */
+    apply(thisArg, args) {
+        return this._call(...args)
+    }
+
     /**
      * This method should be implemented in subclasses to provide the
      * functionality of the callable object.