use a third-party huggingface/transformers library and run expo prebuild in example

Author: xralphack

README.md

@@ -48,6 +48,7 @@ Link the `onnxruntime-react-native` library:
 ```sh
 npx react-native link onnxruntime-react-native
 ```
+
 </details>
 
 <details>
@@ -56,14 +57,9 @@ npx react-native link onnxruntime-react-native
 Add the Expo plugin configuration in `app.json` or `app.config.js`:
 
 ```json
-{
-  "expo": {
-    "plugins": [
-      "onnxruntime-react-native"
-    ]
-  }
-}
+{ "expo": { "plugins": ["onnxruntime-react-native"] } }
 ```
+
 </details>
 
 ### 4. Babel Configuration
@@ -76,8 +72,8 @@ module.exports = {
   // ... your existing config
   plugins: [
     // ... your existing plugins
-    "babel-plugin-transform-import-meta"
-  ]
+    'babel-plugin-transform-import-meta',
+  ],
 };
 ```
 
@@ -92,18 +88,17 @@ You can set up a development client using one of these methods:
 - **[EAS Development Build](https://docs.expo.dev/develop/development-builds/introduction/)**: Create a custom development client using EAS Build
 - **[Expo Prebuild](https://docs.expo.dev/workflow/prebuild/)**: Eject to a bare workflow to access native code
 
-
 ## Usage
 
 ### Text Generation
 
 ```javascript
