From 49763fb15339847e321e94008e7d1c58c2ac3a1b Mon Sep 17 00:00:00 2001
From: Norbert Klockiewicz <Nklockiewicz12@gmail.com>
Date: Wed, 5 Mar 2025 11:58:18 +0100
Subject: [PATCH 1/2] design: change design of displaying ocr results

---
 .../computer-vision/screens/OCRScreen.tsx     | 48 +++++++++++++++----
 .../screens/VerticalOCRScreen.tsx             | 48 +++++++++++++++----
 2 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/examples/computer-vision/screens/OCRScreen.tsx b/examples/computer-vision/screens/OCRScreen.tsx
index 4bfc0bee..071e63c9 100644
--- a/examples/computer-vision/screens/OCRScreen.tsx
+++ b/examples/computer-vision/screens/OCRScreen.tsx
@@ -8,7 +8,7 @@ import {
   RECOGNIZER_EN_CRNN_512,
   useOCR,
 } from 'react-native-executorch';
-import { View, StyleSheet, Image, Text } from 'react-native';
+import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
 import { useState } from 'react';
 import ImageWithBboxes2 from '../components/ImageWithOCRBboxes';
 
@@ -24,7 +24,6 @@ export const OCRScreen = ({
     width: number;
     height: number;
   }>();
-  const [detectedText, setDetectedText] = useState<string>('');
 
   const model = useOCR({
     detectorSource: DETECTOR_CRAFT_800,
@@ -45,7 +44,6 @@ export const OCRScreen = ({
     if (typeof uri === 'string') {
       setImageUri(uri as string);
       setResults([]);
-      setDetectedText('');
     }
   };
 
@@ -54,11 +52,6 @@ export const OCRScreen = ({
       const output = await model.forward(imageUri);
       setResults(output);
       console.log(output);
-      let txt = '';
-      output.forEach((detection: any) => {
-        txt += detection.text + ' ';
-      });
-      setDetectedText(txt);
     } catch (e) {
       console.error(e);
     }
@@ -94,7 +87,19 @@ export const OCRScreen = ({
             />
           )}
         </View>
-        <Text>{detectedText}</Text>
+        {results.length > 0 && (
+          <View style={styles.results}>
+            <Text style={styles.resultHeader}>Results</Text>
+            <ScrollView style={styles.resultsList}>
+              {results.map(({ text, score }) => (
+                <View key={text} style={styles.resultRecord}>
+                  <Text style={styles.resultLabel}>{text}</Text>
+                  <Text>{score.toFixed(3)}</Text>
+                </View>
+              ))}
+            </ScrollView>
+          </View>
+        )}
       </View>
       <BottomBar
         handleCameraPress={handleCameraPress}
@@ -115,4 +120,29 @@ const styles = StyleSheet.create({
     width: '100%',
     padding: 16,
   },
+  results: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
+    padding: 4,
+  },
+  resultHeader: {
+    fontSize: 18,
+    color: 'navy',
+  },
+  resultsList: {
+    flex: 1,
+  },
+  resultRecord: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+    padding: 8,
+    borderBottomWidth: 1,
+  },
+  resultLabel: {
+    flex: 1,
+    marginRight: 4,
+  },
 });
diff --git a/examples/computer-vision/screens/VerticalOCRScreen.tsx b/examples/computer-vision/screens/VerticalOCRScreen.tsx
index e242fb11..30c5481b 100644
--- a/examples/computer-vision/screens/VerticalOCRScreen.tsx
+++ b/examples/computer-vision/screens/VerticalOCRScreen.tsx
@@ -8,7 +8,7 @@ import {
   RECOGNIZER_EN_CRNN_64,
   useVerticalOCR,
 } from 'react-native-executorch';
-import { View, StyleSheet, Image, Text } from 'react-native';
+import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
 import { useState } from 'react';
 import ImageWithBboxes2 from '../components/ImageWithOCRBboxes';
 
@@ -24,7 +24,6 @@ export const VerticalOCRScreen = ({
     width: number;
     height: number;
   }>();
-  const [detectedText, setDetectedText] = useState<string>('');
   const model = useVerticalOCR({
     detectorSources: {
       detectorLarge: DETECTOR_CRAFT_1280,
@@ -47,7 +46,6 @@ export const VerticalOCRScreen = ({
     if (typeof uri === 'string') {
       setImageUri(uri as string);
       setResults([]);
-      setDetectedText('');
     }
   };
 
@@ -56,11 +54,6 @@ export const VerticalOCRScreen = ({
       const output = await model.forward(imageUri);
       setResults(output);
       console.log(output);
-      let txt = '';
-      output.forEach((detection: any) => {
-        txt += detection.text + ' ';
-      });
-      setDetectedText(txt);
     } catch (e) {
       console.error(e);
     }
@@ -96,7 +89,19 @@ export const VerticalOCRScreen = ({
             />
           )}
         </View>
-        <Text>{detectedText}</Text>
+        {results.length > 0 && (
+          <View style={styles.results}>
+            <Text style={styles.resultHeader}>Results</Text>
+            <ScrollView style={styles.resultsList}>
+              {results.map(({ text, score }) => (
+                <View key={text} style={styles.resultRecord}>
+                  <Text style={styles.resultLabel}>{text}</Text>
+                  <Text>{score.toFixed(3)}</Text>
+                </View>
+              ))}
+            </ScrollView>
+          </View>
+        )}
       </View>
       <BottomBar
         handleCameraPress={handleCameraPress}
@@ -117,4 +122,29 @@ const styles = StyleSheet.create({
     width: '100%',
     padding: 16,
   },
+  results: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
+    padding: 4,
+  },
+  resultHeader: {
+    fontSize: 18,
+    color: 'navy',
+  },
+  resultsList: {
+    flex: 1,
+  },
+  resultRecord: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+    padding: 8,
+    borderBottomWidth: 1,
+  },
+  resultLabel: {
+    flex: 1,
+    marginRight: 4,
+  },
 });

From c068b415a43d9d3682a9952f13a0aa88a406188b Mon Sep 17 00:00:00 2001
From: Norbert Klockiewicz <Nklockiewicz12@gmail.com>
Date: Wed, 5 Mar 2025 12:01:52 +0100
Subject: [PATCH 2/2] fix: get rid of eslint warnings

---
 examples/computer-vision/screens/OCRScreen.tsx     | 14 +++++++++-----
 .../computer-vision/screens/VerticalOCRScreen.tsx  | 14 +++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/examples/computer-vision/screens/OCRScreen.tsx b/examples/computer-vision/screens/OCRScreen.tsx
index 071e63c9..b2e9597c 100644
--- a/examples/computer-vision/screens/OCRScreen.tsx
+++ b/examples/computer-vision/screens/OCRScreen.tsx
@@ -68,8 +68,8 @@ export const OCRScreen = ({
 
   return (
     <>
-      <View style={styles.imageContainer}>
-        <View style={styles.image}>
+      <View style={styles.container}>
+        <View style={styles.imageContainer}>
           {imageUri && imageDimensions?.width && imageDimensions?.height ? (
             <ImageWithBboxes2
               detections={results}
@@ -81,7 +81,7 @@ export const OCRScreen = ({
             />
           ) : (
             <Image
-              style={{ width: '100%', height: '100%' }}
+              style={styles.image}
               resizeMode="contain"
               source={require('../assets/icons/executorch_logo.png')}
             />
@@ -110,16 +110,20 @@ export const OCRScreen = ({
 };
 
 const styles = StyleSheet.create({
-  image: {
+  imageContainer: {
     flex: 2,
     borderRadius: 8,
     width: '100%',
   },
-  imageContainer: {
+  container: {
     flex: 6,
     width: '100%',
     padding: 16,
   },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
   results: {
     flex: 1,
     alignItems: 'center',
diff --git a/examples/computer-vision/screens/VerticalOCRScreen.tsx b/examples/computer-vision/screens/VerticalOCRScreen.tsx
index 30c5481b..e8db6736 100644
--- a/examples/computer-vision/screens/VerticalOCRScreen.tsx
+++ b/examples/computer-vision/screens/VerticalOCRScreen.tsx
@@ -70,8 +70,8 @@ export const VerticalOCRScreen = ({
 
   return (
     <>
-      <View style={styles.imageContainer}>
-        <View style={styles.image}>
+      <View style={styles.container}>
+        <View style={styles.imageContainer}>
           {imageUri && imageDimensions?.width && imageDimensions?.height ? (
             <ImageWithBboxes2
               detections={results}
@@ -83,7 +83,7 @@ export const VerticalOCRScreen = ({
             />
           ) : (
             <Image
-              style={{ width: '100%', height: '100%' }}
+              style={styles.image}
               resizeMode="contain"
               source={require('../assets/icons/executorch_logo.png')}
             />
@@ -112,16 +112,20 @@ export const VerticalOCRScreen = ({
 };
 
 const styles = StyleSheet.create({
-  image: {
+  imageContainer: {
     flex: 2,
     borderRadius: 8,
     width: '100%',
   },
-  imageContainer: {
+  container: {
     flex: 6,
     width: '100%',
     padding: 16,
   },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
   results: {
     flex: 1,
     alignItems: 'center',