feat!: typed models accessor + v0.9.0 model layout

Author: msluszniak

.eslintrc.js

@@ -63,7 +63,11 @@ module.exports = {
         customWordListFile: path.resolve(__dirname, '.cspell-wordlist.txt'),
       },
     ],
-    'camelcase': 'error',
+    // `properties: 'never'` lets the lowercase snake_case keys in `models`
+    // (e.g. `models.text_to_speech.kokoro_small`, mirroring the underlying
+    // `.pte` filenames) pass while still requiring camelCase for variable
+    // and function declarations.
+    'camelcase': ['error', { properties: 'never' }],
     'jsdoc/require-jsdoc': 'off',
     'jsdoc/require-param': ['error', { checkDestructured: false }],
     'jsdoc/check-param-names': ['error', { checkDestructured: false }],

apps/bare-rn/App.tsx

@@ -13,11 +13,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {
-  initExecutorch,
-  useLLM,
-  LLAMA3_2_1B_SPINQUANT,
-} from 'react-native-executorch';
+import { models, initExecutorch, useLLM } from 'react-native-executorch';
 import { BareResourceFetcher } from 'react-native-executorch-bare-resource-fetcher';
 import { setConfig } from '@kesha-antonov/react-native-background-downloader';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
@@ -144,7 +140,9 @@ function App() {
   const textInputRef = useRef<TextInput>(null);
   const scrollViewRef = useRef<ScrollView>(null);
 
-  const llm = useLLM({ model: LLAMA3_2_1B_SPINQUANT });
+  const llm = useLLM({
+    model: models.llm.lfm2_5_1_2b_instruct(),
+  });
   // Alternatively, to use a custom local model, uncomment below:
   // const llm = useLLM({ model: {
   //   modelSource: require('./assets/ai-models/smolLm2/smolLm2_135M/smolLm2_135M_bf16.pte'),

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

@@ -1,16 +1,22 @@
 import Spinner from '../../components/Spinner';
 import { getImage } from '../../utils';
 import {
+  models,
   useClassification,
-  EFFICIENTNET_V2_S,
-  EFFICIENTNET_V2_S_QUANTIZED,
   ClassificationModelSources,
 } from 'react-native-executorch';
 import { ModelPicker, ModelOption } from '../../components/ModelPicker';
+const classification = models.classification;
 
 const MODELS: ModelOption<ClassificationModelSources>[] = [
-  { label: 'EfficientNet V2 S Quantized', value: EFFICIENTNET_V2_S_QUANTIZED },
-  { label: 'EfficientNet V2 S', value: EFFICIENTNET_V2_S },
+  {
+    label: 'EfficientNet V2 S Quantized',
+    value: classification.efficientnet_v2_s(),
+  },
+  {
+    label: 'EfficientNet V2 S',
+    value: classification.efficientnet_v2_s({ quant: false }),
+  },
 ];
 import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
 import { BottomBar } from '../../components/BottomBar';
@@ -22,7 +28,7 @@ import ErrorBanner from '../../components/ErrorBanner';
 
 export default function ClassificationScreen() {
   const [selectedModel, setSelectedModel] =
-    useState<ClassificationModelSources>(EFFICIENTNET_V2_S_QUANTIZED);
+    useState<ClassificationModelSources>(classification.efficientnet_v2_s());
   const [results, setResults] = useState<{ label: string; score: number }[]>(
     []
   );

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

@@ -3,16 +3,9 @@ import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
 import { ModelPicker, ModelOption } from '../../components/ModelPicker';
 import {
+  models,
   useInstanceSegmentation,
-  YOLO26N_SEG,
-  YOLO26S_SEG,
-  YOLO26M_SEG,
-  YOLO26L_SEG,
-  YOLO26X_SEG,
-  RF_DETR_NANO_SEG,
   InstanceSegmentationModelSources,
-  FASTSAM_S,
-  FASTSAM_X,
 } from 'react-native-executorch';
 import {
   View,
@@ -29,21 +22,28 @@ import ImageWithMasks, {
   DisplayInstance,
 } from '../../components/ImageWithMasks';
 import { StatsBar } from '../../components/StatsBar';
+const instanceSegmentation = models.instance_segmentation;
+const objectDetection = models.object_detection;
 
 const MODELS: ModelOption<InstanceSegmentationModelSources>[] = [
-  { label: 'Yolo26N', value: YOLO26N_SEG },
-  { label: 'Yolo26S', value: YOLO26S_SEG },
-  { label: 'Yolo26M', value: YOLO26M_SEG },
-  { label: 'Yolo26L', value: YOLO26L_SEG },
-  { label: 'Yolo26X', value: YOLO26X_SEG },
-  { label: 'RF-DeTR Nano', value: RF_DETR_NANO_SEG },
-  { label: 'FastSAM-S', value: FASTSAM_S },
-  { label: 'FastSAM-X', value: FASTSAM_X },
+  { label: 'Yolo26N', value: instanceSegmentation.yolo26n_seg() },
+  { label: 'Yolo26S', value: instanceSegmentation.yolo26s_seg() },
+  { label: 'Yolo26M', value: instanceSegmentation.yolo26m_seg() },
+  { label: 'Yolo26L', value: instanceSegmentation.yolo26l_seg() },
+  { label: 'Yolo26X', value: instanceSegmentation.yolo26x_seg() },
+  {
+    label: 'RF-DeTR Nano',
+    value: instanceSegmentation.rf_detr_nano_seg(),
+  },
+  { label: 'FastSAM-S', value: objectDetection.fastsam_s() },
+  { label: 'FastSAM-X', value: objectDetection.fastsam_x() },
 ];
 
 export default function InstanceSegmentationScreen() {
   const [selectedModel, setSelectedModel] =
-    useState<InstanceSegmentationModelSources>(YOLO26N_SEG);
+    useState<InstanceSegmentationModelSources>(
+      instanceSegmentation.yolo26n_seg()
+    );
   const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
   const { setGlobalGenerating } = useContext(GeneratingContext);

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

@@ -3,15 +3,9 @@ import { BottomBar } from '../../components/BottomBar';
 import { ModelPicker, ModelOption } from '../../components/ModelPicker';
 import { getImage } from '../../utils';
 import {
+  models,
   Detection,
   useObjectDetection,
-  RF_DETR_NANO,
-  SSDLITE_320_MOBILENET_V3_LARGE,
-  YOLO26N,
-  YOLO26S,
-  YOLO26M,
-  YOLO26L,
-  YOLO26X,
   ObjectDetectionModelSources,
 } from 'react-native-executorch';
 import { View, StyleSheet, Image, Text } from 'react-native';
@@ -20,15 +14,22 @@ import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
 import { StatsBar } from '../../components/StatsBar';
+const objectDetection = models.object_detection;
 
 const MODELS: ModelOption<ObjectDetectionModelSources>[] = [
-  { label: 'RF-DeTR Nano', value: RF_DETR_NANO },
-  { label: 'SSDLite MobileNet', value: SSDLITE_320_MOBILENET_V3_LARGE },
-  { label: 'YOLO26N', value: YOLO26N },
-  { label: 'YOLO26S', value: YOLO26S },
-  { label: 'YOLO26M', value: YOLO26M },
-  { label: 'YOLO26L', value: YOLO26L },
-  { label: 'YOLO26X', value: YOLO26X },
+  {
+    label: 'RF-DeTR Nano',
+    value: objectDetection.rf_detr_nano(),
+  },
+  {
+    label: 'SSDLite MobileNet',
+    value: objectDetection.ssdlite_320_mobilenet_v3_large(),
+  },
+  { label: 'YOLO26N', value: objectDetection.yolo26n() },
+  { label: 'YOLO26S', value: objectDetection.yolo26s() },
+  { label: 'YOLO26M', value: objectDetection.yolo26m() },
+  { label: 'YOLO26L', value: objectDetection.yolo26l() },
+  { label: 'YOLO26X', value: objectDetection.yolo26x() },
 ];
 import ErrorBanner from '../../components/ErrorBanner';
 
@@ -41,7 +42,7 @@ export default function ObjectDetectionScreen() {
     height: number;
   }>();
   const [selectedModel, setSelectedModel] =
-    useState<ObjectDetectionModelSources>(RF_DETR_NANO);
+    useState<ObjectDetectionModelSources>(objectDetection.rf_detr_nano());
   const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
   const model = useObjectDetection({ model: selectedModel });

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

@@ -2,17 +2,7 @@ import Spinner from '../../components/Spinner';
 import { BottomBar } from '../../components/BottomBar';
 import { ModelPicker, ModelOption } from '../../components/ModelPicker';
 import { getImage } from '../../utils';
-import {
-  useOCR,
-  OCR_ENGLISH,
-  OCR_GERMAN,
-  OCR_FRENCH,
-  OCR_SPANISH,
-  OCR_ITALIAN,
-  OCR_JAPANESE,
-  OCR_KOREAN,
-  OCRProps,
-} from 'react-native-executorch';
+import { models, useOCR, OCRProps } from 'react-native-executorch';
 import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
 import ImageWithBboxes2 from '../../components/ImageWithOCRBboxes';
 import React, { useContext, useEffect, useState } from 'react';
@@ -22,14 +12,16 @@ import { StatsBar } from '../../components/StatsBar';
 
 type OCRModelSources = OCRProps['model'];
 
+const ocr = models.ocr.craft;
+
 const MODELS: ModelOption<OCRModelSources>[] = [
-  { label: 'English', value: OCR_ENGLISH },
-  { label: 'German', value: OCR_GERMAN },
-  { label: 'French', value: OCR_FRENCH },
-  { label: 'Spanish', value: OCR_SPANISH },
-  { label: 'Italian', value: OCR_ITALIAN },
-  { label: 'Japanese', value: OCR_JAPANESE },
-  { label: 'Korean', value: OCR_KOREAN },
+  { label: 'English', value: ocr({ language: 'en' }) },
+  { label: 'German', value: ocr({ language: 'de' }) },
+  { label: 'French', value: ocr({ language: 'fr' }) },
+  { label: 'Spanish', value: ocr({ language: 'es' }) },
+  { label: 'Italian', value: ocr({ language: 'it' }) },
+  { label: 'Japanese', value: ocr({ language: 'ja' }) },
+  { label: 'Korean', value: ocr({ language: 'ko' }) },
 ];
 import ErrorBanner from '../../components/ErrorBanner';
 
@@ -41,8 +33,9 @@ export default function OCRScreen() {
     width: number;
     height: number;
   }>();
-  const [selectedModel, setSelectedModel] =
-    useState<OCRModelSources>(OCR_ENGLISH);
+  const [selectedModel, setSelectedModel] = useState<OCRModelSources>(
+    ocr({ language: 'en' })
+  );
   const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
   const model = useOCR({

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

@@ -1,7 +1,7 @@
 import Spinner from '../../components/Spinner';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
-import { useVerticalOCR, OCR_ENGLISH } from 'react-native-executorch';
+import { models, useVerticalOCR } from 'react-native-executorch';
 import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
 import ImageWithBboxes2 from '../../components/ImageWithOCRBboxes';
 import React, { useContext, useEffect, useState } from 'react';
@@ -22,7 +22,7 @@ export default function VerticalOCRScreen() {
   const [error, setError] = useState<string | null>(null);
 
   const model = useVerticalOCR({
-    model: OCR_ENGLISH,
+    model: models.ocr.craft({ language: 'en' }),
     independentCharacters: true,
   });
 

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

@@ -2,11 +2,11 @@ import Spinner from '../../components/Spinner';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
 import {
+  models,
   usePoseEstimation,
   PoseDetections,
   RnExecutorchError,
   RnExecutorchErrorCode,
-  YOLO26N_POSE,
 } from 'react-native-executorch';
 import { View, StyleSheet, Image, Text } from 'react-native';
 import React, { useContext, useEffect, useState } from 'react';
@@ -31,7 +31,7 @@ export default function PoseEstimationScreen() {
   const [inferenceTime, setInferenceTime] = useState<number | null>(null);
   const [layout, setLayout] = useState({ width: 0, height: 0 });
 
-  const model = usePoseEstimation({ model: YOLO26N_POSE });
+  const model = usePoseEstimation({ model: models.pose_estimation.yolo26n() });
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
   useEffect(() => {

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

@@ -21,13 +21,10 @@ import {
   AlphaType,
 } from '@shopify/react-native-skia';
 import {
+  models,
   useInstanceSegmentation,
   useImageEmbeddings,
   useTextEmbeddings,
-  FASTSAM_S,
-  FASTSAM_X,
-  CLIP_VIT_BASE_PATCH32_IMAGE_QUANTIZED,
-  CLIP_VIT_BASE_PATCH32_TEXT,
   InstanceSegmentationModelSources,
   SegmentedInstance,
   FastSAMLabel,
@@ -48,19 +45,20 @@ import ImageWithMasks, {
 } from '../../components/ImageWithMasks';
 import { getImage } from '../../utils';
 import ColorPalette from '../../colors';
+const objectDetection = models.object_detection;
 
 type PromptMode = 'point' | 'box' | 'text';
 
 const MODELS: ModelOption<InstanceSegmentationModelSources>[] = [
-  { label: 'FastSAM-S', value: FASTSAM_S },
-  { label: 'FastSAM-X', value: FASTSAM_X },
+  { label: 'FastSAM-S', value: objectDetection.fastsam_s() },
+  { label: 'FastSAM-X', value: objectDetection.fastsam_x() },
 ];
 
 export default function SegmentAnythingScreen() {
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
   const [selectedModel, setSelectedModel] =
-    useState<InstanceSegmentationModelSources>(FASTSAM_S);
+    useState<InstanceSegmentationModelSources>(objectDetection.fastsam_s());
   const [mode, setMode] = useState<PromptMode>('point');
   const [inferenceTime, setInferenceTime] = useState<number | null>(null);
 
@@ -78,9 +76,11 @@ export default function SegmentAnythingScreen() {
     useInstanceSegmentation({ model: selectedModel });
 
   const clipImage = useImageEmbeddings({
-    model: CLIP_VIT_BASE_PATCH32_IMAGE_QUANTIZED,
+    model: models.image_embedding.clip_vit_base_patch32_image(),
+  });
+  const clipText = useTextEmbeddings({
+    model: models.text_embedding.clip_vit_base_patch32_text(),
   });
-  const clipText = useTextEmbeddings({ model: CLIP_VIT_BASE_PATCH32_TEXT });
   const skiaSource = useImage(imageUri || null);
 
   const [textPrompt, setTextPrompt] = useState('');