|
| 1 | +import React, { FC, useState, useEffect, useCallback } from "react" |
| 2 | +import { observer } from "mobx-react-lite" |
| 3 | +import { ViewStyle, View, ImageStyle, TextStyle, ScrollView, Pressable } from "react-native" |
| 4 | +import { NativeStackScreenProps } from "@react-navigation/native-stack" |
| 5 | +import { AppStackScreenProps } from "../navigators" |
| 6 | +import { Text, Icon, ImageSelector, Screen } from "../components" |
| 7 | +import { useTypedNavigation } from "../navigators/useTypedNavigation" |
| 8 | + |
| 9 | +import { recognizeText, Text as RecognizedText } from "@infinitered/react-native-mlkit-text-recognition" |
| 10 | +import { UseExampleImageStatus, SelectedImage } from "../utils/useExampleImage" |
| 11 | + |
| 12 | +type TextRecognitionScreenProps = NativeStackScreenProps<AppStackScreenProps<"TextRecognition">> |
| 13 | + |
| 14 | +function DebugOutput({ data }: { data: unknown }) { |
| 15 | + const [expanded, setExpanded] = useState(false) |
| 16 | + |
| 17 | + return ( |
| 18 | + <View style={$debugContainer}> |
| 19 | + <Pressable onPress={() => setExpanded(!expanded)} style={$debugHeader}> |
| 20 | + <Text style={$debugTitle}>{expanded ? "▼" : "▶"} Debug Output</Text> |
| 21 | + </Pressable> |
| 22 | + {expanded && ( |
| 23 | + <ScrollView style={$debugContent} horizontal> |
| 24 | + <ScrollView nestedScrollEnabled> |
| 25 | + <Text style={$debugText}>{JSON.stringify(data, null, 2)}</Text> |
| 26 | + </ScrollView> |
| 27 | + </ScrollView> |
| 28 | + )} |
| 29 | + </View> |
| 30 | + ) |
| 31 | +} |
| 32 | +export const TextRecognitionScreen: FC<TextRecognitionScreenProps> = observer( |
| 33 | + function TextRecognitionScreen() { |
| 34 | + const navigation = useTypedNavigation<"TextRecognition">() |
| 35 | + |
| 36 | + const [image, setImage] = useState<SelectedImage | null>(null) |
| 37 | + |
| 38 | + const handleImageChange = useCallback((nextImage: SelectedImage) => { |
| 39 | + setImage(nextImage) |
| 40 | + }, []) |
| 41 | + |
| 42 | + const [result, setResult] = useState<RecognizedText | null>(null) |
| 43 | + const [status, setStatus] = useState< |
| 44 | + "init" | "noPermissions" | "done" | "error" | "loading" | UseExampleImageStatus |
| 45 | + >("init") |
| 46 | + |
| 47 | + const onStatusChange = React.useCallback( |
| 48 | + (status: "init" | "noPermissions" | "done" | "error" | "loading" | UseExampleImageStatus) => { |
| 49 | + setStatus(status) |
| 50 | + }, |
| 51 | + [], |
| 52 | + ) |
| 53 | + |
| 54 | + useEffect(() => { |
| 55 | + const recognizeImage = async () => { |
| 56 | + if (!image?.uri) return |
| 57 | + setStatus("recognizing") |
| 58 | + try { |
| 59 | + const recognitionResult = await recognizeText(image.uri) |
| 60 | + setResult(recognitionResult) |
| 61 | + setStatus("done") |
| 62 | + } catch (error) { |
| 63 | + console.error("Error recognizing image:", error) |
| 64 | + setStatus("error") |
| 65 | + } |
| 66 | + } |
| 67 | + |
| 68 | + recognizeImage().then(() => null) |
| 69 | + }, [image]) |
| 70 | + |
| 71 | + const statusMessage = React.useMemo(() => { |
| 72 | + if (!image && status !== "init") { |
| 73 | + setStatus("init") |
| 74 | + } |
| 75 | + switch (status) { |
| 76 | + case "init": |
| 77 | + return "Take a photo or select one from your camera roll" |
| 78 | + case "noPermissions": |
| 79 | + return "You need to grant camera permissions to take a photo" |
| 80 | + case "takingPhoto": |
| 81 | + return "Taking photo..." |
| 82 | + case "selectingPhoto": |
| 83 | + return "Selecting photo..." |
| 84 | + case "done": |
| 85 | + return "Done!" |
| 86 | + case "error": |
| 87 | + return "Error during recognition!" |
| 88 | + case "recognizing": |
| 89 | + return "Recognizing Image..." |
| 90 | + case "loading": |
| 91 | + return "Loading Example Images..." |
| 92 | + default: |
| 93 | + throw new Error("Invalid status") |
| 94 | + } |
| 95 | + }, [result, image, status]) |
| 96 | + |
| 97 | + const clearResults = useCallback(() => { |
| 98 | + setResult(null) |
| 99 | + }, []) |
| 100 | + |
| 101 | + return ( |
| 102 | + <Screen style={$root} preset="scroll" safeAreaEdges={["top", "bottom"]}> |
| 103 | + <View> |
| 104 | + <Icon icon={"back"} onPress={() => navigation.navigate("Home")} style={$backIcon} /> |
| 105 | + <Text preset={"heading"} text="Text Recognition" /> |
| 106 | + <Text style={$description}>Take a photo, and extract text from it.</Text> |
| 107 | + </View> |
| 108 | + <ImageSelector |
| 109 | + onImageChange={handleImageChange} |
| 110 | + onImageClear={clearResults} |
| 111 | + onStatusChange={onStatusChange} |
| 112 | + statusMessage={statusMessage} |
| 113 | + status={status} |
| 114 | + isLoading={false} |
| 115 | + images={{ |
| 116 | + filter: "all", |
| 117 | + groupBy: "label", |
| 118 | + }} |
| 119 | + /> |
| 120 | + |
| 121 | + {result && ( |
| 122 | + <> |
| 123 | + <View style={$resultContainer}> |
| 124 | + <Text preset="subheading">Recognized Text</Text> |
| 125 | + <Text style={$resultText}>{result.text}</Text> |
| 126 | + </View> |
| 127 | + <DebugOutput data={result} /> |
| 128 | + </> |
| 129 | + )} |
| 130 | + </Screen> |
| 131 | + ) |
| 132 | + }, |
| 133 | +) |
| 134 | + |
| 135 | +const $root: ViewStyle = { |
| 136 | + flex: 1, |
| 137 | + padding: 16, |
| 138 | + display: "flex", |
| 139 | + flexDirection: "column", |
| 140 | +} |
| 141 | +const $backIcon: ImageStyle = { marginVertical: 8 } |
| 142 | + |
| 143 | +const $description: TextStyle = { |
| 144 | + marginVertical: 8, |
| 145 | + color: "rgba(0,0,0,0.6)", |
| 146 | +} |
| 147 | + |
| 148 | +const $resultContainer: ViewStyle = { |
| 149 | + width: "100%", |
| 150 | + borderWidth: 1, |
| 151 | + borderColor: "rgba(0,0,0,0.2)", |
| 152 | + borderRadius: 8, |
| 153 | + padding: 12, |
| 154 | + marginVertical: 16, |
| 155 | +} |
| 156 | + |
| 157 | +const $resultText: TextStyle = { |
| 158 | + marginTop: 8, |
| 159 | +} |
| 160 | + |
| 161 | +const $debugContainer: ViewStyle = { |
| 162 | + width: "100%", |
| 163 | + borderWidth: 1, |
| 164 | + borderColor: "rgba(0,0,0,0.2)", |
| 165 | + borderRadius: 8, |
| 166 | + marginBottom: 24, |
| 167 | + overflow: "hidden", |
| 168 | +} |
| 169 | + |
| 170 | +const $debugHeader: ViewStyle = { |
| 171 | + padding: 12, |
| 172 | + backgroundColor: "rgba(0,0,0,0.05)", |
| 173 | +} |
| 174 | + |
| 175 | +const $debugTitle: TextStyle = { |
| 176 | + fontWeight: "bold", |
| 177 | +} |
| 178 | + |
| 179 | +const $debugContent: ViewStyle = { |
| 180 | + maxHeight: 300, |
| 181 | + padding: 12, |
| 182 | + backgroundColor: "rgba(0,0,0,0.02)", |
| 183 | +} |
| 184 | + |
| 185 | +const $debugText: TextStyle = { |
| 186 | + fontFamily: "monospace", |
| 187 | + fontSize: 12, |
| 188 | +} |
0 commit comments