{"id":17051894,"url":"https://github.com/mrousavy/react-native-fast-tflite","last_synced_at":"2025-05-14T05:10:48.329Z","repository":{"id":189924194,"uuid":"662045971","full_name":"mrousavy/react-native-fast-tflite","owner":"mrousavy","description":"🔥 High-performance TensorFlow Lite library for React Native with GPU acceleration","archived":false,"fork":false,"pushed_at":"2025-04-08T08:33:19.000Z","size":109334,"stargazers_count":894,"open_issues_count":32,"forks_count":59,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-05-04T12:02:12.060Z","etag":null,"topics":["ai","arraybuffer","camera","detection","facial-recognition","fast","hacktoberfest","ml","native","object-detection","react","react-native","tensorflow","tensorflow-lite","tflite"],"latest_commit_sha":null,"homepage":"https://mrousavy.com","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrousavy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"mrousavy","patreon":null,"open_collective":null,"ko_fi":"mrousavy","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-07-04T08:37:10.000Z","updated_at":"2025-05-03T08:24:56.000Z","dependencies_parsed_at":"2024-10-23T02:47:58.732Z","dependency_job_id":"2667a106-e895-4e66-8509-478a48d54fe6","html_url":"https://github.com/mrousavy/react-native-fast-tflite","commit_stats":{"total_commits":136,"total_committers":9,"mean_commits":15.11111111111111,"dds":0.125,"last_synced_commit":"458f149dfc8fcebccd07af696a9d26d848b6f180"},"previous_names":["mrousavy/react-native-fast-tflite"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2Freact-native-fast-tflite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2Freact-native-fast-tflite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2Freact-native-fast-tflite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrousavy%2Freact-native-fast-tflite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrousavy","download_url":"https://codeload.github.com/mrousavy/react-native-fast-tflite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076850,"owners_count":22010611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","arraybuffer","camera","detection","facial-recognition","fast","hacktoberfest","ml","native","object-detection","react","react-native","tensorflow","tensorflow-lite","tflite"],"created_at":"2024-10-14T10:07:51.647Z","updated_at":"2025-05-14T05:10:48.220Z","avatar_url":"https://github.com/mrousavy.png","language":"C++","funding_links":["https://github.com/sponsors/mrousavy","https://ko-fi.com/mrousavy"],"categories":["C++"],"sub_categories":[],"readme":"\u003ca href=\"https://margelo.io\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./img/banner-dark.png\" /\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"./img/banner-light.png\" /\u003e\n    \u003cimg alt=\"Fast TFLite\" src=\"./img/banner-light.png\" /\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\nA high-performance [TensorFlow Lite](https://www.tensorflow.org/lite) library for React Native.\n\n- 🔥 Powered by JSI\n- 💨 Zero-copy ArrayBuffers\n- 🔧 Uses the low-level C/C++ TensorFlow Lite core API for direct memory access\n- 🔄 Supports swapping out TensorFlow Models at runtime\n- 🖥️ Supports GPU-accelerated delegates (CoreML/Metal/OpenGL)\n- 📸 Easy [VisionCamera](https://github.com/mrousavy/react-native-vision-camera) integration\n\n## Installation\n\n1. Add the npm package\n   ```sh\n   yarn add react-native-fast-tflite\n   ```\n2. In `metro.config.js`, add `tflite` as a supported asset extension:\n   ```js\n   module.exports = {\n       // ...\n       resolver: {\n           assetExts: ['tflite', // ...\n           // ...\n   ```\n   This allows you to drop `.tflite` files into your app and swap them out at runtime without having to rebuild anything! 🔥\n3. (Optional) If you want to enable the GPU Delegate, see [\"Using GPU Delegates\"](#using-gpu-delegates) down below.\n4. Run your app (`yarn android` / `npx pod-install \u0026\u0026 yarn ios`)\n\n## Usage\n\n1. Find a TensorFlow Lite (`.tflite`) model you want to use. There's thousands of public models on [tfhub.dev](https://tfhub.dev).\n2. Drag your TensorFlow Lite model into your React Native app's asset folder (e.g. `src/assets/my-model.tflite`)\n3. Load the Model:\n\n   ```ts\n   // Option A: Standalone Function\n   const model = await loadTensorflowModel(require('assets/my-model.tflite'))\n\n   // Option B: Hook in a Function Component\n   const plugin = useTensorflowModel(require('assets/my-model.tflite'))\n   ```\n\n4. Call the Model:\n   ```ts\n   const inputData = ...\n   const outputData = await model.run(inputData)\n   console.log(outputData)\n   ```\n\n### Loading Models\n\nModels can be loaded either from the React Native bundle using a `require(..)` statement, or any kind of URI/URL (`http://..` or `file://..`):\n\n```ts\n// Asset from React Native Bundle\nloadTensorflowModel(require('assets/my-model.tflite'))\n// File on the local filesystem\nloadTensorflowModel({ url: 'file:///var/mobile/.../my-model.tflite' })\n// Remote URL\nloadTensorflowModel({\n  url: 'https://tfhub.dev/google/lite-model/object_detection_v1.tflite',\n})\n```\n\nLoading a Model is asynchronous since Buffers need to be allocated. Make sure to check for any potential errors when loading a Model.\n\n### Input and Output data\n\nTensorFlow uses _tensors_ as input and output formats. Since TensorFlow Lite is optimized to run on fixed array sized byte buffers, you are responsible for interpreting the raw data yourself.\n\nTo inspect the input and output tensors on your TensorFlow Lite model, open it in [Netron](https://netron.app).\n\nFor example, the `object_detection_mobile_object_localizer_v1_1_default_1.tflite` model I found on [tfhub.dev](https://tfhub.dev) has **1 input tensor** and **4 output tensors**:\n\n![Screenshot of netron.app inspecting the model](./img/netron-inspect-model.png)\n\nIn the description on [tfhub.dev](https://tfhub.dev) we can find the description of all tensors:\n\n![Screenshot of tfhub.dev inspecting the model](./img/tfhub-description.png)\n\nFrom that we now know that we need a 192 x 192 input image with 3 bytes per pixel (meaning RGB).\n\n#### Usage (VisionCamera)\n\nIf you were to use this model with a [VisionCamera](https://github.com/mrousavy/react-native-vision-camera) Frame Processor, you would need to convert the Frame to a 192 x 192 x 3 byte array.\nTo do the conversion, use [vision-camera-resize-plugin](https://github.com/mrousavy/vision-camera-resize-plugin):\n\n```tsx\nconst objectDetection = useTensorflowModel(require('object_detection.tflite'))\nconst model =\n  objectDetection.state === 'loaded' ? objectDetection.model : undefined\n\nconst { resize } = useResizePlugin()\n\nconst frameProcessor = useFrameProcessor(\n  (frame) =\u003e {\n    'worklet'\n    if (model == null) return\n\n    // 1. Resize 4k Frame to 192x192x3 using vision-camera-resize-plugin\n    const resized = resize(frame, {\n      scale: {\n        width: 192,\n        height: 192,\n      },\n      pixelFormat: 'rgb',\n      dataType: 'uint8',\n    })\n\n    // 2. Run model with given input buffer synchronously\n    const outputs = model.runSync([resized])\n\n    // 3. Interpret outputs accordingly\n    const detection_boxes = outputs[0]\n    const detection_classes = outputs[1]\n    const detection_scores = outputs[2]\n    const num_detections = outputs[3]\n    console.log(`Detected ${num_detections[0]} objects!`)\n\n    for (let i = 0; i \u003c detection_boxes.length; i += 4) {\n      const confidence = detection_scores[i / 4]\n      if (confidence \u003e 0.7) {\n        // 4. Draw a red box around the detected object!\n        const left = detection_boxes[i]\n        const top = detection_boxes[i + 1]\n        const right = detection_boxes[i + 2]\n        const bottom = detection_boxes[i + 3]\n        const rect = SkRect.Make(left, top, right, bottom)\n        canvas.drawRect(rect, SkColors.Red)\n      }\n    }\n  },\n  [model]\n)\n\nreturn \u003cCamera frameProcessor={frameProcessor} {...otherProps} /\u003e\n```\n\n### Using GPU Delegates\n\nGPU Delegates offer faster, GPU accelerated computation. There's multiple different GPU delegates which you can enable:\n\n#### CoreML (iOS)\n\nTo enable the CoreML Delegate, you must configure react-native-fast-tflite to include it in the build.\n\n##### Expo\n\nFor Expo, just use the config plugin in your expo config (`app.json`, `app.config.json` or `app.config.js`):\n\n```json\n{\n  \"name\": \"my app\",\n  \"plugins\": [\n    [\n      \"react-native-fast-tflite\",\n      {\n        \"enableCoreMLDelegate\": true\n      }\n    ]\n  ]\n}\n```\n\n##### Bare React Native\n\nIf you are on bare React Native, you need to include the CoreML/Metal code in your project:\n\n1. Set `$EnableCoreMLDelegate` to true in your `Podfile`:\n\n   ```ruby\n   $EnableCoreMLDelegate=true\n\n   # rest of your podfile...\n   ```\n\n2. Open your iOS project in Xcode and add the `CoreML` framework to your project:\n   ![Xcode \u003e xcodeproj \u003e General \u003e Frameworks, Libraries and Embedded Content \u003e CoreML](ios/../img/ios-coreml-guide.png)\n3. Re-install Pods and build your app:\n   ```sh\n   cd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n   yarn ios\n   ```\n4. Use the CoreML Delegate:\n   ```ts\n   const model = await loadTensorflowModel(\n     require('assets/my-model.tflite'),\n     'core-ml'\n   )\n   ```\n\n\u003e [!NOTE]\n\u003e Since some operations aren't supported on the CoreML delegate, make sure your Model is able to use the CoreML GPU delegate.\n\n#### Android GPU/NNAPI (Android)\n\nTo enable GPU or NNAPI delegate in Android, you **may** need to include some native libraries, starting from Android 12.\n\n##### Expo\n\nFor Expo, just use the config plugin in your expo config (`app.json`, `app.config.json` or `app.config.js`) with `enableAndroidGpuLibraries`:\n\n```json\n{\n  \"name\": \"my app\",\n  \"plugins\": [\n    [\n      \"react-native-fast-tflite\",\n      {\n        \"enableAndroidGpuLibraries\": true\n      }\n    ]\n  ]\n}\n```\n\nBy default, when enabled, `libOpenCl.so` will be included in your AndroidManifest.xml. You can also include more libraries by passing an array of string:\n\n```json\n{\n  \"name\": \"my app\",\n  \"plugins\": [\n    [\n      \"react-native-fast-tflite\",\n      {\n        \"enableAndroidGpuLibraries\": [\"libOpenCL-pixel.so\", \"libGLES_mali.so\"]\n      }\n    ]\n  ]\n}\n```\n\n\u003e [!NOTE]\n\u003e For expo app, remember to run prebuild if the cpu library is not yet included in your AndroidManifest.xml.\n\n##### Bare React Native\n\nIf you are on bare React Native, you will need to include all needed libraries with `uses-native-library` on `application` scope in AndroidManifest.xml.\n\n```xml\n\u003c!-- Like this --\u003e\n\u003cuses-native-library android:name=\"libOpenCL.so\" android:required=\"false\" /\u003e\n\n\u003c!-- You may need one/all of the followings depends on your targeting devices --\u003e\n\u003cuses-native-library android:name=\"libOpenCL-pixel.so\" android:required=\"false\" /\u003e\n\u003cuses-native-library android:name=\"libGLES_mali.so\" android:required=\"false\" /\u003e\n\u003cuses-native-library android:name=\"libPVROCL.so\" android:required=\"false\" /\u003e\n```\n\nThen, you can just use it:\n\n```ts\nconst model = await loadTensorflowModel(\n  require('assets/my-model.tflite'),\n  'android-gpu'\n)\n// or\nconst model = await loadTensorflowModel(\n  require('assets/my-model.tflite'),\n  'nnapi'\n)\n```\n\n\u003e [!WARNING]\n\u003e NNAPI is deprecated on Android 15. Hence, it is not recommended in future projects.\n\u003e Both has similiar performance, but GPU delegate has better initial loading time.\n\n\u003e [!NOTE]\n\u003e Android does not provide support for OpenCL officially, however, most gpu vendors do provide support for it.\n\n## Community Discord\n\n[Join the Margelo Community Discord](https://discord.gg/6CSHz2qAvA) to chat about react-native-fast-tflite or other Margelo libraries.\n\n## Adopting at scale\n\n\u003ca href=\"https://github.com/sponsors/mrousavy\"\u003e\n  \u003cimg align=\"right\" width=\"160\" alt=\"This library helped you? Consider sponsoring!\" src=\".github/funding-octocat.svg\"\u003e\n\u003c/a\u003e\n\nThis library is provided _as is_, I work on it in my free time.\n\nIf you're integrating react-native-fast-tflite in a production app, consider [funding this project](https://github.com/sponsors/mrousavy) and \u003ca href=\"mailto:me@mrousavy.com?subject=Adopting react-native-fast-tflite at scale\"\u003econtact me\u003c/a\u003e to receive premium enterprise support, help with issues, prioritize bugfixes, request features, help at integrating react-native-fast-tflite and/or VisionCamera Frame Processors, and more.\n\n## Contributing\n\n1. Clone the repo\n2. Make sure you have installed Xcode CLI tools such as `gcc`, `cmake` and `python`/`python3`. See the TensorFlow documentation on what you need exactly.\n3. Run `yarn bootstrap` and select `y` (yes) on all iOS and Android related questions.\n4. Open the Example app and start developing\n   - iOS: `example/ios/TfliteExample.xcworkspace`\n   - Android: `example/android`\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrousavy%2Freact-native-fast-tflite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrousavy%2Freact-native-fast-tflite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrousavy%2Freact-native-fast-tflite/lists"}