React app for AI image facial recognition processing.
- Clone the project & change into the new directory
git clone https://github.com/dabit3/appsync-image-rekognition.git
cd appsync-image-rekognition- Install dependencies
npm install- Initialize a new AWS Amplify project
amplify init- Add auth, storage, & AppSync services
amplify add auth
amplify add api
amplify add storage
amplify add function
amplify push- Update the AppSync Schema in your dashboard to the following:
type ImageData {
data: String!
}
type Query {
fetchImage(imageInfo: String!): ImageData
}-
Add the new Lambda function as a data source in the AppSync API Datasources section.
-
Update the
fetchImageresolver data source to use the new Lambda function as the datasource. Update thefetchImageresolver to the following:
{
"version" : "2017-02-28",
"operation": "Invoke",
"payload": $util.toJson($context.args)
}$util.toJson($context.result)- Update the Lambda function code to the following (make sure to replace the bucket name with your bucket name):
const AWS = require('aws-sdk')
AWS.config.update({region: 'us-east-1'})
var rekognition = new AWS.Rekognition()
exports.handler = (event, context, callback) => {
var params = {
Image: {
S3Object: {
Bucket: "<YOURBUCKETNAME>",
Name: "public/" + event.imageInfo
}
},
Attributes: [
'ALL'
]
};
rekognition.detectFaces(params, function(err, data) {
if (err) {
callback(null, {
data: JSON.stringify(err.stack)
})
} else {
const myData = JSON.stringify(data)
callback(null, {
data: myData
})
}
});
};- Add permissions to Lambda role for Rekognition as well as S3
const config = {
'aws_appsync_graphqlEndpoint': 'https://yourendpoint',
'aws_appsync_region': 'us-east-2',
'aws_appsync_authenticationType': 'API_KEY',
'aws_appsync_apiKey': 'APIKEY',
'aws_user_pools': 'enable',
'aws_cognito_region': 'us-east-2',
'aws_user_pools_id': 'us-east-2_YOURID',
'aws_user_pools_web_client_id': 'YOURCLIENTID',
'aws_cognito_identity_pool_id': 'us-east-2:YOURID',
'aws_user_files_s3_bucket': 'YOURBUCKETNAME',
'aws_user_files_s3_bucket_region': 'us-east-1'
}
export default config
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent