update descriptoin of placeholder in modal

This commit is contained in:
Mary Hipp 2024-08-12 13:37:04 -04:00
parent 4dbf851741
commit b70891c661
2 changed files with 24 additions and 4 deletions

View File

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

View File

@ -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>
);