feat(ui): use translations for rp features

This commit is contained in:
psychedelicious 2024-04-19 22:30:20 +10:00 committed by Kent Keirsey
parent bb371cfeca
commit c613839740
6 changed files with 25 additions and 8 deletions

View File

@ -137,7 +137,8 @@
"green": "Green", "green": "Green",
"blue": "Blue", "blue": "Blue",
"alpha": "Alpha", "alpha": "Alpha",
"selected": "Selected" "selected": "Selected",
"viewer": "Viewer"
}, },
"controlnet": { "controlnet": {
"controlAdapter_one": "Control Adapter", "controlAdapter_one": "Control Adapter",
@ -1508,11 +1509,16 @@
"storeNotInitialized": "Store is not initialized" "storeNotInitialized": "Store is not initialized"
}, },
"regionalPrompts": { "regionalPrompts": {
"deleteAll": "Delete All",
"addLayer": "Add Layer", "addLayer": "Add Layer",
"moveToFront": "Move to Front", "moveToFront": "Move to Front",
"moveToBack": "Move to Back", "moveToBack": "Move to Back",
"moveForward": "Move Forward", "moveForward": "Move Forward",
"moveBackward": "Move Backward", "moveBackward": "Move Backward",
"brushSize": "Brush Size" "brushSize": "Brush Size",
"regionalPrompts": "Regional Prompts",
"enableRegionalPrompts": "Enable $t(regionalPrompts.regionalPrompts)",
"layerOpacity": "Layer Opacity",
"autoNegative": "Auto Negative"
} }
} }

View File

@ -2,14 +2,16 @@ import { Button } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { allLayersDeleted } from 'features/regionalPrompts/store/regionalPromptsSlice'; import { allLayersDeleted } from 'features/regionalPrompts/store/regionalPromptsSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
export const DeleteAllLayersButton = memo(() => { export const DeleteAllLayersButton = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const onClick = useCallback(() => { const onClick = useCallback(() => {
dispatch(allLayersDeleted()); dispatch(allLayersDeleted());
}, [dispatch]); }, [dispatch]);
return <Button onClick={onClick}>Delete All</Button>; return <Button onClick={onClick}>{t('regionalPrompts.deleteAll')}</Button>;
}); });
DeleteAllLayersButton.displayName = 'DeleteAllLayersButton'; DeleteAllLayersButton.displayName = 'DeleteAllLayersButton';

View File

@ -19,7 +19,7 @@ export const PromptLayerOpacity = memo(() => {
); );
return ( return (
<FormControl> <FormControl>
<FormLabel>Layer Opacity</FormLabel> <FormLabel>{t('regionalPrompts.layerOpacity')}</FormLabel>
<CompositeSlider <CompositeSlider
min={0.25} min={0.25}
max={1} max={1}

View File

@ -18,7 +18,7 @@ export const RPEnabledSwitch = memo(() => {
return ( return (
<FormControl flexGrow={0} gap={2} w="min-content"> <FormControl flexGrow={0} gap={2} w="min-content">
<FormLabel m={0}>Enable RP</FormLabel> <FormLabel>{t('regionalPrompts.enableRegionalPrompts')}</FormLabel>
<Switch isChecked={isEnabled} onChange={onChange} /> <Switch isChecked={isEnabled} onChange={onChange} />
</FormControl> </FormControl>
); );

View File

@ -54,7 +54,7 @@ export const RPLayerAutoNegativeCombobox = memo(({ layerId }: Props) => {
return ( return (
<FormControl flexGrow={0} gap={2} w="min-content"> <FormControl flexGrow={0} gap={2} w="min-content">
<FormLabel m={0}>AutoNegative</FormLabel> <FormLabel m={0}>{t('regionalPrompts.autoNegative')}</FormLabel>
<Combobox value={value} options={options} onChange={onChange} isSearchable={false} sx={{ w: '5.2rem' }} /> <Combobox value={value} options={options} onChange={onChange} isSearchable={false} sx={{ w: '5.2rem' }} />
</FormControl> </FormControl>
); );

View File

@ -1,15 +1,24 @@
import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library'; import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import CurrentImageDisplay from 'features/gallery/components/CurrentImage/CurrentImageDisplay'; import CurrentImageDisplay from 'features/gallery/components/CurrentImage/CurrentImageDisplay';
import { RegionalPromptsEditor } from 'features/regionalPrompts/components/RegionalPromptsEditor'; import { RegionalPromptsEditor } from 'features/regionalPrompts/components/RegionalPromptsEditor';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const TextToImageTab = () => { const TextToImageTab = () => {
const { t } = useTranslation();
const noOfRPLayers = useAppSelector(
(s) => s.regionalPrompts.present.layers.filter((l) => l.kind === 'regionalPromptLayer' && l.isVisible).length
);
return ( return (
<Box position="relative" w="full" h="full" p={2} borderRadius="base"> <Box position="relative" w="full" h="full" p={2} borderRadius="base">
<Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full"> <Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full">
<TabList> <TabList>
<Tab>Viewer</Tab> <Tab>{t('common.viewer')}</Tab>
<Tab>Regional Prompts</Tab> <Tab>
{t('regionalPrompts.regionalPrompts')}
{noOfRPLayers > 0 ? ` (${noOfRPLayers})` : ''}
</Tab>
</TabList> </TabList>
<TabPanels w="full" h="full"> <TabPanels w="full" h="full">