Skip to content

Commit

Permalink
IBX-8689: AI Actions
Browse files Browse the repository at this point in the history
  • Loading branch information
dabrt committed Sep 30, 2024
1 parent 935bda3 commit 39cef41
Show file tree
Hide file tree
Showing 14 changed files with 244 additions and 53 deletions.
23 changes: 23 additions & 0 deletions docs/ai/ai_actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---

Check warning on line 1 in docs/ai/ai_actions.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/ai/ai_actions.md#L1

[Ibexa.ReadingLevel] The grade level is 12.40. Aim for 8th grade or lower by using shorter sentences and words.
Raw output
{"message": "[Ibexa.ReadingLevel] The grade level is 12.40. Aim for 8th grade or lower by using shorter sentences and words.", "location": {"path": "docs/ai/ai_actions.md", "range": {"start": {"line": 1, "column": 1}}}, "severity": "WARNING"}
description: Learn about generative AI and its capabilities.
---

# AI Actions

AI Actions is a powerful set of capabilities designed to enhance the efficiency and creativity of content editors.
With AI Actions, editors can streamline their workflow, making content creation faster while enabling new levels of creativity.

Check warning on line 8 in docs/ai/ai_actions.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/ai/ai_actions.md#L8

[Ibexa.EOLWhitespace] Remove whitespace characters from the end of the line.
Raw output
{"message": "[Ibexa.EOLWhitespace] Remove whitespace characters from the end of the line.", "location": {"path": "docs/ai/ai_actions.md", "range": {"start": {"line": 8, "column": 128}}}, "severity": "WARNING"}
AI Actions are not included by default in [[= product_name =]].
It's an add-on to the product and requires separate installation and configuration by the system administrator.
For more information about installing and configuring AI Actions, see [developer documentation]([[= developer_doc =]]/generative_ai/ai_actions/).

