github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): update select object info tooltip

Browse Source
This commit is contained in:
psychedelicious
2025-09-11 12:02:29 +10:00
parent 67214e16c0
commit 370c3cd59b
2 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2453,9 +2453,14 @@
"saveAs": "Save As",
"cancel": "Cancel",
"process": "Process",
"help1": "Select a single target object. Add <Bold>Include</Bold> and <Bold>Exclude</Bold> points to indicate which parts of the layer are part of the target object.",
"help2": "Start with one <Bold>Include</Bold> point within the target object. Add more points to refine the selection. Fewer points typically produce better results.",
"help3": "Invert the selection to select everything except the target object.",
"desc": "Select a single target object. After selection is complete, click <Bold>Apply</Bold> to discard everything outside the selected area, or save the selection as a new layer.",
"visualModeDesc": "Visual mode uses box and point inputs to select an object.",
"visualMode1": "Click and drag to draw a box around the object you want to select. You may get better results by drawing the box a bit larger or smaller than the object.",
"visualMode2": "Click to add a green <Bold>include</Bold> point, or shift-click to add a red <Bold>exclude</Bold> point to tell the model what to include or exclude.",
"visualMode3": "Points can be used to refine a box selection or used independently.",
"promptModeDesc": "Prompt mode uses text input to select an object.",
"promptMode1": "Type a brief description of the object you want to select.",
"promptMode2": "Use simple language, avoiding complex descriptions or multiple objects.",
"clickToAdd": "Click on the layer to add a point",
"dragToMove": "Drag a point to move it",
"clickToRemove": "Click on a point to remove it",

39
invokeai/frontend/web/src/features/controlLayers/components/SelectObject/SelectObjectInfoTooltip.tsx
View File

@@ -1,7 +1,7 @@
import { Flex, Icon, ListItem, Text, Tooltip, UnorderedList } from '@invoke-ai/ui-library';
import type { PropsWithChildren } from 'react';
import { memo } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Trans } from 'react-i18next';
import { PiInfoBold } from 'react-icons/pi';
const Bold = (props: PropsWithChildren) => (
@@ -10,24 +10,35 @@ const Bold = (props: PropsWithChildren) => (
</Text>
);
const SelectObjectHelpTooltipContent = memo(() => {
const { t } = useTranslation();
const components = { Bold: <Bold /> };
const SelectObjectHelpTooltipContent = memo(() => {
return (
<Flex gap={3} flexDir="column">
<Text>
<Trans i18nKey="controlLayers.selectObject.help1" components={{ Bold: <Bold /> }} />
</Text>
<Text>
<Trans i18nKey="controlLayers.selectObject.help2" components={{ Bold: <Bold /> }} />
</Text>
<Text>
<Trans i18nKey="controlLayers.selectObject.help3" />
<Trans i18nKey="controlLayers.selectObject.desc" components={components} />
</Text>
<UnorderedList>
<ListItem>{t('controlLayers.selectObject.clickToAdd')}</ListItem>
<ListItem>{t('controlLayers.selectObject.dragToMove')}</ListItem>
<ListItem>{t('controlLayers.selectObject.clickToRemove')}</ListItem>
<ListItem>
<Trans i18nKey="controlLayers.selectObject.visualMode1" components={components} />
</ListItem>
<ListItem>
<Trans i18nKey="controlLayers.selectObject.visualMode2" components={components} />
</ListItem>
<ListItem>
<Trans i18nKey="controlLayers.selectObject.visualMode3" components={components} />
</ListItem>
</UnorderedList>
<Text>
<Trans i18nKey="controlLayers.selectObject.promptModeDesc" components={components} />
</Text>
<UnorderedList>
<ListItem>
<Trans i18nKey="controlLayers.selectObject.promptMode1" components={components} />
</ListItem>
<ListItem>
<Trans i18nKey="controlLayers.selectObject.promptMode2" components={components} />
</ListItem>
</UnorderedList>
</Flex>
);
@@ -37,7 +48,7 @@ SelectObjectHelpTooltipContent.displayName = 'SelectObjectHelpTooltipContent';
export const SelectObjectInfoTooltip = memo(() => {
return (
<Tooltip label={<SelectObjectHelpTooltipContent />}>
<Tooltip label={<SelectObjectHelpTooltipContent />} minW={420}>
<Flex alignItems="center">
<Icon as={PiInfoBold} color="base.500" />
</Flex>