Imagga for Directus

This is a Directus hook for file uploads to automatically tag images with Imagga API.

• npm package : @bicou/directus-extension-imagga
• ✨  Release Notes

Requirements

This extension requires Directus 10 or higher to be installed.

Installation

Add @bicou/directus-extension-imagga dependency to your directus project.

# Using pnpm
pnpm add @bicou/directus-extension-imagga
# Using yarn
yarn add @bicou/directus-extension-imagga
# Using npm
npm install @bicou/directus-extension-imagga

Usage

Configure the extension with environment variables (in a .env file for example) :

Authorization

The credentials are available in your Imagga user dashboard.

| Key | Description | | --------------- | ---------------------------------------- | | IMAGGA_KEY | Imagga API key on your user dashboard | | IMAGGA_SECRET | Imagga API secret on your user dashboard |

Configuration

Tags service

Automatically suggest textual tags from images.

| Key | Description | Default | | ----------------------- | ------------------------------------------------ | ------------- | | IMAGGA_TAGS_ENABLE | enables auto tagging | true | | IMAGGA_TAGS_LIMIT | limits the number of tags in the result | -1 (no limit) | | IMAGGA_TAGS_THRESHOLD | thresholds the confidence of tags in the result | 0.0 | | IMAGGA_TAGS_LANGUAGE | get a translation of the tags in other languages | en |

Please refer to Imagga Tags API documentation for more information.

Colors service

Analyse and extract the predominant colors from images.

| Key | Description | Default | | ---------------------- | ------------------------- | ------- | | IMAGGA_COLORS_ENABLE | enables colors extraction | false |

Please refer to Imagga Colors API documentation for more information.

Demo

An example of an image uploaded in the file library of Directus whose tags are automatically filled in :

Play screencast video

Results

Tags

The result is stored as an array of strings in the directus_files.tags field.

{
  "tags": ["lake", "boathouse", "lakeside", "mountain", "shore", /*...*/]
}

Colors

The result is stored under the colors key of the directus_files.metadata field.

{
  "colors": {
    "background": [
      { "r": 25, "g": 40, "b": 36, "html_code": "#192824", "percent": 55.2785682678223 }, // ...
    ],
    "foreground": [
      { "r": 92, "g": 88, "b": 92, "html_code": "#5c585c", "percent": 41.5135154724121 }, // ...
    ],
    "image": [
      { "r": 24, "g": 36, "b": 34, "html_code": "#182422", "percent": 43.4364776611328 }, // ...
    ]
  }
}

License

This extension is released under the MIT license. See the LICENSE file for more details.