From 36b21d5c2d67d35c954dc67ece8bd76bc192e201 Mon Sep 17 00:00:00 2001 From: Arcadio Quintero Date: Fri, 1 Dec 2023 15:59:37 -0500 Subject: [PATCH] feat(ai-image-prompt): add pipe to translate strings --- .../ai-image-prompt.component.html | 6 +++--- .../ai-image-prompt.component.ts | 6 ++++-- .../ai-image-prompt-input.component.html | 13 ++++++------ .../shared/mocks/dot-message.service.mock.ts | 21 ++++++++++++++++++- .../services/dot-ai/dot-ai-service.mock.ts | 7 +++++-- .../WEB-INF/messages/Language.properties | 15 ++++++++++++- 6 files changed, 52 insertions(+), 16 deletions(-) diff --git a/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.html b/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.html index 57f7b10318c0..72d55f9d80a5 100644 --- a/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.html +++ b/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.html @@ -8,7 +8,7 @@ [style]="{ width: '800px' }" (onHide)="hideDialog()" appendTo="body" - header="Generate AI Image"> + header="{{ 'block-editor.extension.ai-image.dialog-title' | dm }}">
diff --git a/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.ts b/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.ts index e3336875e0d6..0c49f2dfdfbd 100644 --- a/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.ts +++ b/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.ts @@ -10,6 +10,7 @@ import { OverlayPanelModule } from 'primeng/overlaypanel'; import { TooltipModule } from 'primeng/tooltip'; import { ComponentStatus } from '@dotcms/dotcms-models'; +import { DotMessagePipe } from '@dotcms/ui'; import { PromptType } from './ai-image-prompt.models'; import { DotAiImagePromptStore, VmAiImagePrompt } from './ai-image-prompt.store'; @@ -29,12 +30,13 @@ import { AiImagePromptInputComponent } from './components/ai-image-prompt-input/ DialogModule, AiImagePromptInputComponent, AiImagePromptInputComponent, - AsyncPipe + AsyncPipe, + DotMessagePipe ], changeDetection: ChangeDetectionStrategy.OnPush }) export class AIImagePromptComponent { - vm$: Observable = inject(DotAiImagePromptStore).vm$; + protected readonly vm$: Observable = inject(DotAiImagePromptStore).vm$; protected readonly ComponentStatus = ComponentStatus; private store = inject(DotAiImagePromptStore); diff --git a/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/components/ai-image-prompt-input/ai-image-prompt-input.component.html b/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/components/ai-image-prompt-input/ai-image-prompt-input.component.html index 8ea2d71a70d6..737c2e7f1950 100644 --- a/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/components/ai-image-prompt-input/ai-image-prompt-input.component.html +++ b/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/components/ai-image-prompt-input/ai-image-prompt-input.component.html @@ -28,10 +28,10 @@

- Generate an AI image based on your input and requests. + {{ 'block-editor.extension.ai-image.input-text.title' | dm }}

@@ -50,14 +50,14 @@ + message=" {{ 'block-editor.common.input-prompt-required-error' | dm }}" /> @@ -84,11 +84,10 @@

- Auto-Generate an Image based on the content created within the - Block Editor. + {{ 'block-editor.extension.ai-image.auto-text.title' | dm }}

