ui: add labels to prompt boxes

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",

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}
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
         </PromptOverlayButtonWrapper>
+        <PromptLabel label={t('parameters.negativePromptPlaceholder')} />
         {viewMode && (
-          <ViewModePrompt prompt={prompt} presetPrompt={activeStylePreset?.preset_data.negative_prompt || ''} />
+          <ViewModePrompt
+            prompt={prompt}
+            presetPrompt={activeStylePreset?.preset_data.negative_prompt || ''}
+            label={`${t('parameters.negativePromptPlaceholder')} (${t('stylePresets.preview')})`}
+          />
         )}
       </Box>
     </PromptPopover>

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}
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
           {baseModel === 'sdxl' && <SDXLConcatButton />}
           <ShowDynamicPromptsPreviewButton />
         </PromptOverlayButtonWrapper>
+        <PromptLabel label={t('parameters.positivePromptPlaceholder')} />
         {viewMode && (
-          <ViewModePrompt prompt={prompt} presetPrompt={activeStylePreset?.preset_data.positive_prompt || ''} />
+          <ViewModePrompt
+            prompt={prompt}
+            presetPrompt={activeStylePreset?.preset_data.positive_prompt || ''}
+            label={`${t('parameters.positivePromptPlaceholder')} (${t('stylePresets.preview')})`}
+          />
         )}
       </Box>
     </PromptPopover>

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 (
+    <FormLabel color="base.450" fontSize="xs" pos="absolute" top={2} left={3}>
+      {label}
+    </FormLabel>
+  );
+};

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 (
     <Box position="absolute" top={0} bottom={0} left={0} right={0} layerStyle="second" borderRadius="base">
-      <Flex flexDir="column" onClick={handleExitViewMode} justifyContent="space-between" h="full" padding="8px 10px">
+      <Flex
+        flexDir="column"
+        onClick={handleExitViewMode}
+        justifyContent="space-between"
+        h="full"
+        paddingRight={3}
+        paddingLeft={3}
+        paddingTop={7}
+        paddingBottom={3}
+      >
+        <PromptLabel label={label} />
         <Flex overflow="scroll">
-          <Text fontSize="sm" lineHeight="1rem" w="full">
+          <Text w="full">
             {presetChunks.map((chunk, index) => (
               <Text
                 as="span"
-                color={index === 1 ? 'white' : 'base.300'}
+                color={index === 1 ? 'white' : 'base.200'}
                 fontWeight={index === 1 ? 'semibold' : 'normal'}
                 key={index}
               >

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}
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
         </PromptOverlayButtonWrapper>
+        <PromptLabel label={t('sdxl.negStylePrompt')} />
       </Box>
     </PromptPopover>
   );

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}
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
         </PromptOverlayButtonWrapper>
+        <PromptLabel label={t('sdxl.posStylePrompt')} />
       </Box>
     </PromptPopover>
   );