This application is used to upload an image into S3 bucket using S3 signed url and later process the uploaded image using lambda functions and Amazon Rekognition to extract the text. This can be tested using a frontend application created using Vue and node.js

To find more about the application refer here https://www.linkedin.com/pulse/aws-serverless-computing-faas-application-using-lambda-rollend-xavier/

• AWS CLI installed and configured with your environment
• AWS SAM CLI installed - minimum version 0.48.
• NodeJS 12.x installed

1. Navigate to the repo https://github.com/rollendxavier/vehicle_detection
2. Clone the repo onto your local development machine using git clone.

The complete deployment can be executed using the AWS SAM (Serverless application model) and template (template.yaml) available in the repo.

cd .. 
sam deploy --guided

This command will be creating below set of components into your AWS using CloudFormation and should be carefull to consider your AWS billing limits.

CloudFormation stack changeset
--------------------------------------------------------------------------------------------------------------------
Operation LogicalResourceId ResourceType Replacement
--------------------------------------------------------------------------------------------------------------------
+ Add ImageDetectFunctionDetecteApiEve AWS::Lambda::Permission N/A
 ntPermission
+ Add ImageDetectFunctionRole AWS::IAM::Role N/A
+ Add ImageDetectFunction AWS::Lambda::Function N/A
+ Add ImageUploadFunctionRole AWS::IAM::Role N/A
+ Add ImageUploadFunctionUploadApiEven AWS::Lambda::Permission N/A
 tPermission
+ Add ImageUploadFunction AWS::Lambda::Function N/A
+ Add S3ImageBucket AWS::S3::Bucket N/A
+ Add VehicleDetetctionApiApiGatewayDe AWS::ApiGatewayV2::Stage N/A
 faultStage
+ Add VehicleDetetctionApi AWS::ApiGatewayV2::Api N/A
--------------------------------------------------------------------------------------------------------------------

When using --guided, SAM will prompt for basic parameters, enter:

• Stack Name: s3TextDetection
• AWS Region: your preferred AWS Region (e.g. ap-southeast-2)
• Accept all other defaults.

Once the deployment is finished, not the below output parameters as it is required to configure the frontend application.

• The APIendpoint value output will looks like https://abc12345678.execute-api.ap-southeast-2.amazonaws.com.
• The upload URL endpoint is with /uploads route added - for example: https://abc12345678.execute-api.us-west-2.amazonaws.com/uploads.
• The detect URL endpoint is with the /detect route added - for example: https://abc12345678.execute-api.us-west-2.amazonaws.com/detect.

The Vue.js frontend app is saved in the frontend directory.

1. You have to configure the API Gateway endpoint from the backend deployment in the index.html file.

2. You will not be able to run this from your local browser, as CORS policy works with localhost. You can follow below steps

   • Copy the file to an S3 bucket and allow the policies (ACL) to make it public

   aws s3 cp frontend\index.html s3://s3bucket-vehicledetection
   aws s3api put-object-acl --bucket s3bucket-vehicledetection --key index.html --acl public-read-write
   

   • or deploy using AWS Amplify Console.

3. Once the page is loaded on a browser, try uploding a vehicle image which displays a rego (any image with text also works) and the application will upload the image into an S3 bucket and diplays the text in the uploaded image.