[UI] - Make AI Image Block Production-ready

[oidacra]

Parent Issue

#26495

User Story

As a user of the Block Editor, I want to generate an image using the new AI Image Prompt Extension so that I can seamlessly incorporate AI-generated visuals into my content.

Endpoint: /api/v1/ai/image/generate

Acceptance Criteria

• The Block Editor should have an "AI Image " command in the list
• The AI should generate an image based on the provided prompt.
• The AI should generate an image using the content already in the Block Editor.
• Users should be able to insert the AI-generated image into their content as Image Node.
• Error handling of the AI endpoints are not in the scope of this task.

dotCMS Version

master

Proposed Objective

User Experience

Proposed Priority

Priority 2 - Important

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

Command Menu

Modal with the options

Generate it by a prompt

Generate using the content with additional details.

Create a Image Node

Handle error

Assumptions & Initiation Needs

• Assuming the AI Image Prompt Extension has the necessary APIs and SDKs for integration.
• Users have a basic understanding of the Block Editor functionalities.

Quality Assurance Notes & Workarounds

• Ensure that the AI suggestions do not interfere with the normal functioning of the Block Editor.
• Test the AI Image Prompt Extension on various prompts to ensure diverse and relevant image outputs.
• Ensure the generated image can be easily inserted and edited within the Block Editor.

Tasks

Beta Give feedback

1. [UI] Review AIImagePromptExtension prompt extension #26551
   QA : Not Needed Team : Falcon Type : Task dotCMS : AI +4
   
2. [BE] Add more properties to PUBLISH endpoint to show correctly the DOTASSET #26669
   dotCMS : AI +1
3. [UI] Generate Image using a Prompt #26552
   Team : Falcon Type : Task dotCMS : AI +3
4. [UI] Generate an Image using the content from Block Editor #26553
   Team : Falcon Type : Defect Type : Task dotCMS : AI +4
5. [UI] Content Action, regenerate image not work. #26670
   Team : Falcon Type : Defect dotCMS : AI +3
6. [UI] When image loading place holder loose focus, the placeholder stays in the editor. #26899
   Merged QA : Not Needed Team : Falcon dotCMS : AI +4
   

[hmoreras]

QA notes:

1. Add the package com.barchart.udt in the Exported Packages button in the plugin portlet.
2. Install the last version of the AI plugin.
3. Add the token key in the apps configuration portlet.
4. Create a content that has a block editor on it, or use one that already have it like BLOG.
5. In the Editor type /ai, select the AI Image.
6. In the modal there are two options, create an image from a prompt or create an image based on the content of the editor, test both scenarios.
7. when hit the button generate a loading block will show in the editor.
8. Once the response is done an image will show with a context menu.
9. All functions of the context menu should work.

Use the images in the description as reference.

[dsilvam]

Needs work. Failing case:

When you add multiple consecutive images generated by AI, they are able to render properly (from a page) but when editing the contentlet only one of those images is shown.

[dsilvam]

Passed Internal QA: AI Image block working as expected. Case describe in the last comment got fixed.

[josemejias11]

Approved: Tested on master_1894351, Docker, macOS 13.0, FF v121.0.1