SInce I spent the better part of 2 weeks understanding the Google Vision API and stumping the back office bubble engineers, I thought I would take a couple minutes and help others who may like to use the Google Cloud Vision API more successfully.
Using the API is really quite simple, and you don’t need to settle for Face recognition, OR Landmark recognition, OR LabelAnnotation OR textAnnotation etc to keep the response time down. Further you don’t need to ignore many fields when you initialize the API!!! You just need to ignore one Field, and one field only “fullTextAnnotstions (list)”.
On further inspection, the real problem is “fullTextAnnotstions (list)” which is a list of all the languages that google has found on the image, starting with a list of probabilities. Unfortunately, google does not indent that list by language detected, and the list is about 90% of the size of the overall results and probably makes it very difficult for bubble to index. To give you a sense of it, there is 10,328 lines in the initialization response and 8,994 lines are relatead to “fullTextAnnotstions (list)”. Sorry that is 87%… And that was setting max results to 50 for each of the features requested.
Also, if you want to directly populate your repeating groups, set your API to DATA and if you want to use results from previous steps in your workflow use ACTION in the API settings.
So for those who want to use the Google Cloud Vision, here are the steps:
Step 1: Name your API
Step 2: Name your function, set it to “Action” or “Data” and input the key you got from the Google Console
Step 3 Input a JSON file with all the parameters you are interested in
Here is a complete list of the request and the features to be returned with responses
{
“requests”:[
{
“image”:{
“source”:{
“imageUri”: “https:”
}
},
“features”: [{
“type”: “TYPE_UNSPECIFIED”,
“maxResults”: 50
},
{
“type”: “LANDMARK_DETECTION”,
“maxResults”: 50
},
{
“type”: “FACE_DETECTION”,
“maxResults”: 50
},
{
“type”: “LOGO_DETECTION”,
“maxResults”: 50
},
{
“type”: “LABEL_DETECTION”,
“maxResults”: 50
},
{
“type”: “TEXT_DETECTION”,
“maxResults”: 50
},
{
“type”: “SAFE_SEARCH_DETECTION”,
“maxResults”: 50
},
{
“type”: “IMAGE_PROPERTIES”,
“maxResults”: 50
},
{
“type”: “CROP_HINTS”,
“maxResults”: 50
},
{
“type”: “WEB_DETECTION”,
“maxResults”: 50
},
{
“type” : “PRODUCT_SEARCH”,
“maxResults”: 50
},
{
“type” : “OBJECT_LOCALIZATION”,
“maxResults”: 50
}
]
}
]
}
IMPORTANT make sure you put https: in front of the because Bubble does not store the “https:” in its URL string and it is needed for Google Vision’s API.
- Set the requested query parameter. Above it is “imageUri”: “https:”
If you need a test URL string to initialize an image with use the PictureUploader and dump the contents of PictureUpload A’s Value’s URL into a text box and copy that
Note: the URL does not have “https:”
- Check the box “Capture response headers”
- Push the “Initialize” button to initialize the API
- Scroll down to fullTextNnotation pages (list) and set it to “Ignore field”
- Now if you set the “Use As” field to Data you simply need to drop your repeating group on the page and set the “Type of Content” to <The Name of your API Function - see Step 2> and the < Feature You Want>. In my case, my function is Google Object Labels and I want labelAnnotations:
- If you set the “Use As” field to “Action” you also need to set your workflow. I have a spinner I found which I use to indicate progress, but we will ignore that.
Workflow Step 1.
For the first step of the workflow click on the workflow click on the “Click Here to Add Action” and search for your API name and function, in my case it is “Google Vision API - Google Object” and then set the imageURL to PictureUploaderA’s Value’s URL.
Workflow Step 2 click on the “Click here to add action” and search for “Scroll to” and select your repeating group.
Workflow Step 3 click on the “Click here to add action” and search for “Display List in Repeating Group”,
a. For “Element” select your repeating group.
b. For the “Data source” select the “Result of Step 1’s body response’s labelAnnotations”
If you selected other information for your repeating group then change labelAnnotations to textAnnotations, logoAnnotations or whatever you selected for your repeating group.
Now go have fun!!! Your playing with bubbles!!
