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}
/>
+
);