Connecting AI tools

Handy Editor supports advanced image processing capabilities by integrating with third-party AI services. These integrations allow you to:

• Remove backgrounds from images (including complex or animated backgrounds)
• Upscale images while preserving or recreating details
• Vectorize raster images (useful for logos or vector-based illustrations)
• Generate images from text prompts (text-to-image)

This guide explains how to enable and configure these AI features in your Handy Editor instance.

Supported AI Operations

You can enable one or more of the following AI features for your users:

Operation	Description	Supported Vendors
Background Removal	Removes the background from images, leaving only the main subject. Ideal for logos or photos where the subject needs isolation.	Picsart, RemoveBg, CutoutPro
Upscale	Improves image resolution while maintaining or enhancing visual quality. Useful for low-quality uploads.	Picsart
Vectorize	Converts raster images (PNG, JPEG) into scalable vector formats. Ideal for logos or illustrations.	Vectorizer.AI
Text-to-Image	Generates new images based on text prompts.	OpenAI

How It Works

To use these features, follow these steps:

1. Obtain an API Key

   Each vendor has its own terms and pricing model (usually credit-based). Purchase credits from your chosen provider, as each API call (image processing) consumes credits.

2. Connect the Vendor in Customer's Canvas

   Configure the vendor's API credentials in Settings > Image Operations as described in the Admin Guide.

3. Enable the Feature in Handy Editor

   Add the corresponding configuration to the itemTools section of your Handy Editor settings. See the Configuration Examples below.

4. (Optional) Use ImageProcessingHub API

   For external image processing outside the editor, you can use the ImageProcessingHub API as a proxy.

Configuration Examples

Background Removal

Step 1: Choose a Vendor

Select a vendor based on your needs:

• Picsart: Multi-purpose, cost-effective.
• RemoveBg: Specializes in high-quality background removal.
• CutoutPro: Ideal for isolating faces or complex subjects.

Step 2: Connect the Vendor

In Settings > Image Operations > Remove Background, add the vendor and enter your API key. Refer to the Admin Guide for details.

Step 3: Enable in Handy Editor

Add the following to your itemTools configuration:

{
    "settings": {
        "itemTools": {
            "backgroundRemoval": {
                "enabled": true,
                "vendor": "Picsart"
            }
        }
    }
}

• enabled: Toggles the Background Removal button in the editor. Default: false.
• vendor: Specifies the AI service provider. Default: Uses the tenant-wide setting.

Vectorize

Step 1: Connect Vectorizer.AI

1. Obtain an API key from Vectorizer.AI.
2. In Settings > Image Operations > Vectorize, add the vendor and enter your API key.

Step 2: Enable in Handy Editor

Add the following configuration:

{
    "settings": {
        "itemTools": {
            "vectorize": {
                "enabled": true,
                "vendor": "VectorizerAi"
            }
        }
    }
}

• enabled: Toggles the Vectorize button. Default: false.
• vendor: Specifies the service provider. Only "VectorizerAi" is supported.

Upscale

Step 1: Connect Picsart

1. Obtain an API key from Picsart.
2. In Settings > Image Operations > Upscale, add the vendor and enter your API key.

Step 2: Enable in Handy Editor

Add the following configuration:

{
    "settings": {
        "itemTools": {
            "upscale": {
                "enabled": true,
                "vendor": "Picsart"
            }
        }
    }
}

• enabled: Toggles the Upscale button. Default: false.
• vendor: Specifies the service provider. Only "Picsart" is supported.

Text-to-Image

To enable Text-to-Image generation in Handy Editor, configure the textToImage section under assetLibrary.images in your settings.

Step 1: Connect a Vendor

1. Obtain an API key from a supported vendor:
   • OpenAI
   • Picsart
2. In Settings > Image Operations > Generate by Text, add the vendor and enter your API key. Refer to the Admin Guide for details.

Step 2: Enable in Handy Editor

