Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

update descriptoin of placeholder in modal

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/public/locales/en.json
View File

@ -1706,7 +1706,9 @@
"name": "Name", "name": "Name",
"negativePrompt": "Negative Prompt", "negativePrompt": "Negative Prompt",
"noMatchingTemplates": "No matching templates", "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", "positivePrompt": "Positive Prompt",
"preview": "Preview", "preview": "Preview",
"searchByName": "Search by name", "searchByName": "Search by name",

24
invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
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 { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
import { toast } from 'features/toast/toast'; import { toast } from 'features/toast/toast';
import type { PropsWithChildren } from 'react';
import { useCallback } from 'react'; import { useCallback } from 'react';
import type { SubmitHandler } from 'react-hook-form'; import type { SubmitHandler } from 'react-hook-form';
import { useForm } 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 { useCreateStylePresetMutation, useUpdateStylePresetMutation } from 'services/api/endpoints/stylePresets';
import { StylePresetImageField } from './StylePresetImageField'; import { StylePresetImageField } from './StylePresetImageField';
@ -84,7 +86,17 @@ export const StylePresetForm = ({
<StylePresetPromptField label="Positive Prompt" control={control} name="positivePrompt" /> <StylePresetPromptField label="Positive Prompt" control={control} name="positivePrompt" />
<StylePresetPromptField label="Negative Prompt" control={control} name="negativePrompt" /> <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"> <Flex justifyContent="flex-end">
<Button onClick={handleSubmit(handleClickSave)} isDisabled={!formState.isValid}> <Button onClick={handleSubmit(handleClickSave)} isDisabled={!formState.isValid}>
@ -94,3 +106,9 @@ export const StylePresetForm = ({
</Flex> </Flex>
); );
}; };
const Pre = (props: PropsWithChildren) => (
<Text as="span" fontFamily="monospace" fontWeight="semibold">
{props.children}
</Text>
);