Once AI Actions are installed and configured, content editors gain access to a variety of AI-driven tools.
Depending on the options selected during configuration, the AI Assistant can assist editors in multiple ways.
For example, editors can use the AI to [enhance or improve the text](create_edit_content_items.md#ai-assistant) that they have written.
AI can also [generate alternative text](upload_images.md#ai) for images.
This alternative text is later used by screen readers and other assistive technologies to provide descriptions of images to users who cannot see.

![AI Assistant](ai_assistant.png)

If you have sufficient permissions, you can control which specific AI Actions capabilities are made available to content editors.
If you have sufficient permissions, you can decide what capabilities are available to the editors by [configuring AI actions](work_with_ai_actions.md).
You do it by configuring the settings of individual AI actions, where you can enable or disable certain features based on the needs of your editorial team.
Binary file added docs/ai/image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/ai/img/ai_action_details.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/ai/img/ai_action_options.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/ai/img/ai_actions_list.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/ai/img/ai_assistant.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 92 additions & 0 deletions docs/ai/work_with_ai_actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
---

Check warning on line 1 in docs/ai/work_with_ai_actions.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/ai/work_with_ai_actions.md#L1

[Ibexa.ReadingLevel] The grade level is 7.78. Aim for 8th grade or lower by using shorter sentences and words.
Raw output
{"message": "[Ibexa.ReadingLevel] The grade level is 7.78. Aim for 8th grade or lower by using shorter sentences and words.", "location": {"path": "docs/ai/work_with_ai_actions.md", "range": {"start": {"line": 1, "column": 1}}}, "severity": "WARNING"}
description: Create new AI actions of modify existing ones to work faster and increase creativity.
---

# Work with AI actions

AI actions define what actions are available in AI-enabled areas, such as, for example, the AI Assistant.
If the AI Actions add-on has been installed and configured in your application, and you have sufficient permissions, you can reconfigure the existing AI actions, and create new ones.

For more information about the AI-related capabilities, see [AI Actions](ai_actions.md).

## View AI actions

If you have Administrator permissions, you can view all AI actions configured in the application by navigating to the Admin Panel and selecting **AI actions**.
List entries are ordered by creation date.

![AI actions in Admin Panel](img/ai_actions_list.png)

You can narrow down the list of AI actions by filtering it by the status, either Available or Unavailable, or by the type.
Out of the box, there are two types of AI Actions present in the system:

- **Refine text** - used primarily in [online editor](create_edit_content_items.md#ai-assistant) for performing text-to-text actions, for example: "Rewrite text in formal tone"
- **Generate alternative text** - used in the [image asset editing screen](upload_images.md#ai) to perform image-to-text actions, for example: "Generate short alternative description of an image"

!!! note "Custom action types"

In your specific case the types available can be different, and your organization's development team can create custom AI action types.
For more information, see [developer documentation]([[= developer_doc =]]/ai_actions/).

### View AI action details

Navigate to the Admin Panel and select **AI actions**.
In the **AI actions** list, click the name of an AI action to review its details.
For example, in the **Action type options** tab, you can see specific parameters that modify the prompt that is sent to an AI service.

![AI action details](img/ai_action_details.png)

## Edit existing AI action

To suit your specific needs, you can modify the default AI actions.

1\. Navigate to the Admin Panel and select **AI actions**.

2\. In the **AI actions** list, click the **Edit** icon next to a name of the AI action that you want to modify.

3\. In the **Global properties** section, you can change the name and description of the AI action. You can also toggle the availability of the AI action between disabled and enabled.

4\. In the **Action options** area, change the settings that modify the behavior of an AI service that responds to an AI action, for example:

- **Prompt** - modifies the default request by passing a verbal command, for example, "Make it short and formal."
- **Max tokens** - sets a maximum number of "[words](https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them)" that can be processed in a single request
- **Temperature** - controls the randomness of the response. The higher the temperature, the more creative is the output

![AI action options](img/ai_action_options.png)

5\. Click **Save and close** to apply the changes or **Discard** to discard them and close the window.

## Create new AI actions

You can create AI actions that perform actions of different types.
You can also create AI actions that perform the same type of actions but use different models.

!!! note "AI action models"

Before you can work with AI actions, models must be configured and enabled by your organization's development team.
For more information, see [developer documentation]([[= developer_doc =]]/ai_actions/).

1. Navigate to the Admin Panel and select **AI actions**.

1. In the **AI actions** list, click **Create**.

1. In the slide-out pane, make initial choices in the following fields, and click **Create**:

- **Language** - sets the base language for the AI action
- **Action type** - sets an action type to serve as a template for the AI action, for example, **Refine action**
- **Model** - sets the AI model used to process the requests resulting from this AI action

1. In the **Global properties** section, you set the name and identifier of the AI action.

1. Optionally, provide a description of the AI action.

1. When ready, set the status of the AI action to enabled.

1. In the **Action options** area, change the settings that control the behavior of an AI service that responds to an AI action, for example:

- **Length** - in AI actions of text-to-text type, it can sets a maximum length of the output

Check warning on line 86 in docs/ai/work_with_ai_actions.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/ai/work_with_ai_actions.md#L86

[Ibexa.EOLWhitespace] Remove whitespace characters from the end of the line.
Raw output
{"message": "[Ibexa.EOLWhitespace] Remove whitespace characters from the end of the line.", "location": {"path": "docs/ai/work_with_ai_actions.md", "range": {"start": {"line": 86, "column": 98}}}, "severity": "WARNING"}
- **Prompt** - modifies the default request by passing a verbal command, for example, "Make it sound funny."
- **Max tokens** - sets a maximum number of "[words](https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them)" that can be processed in a single request
- **Temperature** - controls the randomness of the response. The lower the temperature, the less creative is the output

1. Click **Save and close** to apply the changes or **Discard** to discard them and close the window.

12 changes: 12 additions & 0 deletions docs/content_management/create_edit_content_items.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,8 @@ You can also add new elements to the Field. To do it, choose one of the availabl
Each of these elements can have its own settings, such as text formatting.
The option bar also lets you reorder or remove any elements in the Rich Text Field.



#### Edit embedded content items

You can edit embedded content items without leaving current window.
Expand Down Expand Up @@ -184,6 +186,16 @@ add or delete rows and columns in any part of the table, as well as merge and sp
Your installation can also have custom elements available in the Rich Text field.
Contact your website administrator about the details of using them.

### AI Assistant

If the [AI Actions](ai_actions.md) add-on has been installed and configured in your application, when writing content, you can ask the AI Assistant to perform specific tasks on your text.
For example, you can highlight a section and instruct the AI Assistant to extend the passage or adjust its tone to suit your needs.

If you have a permission to access the **Admin UI**, the **Go to AI actions** button is also visible.
By clicking it, you can quickly navigate to [AI actions configuration](work_with_ai_actions.md).

![AI Assistant](ai_assistant.png)

### SeenThis! streaming

!!! note
Expand Down
40 changes: 40 additions & 0 deletions docs/getting_started/content_tree/content_tree.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---

Check warning on line 1 in docs/getting_started/content_tree/content_tree.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/getting_started/content_tree/content_tree.md#L1

[Ibexa.ReadingLevel] The grade level is 6.83. Aim for 8th grade or lower by using shorter sentences and words.
Raw output
{"message": "[Ibexa.ReadingLevel] The grade level is 6.83. Aim for 8th grade or lower by using shorter sentences and words.", "location": {"path": "docs/getting_started/content_tree/content_tree.md", "range": {"start": {"line": 1, "column": 1}}}, "severity": "WARNING"}
description: Learn about the Content Tree.
---

# Content Tree

Content Tree is the place where you can navigate through all the content items in your application.

Check warning on line 7 in docs/getting_started/content_tree/content_tree.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/getting_started/content_tree/content_tree.md#L7

[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.
Raw output
{"message": "[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.", "location": {"path": "docs/getting_started/content_tree/content_tree.md", "range": {"start": {"line": 7, "column": 1}}}, "severity": "WARNING"}
If you want to browse your application's content items, in the main menu, go to the **Content** -> **Content structure**.
The **Content Tree** area is an expandable content menu of your website.

![Content Tree in the menu](img/left_menu_tree.png "Content Tree in the menu")

Unique icons for each content type instantly show you what type of content you are selecting. To add custom icons to your Content Tree, follow [configuration tutorial in developer documentation]([[= developer_doc =]]/administration/back_office/back_office_elements/custom_icons/#customize-content-type-icons).

Check warning on line 13 in docs/getting_started/content_tree/content_tree.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/getting_started/content_tree/content_tree.md#L13

[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.
Raw output
{"message": "[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.", "location": {"path": "docs/getting_started/content_tree/content_tree.md", "range": {"start": {"line": 13, "column": 123}}}, "severity": "WARNING"}

For more information about custom configuration, go to [Content Tree]([[= developer_doc =]]/administration/back_office/content_tree/) in developer documentation.

Win the Content Tree, hidden content is greyed out in the tree view.

Check warning on line 17 in docs/getting_started/content_tree/content_tree.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/getting_started/content_tree/content_tree.md#L17

[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.
Raw output
{"message": "[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.", "location": {"path": "docs/getting_started/content_tree/content_tree.md", "range": {"start": {"line": 17, "column": 9}}}, "severity": "WARNING"}

To simplify the Content Tree, big lists are collapsed and include a **Show more** icon.

Check warning on line 19 in docs/getting_started/content_tree/content_tree.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/getting_started/content_tree/content_tree.md#L19

[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.
Raw output
{"message": "[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.", "location": {"path": "docs/getting_started/content_tree/content_tree.md", "range": {"start": {"line": 19, "column": 17}}}, "severity": "WARNING"}

Check warning on line 19 in docs/getting_started/content_tree/content_tree.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/getting_started/content_tree/content_tree.md#L19

[Ibexa.EOLWhitespace] Remove whitespace characters from the end of the line.
Raw output
{"message": "[Ibexa.EOLWhitespace] Remove whitespace characters from the end of the line.", "location": {"path": "docs/getting_started/content_tree/content_tree.md", "range": {"start": {"line": 19, "column": 88}}}, "severity": "WARNING"}
Click it to expand the branches of the tree.
**Collapse all** option, which is available in the context menu, closes all expanded sections.

### Add folders

You can organize the tree by creating additional folders and subfolders of the **Content structure**.
The same procedure applies to other areas of the Content menu, such as **Media** or **Forms**.

1\. Go to **Content** -> **Content structure**.

2\. In the upper-right corner click **Create content**.

3\. From the available content types, select **Folder**, and click **Create**.

4\. Enter name for the new folder.

5\. (Optional) Add folder description.

6\. Click **Publish**.

The newly created folder is now visible in the Content Tree.

Check warning on line 40 in docs/getting_started/content_tree/content_tree.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/getting_started/content_tree/content_tree.md#L40

[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.
Raw output
{"message": "[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.", "location": {"path": "docs/getting_started/content_tree/content_tree.md", "range": {"start": {"line": 40, "column": 48}}}, "severity": "WARNING"}
18 changes: 5 additions & 13 deletions docs/getting_started/discover_ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ It's the default dashboard and contains selected blocks.
You can customize the dashboard by changing the blocks and the layout.
For more information, see [Work with dashboard](work_with_dashboard.md).

## Main menu
## Main menu

The main menu allows you to move between important sections of the application.

Expand All @@ -66,20 +66,12 @@ It lets you navigate the Content Tree, create, edit, move, copy, delete content,

## Content Tree

If you want to navigate through your website with a menu, in the main menu, go to the **Content** -> **Content structure**.
The **Content Tree** area is an expandable content menu of your website.
Content Tree is the place where you can navigate through all the content items in your application.
It is available in the Back Office and allows you to browse your content, move content items around, hide them, send them to trash, and perform other actions.

Check warning on line 70 in docs/getting_started/discover_ui.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/getting_started/discover_ui.md#L70

[Ibexa.DontCapitalize] Don't capitalize 'Back Office' if inside the sentence.
Raw output
{"message": "[Ibexa.DontCapitalize] Don't capitalize 'Back Office' if inside the sentence.", "location": {"path": "docs/getting_started/discover_ui.md", "range": {"start": {"line": 70, "column": 24}}}, "severity": "WARNING"}

![Content Tree in the menu](img/left_menu_tree.png "Content Tree in the menu")

Unique icons for each content type instantly show you what type of content you are selecting. To add custom icons to your Content Tree, follow [configuration tutorial in developer documentation.]([[= developer_doc =]]/administration/back_office/back_office_elements/custom_icons/#customize-content-type-icons)

Hidden content is greyed out in the tree view.

To simplify the Content Tree, big lists are collapsed and include a **Show more** icon.
You can select it to expand the branches of the tree.
**Collapse all** option, which is available in the context menu, closes all expanded sections.

For more information on custom configuration, go to [Content Tree]([[= developer_doc =]]/administration/back_office/content_tree/) in developer documentation.
For more information, see [Content Tree](content_tree.md).

## Content browser

Expand All @@ -102,7 +94,7 @@ You can also use the **Content Browser** to search the Repository for content, e
If you have administrator permissions, you can also view and manage User accounts and site skeletons in the **Admin** tab.

For more information about users and permissions, see [Users](../permission_management/permissions_and_users.md).

For more information about site skeletons, see [Site skeletons]([[= developer_doc =]]/multisite/site_factory/site_factory_configuration/#site-skeletons).

## Focus mode
Expand Down
55 changes: 45 additions & 10 deletions docs/image_management/edit_images.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,61 @@ description: Edit images in the Image Editor to flip, crop and select a focal po

# Edit images

When you browse the [Media library](content_model.md#content-and-media),
or create or edit a content item that contains an *Image*
or *Image asset* Field, you can perform basic image editing functions by using the Image Editor.
You can edit the image asset's properties.
You can also edit the image itself with the Image Editor.

The Image Editor enables:
The editing tools are available when you work in the Back Office of your application, for example, to:

Check warning on line 10 in docs/image_management/edit_images.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/image_management/edit_images.md#L10

[Ibexa.DontCapitalize] Don't capitalize 'Back Office' if inside the sentence.
Raw output
{"message": "[Ibexa.DontCapitalize] Don't capitalize 'Back Office' if inside the sentence.", "location": {"path": "docs/image_management/edit_images.md", "range": {"start": {"line": 10, "column": 54}}}, "severity": "WARNING"}

* image cropping
- browse the Media root folder of the Content Tree

Check warning on line 12 in docs/image_management/edit_images.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/image_management/edit_images.md#L12

[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.
Raw output
{"message": "[Ibexa.DontCapitalize] Don't capitalize 'Content Tree' if inside the sentence.", "location": {"path": "docs/image_management/edit_images.md", "range": {"start": {"line": 12, "column": 39}}}, "severity": "WARNING"}
- add an image or an image asset to a content item by selecting it from a Content browser or an Image picker
- insert an image into a [Rich Text Field](create_edit_content_items.md#edit-rich-text-fields)

## Edit image asset

You can edit the image asset's properties, for example, to provide a different caption for the image, or change the alternative text for the image.
To edit an existing image asset, in the Back Office, the main menu, go to **Content** -> **Media** -> **Images**, choose the image asset that you want to edit and click **Edit**.

Check warning on line 19 in docs/image_management/edit_images.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/image_management/edit_images.md#L19

[Ibexa.DontCapitalize] Don't capitalize 'Back Office' if inside the sentence.
Raw output
{"message": "[Ibexa.DontCapitalize] Don't capitalize 'Back Office' if inside the sentence.", "location": {"path": "docs/image_management/edit_images.md", "range": {"start": {"line": 19, "column": 41}}}, "severity": "WARNING"}

Here, you can:

- Change the name and caption for the image.

- Edit the image itself in [Image Editor](#edit-image-in-image-editor).

- Change the alternative text.

!!! note "Use AI to generate alternative text"

If the AI Actions add-on has been installed and configured in your application, the **Use AI** button is visible.
Click it to have the alternative text generated automagically.
If you have a permission to access the **Admin UI**, the **Go to AI actions** button is also visible.
By clicking it, you can quickly navigate to [AI actions configuration](work_with_ai_actions.md).

![Generate alternative text](img/alt_text_use_ai.png)

- Change the keywords assigned to the image.

!!! note "Use AI to generate alternative text"

Tagging image assets helps keep the media library organized and enables searching images by tags in the DAM.

### Edit image in Image Editor

When you edit the image asset, you can edit the image itself by using the Image Editor that enables:

* image cropping
* image flipping
* setting a point of focus within an image

Image Editor is available whenever you see the **Edit** icon on the preview.

![Image Editor icon](image_editor_icon.png)

## Flip
#### Flip

With the Flip feature you mirror the image along a horizontal or vertical axis.
Click either the **Horizontal** or **Vertical** button to flip an image.

## Crop
#### Crop

With the Crop feature you can cut the image down to a desired aspect ratio and dimensions.
You can either choose one of the preset aspect ratio options (square, vertical or horizontal rectangle, or widescreen), or click **Custom**.
Expand All @@ -40,7 +75,7 @@ When you confirm the change, the preview refreshes to display a cropped image.
Confirming the crop operation does not mean that it has been saved.
You must click **Save** to apply the changes to the original image.

## Focal point
#### Focal point

If your page contains an image that is larger that the current viewport, for example, when a user accesses the page from a mobile phone,
you can select a point on the image that the view should focus on.
Expand All @@ -58,13 +93,13 @@ Click the **Show point** button to see a target on the preview.
Drag the target to a point on the image that you want to focus on.
Click the **X** icon to restore the original position of the target.

## Undo changes
#### Undo changes

Click the left or right arrow button to undo or redo the most recent change.
Click **Reset image** to restore the original appearance of the image.

![Image Editor: Undo](image_editor_undo.png)

## Save changes
#### Save changes

Click **Save** to apply your edits to the original image and exit the Image Editor screen.
Binary file added docs/image_management/img/alt_text_use_ai.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 39cef41

Please sign in to comment.