AI Image Editor

Installing with Maven

<dependency>
  <groupId>info.magnolia.ai.image</groupId>
  <artifactId>magnolia-ai-accelerator-image-editor</artifactId>
  <version>2.2.1</version>
</dependency>

Setup

To activate the feature:

Go to the <light-module-folder>/<light-module-name>/decorations/assets/apps/dam.yaml file in your project.

Ensure that you have the following in the file:

<light-module-folder>/<light-module-name>/decorations/assets/apps/dam.yaml

subApps:
  jcrBrowser:
    actions:
      aiImageEditor:
        label: AI Edit Asset
        $type: openDetailSubappAction
        icon: icon-add-item
        appName: dam
        subAppName: aiImageEditor
        availability:
          root: true
          writePermissionRequired: true
          rules:
            notDeleted:
              $type: jcrIsDeletedRule
              negate: true
    actionbar:
      sections:
        asset:
          groups:
            generate:
              items:
                - name: aiImageEditor
        root:
          groups:
            generate:
              items:
                - name: aiImageEditor
  aiImageEditor:
    class: info.magnolia.ai.image.editor.AiAcceleratorImageEditorSubAppDescriptor
    label: AI Image Editor

Ensure models for image generation and image manipulation are installed and correctly setup. For example ai-accelerator-fal-ai.

Configuration

Tools

New tools can be added to the AI Image Editor through light-development.

To add a new tool add it to the folder <light-module-folder>/<light-module-name>/aiImageEditorTools/

A tool has the following properties:

enabled: (1)
label: (2)
icon:
  iconType: (3)
  value: (4)
taskId: (5)
taskType: (6)

1	Optional parameter which can be used to disable a tool. Disabled tools are not displayed.
2	The label of the tool
3	The icon-type. Possible values are: `svg`, `internal`.
4	For icon-type `svg` just provide the icon as SVG string. For type `internal` the following internal icons are available: `removeBackground` `generateImage`
5	The id of the task to be executed, if not provided the `taskType` is used
6	A task type. If provided the user can select a concrete task to be executed. If only one task of the type exists it will be selected automatically.

Tools Panel

The tools availability and grouping in the central tools-panel can be configured through decorations in the file <light-module-folder>/<light-module-name>/decorations/ai-accelerator-image-editor/config.yaml.

Below the actual conditions and tools:

toolsPanel:
  groups: (1)
    - id: <tool-id>
      items:
        - id: <any-id>
          toolId: <tool-id> (2)
          alternatives: (3)
            - id: <any-id>
              toolId: <tool-id>

1	Groups have a separation space between them.
2	tool to be executed on click. Either use an internal tool a custom tool. The following internal tools are available: `undo` `redo` `select` `move` `rotate` `crop` `removeBackground` `generateImage`
3	Alternative tools. If provided the user can choose between the main tool or any alternative.

Example: Change selection tools

There are two selection tools available. By default, selection happens by bounding boxes. As alternative pixel based selection can be used where clicks on opaque pixels are use for object selection. To remove the pixel based selection option you can decorate the config for the tools panel where you remove the alternative:

toolsPanel:
  groups:
    - id: undoRedo
      items:
        - id: undo
          toolId: undo
        - id: redo
          toolId: redo
    - id: execute
      items:
        - id: select
          toolId: select
          #alternatives: (1)
          #  - id: selectByPixel
          #    toolId: selectByPixel
        - id: move
          toolId: move
        - id: rotate
          toolId: rotate
        - id: crop
          toolId: crop
    - id: imageManipulation
      items:
        - id: generateImage
          toolId: generateImage
        - id: removeBackground
          toolId: removeBackground

1	Remove the lines commented out here to remove the alternative pixel based selection option.

Example - Create Cat Images

With the following example we add a custom tool that allows to generate cat images. The given example assumes the module ai-accelerator-fal-ai is installed and uses the model flux1dev.

First we need to have a task that generates cat images. Create the file <light-module-folder>/<light-module-name>/aiTasks/createCatImage.yaml with the content:

$type: generateImageTask
name: Generate Image of a cat

