Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image Field: "Generate with dotAI" functionality #30062

Closed
Tracked by #29692
nicobytes opened this issue Sep 18, 2024 · 3 comments · Fixed by #30335
Closed
Tracked by #29692

Image Field: "Generate with dotAI" functionality #30062

nicobytes opened this issue Sep 18, 2024 · 3 comments · Fixed by #30335
Assignees
@hmoreras
Labels
dotCMS : AI QA : Approved QA : Passed Internal Release : 24.10.25 Bug Fixing Team : Falcon Type : Task

Comments

@nicobytes
Copy link
Contributor

nicobytes commented Sep 18, 2024 •
edited
Loading

Parent Issue

#29692

The AI plugin currently supports generative AI in the block editor, including creation of AI-generated images.

We need to duplicate the image generation capabilities of the AI Image block for the standard Image field in the content editing screen.

User Story

As a Content Architect in dotCMS, I want to generate a image with AI in the Image Field.

Screenshot 2024-10-14 at 1 56 48 PM

Screenshot 2024-06-17 at 11 19 51 AM

Acceptance Criteria

  • If dotAI is not configured, the options should be disabled, and a mouse-over should have a message something like "Please configure dotAI to enable this feature".
  • Like the Block Editor field, once the image is generated and accepted, it just becomes a normal image. So, dotAI doesn't come into play when the image is edited.
@nicobytes nicobytes mentioned this issue Sep 18, 2024
Open
@nicobytes nicobytes moved this from New to Next 1-3 Sprints in dotCMS - Product Planning Sep 18, 2024
@nicobytes nicobytes moved this from Next 1-3 Sprints to Current Sprint Backlog in dotCMS - Product Planning Oct 2, 2024
@nicobytes nicobytes removed the Triage label Oct 2, 2024
@nicobytes nicobytes moved this from Current Sprint Backlog to Next 1-3 Sprints in dotCMS - Product Planning Oct 2, 2024
@nicobytes nicobytes self-assigned this Oct 2, 2024
nicobytes added a commit that referenced this issue Oct 11, 2024
@nicobytes
chore(edit-content): generate images with ai #30062
a6e98d3
nicobytes added a commit that referenced this issue Oct 11, 2024
@nicobytes
chore(edit-content): generate images with ai #30062
72f10e6
@nicobytes nicobytes mentioned this issue Oct 11, 2024
Merged
@nicobytes nicobytes linked a pull request Oct 11, 2024 that will close this issue
Generate Image with AI for Image Fields #30335
Merged
nicobytes added a commit that referenced this issue Oct 11, 2024
@nicobytes
chore(edit-content): migrate ai dialog state with signals #30062
babd7aa
nicobytes added a commit that referenced this issue Oct 11, 2024
@nicobytes
chore(edit-content): migrate ai dialog state with signals #30062
940b676
nicobytes added a commit that referenced this issue Oct 14, 2024
@nicobytes
chore(edit-content): fix unit tests #30062
e83ea71
nicobytes added a commit that referenced this issue Oct 14, 2024
@nicobytes
chore(edit-content): check ai plugin #30062
678b889
nicobytes added a commit that referenced this issue Oct 14, 2024
@nicobytes
chore(edit-content): add translate #30062
c9740f8
nicobytes added a commit that referenced this issue Oct 14, 2024
@nicobytes
chore(edit-content): fix error with translate #30062
a24b949
@nicobytes
Copy link
Contributor Author

QA Notes:

This card includes changes in how the AI Prompt dialog for generating images is handled. Therefore, all instances where this dialog is launched should be tested. These cases include:

  • Block Editor Field
  • Binary Field
  • Image Field

Both the Block Editor and Binary Field should function correctly in both the old and new editor content.

Case 1: New editor content

2024-10-14.14-31-52.mp4

Case 2: Old editor content

2024-10-14.14-41-25.mp4

