chore: add model selector where applicable

Author: msluszniak

apps/computer-vision/app/classification/index.tsx

@@ -2,8 +2,16 @@ import Spinner from '../../components/Spinner';
 import { getImage } from '../../utils';
 import {
   useClassification,
+  EFFICIENTNET_V2_S,
   EFFICIENTNET_V2_S_QUANTIZED,
+  ClassificationModelSources,
 } from 'react-native-executorch';
+import { ModelPicker, ModelOption } from '../../components/ModelPicker';
+
+const MODELS: ModelOption<ClassificationModelSources>[] = [
+  { label: 'EfficientNet V2 S Quantized', value: EFFICIENTNET_V2_S_QUANTIZED },
+  { label: 'EfficientNet V2 S', value: EFFICIENTNET_V2_S },
+];
 import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
 import { BottomBar } from '../../components/BottomBar';
 import React, { useContext, useEffect, useState } from 'react';
@@ -13,6 +21,8 @@ import { StatsBar } from '../../components/StatsBar';
 import ErrorBanner from '../../components/ErrorBanner';
 
 export default function ClassificationScreen() {
+  const [selectedModel, setSelectedModel] =
+    useState<ClassificationModelSources>(EFFICIENTNET_V2_S_QUANTIZED);
   const [results, setResults] = useState<{ label: string; score: number }[]>(
     []
   );
@@ -21,7 +31,7 @@ export default function ClassificationScreen() {
 
   const [error, setError] = useState<string | null>(null);
 
-  const model = useClassification({ model: EFFICIENTNET_V2_S_QUANTIZED });
+  const model = useClassification({ model: selectedModel });
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
   useEffect(() => {
@@ -106,6 +116,15 @@ export default function ClassificationScreen() {
           </View>
         )}
       </View>
+      <ModelPicker
+        models={MODELS}
+        selectedModel={selectedModel}
+        disabled={model.isGenerating}
+        onSelect={(m) => {
+          setSelectedModel(m);
+          setResults([]);
+        }}
+      />
       <StatsBar inferenceTime={inferenceTime} />
       <BottomBar
         handleCameraPress={handleCameraPress}

apps/text-embeddings/app/clip-embeddings/index.tsx

@@ -16,11 +16,21 @@ import {
   useTextEmbeddings,
   useImageEmbeddings,
   CLIP_VIT_BASE_PATCH32_TEXT,
+  CLIP_VIT_BASE_PATCH32_IMAGE,
   CLIP_VIT_BASE_PATCH32_IMAGE_QUANTIZED,
+  ImageEmbeddingsProps,
 } from 'react-native-executorch';
+
+type ImageEmbeddingModel = ImageEmbeddingsProps['model'];
+
+const IMAGE_MODELS: { label: string; value: ImageEmbeddingModel }[] = [
+  { label: 'ViT-B/32 Quantized', value: CLIP_VIT_BASE_PATCH32_IMAGE_QUANTIZED },
+  { label: 'ViT-B/32 FP32', value: CLIP_VIT_BASE_PATCH32_IMAGE },
+];
 import { launchImageLibrary } from 'react-native-image-picker';
 import { useIsFocused } from '@react-navigation/native';
 import { dotProduct } from '../../utils/math';
+import { ModelPicker } from '../../components/ModelPicker';
 
 const DEFAULT_LABELS = [
   'a photo of a dog',
@@ -37,10 +47,11 @@ export default function ClipEmbeddingsScreenWrapper() {
 }
 
 function ClipEmbeddingsScreen() {
+  const [selectedImageModel, setSelectedImageModel] =
+    useState<ImageEmbeddingModel>(CLIP_VIT_BASE_PATCH32_IMAGE_QUANTIZED);
+
   const textModel = useTextEmbeddings({ model: CLIP_VIT_BASE_PATCH32_TEXT });
-  const imageModel = useImageEmbeddings({
-    model: CLIP_VIT_BASE_PATCH32_IMAGE_QUANTIZED,
-  });
+  const imageModel = useImageEmbeddings({ model: selectedImageModel });
 
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [newLabel, setNewLabel] = useState('');
@@ -131,6 +142,15 @@ function ClipEmbeddingsScreen() {
             </Text>
           </View>
 
+          <ModelPicker
+            models={IMAGE_MODELS}
+            selectedModel={selectedImageModel}
+            onSelect={(m) => {
+              setSelectedImageModel(m);
+              setResults([]);
+            }}
+          />
+
           {/* Image picker */}
           <TouchableOpacity style={styles.imagePicker} onPress={pickImage}>
             {imageUri ? (

apps/text-embeddings/app/text-embeddings/index.tsx

@@ -11,7 +11,24 @@ import {
   Platform,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { useTextEmbeddings, ALL_MINILM_L6_V2 } from 'react-native-executorch';
+import { ModelPicker } from '../../components/ModelPicker';
+import {
+  useTextEmbeddings,
+  ALL_MINILM_L6_V2,
+  ALL_MPNET_BASE_V2,
+  MULTI_QA_MINILM_L6_COS_V1,
+  MULTI_QA_MPNET_BASE_DOT_V1,
+  TextEmbeddingsProps,
+} from 'react-native-executorch';
+
+type TextEmbeddingModel = TextEmbeddingsProps['model'];
+
+const MODELS: { label: string; value: TextEmbeddingModel }[] = [
+  { label: 'MiniLM L6', value: ALL_MINILM_L6_V2 },
+  { label: 'MPNet Base', value: ALL_MPNET_BASE_V2 },
+  { label: 'MultiQA MiniLM', value: MULTI_QA_MINILM_L6_COS_V1 },
+  { label: 'MultiQA MPNet', value: MULTI_QA_MPNET_BASE_DOT_V1 },
+];
 import { useIsFocused } from '@react-navigation/native';
 import { dotProduct } from '../../utils/math';
 import ErrorBanner from '../../components/ErrorBanner';
@@ -23,7 +40,9 @@ export default function TextEmbeddingsScreenWrapper() {
 }
 
 function TextEmbeddingsScreen() {
-  const model = useTextEmbeddings({ model: ALL_MINILM_L6_V2 });
+  const [selectedModel, setSelectedModel] =
+    useState<TextEmbeddingModel>(ALL_MINILM_L6_V2);
+  const model = useTextEmbeddings({ model: selectedModel });
   const [error, setError] = useState<string | null>(null);
 
   const [inputSentence, setInputSentence] = useState('');
@@ -132,6 +151,15 @@ function TextEmbeddingsScreen() {
         <ScrollView contentContainerStyle={styles.scrollContainer}>
           <Text style={styles.heading}>Text Embeddings Playground</Text>
           <Text style={styles.sectionTitle}>{getModelStatusText()}</Text>
+          <ModelPicker
+            models={MODELS}
+            selectedModel={selectedModel}
+            onSelect={(m) => {
+              setSelectedModel(m);
+              setSentencesWithEmbeddings([]);
+              setTopMatches([]);
+            }}
+          />
           <ErrorBanner message={error} onDismiss={() => setError(null)} />
 
           <View style={styles.card}>

apps/text-embeddings/components/ModelPicker.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+
+export type ModelOption<T> = {
+  label: string;
+  value: T;
+};
+
+type Props<T> = {
+  models: ModelOption<T>[];
+  selectedModel: T;
+  onSelect: (model: T) => void;
+  label?: string;
+  disabled?: boolean;
+};
+
+export function ModelPicker<T>({
+  models,
+  selectedModel,
+  onSelect,
+  label,
+  disabled,
+}: Props<T>) {
+  const [open, setOpen] = useState(false);
+  const selected = models.find((m) => m.value === selectedModel);
+
+  useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={[styles.trigger, disabled && styles.triggerDisabled]}
+        onPress={() => !disabled && setOpen((v) => !v)}
+        activeOpacity={disabled ? 1 : 0.7}
+      >
+        {label && <Text style={styles.label}>{label}</Text>}
+        <Text style={styles.triggerText}>{selected?.label ?? '—'}</Text>
+        <Text style={styles.chevron}>{open ? '▲' : '▼'}</Text>
+      </TouchableOpacity>
+
+      {open && (
+        <ScrollView
+          style={styles.dropdown}
+          nestedScrollEnabled
+          keyboardShouldPersistTaps="handled"
+        >
+          {models.map((item) => {
+            const isSelected = item.value === selectedModel;
+            return (
+              <TouchableOpacity
+                key={item.label}
+                style={[styles.option, isSelected && styles.optionSelected]}
+                onPress={() => {
+                  onSelect(item.value);
+                  setOpen(false);
+                }}
+              >
+                <Text
+                  style={[
+                    styles.optionText,
+                    isSelected && styles.optionTextSelected,
+                  ]}
+                >
+                  {item.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { marginHorizontal: 12, marginVertical: 4, alignSelf: 'stretch' },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#C1C6E5',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: '#f5f5f5',
+  },
+  triggerDisabled: {
+    opacity: 0.4,
+  },
+  label: {
+    fontSize: 12,
+    color: '#888',
+    marginRight: 6,
+  },
+  triggerText: {
+    flex: 1,
+    fontSize: 14,
+    color: '#001A72',
+    fontWeight: '500',
+  },
+  chevron: {
+    fontSize: 10,
+    color: '#888',
+    marginLeft: 6,
+  },
+  dropdown: {
+    borderWidth: 1,
+    borderColor: '#C1C6E5',
+    borderRadius: 8,
+    backgroundColor: '#fff',
+    maxHeight: 200,
+    marginTop: 2,
+  },
+  option: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  optionSelected: {
+    backgroundColor: '#e8ecf8',
+  },
+  optionText: {
+    fontSize: 14,
+    color: '#333',
+  },
+  optionTextSelected: {
+    color: '#001A72',
+    fontWeight: '600',
+  },
+});