Support React Native

package.json

@@ -33,7 +33,10 @@
   },
   "homepage": "https://github.com/xenova/transformers.js#readme",
   "dependencies": {
+    "image-decode": "^1.2.2",
+    "image-encode": "^1.3.1",
     "onnxruntime-web": "^1.14.0",
+    "resize-image-data": "^0.3.1",
     "sharp": "^0.32.0"
   },
   "optionalDependencies": {

src/backends/onnx.js

@@ -27,7 +27,10 @@ export const executionProviders = [
     'wasm'
 ];
 
-if (typeof process !== 'undefined' && process?.release?.name === 'node') {
+if (
+    (typeof process !== 'undefined' && process?.release?.name === 'node') ||
+    (typeof navigator !== 'undefined' && navigator.product === 'ReactNative')
+) {
     // Running in a node-like environment.
     ONNX = ONNX_NODE;
 

src/env.js

@@ -25,21 +25,25 @@
 import fs from 'fs';
 import path from 'path';
 import url from 'url';
+import { Buffer } from 'buffer';
 
 import { ONNX } from './backends/onnx.js';
 const { env: onnx_env } = ONNX;
 
-
 // Check if various APIs are available (depends on environment)
+const IS_REACT_NATIVE = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
 const WEB_CACHE_AVAILABLE = typeof self !== 'undefined' && 'caches' in self;
-const FS_AVAILABLE = !isEmpty(fs); // check if file system is available
+const FS_AVAILABLE = !isEmpty(fs) || IS_REACT_NATIVE; // check if file system is available
 const PATH_AVAILABLE = !isEmpty(path); // check if path is available
 
 const RUNNING_LOCALLY = FS_AVAILABLE && PATH_AVAILABLE;
 
-const __dirname = RUNNING_LOCALLY
-    ? path.dirname(path.dirname(url.fileURLToPath(import.meta.url)))
-    : './';
+let __dirname = './';
+if (IS_REACT_NATIVE) {
+    __dirname = fs.DocumentDirectoryPath;
+} else if (RUNNING_LOCALLY) {
+    __dirname = path.dirname(path.dirname(url.fileURLToPath(import.meta.url)));
+}
 
 // Only used for environments with access to file system
 const DEFAULT_CACHE_DIR = RUNNING_LOCALLY
@@ -86,6 +90,8 @@ export const env = {
 
         // TensorFlow.js
         tfjs: {},
+
+        Uint8Array: IS_REACT_NATIVE ? Buffer : Uint8Array,
     },
 
     __dirname,

src/models.js

@@ -66,6 +66,8 @@ import {
     Tensor,
 } from './utils/tensor.js';
 
+import { env } from './env.js';
+
 import { executionProviders, ONNX } from './backends/onnx.js';
 const { InferenceSession, Tensor: ONNXTensor } = ONNX;
 
@@ -93,7 +95,7 @@ async function constructSession(pretrained_model_name_or_path, fileName, options
         });
     } catch (err) {
         // If the execution provided was only wasm, throw the error
-        if (executionProviders.length === 1 && executionProviders[0] === 'wasm') {
+        if (!env.allowFallback || executionProviders.length === 1 && executionProviders[0] === 'wasm') {
             throw err;
         }
 
@@ -152,7 +154,14 @@ async function sessionRun(session, inputs) {
     } catch (e) {
         // This usually occurs when the inputs are of the wrong type.
         console.error(`An error occurred during model execution: "${e}".`);
-        console.error('Inputs given to model:', checkedInputs);
+        // Not log full data, it may cause crash in React Native
+        console.error(
+            'Inputs given to model:',
+            Object.fromEntries(
+                Object.entries(checkedInputs)
+                    .map(([key, tensor]) => [key, { dims: tensor.dims, type: tensor.type }])
+            )
+        );
         throw e;
     }
 }

src/tokenizers.js

@@ -34,6 +34,10 @@ import {
 import { min } from './utils/maths.js';
 import { Tensor } from './utils/tensor.js';
 
+import { env } from './env.js';
+
+const { backends: { Uint8Array } } = env;
+
 /**
  * @typedef {import('./utils/hub.js').PretrainedOptions} PretrainedOptions
  */
@@ -1520,7 +1524,7 @@ class ByteLevelDecoder extends Decoder {
     convert_tokens_to_string(tokens) {
         let text = tokens.join('');
 
-        let byteArray = new Uint8Array([...text].map(c => this.byte_decoder[c]));
+        let byteArray = Uint8Array.from([...text].map(c => this.byte_decoder[c]));
         let decoded_text = this.text_decoder.decode(byteArray);
         return decoded_text;
     }