Modules

This guide will demonstrate how to embed our Text to Image and Edit Image modules in your own application.

createImageFromText()

The module class contains all the methods for launching quick action editors. The createImageFromText() API is powered by Adobe Firefly.

// Initialize the SDK first
const { module} = await ccEverywhere.initialize(); 
module.createImageFromText(); 
Copied to your clipboard
// Initialize the SDK first
const { module} = await ccEverywhere.initialize(); 
module.createImageFromText();

TextToImageParams

All the properties in this object are optional.

Property	Type	Description
appConfig	TextToImageAppConfig	Pass a text prompt to preload in the text to image editor
exportConfig	ExportOptions[]	Configure export options. If no export options are specified, the editor falls back to the default layout options.
containerConfig	ContainerConfig	Properties to configure the SDK container

editImage()

This API launches an iframe that allows users to continue editing an image in a modal. Instead of the entire Express editing experience, this module only loads relevant image-editing capabilities.

// Initialize the SDK first
const { module} = await ccEverywhere.initialize(); 
module.editImage(docConfig); 
Copied to your clipboard
// Initialize the SDK first
const { module} = await ccEverywhere.initialize(); 
module.editImage(docConfig);

The only required property is docConfig.

Property	Type	Description
docConfig	EditImageDocConfig	Pass an asset to preload into the Edit Image module
appConfig	BaseEditorAppConfig	Pass callback functions
exportConfig	ExportOptions[]	Configure export options. If no export options are specified, the editor falls back to the default layout options.
containerConfig	ContainerConfig	Properties to configure the SDK container

Example: Create image from text

The following code will invoke the text-to-image module. In this example, we pass a string to be used as a prompt. If that field is left empty, the user will be prompted to input a prompt once the modal is open.

// Initialize the SDK first
const { module} = await ccEverywhere.initialize(hostInfo); 
let appConfig = {
    promptText: "Aliens sitting in lawn chairs"
}
module.createImageFromText(appConfig);
Copied to your clipboard
// Initialize the SDK first
const { module} = await ccEverywhere.initialize(hostInfo); 
let appConfig = {
    promptText: "Aliens sitting in lawn chairs"
}
module.createImageFromText(appConfig);

Example: Edit Image

The following code will invoke the Edit Image module.

// Initialize the SDK first
const { module } = await ccEverywhere.initialize(hostInfo); 
let docConfig = {
    asset: {
        data: 'replace-with-base64-encoded-asset',
        dataType: 'base64',
        type: 'image' 
    },
};

const exportOptions = [{
    type: 'continue-editing',
    label: 'Continue Editing',
    style: {
        uiType: 'button'
    },
    options: [
        {
            id: 'exportOption3',
            style: {
                uiType: 'dropdown'
            },
            action: {
                target: 'image-module',
                intent: 'remove-background'
            }
        },
        {
            id: 'exportOption4',
            style: {
                uiType: 'dropdown'
            },
            action: {
                target: 'express',
                intent: 'add-images'
            }
        },
        {
            id: 'exportOption5',
            style: {
                uiType: 'dropdown'
            },
            action: {
                target: 'express',
                intent: 'add-text'
            }
        }
    ]
}];
module.editImage(docConfig, exportOptions);
Copied to your clipboard
// Initialize the SDK first
const { module } = await ccEverywhere.initialize(hostInfo); 
let docConfig = {
    asset: {
        data: 'replace-with-base64-encoded-asset',
        dataType: 'base64',
        type: 'image' 
    },
};

const exportOptions = [{
    type: 'continue-editing',
    label: 'Continue Editing',
    style: {
        uiType: 'button'
    },
    options: [
        {
            id: 'exportOption3',
            style: {
                uiType: 'dropdown'
            },
            action: {
                target: 'image-module',
                intent: 'remove-background'
            }
        },
        {
            id: 'exportOption4',
            style: {
                uiType: 'dropdown'
            },
            action: {
                target: 'express',
                intent: 'add-images'
            }
        },
        {
            id: 'exportOption5',
            style: {
                uiType: 'dropdown'
            },
            action: {
                target: 'express',
                intent: 'add-text'
            }
        }
    ]
}];
module.editImage(docConfig, exportOptions);