chore: improve vertexai example

Author: russellwheatley

tests/test-app/examples/vertexai/base-64-media.js

@@ -1,10 +1,72 @@
-import React from 'react';
-import { AppRegistry, Button, View } from 'react-native';
+import React, { useState } from 'react';
+import { AppRegistry, Button, View, Text, Pressable } from 'react-native';
 
 import { getApp } from '@react-native-firebase/app';
 import { getVertexAI, getGenerativeModel, Schema } from '@react-native-firebase/vertexai';
+import {
+  PDF_BASE_64,
+  POEM_BASE_64,
+  VIDEO_BASE_64,
+  IMAGE_BASE_64,
+  EMOJI_BASE_64,
+} from './base-64-media';
+
+// eslint-disable-next-line react/prop-types
+function OptionSelector({ selectedOption, setSelectedOption }) {
+  const options = ['image', 'pdf', 'video', 'audio', 'emoji'];
+
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', margin: 10 }}>
+      {options.map(option => {
+        const isSelected = selectedOption === option;
+        return (
+          <Pressable
+            key={option}
+            onPress={() => setSelectedOption(option)}
+            style={{
+              paddingVertical: 10,
+              paddingHorizontal: 15,
+              margin: 5,
+              borderRadius: 8,
+              borderWidth: 1,
+              borderColor: isSelected ? '#007bff' : '#ccc',
+              backgroundColor: isSelected ? '#007bff' : '#fff',
+            }}
+          >
+            <Text style={{ color: isSelected ? '#fff' : '#000', fontSize: 16 }}>
+              {option.toUpperCase()}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
 
 function App() {
+  const [selectedOption, setSelectedOption] = useState('image');
+  const getMediaDetails = option => {
+    switch (option) {
+      case 'image':
+        return { data: IMAGE_BASE_64.trim(), mimeType: 'image/jpeg', prompt: 'What can you see?' };
+      case 'pdf':
+        return {
+          data: PDF_BASE_64.trim(),
+          mimeType: 'application/pdf',
+          prompt: 'What can you see?',
+        };
+      case 'video':
+        return { data: VIDEO_BASE_64.trim(), mimeType: 'video/mp4', prompt: 'What can you see?' };
+      case 'audio':
+        return { data: POEM_BASE_64.trim(), mimeType: 'audio/mp3', prompt: 'What can you hear?' };
+      case 'emoji':
+        return { data: EMOJI_BASE_64.trim(), mimeType: 'image/png', prompt: 'What can you see?' };
+      default:
+        console.error('Invalid option selected');
+        return null;
+    }
+  };
+
   return (
     <View>
       <View style={{ height: 90 }} />
@@ -48,21 +110,24 @@ function App() {
           }
         }}
       />
+      <Text style={{ margin: 10, fontSize: 16 }}>Select a File Type for multi-modal input:</Text>
+      <OptionSelector selectedOption={selectedOption} setSelectedOption={setSelectedOption} />
       <Button
         title="Generate Content Stream multi-modal"
         onPress={async () => {
           try {
             const app = getApp();
             const vertexai = getVertexAI(app);
             const model = getGenerativeModel(vertexai, { model: 'gemini-1.5-flash' });
-            const prompt = 'What can you see?';
-            const base64Emoji =
-              'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=';
+            const mediaDetails = getMediaDetails(selectedOption);
+            if (!mediaDetails) return;
+
+            const { data, mimeType, prompt } = mediaDetails;
 
             // Call generateContentStream with the text and images
             const response = await model.generateContentStream([
               prompt,
-              { inlineData: { mimeType: 'image/png', data: base64Emoji } },
+              { inlineData: { mimeType, data } },
             ]);
 
             let text = '';

tests/test-app/examples/vertexai.js renamed to tests/test-app/examples/vertexai/vertexai.js

@@ -3,4 +3,4 @@
  *
  * comment out all imports but the one you wish to run
  */
-require('./examples/vertexai');
+require('./examples/vertexai/vertexai');