How to pass AWS Rekognition Detected Text result to Storage.put method
Budget: £20 – £250 GBP
I'm following this tutorial that shows how to detect text from an image and save the output to DynamoDB through GraphQL.
In the tutorial, the presenter uses the IdentifyLabels from AWS Rekognition. I would like to use IdentifyText. I manually updated relevant parts of the code but I fail to pass IdentifyText output to the Storage.put method so that detected text can be saved to DynamoDB with other metadata.
*Original code to IdentifyLabels*
findImageLabels = async (file) => {
console.log('find image labels');
return Predictions.identify({
labels: {
source: {
file,
},
type: "LABELS"
}
})
.then(response => {
let labels = response.labels.map((label) => {
if(label.metadata.confidence > 70)
return label.name
});
return labels.filter(Boolean);
})
.catch(err => console.log({ err }));
}
*Original code to add IdentifyLabels output to the Storage.put method*
onChange(e) {
const file = e.target.files[0];
console.log(file);
Storage.put(file.name, file, {
contentType: 'image/png'
}).then (() => {
this.findImageLabels(file).then(labels => {
this.setState({file: URL.createObjectURL(file)})
const image = {
name: file.name,
labels: labels,
file: {
bucket: awsExports.aws_user_files_s3_bucket,
region: awsExports.aws_user_files_s3_bucket_region,
key: file.name
}
}
this.addImageToDB(image);
console.log('added completed')
})
})
.catch(err => console.log(err));
}
addImageToDB = async (image) => {
console.log('addimage to db')
try {
await API.graphql(graphqlOperation(createPicture, {input:image}));
} catch (error) {
console.log(error)
}
}
*Updated code to IdentifyText*
findImageText = async (file) => {
console.log('find image text');
return Predictions.identify({
text: {
source: {
file,
},
format: "PLAIN"
}
})
.then(response => {
let text = response;
})
.catch(err => console.log({ err }));
}
* I understand I need to modify the part after then(response => { but not sure how it should be done.*
*Updated code to pass IdentifyText output to Storage.put method*
onChange(e) {
const file = e.target.files[0];
console.log(file);
Storage.put(file.name, file, {
contentType: 'image/png'
}).then (() => {
this.findImageText(file).then(text => {
this.setState({file: URL.createObjectURL(file)})
const image = {
name: file.name,
file: {
bucket: awsExports.aws_user_files_s3_bucket,
region: awsExports.aws_user_files_s3_bucket_region,
key: 'public/' + file.name
},
foundText: text
}
console.log({ text });
this.addImageToDB(image);
console.log('added completed')
})
})
.catch(err => console.log(err));
}
addImageToDB = async (image) => {
console.log('added to the db')
try {
await API.graphql(graphqlOperation(createPicture, {input:image}));
} catch (error) {
console.log(error)
}
}
No AWS access required. I'll execute the correct code on my side.
In the tutorial, the presenter uses the IdentifyLabels from AWS Rekognition. I would like to use IdentifyText. I manually updated relevant parts of the code but I fail to pass IdentifyText output to the Storage.put method so that detected text can be saved to DynamoDB with other metadata.
*Original code to IdentifyLabels*
findImageLabels = async (file) => {
console.log('find image labels');
return Predictions.identify({
labels: {
source: {
file,
},
type: "LABELS"
}
})
.then(response => {
let labels = response.labels.map((label) => {
if(label.metadata.confidence > 70)
return label.name
});
return labels.filter(Boolean);
})
.catch(err => console.log({ err }));
}
*Original code to add IdentifyLabels output to the Storage.put method*
onChange(e) {
const file = e.target.files[0];
console.log(file);
Storage.put(file.name, file, {
contentType: 'image/png'
}).then (() => {
this.findImageLabels(file).then(labels => {
this.setState({file: URL.createObjectURL(file)})
const image = {
name: file.name,
labels: labels,
file: {
bucket: awsExports.aws_user_files_s3_bucket,
region: awsExports.aws_user_files_s3_bucket_region,
key: file.name
}
}
this.addImageToDB(image);
console.log('added completed')
})
})
.catch(err => console.log(err));
}
addImageToDB = async (image) => {
console.log('addimage to db')
try {
await API.graphql(graphqlOperation(createPicture, {input:image}));
} catch (error) {
console.log(error)
}
}
*Updated code to IdentifyText*
findImageText = async (file) => {
console.log('find image text');
return Predictions.identify({
text: {
source: {
file,
},
format: "PLAIN"
}
})
.then(response => {
let text = response;
})
.catch(err => console.log({ err }));
}
* I understand I need to modify the part after then(response => { but not sure how it should be done.*
*Updated code to pass IdentifyText output to Storage.put method*
onChange(e) {
const file = e.target.files[0];
console.log(file);
Storage.put(file.name, file, {
contentType: 'image/png'
}).then (() => {
this.findImageText(file).then(text => {
this.setState({file: URL.createObjectURL(file)})
const image = {
name: file.name,
file: {
bucket: awsExports.aws_user_files_s3_bucket,
region: awsExports.aws_user_files_s3_bucket_region,
key: 'public/' + file.name
},
foundText: text
}
console.log({ text });
this.addImageToDB(image);
console.log('added completed')
})
})
.catch(err => console.log(err));
}
addImageToDB = async (image) => {
console.log('added to the db')
try {
await API.graphql(graphqlOperation(createPicture, {input:image}));
} catch (error) {
console.log(error)
}
}
No AWS access required. I'll execute the correct code on my side.