react-native-fast-tflite

repository·main·Indexed 22 days ago

https://github.com/mrousavy/react-native-fast-tflite

A high-performance TensorFlow Lite library for React Native (v3.0.1) built with Nitro Modules. It provides zero-copy ArrayBuffer access and direct C/C++ core API interaction. The library supports asynchronous model loading via standalone functions or hooks, synchronous inference, and GPU acceleration through CoreML on iOS and GPU/NNAPI delegates on Android. It also features integration with VisionCamera Frame Processors for real-time model execution.

Tokens
7.7K
Snippets
22
Records
38
Agent score
78%

What's inside react-native-fast-tflite

  1. Use GPU Delegates on Android (GPU/NNAPI)

    main

    To enable GPU or NNAPI acceleration on Android, you may need to include native libraries.

    Expo

    Use the config plugin in app.json or app.config.js. You can enable default libraries or specify an array of specific .so files:

    {
      "name": "my app",
      "plugins": [
        [
          "react-native-fast-tflite",
          {
            "enableAndroidGpuLibraries": true
          }
        ]
      ]
    }

    Or for specific libraries:

    {
      "name": "my app",
      "plugins": [
        [
          "react-native-fast-tflite",
          {
            "enableAndroidGpuLibraries": ["libOpenCL-pixel.so", "libGLES_mali.so"]
          }
        ]
      ]
    }

    Bare React Native

    Add the required libraries to your AndroidManifest.xml:

    <uses-native-library android:name="libOpenCL.so" android:required="false" />
    <uses-native-library android:name="libOpenCL-pixel.so" android:required="false" />
    <uses-native-library android:name="libGLES_mali.so" android:required="false" />
    <uses-native-library android:name="libPVROCL.so" android:required="false" />

    Usage

    Pass ['android-gpu'] or ['nnapi'] to loadTensorflowModel:

    // Use GPU delegate
    const model = await loadTensorflowModel(
      require('assets/my-model.tflite'),
      ['android-gpu']
    )
    
    // Use NNAPI delegate (Note: NNAPI is deprecated on Android 15; GPU is preferred)
    const model = await loadTensorflowModel(
      require('assets/my-model.tflite'),
      ['nnapi']
    )
    const model = await loadTensorflowModel(
      require('assets/my-model.tflite'),
      ['android-gpu']
    )
  2. Use NitroModules to bridge TfliteModel with VisionCamera v4

    main

    Because TfliteModel is a Nitro HybridObject, VisionCamera v4's worklet runtime cannot access it directly. You must box the model on the JS side and unbox it inside the worklet.

    Note: This workaround is not required for VisionCamera v5.

    import { NitroModules } from 'react-native-nitro-modules'
    
    const model = await loadTensorflowModel(source, ['core-ml'])
    const boxedModel = NitroModules.box(model)
    
    // Inside a VisionCamera V4 frame processor worklet:
    const unboxedModel = boxedModel.unbox()
    const output = unboxedModel.runSync([inputBuffer])
    import { NitroModules } from 'react-native-nitro-modules'
    
    const model = await loadTensorflowModel(source, ['core-ml'])
    const boxedModel = NitroModules.box(model)
    
    // Inside a VisionCamera V4 frame processor worklet:
    const unboxedModel = boxedModel.unbox()
    const output = unboxedModel.runSync([inputBuffer])
  3. Install react-native-fast-tflite

    main

    To install the library, add both react-native-fast-tflite and react-native-nitro-modules to your project using yarn:

    yarn add react-native-fast-tflite react-native-nitro-modules

    After installation, you must configure Metro to support .tflite files as assets. This allows you to include models in your app bundle and swap them at runtime without rebuilding.

    In your metro.config.js, add tflite to the assetExts array:

    module.exports = {
      // ...
      resolver: {
        assetExts: ['tflite', // ...
      },
    };

    Finally, run your app using yarn android or npx pod-install && yarn ios.

  4. Install react-native-fast-tflite v3 and dependencies

    main

    To use react-native-fast-tflite v3, you must install react-native-nitro-modules as a peer dependency. After installing, you must rebuild your native projects.

    Installation commands

    Using npm:

    npm install react-native-fast-tflite react-native-nitro-modules

    Using yarn:

    yarn add react-native-fast-tflite react-native-nitro-modules

    iOS Setup:

    cd ios && pod install && cd ..
    # npm
    npm install react-native-fast-tflite react-native-nitro-modules
    
    # yarn
    yarn add react-native-fast-tflite react-native-nitro-modules
    
    # iOS
    cd ios && pod install && cd ..
  5. Use GPU Delegates on iOS (CoreML)

    main

    To enable CoreML acceleration on iOS, follow the steps for your environment:

    Expo

    Add the react-native-fast-tflite plugin to your app.json or app.config.js with enableCoreMLDelegate set to true:

    {
      "name": "my app",
      "plugins": [
        [
          "react-native-fast-tflite",
          {
            "enableCoreMLDelegate": true
          }
        ]
      ]
    }

    Bare React Native

    1. In your Podfile, set $EnableCoreMLDelegate=true.
    2. In Xcode, add the CoreML framework under General → Frameworks, Libraries and Embedded Content.
    3. Re-install Pods and rebuild.

    Usage

    Pass ['core-ml'] as the second argument to loadTensorflowModel:

    const model = await loadTensorflowModel(
      require('assets/my-model.tflite'),
      ['core-ml']
    )
  6. Build and run the iOS app

    main

    To run the app on iOS, you must first ensure CocoaPods dependencies are installed.

    1. Install CocoaPods via Ruby bundler (if first time):
      bundle install
    2. Install/update native dependencies:
      bundle exec pod install
    3. Run the app:
      # Using npm
      npm run ios
      
      # OR using Yarn
      yarn ios
    # Using npm
    npm run ios
    
    # OR using Yarn
    yarn ios
  7. Enable CoreML Delegate via Expo Config Plugin

    main

    To enable the CoreML delegate in an Expo project, use the withCoreMLDelegate config plugin. This plugin performs two automated steps during the prebuild process:

    1. Modifies the Podfile: It inserts $EnableCoreMLDelegate=true at the top of your iOS Podfile.
    2. Configures Xcode: It adds CoreML.framework to your Xcode project.

    This is required if you want to leverage Apple's CoreML hardware acceleration for TFLite models on iOS.