nicobytes added a commit that referenced this issue Oct 14, 2024
@nicobytes
chore(edit-content): fix unit tests #30062
40a9b17
nicobytes added a commit that referenced this issue Oct 15, 2024
@nicobytes
chore(edit-content): add docs #30062
96d6672
nicobytes added a commit that referenced this issue Oct 15, 2024
@nicobytes
chore(edit-content): add docs #30062
3b8db3e
nicobytes added a commit that referenced this issue Oct 15, 2024
@nicobytes
chore(edit-content): add docs #30062
7f58529
nicobytes added a commit that referenced this issue Oct 15, 2024
@nicobytes
chore(edit-content): add docs #30062
6099121
github-merge-queue bot pushed a commit that referenced this issue Oct 15, 2024
@nicobytes
Generate Image with AI for Image Fields (#30335)
17da5c2 
### Parent Issue

#30062 

### Summary

This pull request focuses on integrating the `primeng/dynamicdialog`
module into the block editor and AI image prompt functionalities. It
includes changes to import necessary services, update component
providers, and refactor the AI image prompt extension to use dynamic
dialogs.

### Integration of `primeng/dynamicdialog`:

*
[`core-web/libs/block-editor/src/lib/block-editor.module.ts`](diffhunk://#diff-8baf52e51d62118783206bb31ceefa1afcd8a4b9400cfb935614e5a1171d5cf4R9):
Added `DynamicDialogModule` to the imports and module declarations.
[[1]](diffhunk://#diff-8baf52e51d62118783206bb31ceefa1afcd8a4b9400cfb935614e5a1171d5cf4R9)
[[2]](diffhunk://#diff-8baf52e51d62118783206bb31ceefa1afcd8a4b9400cfb935614e5a1171d5cf4R61)
*
[`core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts`](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609R19-R20):
Imported `DialogService` and `DotMessageService` and updated the
component providers to include `DialogService`.
[[1]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609R19-R20)
[[2]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609L34-R36)
[[3]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609R80)
[[4]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609R123-R124)
[[5]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609L461-R466)
*
[`core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.extension.ts`](diffhunk://#diff-689103c18ebe5e9dd00423ab7d493e5bf2570c867ec3b67ffef6dfd51ad62bfcL3-R7):
Refactored `AIImagePromptExtension` to use `DialogService` and
`DotMessageService` for creating dynamic dialogs.
[[1]](diffhunk://#diff-689103c18ebe5e9dd00423ab7d493e5bf2570c867ec3b67ffef6dfd51ad62bfcL3-R7)
[[2]](diffhunk://#diff-689103c18ebe5e9dd00423ab7d493e5bf2570c867ec3b67ffef6dfd51ad62bfcL31-R34)
[[3]](diffhunk://#diff-689103c18ebe5e9dd00423ab7d493e5bf2570c867ec3b67ffef6dfd51ad62bfcL74-R82)
*
[`core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.plugin.ts`](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L7-R23):
Updated the AI image prompt plugin to manage dialog lifecycle and
interactions using `DialogService` and `DotMessageService`.
[[1]](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L7-R23)
[[2]](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L37-L38)
[[3]](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L47-R65)
[[4]](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L107-R109)

### Removal of Deprecated Components:

*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.html`](diffhunk://#diff-23b6d93662589dabff9ce186485da98e3e53b435fcbcf0a889e3f5c3008915fcL2):
Removed the deprecated `dot-ai-image-prompt` component.

### Test and Storybook Updates:

*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts`](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dR12):
Updated test providers to include `DialogService` and removed deprecated
stores.
[[1]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dR12)
[[2]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dR26)
[[3]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dL34-R36)
[[4]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dL93-R103)
[[5]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dL589-R592)
*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.stories.ts`](diffhunk://#diff-24e79acf5790caefe96f0fcf5072694a1be1e6fc85ab88480d8244c78e05e78cL2-R6):
Updated Storybook configuration to use `provideHttpClient` and
`DotMessageService`.
[[1]](diffhunk://#diff-24e79acf5790caefe96f0fcf5072694a1be1e6fc85ab88480d8244c78e05e78cL2-R6)
[[2]](diffhunk://#diff-24e79acf5790caefe96f0fcf5072694a1be1e6fc85ab88480d8244c78e05e78cR35-L37)

### Miscellaneous:

*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts`](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL4-R10):
Removed unused imports and updated to use `takeUntilDestroyed` for
cleanup.
[[1]](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL4-R10)
[[2]](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL24-R28)
[[3]](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL50-R50)
[[4]](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL90)
*
[`core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss`](diffhunk://#diff-123bc2019d92d71d5d2d93da360b73b30eefd6efb45c2c4686e92f6ed2995c68R112-R121):
Added styles for transparent AI dialog masks.
@github-project-automation github-project-automation bot moved this from In Review to Internal QA in dotCMS - Product Planning Oct 15, 2024
@dsilvam dsilvam assigned dsilvam and unassigned nicobytes and dsilvam Oct 15, 2024
@hmoreras
Copy link
Contributor

Pass internal QA

AI not configured:

image image

AI configured:

Block editor in old edit mode working
image

Binary old edit mode working
image

Block editor new edit mode working

image

Binary new editor working

image

Image new editor working
image

@hmoreras hmoreras moved this from Internal QA to QA - Backlog in dotCMS - Product Planning Oct 15, 2024
@hmoreras hmoreras self-assigned this Oct 15, 2024
@josemejias11
Copy link
Contributor

Approved: Tested on trunk_11a47ce, Docker, macOS 14.5, FF v126.0.1

@josemejias11 josemejias11 moved this from QA - In Progress to Done in dotCMS - Product Planning Oct 17, 2024
spbolton pushed a commit that referenced this issue Nov 11, 2024
@nicobytes @spbolton
Generate Image with AI for Image Fields (#30335)
44641df 
### Parent Issue

#30062 

### Summary

This pull request focuses on integrating the `primeng/dynamicdialog`
module into the block editor and AI image prompt functionalities. It
includes changes to import necessary services, update component
providers, and refactor the AI image prompt extension to use dynamic
dialogs.

### Integration of `primeng/dynamicdialog`:

*
[`core-web/libs/block-editor/src/lib/block-editor.module.ts`](diffhunk://#diff-8baf52e51d62118783206bb31ceefa1afcd8a4b9400cfb935614e5a1171d5cf4R9):
Added `DynamicDialogModule` to the imports and module declarations.
[[1]](diffhunk://#diff-8baf52e51d62118783206bb31ceefa1afcd8a4b9400cfb935614e5a1171d5cf4R9)
[[2]](diffhunk://#diff-8baf52e51d62118783206bb31ceefa1afcd8a4b9400cfb935614e5a1171d5cf4R61)
*
[`core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts`](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609R19-R20):
Imported `DialogService` and `DotMessageService` and updated the
component providers to include `DialogService`.
[[1]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609R19-R20)
[[2]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609L34-R36)
[[3]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609R80)
[[4]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609R123-R124)
[[5]](diffhunk://#diff-266eab162f8661e695c3e40956692fa3696fbd4e8cd3e0352ea9e01f90b13609L461-R466)
*
[`core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.extension.ts`](diffhunk://#diff-689103c18ebe5e9dd00423ab7d493e5bf2570c867ec3b67ffef6dfd51ad62bfcL3-R7):
Refactored `AIImagePromptExtension` to use `DialogService` and
`DotMessageService` for creating dynamic dialogs.
[[1]](diffhunk://#diff-689103c18ebe5e9dd00423ab7d493e5bf2570c867ec3b67ffef6dfd51ad62bfcL3-R7)
[[2]](diffhunk://#diff-689103c18ebe5e9dd00423ab7d493e5bf2570c867ec3b67ffef6dfd51ad62bfcL31-R34)
[[3]](diffhunk://#diff-689103c18ebe5e9dd00423ab7d493e5bf2570c867ec3b67ffef6dfd51ad62bfcL74-R82)
*
[`core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.plugin.ts`](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L7-R23):
Updated the AI image prompt plugin to manage dialog lifecycle and
interactions using `DialogService` and `DotMessageService`.
[[1]](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L7-R23)
[[2]](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L37-L38)
[[3]](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L47-R65)
[[4]](diffhunk://#diff-c7ed359690f2aff854a493cbbe30b539d13e742964e9aa5794c7afd4b0a81c18L107-R109)

### Removal of Deprecated Components:

*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.html`](diffhunk://#diff-23b6d93662589dabff9ce186485da98e3e53b435fcbcf0a889e3f5c3008915fcL2):
Removed the deprecated `dot-ai-image-prompt` component.

### Test and Storybook Updates:

*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.spec.ts`](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dR12):
Updated test providers to include `DialogService` and removed deprecated
stores.
[[1]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dR12)
[[2]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dR26)
[[3]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dL34-R36)
[[4]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dL93-R103)
[[5]](diffhunk://#diff-d01a58af8fedbafd245fa8166ab7aeb806f756bb643d7b81c9b0d396bfddb89dL589-R592)
*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.stories.ts`](diffhunk://#diff-24e79acf5790caefe96f0fcf5072694a1be1e6fc85ab88480d8244c78e05e78cL2-R6):
Updated Storybook configuration to use `provideHttpClient` and
`DotMessageService`.
[[1]](diffhunk://#diff-24e79acf5790caefe96f0fcf5072694a1be1e6fc85ab88480d8244c78e05e78cL2-R6)
[[2]](diffhunk://#diff-24e79acf5790caefe96f0fcf5072694a1be1e6fc85ab88480d8244c78e05e78cR35-L37)

### Miscellaneous:

*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts`](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL4-R10):
Removed unused imports and updated to use `takeUntilDestroyed` for
cleanup.
[[1]](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL4-R10)
[[2]](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL24-R28)
[[3]](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL50-R50)
[[4]](diffhunk://#diff-06beb921499e762bd5f4d25d68d0a24a22477acf79372fb0350ee6d9a7b0c01aL90)
*
[`core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss`](diffhunk://#diff-123bc2019d92d71d5d2d93da360b73b30eefd6efb45c2c4686e92f6ed2995c68R112-R121):
Added styles for transparent AI dialog masks.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hmoreras hmoreras

Labels
dotCMS : AI QA : Approved QA : Passed Internal Release : 24.10.25 Bug Fixing Team : Falcon Type : Task
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Generate Image with AI for Image Fields dotCMS/core
5 participants
@dsilvam @oidacra @nicobytes @hmoreras @josemejias11