feat!: integrate all vision models with vision camera

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/style_transfer/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>