Implement the preview image generation in the Dialog

[hmoreras]

Parent Issue

#27456

User Story

Develop an updated AI with improved image generation logic. Centralize the logic within a dedicated popup interface for user interaction.

Acceptance Criteria

• A new AI model with updated image generation logic is implemented.
• The logic is accessible through a dedicated popup window within the existing interface.
• Users can configure parameters and settings within the popup to influence image generation.
• The popup displays generated images based on user selections.
• Performance is optimized to ensure smooth image generation within the popup.

dotCMS Version

master

Proposed Objective

Enhance user experience with more advanced image generation capabilities and centralized control through a dedicated popup.

Proposed Priority

Enhance user experience with more advanced image generation capabilities and centralized control through a dedicated popup.

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

Figma: https://www.figma.com/file/JF3P9JQVJHQOujhdpCRmJG/Block-Editor?mode=dev

Assumptions & Initiation Needs

• Access to existing AI model and image generation codebase.
• Understanding of UI development principles and popup implementation for DotCMS.

Quality Assurance Notes & Workarounds

to_define

Tasks

Beta Give feedback

1. Image AI: Migrate logic to a dialog and add accordions for settings and prompt. #27634
   QA : Not Needed Team : Falcon Type : Enhancement dotCMS : AI +4
   
2. Image AI: Add the option to choose between generated images. #27635
   Team : Falcon Type : Enhancement dotCMS : AI +3
3. Handle error when generating the image. #27636
   QA : Not Needed Team : Falcon Type : Enhancement dotCMS : AI +4
   
4. Implement styles for prime-ng Galleria and apply to the AI Image dialog. #27955
   QA : Not Needed Team : Falcon dotCMS : AI +3
5. Implement styles for prime-ng Image component and apply to the AI Image dialog. #27956
   QA : Not Needed Team : Falcon dotCMS : AI +3
   
6. add the option to copy clipboard in the generated prompt. #28062
   QA : Not Needed Team : Falcon dotCMS : AI +3
   
7. Addition of Cancel Button to AI Block Editor Modal #28172
   QA : Approved QA : Passed Internal Release : 24.04.23 Team : Falcon Type : New Functionality dotCMS : AI +6

[hmoreras]

Comment to QA:

This video show the scenarios we cover with the new updates of the AI image generation:

Screenshare.-.2024-03-22.10_25_54.AM.mp4

Used plugin version: com.dotcms.ai-24.2.9.jar

fix of the error label: #28058

[oidacra]

When you try

• Generate using a prompt first (cat in the snow)
• Change of opinion and generate using the content instead, still using the prompt of the user. (the content is 'how works a internal combustion motor')

Result

[hmoreras]

PR to Fix for Arcadio feedback: #28124

[oidacra]

IQA Passed.

[josemejias11]

Failed: Tested on master_5953f39, Docker, macOS 13.0, FF v121.0.1

Cutting words to a second line

[hmoreras]

Failed: Tested on master_5953f39, Docker, macOS 13.0, FF v121.0.1

Cutting words to a second line

this feedback will go under this PR: #28191

[hmoreras]

feedback provided merged on this PR: #28191

[josemejias11]

Approved: Tested on master_a5c816a, Docker, macOS 13.0, FF v124.0.2