feat: example app has a quick prompt feature

.github/workflows/ci.yml

@@ -99,7 +99,7 @@ jobs:
 
       - name: Build example for Android
         env:
-          JAVA_OPTS: "-XX:MaxHeapSize=6g"
+          JAVA_OPTS: '-XX:MaxHeapSize=6g'
         run: |
           yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}"
 
@@ -130,6 +130,11 @@ jobs:
             echo "turbo_cache_hit=1" >> $GITHUB_ENV
           fi
 
+      - name: Pretend there is a model file
+        run: |
+          cd example/ios
+          touch gemma-2b-it-cpu-int4.bin
+
       - name: Cache cocoapods
         if: env.turbo_cache_hit != 1
         id: cocoapods-cache

example/android/gradle.properties

@@ -10,7 +10,7 @@
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
-org.gradle.jvmargs=-Xmx4096m -XX:MaxMetaspaceSize=512m
+org.gradle.jvmargs=-Xmx4g -XX:MaxMetaspaceSize=4096m
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit

example/ios/LlmMediapipeExample.xcodeproj/project.pbxproj

@@ -12,6 +12,7 @@
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		3706CE832BDB1D19003C9D4A /* gemma-2b-it-cpu-int4.bin in Resources */ = {isa = PBXBuildFile; fileRef = 3706CE822BDB1D19003C9D4A /* gemma-2b-it-cpu-int4.bin */; };
 		7699B88040F8A987B510C191 /* libPods-LlmMediapipeExample-LlmMediapipeExampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-LlmMediapipeExample-LlmMediapipeExampleTests.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
 /* End PBXBuildFile section */