-import React, { useState, useEffect } from "react";
-import { View, Text, Button } from "react-native";
-import { Pipeline } from "react-native-transformers";
+import React, { useState, useEffect } from 'react';
+import { View, Text, Button } from 'react-native';
+import { Pipeline } from 'react-native-transformers';
 
 export default function App() {
-  const [output, setOutput] = useState("");
+  const [output, setOutput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [isModelReady, setIsModelReady] = useState(false);
 
@@ -117,44 +112,44 @@ export default function App() {
     try {
       // Load a small Llama model
       await Pipeline.TextGeneration.init(
-        "Felladrin/onnx-Llama-160M-Chat-v1",
-        "onnx/decoder_model_merged.onnx",
+        'Felladrin/onnx-Llama-160M-Chat-v1',
+        'onnx/decoder_model_merged.onnx',
         {
           // The fetch function is required to download model files
           fetch: async (url) => {
             // In a real app, you might want to cache the downloaded files
             const response = await fetch(url);
             return response.url;
-          }
+          },
         }
       );
       setIsModelReady(true);
     } catch (error) {
-      console.error("Error loading model:", error);
-      alert("Failed to load model: " + error.message);
+      console.error('Error loading model:', error);
+      alert('Failed to load model: ' + error.message);
     } finally {
       setIsLoading(false);
     }
   };
 
   const generateText = () => {
-    setOutput("");
+    setOutput('');
     // Generate text from the prompt and update the UI as tokens are generated
     Pipeline.TextGeneration.generate(
-      "Write a short poem about programming:",
+      'Write a short poem about programming:',
       (text) => setOutput(text)
     );
   };
 
   return (
     <View style={{ padding: 20 }}>
       <Button
-        title={isModelReady ? "Generate Text" : "Load Model"}
+        title={isModelReady ? 'Generate Text' : 'Load Model'}
         onPress={isModelReady ? generateText : loadModel}
         disabled={isLoading}
       />
       <Text style={{ marginTop: 20 }}>
-        {output || "Generated text will appear here"}
+        {output || 'Generated text will appear here'}
       </Text>
     </View>
   );
@@ -166,18 +161,18 @@ export default function App() {
 For Expo applications, use `expo-file-system` to download models with progress tracking:
 
 ```javascript
-import * as FileSystem from "expo-file-system";
-import { Pipeline } from "react-native-transformers";
+import * as FileSystem from 'expo-file-system';
+import { Pipeline } from 'react-native-transformers';
 
 // In your model loading function
-await Pipeline.TextGeneration.init("model-repo", "model-file", {
+await Pipeline.TextGeneration.init('model-repo', 'model-file', {
   fetch: async (url) => {
-    const localPath = FileSystem.cacheDirectory + url.split("/").pop();
+    const localPath = FileSystem.cacheDirectory + url.split('/').pop();
 
     // Check if file already exists
     const fileInfo = await FileSystem.getInfoAsync(localPath);
     if (fileInfo.exists) {
-      console.log("Model already downloaded, using cached version");
+      console.log('Model already downloaded, using cached version');
       return localPath;
     }
 
@@ -187,28 +182,31 @@ await Pipeline.TextGeneration.init("model-repo", "model-file", {
       localPath,
       {},
       (progress) => {
-        const percentComplete = progress.totalBytesWritten / progress.totalBytesExpectedToWrite;
-        console.log(`Download progress: ${(percentComplete * 100).toFixed(1)}%`);
+        const percentComplete =
+          progress.totalBytesWritten / progress.totalBytesExpectedToWrite;
+        console.log(
+          `Download progress: ${(percentComplete * 100).toFixed(1)}%`
+        );
       }
     );
 
     const result = await downloadResumable.downloadAsync();
     return result?.uri;
-  }
+  },
 });
 ```
 
 ## Supported Models
 
 `react-native-transformers` works with ONNX-formatted models from Hugging Face. Here are some recommended models based on size and performance:
 
-| Model | Type | Size | Description |
-|-------|------|------|-------------|
-| [Felladrin/onnx-Llama-160M-Chat-v1](https://huggingface.co/Felladrin/onnx-Llama-160M-Chat-v1) | Text Generation | ~300MB | Small Llama model (160M parameters) |
-| [microsoft/Phi-3-mini-4k-instruct-onnx-web](https://huggingface.co/microsoft/Phi-3-mini-4k-instruct-onnx-web) | Text Generation | ~1.5GB | Microsoft's Phi-3-mini model |
-| [Xenova/distilgpt2_onnx-quantized](https://huggingface.co/Xenova/distilgpt2_onnx-quantized) | Text Generation | ~165MB | Quantized DistilGPT-2 |
-| [Xenova/tiny-mamba-onnx](https://huggingface.co/Xenova/tiny-mamba-onnx) | Text Generation | ~85MB | Tiny Mamba model |
-| [Xenova/all-MiniLM-L6-v2-onnx](https://huggingface.co/Xenova/all-MiniLM-L6-v2-onnx) | Text Embedding | ~80MB | Sentence embedding model |
+| Model                                                                                                         | Type            | Size   | Description                         |
+| ------------------------------------------------------------------------------------------------------------- | --------------- | ------ | ----------------------------------- |
+| [Felladrin/onnx-Llama-160M-Chat-v1](https://huggingface.co/Felladrin/onnx-Llama-160M-Chat-v1)                 | Text Generation | ~300MB | Small Llama model (160M parameters) |
+| [microsoft/Phi-3-mini-4k-instruct-onnx-web](https://huggingface.co/microsoft/Phi-3-mini-4k-instruct-onnx-web) | Text Generation | ~1.5GB | Microsoft's Phi-3-mini model        |
+| [Xenova/distilgpt2_onnx-quantized](https://huggingface.co/Xenova/distilgpt2_onnx-quantized)                   | Text Generation | ~165MB | Quantized DistilGPT-2               |
+| [Xenova/tiny-mamba-onnx](https://huggingface.co/Xenova/tiny-mamba-onnx)                                       | Text Generation | ~85MB  | Tiny Mamba model                    |
+| [Xenova/all-MiniLM-L6-v2-onnx](https://huggingface.co/Xenova/all-MiniLM-L6-v2-onnx)                           | Text Embedding  | ~80MB  | Sentence embedding model            |
 
 ## API Reference
 
@@ -229,12 +227,12 @@ This project is licensed under the MIT License. See the [LICENSE](LICENSE) file
 ## Acknowledgements
 
 - [ONNX Runtime](https://onnxruntime.ai/) for efficient model execution on mobile devices
-- [@xenova/transformers](https://www.npmjs.com/package/@xenova/transformers) for transformer model implementations
+- [@huggingface/transformers](github:mybigday/transformers.js-rn#merge) for transformer model implementations
 - [Hugging Face](https://huggingface.co/) for providing pre-trained models and model hosting
 
 ## External Links
 
 - [Expo Plugins Documentation](https://docs.expo.dev/guides/config-plugins/)
 - [ONNX Runtime Documentation](https://onnxruntime.ai/)
 - [Hugging Face Model Hub](https://huggingface.co/models)
-- [ONNX Format Documentation](https://onnx.ai/onnx/intro/)
+- [ONNX Format Documentation](https://onnx.ai/onnx/intro/)

example/android/.gitignore

@@ -0,0 +1,16 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# Bundle artifacts
+*.jsbundle

example/android/app/build.gradle

@@ -0,0 +1,177 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'transformers.example'
+    defaultConfig {
+        applicationId 'transformers.example'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}