From b70891c66114b13a4f164f760d3c165dfa1843be Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Mon, 12 Aug 2024 13:37:04 -0400
Subject: [PATCH] update descriptoin of placeholder in modal

---
 invokeai/frontend/web/public/locales/en.json  |  4 +++-
 .../components/StylePresetForm.tsx            | 24 ++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 81ff9fadb1..8a6a7afef8 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1706,7 +1706,9 @@
         "name": "Name",
         "negativePrompt": "Negative Prompt",
         "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.",
+        "promptTemplatesDesc1": "Prompt templates add text to the prompts you write in the prompt box.",
+        "promptTemplatesDesc2": "Use the placeholder string <Pre>{{placeholder}}</Pre> to specify where your prompt should be included in the template.",
+        "promptTemplatesDesc3": "If you omit the placeholder, the template will be appended to the end of your prompt.",
         "positivePrompt": "Positive Prompt",
         "preview": "Preview",
         "searchByName": "Search by name",
diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
index 12abd47492..74c5928f68 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
@@ -1,10 +1,12 @@
-import { Button, Flex, FormControl, FormLabel, Input, Text } from '@invoke-ai/ui-library';
+import { Box, Button, Flex, FormControl, FormLabel, Input, Text } from '@invoke-ai/ui-library';
+import { PRESET_PLACEHOLDER } from 'features/stylePresets/hooks/usePresetModifiedPrompts';
 import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
 import { toast } from 'features/toast/toast';
+import type { PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useCreateStylePresetMutation, useUpdateStylePresetMutation } from 'services/api/endpoints/stylePresets';
 
 import { StylePresetImageField } from './StylePresetImageField';
@@ -84,7 +86,17 @@ export const StylePresetForm = ({
 
       <StylePresetPromptField label="Positive Prompt" control={control} name="positivePrompt" />
       <StylePresetPromptField label="Negative Prompt" control={control} name="negativePrompt" />
-      <Text variant="subtext">{t('stylePresets.placeholderDirections')}</Text>
+      <Box>
+        <Text variant="subtext">{t('stylePresets.promptTemplatesDesc1')}</Text>
+        <Text variant="subtext">
+          <Trans
+            i18nKey="stylePresets.promptTemplatesDesc2"
+            components={{ Pre: <Pre /> }}
+            values={{ placeholder: PRESET_PLACEHOLDER }}
+          />
+        </Text>
+        <Text variant="subtext">{t('stylePresets.promptTemplatesDesc3')}</Text>
+      </Box>
 
       <Flex justifyContent="flex-end">
         <Button onClick={handleSubmit(handleClickSave)} isDisabled={!formState.isValid}>
@@ -94,3 +106,9 @@ export const StylePresetForm = ({
     </Flex>
   );
 };
+
+const Pre = (props: PropsWithChildren) => (
+  <Text as="span" fontFamily="monospace" fontWeight="semibold">
+    {props.children}
+  </Text>
+);