Skip to content

Commit d1bdd77

Browse files
pweglikpweglik
committed
Merge branch '@pw/experiments-with-navigation' into @pw/image-embeddings
2 parents b93f52e + 7602327 commit d1bdd77

15 files changed

Lines changed: 362 additions & 199 deletions

File tree

‎apps/computer-vision/app/_layout.tsx‎

Lines changed: 99 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,110 @@
11
import { Drawer } from 'expo-router/drawer';
22
import ColorPalette from '../colors';
3-
import React from 'react';
3+
import React, { useState } from 'react';
4+
import { Text } from 'react-native';
5+
6+
import {
7+
DrawerContentComponentProps,
8+
DrawerContentScrollView,
9+
DrawerItemList,
10+
} from '@react-navigation/drawer';
11+
import { GeneratingContext } from '../context';
12+
13+
interface CustomDrawerProps extends DrawerContentComponentProps {
14+
isGenerating: boolean;
15+
}
16+
17+
function CustomDrawerContent(props: CustomDrawerProps) {
18+
const { isGenerating, ...otherProps } = props;
19+
return (
20+
<DrawerContentScrollView {...otherProps}>
21+
{!isGenerating ? (
22+
<DrawerItemList {...otherProps} />
23+
) : (
24+
<Text>Model is generating. Interrupt before switching model</Text>
25+
)}
26+
</DrawerContentScrollView>
27+
);
28+
}
429

