diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index beb895d045..81ff9fadb1 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1023,7 +1023,7 @@ "patchmatchDownScaleSize": "Downscale", "perlinNoise": "Perlin Noise", "positivePromptPlaceholder": "Positive Prompt", - "globalPositivePromptPlaceholder": "or, start typing your prompt here...", + "globalPositivePromptPlaceholder": "Global Positive Prompt", "iterations": "Iterations", "scale": "Scale", "scaleBeforeProcessing": "Scale Before Processing", @@ -1708,6 +1708,7 @@ "noMatchingTemplates": "No matching templates", "placeholderDirections": "Use the button to specify where your manual prompt should be included in the template. If you do not provide one, the template will be appended to your prompt.", "positivePrompt": "Positive Prompt", + "preview": "Preview", "searchByName": "Search by name", "templateDeleted": "Prompt template deleted", "toggleViewMode": "Toggle View Mode", diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx index e1197b1840..9ce6d16a97 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx @@ -1,6 +1,7 @@ import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { negativePromptChanged } from 'features/controlLayers/store/controlLayersSlice'; +import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel'; import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper'; import { ViewModePrompt } from 'features/parameters/components/Prompts/ViewModePrompt'; import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton'; @@ -48,18 +49,26 @@ export const ParamNegativePrompt = memo(() => { name="negativePrompt" ref={textareaRef} value={prompt} - placeholder={t('parameters.globalNegativePromptPlaceholder')} onChange={onChange} onKeyDown={onKeyDown} fontSize="sm" variant="darkFilled" - paddingRight={30} + minH={24} + paddingRight={10} + paddingLeft={3} + paddingTop={7} + paddingBottom={3} /> + {viewMode && ( - + )} diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx index fc8a2a54ce..4c10b97dd3 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx @@ -2,6 +2,7 @@ import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice'; import { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton'; +import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel'; import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper'; import { ViewModePrompt } from 'features/parameters/components/Prompts/ViewModePrompt'; import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton'; @@ -63,20 +64,27 @@ export const ParamPositivePrompt = memo(() => { name="prompt" ref={textareaRef} value={prompt} - placeholder={t('parameters.globalPositivePromptPlaceholder')} onChange={onChange} - minH={28} + minH={40} onKeyDown={onKeyDown} variant="darkFilled" - paddingRight={30} + paddingRight={10} + paddingLeft={3} + paddingTop={7} + paddingBottom={3} /> {baseModel === 'sdxl' && } + {viewMode && ( - + )} diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptLabel.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptLabel.tsx new file mode 100644 index 0000000000..1e9dfe0088 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptLabel.tsx @@ -0,0 +1,9 @@ +import { FormLabel } from '@invoke-ai/ui-library'; + +export const PromptLabel = ({ label }: { label: string }) => { + return ( + + {label} + + ); +}; diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx index 528f98ae75..a8cdd67842 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx @@ -6,7 +6,17 @@ import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiEyeBold } from 'react-icons/pi'; -export const ViewModePrompt = ({ presetPrompt, prompt }: { presetPrompt: string; prompt: string }) => { +import { PromptLabel } from './PromptLabel'; + +export const ViewModePrompt = ({ + presetPrompt, + prompt, + label, +}: { + presetPrompt: string; + prompt: string; + label: string; +}) => { const dispatch = useAppDispatch(); const { t } = useTranslation(); @@ -20,13 +30,23 @@ export const ViewModePrompt = ({ presetPrompt, prompt }: { presetPrompt: string; return ( - + + - + {presetChunks.map((chunk, index) => ( diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx index bba9e0b32d..c0ce163dae 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx @@ -1,6 +1,7 @@ import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { negativePrompt2Changed } from 'features/controlLayers/store/controlLayersSlice'; +import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel'; import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper'; import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton'; import { PromptPopover } from 'features/prompt/PromptPopover'; @@ -36,16 +37,20 @@ export const ParamSDXLNegativeStylePrompt = memo(() => { name="prompt" ref={textareaRef} value={prompt} - placeholder={t('sdxl.negStylePrompt')} onChange={onChange} onKeyDown={onKeyDown} fontSize="sm" variant="darkFilled" - paddingRight={30} + minH={24} + paddingRight={10} + paddingLeft={3} + paddingTop={7} + paddingBottom={3} /> + ); diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx index 3828136c74..d452396183 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx @@ -1,6 +1,7 @@ import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { positivePrompt2Changed } from 'features/controlLayers/store/controlLayersSlice'; +import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel'; import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper'; import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton'; import { PromptPopover } from 'features/prompt/PromptPopover'; @@ -33,16 +34,20 @@ export const ParamSDXLPositiveStylePrompt = memo(() => { name="prompt" ref={textareaRef} value={prompt} - placeholder={t('sdxl.posStylePrompt')} onChange={onChange} onKeyDown={onKeyDown} fontSize="sm" variant="darkFilled" - paddingRight={30} + minH={24} + paddingRight={10} + paddingLeft={3} + paddingTop={7} + paddingBottom={3} /> + );