[RNE Rewrite] feat: Add OCR implementation

.cspell-wordlist.txt

@@ -314,3 +314,16 @@ Partitioner
 denoised
 ttfa
 TTFA
+dbnet
+softmaxed
+unclip
+EasyOCR
+ppocrv
+letterboxed
+nums
+ocrv
+unclips
+NHWC
+SVTR
+binarizes
+unshrunk

apps/computer-vision/app/_layout.tsx

@@ -76,6 +76,13 @@ export default function Layout() {
           title: 'Instance Segmentation',
         }}
       />
+      <Drawer.Screen
+        name="ocr/index"
+        options={{
+          drawerLabel: 'OCR',
+          title: 'OCR',
+        }}
+      />
       <Drawer.Screen
         name="inspect/index"
         options={{

apps/computer-vision/app/index.tsx

@@ -1,13 +1,20 @@
 import { useRouter } from 'expo-router';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ColorPalette } from '../theme';
 import ExecutorchLogo from '../assets/icons/executorch.svg';
 
 export default function Home() {
   const router = useRouter();
+  const insets = useSafeAreaInsets();
 
   return (
-    <View style={styles.container}>
+    // The list is taller than the viewport on shorter phones, so it scrolls
+    // rather than running under the system navigation bar.
+    <ScrollView
+      style={styles.screen}
+      contentContainerStyle={[styles.container, { paddingBottom: insets.bottom + 20 }]}
+    >
       <ExecutorchLogo width={64} height={64} />
       <Text style={styles.headerText}>Select a demo model</Text>
       <View style={styles.buttonContainer}>
@@ -38,20 +45,27 @@ export default function Home() {
         <TouchableOpacity style={styles.button} onPress={() => router.navigate('keypoint/')}>
           <Text style={styles.buttonText}>Keypoint Detection</Text>
         </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={() => router.navigate('ocr/')}>
+          <Text style={styles.buttonText}>OCR</Text>
+        </TouchableOpacity>
         <TouchableOpacity style={styles.button} onPress={() => router.navigate('inspect/')}>
           <Text style={styles.buttonText}>Model Inspector</Text>
         </TouchableOpacity>
       </View>
-    </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  screen: {
     flex: 1,
+    backgroundColor: '#fff',
+  },
+  container: {
+    flexGrow: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#fff',
+    paddingTop: 20,
   },
   headerText: {
     fontSize: 18,

apps/computer-vision/app/inspect/index.tsx

@@ -9,6 +9,7 @@ import {
   ActivityIndicator,
   Alert,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { inspectModel, type ConcreteDim, type ParamSpec } from 'react-native-executorch';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import { ColorPalette } from '../../theme';
@@ -29,6 +30,7 @@ const formatDim = (dim: ConcreteDim): string => {
 };
 
 function InspectContent() {
+  const insets = useSafeAreaInsets();
   const [url, setUrl] = useState('');
   const [loading, setLoading] = useState(false);
   const [result, setResult] = useState<InspectionResult | null>(null);
@@ -85,7 +87,10 @@ function InspectContent() {
   };
 
   return (
-    <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={[styles.contentContainer, { paddingBottom: insets.bottom + 40 }]}
+    >
       <View style={styles.card}>
         <Text style={styles.cardTitle}>Model URL Inspector</Text>
         <Text style={styles.cardDescription}>
@@ -191,7 +196,6 @@ const styles = StyleSheet.create({
   },
   contentContainer: {
     padding: 16,
-    paddingBottom: 40,
   },
   card: {
     backgroundColor: '#ffffff',

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

@@ -0,0 +1,252 @@
+import React, { useMemo, useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { commonStyles, ColorPalette, theme } from '../../theme';
+import { useImage, ColorType, AlphaType } from '@shopify/react-native-skia';
+import { useOcr, models, type OcrDetection, type OcrModel } from 'react-native-executorch';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import { getImage } from '../../utils';
+import { ModelPicker, type ModelOption } from '../../components/ModelPicker';
+import { ImageViewport } from '../../components/ImageViewport';
+import { ModelStatus } from '../../components/ModelStatus';
+import { Button } from '../../components/Button';
+
+// Every variant is listed on both platforms; the ones the platform can't run are
+// shown disabled (CoreML is Apple-only, Vulkan is the Android GPU delegate).
+const isIos = Platform.OS === 'ios';
+const OCR_MODELS: { label: string; base: OcrModel; disabled: boolean }[] = [
+  {
+    label: 'PaddleOCR (XNNPACK)',
+    base: models.ocr.PADDLE.PPOCRV6_SMALL.XNNPACK,
+    disabled: false,
+  },
+  {
+    label: 'PaddleOCR (Vulkan)',
+    base: models.ocr.PADDLE.PPOCRV6_SMALL.VULKAN,
+    disabled: isIos,
+  },
+  {
+    label: 'PaddleOCR (CoreML)',
+    base: models.ocr.PADDLE.PPOCRV6_SMALL.COREML,
+    disabled: !isIos,
+  },
+];
+
+const MODEL_OPTIONS: ModelOption[] = OCR_MODELS.map((m, i) => ({
+  label: m.label,
+  value: i,
+  disabled: m.disabled,
+}));
+
+function OCRContent() {
+  const insets = useSafeAreaInsets();
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [detections, setDetections] = useState<OcrDetection[]>([]);
+  const [wallMs, setWallMs] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const selected = OCR_MODELS[selectedIdx]!;
+  const skiaImage = useImage(imageUri, (err) => setError(err.message || String(err)));
+
+  const { isReady, downloadProgress, error: loadError, runOcr } = useOcr(selected.base);
+
+  const resetResults = () => {
+    setDetections([]);
+    setWallMs(null);
+  };
+
+  const handlePick = async (useCamera: boolean) => {
+    setError(null);
+    try {
+      const uri = await getImage(useCamera);
+      if (uri) {
+        setImageUri(uri);
+        resetResults();
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const run = async () => {
+    if (!skiaImage || !runOcr) return;
+    setIsProcessing(true);
+    setError(null);
+    try {
+      const pixels = skiaImage.readPixels(0, 0, {
+        width: skiaImage.width(),
+        height: skiaImage.height(),
+        colorType: ColorType.RGBA_8888,
+        alphaType: AlphaType.Unpremul,
+      });
+      if (!(pixels instanceof Uint8Array)) throw new Error('Expected Uint8Array from readPixels');
+      const start = Date.now();
+      const out = await runOcr({
+        data: pixels,
+        width: skiaImage.width(),
+        height: skiaImage.height(),
+        format: 'rgba' as const,
+        layout: 'hwc' as const,
+      });
+      setWallMs(Date.now() - start);
+      setDetections(out);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const activeError = loadError ? String(loadError) : error;
+  const boxes = useMemo(() => detections.map((d) => d.quad), [detections]);
+
+  return (
+    <ScrollView
+      style={commonStyles.container}
+      contentContainerStyle={[
+        commonStyles.contentContainer,
+        { paddingBottom: insets.bottom + theme.spacing.large },
+      ]}
+    >
+      <Text style={commonStyles.description}>
+        Detect and recognize text on-device: every text line is located, cropped and read, and the
+        results come back in reading order.
+      </Text>
+
+      <ModelPicker
+        label="Model"
+        options={MODEL_OPTIONS}
+        selectedValue={selectedIdx}
+        onValueChange={(idx) => {
+          setSelectedIdx(idx);
+          resetResults();
+          setError(null);
+        }}
+      />
+
+      <ModelStatus
+        isReady={isReady}
+        downloadProgress={downloadProgress}
+        error={activeError}
+        modelTypeLabel="OCR model"
+      />
+
+      <ImageViewport
+        skiaImage={skiaImage}
+        boxes={boxes}
+        onPressPlaceholder={() => handlePick(false)}
+      />
+
+      <View style={commonStyles.buttonRow}>
+        <Button title="Gallery" onPress={() => handlePick(false)} variant="secondary" />
+        <Button title="Camera" onPress={() => handlePick(true)} variant="secondary" />
+      </View>
+      <View style={commonStyles.buttonRow}>
+        <Button
+          title="Run OCR"
+          onPress={run}
+          disabled={!skiaImage || !isReady || isProcessing}
+          loading={isProcessing}
+        />
+      </View>
+
+      {wallMs !== null && (
+        <View style={styles.statsCard}>
+          <Text style={styles.statsTitle}>Performance</Text>
+          <View style={styles.statTiles}>
+            <View style={styles.tile}>
+              <Text style={styles.tileValue}>
+                {wallMs}
+                <Text style={styles.tileUnit}> ms</Text>
+              </Text>
+              <Text style={styles.tileLabel}>Wall time</Text>
+            </View>
+            <View style={styles.tile}>
+              <Text style={styles.tileValue}>{detections.length}</Text>
+              <Text style={styles.tileLabel}>Regions read</Text>
+            </View>
+          </View>
+        </View>
+      )}
+
+      {detections.length > 0 && (
+        <View style={styles.results}>
+          <Text style={styles.resultsTitle}>Detected text ({detections.length})</Text>
+          {detections.map((d, i) => (
+            <View key={i} style={styles.resultRow}>
+              <Text style={styles.resultLabel} numberOfLines={1}>
+                {d.text}
+              </Text>
+              <Text style={styles.resultConfidence}>{Math.round(d.confidence * 100)}%</Text>
+            </View>
+          ))}
+        </View>
+      )}
+    </ScrollView>
+  );
+}
+
+export default function OCRScreen() {
+  return (
+    <ScreenWrapper>
+      <OCRContent />
+    </ScreenWrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  statsCard: {
+    width: '100%',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    marginVertical: 16,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  statsTitle: {
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 1,
+    color: '#868e96',
+    textTransform: 'uppercase',
+    marginBottom: 12,
+  },
+  statTiles: { flexDirection: 'row', gap: 12 },
+  tile: {
+    flex: 1,
+    backgroundColor: '#f2f4ff',
+    borderRadius: 10,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+  },
+  tileValue: { fontSize: 24, fontWeight: '800', color: '#001A72', fontVariant: ['tabular-nums'] },
+  tileUnit: { fontSize: 14, fontWeight: '600', color: '#6b73a3' },
+  tileLabel: { fontSize: 11, color: '#868e96', marginTop: 4 },
+  results: {
+    width: '100%',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  resultsTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: ColorPalette.strongPrimary,
+    marginBottom: 12,
+  },
+  resultRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f1f3f5',
+  },
+  resultLabel: { fontSize: 14, color: '#333', flex: 1, marginRight: 8 },
+  resultConfidence: { fontSize: 14, fontWeight: '600', color: '#2b8a3e' },
+});