feat!: integrate all vision models with vision camera (#880)

## Description

- Added `PixelData` input support to all vision model hooks and modules
— `forward()` now accepts both string URIs and raw pixel buffers
- Added `runOnFrame` worklet to all vision model hooks for real-time
VisionCamera v5 frame processing (`useClassification`,
`useImageEmbeddings`, `useOCR`, `useVerticalOCR`, `useObjectDetection`,
`useSemanticSegmentation`, `useStyleTransfer`)
- Refactored `StyleTransfer` C++ to unified `generateFromString` /
`generateFromPixels` with a `saveToFile` flag
- Added new VisionCamera integration docs page with setup guide, full
example, Module API pattern, and common issues section
- Updated all vision model hook and module docs to document `PixelData`
input and `runOnFrame`
- Added integration tests: `VisionModelTest` (unit tests for
`extractFromPixels` and `preprocess`), `FrameProcessorTest` (unit tests
for `pixelsToMat`), `StyleTransferTest` (full coverage of both output
modes), and `generateFromPixels` smoke tests across all vision models

### Breaking changes

#### `StyleTransferType.forward` return type changed

Before:
```typescript
  forward(imageSource: string): Promise<string>
```

After:
```typescript
  forward(input: string | PixelData, output?: 'pixelData' | 'url'): Promise<PixelData | string>
```

### Known Issues

The orientation handling is static right now, it will be fixed in the
next PR.

### Introduces a breaking change?

- [x] Yes
- [ ] No

### Type of change

- [ ] Bug fix (change which fixes an issue)
- [x] New feature (change which adds functionality)
- [x] Documentation update (improves or adds clarity to existing
documentation)
- [ ] Other (chores, tests, code style improvements etc.)

### Tested on

- [x] iOS
- [x] Android

### Testing instructions

- [x] Run computer vision app -> vision camera screen -> test all models
- [ ] Also test rest of the models in this app.
- [ ] Run test suite

### Screenshots

<!-- Add screenshots here, if applicable -->

### Related issues

<!-- Link related issues here using #issue-number -->

### 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
- [ ] My changes generate no new warnings

### Additional notes

<!-- Include any additional information, assumptions, or context that
reviewers might need to understand this PR. -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Jakub Chmura <92989966+chmjkb@users.noreply.github.com>

Author: 3 people

apps/computer-vision/app/_layout.tsx

@@ -59,6 +59,15 @@ export default function _layout() {
           headerTitleStyle: { color: ColorPalette.primary },
         }}
       >
+        <Drawer.Screen
+          name="vision_camera/index"
+          options={{
+            drawerLabel: 'Vision Camera',
+            title: 'Vision Camera',
+            headerShown: false,
+            headerTitleStyle: { color: ColorPalette.primary },
+          }}
+        />
         <Drawer.Screen
           name="classification/index"
           options={{
@@ -83,14 +92,6 @@ export default function _layout() {
             headerTitleStyle: { color: ColorPalette.primary },
           }}
         />
-        <Drawer.Screen
-          name="object_detection_live/index"
-          options={{
-            drawerLabel: 'Object Detection (Live)',
-            title: 'Object Detection (Live)',
-            headerTitleStyle: { color: ColorPalette.primary },
-          }}
-        />
         <Drawer.Screen
           name="ocr/index"
           options={{

apps/computer-vision/app/index.tsx

@@ -11,6 +11,12 @@ export default function Home() {
       <ExecutorchLogo width={64} height={64} />
       <Text style={styles.headerText}>Select a demo model</Text>
       <View style={styles.buttonContainer}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => router.navigate('vision_camera/')}
+        >
+          <Text style={styles.buttonText}>Vision Camera</Text>
+        </TouchableOpacity>
         <TouchableOpacity
           style={styles.button}
           onPress={() => router.navigate('classification/')}
@@ -29,12 +35,6 @@ export default function Home() {
         >
           <Text style={styles.buttonText}>Object Detection</Text>
         </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => router.navigate('object_detection_live/')}
-        >
-          <Text style={styles.buttonText}>Object Detection Live</Text>
-        </TouchableOpacity>
         <TouchableOpacity
           style={styles.button}
           onPress={() => router.navigate('ocr/')}

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

@@ -16,20 +16,24 @@ export default function StyleTransferScreen() {
   useEffect(() => {
     setGlobalGenerating(model.isGenerating);
   }, [model.isGenerating, setGlobalGenerating]);
+
   const [imageUri, setImageUri] = useState('');
+  const [styledUri, setStyledUri] = useState('');
+
   const handleCameraPress = async (isCamera: boolean) => {
     const image = await getImage(isCamera);
     const uri = image?.uri;
     if (typeof uri === 'string') {
-      setImageUri(uri as string);
+      setImageUri(uri);
+      setStyledUri('');
     }
   };
 
   const runForward = async () => {
     if (imageUri) {
       try {
-        const output = await model.forward(imageUri);
-        setImageUri(output);
+        const uri = await model.forward(imageUri, 'url');
+        setStyledUri(uri);
       } catch (e) {
         console.error(e);
       }
@@ -52,9 +56,11 @@ export default function StyleTransferScreen() {
           style={styles.image}
           resizeMode="contain"
           source={
-            imageUri
-              ? { uri: imageUri }
-              : require('../../assets/icons/executorch_logo.png')
+            styledUri
+              ? { uri: styledUri }
+              : imageUri
+                ? { uri: imageUri }
+                : require('../../assets/icons/executorch_logo.png')
           }
         />
       </View>