refactor: Change model constants to preset objects (#477)

## Description

Change model constants to preset objects

### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update (improves or adds clarity to existing
documentation)

### Tested on

- [x] iOS
- [ ] Android

### Checklist

- [x] I have performed a self-review of my code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have updated the documentation accordingly
- [x] My changes generate no new warnings

---------

Co-authored-by: Mateusz Sluszniak <sluszmat@amazon.com>

Author: jakmro

.cspell-wordlist.txt

@@ -53,3 +53,5 @@ QINT
 FNUZ
 wordlist
 jitpack
+coreml
+mobilenetv

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

@@ -13,9 +13,7 @@ export default function ClassificationScreen() {
   );
   const [imageUri, setImageUri] = useState('');
 
-  const model = useClassification({
-    modelSource: EFFICIENTNET_V2_S,
-  });
+  const model = useClassification({ model: EFFICIENTNET_V2_S });
   const { setGlobalGenerating } = useContext(GeneratingContext);
   useEffect(() => {
     setGlobalGenerating(model.isGenerating);

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

@@ -61,9 +61,7 @@ const numberToColor: number[][] = [
 ];
 
 export default function ImageSegmentationScreen() {
-  const model = useImageSegmentation({
-    modelSource: DEEPLAB_V3_RESNET50,
-  });
+  const model = useImageSegmentation({ model: DEEPLAB_V3_RESNET50 });
   const { setGlobalGenerating } = useContext(GeneratingContext);
   useEffect(() => {
     setGlobalGenerating(model.isGenerating);

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

@@ -20,9 +20,7 @@ export default function ObjectDetectionScreen() {
     height: number;
   }>();
 
-  const ssdLite = useObjectDetection({
-    modelSource: SSDLITE_320_MOBILENET_V3_LARGE,
-  });
+  const ssdLite = useObjectDetection({ model: SSDLITE_320_MOBILENET_V3_LARGE });
   const { setGlobalGenerating } = useContext(GeneratingContext);
   useEffect(() => {
     setGlobalGenerating(ssdLite.isGenerating);

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

@@ -1,13 +1,7 @@
 import Spinner from 'react-native-loading-spinner-overlay';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
-import {
-  DETECTOR_CRAFT_800,
-  RECOGNIZER_EN_CRNN_128,
-  RECOGNIZER_EN_CRNN_256,
-  RECOGNIZER_EN_CRNN_512,
-  useOCR,
-} from 'react-native-executorch';
+import { useOCR, OCR_ENGLISH } 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,15 +16,7 @@ export default function OCRScreen() {
     height: number;
   }>();
 
-  const model = useOCR({
-    detectorSource: DETECTOR_CRAFT_800,
-    recognizerSources: {
-      recognizerLarge: RECOGNIZER_EN_CRNN_512,
-      recognizerMedium: RECOGNIZER_EN_CRNN_256,
-      recognizerSmall: RECOGNIZER_EN_CRNN_128,
-    },
-    language: 'en',
-  });
+  const model = useOCR({ model: OCR_ENGLISH });
   const { setGlobalGenerating } = useContext(GeneratingContext);
   useEffect(() => {
     setGlobalGenerating(model.isGenerating);

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

@@ -1,13 +1,7 @@
 import Spinner from 'react-native-loading-spinner-overlay';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
-import {
-  DETECTOR_CRAFT_1280,
-  DETECTOR_CRAFT_320,
-  RECOGNIZER_EN_CRNN_512,
-  RECOGNIZER_EN_CRNN_64,
-  useVerticalOCR,
-} from 'react-native-executorch';
+import { useVerticalOCR, VERTICAL_OCR_ENGLISH } 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,15 +16,7 @@ export default function VerticalOCRScree() {
     height: number;
   }>();
   const model = useVerticalOCR({
-    detectorSources: {
-      detectorLarge: DETECTOR_CRAFT_1280,
-      detectorNarrow: DETECTOR_CRAFT_320,
-    },
-    recognizerSources: {
-      recognizerLarge: RECOGNIZER_EN_CRNN_512,
-      recognizerSmall: RECOGNIZER_EN_CRNN_64,
-    },
-    language: 'en',
+    model: VERTICAL_OCR_ENGLISH,
     independentCharacters: true,
   });
   const { setGlobalGenerating } = useContext(GeneratingContext);

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

@@ -11,9 +11,7 @@ import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
 
 export default function StyleTransferScreen() {
-  const model = useStyleTransfer({
-    modelSource: STYLE_TRANSFER_CANDY,
-  });
+  const model = useStyleTransfer({ model: STYLE_TRANSFER_CANDY });
   const { setGlobalGenerating } = useContext(GeneratingContext);
   useEffect(() => {
     setGlobalGenerating(model.isGenerating);

apps/llm/app/llm/index.tsx

@@ -12,12 +12,7 @@ import {
 } from 'react-native';
 import SendIcon from '../../assets/icons/send_icon.svg';
 import Spinner from 'react-native-loading-spinner-overlay';
-import {
-  LLAMA3_2_1B_QLORA,
-  LLAMA3_2_TOKENIZER,
-  LLAMA3_2_TOKENIZER_CONFIG,
-  useLLM,
-} from 'react-native-executorch';
+import { useLLM, LLAMA3_2_1B_QLORA } from 'react-native-executorch';
 import PauseIcon from '../../assets/icons/pause_icon.svg';
 import ColorPalette from '../../colors';
 import Messages from '../../components/Messages';
@@ -35,11 +30,7 @@ function LLMScreen() {
   const textInputRef = useRef<TextInput>(null);
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
-  const llm = useLLM({
-    modelSource: LLAMA3_2_1B_QLORA,
-    tokenizerSource: LLAMA3_2_TOKENIZER,
-    tokenizerConfigSource: LLAMA3_2_TOKENIZER_CONFIG,
-  });
+  const llm = useLLM({ model: LLAMA3_2_1B_QLORA });
 
   useEffect(() => {
     if (llm.error) {

apps/llm/app/llm_structured_output/index.tsx

@@ -13,8 +13,6 @@ import {
 import SendIcon from '../../assets/icons/send_icon.svg';
 import Spinner from 'react-native-loading-spinner-overlay';
 import {
-  QWEN3_TOKENIZER,
-  QWEN3_TOKENIZER_CONFIG,
   useLLM,
   fixAndValidateStructuredOutput,
   getStructuredOutputPrompt,
@@ -75,12 +73,7 @@ function LLMScreen() {
   const textInputRef = useRef<TextInput>(null);
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
-  const llm = useLLM({
-    // try out 4B model it this one struggles with following structured output
-    modelSource: QWEN3_1_7B_QUANTIZED,
-    tokenizerSource: QWEN3_TOKENIZER,
-    tokenizerConfigSource: QWEN3_TOKENIZER_CONFIG,
-  });
+  const llm = useLLM({ model: QWEN3_1_7B_QUANTIZED }); // try out 4B model if 1.7B struggles with following structured output
 
   useEffect(() => {
     setGlobalGenerating(llm.isGenerating);
@@ -89,10 +82,6 @@ function LLMScreen() {
   const { configure } = llm;
   useEffect(() => {
     const formattingInstructions = getStructuredOutputPrompt(responseSchema);
-    // const formattingInstructionsWithZod = getStructuredOutputPrompt(
-    //   responseSchemaWithZod
-    // );
-
     const prompt = `Your goal is to parse user's messages and return them in JSON format. Don't respond to user. Simply return JSON with user's question parsed. \n${formattingInstructions}\n /no_think`;
 
     configure({

apps/llm/app/llm_tool_calling/index.tsx

@@ -14,11 +14,9 @@ import SWMIcon from '../../assets/icons/swm_icon.svg';
 import SendIcon from '../../assets/icons/send_icon.svg';
 import Spinner from 'react-native-loading-spinner-overlay';
 import {
-  HAMMER2_1_1_5B,
-  HAMMER2_1_TOKENIZER,
-  HAMMER2_1_TOKENIZER_CONFIG,
   useLLM,
   DEFAULT_SYSTEM_PROMPT,
+  HAMMER2_1_1_5B_QUANTIZED,
 } from 'react-native-executorch';
 import PauseIcon from '../../assets/icons/pause_icon.svg';
 import ColorPalette from '../../colors';
@@ -41,11 +39,7 @@ function LLMToolCallingScreen() {
   const textInputRef = useRef<TextInput>(null);
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
-  const llm = useLLM({
-    modelSource: HAMMER2_1_1_5B,
-    tokenizerSource: HAMMER2_1_TOKENIZER,
-    tokenizerConfigSource: HAMMER2_1_TOKENIZER_CONFIG,
-  });
+  const llm = useLLM({ model: HAMMER2_1_1_5B_QUANTIZED });
 
   useEffect(() => {
     setGlobalGenerating(llm.isGenerating);