In this story, we are going to build an app for detecting text in an image using Amazon Rekognition in React Native.
You shall learn how to build a mobile application in React Native, which talks to AWS API Gateway. This API endpoint is configured with a lambda that stores the sent image in S3 and detects the text using AWS Rekognition and sends back the response.
Installing dependencies:
Let’s go to React Native Docs, select React Native CLI Quickstart and select our Development OS and Target OS -> Android, as we are going to build an android application.
Follow the docs for installing dependencies, after installing create a new React Native Application. Use the command line interface to generate a new React Native project called text-detection.
react-native init text-detectionPreparing the Android device:
We shall need an Android device to run our React Native Android app. This can be either a physical Android device, or more commonly, we can use an Android Virtual Device (AVD) which allows us to emulate an Android device on our computer (using Android Studio).
Either way, we shall need to prepare the device to run Android apps for development. If you have a physical Android device, you can use it for development in place of an AVD by connecting it to your computer using a USB cable and following the instructions here.
If you are using a virtual device follow this link. I shall be using physical android device.
Now go to command line and run react-native run-android inside your React Native app directory:
cd text-detection
react-native run-androidIf everything is set up correctly, you should see your new app running in your physical device or Android emulator.
API Creation in AWS Console:
Before going further, create an API in your AWS console following this link. Once you are done with creating API come back to the React Native application. Now, go to your project directory and Replace your App.js file with the following code.
Now, go to your project directory and Replace your App.js file with the following code.
import React, {Component} from 'react';
import { StyleSheet, View, Text, TextInput, Image, ScrollView, TouchableHighlight } from 'react-native';
import ImagePicker from "react-native-image-picker";
import Amplify, {API} from "aws-amplify";
Amplify.configure({
API: {
endpoints: [
{
name: <Your API name>,
Endpoint: <Your end-point url>
}
]
}
});
class Registration extends Component {
constructor(props){
super(props);
this.state = {
imageName : '',
capturedImage : '',
detectedText: []
};
}
captureImageButtonHandler = () => {
ImagePicker.showImagePicker({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, (response) => {
console.log('Response - ', response);
alert(response)
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
// You can also display the image using data:
const source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({capturedImage: response.uri, base64String: source.uri });
}
});
}
submitButtonHandler = () => {
if (this.state.imageName == '' || this.state.imageName == undefined || this.state.imageName == null) {
alert("Please Enter the image name");
} else if (this.state.capturedImage == '' || this.state.capturedImage == undefined || this.state.capturedImage == null) {
alert("Please Capture the Image");
} else {
console.log("submiting")
const apiName = "faceRekognition";
const path = "/detecttext";
const init = {
headers: {
'Accept': 'application/json',
"Content-Type": "application/x-amz-json-1.1"
},
body: JSON.stringify({
Image: this.state.base64String,
name: this.state.imageName
})
}
API.post(apiName, path, init).then(response => {
console.log("Response Data is : " + JSON.stringify(response));
if (JSON.stringify(response.TextDetections.length) > 0) {
this.setState({
detectedText: response.TextDetections
})
} else {
alert("Please Try Again.")
}
});
}
}
render() {
console.log(this.state.detectedText)
var texts = this.state.detectedText.map(text => {
return <Text style={{textAlign: 'center'}}>{text.DetectedText}</Text>
})
return (
<View>
<ScrollView>
<Text style= {{ fontSize: 20, color: "#000", textAlign: 'center', marginBottom: 15, marginTop: 10 }}>Text Image</Text>
<TextInput
placeholder="file name"
onChangeText={imageName => this.setState({imageName: imageName})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
{this.state.capturedImage !== "" && <View style={styles.imageholder} >
<Image source={{uri : this.state.capturedImage}} style={styles.previewImage} />
</View>}
<View>
<br/>
{texts}
</View>
<TouchableHighlight style={[styles.buttonContainer, styles.captureButton]} onPress={this.captureImageButtonHandler}>
<Text style={styles.buttonText}>Capture Image</Text>
</TouchableHighlight>
<TouchableHighlight style={[styles.buttonContainer, styles.submitButton]} onPress={this.submitButtonHandler}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
TextInputStyleClass: {
textAlign: 'center',
marginBottom: 7,
height: 40,
borderWidth: 1,
margin: 10,
borderColor: '#D0D0D0',
borderRadius: 5 ,
},
inputContainer: {
borderBottomColor: '#F5FCFF',
backgroundColor: '#FFFFFF',
borderRadius:30,
borderBottomWidth: 1,
width:300,
height:45,
marginBottom:20,
flexDirection: 'row',
alignItems:'center'
},
buttonContainer: {
height:45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
// marginBottom:20,
width:"80%",
borderRadius:30,
// marginTop: 20,
margin: 20,
},
captureButton: {
backgroundColor: "#337ab7",
width: 350,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10
},
submitButton: {
backgroundColor: "#C0C0C0",
width: 350,
marginTop: 5,
},
imageholder: {
borderWidth: 1,
borderColor: "grey",
backgroundColor: "#eee",
width: "50%",
height: 150,
marginTop: 10,
marginLeft: 90,
flexDirection: 'row',
alignItems:'center'
},
previewImage: {
width: "100%",
height: "100%",
}
});
export default Registration;In the above code, we are configuring amplify with the API name and Endpoint URL that you created as shown below.
Amplify.configure({
API: {
endpoints: [
{
name: '<Your-API-Name>,
endpoint:'<Endpoint-URL>',
},
],
},
});By clicking the capture button it will trigger the captureImageButtonHandler function. It will then ask the user to take a picture or select from file system. When user captures the image or selects from file system, we will store that image in the state as shown below.
captureImageButtonHandler = () => {
this.setState({
objectName: '',
});
ImagePicker.showImagePicker(
{title: 'Pick an Image', maxWidth: 800, maxHeight: 600},
response => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
// You can also display the image using data:
const source = {uri: 'data:image/jpeg;base64,' + response.data};
this.setState({
capturedImage: response.uri,
base64String: source.uri,
});
}
},
);
};After capturing the image we will preview that image. By Clicking on submit button, submitButtonHandler function will get triggered where we will send the image to the end point as shown below.
submitButtonHandler = () => {
if (this.state.imageName == '' || this.state.imageName == undefined || this.state.imageName == null) {
alert("Please Enter the image name");
} else if (this.state.capturedImage == '' || this.state.capturedImage == undefined || this.state.capturedImage == null) {
alert("Please Capture the Image");
} else {
console.log("submiting")
const apiName = "faceRekognition";
const path = "/detecttext";
const init = {
headers: {
'Accept': 'application/json',
"Content-Type": "application/x-amz-json-1.1"
},
body: JSON.stringify({
Image: this.state.base64String,
name: this.state.imageName
})
}
API.post(apiName, path, init).then(response => {
console.log("Response Data is : " + JSON.stringify(response));
if (JSON.stringify(response.TextDetections.length) > 0) {
this.setState({
detectedText: response.TextDetections
})
} else {
alert("Please Try Again.")
}
});
}
}Lambda Function:
Add the following code into your lambda function that you created in your AWS Console.
const AWS = require('aws-sdk');
var rekognition = new AWS.Rekognition();
var s3Bucket = new AWS.S3( { params: {Bucket: "detect-text-in-image"} } );
var fs = require('fs');
exports.handler = (event, context, callback) => {
let parsedData = JSON.parse(event)
let encodedImage = parsedData.Image;
var filePath = parsedData.name;
let buf = new Buffer(encodedImage.replace(/^data:image\/\w+;base64,/, ""),'base64')
var data = {
Key: filePath,
Body: buf,
ContentEncoding: 'base64',
ContentType: 'image/jpeg'
};
s3Bucket.putObject(data, function(err, data){
if (err) {
console.log('Error uploading data: ', data);
callback(err, null);
} else {
var params = {
Document: { /* required */
Bytes: buf ,
S3Object: {
Bucket: 'detect-text-in-image',
Name: filePath,
// Version: 'STRING_VALUE'
}
},
FeatureTypes: ["TABLES" | "FORMS"]
};
var params = {
Image: {
S3Object: {
Bucket: "detect-text-in-image",
Name: filePath
}
}
};
rekognition.detectText(params, function(err, data) {
if (err){
console.log(err, err.stack);
callback(err)
}
else{
console.log(data);
callback(null, data);
}
});
}
});
};In the above code, we would receive the image from React Native which we are storing in S3 Bucket. The stored image is sent to Amazon Recognition which has detectText method that detects the text in the image and sends the response with the detected text in JSON format.
Note: Make sure you have given permissions to the IAM role to access AWS Rekognition’s detectText API.
Here is how your home screen looks like:
Once you capture an image you can see a preview of that image as shown below.
On submitting the captured image with file name you can see the text in that image as shown below:
That’s all folks! I hope it was helpful.
This story is authored by Venu Vaka. He is a software engineer specializing in ReactJS and AWS Cloud.
Comments