Real Time OCR Web App (React, NodeJS, Python and AWS) 

You are very welcome! I am glad that you liked the video:) Best Siamak

Hi Ken, Thanks for watching the video! I am glad that you enjoyed the video:) Best Siamak

Thank you for watching !

Hi Kams, Thank you! You are very welcome :) I am glad that you liked it. Best Siamak

You are welcome! I am glad that you liked it Best Siamak

You are very welcome !! I am glad that it was helpful :) You need to make an API call (put request) and have your API gateway call a lambda function. You can use the following NodeJS lambda function. Please update the fields as needed. I hope this helps. Best Siamak 'use strict'; var querystring = require('querystring'); var AWS = require('aws-sdk'),documentClient = new AWS.DynamoDB.DocumentClient(); exports.writeInvoice = function(event, context, callback){ const params = querystring.parse(event.body); var record = { Item : { "Invoice" : params['Invoice'], "Amount" : params['Amount'], "Date" : params['Date'], "Id": params['Id'], "Vendor" : params['Vendor'], "Company" : params['Company'], "Description" : params['Description'] }, TableName : "myTable" }; documentClient.put(record, function(err, data){ callback(err, data); }); } Also Update the handler to : index.writeInvoice

Hi Dileep, Thanks for watching the video. Yes that is correct. This can be commercialized after some adjustments and enhancements. This is just a POC :) Best Siamak

When i cloned your repo, it appears that const UID, var data, await fetch are all nested within async getFiles. Is this correct? Where I am stuck is at 1 hour 13 mins

Hi Richard, You are very welcome! Thanks for watching the video and I appreciate your feedback. UID belongs to the class. The error message tells me that you have the variable outside of a block. Please double check the code blocks. same with data, it belongs to the class. I hope this helps. Best Siamak

@@CodeEngine Thanks for the reply Siamak. I never actually comment on RU-vid videos for help, but noticed you replied to others so said I would try. Its much appreciated! Im not sure what exactly you mean by "belongs to the class". Do you mean to say it should not be nested within async getFiles? I have nested UID, data and await fetch within the getFiles block and it is now working for me. I am able to upload the image to s3 through this. However. "this.state.files[0].base64" did not work for me. This did. "this.state.files.base64" . Again, not sure if this is correct or not and will cause me issues later, but for now it is working. Please let me know if you think this is okay. Cheers Richard

Hi Richard, You are very welcome! I am glad to hear that you were able to get the project working. Sorry if my reply wasn't clear. It is definitely okay to use nested blocks as long as you have the proper opening and closing parenthesis. The reason I said "they belong to the class" is because of the scope of the variable. When you create a class and create a variable within the class you can use that variable anywhere inside the class. When you put the variable inside another block basically you are reducing the scope/visibility of that variable. There is no right or wrong answer to this situation you just need to think how your data is accessible in your component. I hope this helps Best Siamak

@@CodeEngine It does. Thanks very much Siamak!

Hi Shahmir, Thank you! I am glad that you liked it:) Yes you can store the secrets in .env file. Best Siamak

@@CodeEngine Please don't stop making such awesome videos. You are really a GEM

Thank you for your support Shahmir! I won't stop making videos as I enjoy sharing knowledge with others. Stay tuned! Best Siamak

One other thing aswell, why does it only allow for png/jpg and not pdf documents? Can pdf not be handled by textract?

Hi Richard, Thanks for watching the video! Great questions! Nodejs is faster than Python and it is a good candidate for uploading files (Node uses Chrome's V8 engine) but you can use Python as well. You can process the file after clicking the submit button however the idea is to upload the file and get the result instead of typing the numbers in the form and then save the invoice. I hope this helps Best Siamak

Hi Richard, You can process pdf files but you need to add the following method : textract.get_document_text_detection() For production you need to have a second Lambda function that processes your pdf files (you can detect the file extension in your react app) Best Siamak

Hi Mekkaoui, You are welcome! Thanks for watching the video. What do you see in your web browser console? You can go to the developer mode in Chrome and confirm that you are getting a proper response. You can also add a few console.log() statements to your code and print the values to the console. I hope this helps Best Siamak

Hello, You are welcome! Yes you can definitely use this method. Presigned URL provides a link for user to upload an object to S3 without having AWS security credentials. Please note that presigned URLs have expiration date. I hope this helps Best Siamak

@@CodeEngine Thank you for your quick responce. I am going to use this method on proudction. can you please guid me how to save this image in ddb with user chat trans. and show in trans. real time. thank you so much

You are welcome! Insert the file name (path on S3), file type and all the information that you want to keep to your DynamoDB table. Basically you keep the file in S3 and metadata in DynamoDB. Best Siamak

@@CodeEngine Thank you so much. meanwhile I checked your other videos. your explaination is clear and awesome. I have one thing whenver you get time please make video on Amazon connect chat. in react. thanks

You are very welcome:) Thank you! I will add it to the list. Best Siamak

