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

📋 ELEMENT DESCRIPTION
--------------------------------
GOOGLE DOCUMENT AI - FAKE ID DETECTOR (FRONT-END DESKTOP & NATIVE MOBILE) provides a client-side element with DETECT FAKE ID (FRONT-END DESKTOP & NATIVE MOBILE) action to analyze ID documents with improved responsiveness, ideal for mobile applications.

🔧 STEP-BY-STEP SETUP
--------------------------------
ℹ️ The steps from 0) to 2) can be automatically performed by logging in into your Google Cloud Console, opening the Cloud Shell (top right corner of your page) and copy pasting this command and press enter:

wget -q https://storage.googleapis.com/bubblegcpdemo/demo-assets/wiseable-gcp-documentai-sync-only.py && python3 wiseable-gcp-documentai-sync-only.py

0) Set-up a project from Google Cloud Console: https://cloud.google.com/document-ai/docs/setup
- Create or select a project
- Enable the DOCUMENT AI API for that project
- Create a service account
- Download a private key as JSON.

1) Open the private key JSON file with a text editor, copy/paste the following parameters from your file to the Plugin settings:
- CLIENT_EMAIL
- PROJECT_ID
- PRIVATE_KEY, including the -----BEGIN PRIVATE KEY-----\\n prefix and \\n-----END PRIVATE KEY-----\\n suffix.

2) In your Google Cloud Console > IAM > PERMISSION > Add the DOCUMENT AI VIEWER permissions to the service account created at the step 0.

3) Register on plugins.wiseable.io. Create a new Credential which associates your BUBBLE APP URL, GCP PROJECT_ID, CLIENT_EMAIL & PRIVATE_KEY.
The registration service will generate your PUBLIC ACCESS KEY. This key serves as a secure proxy for your real API key. It allows your application to communicate with the service without exposing your real API key. Since this PUBLIC ACCESS KEY is explicitly tied to your registered BUBBLE APP URL, it can only be used from that domain, ensuring that even if the key is publicly visible, it remains safe and cannot be misused by unauthorized sources.

4) Enter in the PLUGIN SETTINGS your PUBLIC ACCESS KEY (used for front-end element only).

5) In your Google Cloud Console > Document AI, create a IDENTITY DOCUMENT PROOFING PARSER. This PROCESSOR ID and REGION will be used in the following step: https://cloud.google.com/document-ai/docs/create-processor

6) Add the GOOGLE DOCUMENT AI - FAKE ID DETECTOR (FRONT-END DESKTOP & NATIVE MOBILE) element to the page on which the ID verification feature must be integrated.

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

FIELDS:
- RESULT DATA TYPE: Returned type, must always be set to "RESULT (DOCUMENT AI FAKE ID DETECTOR)".

EVENTS:
- SUCCESS: Event triggered upon success
- ERROR: Event triggered upon error

EXPOSED STATES:
Use any element able to show/process the data of interest (such as a Group with a Text field) stored within the result of the following states:
- RESULTS: Populated upon SUCCESS event. Returns a list of signals details.
- ERROR MESSAGE: Populated upon ERROR event.
- IS PROCESSING: Set to true when processing is in progress, false otherwise.

ELEMENT ACTIONS - TRIGGERED IN WORKFLOW:
- DETECT FAKE ID (FRONT-END DESKTOP & NATIVE MOBILE): Analyze an ID document for fraud signals. Populate RESULTS state upon completion.

Inputs Fields:
 - FILE: File from the Bubble.io picture uploader, a Protocol-relative URLs (//server/file.ext), or a HTTPS file URL (https://server/file.ext) or a Google Storage URL (gs://bucket/file.ext).
 - PROCESSOR ID: The ID of your processor. You will find this ID in your Google Cloud Console > Document AI > Processors > ID
 - PROCESSOR REGION: Your processor's region, for example: us - United States eu - European Union. You will find this location in your Google Cloud Console > Document AI > Processors > Region

2️⃣: DETECT FAKE ID (BACK-END)
==========================

📋 ACTION DESCRIPTION
--------------------------------
DETECT FAKE ID (BACK-END) returns a list of signals along with details of each, such as but not limited to, whether words are present that aren't typical on IDs, whether the image was altered or tampered via an image editing tool, or whether the image can be found online. List of supported normalized fields: https://cloud.google.com/document-ai/docs/processors-list#processor_id-proofing-parser

🔧 STEP-BY-STEP SETUP
--------------------------------
ℹ️ The steps from 0) to 2) can be automatically performed by logging in into your Google Cloud Console, opening the Cloud Shell (top right corner of your page) and copy pasting this command and press enter:

wget -q https://storage.googleapis.com/bubblegcpdemo/demo-assets/wiseable-gcp-documentai-sync-only.py && python3 wiseable-gcp-documentai-sync-only.py

0) Set-up a project from Google Cloud Console: https://cloud.google.com/document-ai/docs/setup
- Create or select a project
- Enable the DOCUMENT AI API for that project
- Create a service account
- Download a private key as JSON.

1) Open the private key JSON file with a text editor, copy/paste the following parameters from your file to the Plugin settings:
- CLIENT_EMAIL
- PROJECT_ID
- PRIVATE_KEY, including the -----BEGIN PRIVATE KEY-----\\n prefix and \\n-----END PRIVATE KEY-----\\n suffix.

2) In your Google Cloud Console > IAM > PERMISSION > Add the DOCUMENT AI VIEWER permissions to the service account created at the step 0.

3) In your Google Cloud Console > Document AI, create a IDENTITY DOCUMENT PROOFING PARSER. This PROCESSOR ID and REGION will be used in the following step: https://cloud.google.com/document-ai/docs/create-processor

4) Set up the action "DETECT FAKE ID (BACK-END)" in the workflow.
 Inputs Fields:
   - FILE: PDF, TIFF, JPG, PNG, BMP, WEBP or GIF file from the Bubble.io picture uploader, a Protocol-relative URLs (//server/file.ext), or a HTTPS file URL (https://server/file.ext). Maximum file size of 20 MB and of 2 pages.
   - PROCESSOR ID: The ID of your processor. You will find this ID in your Google Cloud Console > Document AI > Processors > ID
   - REGION: Your processor's region, for example: us - United States eu - European Union. You will find this location in your Google Cloud Console > Document AI > Processors > Region
   - RESULT DATA TYPE: Returned type, must always be set to "RESULT (DOCUMENT AI FAKE ID DETECTOR)".
 Output Fields:
   - RESULTS: Returns a list of signals details. List of supported signals fields: https://cloud.google.com/document-ai/docs/processors-list#processor_id-proofing-parser



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

ℹ️ ADDITIONAL INFORMATION
======================
> Supported file formats: https://cloud.google.com/document-ai/docs/file-types

> Supported Normalized Fields: https://cloud.google.com/document-ai/docs/processors-list#processor_id-proofing-parser

> Supported Languages: https://cloud.google.com/document-ai/docs/processors-list#processor_id-proofing-parser

> GOOGLE DOCUMENT AI service limits: https://cloud.google.com/document-ai/quotas

⚠️ TROUBLESHOOTING
================
Any plugin related error will be posted to the Logs tab, "Server logs" section of your App Editor.
Make sure that "Plugin server side output" and "Plugin client 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, this implementation posts the file data to Google Vision for non-Google Storage URLs (e.g: non-gs://). The maximum processing duration of this action 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 Google Cloud Vision API 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.