Detect Image Labels

Backend

​vision.jsw - imports the vision NPM module and exports a getLabels function which:

1. Uses secrets manager API to get credentials to Google.

2. Creates a URL for the uploaded image.

3. Sends this URL to Google vision API and returns the unique labels it detected.

​

Notes:

• we are also using lodash NPM module to simplify the code for returning unique labels.

• The secret key used in this example will not be available under your account. In order to make the example work please go to https://cloud.google.com/vision/docs/auth in order to get your own secret key and place it in the secrets manager.

​​​​

Page Elements

In our site we added the following page elements:

​

• Upload & Submit buttons - let the user upload an image.

• Image - displays the uploaded image.

• Repeater - displays the labels detected for the uploaded image.

​​

Code

In $w.onReady we added a onAfterSave event handler function that runs after the image was uploaded. The function does the following:

• Call the getLabels backend function to get the image’s labels.

• Create an array called imageLabels that holds these labels alongside a unique id for each label.

• Populates the repeater with the imageLabels array.