1️⃣ ID DOCUMENT DETECTOR (FRONT-END DESKTOP & NATIVE MOBILE) ============================

📋 ELEMENT DESCRIPTION
--------------------------------
ID DOCUMENT DETECTOR (FRONT-END DESKTOP & NATIVE MOBILE) element provides client-side ID document detection. This element automatically optimizes and processes images to meet AWS requirements and performs detection directly from the user's browser, making it ideal for applications where user experience and performance are critical.

🔧 STEP-BY-STEP SETUP
--------------------------------
The steps from 0) to 1) can be automatically performed by using this deployment template:
 https://console.aws.amazon.com/cloudformation/home?#/stacks/create/review?stackName=BubbleRekognitionSyncOnly&templateURL=https://bubble-resources.s3.amazonaws.com/deployment-assets/CloudFormation-AWSRekognitionSyncOnly.yaml

 You will find the required parameters values used across the plugin in the "OUTPUT" tab of the created stack.

0) Sign-up for AWS REKOGNITION by following this link: https://console.aws.amazon.com/rekognition/home?p=rkn&cp=bn&ad=c

1) Create your AWS REKOGNITION ACCESS KEY & ACCESS KEY SECRET by following the instructions on this page with AWS REKOGNITION Read Only or Full Access Policy to DETECTLABELS at the minimum: https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-secret-access-keys

2) Register on plugins.wiseable.io. Create a new Credential which associates your BUBBLE APP URL, AWS REKOGNITION ACCESS KEY & ACCESS KEY SECRET.
The registration service will generate your PUBLIC ACCESS KEY. This key serves as a secure proxy for your real API key.

3) In the Plugin Settings, enter the following:
  - PUBLIC ACCESS KEY (generated from plugins.wiseable.io)
  - AWS SERVICE ENDPOINT REGION (if not provided, default endpoint is "us-east-1").

4) Add the ID DOCUMENT DETECTOR (FRONT-END DESKTOP & NATIVE MOBILE) element to your page.

5) Integrate the logic into your application using the following element's states and actions:

EVENTS:
- SUCCESS: Event triggered upon successful detection
- ERROR: Event triggered upon error

EXPOSED STATES:
- IS ID: Set to true if an ID document is detected, false otherwise
- ERROR MESSAGE: Contains error details when the ERROR event is triggered
- IS PROCESSING: Set to true when processing is in progress, false otherwise

ELEMENT ACTIONS:
- DETECT ID DOCUMENT (FRONT-END DESKTOP & NATIVE MOBILE): Detects from an image and returns a boolean which is true if an ID such as a Passport, ID Card, or Driving License has been detected, false otherwise.
 Input Fields:
   - IMAGE: Image from a Bubble.io uploader, or a Protocol-relative URL (//server/file.ext), a HTTPS file URL (https://server/file.ext) or an AWS S3 URI (s3://bucket/image.jpg).
   - MIN CONFIDENCE: Minimum confidence level for the labels to return (0-100). Default is 55.

2️⃣ DETECT ID DOCUMENT (BACK-END)
========================

📋 ACTION DESCRIPTION
--------------------------------
DETECT ID DOCUMENT detects from an image and returns a boolean which is true if an ID such as a Passport, ID Card, or Driving License has been detected, false otherwise.

🔧 STEP-BY-STEP SETUP
--------------------------------
The steps from 0) to 1) can be automatically performed using the deployment template mentioned above.

0) Sign-up for AWS REKOGNITION by following this link: https://console.aws.amazon.com/rekognition/home?p=rkn&cp=bn&ad=c

1) Create your AWS REKOGNITION ACCESS KEY & ACCESS KEY SECRET by following the instructions of this page with AWS REKOGNITION Read Only or Full Access Policy to DETECTLABELS at the minimum: https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-secret-access-keys

2) Enter your AWS REKOGNITION ACCESS KEY & ACCESS KEY SECRET & AWS SERVICE ENDPOINT REGION (if not provided, the default endpoint is "us-east-1") in the Plugin Settings.

3) Use any elements (such as Picture Upload), returning a Protocol-relative URLs (//server/path/image.jpg), or a HTTPS image URL (https://server/image.jpg) of a JPEG or PNG image.

4) Set up the steps in the required workflow using the plugin action "DETECT ID DOCUMENT (BACK-END)".

  Input Fields:
   - IMAGE: JPEG or PNG image file from the Bubble.io picture uploader, or a Protocol-relative URL (//server/image.jpg), or a HTTPS image URL (https://server/image.jpg).
   - MIN CONFIDENCE: Specifies the minimum confidence level for the labels to return. Default value is 55 if not provided.
 
  Output Fields:
   - IS ID: Returns a boolean, true if an ID such as a Passport, ID Card, or Driving License has been detected, false otherwise.

🔍 IMPLEMENTATION EXAMPLE
======================
Feel free to browse the app editor in the Service URL for an implementation example.

ℹ️ ADDITIONAL INFORMATION
======================

> AWS REKOGNITION service limits: https://docs.aws.amazon.com/rekognition/latest/dg/limits.html
> AWS services availability per region: https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/
> AWS Service endpoints list: https://docs.aws.amazon.com/general/latest/gr/rande.html

⚠️ TROUBLESHOOTING
================
Any plugin related error will be posted to the the Logs tab, "Server logs" section of your App Editor.
Make sure that "Plugin server side output" is selected in "Show Advanced".

For front-end actions, you can also open your browser's developer console (F12 or Ctrl+Shift+I in most browsers) to view detailed error messages and logs.

Always check the ERROR MESSAGE state of the element and implement error handling using the ERROR event to provide a better user experience.

> Server Logs Details: https://manual.bubble.io/core-resources/bubbles-interface/logs-tab#server-logs

⚡ PERFORMANCE CONSIDERATIONS
===========================

GENERAL
-------------
For back-end actions, the maximum processing duration is capped at 30 seconds as per Bubble.io design. This time limitation does not apply to front-end actions.

⏱️ BACK-END ACTION START DELAY
-----------------------------------------------
Each time a server-side action is called, Bubble initializes a small virtual machine to execute the action. If the same action is called shortly after, the caching mechanism kicks in, resulting in faster execution on subsequent calls.

A useful workaround is to fire a dummy execution at page load, which pre-warms the Bubble engine for the next few minutes, reducing the impact of cold starts for your users.

FRONT-END VS BACK-END PROCESSING
----------------------------------------------------
The front-end element is designed to support and optimize multiple image formats and will automatically compress images to adhere to AWS requirements. The back-end action doesn't perform this optimization, so be careful with file size and format when using it.

❓QUESTIONS?
===========
Contact us at [email protected] for any additional feature you would require or support question.