@@ -37,6 +38,7 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = LlmMediapipeExample/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = LlmMediapipeExample/main.m; sourceTree = "<group>"; };
 		19F6CBCC0A4E27FBF8BF4A61 /* libPods-LlmMediapipeExample-LlmMediapipeExampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-LlmMediapipeExample-LlmMediapipeExampleTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		3706CE822BDB1D19003C9D4A /* gemma-2b-it-cpu-int4.bin */ = {isa = PBXFileReference; lastKnownFileType = archive.macbinary; path = "gemma-2b-it-cpu-int4.bin"; sourceTree = "<group>"; };
 		3B4392A12AC88292D35C810B /* Pods-LlmMediapipeExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-LlmMediapipeExample.debug.xcconfig"; path = "Target Support Files/Pods-LlmMediapipeExample/Pods-LlmMediapipeExample.debug.xcconfig"; sourceTree = "<group>"; };
 		5709B34CF0A7D63546082F79 /* Pods-LlmMediapipeExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-LlmMediapipeExample.release.xcconfig"; path = "Target Support Files/Pods-LlmMediapipeExample/Pods-LlmMediapipeExample.release.xcconfig"; sourceTree = "<group>"; };
 		5B7EB9410499542E8C5724F5 /* Pods-LlmMediapipeExample-LlmMediapipeExampleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-LlmMediapipeExample-LlmMediapipeExampleTests.debug.xcconfig"; path = "Target Support Files/Pods-LlmMediapipeExample-LlmMediapipeExampleTests/Pods-LlmMediapipeExample-LlmMediapipeExampleTests.debug.xcconfig"; sourceTree = "<group>"; };
@@ -116,6 +118,7 @@
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
+				3706CE822BDB1D19003C9D4A /* gemma-2b-it-cpu-int4.bin */,
 				13B07FAE1A68108700A75B9A /* LlmMediapipeExample */,
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				00E356EF1AD99517003FC87E /* LlmMediapipeExampleTests */,
@@ -243,6 +246,7 @@
 			files = (
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				3706CE832BDB1D19003C9D4A /* gemma-2b-it-cpu-int4.bin in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -546,7 +550,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -574,14 +578,22 @@
 				);
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = (
 					"$(OTHER_CFLAGS)",
 					"-DFOLLY_NO_CONFIG",
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
+				USE_HERMES = true;
 			};
 			name = Debug;
 		};
@@ -618,7 +630,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -638,14 +650,22 @@
 					"\"$(inherited)\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = NO;
+				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = (
 					"$(OTHER_CFLAGS)",
 					"-DFOLLY_NO_CONFIG",
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
+				USE_HERMES = true;
 				VALIDATE_PRODUCT = YES;
 			};
 			name = Release;

example/ios/Podfile.lock

@@ -947,7 +947,7 @@ PODS:
   - React-Mapbuffer (0.73.7):
     - glog
     - React-debug
-  - react-native-llm-mediapipe (0.1.1):
+  - react-native-llm-mediapipe (0.2.0):
     - glog
     - MediaPipeTasksGenAI
     - RCT-Folly (= 2022.05.16.00)
@@ -1359,7 +1359,7 @@ SPEC CHECKSUMS:
   React-jsinspector: f356e49aa086380d3a4892708ca173ad31ac69c1
   React-logger: 7b19bdfb254772a0332d6cd4d66eceb0678b6730
   React-Mapbuffer: 6f392912435adb8fbf4c3eee0e79a0a0b4e4b717
-  react-native-llm-mediapipe: f5fa87b4657bf0ac01700f60b49fcf8f899bec32
+  react-native-llm-mediapipe: a98f35b3298dbe4b1d050c4d65e153fabab0b146
   React-nativeconfig: 754233aac2a769578f828093b672b399355582e6
   React-NativeModulesApple: a03b2da2b8e127d5f5ee29c683e0deba7a9e1575
   React-perflogger: 68ec84e2f858a3e35009aef8866b55893e5e0a1f

example/package.json

@@ -26,4 +26,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

example/src/App.tsx

@@ -23,6 +23,21 @@ import { colors, styles } from './styles';
 import { type Message } from './types';
 import { useLlmInference } from 'react-native-llm-mediapipe';
 
+const samplePrompts = [
+  "Explain the difference between 'affect' and 'effect' and use both words correctly in a complex sentence.",
+  'If all Roses are flowers and some flowers fade quickly, can it be concluded that some roses fade quickly? Explain your answer.',
+  'A shop sells apples for $2 each and bananas for $1 each. If I buy 3 apples and 2 bananas, how much change will I get from a $10 bill?',
+  "Describe the process of photosynthesis and explain why it's crucial for life on Earth.",
+  'Who was the president of the United States during World War I, and what were the major contributions of his administration during that period?',
+  'Discuss the significance of Diwali in Indian culture and how it is celebrated across different regions of India.',
+  'Should self-driving cars be programmed to prioritize the lives of pedestrians over the occupants of the car in the event of an unavoidable accident? Discuss the ethical considerations.',
+  'Imagine a world where water is more valuable than gold. Describe a day in the life of a trader dealing in water.',
+  'Given that you learned about a new scientific discovery that overturns the previously understood mechanism of muscle growth, explain how this might impact current fitness training regimens.',
+  'What are the potential benefits and risks of using AI in recruiting and hiring processes, and how can companies mitigate the risks?',
+];
+
+let samplePromptIndex = 0;
+
 function App(): React.JSX.Element {
   const textInputRef = React.useRef<TextInput>(null);
   const [prompt, setPrompt] = React.useState('');
@@ -63,6 +78,11 @@ function App(): React.JSX.Element {
     setMessages((prev) => [...prev, { role: 'assistant', content: response }]);
   }, [llmInference, prompt]);
 
+  const onSamplePrompt = React.useCallback(() => {
+    setPrompt(samplePrompts[samplePromptIndex++ % samplePrompts.length] ?? '');
+    textInputRef.current?.focus();
+  }, []);
+
   return (
     <SafeAreaView style={styles.root}>
       <KeyboardAvoidingView
@@ -89,6 +109,13 @@ function App(): React.JSX.Element {
           </ScrollView>
         </TouchableWithoutFeedback>
         <View style={styles.promptRow}>
+          <Pressable
+            onPress={onSamplePrompt}
+            // disabled={prompt.length === 0 || partialResponse !== undefined}
+            style={styles.samplePromptButton}
+          >
+            <Text style={styles.samplePromptButtonText}>⚡️</Text>
+          </Pressable>
           <TextInput
             ref={textInputRef}
             selectTextOnFocus={true}

example/src/styles.ts

@@ -68,6 +68,11 @@ export const styles = StyleSheet.create({
     paddingBottom: 10,
     paddingHorizontal: 12,
   },
+  samplePromptButton: { marginLeft: 12, paddingHorizontal: 16 },
+  samplePromptButtonText: {
+    ...typogs.button,
+    color: colors.white,
+  },
   sendButton: { marginLeft: 12 },
   sendButtonText: {
     ...typogs.button,

package.json

@@ -71,7 +71,7 @@
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "18.2.0",
-    "react-native": "0.73.7",
+    "react-native": "0.73.4",
     "react-native-builder-bob": "^0.23.2",
     "release-it": "^15.0.0",
     "turbo": "^1.10.7",
@@ -161,4 +161,4 @@
       ]
     ]
   }
-}
+}