feat: example app has a quick prompt feature

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;
 		};

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 @@
       ]
     ]
   }
-}
+}