Skip to content

Commit 0a2ef9a

Browse files
NorbertKlockiewiczNorbertKlockiewicz
authored
design: change design of displaying ocr results (#112)
## Description <!-- Provide a concise and descriptive summary of the changes implemented in this PR. --> ### Type of change - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Documentation update (improves or adds clarity to existing documentation) ### Tested on - [x] iOS - [x] Android ### Testing instructions <!-- Provide step-by-step instructions on how to test your changes. Include setup details if necessary. --> ### 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 - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] 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. -->
1 parent 765305a commit 0a2ef9a

File tree

2 files changed

+96
-28
lines changed

2 files changed

+96
-28
lines changed

‎examples/computer-vision/screens/OCRScreen.tsx

+48-14
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
RECOGNIZER_EN_CRNN_512,
99
useOCR,
1010
} from 'react-native-executorch';
11-
import { View, StyleSheet, Image, Text } from 'react-native';
11+
import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
1212
import { useState } from 'react';
1313
import ImageWithBboxes2 from '../components/ImageWithOCRBboxes';
1414

@@ -24,7 +24,6 @@ export const OCRScreen = ({
2424
width: number;
2525
height: number;
2626
}>();
27-
const [detectedText, setDetectedText] = useState<string>('');
2827

2928
const model = useOCR({
3029
detectorSource: DETECTOR_CRAFT_800,
@@ -45,7 +44,6 @@ export const OCRScreen = ({
4544
if (typeof uri === 'string') {
4645
setImageUri(uri as string);
4746
setResults([]);
48-
setDetectedText('');
4947
}
5048
};
5149

@@ -54,11 +52,6 @@ export const OCRScreen = ({
5452
const output = await model.forward(imageUri);
5553
setResults(output);
5654
console.log(output);
57-
let txt = '';
58-
output.forEach((detection: any) => {
59-
txt += detection.text + ' ';
60-
});
61-
setDetectedText(txt);
6255
} catch (e) {
6356
console.error(e);
6457
}
@@ -75,8 +68,8 @@ export const OCRScreen = ({
7568

7669
return (
7770
<>
78-
<View style={styles.imageContainer}>
79-
<View style={styles.image}>
71+
<View style={styles.container}>
72+
<View style={styles.imageContainer}>
8073
{imageUri && imageDimensions?.width && imageDimensions?.height ? (
8174
<ImageWithBboxes2
8275
detections={results}
@@ -88,13 +81,25 @@ export const OCRScreen = ({
8881
/>
8982
) : (
9083
<Image
91-
style={{ width: '100%', height: '100%' }}
84+
style={styles.image}
9285
resizeMode="contain"
9386
source={require('../assets/icons/executorch_logo.png')}
9487
/>
9588
)}
9689
</View>
97-
<Text>{detectedText}</Text>
90+
{results.length > 0 && (
91+
<View style={styles.results}>
92+
<Text style={styles.resultHeader}>Results</Text>
93+
<ScrollView style={styles.resultsList}>
94+
{results.map(({ text, score }) => (
95+
<View key={text} style={styles.resultRecord}>
96+
<Text style={styles.resultLabel}>{text}</Text>
97+
<Text>{score.toFixed(3)}</Text>
98+
</View>
99+
))}
100+
</ScrollView>
101+
</View>
102+
)}
98103
</View>
99104
<BottomBar
100105
handleCameraPress={handleCameraPress}
@@ -105,14 +110,43 @@ export const OCRScreen = ({
105110
};
106111

107112
const styles = StyleSheet.create({
108-
image: {
113+
imageContainer: {
109114
flex: 2,
110115
borderRadius: 8,
111116
width: '100%',
112117
},
113-
imageContainer: {
118+
container: {
114119
flex: 6,
115120
width: '100%',
116121
padding: 16,
117122
},
123+
image: {
124+
width: '100%',
125+
height: '100%',
126+
},
127+
results: {
128+
flex: 1,
129+
alignItems: 'center',
130+
justifyContent: 'center',
131+
gap: 4,
132+
padding: 4,
133+
},
134+
resultHeader: {
135+
fontSize: 18,
136+
color: 'navy',
137+
},
138+
resultsList: {
139+
flex: 1,
140+
},
141+
resultRecord: {
142+
flexDirection: 'row',
143+
width: '100%',
144+
justifyContent: 'space-between',
145+
padding: 8,
146+
borderBottomWidth: 1,
147+
},
148+
resultLabel: {
149+
flex: 1,
150+
marginRight: 4,
151+
},
118152
});

‎examples/computer-vision/screens/VerticalOCRScreen.tsx

+48-14
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
RECOGNIZER_EN_CRNN_64,
99
useVerticalOCR,
1010
} from 'react-native-executorch';
11-
import { View, StyleSheet, Image, Text } from 'react-native';
11+
import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
1212
import { useState } from 'react';
1313
import ImageWithBboxes2 from '../components/ImageWithOCRBboxes';
1414

@@ -24,7 +24,6 @@ export const VerticalOCRScreen = ({
2424
width: number;
2525
height: number;
2626
}>();
27-
const [detectedText, setDetectedText] = useState<string>('');
2827
const model = useVerticalOCR({
2928
detectorSources: {
3029
detectorLarge: DETECTOR_CRAFT_1280,
@@ -47,7 +46,6 @@ export const VerticalOCRScreen = ({
4746
if (typeof uri === 'string') {
4847
setImageUri(uri as string);
4948
setResults([]);
50-
setDetectedText('');
5149
}
5250
};
5351

@@ -56,11 +54,6 @@ export const VerticalOCRScreen = ({
5654
const output = await model.forward(imageUri);
5755
setResults(output);
5856
console.log(output);
59-
let txt = '';
60-
output.forEach((detection: any) => {
61-
txt += detection.text + ' ';
62-
});
63-
setDetectedText(txt);
6457
} catch (e) {
6558
console.error(e);
6659
}
@@ -77,8 +70,8 @@ export const VerticalOCRScreen = ({
7770

7871
return (
7972
<>
80-
<View style={styles.imageContainer}>
81-
<View style={styles.image}>
73+
<View style={styles.container}>
74+
<View style={styles.imageContainer}>
8275
{imageUri && imageDimensions?.width && imageDimensions?.height ? (
8376
<ImageWithBboxes2
8477
detections={results}
@@ -90,13 +83,25 @@ export const VerticalOCRScreen = ({
9083
/>
9184
) : (
9285
<Image
93-
style={{ width: '100%', height: '100%' }}
86+
style={styles.image}
9487
resizeMode="contain"
9588
source={require('../assets/icons/executorch_logo.png')}
9689
/>
9790
)}
9891
</View>
99-
<Text>{detectedText}</Text>
92+
{results.length > 0 && (
93+
<View style={styles.results}>
94+
<Text style={styles.resultHeader}>Results</Text>
95+
<ScrollView style={styles.resultsList}>
96+
{results.map(({ text, score }) => (
97+
<View key={text} style={styles.resultRecord}>
98+
<Text style={styles.resultLabel}>{text}</Text>
99+
<Text>{score.toFixed(3)}</Text>
100+
</View>
101+
))}
102+
</ScrollView>
103+
</View>
104+
)}
100105
</View>
101106
<BottomBar
102107
handleCameraPress={handleCameraPress}
@@ -107,14 +112,43 @@ export const VerticalOCRScreen = ({
107112
};
108113

109114
const styles = StyleSheet.create({
110-
image: {
115+
imageContainer: {
111116
flex: 2,
112117
borderRadius: 8,
113118
width: '100%',
114119
},
115-
imageContainer: {
120+
container: {
116121
flex: 6,
117122
width: '100%',
118123
padding: 16,
119124
},
125+
image: {
126+
width: '100%',
127+
height: '100%',
128+
},
129+
results: {
130+
flex: 1,
131+
alignItems: 'center',
132+
justifyContent: 'center',
133+
gap: 4,
134+
padding: 4,
135+
},
136+
resultHeader: {
137+
fontSize: 18,
138+
color: 'navy',
139+
},
140+
resultsList: {
141+
flex: 1,
142+
},
143+
resultRecord: {
144+
flexDirection: 'row',
145+
width: '100%',
146+
justifyContent: 'space-between',
147+
padding: 8,
148+
borderBottomWidth: 1,
149+
},
150+
resultLabel: {
151+
flex: 1,
152+
marginRight: 4,
153+
},
120154
});

0 commit comments

Comments
 (0)