530
export default function _layout() {
31+
const [isGenerating, setIsGenerating] = useState(false);
32+
633
return (
7-
<Drawer
8-
screenOptions={{
9-
drawerActiveTintColor: ColorPalette.primary,
10-
drawerInactiveTintColor: '#888',
11-
headerTintColor: ColorPalette.primary,
12-
headerTitleStyle: { color: ColorPalette.primary },
34+
<GeneratingContext
35+
value={{
36+
setGlobalGenerating: (newState: boolean) => {
37+
setIsGenerating(newState);
38+
},
1339
}}
1440
>
15-
<Drawer.Screen
16-
name="index"
17-
options={{
18-
drawerLabel: 'Menu',
19-
title: 'Main Menu',
20-
headerTitleStyle: { color: ColorPalette.primary },
21-
}}
22-
/>
23-
<Drawer.Screen
24-
name="classification/index"
25-
options={{
26-
drawerLabel: 'Classification',
27-
title: 'Classification',
28-
headerTitleStyle: { color: ColorPalette.primary },
29-
}}
30-
/>
31-
<Drawer.Screen
32-
name="image_segmentation/index"
33-
options={{
34-
drawerLabel: 'Image Segmentation',
35-
title: 'Image Segmentation',
36-
headerTitleStyle: { color: ColorPalette.primary },
37-
}}
38-
/>
39-
<Drawer.Screen
40-
name="object_detection/index"
41-
options={{
42-
drawerLabel: 'Object Detection',
43-
title: 'Object Detection',
44-
headerTitleStyle: { color: ColorPalette.primary },
45-
}}
46-
/>
47-
<Drawer.Screen
48-
name="ocr/index"
49-
options={{
50-
drawerLabel: 'OCR',
51-
title: 'OCR',
52-
headerTitleStyle: { color: ColorPalette.primary },
53-
}}
54-
/>
55-
<Drawer.Screen
56-
name="ocr_vertical/index"
57-
options={{
58-
drawerLabel: 'OCR Vertical',
59-
title: 'Vertical OCR',
60-
headerTitleStyle: { color: ColorPalette.primary },
61-
}}
62-
/>
63-
<Drawer.Screen
64-
name="style_transfer/index"
65-
options={{
66-
drawerLabel: 'Style Transfer',
67-
title: 'Style Transfer',
41+
<Drawer
42+
drawerContent={(props) => (
43+
<CustomDrawerContent {...props} isGenerating={isGenerating} />
44+
)}
45+
screenOptions={{
46+
drawerActiveTintColor: ColorPalette.primary,
47+
drawerInactiveTintColor: '#888',
48+
headerTintColor: ColorPalette.primary,
6849
headerTitleStyle: { color: ColorPalette.primary },
6950
}}
70-
/>
71-
</Drawer>
51+
>
52+
<Drawer.Screen
53+
name="classification/index"
54+
options={{
55+
drawerLabel: 'Classification',
56+
title: 'Classification',
57+
headerTitleStyle: { color: ColorPalette.primary },
58+
}}
59+
/>
60+
<Drawer.Screen
61+
name="image_segmentation/index"
62+
options={{
63+
drawerLabel: 'Image Segmentation',
64+
title: 'Image Segmentation',
65+
headerTitleStyle: { color: ColorPalette.primary },
66+
}}
67+
/>
68+
<Drawer.Screen
69+
name="object_detection/index"
70+
options={{
71+
drawerLabel: 'Object Detection',
72+
title: 'Object Detection',
73+
headerTitleStyle: { color: ColorPalette.primary },
74+
}}
75+
/>
76+
<Drawer.Screen
77+
name="ocr/index"
78+
options={{
79+
drawerLabel: 'OCR',
80+
title: 'OCR',
81+
headerTitleStyle: { color: ColorPalette.primary },
82+
}}
83+
/>
84+
<Drawer.Screen
85+
name="ocr_vertical/index"
86+
options={{
87+
drawerLabel: 'OCR Vertical',
88+
title: 'Vertical OCR',
89+
headerTitleStyle: { color: ColorPalette.primary },
90+
}}
91+
/>
92+
<Drawer.Screen
93+
name="style_transfer/index"
94+
options={{
95+
drawerLabel: 'Style Transfer',
96+
title: 'Style Transfer',
97+
headerTitleStyle: { color: ColorPalette.primary },
98+
}}
99+
/>
100+
<Drawer.Screen
101+
name="index"
102+
options={{
103+
drawerLabel: () => null,
104+
drawerItemStyle: { display: 'none' },
105+
}}
106+
/>
107+
</Drawer>
108+
</GeneratingContext>
72109
);
73110
}

‎apps/computer-vision/app/classification/index.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { useState } from 'react';
21
import Spinner from 'react-native-loading-spinner-overlay';
32
import { getImage } from '../../utils';
43
import { useClassification, EFFICIENTNET_V2_S } from 'react-native-executorch';
54
import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
65
import { BottomBar } from '../../components/BottomBar';
6+
import React, { useContext, useEffect, useState } from 'react';
7+
import { GeneratingContext } from '../../context';
8+
import ScreenWrapper from '../../screenWrapper';
79

810
export default function ClassificationScreen() {
911
const [results, setResults] = useState<{ label: string; score: number }[]>(
@@ -14,6 +16,10 @@ export default function ClassificationScreen() {
1416
const model = useClassification({
1517
modelSource: EFFICIENTNET_V2_S,
1618
});
19+
const { setGlobalGenerating } = useContext(GeneratingContext);
20+
useEffect(() => {
21+
setGlobalGenerating(model.isGenerating);
22+
}, [model.isGenerating, setGlobalGenerating]);
1723

1824
const handleCameraPress = async (isCamera: boolean) => {
1925
const image = await getImage(isCamera);
@@ -48,7 +54,7 @@ export default function ClassificationScreen() {
4854
);
4955
}
5056
return (
51-
<>
57+
<ScreenWrapper>
5258
<View style={styles.imageContainer}>
5359
<Image
5460
style={styles.image}
@@ -77,7 +83,7 @@ export default function ClassificationScreen() {
7783
handleCameraPress={handleCameraPress}
7884
runForward={runForward}
7985
/>
80-
</>
86+
</ScreenWrapper>
8187
);
8288
}
8389

‎apps/computer-vision/app/image_segmentation/index.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ import {
1414
ColorType,
1515
} from '@shopify/react-native-skia';
1616
import { View, StyleSheet, Image } from 'react-native';
17-
import { useState } from 'react';
17+
import React, { useContext, useEffect, useState } from 'react';
18+
import { GeneratingContext } from '../../context';
19+
import ScreenWrapper from '../../screenWrapper';
1820

1921
const width = 224;
2022
const height = 224;
@@ -62,6 +64,10 @@ export default function ImageSegmentationScreen() {
6264
const model = useImageSegmentation({
6365
modelSource: DEEPLAB_V3_RESNET50,
6466
});
67+
const { setGlobalGenerating } = useContext(GeneratingContext);
68+
useEffect(() => {
69+
setGlobalGenerating(model.isGenerating);
70+
}, [model.isGenerating, setGlobalGenerating]);
6571
const [imageUri, setImageUri] = useState('');
6672

6773
const handleCameraPress = async (isCamera: boolean) => {
@@ -118,7 +124,7 @@ export default function ImageSegmentationScreen() {
118124
}
119125

120126
return (
121-
<>
127+
<ScreenWrapper>
122128
<View style={styles.imageCanvasContainer}>
123129
<View style={styles.imageContainer}>
124130
<Image
@@ -150,7 +156,7 @@ export default function ImageSegmentationScreen() {
150156
handleCameraPress={handleCameraPress}
151157
runForward={runForward}
152158
/>
153-
</>
159+
</ScreenWrapper>
154160
);
155161
}
156162

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useState } from 'react';
21
import Spinner from 'react-native-loading-spinner-overlay';
32
import { BottomBar } from '../../components/BottomBar';
43
import { getImage } from '../../utils';
@@ -9,6 +8,9 @@ import {
98
} from 'react-native-executorch';
109
import { View, StyleSheet, Image } from 'react-native';
1110
import ImageWithBboxes from '../../components/ImageWithBboxes';
11+
import React, { useContext, useEffect, useState } from 'react';
12+
import { GeneratingContext } from '../../context';
13+
import ScreenWrapper from '../../screenWrapper';
1214

1315
export default function ObjectDetectionScreen() {
1416
const [imageUri, setImageUri] = useState('');
@@ -21,6 +23,10 @@ export default function ObjectDetectionScreen() {
2123
const ssdLite = useObjectDetection({
2224
modelSource: SSDLITE_320_MOBILENET_V3_LARGE,
2325
});
26+
const { setGlobalGenerating } = useContext(GeneratingContext);
27+
useEffect(() => {
28+
setGlobalGenerating(ssdLite.isGenerating);
29+
}, [ssdLite.isGenerating, setGlobalGenerating]);
2430

2531
const handleCameraPress = async (isCamera: boolean) => {
2632
const image = await getImage(isCamera);
@@ -57,7 +63,7 @@ export default function ObjectDetectionScreen() {
5763
}
5864

5965
return (
60-
<>
66+
<ScreenWrapper>
6167
<View style={styles.imageContainer}>
6268
<View style={styles.image}>
6369
{imageUri && imageDimensions?.width && imageDimensions?.height ? (
@@ -82,7 +88,7 @@ export default function ObjectDetectionScreen() {
8288
handleCameraPress={handleCameraPress}
8389
runForward={runForward}
8490
/>
85-
</>
91+
</ScreenWrapper>
8692
);
8793
}
8894

‎apps/computer-vision/app/ocr/index.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ import {
99
useOCR,
1010
} from 'react-native-executorch';
1111
import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
12-
import { useState } from 'react';
1312
import ImageWithBboxes2 from '../../components/ImageWithOCRBboxes';
13+
import React, { useContext, useEffect, useState } from 'react';
14+
import { GeneratingContext } from '../../context';
15+
import ScreenWrapper from '../../screenWrapper';
1416

1517
export default function OCRScreen() {
1618
const [imageUri, setImageUri] = useState('');
@@ -29,6 +31,10 @@ export default function OCRScreen() {
2931
},
3032
language: 'en',
3133
});
34+
const { setGlobalGenerating } = useContext(GeneratingContext);
35+
useEffect(() => {
36+
setGlobalGenerating(model.isGenerating);
37+
}, [model.isGenerating, setGlobalGenerating]);
3238

3339
const handleCameraPress = async (isCamera: boolean) => {
3440
const image = await getImage(isCamera);
@@ -62,7 +68,7 @@ export default function OCRScreen() {
6268
}
6369

6470
return (
65-
<>
71+
<ScreenWrapper>
6672
<View style={styles.container}>
6773
<View style={styles.imageContainer}>
6874
{imageUri && imageDimensions?.width && imageDimensions?.height ? (
@@ -100,7 +106,7 @@ export default function OCRScreen() {
100106
handleCameraPress={handleCameraPress}
101107
runForward={runForward}
102108
/>
103-
</>
109+
</ScreenWrapper>
104110
);
105111
}
106112

‎apps/computer-vision/app/ocr_vertical/index.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ import {
99
useVerticalOCR,
1010
} from 'react-native-executorch';
1111
import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
12-
import { useState } from 'react';
1312
import ImageWithBboxes2 from '../../components/ImageWithOCRBboxes';
13+
import React, { useContext, useEffect, useState } from 'react';
14+
import { GeneratingContext } from '../../context';
15+
import ScreenWrapper from '../../screenWrapper';
1416

1517
export default function VerticalOCRScree() {
1618
const [imageUri, setImageUri] = useState('');
@@ -31,6 +33,10 @@ export default function VerticalOCRScree() {
3133
language: 'en',
3234
independentCharacters: true,
3335
});
36+
const { setGlobalGenerating } = useContext(GeneratingContext);
37+
useEffect(() => {
38+
setGlobalGenerating(model.isGenerating);
39+
}, [model.isGenerating, setGlobalGenerating]);
3440

3541
const handleCameraPress = async (isCamera: boolean) => {
3642
const image = await getImage(isCamera);
@@ -64,7 +70,7 @@ export default function VerticalOCRScree() {
6470
}
6571

6672
return (
67-
<>
73+
<ScreenWrapper>
6874
<View style={styles.container}>
6975
<View style={styles.imageContainer}>
7076
{imageUri && imageDimensions?.width && imageDimensions?.height ? (
@@ -102,7 +108,7 @@ export default function VerticalOCRScree() {
102108
handleCameraPress={handleCameraPress}
103109
runForward={runForward}
104110
/>
105-
</>
111+
</ScreenWrapper>
106112
);
107113
}
108114

0 commit comments

Comments
 (0)