Merge branch 'main' into use-our-fork-for-test

Author: jhen0409

components/models/ImageClassification.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Image, StyleSheet } from 'react-native';
-import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import SelectField from '../form/SelectField';
 import TextField from '../form/TextField';
 import Button from '../form/Button';
 import Progress from '../Progress';
+import { usePhoto } from '../../utils/photo';
 
 export const title = 'Image Classification';
 
@@ -38,15 +38,7 @@ export function Interact({ runPipe }: InteractProps): JSX.Element {
     setWIP(false);
   }, []);
 
-  const takePhoto = useCallback(async () => {
-    const { assets: [ { uri } ] } = await launchCamera();
-    call(uri);
-  }, []);
-
-  const selectPhoto = useCallback(async () => {
-    const { assets: [ { uri } ] } = await launchImageLibrary();
-    call(uri);
-  }, []);
+  const { selectPhoto, takePhoto } = usePhoto((uri) => call(uri));
 
   return (
     <>

components/models/ImageSegmentation.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import { StyleSheet } from 'react-native';
 import { GCanvasView } from '@flyskywhy/react-native-gcanvas';
 import { RawImage } from '@xenova/transformers/src/utils/image';
@@ -10,6 +9,7 @@ import Button from '../form/Button';
 import Progress from '../Progress';
 import Canvas from '../Canvas';
 import { getImageData, createRawImage } from '../../utils/image';
+import { usePhoto } from '../../utils/photo';
 
 export const title = 'Image Segmentation';
 
@@ -45,16 +45,6 @@ export function Interact({ runPipe }: InteractProps): JSX.Element {
     setWIP(false);
   }, []);
 
-  const takePhoto = useCallback(async () => {
-    const { assets: [ { uri } ] } = await launchCamera();
-    call(uri);
-  }, []);
-
-  const selectPhoto = useCallback(async () => {
-    const { assets: [ { uri } ] } = await launchImageLibrary();
-    call(uri);
-  }, []);
-
   useEffect(() => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext('2d');
@@ -90,6 +80,8 @@ export function Interact({ runPipe }: InteractProps): JSX.Element {
     }
   }, [results]);
 
+  const { selectPhoto, takePhoto } = usePhoto((uri) => call(uri));
+
   return (
     <>
       <Button

components/models/ImageToText.tsx

@@ -1,4 +1,3 @@
-import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Image, StyleSheet, Text } from 'react-native';
 import SelectField from '../form/SelectField';
@@ -8,6 +7,7 @@ import BooleanField from '../form/BooleanField';
 import Button from '../form/Button';
 import Recorder from '../../utils/recorder';
 import { useColor } from '../../utils/style';
+import { usePhoto } from '../../utils/photo';
 
 export const title = 'Image to Text';
 
@@ -36,15 +36,7 @@ export function Interact({ params, runPipe }: InteractProps): JSX.Element {
     setWIP(false);
   }, [params]);
 
-  const takePhoto = useCallback(async () => {
-    const { assets: [ { uri } ] } = await launchCamera();
-    call(uri);
-  }, []);
-
-  const selectPhoto = useCallback(async () => {
-    const { assets: [ { uri } ] } = await launchImageLibrary();
-    call(uri);
-  }, []);
+  const { selectPhoto, takePhoto } = usePhoto((uri) => call(uri));
 
   return (
     <>

components/models/ObjectDetection.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import { StyleSheet } from 'react-native';
 import uniqolor from 'uniqolor';
 import SelectField from '../form/SelectField';
@@ -8,6 +7,7 @@ import Button from '../form/Button';
 import Progress from '../Progress';
 import Canvas from '../Canvas';
 import { getImageData, createRawImage } from '../../utils/image';
+import { usePhoto } from '../../utils/photo';
 
 export const title = 'Object Detection';
 
@@ -44,15 +44,7 @@ export function Interact({ runPipe }: InteractProps): JSX.Element {
     setWIP(false);
   }, []);
 
-  const takePhoto = useCallback(async () => {
-    const { assets: [ { uri } ] } = await launchCamera();
-    call(uri);
-  }, []);
-
-  const selectPhoto = useCallback(async () => {
-    const { assets: [ { uri } ] } = await launchImageLibrary();
-    call(uri);
-  }, []);
+  const { selectPhoto, takePhoto } = usePhoto((uri) => call(uri));
 
   useEffect(() => {
     const ctx = canvasRef.current?.getContext('2d');

components/models/ZeroShotImageClassification.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import { StyleSheet, Image } from 'react-native';
 import TextField from '../form/TextField';
 import BooleanField from '../form/BooleanField';
 import Button from '../form/Button';
 import Progress from '../Progress';
 import { getImageData, createRawImage } from '../../utils/image';
+import { usePhoto } from '../../utils/photo';
 
 export const title = 'Zero Shot Image Classification';
 
@@ -69,17 +69,10 @@ export function Interact({ runPipe }: InteractProps): JSX.Element {
     setWIP(false);
   }, [input, classes]);
 
-  const takePhoto = useCallback(async () => {
-    const { assets: [ file ] } = await launchCamera();
-    inferImage.current = await getImageData(file.uri, 512);
-    setInput(file.uri);
-  }, []);
-
-  const selectPhoto = useCallback(async () => {
-    const { assets: [ file ] } = await launchImageLibrary();
-    inferImage.current = await getImageData(file.uri, 512);
-    setInput(file.uri);
-  }, []);
+  const { selectPhoto, takePhoto } = usePhoto(async (uri) => {
+    inferImage.current = await getImageData(uri, 512);
+    setInput(uri);
+  });
 
   return (
     <>