feat!: Yolo object detection

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

@@ -7,6 +7,11 @@ import {
   useObjectDetection,
   RF_DETR_NANO,
   SSDLITE_320_MOBILENET_V3_LARGE,
+  YOLO26N,
+  YOLO26S,
+  YOLO26M,
+  YOLO26L,
+  YOLO26X,
   ObjectDetectionModelSources,
 } from 'react-native-executorch';
 import { View, StyleSheet, Image } from 'react-native';
@@ -19,6 +24,11 @@ import { StatsBar } from '../../components/StatsBar';
 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 },
 ];
 import ErrorBanner from '../../components/ErrorBanner';
 

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

@@ -11,6 +11,7 @@ import {
   Platform,
 } from 'react-native';
 import React, { useContext, useEffect, useState } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Spinner from '../../components/Spinner';
 import {
   useTextToImage,
@@ -34,6 +35,7 @@ const MODELS: ModelOption<TextToImageModelSources>[] = [
 ];
 
 export default function TextToImageScreen() {
+  const { bottom } = useSafeAreaInsets();
   const [inferenceStepIdx, setInferenceStepIdx] = useState<number>(0);
   const [image, setImage] = useState<string | null>(null);
   const [steps, setSteps] = useState<number>(40);
@@ -173,7 +175,7 @@ export default function TextToImageScreen() {
 
         <StatsBar inferenceTime={generationTime} />
 
-        <View style={styles.inputRow}>
+        <View style={[styles.inputRow, { marginBottom: bottom || 12 }]}>
           <TextInput
             style={styles.textInput}
             placeholder="Enter prompt..."

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

@@ -48,6 +48,7 @@ type ModelId =
   | 'classification'
   | 'objectDetectionSsdlite'
   | 'objectDetectionRfdetr'
+  | 'objectDetectionYolo26n'
   | 'segmentationDeeplabResnet50'
   | 'segmentationDeeplabResnet101'
   | 'segmentationDeeplabMobilenet'
@@ -97,6 +98,7 @@ const TASKS: Task[] = [
     variants: [
       { id: 'objectDetectionSsdlite', label: 'SSDLite MobileNet' },
       { id: 'objectDetectionRfdetr', label: 'RF-DETR Nano' },
+      { id: 'objectDetectionYolo26n', label: 'YOLO26N' },
     ],
   },
   {
@@ -253,7 +255,10 @@ export default function VisionCameraScreen() {
         <ObjectDetectionTask
           {...taskProps}
           activeModel={
-            activeModel as 'objectDetectionSsdlite' | 'objectDetectionRfdetr'
+            activeModel as
+              | 'objectDetectionSsdlite'
+              | 'objectDetectionRfdetr'
+              | 'objectDetectionYolo26n'
           }
         />
       )}

apps/computer-vision/components/BottomBar.tsx

@@ -2,6 +2,7 @@ import ColorPalette from '../colors';
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import DeviceInfo from 'react-native-device-info';
 import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const BottomBar = ({
   handleCameraPress,
@@ -10,8 +11,10 @@ export const BottomBar = ({
   handleCameraPress: (isCamera: boolean) => void;
   runForward: () => void;
 }) => {
+  const { bottom } = useSafeAreaInsets();
+
   return (
-    <View style={styles.bottomContainer}>
+    <View style={[styles.bottomContainer, { paddingBottom: bottom || 16 }]}>
       <View style={styles.bottomIconsContainer}>
         <TouchableOpacity onPress={() => handleCameraPress(false)}>
           <FontAwesome name="photo" size={24} color={ColorPalette.primary} />
@@ -40,8 +43,8 @@ const styles = StyleSheet.create({
     width: '100%',
     gap: 15,
     alignItems: 'center',
-    padding: 16,
-    flex: 1,
+    paddingTop: 16,
+    paddingHorizontal: 16,
   },
   bottomIconsContainer: {
     flexDirection: 'row',

apps/computer-vision/components/ModelPicker.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
-  View,
+  Dimensions,
+  ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
-  ScrollView,
+  View,
 } from 'react-native';
 
 export type ModelOption<T> = {
@@ -20,6 +21,8 @@ type Props<T> = {
   disabled?: boolean;
 };
 
+const DROPDOWN_MAX_HEIGHT = 200;
+
 export function ModelPicker<T>({
   models,
   selectedModel,
@@ -28,18 +31,44 @@ export function ModelPicker<T>({
   disabled,
 }: Props<T>) {
   const [open, setOpen] = useState(false);
+  const [triggerHeight, setTriggerHeight] = useState(0);
+  const [expandUp, setExpandUp] = useState(false);
+  const triggerRef = useRef<React.ComponentRef<typeof TouchableOpacity>>(null);
   const selected = models.find((m) => m.value === selectedModel);
 
   useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
 
+  const handleLayout = () => {
+    triggerRef.current?.measure(
+      (
+        _x: number,
+        _y: number,
+        _width: number,
+        height: number,
+        _pageX: number,
+        pageY: number
+      ) => {
+        setTriggerHeight(height);
+        const spaceBelow = Dimensions.get('window').height - (pageY + height);
+        setExpandUp(spaceBelow < DROPDOWN_MAX_HEIGHT);
+      }
+    );
+  };
+
+  const dropdownPosition = expandUp
+    ? { bottom: triggerHeight + 2 }
+    : { top: triggerHeight + 2 };
+
   return (
     <View style={styles.container}>
       <TouchableOpacity
+        ref={triggerRef}
         style={[styles.trigger, disabled && styles.triggerDisabled]}
         onPress={() => !disabled && setOpen((v) => !v)}
         activeOpacity={disabled ? 1 : 0.7}
+        onLayout={handleLayout}
       >
         {label && <Text style={styles.label}>{label}</Text>}
         <Text style={styles.triggerText}>{selected?.label ?? '—'}</Text>
@@ -48,7 +77,7 @@ export function ModelPicker<T>({
 
       {open && (
         <ScrollView
-          style={styles.dropdown}
+          style={[styles.dropdown, dropdownPosition]}
           nestedScrollEnabled
           keyboardShouldPersistTaps="handled"
         >
@@ -81,7 +110,12 @@ export function ModelPicker<T>({
 }
 
 const styles = StyleSheet.create({
-  container: { marginHorizontal: 12, marginVertical: 4, alignSelf: 'stretch' },
+  container: {
+    marginHorizontal: 12,
+    marginVertical: 4,
+    alignSelf: 'stretch',
+    zIndex: 100,
+  },
   trigger: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -112,12 +146,20 @@ const styles = StyleSheet.create({
     marginLeft: 6,
   },
   dropdown: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
     borderWidth: 1,
     borderColor: '#C1C6E5',
     borderRadius: 8,
     backgroundColor: '#fff',
-    maxHeight: 200,
-    marginTop: 2,
+    maxHeight: DROPDOWN_MAX_HEIGHT,
+    zIndex: 100,
+    elevation: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
   },
   option: {
     paddingHorizontal: 12,

apps/computer-vision/components/vision_camera/tasks/ObjectDetectionTask.tsx

@@ -6,12 +6,18 @@ import {
   Detection,
   RF_DETR_NANO,
   SSDLITE_320_MOBILENET_V3_LARGE,
+  YOLO26N,
   useObjectDetection,
+  CocoLabel,
+  CocoLabelYolo,
 } from 'react-native-executorch';
 import BoundingBoxes from '../../BoundingBoxes';
 import { TaskProps } from './types';
 
-type ObjModelId = 'objectDetectionSsdlite' | 'objectDetectionRfdetr';
+type ObjModelId =
+  | 'objectDetectionSsdlite'
+  | 'objectDetectionRfdetr'
+  | 'objectDetectionYolo26n';
 
 type Props = TaskProps & { activeModel: ObjModelId };
 
@@ -35,10 +41,21 @@ export default function ObjectDetectionTask({
     model: RF_DETR_NANO,
     preventLoad: activeModel !== 'objectDetectionRfdetr',
   });
+  const yolo26n = useObjectDetection({
+    model: YOLO26N,
+    preventLoad: activeModel !== 'objectDetectionYolo26n',
+  });
+
+  const active =
+    activeModel === 'objectDetectionSsdlite'
+      ? ssdlite
+      : activeModel === 'objectDetectionRfdetr'
+        ? rfdetr
+        : yolo26n;
 
-  const active = activeModel === 'objectDetectionSsdlite' ? ssdlite : rfdetr;
+  type CommonDetection = Omit<Detection, 'label'> & { label: string };
 
-  const [detections, setDetections] = useState<Detection[]>([]);
+  const [detections, setDetections] = useState<CommonDetection[]>([]);
   const [imageSize, setImageSize] = useState({ width: 1, height: 1 });
   const lastFrameTimeRef = useRef(Date.now());
 
@@ -61,8 +78,19 @@ export default function ObjectDetectionTask({
   const detRof = active.runOnFrame;
 
   const updateDetections = useCallback(
-    (p: { results: Detection[]; imageWidth: number; imageHeight: number }) => {
-      setDetections(p.results);
+    (p: {
+      results:
+        | Detection<typeof CocoLabel>[]
+        | Detection<typeof CocoLabelYolo>[];
+      imageWidth: number;
+      imageHeight: number;
+    }) => {
+      setDetections(
+        p.results.map((det) => ({
+          ...det,
+          label: String(det.label),
+        }))
+      );
       setImageSize({ width: p.imageWidth, height: p.imageHeight });
       const now = Date.now();
       const diff = now - lastFrameTimeRef.current;
@@ -87,7 +115,9 @@ export default function ObjectDetectionTask({
         try {
           if (!detRof) return;
           const isFrontCamera = cameraPositionSync.getDirty() === 'front';
-          const result = detRof(frame, isFrontCamera, 0.5);
+          const result = detRof(frame, isFrontCamera, {
+            detectionThreshold: 0.5,
+          });
           // Sensor frames are landscape-native, so width/height are swapped
           // relative to portrait screen orientation.
           const screenW = frame.height;

apps/llm/app/llm/index.tsx

@@ -18,6 +18,7 @@ import PauseIcon from '../../assets/icons/pause_icon.svg';
 import ColorPalette from '../../colors';
 import Messages from '../../components/Messages';
 import { useIsFocused } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GeneratingContext } from '../../context';
 import Spinner from '../../components/Spinner';
 import SuggestedPrompts from '../../components/SuggestedPrompts';
@@ -38,6 +39,7 @@ export default function LLMScreenWrapper() {
 }
 
 function LLMScreen() {
+  const { bottom } = useSafeAreaInsets();
   const [isTextInputFocused, setIsTextInputFocused] = useState(false);
   const [userInput, setUserInput] = useState('');
   const [selectedModel, setSelectedModel] = useState<LLMModelSources>(
@@ -120,7 +122,9 @@ function LLMScreen() {
             disabled={llm.isGenerating}
           />
           <StatsBar stats={stats} />
-          <View style={styles.bottomContainer}>
+          <View
+            style={[styles.bottomContainer, { paddingBottom: bottom || 16 }]}
+          >
             <TextInput
               autoCorrect={false}
               onFocus={() => setIsTextInputFocused(true)}
@@ -187,7 +191,7 @@ const styles = StyleSheet.create({
     color: ColorPalette.primary,
   },
   bottomContainer: {
-    height: 100,
+    minHeight: 100,
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',

apps/llm/app/multimodal_llm/index.tsx

@@ -13,6 +13,7 @@ import {
 } from 'react-native';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { useIsFocused } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useLLM, LFM2_VL_1_6B_QUANTIZED } from 'react-native-executorch';
 import SendIcon from '../../assets/icons/send_icon.svg';
 import PauseIcon from '../../assets/icons/pause_icon.svg';
@@ -38,6 +39,7 @@ export default function MultimodalLLMScreenWrapper() {
 }
 
 function MultimodalLLMScreen() {
+  const { bottom } = useSafeAreaInsets();
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [userInput, setUserInput] = useState('');
   const [isTextInputFocused, setIsTextInputFocused] = useState(false);
@@ -158,7 +160,9 @@ function MultimodalLLMScreen() {
           )}
 
           <StatsBar stats={stats} />
-          <View style={styles.bottomContainer}>
+          <View
+            style={[styles.bottomContainer, { paddingBottom: bottom || 16 }]}
+          >
             {/* Image picker button */}
             <TouchableOpacity
               style={styles.imageButton}
@@ -309,7 +313,7 @@ const styles = StyleSheet.create({
     color: ColorPalette.blueDark,
   },
   bottomContainer: {
-    height: 100,
+    minHeight: 100,
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',