Auto Image Tagging with Contentstack Webhooks, AWS Lambda, and AWS Rekognition

Asset’s tag in Contentstack lets you categorize and filter assets such as images, videos, PDFs, etc. Adding tags to an image in Contentstack is a manual process currently. However, you can eliminate this manual process by using the auto-image tagging technique which generates relevant tags for an image automatically.

In Contentstack, we can do this by using Contentstack webhooks, AWS Lambda, and AWS Rekognition. So, whenever you upload or update an image in Contentstack, the associated tags for the image get generated automatically.

Overview of the process: We will set up a system such that when an image is created or updated in Contentstack, a webhook will be triggered. This webhook will call the AWS Lambda function via the AWS API gateway. The lambda function will interact with the AWS Rekognition service to get relevant tags for the image, and then update the image’s tags in Contentstack via Content Management API request.

Steps for Execution

Here are the steps to set up image auto-tagging:

  1. Create Management Token in Contentstack
  2. Create AWS Lambda function
  3. Create API Gateway
  4. Set up Webhooks in Contentstack
  5. Try out the Setup

Pre-requisites

  1. Create Management Token in Contentstack

    To move ahead with the process of image auto-tagging, you need a management token in your stack. Create a management token by logging in to your contentstack account and following the steps specified in the Generate Management Token guide.

    Note: Make a note of your stack’s API key as you’ll need it while setting up the Lambda function in AWS. You’ll get this API key on your management token’s details page.

    Now that you have set up your Contentstack account, let’s proceed to create an AWS Lambda function.

  2. Create AWS Lambda function

    For the AWS Rekognition service to communicate with images in Contentstack, you need to create an AWS Lambda function by performing the following steps:

    1. Go to your AWS account and from the Services dropdown menu at the header, select Lambda.
    2. On the Functions page, click on Create function.
    3. Next, on the Create function page, provide a name for the function, select any relevant version of Node from the Runtime dropdown menu, and click the Create function button. create-function-screen.png
      This action will open your function’s page.
    4. Next, you’ll need to upload a code for your function. To do so, AWS Lambda offers an inline code editor. You can write your lambda code here or alternatively upload the code. We have created a sample code for this exercise.

      Contact our Support team to get the code.
    5. Once you download the code, navigate to the Code source section on your function’s page, select the .zip file option from the Upload from the dropdown menu, and upload the index.zip file present in the root of the downloaded code folder.
    6. To set up environment variables, go to the Configuration tab and click on the Environment variables option, and click the Edit button as shown in the image below:
      add-env-variables.png
    7. Then, click on the Add environment variable button, and add the environment variables as follows:
      1. REKOGNITION_AWS_ID = {access_id_of_aws_user}
      2. REKOGNITION_AWS_REGION = {aws_region}
      3. REKOGNITION_AWS_SECRET = {access_key_of_the_aws_user}
      4. MIN_CONFIDENCE = {minimum_confidence_of_tag} (default is 70)
      5. MAX_TAGS = {maximum_tags_per_image} (default is 10)
      6. CONTENTSTACK_STACK_MANAGEMENT_TOKEN= {stack_management_token_value}
      7. CONTENTSTACK_STACK_API_KEY= {stack_api_key}

    8. Save the environment variables.

      Note: Make sure the Handler of this Lambda function is index.handler. You can locate Handler in the Runtime settings section on the function page.

    Now let’s proceed to create API Gateway

  3. Create API Gateway

    For Contentstack to communicate with Lambda function via webhooks, you’ll need an URL, which you can create by performing the following steps:

    1. On your Lamba function’s page, navigate to the Function overview section, and click the + Add trigger button.
    2. Select API Gateway from the Trigger Configuration dropdown menu and then select Create an API from the API dropdown menu.
    3. Choose API type as HTTP API and select Security as Open.
    4. Save the configuration.
    5. You’ll be redirected to the Trigger section, where you need to expand the Details link, and you will see the API endpoint URL. Make note of this URL as you’ll need it while creating a webhook in Contentstack.
      API-gateway.png

    Next, you will create a webhook in Contentstack and add this API endpoint URL to it.

  4. Set up Webhooks in Contentstack

    Create a webhook in Contentstack by performing the following steps:

    1. Go to your stack, hover over the “Settings” gear icon, and click on Webhooks.
    2. Click on + New Webhook
    3. On the Create Webhook page, enter a name for the webhook. In the URL to notify field, enter the API Endpoint URL generated in Step 3.
    4. Scroll down to the When section for creating a trigger for the webhook as shown below:
      auto_image_tagging.png
    5. Save the webhook.

    Note: Ensure the Enable Webhook option is selected.

  5. Try out the Setup

    Finally, try out the setup by either adding or updating an image in Contentstack. After you add/update an image, you’ll see its associated tags on your asset’s details page as shown in the image below:

    asset-page.png

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^