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

Translation update (#4503)

Browse Source 
* Update Translations

* Fix Prettier Issue

* Fix Error in invokebutton.tsx

* More Translations

* few Fixes

* More Translations

* More Translations and lint Fixes

* Update constants.ts

Revert "Update constants.ts"

---------

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
This commit is contained in:
mickr777 2023-09-13 17:31:34 +10:00 committed by GitHub
parent 30792cb259
commit 8c63173b0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
92 changed files with 1502 additions and 961 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

32
invokeai/frontend/web/src/common/hooks/useIsReadyToInvoke.ts
View File

@ -6,6 +6,7 @@ import { isInvocationNode } from 'features/nodes/types/types';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { forEach, map } from 'lodash-es';
import { getConnectedEdges } from 'reactflow';
import i18n from 'i18next';
const selector = createSelector(
[stateSelector, activeTabNameSelector],
@ -19,22 +20,22 @@ const selector = createSelector(
// Cannot generate if already processing an image
if (isProcessing) {
reasons.push('System busy');
reasons.push(i18n.t('parameters.invoke.systemBusy'));
}
// Cannot generate if not connected
if (!isConnected) {
reasons.push('System disconnected');
reasons.push(i18n.t('parameters.invoke.systemDisconnected'));
}
if (activeTabName === 'img2img' && !initialImage) {
reasons.push('No initial image selected');
reasons.push(i18n.t('parameters.invoke.noInitialImageSelected'));
}
if (activeTabName === 'nodes') {
if (nodes.shouldValidateGraph) {
if (!nodes.nodes.length) {
reasons.push('No nodes in graph');
reasons.push(i18n.t('parameters.invoke.noNodesInGraph'));
}
nodes.nodes.forEach((node) => {
@ -46,7 +47,7 @@ const selector = createSelector(
if (!nodeTemplate) {
// Node type not found
reasons.push('Missing node template');
reasons.push(i18n.t('parameters.invoke.missingNodeTemplate'));
return;
}
@ -60,7 +61,7 @@ const selector = createSelector(
);
if (!fieldTemplate) {
reasons.push('Missing field template');
reasons.push(i18n.t('parameters.invoke.missingFieldTemplate'));
return;
}
@ -70,9 +71,10 @@ const selector = createSelector(
!hasConnection
) {
reasons.push(
`${node.data.label || nodeTemplate.title} -> ${
field.label || fieldTemplate.title
} missing input`
i18n.t('parameters.invoke.missingInputForField', {
nodeLabel: node.data.label || nodeTemplate.title,
fieldLabel: field.label || fieldTemplate.title,
})
);
return;
}
@ -81,7 +83,7 @@ const selector = createSelector(
}
} else {
if (!model) {
reasons.push('No model selected');
reasons.push(i18n.t('parameters.invoke.noModelSelected'));
}
if (state.controlNet.isEnabled) {
@ -90,7 +92,9 @@ const selector = createSelector(
return;
}
if (!controlNet.model) {
reasons.push(`ControlNet ${i + 1} has no model selected.`);
reasons.push(
i18n.t('parameters.invoke.noModelForControlNet', { index: i + 1 })
);
}
if (
@ -98,7 +102,11 @@ const selector = createSelector(
(!controlNet.processedControlImage &&
controlNet.processorType !== 'none')
) {
reasons.push(`ControlNet ${i + 1} has no control image`);
reasons.push(
i18n.t('parameters.invoke.noControlImageForControlNet', {
index: i + 1,
})
);
}
});
}

16
invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
View File

@ -21,6 +21,7 @@ import {
useRemoveImagesFromBoardMutation,
} from 'services/api/endpoints/images';
import { changeBoardReset, isModalOpenChanged } from '../store/slice';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
[stateSelector],
@ -42,10 +43,11 @@ const ChangeBoardModal = () => {
const { imagesToChange, isModalOpen } = useAppSelector(selector);
const [addImagesToBoard] = useAddImagesToBoardMutation();
const [removeImagesFromBoard] = useRemoveImagesFromBoardMutation();
const { t } = useTranslation();
const data = useMemo(() => {
const data: { label: string; value: string }[] = [
{ label: 'Uncategorized', value: 'none' },
{ label: t('boards.uncategorized'), value: 'none' },
];
(boards ?? []).forEach((board) =>
data.push({
@ -55,7 +57,7 @@ const ChangeBoardModal = () => {
);
return data;
}, [boards]);
}, [boards, t]);
const handleClose = useCallback(() => {
dispatch(changeBoardReset());
@ -97,7 +99,7 @@ const ChangeBoardModal = () => {
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
Change Board
{t('boards.changeBoard')}
</AlertDialogHeader>
<AlertDialogBody>
@ -107,7 +109,9 @@ const ChangeBoardModal = () => {
{`${imagesToChange.length > 1 ? 's' : ''}`} to board:
</Text>
<IAIMantineSearchableSelect
placeholder={isFetching ? 'Loading...' : 'Select Board'}
placeholder={
isFetching ? t('boards.loading') : t('boards.selectBoard')
}
disabled={isFetching}
onChange={(v) => setSelectedBoard(v)}
value={selectedBoard}
@ -117,10 +121,10 @@ const ChangeBoardModal = () => {
</AlertDialogBody>
<AlertDialogFooter>
<IAIButton ref={cancelRef} onClick={handleClose}>
Cancel
{t('boards.cancel')}
</IAIButton>
<IAIButton colorScheme="accent" onClick={handleChangeBoard} ml={3}>
Move
{t('boards.move')}
</IAIButton>
</AlertDialogFooter>
</AlertDialogContent>

26
invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
View File

@ -28,6 +28,7 @@ import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
import ParamControlNetControlMode from './parameters/ParamControlNetControlMode';
import ParamControlNetProcessorSelect from './parameters/ParamControlNetProcessorSelect';
import ParamControlNetResizeMode from './parameters/ParamControlNetResizeMode';
import { useTranslation } from 'react-i18next';
type ControlNetProps = {
controlNet: ControlNetConfig;
@ -37,6 +38,7 @@ const ControlNet = (props: ControlNetProps) => {
const { controlNet } = props;
const { controlNetId } = controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const activeTabName = useAppSelector(activeTabNameSelector);
@ -95,8 +97,8 @@ const ControlNet = (props: ControlNetProps) => {
>
<Flex sx={{ gap: 2, alignItems: 'center' }}>
<IAISwitch
tooltip="Toggle this ControlNet"
aria-label="Toggle this ControlNet"
tooltip={t('controlnet.toggleControlNet')}
aria-label={t('controlnet.toggleControlNet')}
isChecked={isEnabled}
onChange={handleToggleIsEnabled}
/>
@ -117,23 +119,31 @@ const ControlNet = (props: ControlNetProps) => {
)}
<IAIIconButton
size="sm"
tooltip="Duplicate"
aria-label="Duplicate"
tooltip={t('controlnet.duplicate')}
aria-label={t('controlnet.duplicate')}
onClick={handleDuplicate}
icon={<FaCopy />}
/>
<IAIIconButton
size="sm"
tooltip="Delete"
aria-label="Delete"
tooltip={t('controlnet.delete')}
aria-label={t('controlnet.delete')}
colorScheme="error"
onClick={handleDelete}
icon={<FaTrash />}
/>
<IAIIconButton
size="sm"
tooltip={isExpanded ? 'Hide Advanced' : 'Show Advanced'}
aria-label={isExpanded ? 'Hide Advanced' : 'Show Advanced'}
tooltip={
isExpanded
? t('controlnet.hideAdvanced')
: t('controlnet.showAdvanced')
}
aria-label={
isExpanded
? t('controlnet.hideAdvanced')
: t('controlnet.showAdvanced')
}
onClick={toggleIsExpanded}
variant="ghost"
sx={{

8
invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
View File

@ -26,6 +26,7 @@ import {
ControlNetConfig,
controlNetImageChanged,
} from '../store/controlNetSlice';
import { useTranslation } from 'react-i18next';
type Props = {
controlNet: ControlNetConfig;
@ -56,6 +57,7 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
} = controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const { pendingControlImages, autoAddBoardId } = useAppSelector(selector);
const activeTabName = useAppSelector(activeTabNameSelector);
@ -208,18 +210,18 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
<IAIDndImageIcon
onClick={handleResetControlImage}
icon={controlImage ? <FaUndo /> : undefined}
tooltip="Reset Control Image"
tooltip={t('controlnet.resetControlImage')}
/>
<IAIDndImageIcon
onClick={handleSaveControlImage}
icon={controlImage ? <FaSave size={16} /> : undefined}
tooltip="Save Control Image"
tooltip={t('controlnet.saveControlImage')}
styleOverrides={{ marginTop: 6 }}
/>
<IAIDndImageIcon
onClick={handleSetControlImageToDimensions}
icon={controlImage ? <FaRulerVertical size={16} /> : undefined}
tooltip="Set Control Image Dimensions To W/H"
tooltip={t('controlnet.setControlImageDimensions')}
styleOverrides={{ marginTop: 12 }}
/>
</>

6
invokeai/frontend/web/src/features/controlNet/components/ParamControlNetShouldAutoConfig.tsx
View File

@ -6,6 +6,7 @@ import {
} from 'features/controlNet/store/controlNetSlice';
import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type Props = {
controlNet: ControlNetConfig;
@ -15,6 +16,7 @@ const ParamControlNetShouldAutoConfig = (props: Props) => {
const { controlNetId, isEnabled, shouldAutoConfig } = props.controlNet;
const dispatch = useAppDispatch();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleShouldAutoConfigChanged = useCallback(() => {
dispatch(controlNetAutoConfigToggled({ controlNetId }));
@ -22,8 +24,8 @@ const ParamControlNetShouldAutoConfig = (props: Props) => {
return (
<IAISwitch
label="Auto configure processor"
aria-label="Auto configure processor"
label={t('controlnet.autoConfigure')}
aria-label={t('controlnet.autoConfigure')}
isChecked={shouldAutoConfig}
onChange={handleShouldAutoConfigChanged}
isDisabled={isBusy || !isEnabled}

10
invokeai/frontend/web/src/features/controlNet/components/imports/ControlNetCanvasImageImports.tsx
View File

@ -8,6 +8,7 @@ import {
import { ControlNetConfig } from 'features/controlNet/store/controlNetSlice';
import { memo, useCallback } from 'react';
import { FaImage, FaMask } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
type ControlNetCanvasImageImportsProps = {
controlNet: ControlNetConfig;
@ -18,6 +19,7 @@ const ControlNetCanvasImageImports = (
) => {
const { controlNet } = props;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleImportImageFromCanvas = useCallback(() => {
dispatch(canvasImageToControlNet({ controlNet }));
@ -36,15 +38,15 @@ const ControlNetCanvasImageImports = (
<IAIIconButton
size="sm"
icon={<FaImage />}
tooltip="Import Image From Canvas"
aria-label="Import Image From Canvas"
tooltip={t('controlnet.importImageFromCanvas')}
aria-label={t('controlnet.importImageFromCanvas')}
onClick={handleImportImageFromCanvas}
/>
<IAIIconButton
size="sm"
icon={<FaMask />}
tooltip="Import Mask From Canvas"
aria-label="Import Mask From Canvas"
tooltip={t('controlnet.importMaskFromCanvas')}
aria-label={t('controlnet.importMaskFromCanvas')}
onClick={handleImportMaskFromCanvas}
/>
</Flex>

6
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx
View File

@ -16,6 +16,7 @@ import {
controlNetEndStepPctChanged,
} from 'features/controlNet/store/controlNetSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type Props = {
controlNet: ControlNetConfig;
@ -27,6 +28,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
const { beginStepPct, endStepPct, isEnabled, controlNetId } =
props.controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleStepPctChanged = useCallback(
(v: number[]) => {
@ -48,10 +50,10 @@ const ParamControlNetBeginEnd = (props: Props) => {
return (
<FormControl isDisabled={!isEnabled}>
<FormLabel>Begin / End Step Percentage</FormLabel>
<FormLabel>{t('controlnet.beginEndStepPercent')}</FormLabel>
<HStack w="100%" gap={2} alignItems="center">
<RangeSlider
aria-label={['Begin Step %', 'End Step %']}
aria-label={['Begin Step %', 'End Step %!']}
value={[beginStepPct, endStepPct]}
onChange={handleStepPctChanged}
min={0}

18
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx
View File

@ -6,23 +6,25 @@ import {
controlNetControlModeChanged,
} from 'features/controlNet/store/controlNetSlice';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type ParamControlNetControlModeProps = {
controlNet: ControlNetConfig;
};
const CONTROL_MODE_DATA = [
{ label: 'Balanced', value: 'balanced' },
{ label: 'Prompt', value: 'more_prompt' },
{ label: 'Control', value: 'more_control' },
{ label: 'Mega Control', value: 'unbalanced' },
];
export default function ParamControlNetControlMode(
props: ParamControlNetControlModeProps
) {
const { controlMode, isEnabled, controlNetId } = props.controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const CONTROL_MODE_DATA = [
{ label: t('controlnet.balanced'), value: 'balanced' },
{ label: t('controlnet.prompt'), value: 'more_prompt' },
{ label: t('controlnet.control'), value: 'more_control' },
{ label: t('controlnet.megaControl'), value: 'unbalanced' },
];
const handleControlModeChange = useCallback(
(controlMode: ControlModes) => {
@ -34,7 +36,7 @@ export default function ParamControlNetControlMode(
return (
<IAIMantineSelect
disabled={!isEnabled}
label="Control Mode"
label={t('controlnet.controlMode')}
data={CONTROL_MODE_DATA}
value={String(controlMode)}
onChange={handleControlModeChange}

8
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
View File

@ -15,6 +15,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { forEach } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { useGetControlNetModelsQuery } from 'services/api/endpoints/models';
import { useTranslation } from 'react-i18next';
type ParamControlNetModelProps = {
controlNet: ControlNetConfig;
@ -35,6 +36,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
const isBusy = useAppSelector(selectIsBusy);
const { mainModel } = useAppSelector(selector);
const { t } = useTranslation();
const { data: controlNetModels } = useGetControlNetModelsQuery();
@ -58,13 +60,13 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
group: MODEL_TYPE_MAP[model.base_model],
disabled,
tooltip: disabled
? `Incompatible base model: ${model.base_model}`
? `${t('controlnet.incompatibleBaseModel')} ${model.base_model}`
: undefined,
});
});
return data;
}, [controlNetModels, mainModel?.base_model]);
}, [controlNetModels, mainModel?.base_model, t]);
// grab the full model entity from the RTK Query cache
const selectedModel = useMemo(
@ -105,7 +107,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
error={
!selectedModel || mainModel?.base_model !== selectedModel.base_model
}
placeholder="Select a model"
placeholder={t('controlnet.selectModel')}
value={selectedModel?.id ?? null}
onChange={handleModelChanged}
disabled={isBusy || !isEnabled}

4
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
View File

@ -15,6 +15,7 @@ import {
controlNetProcessorTypeChanged,
} from '../../store/controlNetSlice';
import { ControlNetProcessorType } from '../../store/types';
import { useTranslation } from 'react-i18next';
type ParamControlNetProcessorSelectProps = {
controlNet: ControlNetConfig;
@ -57,6 +58,7 @@ const ParamControlNetProcessorSelect = (
const { controlNetId, isEnabled, processorNode } = props.controlNet;
const isBusy = useAppSelector(selectIsBusy);
const controlNetProcessors = useAppSelector(selector);
const { t } = useTranslation();
const handleProcessorTypeChanged = useCallback(
(v: string | null) => {
@ -72,7 +74,7 @@ const ParamControlNetProcessorSelect = (
return (
<IAIMantineSearchableSelect
label="Processor"
label={t('controlnet.processor')}
value={processorNode.type ?? 'canny_image_processor'}
data={controlNetProcessors}
onChange={handleProcessorTypeChanged}

16
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetResizeMode.tsx
View File

@ -6,22 +6,24 @@ import {
controlNetResizeModeChanged,
} from 'features/controlNet/store/controlNetSlice';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type ParamControlNetResizeModeProps = {
controlNet: ControlNetConfig;
};
const RESIZE_MODE_DATA = [
{ label: 'Resize', value: 'just_resize' },
{ label: 'Crop', value: 'crop_resize' },
{ label: 'Fill', value: 'fill_resize' },
];
export default function ParamControlNetResizeMode(
props: ParamControlNetResizeModeProps
) {
const { resizeMode, isEnabled, controlNetId } = props.controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const RESIZE_MODE_DATA = [
{ label: t('controlnet.resize'), value: 'just_resize' },
{ label: t('controlnet.crop'), value: 'crop_resize' },
{ label: t('controlnet.fill'), value: 'fill_resize' },
];
const handleResizeModeChange = useCallback(
(resizeMode: ResizeModes) => {
@ -33,7 +35,7 @@ export default function ParamControlNetResizeMode(
return (
<IAIMantineSelect
disabled={!isEnabled}
label="Resize Mode"
label={t('controlnet.resizeMode')}
data={RESIZE_MODE_DATA}
value={String(resizeMode)}
onChange={handleResizeModeChange}

4
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx
View File

@ -5,6 +5,7 @@ import {
controlNetWeightChanged,
} from 'features/controlNet/store/controlNetSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type ParamControlNetWeightProps = {
controlNet: ControlNetConfig;
@ -13,6 +14,7 @@ type ParamControlNetWeightProps = {
const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
const { weight, isEnabled, controlNetId } = props.controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleWeightChanged = useCallback(
(weight: number) => {
dispatch(controlNetWeightChanged({ controlNetId, weight }));
@ -23,7 +25,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
return (
<IAISlider
isDisabled={!isEnabled}
label="Weight"
label={t('controlnet.weight')}
value={weight}
onChange={handleWeightChanged}
min={0}

6
invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx
View File

@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor
.default as RequiredCannyImageProcessorInvocation;
@ -21,6 +22,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
const { low_threshold, high_threshold } = processorNode;
const isBusy = useAppSelector(selectIsBusy);
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const handleLowThresholdChanged = useCallback(
(v: number) => {
@ -52,7 +54,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
<ProcessorWrapper>
<IAISlider
isDisabled={isBusy || !isEnabled}
label="Low Threshold"
label={t('controlnet.lowThreshold')}
value={low_threshold}
onChange={handleLowThresholdChanged}
handleReset={handleLowThresholdReset}
@ -64,7 +66,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
/>
<IAISlider
isDisabled={isBusy || !isEnabled}
label="High Threshold"
label={t('controlnet.highThreshold')}
value={high_threshold}
onChange={handleHighThresholdChanged}
handleReset={handleHighThresholdReset}

12
invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx
View File

@ -6,6 +6,7 @@ import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useAppSelector } from 'app/store/storeHooks';
import { selectIsBusy } from 'features/system/store/systemSelectors';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor
.default as RequiredContentShuffleImageProcessorInvocation;
@ -21,6 +22,7 @@ const ContentShuffleProcessor = (props: Props) => {
const { image_resolution, detect_resolution, w, h, f } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -90,7 +92,7 @@ const ContentShuffleProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@ -102,7 +104,7 @@ const ContentShuffleProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@ -114,7 +116,7 @@ const ContentShuffleProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="W"
label={t('controlnet.w')}
value={w}
onChange={handleWChanged}
handleReset={handleWReset}
@ -126,7 +128,7 @@ const ContentShuffleProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="H"
label={t('controlnet.h')}
value={h}
onChange={handleHChanged}
handleReset={handleHReset}
@ -138,7 +140,7 @@ const ContentShuffleProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="F"
label={t('controlnet.f')}
value={f}
onChange={handleFChanged}
handleReset={handleFReset}

8
invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx
View File

@ -7,6 +7,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor
.default as RequiredHedImageProcessorInvocation;
@ -25,6 +26,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
} = props;
const isBusy = useAppSelector(selectIsBusy);
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -62,7 +64,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@ -74,7 +76,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@ -86,7 +88,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISwitch
label="Scribble"
label={t('controlnet.scribble')}
isChecked={scribble}
onChange={handleScribbleChanged}
isDisabled={isBusy || !isEnabled}

6
invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx
View File

@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor
.default as RequiredLineartAnimeImageProcessorInvocation;
@ -21,6 +22,7 @@ const LineartAnimeProcessor = (props: Props) => {
const { image_resolution, detect_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -51,7 +53,7 @@ const LineartAnimeProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@ -63,7 +65,7 @@ const LineartAnimeProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}

8
invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx
View File

@ -7,6 +7,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor
.default as RequiredLineartImageProcessorInvocation;
@ -22,6 +23,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
const { image_resolution, detect_resolution, coarse } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -59,7 +61,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@ -71,7 +73,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@ -83,7 +85,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISwitch
label="Coarse"
label={t('controlnet.coarse')}
isChecked={coarse}
onChange={handleCoarseChanged}
isDisabled={isBusy || !isEnabled}

6
invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx
View File

@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor
.default as RequiredMediapipeFaceProcessorInvocation;
@ -21,6 +22,7 @@ const MediapipeFaceProcessor = (props: Props) => {
const { max_faces, min_confidence } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleMaxFacesChanged = useCallback(
(v: number) => {
@ -47,7 +49,7 @@ const MediapipeFaceProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Max Faces"
label={t('controlnet.maxFaces')}
value={max_faces}
onChange={handleMaxFacesChanged}
handleReset={handleMaxFacesReset}
@ -59,7 +61,7 @@ const MediapipeFaceProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Min Confidence"
label={t('controlnet.minConfidence')}
value={min_confidence}
onChange={handleMinConfidenceChanged}
handleReset={handleMinConfidenceReset}

6
invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx
View File

@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
.default as RequiredMidasDepthImageProcessorInvocation;
@ -21,6 +22,7 @@ const MidasDepthProcessor = (props: Props) => {
const { a_mult, bg_th } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleAMultChanged = useCallback(
(v: number) => {
@ -47,7 +49,7 @@ const MidasDepthProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="a_mult"
label={t('controlnet.amult')}
value={a_mult}
onChange={handleAMultChanged}
handleReset={handleAMultReset}
@ -60,7 +62,7 @@ const MidasDepthProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="bg_th"
label={t('controlnet.bgth')}
value={bg_th}
onChange={handleBgThChanged}
handleReset={handleBgThReset}

10
invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx
View File

@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor
.default as RequiredMlsdImageProcessorInvocation;
@ -21,6 +22,7 @@ const MlsdImageProcessor = (props: Props) => {
const { image_resolution, detect_resolution, thr_d, thr_v } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -73,7 +75,7 @@ const MlsdImageProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@ -85,7 +87,7 @@ const MlsdImageProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@ -97,7 +99,7 @@ const MlsdImageProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="W"
label={t('controlnet.w')}
value={thr_d}
onChange={handleThrDChanged}
handleReset={handleThrDReset}
@ -110,7 +112,7 @@ const MlsdImageProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="H"
label={t('controlnet.h')}
value={thr_v}
onChange={handleThrVChanged}
handleReset={handleThrVReset}

6
invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx
View File

@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor
.default as RequiredNormalbaeImageProcessorInvocation;
@ -21,6 +22,7 @@ const NormalBaeProcessor = (props: Props) => {
const { image_resolution, detect_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -51,7 +53,7 @@ const NormalBaeProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@ -63,7 +65,7 @@ const NormalBaeProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}

8
invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx
View File

@ -7,6 +7,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor
.default as RequiredOpenposeImageProcessorInvocation;
@ -22,6 +23,7 @@ const OpenposeProcessor = (props: Props) => {
const { image_resolution, detect_resolution, hand_and_face } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -59,7 +61,7 @@ const OpenposeProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@ -71,7 +73,7 @@ const OpenposeProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@ -83,7 +85,7 @@ const OpenposeProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISwitch
label="Hand and Face"
label={t('controlnet.handAndFace')}
isChecked={hand_and_face}
onChange={handleHandAndFaceChanged}
isDisabled={isBusy || !isEnabled}

10
invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx
View File

@ -7,6 +7,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor
.default as RequiredPidiImageProcessorInvocation;
@ -22,6 +23,7 @@ const PidiProcessor = (props: Props) => {
const { image_resolution, detect_resolution, scribble, safe } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -66,7 +68,7 @@ const PidiProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@ -78,7 +80,7 @@ const PidiProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@ -90,12 +92,12 @@ const PidiProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISwitch
label="Scribble"
label={t('controlnet.scribble')}
isChecked={scribble}
onChange={handleScribbleChanged}
/>
<IAISwitch
label="Safe"
label={t('controlnet.safe')}
isChecked={safe}
onChange={handleSafeChanged}
isDisabled={isBusy || !isEnabled}

108
invokeai/frontend/web/src/features/controlNet/store/constants.ts
View File

@ -2,6 +2,7 @@ import {
ControlNetProcessorType,
RequiredControlNetProcessorNode,
} from './types';
import i18n from 'i18next';
type ControlNetProcessorsDict = Record<
ControlNetProcessorType,
@ -12,7 +13,6 @@ type ControlNetProcessorsDict = Record<
default: RequiredControlNetProcessorNode | { type: 'none' };
}
>;
/**
* A dict of ControlNet processors, including:
* - type
@ -25,16 +25,24 @@ type ControlNetProcessorsDict = Record<
export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
none: {
type: 'none',
label: 'none',
description: '',
get label() {
return i18n.t('controlnet.none');
},
get description() {
return i18n.t('controlnet.noneDescription');
},
default: {
type: 'none',
},
},
canny_image_processor: {
type: 'canny_image_processor',
label: 'Canny',
description: '',
get label() {
return i18n.t('controlnet.canny');
},
get description() {
return i18n.t('controlnet.cannyDescription');
},
default: {
id: 'canny_image_processor',
type: 'canny_image_processor',
@ -44,8 +52,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
content_shuffle_image_processor: {
type: 'content_shuffle_image_processor',
label: 'Content Shuffle',
description: '',
get label() {
return i18n.t('controlnet.contentShuffle');
},
get description() {
return i18n.t('controlnet.contentShuffleDescription');
},
default: {
id: 'content_shuffle_image_processor',
type: 'content_shuffle_image_processor',
@ -58,8 +70,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
hed_image_processor: {
type: 'hed_image_processor',
label: 'HED',
description: '',
get label() {
return i18n.t('controlnet.hed');
},
get description() {
return i18n.t('controlnet.hedDescription');
},
default: {
id: 'hed_image_processor',
type: 'hed_image_processor',
@ -70,8 +86,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
lineart_anime_image_processor: {
type: 'lineart_anime_image_processor',
label: 'Lineart Anime',
description: '',
get label() {
return i18n.t('controlnet.lineartAnime');
},
get description() {
return i18n.t('controlnet.lineartAnimeDescription');
},
default: {
id: 'lineart_anime_image_processor',
type: 'lineart_anime_image_processor',
@ -81,8 +101,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
lineart_image_processor: {
type: 'lineart_image_processor',
label: 'Lineart',
description: '',
get label() {
return i18n.t('controlnet.lineart');
},
get description() {
return i18n.t('controlnet.lineartDescription');
},
default: {
id: 'lineart_image_processor',
type: 'lineart_image_processor',
@ -93,8 +117,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
mediapipe_face_processor: {
type: 'mediapipe_face_processor',
label: 'Mediapipe Face',
description: '',
get label() {
return i18n.t('controlnet.mediapipeFace');
},
get description() {
return i18n.t('controlnet.mediapipeFaceDescription');
},
default: {
id: 'mediapipe_face_processor',
type: 'mediapipe_face_processor',
@ -104,8 +132,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
midas_depth_image_processor: {
type: 'midas_depth_image_processor',
label: 'Depth (Midas)',
description: '',
get label() {
return i18n.t('controlnet.depthMidas');
},
get description() {
return i18n.t('controlnet.depthMidasDescription');
},
default: {
id: 'midas_depth_image_processor',
type: 'midas_depth_image_processor',
@ -115,8 +147,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
mlsd_image_processor: {
type: 'mlsd_image_processor',
label: 'M-LSD',
description: '',
get label() {
return i18n.t('controlnet.mlsd');
},
get description() {
return i18n.t('controlnet.mlsdDescription');
},
default: {
id: 'mlsd_image_processor',
type: 'mlsd_image_processor',
@ -128,8 +164,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
normalbae_image_processor: {
type: 'normalbae_image_processor',
label: 'Normal BAE',
description: '',
get label() {
return i18n.t('controlnet.normalBae');
},
get description() {
return i18n.t('controlnet.normalBaeDescription');
},
default: {
id: 'normalbae_image_processor',
type: 'normalbae_image_processor',
@ -139,8 +179,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
openpose_image_processor: {
type: 'openpose_image_processor',
label: 'Openpose',
description: '',
get label() {
return i18n.t('controlnet.openPose');
},
get description() {
return i18n.t('controlnet.openPoseDescription');
},
default: {
id: 'openpose_image_processor',
type: 'openpose_image_processor',
@ -151,8 +195,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
pidi_image_processor: {
type: 'pidi_image_processor',
label: 'PIDI',
description: '',
get label() {
return i18n.t('controlnet.pidi');
},
get description() {
return i18n.t('controlnet.pidiDescription');
},
default: {
id: 'pidi_image_processor',
type: 'pidi_image_processor',
@ -164,8 +212,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
zoe_depth_image_processor: {
type: 'zoe_depth_image_processor',
label: 'Depth (Zoe)',
description: '',
get label() {
return i18n.t('controlnet.depthZoe');
},
get description() {
return i18n.t('controlnet.depthZoeDescription');
},
default: {
id: 'zoe_depth_image_processor',
type: 'zoe_depth_image_processor',
@ -186,4 +238,6 @@ export const CONTROLNET_MODEL_DEFAULT_PROCESSORS: {
shuffle: 'content_shuffle_image_processor',
openpose: 'openpose_image_processor',
mediapipe: 'mediapipe_face_processor',
pidi: 'pidi_image_processor',
zoe: 'zoe_depth_image_processor',
};

23
invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
View File

@ -2,16 +2,19 @@ import { ListItem, Text, UnorderedList } from '@chakra-ui/react';
import { some } from 'lodash-es';
import { memo } from 'react';
import { ImageUsage } from '../store/types';
import { useTranslation } from 'react-i18next';
type Props = {
imageUsage?: ImageUsage;
topMessage?: string;
bottomMessage?: string;
};
const ImageUsageMessage = (props: Props) => {
const { t } = useTranslation();
const {
imageUsage,
topMessage = 'This image is currently in use in the following features:',
bottomMessage = 'If you delete this image, those features will immediately be reset.',
topMessage = t('gallery.currentlyInUse'),
bottomMessage = t('gallery.featuresWillReset'),
} = props;
if (!imageUsage) {
@ -26,10 +29,18 @@ const ImageUsageMessage = (props: Props) => {
<>
<Text>{topMessage}</Text>
<UnorderedList sx={{ paddingInlineStart: 6 }}>
{imageUsage.isInitialImage && <ListItem>Image to Image</ListItem>}
{imageUsage.isCanvasImage && <ListItem>Unified Canvas</ListItem>}
{imageUsage.isControlNetImage && <ListItem>ControlNet</ListItem>}
{imageUsage.isNodesImage && <ListItem>Node Editor</ListItem>}
{imageUsage.isInitialImage && (
<ListItem>{t('common.img2img')}</ListItem>
)}
{imageUsage.isCanvasImage && (
<ListItem>{t('common.unifiedCanvas')}</ListItem>
)}
{imageUsage.isControlNetImage && (
<ListItem>{t('common.controlNet')}</ListItem>
)}
{imageUsage.isNodesImage && (
<ListItem>{t('common.nodeEditor')}</ListItem>
)}
</UnorderedList>
<Text>{bottomMessage}</Text>
</>

4
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx
View File

@ -9,6 +9,7 @@ import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
import ParamDynamicPromptsCombinatorial from './ParamDynamicPromptsCombinatorial';
import ParamDynamicPromptsToggle from './ParamDynamicPromptsEnabled';
import ParamDynamicPromptsMaxPrompts from './ParamDynamicPromptsMaxPrompts';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -22,6 +23,7 @@ const selector = createSelector(
const ParamDynamicPromptsCollapse = () => {
const { activeLabel } = useAppSelector(selector);
const { t } = useTranslation();
const isDynamicPromptingEnabled =
useFeatureStatus('dynamicPrompting').isFeatureEnabled;
@ -31,7 +33,7 @@ const ParamDynamicPromptsCollapse = () => {
}
return (
<IAICollapse label="Dynamic Prompts" activeLabel={activeLabel}>
<IAICollapse label={t('prompt.dynamicPrompts')} activeLabel={activeLabel}>
<Flex sx={{ gap: 2, flexDir: 'column' }}>
<ParamDynamicPromptsToggle />
<ParamDynamicPromptsCombinatorial />

4
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx
View File

@ -5,6 +5,7 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { memo, useCallback } from 'react';
import { combinatorialToggled } from '../store/dynamicPromptsSlice';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -19,6 +20,7 @@ const selector = createSelector(
const ParamDynamicPromptsCombinatorial = () => {
const { combinatorial, isDisabled } = useAppSelector(selector);
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleChange = useCallback(() => {
dispatch(combinatorialToggled());
@ -27,7 +29,7 @@ const ParamDynamicPromptsCombinatorial = () => {
return (
<IAISwitch
isDisabled={isDisabled}
label="Combinatorial Generation"
label={t('prompt.combinatorial')}
isChecked={combinatorial}
onChange={handleChange}
/>

4
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsEnabled.tsx
View File

@ -5,6 +5,7 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { memo, useCallback } from 'react';
import { isEnabledToggled } from '../store/dynamicPromptsSlice';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -19,6 +20,7 @@ const selector = createSelector(
const ParamDynamicPromptsToggle = () => {
const dispatch = useAppDispatch();
const { isEnabled } = useAppSelector(selector);
const { t } = useTranslation();
const handleToggleIsEnabled = useCallback(() => {
dispatch(isEnabledToggled());
@ -26,7 +28,7 @@ const ParamDynamicPromptsToggle = () => {
return (
<IAISwitch
label="Enable Dynamic Prompts"
label={t('prompt.enableDynamicPrompts')}
isChecked={isEnabled}
onChange={handleToggleIsEnabled}
/>

4
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
View File

@ -8,6 +8,7 @@ import {
maxPromptsChanged,
maxPromptsReset,
} from '../store/dynamicPromptsSlice';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -31,6 +32,7 @@ const ParamDynamicPromptsMaxPrompts = () => {
const { maxPrompts, min, sliderMax, inputMax, isDisabled } =
useAppSelector(selector);
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleChange = useCallback(
(v: number) => {
@ -45,7 +47,7 @@ const ParamDynamicPromptsMaxPrompts = () => {
return (
<IAISlider
label="Max Prompts"
label={t('prompt.maxPrompts')}
isDisabled={isDisabled}
min={min}
max={sliderMax}

6
invokeai/frontend/web/src/features/embedding/components/AddEmbeddingButton.tsx
View File

@ -1,6 +1,7 @@
import IAIIconButton from 'common/components/IAIIconButton';
import { memo } from 'react';
import { FaCode } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
type Props = {
onClick: () => void;
@ -8,11 +9,12 @@ type Props = {
const AddEmbeddingButton = (props: Props) => {
const { onClick } = props;
const { t } = useTranslation();
return (
<IAIIconButton
size="sm"
aria-label="Add Embedding"
tooltip="Add Embedding"
aria-label={t('embedding.addEmbedding')}
tooltip={t('embedding.addEmbedding')}
icon={<FaCode />}
sx={{
p: 2,

10
invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx
View File

@ -16,6 +16,7 @@ import { forEach } from 'lodash-es';
import { PropsWithChildren, memo, useCallback, useMemo, useRef } from 'react';
import { useGetTextualInversionModelsQuery } from 'services/api/endpoints/models';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import { useTranslation } from 'react-i18next';
type Props = PropsWithChildren & {
onSelect: (v: string) => void;
@ -27,6 +28,7 @@ const ParamEmbeddingPopover = (props: Props) => {
const { onSelect, isOpen, onClose, children } = props;
const { data: embeddingQueryData } = useGetTextualInversionModelsQuery();
const inputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation();
const currentMainModel = useAppSelector(
(state: RootState) => state.generation.model
@ -52,7 +54,7 @@ const ParamEmbeddingPopover = (props: Props) => {
group: MODEL_TYPE_MAP[embedding.base_model],
disabled,
tooltip: disabled
? `Incompatible base model: ${embedding.base_model}`
? `${t('embedding.incompatibleModel')} ${embedding.base_model}`
: undefined,
});
});
@ -63,7 +65,7 @@ const ParamEmbeddingPopover = (props: Props) => {
);
return data.sort((a, b) => (a.disabled && !b.disabled ? 1 : -1));
}, [embeddingQueryData, currentMainModel?.base_model]);
}, [embeddingQueryData, currentMainModel?.base_model, t]);
const handleChange = useCallback(
(v: string | null) => {
@ -118,10 +120,10 @@ const ParamEmbeddingPopover = (props: Props) => {
<IAIMantineSearchableSelect
inputRef={inputRef}
autoFocus
placeholder="Add Embedding"
placeholder={t('embedding.addEmbedding')}
value={null}
data={data}
nothingFound="No matching Embeddings"
nothingFound={t('embedding.noMatchingEmbedding')}
itemComponent={IAIMantineSelectItemWithTooltip}
disabled={data.length === 0}
onDropdownClose={onClose}

8
invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
View File

@ -8,6 +8,7 @@ import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectI
import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useRef } from 'react';
import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
[stateSelector],
@ -26,6 +27,7 @@ const selector = createSelector(
const BoardAutoAddSelect = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const { autoAddBoardId, autoAssignBoardOnClick, isProcessing } =
useAppSelector(selector);
const inputRef = useRef<HTMLInputElement>(null);
@ -63,13 +65,13 @@ const BoardAutoAddSelect = () => {
return (
<IAIMantineSearchableSelect
label="Auto-Add Board"
label={t('boards.autoAddBoard')}
inputRef={inputRef}
autoFocus
placeholder="Select a Board"
placeholder={t('boards.selectBoard')}
value={autoAddBoardId}
data={boards}
nothingFound="No matching Boards"
nothingFound={t('boards.noMatching')}
itemComponent={IAIMantineSelectItemWithTooltip}
disabled={!hasBoards || autoAssignBoardOnClick || isProcessing}
filter={(value, item: SelectItem) =>

5
invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
View File

@ -16,6 +16,7 @@ import { menuListMotionProps } from 'theme/components/menu';
import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems';
import NoBoardContextMenuItems from './NoBoardContextMenuItems';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { useTranslation } from 'react-i18next';
type Props = {
board?: BoardDTO;
@ -59,6 +60,8 @@ const BoardContextMenu = ({
e.preventDefault();
}, []);
const { t } = useTranslation();
return (
<IAIContextMenu<HTMLDivElement>
menuProps={{ size: 'sm', isLazy: true }}
@ -78,7 +81,7 @@ const BoardContextMenu = ({
isDisabled={isAutoAdd || isProcessing || autoAssignBoardOnClick}
onClick={handleSetAutoAdd}
>
Auto-add to this Board
{t('boards.menuItemAutoAdd')}
</MenuItem>
{!board && <NoBoardContextMenuItems />}
{board && (

12
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
View File

@ -2,22 +2,22 @@ import IAIIconButton from 'common/components/IAIIconButton';
import { memo, useCallback } from 'react';
import { FaPlus } from 'react-icons/fa';
import { useCreateBoardMutation } from 'services/api/endpoints/boards';
const DEFAULT_BOARD_NAME = 'My Board';
import { useTranslation } from 'react-i18next';
const AddBoardButton = () => {
const { t } = useTranslation();
const [createBoard, { isLoading }] = useCreateBoardMutation();
const DEFAULT_BOARD_NAME = t('boards.myBoard');
const handleCreateBoard = useCallback(() => {
createBoard(DEFAULT_BOARD_NAME);
}, [createBoard]);
}, [createBoard, DEFAULT_BOARD_NAME]);
return (
<IAIIconButton
icon={<FaPlus />}
isLoading={isLoading}
tooltip="Add Board"
aria-label="Add Board"
tooltip={t('boards.addBoard')}
aria-label={t('boards.addBoard')}
onClick={handleCreateBoard}
size="sm"
/>

6
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
View File

@ -18,6 +18,7 @@ import {
useEffect,
useRef,
} from 'react';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
[stateSelector],
@ -32,6 +33,7 @@ const BoardsSearch = () => {
const dispatch = useAppDispatch();
const { boardSearchText } = useAppSelector(selector);
const inputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation();
const handleBoardSearch = useCallback(
(searchTerm: string) => {
@ -73,7 +75,7 @@ const BoardsSearch = () => {
<InputGroup>
<Input
ref={inputRef}
placeholder="Search Boards..."
placeholder={t('boards.searchBoard')}
value={boardSearchText}
onKeyDown={handleKeydown}
onChange={handleChange}
@ -84,7 +86,7 @@ const BoardsSearch = () => {
onClick={clearBoardSearch}
size="xs"
variant="ghost"
aria-label="Clear Search"
aria-label={t('boards.clearSearch')}
opacity={0.5}
icon={<CloseIcon boxSize={2} />}
/>

4
invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
View File

@ -132,8 +132,8 @@ const DeleteBoardModal = (props: Props) => {
) : (
<ImageUsageMessage
imageUsage={imageUsageSummary}
topMessage="This board contains images used in the following features:"
bottomMessage="Deleting this board and its images will reset any features currently using them."
topMessage={t('boards.topMessage')}
bottomMessage={t('boards.bottomMessage')}
/>
)}
<Text>Deleted boards cannot be restored.</Text>

5
invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
View File

@ -19,6 +19,7 @@ import { FaImage } from 'react-icons/fa';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import ImageMetadataViewer from '../ImageMetadataViewer/ImageMetadataViewer';
import NextPrevImageButtons from '../NextPrevImageButtons';
import { useTranslation } from 'react-i18next';
export const imagesSelector = createSelector(
[stateSelector, selectLastSelectedImage],
@ -117,6 +118,8 @@ const CurrentImagePreview = () => {
const timeoutId = useRef(0);
const { t } = useTranslation();
const handleMouseOver = useCallback(() => {
setShouldShowNextPrevButtons(true);
window.clearTimeout(timeoutId.current);
@ -164,7 +167,7 @@ const CurrentImagePreview = () => {
isUploadDisabled={true}
fitContainer
useThumbailFallback
dropLabel="Set as Current Image"
dropLabel={t('gallery.setCurrentImage')}
noContentFallback={
<IAINoContentFallback icon={FaImage} label="No image selected" />
}

4
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@ -18,6 +18,7 @@ import {
useUnstarImagesMutation,
} from 'services/api/endpoints/images';
import IAIDndImageIcon from '../../../../common/components/IAIDndImageIcon';
import { useTranslation } from 'react-i18next';
interface HoverableImageProps {
imageName: string;
@ -28,6 +29,7 @@ const GalleryImage = (props: HoverableImageProps) => {
const { imageName } = props;
const { currentData: imageDTO } = useGetImageDTOQuery(imageName);
const shift = useAppSelector((state) => state.hotkeys.shift);
const { t } = useTranslation();
const { handleClick, isSelected, selection, selectionCount } =
useMultiselect(imageDTO);
@ -136,7 +138,7 @@ const GalleryImage = (props: HoverableImageProps) => {
<IAIDndImageIcon
onClick={handleDelete}
icon={<FaTrash />}
tooltip="Delete"
tooltip={t('gallery.deleteImage')}
styleOverrides={{
bottom: 2,
top: 'auto',

6
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
View File

@ -95,7 +95,7 @@ const GalleryImageGrid = () => {
justifyContent: 'center',
}}
>
<IAINoContentFallback label="Loading..." icon={FaImage} />
<IAINoContentFallback label={t('gallery.loading')} icon={FaImage} />
</Flex>
);
}
@ -140,7 +140,7 @@ const GalleryImageGrid = () => {
onClick={handleLoadMoreImages}
isDisabled={!areMoreAvailable}
isLoading={isFetching}
loadingText="Loading"
loadingText={t('gallery.loading')}
flexShrink={0}
>
{`Load More (${currentData.ids.length} of ${currentViewTotal})`}
@ -153,7 +153,7 @@ const GalleryImageGrid = () => {
return (
<Box sx={{ w: 'full', h: 'full' }}>
<IAINoContentFallback
label="Unable to load Gallery"
label={t('gallery.unableToLoad')}
icon={FaExclamationCircle}
/>
</Box>

11
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
View File

@ -3,6 +3,7 @@ import { isString } from 'lodash-es';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo, useCallback, useMemo } from 'react';
import { FaCopy, FaDownload } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
type Props = {
label: string;
@ -33,6 +34,8 @@ const DataViewer = (props: Props) => {
a.remove();
}, [dataString, label, fileName]);
const { t } = useTranslation();
return (
<Flex
layerStyle="second"
@ -73,9 +76,9 @@ const DataViewer = (props: Props) => {
</Box>
<Flex sx={{ position: 'absolute', top: 0, insetInlineEnd: 0, p: 2 }}>
{withDownload && (
<Tooltip label={`Download ${label} JSON`}>
<Tooltip label={`${t('gallery.download')} ${label} JSON`}>
<IconButton
aria-label={`Download ${label} JSON`}
aria-label={`${t('gallery.download')} ${label} JSON`}
icon={<FaDownload />}
variant="ghost"
opacity={0.7}
@ -84,9 +87,9 @@ const DataViewer = (props: Props) => {
</Tooltip>
)}
{withCopy && (
<Tooltip label={`Copy ${label} JSON`}>
<Tooltip label={`${t('gallery.copy')} ${label} JSON`}>
<IconButton
aria-label={`Copy ${label} JSON`}
aria-label={`${t('gallery.copy')} ${label} JSON`}
icon={<FaCopy />}
variant="ghost"
opacity={0.7}

44
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
View File

@ -2,6 +2,7 @@ import { CoreMetadata } from 'features/nodes/types/types';
import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
import { memo, useCallback } from 'react';
import ImageMetadataItem from './ImageMetadataItem';
import { useTranslation } from 'react-i18next';
type Props = {
metadata?: CoreMetadata;
@ -10,6 +11,8 @@ type Props = {
const ImageMetadataActions = (props: Props) => {
const { metadata } = props;
const { t } = useTranslation();
const {
recallPositivePrompt,
recallNegativePrompt,
@ -70,17 +73,20 @@ const ImageMetadataActions = (props: Props) => {
return (
<>
{metadata.created_by && (
<ImageMetadataItem label="Created By" value={metadata.created_by} />
<ImageMetadataItem
label={t('metadata.createdBy')}
value={metadata.created_by}
/>
)}
{metadata.generation_mode && (
<ImageMetadataItem
label="Generation Mode"
label={t('metadata.generationMode')}
value={metadata.generation_mode}
/>
)}
{metadata.positive_prompt && (
<ImageMetadataItem
label="Positive Prompt"
label={t('metadata.positivePrompt')}
labelPosition="top"
value={metadata.positive_prompt}
onClick={handleRecallPositivePrompt}
@ -88,7 +94,7 @@ const ImageMetadataActions = (props: Props) => {
)}
{metadata.negative_prompt && (
<ImageMetadataItem
label="Negative Prompt"
label={t('metadata.NegativePrompt')}
labelPosition="top"
value={metadata.negative_prompt}
onClick={handleRecallNegativePrompt}
@ -96,7 +102,7 @@ const ImageMetadataActions = (props: Props) => {
)}
{metadata.seed !== undefined && metadata.seed !== null && (
<ImageMetadataItem
label="Seed"
label={t('metadata.seed')}
value={metadata.seed}
onClick={handleRecallSeed}
/>
@ -105,63 +111,63 @@ const ImageMetadataActions = (props: Props) => {
metadata.model !== null &&
metadata.model.model_name && (
<ImageMetadataItem
label="Model"
label={t('metadata.model')}
value={metadata.model.model_name}
onClick={handleRecallModel}
/>
)}
{metadata.width && (
<ImageMetadataItem
label="Width"
label={t('metadata.width')}
value={metadata.width}
onClick={handleRecallWidth}
/>
)}
{metadata.height && (
<ImageMetadataItem
label="Height"
label={t('metadata.height')}
value={metadata.height}
onClick={handleRecallHeight}
/>
)}
{/* {metadata.threshold !== undefined && (
<MetadataItem
label="Noise Threshold"
label={t('metadata.threshold')}
value={metadata.threshold}
onClick={() => dispatch(setThreshold(Number(metadata.threshold)))}
/>
)}
{metadata.perlin !== undefined && (
<MetadataItem
label="Perlin Noise"
label={t('metadata.perlin')}
value={metadata.perlin}
onClick={() => dispatch(setPerlin(Number(metadata.perlin)))}
/>
)} */}
{metadata.scheduler && (
<ImageMetadataItem
label="Scheduler"
label={t('metadata.scheduler')}
value={metadata.scheduler}
onClick={handleRecallScheduler}
/>
)}
{metadata.steps && (
<ImageMetadataItem
label="Steps"
label={t('metadata.steps')}
value={metadata.steps}
onClick={handleRecallSteps}
/>
)}
{metadata.cfg_scale !== undefined && metadata.cfg_scale !== null && (
<ImageMetadataItem
label="CFG scale"
label={t('metadata.cfgScale')}
value={metadata.cfg_scale}
onClick={handleRecallCfgScale}
/>
)}
{/* {metadata.variations && metadata.variations.length > 0 && (
<MetadataItem
label="Seed-weight pairs"
label="{t('metadata.variations')}
value={seedWeightsToString(metadata.variations)}
onClick={() =>
dispatch(
@ -172,14 +178,14 @@ const ImageMetadataActions = (props: Props) => {
)}
{metadata.seamless && (
<MetadataItem
label="Seamless"
label={t('metadata.seamless')}
value={metadata.seamless}
onClick={() => dispatch(setSeamless(metadata.seamless))}
/>
)}
{metadata.hires_fix && (
<MetadataItem
label="High Resolution Optimization"
label={t('metadata.hiresFix')}
value={metadata.hires_fix}
onClick={() => dispatch(setHiresFix(metadata.hires_fix))}
/>
@ -187,7 +193,7 @@ const ImageMetadataActions = (props: Props) => {
{/* {init_image_path && (
<MetadataItem
label="Initial image"
label={t('metadata.initImage')}
value={init_image_path}
isLink
onClick={() => dispatch(setInitialImage(init_image_path))}
@ -195,14 +201,14 @@ const ImageMetadataActions = (props: Props) => {
)} */}
{metadata.strength && (
<ImageMetadataItem
label="Image to image strength"
label={t('metadata.strength')}
value={metadata.strength}
onClick={handleRecallStrength}
/>
)}
{/* {metadata.fit && (
<MetadataItem
label="Image to image fit"
label={t('metadata.fit')}
value={metadata.fit}
onClick={() => dispatch(setShouldFitToWidthHeight(metadata.fit))}
/>

20
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
View File

@ -17,6 +17,7 @@ import DataViewer from './DataViewer';
import ImageMetadataActions from './ImageMetadataActions';
import { useAppSelector } from '../../../../app/store/storeHooks';
import { configSelector } from '../../../system/store/configSelectors';
import { useTranslation } from 'react-i18next';
type ImageMetadataViewerProps = {
image: ImageDTO;
@ -28,6 +29,7 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
// useHotkeys('esc', () => {
// dispatch(setShouldShowImageDetails(false));
// });
const { t } = useTranslation();
const { shouldFetchMetadataFromApi } = useAppSelector(configSelector);
@ -70,31 +72,31 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }}
>
<TabList>
<Tab>Metadata</Tab>
<Tab>Image Details</Tab>
<Tab>Workflow</Tab>
<Tab>{t('metadata.metadata')}</Tab>
<Tab>{t('metadata.imageDetails')}</Tab>
<Tab>{t('metadata.workflow')}</Tab>
</TabList>
<TabPanels>
<TabPanel>
{metadata ? (
<DataViewer data={metadata} label="Metadata" />
<DataViewer data={metadata} label={t('metadata.metadata')} />
) : (
<IAINoContentFallback label="No metadata found" />
<IAINoContentFallback label={t('metadata.noMetaData')} />
)}
</TabPanel>
<TabPanel>
{image ? (
<DataViewer data={image} label="Image Details" />
<DataViewer data={image} label={t('metadata.imageDetails')} />
) : (
<IAINoContentFallback label="No image details found" />
<IAINoContentFallback label={t('metadata.noImageDetails')} />
)}
</TabPanel>
<TabPanel>
{workflow ? (
<DataViewer data={workflow} label="Workflow" />
<DataViewer data={workflow} label={t('metadata.workflow')} />
) : (
<IAINoContentFallback label="No workflow found" />
<IAINoContentFallback label={t('metadata.noWorkFlow')} />
)}
</TabPanel>
</TabPanels>

4
invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
View File

@ -12,9 +12,11 @@ import TopCenterPanel from './flow/panels/TopCenterPanel/TopCenterPanel';
import TopRightPanel from './flow/panels/TopRightPanel/TopRightPanel';
import BottomLeftPanel from './flow/panels/BottomLeftPanel/BottomLeftPanel';
import MinimapPanel from './flow/panels/MinimapPanel/MinimapPanel';
import { useTranslation } from 'react-i18next';
const NodeEditor = () => {
const isReady = useAppSelector((state) => state.nodes.isReady);
const { t } = useTranslation();
return (
<Flex
layerStyle="first"
@ -82,7 +84,7 @@ const NodeEditor = () => {
}}
>
<IAINoContentFallback
label="Loading Nodes..."
label={t('nodes.loadingNodes')}
icon={MdDeviceHub}
/>
</Flex>

81
invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
View File

@ -24,6 +24,7 @@ import { HotkeyCallback } from 'react-hotkeys-hook/dist/types';
import 'reactflow/dist/style.css';
import { AnyInvocationType } from 'services/events/types';
import { AddNodePopoverSelectItem } from './AddNodePopoverSelectItem';
import { useTranslation } from 'react-i18next';
type NodeTemplate = {
label: string;
@ -48,43 +49,45 @@ const filter = (value: string, item: NodeTemplate) => {
);
};
const selector = createSelector(
[stateSelector],
({ nodes }) => {
const data: NodeTemplate[] = map(nodes.nodeTemplates, (template) => {
return {
label: template.title,
value: template.type,
description: template.description,
tags: template.tags,
};
});
data.push({
label: 'Progress Image',
value: 'current_image',
description: 'Displays the current image in the Node Editor',
tags: ['progress'],
});
data.push({
label: 'Notes',
value: 'notes',
description: 'Add notes about your workflow',
tags: ['notes'],
});
data.sort((a, b) => a.label.localeCompare(b.label));
return { data };
},
defaultSelectorOptions
);
const AddNodePopover = () => {
const dispatch = useAppDispatch();
const buildInvocation = useBuildNodeData();
const toaster = useAppToaster();
const { t } = useTranslation();
const selector = createSelector(
[stateSelector],
({ nodes }) => {
const data: NodeTemplate[] = map(nodes.nodeTemplates, (template) => {
return {
label: template.title,
value: template.type,
description: template.description,
tags: template.tags,
};
});
data.push({
label: t('nodes.currentImage'),
value: 'current_image',
description: t('nodes.currentImageDescription'),
tags: ['progress'],
});
data.push({
label: t('nodes.notes'),
value: 'notes',
description: t('nodes.notesDescription'),
tags: ['notes'],
});
data.sort((a, b) => a.label.localeCompare(b.label));
return { data, t };
},
defaultSelectorOptions
);
const { data } = useAppSelector(selector);
const isOpen = useAppSelector((state) => state.nodes.isAddNodePopoverOpen);
const inputRef = useRef<HTMLInputElement>(null);
@ -92,18 +95,20 @@ const AddNodePopover = () => {
const addNode = useCallback(
(nodeType: AnyInvocationType) => {
const invocation = buildInvocation(nodeType);
if (!invocation) {
const errorMessage = t('nodes.unknownInvocation', {
nodeType: nodeType,
});
toaster({
status: 'error',
title: `Unknown Invocation type ${nodeType}`,
title: errorMessage,
});
return;
}
dispatch(nodeAdded(invocation));
},
[dispatch, buildInvocation, toaster]
[dispatch, buildInvocation, toaster, t]
);
const handleChange = useCallback(
@ -179,11 +184,11 @@ const AddNodePopover = () => {
<IAIMantineSearchableSelect
inputRef={inputRef}
selectOnBlur={false}
placeholder="Search for nodes"
placeholder={t('nodes.nodeSearch')}
value={null}
data={data}
maxDropdownHeight={400}
nothingFound="No matching nodes"
nothingFound={t('nodes.noMatchingNodes')}
itemComponent={AddNodePopoverSelectItem}
filter={filter}
onChange={handleChange}

27
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeNotes.tsx
View File

@ -22,6 +22,7 @@ import { memo, useMemo } from 'react';
import { FaInfoCircle } from 'react-icons/fa';
import NotesTextarea from './NotesTextarea';
import { useDoNodeVersionsMatch } from 'features/nodes/hooks/useDoNodeVersionsMatch';
import { useTranslation } from 'react-i18next';
interface Props {
nodeId: string;
@ -32,6 +33,7 @@ const InvocationNodeNotes = ({ nodeId }: Props) => {
const label = useNodeLabel(nodeId);
const title = useNodeTemplateTitle(nodeId);
const doVersionsMatch = useDoNodeVersionsMatch(nodeId);
const { t } = useTranslation();
return (
<>
@ -65,7 +67,7 @@ const InvocationNodeNotes = ({ nodeId }: Props) => {
<Modal isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader>{label || title || 'Unknown Node'}</ModalHeader>
<ModalHeader>{label || title || t('nodes.unknownNode')}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<NotesTextarea nodeId={nodeId} />
@ -82,6 +84,7 @@ export default memo(InvocationNodeNotes);
const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
const data = useNodeData(nodeId);
const nodeTemplate = useNodeTemplate(nodeId);
const { t } = useTranslation();
const title = useMemo(() => {
if (data?.label && nodeTemplate?.title) {
@ -96,8 +99,8 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
return nodeTemplate.title;
}
return 'Unknown Node';
}, [data, nodeTemplate]);
return t('nodes.unknownNode');
}, [data, nodeTemplate, t]);
const versionComponent = useMemo(() => {
if (!isInvocationNodeData(data) || !nodeTemplate) {
@ -107,7 +110,7 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
if (!data.version) {
return (
<Text as="span" sx={{ color: 'error.500' }}>
Version unknown
{t('nodes.versionUnknown')}
</Text>
);
}
@ -115,7 +118,7 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
if (!nodeTemplate.version) {
return (
<Text as="span" sx={{ color: 'error.500' }}>
Version {data.version} (unknown template)
{t('nodes.version')} {data.version} ({t('nodes.unknownTemplate')})
</Text>
);
}
@ -123,7 +126,7 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
if (compare(data.version, nodeTemplate.version, '<')) {
return (
<Text as="span" sx={{ color: 'error.500' }}>
Version {data.version} (update node)
{t('nodes.version')} {data.version} ({t('nodes.updateNode')})
</Text>
);
}
@ -131,16 +134,20 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
if (compare(data.version, nodeTemplate.version, '>')) {
return (
<Text as="span" sx={{ color: 'error.500' }}>
Version {data.version} (update app)
{t('nodes.version')} {data.version} ({t('nodes.updateApp')})
</Text>
);
}
return <Text as="span">Version {data.version}</Text>;
}, [data, nodeTemplate]);
return (
<Text as="span">
{t('nodes.version')} {data.version}
</Text>
);
}, [data, nodeTemplate, t]);
if (!isInvocationNodeData(data)) {
return <Text sx={{ fontWeight: 600 }}>Unknown Node</Text>;
return <Text sx={{ fontWeight: 600 }}>{t('nodes.unknownNode')}</Text>;
}
return (

15
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
View File

@ -14,6 +14,7 @@ import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
import { NodeExecutionState, NodeStatus } from 'features/nodes/types/types';
import { memo, useMemo } from 'react';
import { FaCheck, FaEllipsisH, FaExclamation } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
type Props = {
nodeId: string;
@ -72,10 +73,10 @@ type TooltipLabelProps = {
const TooltipLabel = memo(({ nodeExecutionState }: TooltipLabelProps) => {
const { status, progress, progressImage } = nodeExecutionState;
const { t } = useTranslation();
if (status === NodeStatus.PENDING) {
return <Text>Pending</Text>;
}
if (status === NodeStatus.IN_PROGRESS) {
if (progressImage) {
return (
@ -97,18 +98,22 @@ const TooltipLabel = memo(({ nodeExecutionState }: TooltipLabelProps) => {
}
if (progress !== null) {
return <Text>In Progress ({Math.round(progress * 100)}%)</Text>;
return (
<Text>
{t('nodes.executionStateInProgress')} ({Math.round(progress * 100)}%)
</Text>
);
}
return <Text>In Progress</Text>;
return <Text>{t('nodes.executionStateInProgress')}</Text>;
}
if (status === NodeStatus.COMPLETED) {
return <Text>Completed</Text>;
return <Text>{t('nodes.executionStateCompleted')}</Text>;
}
if (status === NodeStatus.FAILED) {
return <Text>nodeExecutionState.error</Text>;
return <Text>{t('nodes.executionStateError')}</Text>;
}
return null;

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx
View File

@ -5,10 +5,12 @@ import { useNodeData } from 'features/nodes/hooks/useNodeData';
import { nodeNotesChanged } from 'features/nodes/store/nodesSlice';
import { isInvocationNodeData } from 'features/nodes/types/types';
import { ChangeEvent, memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const NotesTextarea = ({ nodeId }: { nodeId: string }) => {
const dispatch = useAppDispatch();
const data = useNodeData(nodeId);
const { t } = useTranslation();
const handleNotesChanged = useCallback(
(e: ChangeEvent<HTMLTextAreaElement>) => {
dispatch(nodeNotesChanged({ nodeId, notes: e.target.value }));
@ -20,7 +22,7 @@ const NotesTextarea = ({ nodeId }: { nodeId: string }) => {
}
return (
<FormControl>
<FormLabel>Notes</FormLabel>
<FormLabel>{t('nodes.notes')}</FormLabel>
<IAITextarea
value={data?.notes}
onChange={handleNotesChanged}

12
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
View File

@ -14,6 +14,7 @@ import { fieldLabelChanged } from 'features/nodes/store/nodesSlice';
import { MouseEvent, memo, useCallback, useEffect, useState } from 'react';
import FieldTooltipContent from './FieldTooltipContent';
import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
import { useTranslation } from 'react-i18next';
interface Props {
nodeId: string;
@ -33,10 +34,11 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
} = props;
const label = useFieldLabel(nodeId, fieldName);
const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, kind);
const { t } = useTranslation();
const dispatch = useAppDispatch();
const [localTitle, setLocalTitle] = useState(
label || fieldTemplateTitle || 'Unknown Field'
label || fieldTemplateTitle || t('nodes.unknownFeild')
);
const handleSubmit = useCallback(
@ -44,10 +46,10 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
if (newTitle && (newTitle === label || newTitle === fieldTemplateTitle)) {
return;
}
setLocalTitle(newTitle || fieldTemplateTitle || 'Unknown Field');
setLocalTitle(newTitle || fieldTemplateTitle || t('nodes.unknownField'));
dispatch(fieldLabelChanged({ nodeId, fieldName, label: newTitle }));
},
[label, fieldTemplateTitle, dispatch, nodeId, fieldName]
[label, fieldTemplateTitle, dispatch, nodeId, fieldName, t]
);
const handleChange = useCallback((newTitle: string) => {
@ -56,8 +58,8 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
useEffect(() => {
// Another component may change the title; sync local title with global state
setLocalTitle(label || fieldTemplateTitle || 'Unknown Field');
}, [label, fieldTemplateTitle]);
setLocalTitle(label || fieldTemplateTitle || t('nodes.unknownField'));
}, [label, fieldTemplateTitle, t]);
return (
<Tooltip

6
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
View File

@ -17,6 +17,7 @@ import {
import { MouseEvent, ReactNode, memo, useCallback, useMemo } from 'react';
import { FaMinus, FaPlus } from 'react-icons/fa';
import { menuListMotionProps } from 'theme/components/menu';
import { useTranslation } from 'react-i18next';
type Props = {
nodeId: string;
@ -30,6 +31,7 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
const label = useFieldLabel(nodeId, fieldName);
const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, kind);
const input = useFieldInputKind(nodeId, fieldName);
const { t } = useTranslation();
const skipEvent = useCallback((e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
@ -119,7 +121,9 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
motionProps={menuListMotionProps}
onContextMenu={skipEvent}
>
<MenuGroup title={label || fieldTemplateTitle || 'Unknown Field'}>
<MenuGroup
title={label || fieldTemplateTitle || t('nodes.unknownField')}
>
{menuItems}
</MenuGroup>
</MenuList>

8
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
View File

@ -8,6 +8,7 @@ import {
} from 'features/nodes/types/types';
import { startCase } from 'lodash-es';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
interface Props {
nodeId: string;
@ -19,6 +20,7 @@ const FieldTooltipContent = ({ nodeId, fieldName, kind }: Props) => {
const field = useFieldData(nodeId, fieldName);
const fieldTemplate = useFieldTemplate(nodeId, fieldName, kind);
const isInputTemplate = isInputFieldTemplate(fieldTemplate);
const { t } = useTranslation();
const fieldTitle = useMemo(() => {
if (isInputFieldValue(field)) {
if (field.label && fieldTemplate?.title) {
@ -33,11 +35,11 @@ const FieldTooltipContent = ({ nodeId, fieldName, kind }: Props) => {
return fieldTemplate.title;
}
return 'Unknown Field';
return t('nodes.unknownField');
} else {
return fieldTemplate?.title || 'Unknown Field';
return fieldTemplate?.title || t('nodes.unknownField');
}
}, [field, fieldTemplate]);
}, [field, fieldTemplate, t]);
return (
<Flex sx={{ flexDir: 'column' }}>

7
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
View File

@ -17,6 +17,7 @@ import { FaInfoCircle, FaTrash } from 'react-icons/fa';
import EditableFieldTitle from './EditableFieldTitle';
import FieldTooltipContent from './FieldTooltipContent';
import InputFieldRenderer from './InputFieldRenderer';
import { useTranslation } from 'react-i18next';
type Props = {
nodeId: string;
@ -27,7 +28,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
const dispatch = useAppDispatch();
const { isMouseOverNode, handleMouseOut, handleMouseOver } =
useMouseOverNode(nodeId);
const { t } = useTranslation();
const handleRemoveField = useCallback(() => {
dispatch(workflowExposedFieldRemoved({ nodeId, fieldName }));
}, [dispatch, fieldName, nodeId]);
@ -75,8 +76,8 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
</Flex>
</Tooltip>
<IAIIconButton
aria-label="Remove from Linear View"
tooltip="Remove from Linear View"
aria-label={t('nodes.removeLinearView')}
tooltip={t('nodes.removeLinearView')}
variant="ghost"
size="sm"
onClick={handleRemoveField}

8
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx
View File

@ -14,6 +14,7 @@ import { modelIdToLoRAModelParam } from 'features/parameters/util/modelIdToLoRAM
import { forEach } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { useGetLoRAModelsQuery } from 'services/api/endpoints/models';
import { useTranslation } from 'react-i18next';
const LoRAModelInputFieldComponent = (
props: FieldComponentProps<
@ -25,6 +26,7 @@ const LoRAModelInputFieldComponent = (
const lora = field.value;
const dispatch = useAppDispatch();
const { data: loraModels } = useGetLoRAModelsQuery();
const { t } = useTranslation();
const data = useMemo(() => {
if (!loraModels) {
@ -92,9 +94,11 @@ const LoRAModelInputFieldComponent = (
<IAIMantineSearchableSelect
className="nowheel nodrag"
value={selectedLoRAModel?.id ?? null}
placeholder={data.length > 0 ? 'Select a LoRA' : 'No LoRAs available'}
placeholder={
data.length > 0 ? t('models.selectLoRA') : t('models.noLoRAsAvailable')
}
data={data}
nothingFound="No matching LoRAs"
nothingFound={t('models.noMatchingLoRAs')}
itemComponent={IAIMantineSelectItemWithTooltip}
disabled={data.length === 0}
filter={(value, item: SelectItem) =>

7
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelInputField.tsx
View File

@ -19,6 +19,7 @@ import {
useGetMainModelsQuery,
useGetOnnxModelsQuery,
} from 'services/api/endpoints/models';
import { useTranslation } from 'react-i18next';
const MainModelInputFieldComponent = (
props: FieldComponentProps<
@ -29,7 +30,7 @@ const MainModelInputFieldComponent = (
const { nodeId, field } = props;
const dispatch = useAppDispatch();
const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled;
const { t } = useTranslation();
const { data: onnxModels, isLoading: isLoadingOnnxModels } =
useGetOnnxModelsQuery(NON_SDXL_MAIN_MODELS);
const { data: mainModels, isLoading: isLoadingMainModels } =
@ -127,7 +128,9 @@ const MainModelInputFieldComponent = (
tooltip={selectedModel?.description}
value={selectedModel?.id}
placeholder={
data.length > 0 ? 'Select a model' : 'No models available'
data.length > 0
? t('models.selectModel')
: t('models.noModelsAvailable')
}
data={data}
error={!selectedModel}

8
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelInputField.tsx
View File

@ -89,7 +89,7 @@ const RefinerModelInputFieldComponent = (
return isLoading ? (
<IAIMantineSearchableSelect
label={t('modelManager.model')}
placeholder="Loading..."
placeholder={t('models.loading')}
disabled={true}
data={[]}
/>
@ -99,7 +99,11 @@ const RefinerModelInputFieldComponent = (
className="nowheel nodrag"
tooltip={selectedModel?.description}
value={selectedModel?.id}
placeholder={data.length > 0 ? 'Select a model' : 'No models available'}
placeholder={
data.length > 0
? t('models.selectModel')
: t('models.noModelsAvailable')
}
data={data}
error={!selectedModel}
disabled={data.length === 0}

8
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelInputField.tsx
View File

@ -116,7 +116,7 @@ const ModelInputFieldComponent = (
return isLoading ? (
<IAIMantineSearchableSelect
label={t('modelManager.model')}
placeholder="Loading..."
placeholder={t('models.loading')}
disabled={true}
data={[]}
/>
@ -126,7 +126,11 @@ const ModelInputFieldComponent = (
className="nowheel nodrag"
tooltip={selectedModel?.description}
value={selectedModel?.id}
placeholder={data.length > 0 ? 'Select a model' : 'No models available'}
placeholder={
data.length > 0
? t('models.selectModel')
: t('models.noModelsAvailable')
}
data={data}
error={!selectedModel}
disabled={data.length === 0}

12
invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
View File

@ -12,6 +12,7 @@ import { useNodeTemplateTitle } from 'features/nodes/hooks/useNodeTemplateTitle'
import { nodeLabelChanged } from 'features/nodes/store/nodesSlice';
import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
import { MouseEvent, memo, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
type Props = {
nodeId: string;
@ -22,16 +23,17 @@ const NodeTitle = ({ nodeId, title }: Props) => {
const dispatch = useAppDispatch();
const label = useNodeLabel(nodeId);
const templateTitle = useNodeTemplateTitle(nodeId);
const { t } = useTranslation();
const [localTitle, setLocalTitle] = useState('');
const handleSubmit = useCallback(
async (newTitle: string) => {
dispatch(nodeLabelChanged({ nodeId, label: newTitle }));
setLocalTitle(
newTitle || title || templateTitle || 'Problem Setting Title'
label || title || templateTitle || t('nodes.problemSettingTitle')
);
},
[dispatch, nodeId, title, templateTitle]
[dispatch, nodeId, title, templateTitle, label, t]
);
const handleChange = useCallback((newTitle: string) => {
@ -40,8 +42,10 @@ const NodeTitle = ({ nodeId, title }: Props) => {
useEffect(() => {
// Another component may change the title; sync local title with global state
setLocalTitle(label || title || templateTitle || 'Problem Setting Title');
}, [label, templateTitle, title]);
setLocalTitle(
label || title || templateTitle || t('nodes.problemSettingTitle')
);
}, [label, templateTitle, title, t]);
return (
<Flex

4
invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx
View File

@ -8,10 +8,12 @@ import {
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { nodeOpacityChanged } from 'features/nodes/store/nodesSlice';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
export default function NodeOpacitySlider() {
const dispatch = useAppDispatch();
const nodeOpacity = useAppSelector((state) => state.nodes.nodeOpacity);
const { t } = useTranslation();
const handleChange = useCallback(
(v: number) => {
@ -23,7 +25,7 @@ export default function NodeOpacitySlider() {
return (
<Flex alignItems="center">
<Slider
aria-label="Node Opacity"
aria-label={t('nodes.nodeOpacity')}
value={nodeOpacity}
min={0.5}
max={1}

7
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/TopLeftPanel.tsx
View File

@ -4,10 +4,11 @@ import IAIIconButton from 'common/components/IAIIconButton';
import { addNodePopoverOpened } from 'features/nodes/store/nodesSlice';
import { memo, useCallback } from 'react';
import { FaPlus } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
const TopLeftPanel = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleOpenAddNodePopover = useCallback(() => {
dispatch(addNodePopoverOpened());
}, [dispatch]);
@ -15,8 +16,8 @@ const TopLeftPanel = () => {
return (
<Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineStart: 2 }}>
<IAIIconButton
tooltip="Add Node (Shift+A, Space)"
aria-label="Add Node"
tooltip={t('nodes.addNodeToolTip')}
aria-label={t('nodes.addNode')}
icon={<FaPlus />}
onClick={handleOpenAddNodePopover}
/>

29
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
View File

@ -29,6 +29,7 @@ import { ChangeEvent, memo, useCallback } from 'react';
import { FaCog } from 'react-icons/fa';
import { SelectionMode } from 'reactflow';
import ReloadNodeTemplatesButton from '../TopCenterPanel/ReloadSchemaButton';
import { useTranslation } from 'react-i18next';
const formLabelProps: FormLabelProps = {
fontWeight: 600,
@ -101,12 +102,14 @@ const WorkflowEditorSettings = forwardRef((_, ref) => {
[dispatch]
);
const { t } = useTranslation();
return (
<>
<IAIIconButton
ref={ref}
aria-label="Workflow Editor Settings"
tooltip="Workflow Editor Settings"
aria-label={t('nodes.workflowSettings')}
tooltip={t('nodes.workflowSettings')}
icon={<FaCog />}
onClick={onOpen}
/>
@ -114,7 +117,7 @@ const WorkflowEditorSettings = forwardRef((_, ref) => {
<Modal isOpen={isOpen} onClose={onClose} size="2xl" isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader>Workflow Editor Settings</ModalHeader>
<ModalHeader>{t('nodes.workflowSettings')}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Flex
@ -129,31 +132,31 @@ const WorkflowEditorSettings = forwardRef((_, ref) => {
formLabelProps={formLabelProps}
onChange={handleChangeShouldAnimate}
isChecked={shouldAnimateEdges}
label="Animated Edges"
helperText="Animate selected edges and edges connected to selected nodes"
label={t('nodes.animatedEdges')}
helperText={t('nodes.animatedEdgesHelp')}
/>
<Divider />
<IAISwitch
formLabelProps={formLabelProps}
isChecked={shouldSnapToGrid}
onChange={handleChangeShouldSnap}
label="Snap to Grid"
helperText="Snap nodes to grid when moved"
label={t('nodes.snapToGrid')}
helperText={t('nodes.snapToGridHelp')}
/>
<Divider />
<IAISwitch
formLabelProps={formLabelProps}
isChecked={shouldColorEdges}
onChange={handleChangeShouldColor}
label="Color-Code Edges"
helperText="Color-code edges according to their connected fields"
label={t('nodes.colorCodeEdges')}
helperText={t('nodes.colorCodeEdgesHelp')}
/>
<IAISwitch
formLabelProps={formLabelProps}
isChecked={selectionModeIsChecked}
onChange={handleChangeSelectionMode}
label="Fully Contain Nodes to Select"
helperText="Nodes must be fully inside the selection box to be selected"
label={t('nodes.fullyContainNodes')}
helperText={t('nodes.fullyContainNodesHelp')}
/>
<Heading size="sm" pt={4}>
Advanced
@ -162,8 +165,8 @@ const WorkflowEditorSettings = forwardRef((_, ref) => {
formLabelProps={formLabelProps}
isChecked={shouldValidateGraph}
onChange={handleChangeShouldValidate}
label="Validate Connections and Graph"
helperText="Prevent invalid connections from being made, and invalid graphs from being invoked"
label={t('nodes.validateConnections')}
helperText={t('nodes.validateConnectionsHelp')}
/>
<ReloadNodeTemplatesButton />
</Flex>

6
invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
View File

@ -9,6 +9,7 @@ import { memo } from 'react';
import NotesTextarea from '../../flow/nodes/Invocation/NotesTextarea';
import NodeTitle from '../../flow/nodes/common/NodeTitle';
import ScrollableContent from '../ScrollableContent';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -34,9 +35,12 @@ const selector = createSelector(
const InspectorDetailsTab = () => {
const { data, template } = useAppSelector(selector);
const { t } = useTranslation();
if (!template || !data) {
return <IAINoContentFallback label="No node selected" icon={null} />;
return (
<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
);
}
return <Content data={data} template={template} />;

12
invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
View File

@ -11,6 +11,7 @@ import { ImageOutput } from 'services/api/types';
import { AnyResult } from 'services/events/types';
import ScrollableContent from '../ScrollableContent';
import ImageOutputPreview from './outputs/ImageOutputPreview';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -40,13 +41,18 @@ const selector = createSelector(
const InspectorOutputsTab = () => {
const { node, template, nes } = useAppSelector(selector);
const { t } = useTranslation();
if (!node || !nes || !isInvocationNode(node)) {
return <IAINoContentFallback label="No node selected" icon={null} />;
return (
<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
);
}
if (nes.outputs.length === 0) {
return <IAINoContentFallback label="No outputs recorded" icon={null} />;
return (
<IAINoContentFallback label={t('nodes.noOutputRecorded')} icon={null} />
);
}
return (
@ -77,7 +83,7 @@ const InspectorOutputsTab = () => {
/>
))
) : (
<DataViewer data={nes.outputs} label="Node Outputs" />
<DataViewer data={nes.outputs} label={t('nodes.nodesOutputs')} />
)}
</Flex>
</ScrollableContent>

8
invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx
View File

@ -5,6 +5,7 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -29,12 +30,15 @@ const selector = createSelector(
const NodeTemplateInspector = () => {
const { template } = useAppSelector(selector);
const { t } = useTranslation();
if (!template) {
return <IAINoContentFallback label="No node selected" icon={null} />;
return (
<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
);
}
return <DataViewer data={template} label="Node Template" />;
return <DataViewer data={template} label={t('nodes.NodeTemplate')} />;
};
export default memo(NodeTemplateInspector);

25
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
View File

@ -16,6 +16,7 @@ import {
} from 'features/nodes/store/nodesSlice';
import { ChangeEvent, memo, useCallback } from 'react';
import ScrollableContent from '../ScrollableContent';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -85,6 +86,8 @@ const WorkflowGeneralTab = () => {
[dispatch]
);
const { t } = useTranslation();
return (
<ScrollableContent>
<Flex
@ -96,28 +99,36 @@ const WorkflowGeneralTab = () => {
}}
>
<Flex sx={{ gap: 2, w: 'full' }}>
<IAIInput label="Name" value={name} onChange={handleChangeName} />
<IAIInput
label="Version"
label={t('nodes.workflowName')}
value={name}
onChange={handleChangeName}
/>
<IAIInput
label={t('nodes.workflowVersion')}
value={version}
onChange={handleChangeVersion}
/>
</Flex>
<Flex sx={{ gap: 2, w: 'full' }}>
<IAIInput
label="Author"
label={t('nodes.workflowAuthor')}
value={author}
onChange={handleChangeAuthor}
/>
<IAIInput
label="Contact"
label={t('nodes.workflowContact')}
value={contact}
onChange={handleChangeContact}
/>
</Flex>
<IAIInput label="Tags" value={tags} onChange={handleChangeTags} />
<IAIInput
label={t('nodes.workflowTags')}
value={tags}
onChange={handleChangeTags}
/>
<FormControl as={Flex} sx={{ flexDir: 'column' }}>
<FormLabel>Short Description</FormLabel>
<FormLabel>{t('nodes.workflowDescription')}</FormLabel>
<IAITextarea
onChange={handleChangeDescription}
value={description}
@ -126,7 +137,7 @@ const WorkflowGeneralTab = () => {
/>
</FormControl>
<FormControl as={Flex} sx={{ flexDir: 'column', h: 'full' }}>
<FormLabel>Notes</FormLabel>
<FormLabel>{t('nodes.workflowNotes')}</FormLabel>
<IAITextarea
onChange={handleChangeNotes}
value={notes}

4
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx
View File

@ -2,9 +2,11 @@ import { Flex } from '@chakra-ui/react';
import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
import { useWorkflow } from 'features/nodes/hooks/useWorkflow';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const WorkflowJSONTab = () => {
const workflow = useWorkflow();
const { t } = useTranslation();
return (
<Flex
@ -15,7 +17,7 @@ const WorkflowJSONTab = () => {
h: 'full',
}}
>
<DataViewer data={workflow} label="Workflow" />
<DataViewer data={workflow} label={t('nodes.workflow')} />
</Flex>
);
};

4
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
View File

@ -7,6 +7,7 @@ import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { memo } from 'react';
import LinearViewField from '../../flow/nodes/Invocation/fields/LinearViewField';
import ScrollableContent from '../ScrollableContent';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -20,6 +21,7 @@ const selector = createSelector(
const WorkflowLinearTab = () => {
const { fields } = useAppSelector(selector);
const { t } = useTranslation();
return (
<Box
@ -51,7 +53,7 @@ const WorkflowLinearTab = () => {
))
) : (
<IAINoContentFallback
label="No fields added to Linear View"
label={t('nodes.noFieldsLinearview')}
icon={null}
/>
)}

10
invokeai/frontend/web/src/features/nodes/hooks/useLoadWorkflowFromFile.tsx
View File

@ -9,10 +9,12 @@ import { memo, useCallback } from 'react';
import { ZodError } from 'zod';
import { fromZodError, fromZodIssue } from 'zod-validation-error';
import { workflowLoadRequested } from '../store/actions';
import { useTranslation } from 'react-i18next';
export const useLoadWorkflowFromFile = () => {
const dispatch = useAppDispatch();
const logger = useLogger('nodes');
const { t } = useTranslation();
const loadWorkflowFromFile = useCallback(
(file: File | null) => {
if (!file) {
@ -28,7 +30,7 @@ export const useLoadWorkflowFromFile = () => {
if (!result.success) {
const { message } = fromZodError(result.error, {
prefix: 'Workflow Validation Error',
prefix: t('nodes.workflowValidation'),
});
logger.error({ error: parseify(result.error) }, message);
@ -36,7 +38,7 @@ export const useLoadWorkflowFromFile = () => {
dispatch(
addToast(
makeToast({
title: 'Unable to Validate Workflow',
title: t('nodes.unableToValidateWorkflow'),
status: 'error',
duration: 5000,
})
@ -54,7 +56,7 @@ export const useLoadWorkflowFromFile = () => {
dispatch(
addToast(
makeToast({
title: 'Unable to Load Workflow',
title: t('nodes.unableToLoadWorkflow'),
status: 'error',
})
)
@ -64,7 +66,7 @@ export const useLoadWorkflowFromFile = () => {
reader.readAsText(file);
},
[dispatch, logger]
[dispatch, logger, t]
);
return loadWorkflowFromFile;

24
invokeai/frontend/web/src/features/nodes/store/util/makeIsConnectionValidSelector.ts
View File

@ -9,6 +9,7 @@ import {
} from 'features/nodes/types/constants';
import { FieldType } from 'features/nodes/types/types';
import { HandleType } from 'reactflow';
import i18n from 'i18next';
/**
* NOTE: The logic here must be duplicated in `invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts`
@ -20,17 +21,17 @@ export const makeConnectionErrorSelector = (
fieldName: string,
handleType: HandleType,
fieldType?: FieldType
) =>
createSelector(stateSelector, (state) => {
) => {
return createSelector(stateSelector, (state) => {
if (!fieldType) {
return 'No field type';
return i18n.t('nodes.noFieldType');
}
const { currentConnectionFieldType, connectionStartParams, nodes, edges } =
state.nodes;
if (!connectionStartParams || !currentConnectionFieldType) {
return 'No connection in progress';
return i18n.t('nodes.noConnectionInProgress');
}
const {
@ -40,7 +41,7 @@ export const makeConnectionErrorSelector = (
} = connectionStartParams;
if (!connectionHandleType || !connectionNodeId || !connectionFieldName) {
return 'No connection data';
return i18n.t('nodes.noConnectionData');
}
const targetType =
@ -49,14 +50,14 @@ export const makeConnectionErrorSelector = (
handleType === 'source' ? fieldType : currentConnectionFieldType;
if (nodeId === connectionNodeId) {
return 'Cannot connect to self';
return i18n.t('nodes.cannotConnectToSelf');
}
if (handleType === connectionHandleType) {
if (handleType === 'source') {
return 'Cannot connect output to output';
return i18n.t('nodes.cannotConnectOutputToOutput');
}
return 'Cannot connect input to input';
return i18n.t('nodes.cannotConnectInputToInput');
}
if (
@ -66,7 +67,7 @@ export const makeConnectionErrorSelector = (
// except CollectionItem inputs can have multiples
targetType !== 'CollectionItem'
) {
return 'Input may only have one connection';
return i18n.t('nodes.inputMayOnlyHaveOneConnection');
}
/**
@ -125,7 +126,7 @@ export const makeConnectionErrorSelector = (
isIntToFloat
)
) {
return 'Field types must match';
return i18n.t('nodes.fieldTypesMustMatch');
}
}
@ -137,8 +138,9 @@ export const makeConnectionErrorSelector = (
);
if (!isGraphAcyclic) {
return 'Connection would create a cycle';
return i18n.t('nodes.connectionWouldCreateCycle');
}
return null;
});
};

5
invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
View File

@ -5,6 +5,7 @@ import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAICollapse from 'common/components/IAICollapse';
import ParamClipSkip from './ParamClipSkip';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -22,13 +23,13 @@ export default function ParamAdvancedCollapse() {
const shouldShowAdvancedOptions = useAppSelector(
(state: RootState) => state.generation.shouldShowAdvancedOptions
);
const { t } = useTranslation();
if (!shouldShowAdvancedOptions) {
return null;
}
return (
<IAICollapse label="Advanced" activeLabel={activeLabel}>
<IAICollapse label={t('common.advanced')} activeLabel={activeLabel}>
<Flex sx={{ flexDir: 'column', gap: 2 }}>
<ParamClipSkip />
</Flex>

4
invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
View File

@ -5,6 +5,7 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -21,6 +22,7 @@ const selector = createSelector(
export const ParamCpuNoiseToggle = () => {
const dispatch = useAppDispatch();
const { isDisabled, shouldUseCpuNoise } = useAppSelector(selector);
const { t } = useTranslation();
const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(shouldUseCpuNoiseChanged(e.target.checked));
@ -28,7 +30,7 @@ export const ParamCpuNoiseToggle = () => {
return (
<IAISwitch
isDisabled={isDisabled}
label="Use CPU Noise"
label={t('parameters.useCpuNoise')}
isChecked={shouldUseCpuNoise}
onChange={handleChange}
/>

4
invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx
View File

@ -3,9 +3,11 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
export const ParamNoiseToggle = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const shouldUseNoiseSettings = useAppSelector(
(state: RootState) => state.generation.shouldUseNoiseSettings
@ -16,7 +18,7 @@ export const ParamNoiseToggle = () => {
return (
<IAISwitch
label="Enable Noise Settings"
label={t('parameters.enableNoiseSettings')}
isChecked={shouldUseNoiseSettings}
onChange={handleChange}
/>

2
invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx
View File

@ -146,7 +146,7 @@ const CancelButton = (props: Props) => {
id="cancel-button"
{...rest}
>
Cancel
{t('parameters.cancel.cancel')}
</IAIButton>
)}
<Menu closeOnSelect={false}>

13
invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
View File

@ -76,7 +76,7 @@ export default function InvokeButton(props: InvokeButton) {
)}
{asIconButton ? (
<IAIIconButton
aria-label={t('parameters.invoke')}
aria-label={t('parameters.invoke.invoke')}
type="submit"
icon={<FaPlay />}
isDisabled={!isReady}
@ -96,7 +96,7 @@ export default function InvokeButton(props: InvokeButton) {
) : (
<IAIButton
tooltip={<InvokeButtonTooltipContent />}
aria-label={t('parameters.invoke')}
aria-label={t('parameters.invoke.invoke')}
type="submit"
data-progress={isProcessing}
isDisabled={!isReady}
@ -105,7 +105,7 @@ export default function InvokeButton(props: InvokeButton) {
id="invoke-button"
leftIcon={isProcessing ? undefined : <FaPlay />}
isLoading={isProcessing}
loadingText={t('parameters.invoke')}
loadingText={t('parameters.invoke.invoke')}
sx={{
w: 'full',
flexGrow: 1,
@ -138,11 +138,14 @@ export const InvokeButtonTooltipContent = memo(() => {
const { isReady, reasons } = useIsReadyToInvoke();
const { autoAddBoardId } = useAppSelector(tooltipSelector);
const autoAddBoardName = useBoardName(autoAddBoardId);
const { t } = useTranslation();
return (
<Flex flexDir="column" gap={1}>
<Text fontWeight={600}>
{isReady ? 'Ready to Invoke' : 'Unable to Invoke'}
{isReady
? t('parameters.invoke.readyToInvoke')
: t('parameters.invoke.unableToInvoke')}
</Text>
{reasons.length > 0 && (
<UnorderedList>
@ -159,7 +162,7 @@ export const InvokeButtonTooltipContent = memo(() => {
_dark={{ borderColor: 'base.900' }}
/>
<Text fontWeight={400} fontStyle="oblique 10deg">
Adding images to{' '}
{t('parameters.invoke.addingImagesTo')}{' '}
<Text as="span" fontWeight={600}>
{autoAddBoardName || 'Uncategorized'}
</Text>

6
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx
View File

@ -3,6 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import { FaLink } from 'react-icons/fa';
import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice';
import { useTranslation } from 'react-i18next';
export default function ParamSDXLConcatButton() {
const shouldConcatSDXLStylePrompt = useAppSelector(
@ -10,6 +11,7 @@ export default function ParamSDXLConcatButton() {
);
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleShouldConcatPromptChange = () => {
dispatch(setShouldConcatSDXLStylePrompt(!shouldConcatSDXLStylePrompt));
@ -17,8 +19,8 @@ export default function ParamSDXLConcatButton() {
return (
<IAIIconButton
aria-label="Concatenate Prompt & Style"
tooltip="Concatenate Prompt & Style"
aria-label={t('sdxl.concatPromptStyle')}
tooltip={t('sdxl.concatPromptStyle')}
variant="outline"
isChecked={shouldConcatSDXLStylePrompt}
onClick={handleShouldConcatPromptChange}

2
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx
View File

@ -37,7 +37,7 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
return (
<SubParametersWrapper>
<IAISlider
label={`${t('parameters.denoisingStrength')}`}
label={t('sdxl.denoisingStrength')}
step={0.01}
min={0}
max={1}

4
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx
View File

@ -6,6 +6,7 @@ import { ChangeEvent, KeyboardEvent, memo, useCallback, useRef } from 'react';
import { createSelector } from '@reduxjs/toolkit';
import { clampSymmetrySteps } from 'features/parameters/store/generationSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useTranslation } from 'react-i18next';
import { userInvoked } from 'app/store/actions';
import IAITextarea from 'common/components/IAITextarea';
@ -45,6 +46,7 @@ const ParamSDXLNegativeStyleConditioning = () => {
const isReady = useIsReadyToInvoke();
const promptRef = useRef<HTMLTextAreaElement>(null);
const { isOpen, onClose, onOpen } = useDisclosure();
const { t } = useTranslation();
const { prompt, activeTabName, shouldConcatSDXLStylePrompt } =
useAppSelector(promptInputSelector);
@ -143,7 +145,7 @@ const ParamSDXLNegativeStyleConditioning = () => {
name="prompt"
ref={promptRef}
value={prompt}
placeholder="Negative Style Prompt"
placeholder={t('sdxl.negStylePrompt')}
onChange={handleChangePrompt}
onKeyDown={handleKeyDown}
resize="vertical"

4
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx
View File

@ -6,6 +6,7 @@ import { ChangeEvent, KeyboardEvent, memo, useCallback, useRef } from 'react';
import { createSelector } from '@reduxjs/toolkit';
import { clampSymmetrySteps } from 'features/parameters/store/generationSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useTranslation } from 'react-i18next';
import { userInvoked } from 'app/store/actions';
import IAITextarea from 'common/components/IAITextarea';
@ -45,6 +46,7 @@ const ParamSDXLPositiveStyleConditioning = () => {
const isReady = useIsReadyToInvoke();
const promptRef = useRef<HTMLTextAreaElement>(null);
const { isOpen, onClose, onOpen } = useDisclosure();
const { t } = useTranslation();
const { prompt, activeTabName, shouldConcatSDXLStylePrompt } =
useAppSelector(promptInputSelector);
@ -143,7 +145,7 @@ const ParamSDXLPositiveStyleConditioning = () => {
name="prompt"
ref={promptRef}
value={prompt}
placeholder="Positive Style Prompt"
placeholder={t('sdxl.posStylePrompt')}
onChange={handleChangePrompt}
onKeyDown={handleKeyDown}
resize="vertical"

4
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx
View File

@ -13,6 +13,7 @@ import ParamSDXLRefinerScheduler from './SDXLRefiner/ParamSDXLRefinerScheduler';
import ParamSDXLRefinerStart from './SDXLRefiner/ParamSDXLRefinerStart';
import ParamSDXLRefinerSteps from './SDXLRefiner/ParamSDXLRefinerSteps';
import ParamUseSDXLRefiner from './SDXLRefiner/ParamUseSDXLRefiner';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -29,9 +30,10 @@ const selector = createSelector(
const ParamSDXLRefinerCollapse = () => {
const { activeLabel, shouldUseSliders } = useAppSelector(selector);
const { t } = useTranslation();
return (
<IAICollapse label="Refiner" activeLabel={activeLabel}>
<IAICollapse label={t('sdxl.refiner')} activeLabel={activeLabel}>
<Flex sx={{ gap: 2, flexDir: 'column' }}>
<ParamUseSDXLRefiner />
<ParamSDXLRefinerModelSelect />

4
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
View File

@ -43,7 +43,7 @@ const ParamSDXLRefinerCFGScale = () => {
return shouldUseSliders ? (
<IAISlider
label={t('parameters.cfgScale')}
label={t('sdxl.cfgScale')}
step={shift ? 0.1 : 0.5}
min={1}
max={20}
@ -59,7 +59,7 @@ const ParamSDXLRefinerCFGScale = () => {
/>
) : (
<IAINumberInput
label={t('parameters.cfgScale')}
label={t('sdxl.cfgScale')}
step={0.5}
min={1}
max={200}

12
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
View File

@ -14,6 +14,7 @@ import { forEach } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { REFINER_BASE_MODELS } from 'services/api/constants';
import { useGetMainModelsQuery } from 'services/api/endpoints/models';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
@ -26,6 +27,7 @@ const ParamSDXLRefinerModelSelect = () => {
const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled;
const { model } = useAppSelector(selector);
const { t } = useTranslation();
const { data: refinerModels, isLoading } =
useGetMainModelsQuery(REFINER_BASE_MODELS);
@ -81,8 +83,8 @@ const ParamSDXLRefinerModelSelect = () => {
return isLoading ? (
<IAIMantineSearchableSelect
label="Refiner Model"
placeholder="Loading..."
label={t('sdxl.refinermodel')}
placeholder={t('sdxl.loading')}
disabled={true}
data={[]}
/>
@ -90,9 +92,11 @@ const ParamSDXLRefinerModelSelect = () => {
<Flex w="100%" alignItems="center" gap={2}>
<IAIMantineSearchableSelect
tooltip={selectedModel?.description}
label="Refiner Model"
label={t('sdxl.refinermodel')}
value={selectedModel?.id}
placeholder={data.length > 0 ? 'Select a model' : 'No models available'}
placeholder={
data.length > 0 ? t('sdxl.selectAModel') : t('sdxl.noModelsAvailable')
}
data={data}
error={data.length === 0}
disabled={data.length === 0}

4
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
View File

@ -6,6 +6,7 @@ import IAISlider from 'common/components/IAISlider';
import { setRefinerNegativeAestheticScore } from 'features/sdxl/store/sdxlSlice';
import { memo, useCallback } from 'react';
import { useIsRefinerAvailable } from 'services/api/hooks/useIsRefinerAvailable';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
[stateSelector],
@ -27,6 +28,7 @@ const ParamSDXLRefinerNegativeAestheticScore = () => {
const isRefinerAvailable = useIsRefinerAvailable();
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleChange = useCallback(
(v: number) => dispatch(setRefinerNegativeAestheticScore(v)),
@ -40,7 +42,7 @@ const ParamSDXLRefinerNegativeAestheticScore = () => {
return (
<IAISlider
label="Negative Aesthetic Score"
label={t('sdxl.negAestheticScore')}
step={shift ? 0.1 : 0.5}
min={1}
max={10}

4
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
View File

@ -6,6 +6,7 @@ import IAISlider from 'common/components/IAISlider';
import { setRefinerPositiveAestheticScore } from 'features/sdxl/store/sdxlSlice';
import { memo, useCallback } from 'react';
import { useIsRefinerAvailable } from 'services/api/hooks/useIsRefinerAvailable';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
[stateSelector],
@ -27,6 +28,7 @@ const ParamSDXLRefinerPositiveAestheticScore = () => {
const isRefinerAvailable = useIsRefinerAvailable();
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleChange = useCallback(
(v: number) => dispatch(setRefinerPositiveAestheticScore(v)),
@ -40,7 +42,7 @@ const ParamSDXLRefinerPositiveAestheticScore = () => {
return (
<IAISlider
label="Positive Aesthetic Score"
label={t('sdxl.posAestheticScore')}
step={shift ? 0.1 : 0.5}
min={1}
max={10}

2
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
View File

@ -53,7 +53,7 @@ const ParamSDXLRefinerScheduler = () => {
return (
<IAIMantineSearchableSelect
w="100%"
label={t('parameters.scheduler')}
label={t('sdxl.scheduler')}
value={refinerScheduler}
data={data}
onChange={handleChange}

4
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
View File

@ -6,6 +6,7 @@ import IAISlider from 'common/components/IAISlider';
import { setRefinerStart } from 'features/sdxl/store/sdxlSlice';
import { memo, useCallback } from 'react';
import { useIsRefinerAvailable } from 'services/api/hooks/useIsRefinerAvailable';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
[stateSelector],
@ -26,6 +27,7 @@ const ParamSDXLRefinerStart = () => {
(v: number) => dispatch(setRefinerStart(v)),
[dispatch]
);
const { t } = useTranslation();
const handleReset = useCallback(
() => dispatch(setRefinerStart(0.8)),
@ -34,7 +36,7 @@ const ParamSDXLRefinerStart = () => {
return (
<IAISlider
label="Refiner Start"
label={t('sdxl.refinerStart')}
step={0.01}
min={0}
max={1}

4
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
View File

@ -42,7 +42,7 @@ const ParamSDXLRefinerSteps = () => {
return shouldUseSliders ? (
<IAISlider
label={t('parameters.steps')}
label={t('sdxl.steps')}
min={1}
max={100}
step={1}
@ -57,7 +57,7 @@ const ParamSDXLRefinerSteps = () => {
/>
) : (
<IAINumberInput
label={t('parameters.steps')}
label={t('sdxl.steps')}
min={1}
max={500}
step={1}

4
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamUseSDXLRefiner.tsx
View File

@ -4,6 +4,7 @@ import IAISwitch from 'common/components/IAISwitch';
import { setShouldUseSDXLRefiner } from 'features/sdxl/store/sdxlSlice';
import { ChangeEvent } from 'react';
import { useIsRefinerAvailable } from 'services/api/hooks/useIsRefinerAvailable';
import { useTranslation } from 'react-i18next';
export default function ParamUseSDXLRefiner() {
const shouldUseSDXLRefiner = useAppSelector(
@ -12,6 +13,7 @@ export default function ParamUseSDXLRefiner() {
const isRefinerAvailable = useIsRefinerAvailable();
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleUseSDXLRefinerChange = (e: ChangeEvent<HTMLInputElement>) => {
dispatch(setShouldUseSDXLRefiner(e.target.checked));
@ -19,7 +21,7 @@ export default function ParamUseSDXLRefiner() {
return (
<IAISwitch
label="Use Refiner"
label={t('sdxl.useRefiner')}
isChecked={shouldUseSDXLRefiner}
onChange={handleUseSDXLRefinerChange}
isDisabled={!isRefinerAvailable}

20
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
View File

@ -55,7 +55,9 @@ export default function AdvancedAddCheckpoint(
dispatch(
addToast(
makeToast({
title: `Model Added: ${values.model_name}`,
title: t('modelManager.modelAdded', {
modelName: values.model_name,
}),
status: 'success',
})
)
@ -72,7 +74,7 @@ export default function AdvancedAddCheckpoint(
dispatch(
addToast(
makeToast({
title: 'Model Add Failed',
title: t('toast.modelAddFailed'),
status: 'error',
})
)
@ -90,15 +92,16 @@ export default function AdvancedAddCheckpoint(
>
<Flex flexDirection="column" gap={2}>
<IAIMantineTextInput
label="Model Name"
label={t('modelManager.model')}
required
{...advancedAddCheckpointForm.getInputProps('model_name')}
/>
<BaseModelSelect
label={t('modelManager.baseModel')}
{...advancedAddCheckpointForm.getInputProps('base_model')}
/>
<IAIMantineTextInput
label="Model Location"
label={t('modelManager.modelLocation')}
required
{...advancedAddCheckpointForm.getInputProps('path')}
onBlur={(e) => {
@ -114,14 +117,15 @@ export default function AdvancedAddCheckpoint(
}}
/>
<IAIMantineTextInput
label="Description"
label={t('modelManager.description')}
{...advancedAddCheckpointForm.getInputProps('description')}
/>
<IAIMantineTextInput
label="VAE Location"
label={t('modelManager.vaeLocation')}
{...advancedAddCheckpointForm.getInputProps('vae')}
/>
<ModelVariantSelect
label={t('modelManager.variant')}
{...advancedAddCheckpointForm.getInputProps('variant')}
/>
<Flex flexDirection="column" width="100%" gap={2}>
@ -134,14 +138,14 @@ export default function AdvancedAddCheckpoint(
) : (
<IAIMantineTextInput
required
label="Custom Config File Location"
label={t('modelManager.customConfigFileLocation')}
{...advancedAddCheckpointForm.getInputProps('config')}
/>
)}
<IAISimpleCheckbox
isChecked={useCustomConfig}
onChange={() => setUseCustomConfig(!useCustomConfig)}
label="Use Custom Config"
label={t('modelManager.useCustomConfig')}
/>
<IAIButton mt={2} type="submit">
{t('modelManager.addModel')}

18
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
View File

@ -47,7 +47,9 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
dispatch(
addToast(
makeToast({
title: `Model Added: ${values.model_name}`,
title: t('modelManager.modelAdded', {
modelName: values.model_name,
}),
status: 'success',
})
)
@ -63,7 +65,7 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
dispatch(
addToast(
makeToast({
title: 'Model Add Failed',
title: t('toast.modelAddFailed'),
status: 'error',
})
)
@ -82,16 +84,17 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
<Flex flexDirection="column" gap={2}>
<IAIMantineTextInput
required
label="Model Name"
label={t('modelManager.model')}
{...advancedAddDiffusersForm.getInputProps('model_name')}
/>
<BaseModelSelect
label={t('modelManager.baseModel')}
{...advancedAddDiffusersForm.getInputProps('base_model')}
/>
<IAIMantineTextInput
required
label="Model Location"
placeholder="Provide the path to a local folder where your Diffusers Model is stored"
label={t('modelManager.modelLocation')}
placeholder={t('modelManager.modelLocationValidationMsg')}
{...advancedAddDiffusersForm.getInputProps('path')}
onBlur={(e) => {
if (advancedAddDiffusersForm.values['model_name'] === '') {
@ -106,14 +109,15 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
}}
/>
<IAIMantineTextInput
label="Description"
label={t('modelManager.description')}
{...advancedAddDiffusersForm.getInputProps('description')}
/>
<IAIMantineTextInput
label="VAE Location"
label={t('modelManager.vaeLocation')}
{...advancedAddDiffusersForm.getInputProps('vae')}
/>
<ModelVariantSelect
label={t('modelManager.variant')}
{...advancedAddDiffusersForm.getInputProps('variant')}
/>
<IAIButton mt={2} type="submit">

5
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
View File

@ -4,6 +4,7 @@ import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { useState } from 'react';
import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
import AdvancedAddDiffusers from './AdvancedAddDiffusers';
import { useTranslation } from 'react-i18next';
export const advancedAddModeData: SelectItem[] = [
{ label: 'Diffusers', value: 'diffusers' },
@ -16,10 +17,12 @@ export default function AdvancedAddModels() {
const [advancedAddMode, setAdvancedAddMode] =
useState<ManualAddMode>('diffusers');
const { t } = useTranslation();
return (
<Flex flexDirection="column" gap={4} width="100%">
<IAIMantineSelect
label="Model Type"
label={t('modelManager.modelType')}
value={advancedAddMode}
data={advancedAddModeData}
onChange={(v) => {

10
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
View File

@ -77,7 +77,7 @@ export default function FoundModelsList() {
dispatch(
addToast(
makeToast({
title: 'Failed To Add Model',
title: t('toast.modelAddFailed'),
status: 'error',
})
)
@ -85,7 +85,7 @@ export default function FoundModelsList() {
}
});
},
[dispatch, importMainModel]
[dispatch, importMainModel, t]
);
const handleSearchFilter = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@ -137,13 +137,13 @@ export default function FoundModelsList() {
onClick={quickAddHandler}
isLoading={isLoading}
>
Quick Add
{t('modelManager.quickAdd')}
</IAIButton>
<IAIButton
onClick={() => dispatch(setAdvancedAddScanModel(model))}
isLoading={isLoading}
>
Advanced
{t('modelManager.advanced')}
</IAIButton>
</Flex>
) : (
@ -189,7 +189,7 @@ export default function FoundModelsList() {
},
}}
>
<Text variant="subtext">No Models Found</Text>
<Text variant="subtext">{t('modelManager.noModels')}</Text>
</Flex>
);
}

7
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
View File

@ -10,12 +10,15 @@ import { setAdvancedAddScanModel } from '../../store/modelManagerSlice';
import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
import AdvancedAddDiffusers from './AdvancedAddDiffusers';
import { ManualAddMode, advancedAddModeData } from './AdvancedAddModels';
import { useTranslation } from 'react-i18next';
export default function ScanAdvancedAddModels() {
const advancedAddScanModel = useAppSelector(
(state: RootState) => state.modelmanager.advancedAddScanModel
);
const { t } = useTranslation();
const [advancedAddMode, setAdvancedAddMode] =
useState<ManualAddMode>('diffusers');
@ -64,13 +67,13 @@ export default function ScanAdvancedAddModels() {
</Text>
<IAIIconButton
icon={<FaTimes />}
aria-label="Close Advanced"
aria-label={t('modelManager.closeAdvanced')}
onClick={() => dispatch(setAdvancedAddScanModel(null))}
size="sm"
/>
</Flex>
<IAIMantineSelect
label="Model Type"
label={t('modelManager.modelType')}
value={advancedAddMode}
data={advancedAddModeData}
onChange={(v) => {

8
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
View File

@ -55,7 +55,7 @@ export default function SimpleAddModels() {
dispatch(
addToast(
makeToast({
title: 'Model Added',
title: t('toast.modelAddSimple'),
status: 'success',
})
)
@ -84,13 +84,13 @@ export default function SimpleAddModels() {
>
<Flex flexDirection="column" width="100%" gap={4}>
<IAIMantineTextInput
label="Model Location"
placeholder="Provide a path to a local Diffusers model, local checkpoint / safetensors model a HuggingFace Repo ID, or a checkpoint/diffusers model URL."
label={t('modelManager.modelLocation')}
placeholder={t('modelManager.simpleModelDesc')}
w="100%"
{...addModelForm.getInputProps('location')}
/>
<IAIMantineSelect
label="Prediction Type (for Stable Diffusion 2.x Models only)"
label={t('modelManager.predictionType')}
data={predictionSelectData}
defaultValue="none"
{...addModelForm.getInputProps('prediction_type')}