Hi Dimitrios, Thank you! I am glad that you liked the video. Interesting project.. You can take a screenshot of users page using something like pyautogui with Python and then procces it on the fly and store the result in a database. This means you would have to build a data streaming pipeline over http to stream the screenshots with minimum bandwidth required. The second approach is to make a web browser scraper that is running in the background or as a plugin on a browser using beautiful soup in Python. I hope this helps Best Siamak

Hi, you need to connect to your database server and insert the record.

Thanks for your feedback! Best Siamak

Hi Kunchanapalli, Thank you for watching the video! I am glad that you liked it :) I just uploaded the sample invoice (Sample.png). Please check the repository : github.com/CodeEngineTechnology/OCR_WebApp Best Siamak

@@CodeEngineAmazing. I have never seen any creator who replies so promptly. Great work Siamak. Thank you very much.

You are very welcome Kunchanapalli ! Thank you for your support :) Best Siamak

@@CodeEngine Hi again Siamak. I am encountering the CORS error on my web browser. I have enabled CORS extension, enabled CORS after building the POST method, and also selected while building the OCR resource. Yet it is throwing an error. I have also done the CORS configuration in the images bucket. The image is being uploaded to the S3 image bucket. Can you please help me out. Thanks :)

To be precise this is the error I am facing : Access to fetch at 'xxxxx.amazonaws.com/Production/ocr' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Hi Ajitesh, New customers can analyze up to 1,000 pages per month using the Detect Document Text API and up to 100 pages per month using the Analyze Document API, for the first three months. After that : First 1 million pages is 0.0015 per page ($1.5 per 1,000) I hope this helps Best Siamak

Hi Manasa, Yes of course! Best Siamak

Hi Sameer, Unfortunately I don't. You can simply Google "invoice template" and test your app. Best Siamak

Hi Sameer, Yes you can sign up for AWS Educate and receive up to $100 in AWS Promotional Credit with an AWS Educate Starter Account. I hope this helps. Best Siamak

@@CodeEngine Thanks for the quick reply. I am getting the following error when i test the lamda function for OCR. Can you help me out with this error? { "errorMessage": "An error occurred (AccessDeniedException) when calling the DetectDocumentText operation: User: arn:aws:sts: is not authorized to perform: textract:DetectDocumentText with an explicit deny", "errorType": "AccessDeniedException", "stackTrace": [ " File \"/var/task/lambda_function.py\", line 20, in lambda_handler 'Name': documentName ", " File \"/var/runtime/botocore/client.py\", line 316, in _api_call return self._make_api_call(operation_name, kwargs) ", " File \"/var/runtime/botocore/client.py\", line 635, in _make_api_call raise error_class(parsed_response, operation_name) " ] }

Hi Sameer, Looks like you need to modify the I AM role as your lambda needs permission to make that API call. Best Siamak

Hi, Thanks for watching the video! 1) Please download AWS CLI from : aws.amazon.com/cli/ 2) Then create an IAM user in your AWS account and download your access key. 3) at the end open your command prompt and type aws configure I hope this helps Best Siamak

@@CodeEngine Thanks for the immediate response and how did we connect our git repo to aws server?

You are welcome! please watch my code commit video Best Siamak

Hello, Thank you for watching the video and I am glad that you liked it. What was his reason?

Actually what you had shared with me youtube for that project It's source code not working at all Thats why it's delaying I have created all the project from scratch me: why? Because we can't create mail and subscription module with aws (actually I think we can) But it will too messy For managing software Thats why I have choosed node And aws sdk ** full disclaimer, i am doubting the developer i’m working with not you, i’m just trying to understand since my knowledge in dev is limited

Thanks for sharing this information. Yes you can pretty much build everythig. Although I am sure your developer is a telented engineer, his skillset might not be the perfect fit for this project. I hope this helps. Best Siamak

@@CodeEngine any recommendations on how i can find someone to work on a project ?

Hi Joao, Yes you can read and process pdf files using textract. Please look at the aws documentation. Best Siamak

Sure. I will add it to the list ! Best Siamak