Seamlessly Combine Images with the snappr/libcom Cognitive Actions

24 Apr 2025
Seamlessly Combine Images with the snappr/libcom Cognitive Actions

In the realm of image processing, the ability to manipulate and combine visual assets is essential for developers looking to enhance their applications. The snappr/libcom Cognitive Actions provide a powerful toolset for developers to create stunning image composites effortlessly. One of the standout features is the Create Image Composite action, which allows you to blend a foreground image with a background image seamlessly, utilizing pixel-defined bounding box coordinates.

Prerequisites

Before diving into the Cognitive Actions, ensure you have the following:

  • An API key for the Cognitive Actions platform.
  • Basic familiarity with making HTTP requests and handling JSON data.

Authentication typically involves passing your API key in the request headers, ensuring secure access to the Cognitive Actions.

Cognitive Actions Overview

Create Image Composite

The Create Image Composite action enables you to create a seamless composite layout by combining a foreground image with a background image. This action is particularly useful for applications in design, advertisement, or any context where visual storytelling is essential.

Input

The input for the Create Image Composite action requires the following fields:

  • boundingBox (string): Represents the coordinates of the bounding box in the format 'x1,y1,x2,y2'. The coordinates are pixel positions that define where the foreground image will be placed.
  • backgroundImage (string): A URI pointing to the background image that will serve as the base layer for the composite.
  • foregroundImage (string): A URI pointing to the foreground image that will be layered on top of the background.

Here’s an example of the input JSON payload:

{
  "boundingBox": "500, 2500, 2500, 4000",
  "backgroundImage": "https://replicate.delivery/pbxt/KTi4mAtqpoJ5oJqsNPycpub0O9EW7nmawPw40PNrW2YoBq5T/japandi-style-conceptual-interior-empty-room-2023-11-27-05-22-30-utc%202.jpg",
  "foregroundImage": "https://replicate.delivery/pbxt/KTi4mAlKXmSfUdDWrFPpGiJk6u8JfnoZG7B0LdVKXW2zE7qM/fredericia-spanish-lounge-chair_580x.jpg"
}

Output

Upon successful execution, the action returns an array of URIs pointing to the newly created composite images. For example:

[
  "https://assets.cognitiveactions.com/invocations/c9584240-435e-4012-b15a-afa47c53b17e/fde6ca1c-2dfd-401a-be6f-58a654cdfdd7.jpg",
  "https://assets.cognitiveactions.com/invocations/c9584240-435e-4012-b15a-afa47c53b17e/6bda843d-a219-4eca-affd-183b5279f6b6.jpg"
]

This output contains the URLs for the composite images that you can use directly in your application.

Conceptual Usage Example (Python)

Here's a conceptual Python snippet demonstrating how to call the Create Image Composite action:

import requests
import json

# Replace with your Cognitive Actions API key and endpoint
COGNITIVE_ACTIONS_API_KEY = "YOUR_COGNITIVE_ACTIONS_API_KEY"
COGNITIVE_ACTIONS_EXECUTE_URL = "https://api.cognitiveactions.com/actions/execute" # Hypothetical endpoint

action_id = "8d21baf8-6ca2-4a10-b80d-5e20e1bbe18a" # Action ID for Create Image Composite

# Construct the input payload based on the action's requirements
payload = {
    "boundingBox": "500, 2500, 2500, 4000",
    "backgroundImage": "https://replicate.delivery/pbxt/KTi4mAtqpoJ5oJqsNPycpub0O9EW7nmawPw40PNrW2YoBq5T/japandi-style-conceptual-interior-empty-room-2023-11-27-05-22-30-utc%202.jpg",
    "foregroundImage": "https://replicate.delivery/pbxt/KTi4mAlKXmSfUdDWrFPpGiJk6u8JfnoZG7B0LdVKXW2zE7qM/fredericia-spanish-lounge-chair_580x.jpg"
}

headers = {
    "Authorization": f"Bearer {COGNITIVE_ACTIONS_API_KEY}",
    "Content-Type": "application/json"
}

try:
    response = requests.post(
        COGNITIVE_ACTIONS_EXECUTE_URL,
        headers=headers,
        json={"action_id": action_id, "inputs": payload} # Hypothetical structure
    )
    response.raise_for_status() # Raise an exception for bad status codes (4xx or 5xx)

    result = response.json()
    print("Action executed successfully:")
    print(json.dumps(result, indent=2))

except requests.exceptions.RequestException as e:
    print(f"Error executing action {action_id}: {e}")
    if e.response is not None:
        print(f"Response status: {e.response.status_code}")
        try:
            print(f"Response body: {e.response.json()}")
        except json.JSONDecodeError:
            print(f"Response body: {e.response.text}")

In this code snippet, replace YOUR_COGNITIVE_ACTIONS_API_KEY with your actual API key. The action ID is set to the ID for the Create Image Composite action, and the input payload is structured according to the specifications.

Conclusion

The Create Image Composite action within the snappr/libcom Cognitive Actions offers a straightforward way to enhance your applications with image processing capabilities. By efficiently layering images, you can create visually appealing content that engages users. Explore this action further and consider how it can be integrated into your projects for innovative visual solutions.

← Back to All Articles