Support React Native

package.json

@@ -33,8 +33,11 @@
   },
   "homepage": "https://github.com/xenova/transformers.js#readme",
   "dependencies": {
+    "image-decode": "^1.2.2",
+    "image-encode": "^1.3.1",
     "onnxruntime-web": "^1.14.0",
-    "sharp": "^0.32.0"
+    "sharp": "^0.32.0",
+    "xregexp": "^5.1.1"
   },
   "optionalDependencies": {
     "onnxruntime-node": "^1.14.0"
@@ -51,6 +54,9 @@
     "webpack-cli": "^5.0.2",
     "webpack-dev-server": "^4.13.3"
   },
+  "overrides": {
+    "jpeg-js": "^0.4.4"
+  },
   "files": [
     "src",
     "dist",
@@ -71,4 +77,4 @@
   },
   "jsdelivr": "./dist/transformers.min.js",
   "unpkg": "./dist/transformers.min.js"
-}
+}

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,27 @@
 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 GCANVAS_AVAILABLE = IS_REACT_NATIVE && typeof document !== 'undefined' && typeof Image !== 'undefined';
+
 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 +92,8 @@ export const env = {
 
         // TensorFlow.js
         tfjs: {},
+
+        Uint8Array: IS_REACT_NATIVE ? Buffer : Uint8Array,
     },
 
     __dirname,
@@ -99,6 +107,8 @@ export const env = {
     localModelPath: localModelPath,
     useFS: FS_AVAILABLE,
 
+    useGCanvas: GCANVAS_AVAILABLE,
+
     /////////////////// Cache settings ///////////////////
     useBrowserCache: WEB_CACHE_AVAILABLE,
     useFSCache: FS_AVAILABLE,

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

@@ -20,6 +20,8 @@
  * @module tokenizers
  */
 
+import XRegExp from 'xregexp';
+
 import {
     Callable,
     reverseDictionary,
@@ -34,6 +36,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
  */
@@ -60,7 +66,7 @@ async function loadTokenizer(pretrained_model_name_or_path, options) {
  */
 function createPattern(pattern) {
     if (pattern.Regex) {
-        return new RegExp(pattern.Regex, 'gu');
+        return XRegExp(pattern.Regex, 'gu');
 
     } else if (pattern.String) {
         return pattern.String;
@@ -1520,7 +1526,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;
     }