input:
  prompt:
    $type: prompt
    required: true
    defaultValue: "A cat"
    hidden: true
  width:
    $type: number
  height:
    $type: number
  numImages:
    $type: number

output:
  images:
    $type: base64EncodedImage

modelId: flux1dev

modelAdapters:
  flux1dev:
    input:
      image_size:
        value: |
          {
            "width": $.input.width,
            "height": $.input.height
          }
      num_images:
        value: $.input.numImages
    output: ## this key reflects the task output
      images:
        mapper:
          $type: listItemMapper
          mapper:
            $type: imageUrlToBase64EncodedImage
        value: $.output.images # the var behind $. is the model output

As you can seethe prompt is hidden and has a default value. With this the user cannot change the prompt. As we here have no required parameters left the user will need to pass any parameters.

Then create the file for the tool definition: <light-module-folder>/<light-module-name>/aiImageEditorTools/createCatImage.yaml with the following content:

label: "Create a cat image"
icon:
  iconType: svg
  value: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 192l17.1 0c22.1 38.3 63.5 64 110.9 64c11 0 21.8-1.4 32-4l0 4 0 32 0 192c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-140.8L280 448l56 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-144 0c-53 0-96-43-96-96l0-223.5c0-16.1-12-29.8-28-31.8l-7.9-1c-17.5-2.2-30-18.2-27.8-35.7s18.2-30 35.7-27.8l7.9 1c48 6 84.1 46.8 84.1 95.3l0 85.3c34.4-51.7 93.2-85.8 160-85.8zm160 26.5s0 0 0 0c-10 3.5-20.8 5.5-32 5.5c-28.4 0-54-12.4-71.6-32c0 0 0 0 0 0c-3.7-4.1-7-8.5-9.9-13.2C357.3 164 352 146.6 352 128c0 0 0 0 0 0l0-96 0-20 0-1.3C352 4.8 356.7 .1 362.6 0l.2 0c3.3 0 6.4 1.6 8.4 4.2c0 0 0 0 0 .1L384 21.3l27.2 36.3L416 64l64 0 4.8-6.4L512 21.3 524.8 4.3c0 0 0 0 0-.1c2-2.6 5.1-4.2 8.4-4.2l.2 0C539.3 .1 544 4.8 544 10.7l0 1.3 0 20 0 96c0 17.3-4.6 33.6-12.6 47.6c-11.3 19.8-29.6 35.2-51.4 42.9zM432 128a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm48 16a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"/></svg>
taskId: "<light-module-name>:createCatImage"

Then configure the ToolPanel and make it include the new tool with the config <light-module-folder>/<light-module-name>/decorations/ai-accelerator-image-editor/config.yaml

toolsPanel:
  groups:
    imageManipulation:
      items:
        createCatImage:
          toolId: createCatImage

This will result in a new tool visible in the tools-panel:

Text configuration

You can configure default fonts and font properties with text configuration.

textConfig:
  defaultFont: OpenSans (1)
  defaultTextColor: "#000000" (2)
  fonts: (3)
     OpenSans: (4)
       label: Open Sans
       value: Open Sans
       url: "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       weights: (5)
         - label: "Light"
           value: 300
         - label: "Regular"
           value: 400
         - label: "Semi Bold"
           value: 600
         - label: "Bold"
           value: 700
    Lora: (6)
      label: Lora
      value: Lora
      url: /<light-module-name>/Lora-VariableFont_wght.ttf

1	Define the default font to be used. The font must be part of the `fonts` list.
2	Define the default text color. Remember to add `"` because the `#` character for hex colors are treated as `.yaml` comments otherwise.
3	List of fonts.
4	You can reference a hosted font served by a CDN.
5	Provide font weights.
6	You can also use a local font file provided as part of the light-module.

Colors

You can also configure colors.

colorConfig:
    colorSwatches: (1)
        green: "#2c420a"
        red: "#FF0000"
        transRed: "#FF000033" (2)
    defaultShapeColor:  "#2c420a" (3)
    defaultBorderColor:  "#2c420a" (4)

1	Use solid or transparent colors.
2	Define your brand color as swatches so they are directly selectable in the color-picker.
3	Default shape color that is applied when creating a new shape.
4	Default border color that is applied when creating a new shape.