diff --git a/core-web/libs/block-editor/src/lib/shared/mocks/dot-message.service.mock.ts b/core-web/libs/block-editor/src/lib/shared/mocks/dot-message.service.mock.ts index e896287f1323..7b453a6e993e 100644 --- a/core-web/libs/block-editor/src/lib/shared/mocks/dot-message.service.mock.ts +++ b/core-web/libs/block-editor/src/lib/shared/mocks/dot-message.service.mock.ts @@ -8,7 +8,26 @@ export const MessageServiceMock: Record = { 'block-editor.common.delete': 'Delete', 'block-editor.common.regenerate': 'Regenerate', 'block-editor.common.pending': 'Pending', - 'block-editor.extension.ai-content.ask-ai-to-write-something': 'Ask AI to write something' + 'block-editor.common.generate': 'Generate', + 'block-editor.common.input-prompt-required-error': 'The information provided is insufficient', + + 'block-editor.extension.ai-content.ask-ai-to-write-something': 'Ask AI to write something', + + 'block-editor.extension.ai-image.dialog-title': 'Generate AI Image', + + 'block-editor.extension.ai-image.input-text.title': + 'Generate an AI image based on your input and requests.', + 'block-editor.extension.ai-image.input-text.placeholder': + 'Create a realistic image of a cow in the snow', + 'block-editor.extension.ai-image.input-text.tooltip': + 'Describe the type of image you want to generate.', + + 'block-editor.extension.ai-image.auto-text.title': + 'Auto-Generate an Image based on the content created within the Block Editor.', + 'block-editor.extension.ai-image.auto-text.tooltip': + 'Describe the size, color palette, style, mood, etc.', + 'block-editor.extension.ai-image.auto-text.placeholder': + 'E.g. 1200x800px, vibrant colors, impressionistic, adventurous.' }; @Injectable() diff --git a/core-web/libs/block-editor/src/lib/shared/services/dot-ai/dot-ai-service.mock.ts b/core-web/libs/block-editor/src/lib/shared/services/dot-ai/dot-ai-service.mock.ts index e7435cdfda4e..f511d6d4ee3c 100644 --- a/core-web/libs/block-editor/src/lib/shared/services/dot-ai/dot-ai-service.mock.ts +++ b/core-web/libs/block-editor/src/lib/shared/services/dot-ai/dot-ai-service.mock.ts @@ -1,11 +1,14 @@ import { Observable, of } from 'rxjs'; +import { delay } from 'rxjs/operators'; + +const DEFAULT_DELAY = 2000; export class DotAiServiceMock { - getIAContent(): Observable { + generateContent(): Observable { return of( ` Title: Understanding the Inner Workings of an Internal Combustion Engine\n\nIntroduction:\nAn internal combustion engine, commonly known as a "motor," is a fundamental component powering various modes of transportation today. Whether it is used in cars, motorcycles, or even power generators, this remarkable mechanical device plays a pivotal role in our modern society. In this post, we will delve into the intricate workings of an internal combustion engine, shedding light on its main components and the amazing combustion process that propels our vehicles forward.\n\n1. The Components:\nTypically consisting of multiple intricate parts, an internal combustion engine can be simplified into four main components:\n\na. Cylinder Block:\nA robust casing houses the cylinder, piston, and other associated components. This block not only provides structural strength but also assists in dissipating the heat produced during the engine's operation.\n\nb. Pistons:\nPlaced inside each cylinder, pistons move up and down during the engine's operation. Connected to the crankshaft, these essential components transform the linear motion of the pistons into the rotary motion necessary to turn the wheels.\n\nc. Valves:\nIntake and exhaust valves control the flow of air-fuel mixture into the combustion chamber and the expulsion of combustion byproducts. These valves play a crucial role in optimizing engine performance and ensuring efficient fuel combustion.\n\nd. Spark Plugs:\nElectrically ignited by the engine control unit (ECU), spark plugs generate a spark within the combustion chamber, initiating the combustion process. This controlled ignition ensures the synchronized release of energy within the engine.\n\n2. The Combustion Process:\nThe combustion process within an internal combustion engine can be summarized into four essential steps:\n\na. Intake:\nWith the intake valve open, a carefully regulated mixture of air and fuel is drawn into the combustion chamber during the piston's downward stroke.\n\nb. Compression:\nDuring the upward stroke of the piston, the intake valve closes, sealing the combustion chamber. The piston compresses the air-fuel mixture, significantly increasing its pressure and temperature.\n\nc. Combustion and Power Stroke:\nAt the desired moment, the spark plug sparks, igniting the compressed air-fuel mixture. This rapid combustion creates an explosion, generating a force that drives the piston back down, converting the expanding high-pressure gases into mechanical energy.\n\nd. Exhaust:\nWhen the piston reaches the bottom of its stroke, the exhaust valve opens, allowing the expulsion of spent gases resulting from the combustion process. The piston then moves back up to restart the cycle, and the process repeats.\n\nConclusion:\nThe internal combustion engine's marvel lies in its ability to convert chemical energy stored in fuel into mechanical energy, enabling the propulsion of vehicles we rely on daily. Understanding its intricate components and the combustion process that takes place within can help us appreciate the engineering brilliance behind this staple technology. From the rhythmic motion of pistons to the precisely timed ignition of fuel, every aspect of an internal combustion engine harmoniously collaborates to fuel our ever-advancing world ` - ); + ).pipe(delay(DEFAULT_DELAY)); } } diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties index a966a12620a8..5cfaec01c1f9 100644 --- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties +++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties @@ -5557,5 +5557,18 @@ seo.rules.media.preview.not.defined=Social Media Preview Image Not Defined! block-editor.common.accept=Accept block-editor.common.delete=Delete block-editor.common.regenerate=Regenerate -block-editor.common.pending='Pending +block-editor.common.pending=Pending +block-editor.common.generate=Generate +block-editor.common.input-prompt-required-error=The information provided is insufficient + block-editor.extension.ai-content.ask-ai-to-write-something=Ask AI to write something + +block-editor.extension.ai-image.dialog-title=Generate AI Image + +block-editor.extension.ai-image.input-text.placeholder=Create a realistic image of a cow in the snow +block-editor.extension.ai-image.input-text.tooltip=Describe the type of image you want to generate. +block-editor.extension.ai-image.input-text.title=Generate an AI image based on your input and requests. + +block-editor.extension.ai-image.auto-text.title=Auto-Generate an Image based on the content created within the Block Editor. +block-editor.extension.ai-image.auto-text.placeholder=E.g. 1200x800px, vibrant colors, impressionistic, adventurous. +block-editor.extension.ai-image.auto-text.tooltip=Describe the size, color palette, style, mood, etc.