Skip to content

Commit

Permalink
feat(ai-image-prompt): add pipe to translate strings
Browse files Browse the repository at this point in the history
  • Loading branch information
oidacra committed Dec 1, 2023
1 parent c161807 commit 36b21d5
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@
[style]="{ width: '800px' }"
(onHide)="hideDialog()"
appendTo="body"
header="Generate AI Image">
header="{{ 'block-editor.extension.ai-image.dialog-title' | dm }}">
<div class="dialog-prompts__wrapper grid">
<dot-ai-image-prompt-input
class="col"
[isLoading]="vm.status === ComponentStatus.LOADING"
[selected]="vm.selectedPromptType === 'input'"
(click)="selectType('input', vm.selectedPromptType)"
(promptChanged)="generateImage($event)"
placeholder="Create a realistic image of a cow in the snow"
placeholder="{{ 'block-editor.extension.ai-image.input-text.placeholder' | dm }}"
type="input" />

<dot-ai-image-prompt-input
Expand All @@ -25,7 +25,7 @@
[selected]="vm.selectedPromptType === 'auto'"
(click)="selectType('auto', vm.selectedPromptType)"
(promptChanged)="generateImage($event)"
placeholder="E.g. 1200x800px, vibrant colors, impressionistic, adventurous."
placeholder="{{ 'block-editor.extension.ai-image.auto-text.placeholder' | dm }}"
type="auto" />
</div>
</p-dialog>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<VmAiImagePrompt> = inject(DotAiImagePromptStore).vm$;
protected readonly vm$: Observable<VmAiImagePrompt> = inject(DotAiImagePromptStore).vm$;

protected readonly ComponentStatus = ComponentStatus;
private store = inject(DotAiImagePromptStore);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@

<div class="flex gap-1">
<p class="text-center">
<strong>Generate</strong> an AI image based on your input and requests.
{{ 'block-editor.extension.ai-image.input-text.title' | dm }}
<i
class="pi pi-info-circle"
pTooltip="Describe the type of image you want to generate."
pTooltip="{{ 'block-editor.extension.ai-image.input-text.tooltip' | dm }}"
tooltipZIndex="999999"></i>
</p>
</div>
Expand All @@ -50,14 +50,14 @@
</div>
<dot-field-validation-message
[field]="promptControl"
message="The information provided is insufficient" />
message=" {{ 'block-editor.common.input-prompt-required-error' | dm }}" />

<button
class="p-button-outlined"
[loading]="isLoading"
(click)="generateImage()"
icon="pi pi-send"
label="Generate"
label="{{ 'block-editor.common.generate' | dm }}"
pButton
type="submit"></button>
</form>
Expand All @@ -84,11 +84,10 @@

<div class="flex gap-1">
<p class="text-center">
<strong>Auto-Generate</strong> an Image based on the content created within the
Block Editor.
{{ 'block-editor.extension.ai-image.auto-text.title' | dm }}
<i
class="pi pi-info-circle"
pTooltip="Describe the size, color palette, style, mood, etc."
pTooltip="{{ 'block-editor.extension.ai-image.auto-text.tooltip' | dm }}"
tooltipZIndex="999999"></i>
</p>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,26 @@ export const MessageServiceMock: Record<string, string> = {
'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()
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { Observable, of } from 'rxjs';

import { delay } from 'rxjs/operators';

const DEFAULT_DELAY = 2000;
export class DotAiServiceMock {
getIAContent(): Observable<string> {
generateContent(): Observable<string> {
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));
}
}
15 changes: 14 additions & 1 deletion dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
Original file line number Diff line number Diff line change
Expand Up @@ -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=<strong>Generate</strong> an AI image based on your input and requests.
block-editor.extension.ai-image.auto-text.title=<strong>Auto-Generate</strong> 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.

0 comments on commit 36b21d5

Please sign in to comment.