Add the following configuration to enable the Text-to-Image tool in the Asset Library:

{
    "settings": {
        "assetLibrary": {
            "images": {
                "enabled": true,
                "textToImage": {
                    "enabled": true,
                    "vendor": "OpenAi"
                }
            }
        }
    }
}

• enabled: Toggles the Text-to-Image tool in the Asset Library. Default: false.
• vendor: Specifies the AI service provider. Available values: "OpenAi", "Picsart". Default: Uses the tenant-wide setting.

How It Works

Once enabled, users can:

1. Open the Asset Library in Handy Editor.
2. Switch to the Images tab.
3. Use the Text-to-Image tool to enter a prompt and generate an image.

ImageProcessingHub API Example

You can use the ImageProcessingHub API to process images outside the editor. The following example shows how you can upscale images with the endpoint POST /api/image-processing-hub/v1/upscale/to-resource.

cURL

curl -X POST \
  "https://api.customerscanvashub.com/api/image-processing-hub/v1/upscale/to-resource?tenantId=123&vendor=Picsart&resourceParams.ownerId=user123&resourceParams.namespace=default&resourceParams.name=upscaled-image&resourceParams.type=image/png&resourceParams.anonymousAccess=true&resourceParams.overwriteExisting=true" \
  -H "accept: application/json" \
  -H "Authorization: Bearer <YOUR_TOKEN>" \
  -H "Content-Type: multipart/form-data" \
  -F "sourceFile=@/path/to/your/image.jpg"

HTTP

POST https://api.customerscanvashub.com/api/image-processing-hub/v1/upscale/to-resource?tenantId=123&vendor=Picsart&resourceParams.ownerId=user123&resourceParams.namespace=default&resourceParams.name=upscaled-image&resourceParams.type=image/png&resourceParams.anonymousAccess=true&resourceParams.overwriteExisting=true
Authorization: Bearer <YOUR_TOKEN>
Content-Type: multipart/form-data

sourceFile=@/path/to/your/image.jpg

C#

// Initialize the API client
var apiClient = new ImageProcessingHubApiClient();

// Upscale and save as a resource
var result = await apiClient.UpscaleAsync(
    tenantId: 123,
    vendor: UpscaleVendorType.Picsart,
    sourceFile: new FileParameter(File.OpenRead("/path/to/your/image.jpg"), "image.jpg"),
    resourceParams_ownerId: "user123",
    resourceParams_namespace: "default",
    resourceParams_name: "upscaled-image",
    resourceParams_type: "image/png",
    resourceParams_anonymousAccess: true,
    resourceParams_overwriteExisting: true,
    cancellationToken: CancellationToken.None
);

TS

// Initialize the API client
const apiClient = new ImageProcessingHubApiClient();

// Upscale and save as a resource
const result = await apiClient.upscale(
    123, // tenantId
    UpscaleVendorType.Picsart, // vendor
    { file: new Blob([await (await fetch('/path/to/your/image.jpg')).arrayBuffer()]), fileName: 'image.jpg' }, // sourceFile
    'user123', // resourceParams_ownerId
    'default', // resourceParams_namespace
    'upscaled-image', // resourceParams_name
    undefined, // resourceParams_sourceId
    'image/png', // resourceParams_type
    true, // resourceParams_anonymousAccess
    true // resourceParams_overwriteExisting
).toPromise();

// Example response
/*
{
  "url": "https://example.com/resources/upscaled-image",
  "resourceId": "res_123456",
  "operationType": "Upscale",
  "vendorType": "Picsart",
  "isTestModeUsed": false
}
*/

Troubleshooting

• Button Not Appearing?

  Ensure the feature is enabled in both Settings > Image Operations and the itemTools configuration.

• API Errors?

  Verify your API key and vendor settings in Settings > Image Operations. Check your credit balance with the vendor.

• Performance Issues?

  Consider setting usage limits to control API consumption.