Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dabit3/appsync-image-rekognition
React + AWS AppSync App for image recognition using AWS Lambda + Amazon Rekognition
https://github.com/dabit3/appsync-image-rekognition
ai aws-amplify aws-appsync graphql ml reactjs serverless
Last synced: 5 days ago
JSON representation
React + AWS AppSync App for image recognition using AWS Lambda + Amazon Rekognition
- Host: GitHub
- URL: https://github.com/dabit3/appsync-image-rekognition
- Owner: dabit3
- Created: 2018-09-19T18:24:34.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-27T13:00:10.000Z (over 3 years ago)
- Last Synced: 2023-08-03T20:12:54.648Z (over 1 year ago)
- Topics: ai, aws-amplify, aws-appsync, graphql, ml, reactjs, serverless
- Language: JavaScript
- Size: 877 KB
- Stars: 36
- Watchers: 4
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AppSync Image Rekognition
React app for AI image facial recognition processing.
## Getting started
0. Clone the project & change into the new directory
```sh
git clone https://github.com/dabit3/appsync-image-rekognition.git
cd appsync-image-rekognition
```
1. Install dependencies
```sh
npm install
```
2. Initialize a new AWS Amplify project
```sh
amplify init
```
3. Add auth, storage, & AppSync services
```sh
amplify add auth
amplify add api
amplify add storage
amplify add function
amplify push
```
4. Update the AppSync Schema in your dashboard to the following:
```graphql
type ImageData {
data: String!
}
type Query {
fetchImage(imageInfo: String!): ImageData
}
```
5. Add the new Lambda function as a data source in the AppSync API Datasources section.
6. Update the `fetchImage` resolver data source to use the new Lambda function as the datasource. Update the `fetchImage` resolver to the following:
##### Request mapping template
```js
{
"version" : "2017-02-28",
"operation": "Invoke",
"payload": $util.toJson($context.args)
}
```
##### Response mapping template
```js
$util.toJson($context.result)
```
7. Update the Lambda function code to the following (make sure to replace the bucket name with your bucket name):
```js
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: "",
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
})
}
});
};
```
8. Add permissions to Lambda role for Rekognition as well as S3
## Your final exports file should look something like this:
```js
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
```