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/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/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/components/ModelPicker.tsx

@@ -1,10 +1,11 @@
-import React, { 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,14 +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>
@@ -44,7 +77,7 @@ export function ModelPicker<T>({
 
       {open && (
         <ScrollView
-          style={styles.dropdown}
+          style={[styles.dropdown, dropdownPosition]}
           nestedScrollEnabled
           keyboardShouldPersistTaps="handled"
         >
@@ -77,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',
@@ -108,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,