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

remove individual popover components

Browse Source
This commit is contained in:
Jennifer Player 2023-09-15 14:36:36 -04:00
parent 7bf7c16a5d
commit 45d5ab20ec
60 changed files with 117 additions and 584 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx
View File

@ -15,11 +15,11 @@ import {
import { ReactNode } from 'react';
import { useAppSelector } from '../../app/store/storeHooks';
import { systemSelector } from '../../features/system/store/systemSelectors';
import { useTranslation } from 'react-i18next';
interface Props extends PopoverProps {
heading?: string;
paragraph: string;
triggerComponent: ReactNode;
details: string;
children: ReactNode;
image?: string;
buttonLabel?: string;
buttonHref?: string;
@ -27,18 +27,21 @@ interface Props extends PopoverProps {
}
function IAIInformationalPopover({
heading,
paragraph,
details,
image,
buttonLabel,
buttonHref,
triggerComponent,
children,
placement,
}: Props) {
const { shouldDisableInformationalPopovers } = useAppSelector(systemSelector);
const { t } = useTranslation();
const heading = t(`popovers.${details}.heading`);
const paragraph = t(`popovers.${details}.paragraph`);
if (shouldDisableInformationalPopovers) {
return triggerComponent;
return children;
} else {
return (
<Popover
@ -48,7 +51,7 @@ function IAIInformationalPopover({
variant="informational"
>
<PopoverTrigger>
<div>{triggerComponent}</div>
<div>{children}</div>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />

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

@ -10,12 +10,12 @@ import {
Tooltip,
} from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import {
ControlNetConfig,
controlNetBeginStepPctChanged,
controlNetEndStepPctChanged,
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetBeginEndPopover } from 'features/informationalPopovers/components/controlNetBeginEnd';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -50,7 +50,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
);
return (
<ControlNetBeginEndPopover>
<IAIInformationalPopover details="controlNetBeginEnd">
<FormControl isDisabled={!isEnabled}>
<FormLabel>{t('controlnet.beginEndStepPercent')}</FormLabel>
<HStack w="100%" gap={2} alignItems="center">
@ -64,22 +64,6 @@ const ParamControlNetBeginEnd = (props: Props) => {
minStepsBetweenThumbs={5}
isDisabled={!isEnabled}
>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>
<Tooltip label={formatPct(beginStepPct)} placement="top" hasArrow>
<RangeSliderThumb index={0} />
</Tooltip>
<Tooltip label={formatPct(endStepPct)} placement="top" hasArrow>
<RangeSliderThumb index={1} />
</Tooltip>
<RangeSliderMark
value={0}
sx={{
insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important',
}}
>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>
@ -119,7 +103,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
</RangeSlider>
</HStack>
</FormControl>
</ControlNetBeginEndPopover>
</IAIInformationalPopover>
);
};

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

@ -1,11 +1,11 @@
import { useAppDispatch } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import {
ControlModes,
ControlNetConfig,
controlNetControlModeChanged,
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetControlModePopover } from 'features/informationalPopovers/components/controlNetControlMode';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -35,7 +35,7 @@ export default function ParamControlNetControlMode(
);
return (
<ControlNetControlModePopover>
<IAIInformationalPopover details="controlNetControlMode">
<IAIMantineSelect
disabled={!isEnabled}
label={t('controlnet.controlMode')}
@ -43,6 +43,6 @@ export default function ParamControlNetControlMode(
value={String(controlMode)}
onChange={handleControlModeChange}
/>
</ControlNetControlModePopover>
</IAIInformationalPopover>
);
}

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

@ -2,9 +2,9 @@ import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAISwitch from 'common/components/IAISwitch';
import { isControlNetEnabledToggled } from 'features/controlNet/store/controlNetSlice';
import { ControlNetTogglePopover } from 'features/informationalPopovers/components/controlnetToggle';
import { memo, useCallback } from 'react';
const selector = createSelector(
@ -26,7 +26,7 @@ const ParamControlNetFeatureToggle = () => {
}, [dispatch]);
return (
<ControlNetTogglePopover>
<IAIInformationalPopover details="controlNetToggle">
<IAISwitch
label="Enable ControlNet"
isChecked={isEnabled}
@ -35,7 +35,7 @@ const ParamControlNetFeatureToggle = () => {
width: '100%',
}}
/>
</ControlNetTogglePopover>
</IAIInformationalPopover>
);
};

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

@ -1,11 +1,11 @@
import { useAppDispatch } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import {
ControlNetConfig,
ResizeModes,
controlNetResizeModeChanged,
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetResizeModePopover } from 'features/informationalPopovers/components/controlNetResizeMode';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -34,7 +34,7 @@ export default function ParamControlNetResizeMode(
);
return (
<ControlNetResizeModePopover>
<IAIInformationalPopover details="controlNetResizeMode">
<IAIMantineSelect
disabled={!isEnabled}
label={t('controlnet.resizeMode')}
@ -42,6 +42,6 @@ export default function ParamControlNetResizeMode(
value={String(resizeMode)}
onChange={handleResizeModeChange}
/>
</ControlNetResizeModePopover>
</IAIInformationalPopover>
);
}

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

@ -1,10 +1,10 @@
import { useAppDispatch } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAISlider from 'common/components/IAISlider';
import {
ControlNetConfig,
controlNetWeightChanged,
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetWeightPopover } from 'features/informationalPopovers/components/controlNetWeight';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -24,7 +24,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
);
return (
<ControlNetWeightPopover>
<IAIInformationalPopover details="controlNetWeight">
<IAISlider
isDisabled={!isEnabled}
label={t('controlnet.weight')}
@ -36,7 +36,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
withSliderMarks
sliderMarks={[0, 1, 2]}
/>
</ControlNetWeightPopover>
</IAIInformationalPopover>
);
};

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

@ -5,8 +5,8 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { memo, useCallback } from 'react';
import { combinatorialToggled } from '../store/dynamicPromptsSlice';
import { DynamicPromptsCombinatorialPopover } from 'features/informationalPopovers/components/dynamicPromptsCombinatorial';
import { useTranslation } from 'react-i18next';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
const selector = createSelector(
stateSelector,
@ -28,14 +28,14 @@ const ParamDynamicPromptsCombinatorial = () => {
}, [dispatch]);
return (
<DynamicPromptsCombinatorialPopover>
<IAIInformationalPopover details="dynamicPromptsCombinatorial">
<IAISwitch
isDisabled={isDisabled}
label={t('prompt.combinatorial')}
isChecked={combinatorial}
onChange={handleChange}
/>
</DynamicPromptsCombinatorialPopover>
</IAIInformationalPopover>
);
};

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

@ -5,8 +5,8 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { memo, useCallback } from 'react';
import { isEnabledToggled } from '../store/dynamicPromptsSlice';
import { DynamicPromptsTogglePopover } from 'features/informationalPopovers/components/dynamicPromptsToggle';
import { useTranslation } from 'react-i18next';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
const selector = createSelector(
stateSelector,
@ -28,14 +28,13 @@ const ParamDynamicPromptsToggle = () => {
}, [dispatch]);
return (
<DynamicPromptsTogglePopover>
<IAIInformationalPopover details="dynamicPromptsToggle">
<IAISwitch
label={t('prompt.enableDynamicPrompts')}
isChecked={isEnabled}
onChange={handleToggleIsEnabled}
/>
</DynamicPromptsTogglePopover>
</IAIInformationalPopover>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/clipSkip.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ClipSkipPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.clipSkip.paragraph')}
heading={t('popovers.clipSkip.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlur.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const CompositingBlurPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.compositingBlur.paragraph')}
heading={t('popovers.compositingBlur.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/compositingBlurMethod.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const CompositingBlurMethodPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.compositingBlurMethod.paragraph')}
heading={t('popovers.compositingBlurMethod.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/compositingCoherencePass.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const CompositingCoherencePassPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.compositingCoherencePass.paragraph')}
heading={t('popovers.compositingCoherencePass.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/compositingMode.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const CompositingModePopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.compositingMode.paragraph')}
heading={t('popovers.compositingMode.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/compositingSteps.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const CompositingStepsPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.compositingSteps.paragraph')}
heading={t('popovers.compositingSteps.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/compositingStrength.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const CompositingStrengthPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.compositingStrength.paragraph')}
heading={t('popovers.compositingStrength.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/compositiveMaskAdjustments.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const CompositingMaskAdjustmentsPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.compositingMaskAdjustments.paragraph')}
heading={t('popovers.compositingMaskAdjustments.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/controlNetBeginEnd.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ControlNetBeginEndPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.controlNetBeginEnd.paragraph')}
heading={t('popovers.controlNetBeginEnd.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/controlNetControlMode.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ControlNetControlModePopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.controlNetControlMode.paragraph')}
heading={t('popovers.controlNetControlMode.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/controlNetResizeMode.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ControlNetResizeModePopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.controlNetResizeMode.paragraph')}
heading={t('popovers.controlNetResizeMode.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/controlNetToggle.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ControlNetTogglePopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.controlNetToggle.paragraph')}
heading={t('popovers.controlNetToggle.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/controlNetWeight.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ControlNetWeightPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.controlNetWeight.paragraph')}
heading={t('popovers.controlNetWeight.heading')}
triggerComponent={props.children}
/>
);
};

17
invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsCombinatorial.tsx
View File

@ -1,17 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const DynamicPromptsCombinatorialPopover = (
props: PropsWithChildren
) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.dynamicPromptsCombinatorial.paragraph')}
heading={t('popovers.dynamicPromptsCombinatorial.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/dynamicPromptsToggle.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const DynamicPromptsTogglePopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.dynamicPromptsToggle.paragraph')}
heading={t('popovers.dynamicPromptsToggle.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/infillMethod.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const InfillMethodPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.infillMethod.paragraph')}
heading={t('popovers.infillMethod.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/lora.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const LoraPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.lora.paragraph')}
heading={t('popovers.lora.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/noiseEnable.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const NoiseEnablePopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.noiseEnable.paragraph')}
heading={t('popovers.noiseEnable.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/noiseUseCPU.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const NoiseUseCPUPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.noiseUseCPU.paragraph')}
heading={t('popovers.noiseUseCPU.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/paramCFGScale.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ParamCFGScalePopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramsCFGScale.paragraph')}
heading={t('popovers.paramsCFGScale.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/paramDenoisingStrength.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ParamDenoisingStrengthPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramsDenoisingStrength.paragraph')}
heading={t('popovers.paramsDenoisingStrength.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/paramImages.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ParamImagesPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramImages.paragraph')}
heading={t('popovers.paramImages.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/paramModel.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ParamModelPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramModel.paragraph')}
heading={t('popovers.paramModel.heading')}
triggerComponent={props.children}
/>
);
};

19
invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx
View File

@ -1,19 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import InvokeAILogoImage from 'assets/images/logo.png';
import { useTranslation } from 'react-i18next';
export const ParamPositiveConditioningPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramPositiveConditioning.paragraph')}
heading={t('popovers.paramPositiveConditioning.heading')}
buttonLabel="Learn more"
buttonHref="http://google.com"
image={InvokeAILogoImage}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/paramScheduler.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ParamSchedulerPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramScheduler.paragraph')}
heading={t('popovers.paramScheduler.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/paramSeed.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ParamSeedPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramSeed.paragraph')}
heading={t('popovers.paramSeed.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/paramSteps.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ParamStepsPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramSteps.paragraph')}
heading={t('popovers.paramSteps.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/paramVAE.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ParamVAEPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramVAE.paragraph')}
heading={t('popovers.paramVAE.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/paramVAEPrecision.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ParamVAEPrecisionPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.paramVAEPrecision.paragraph')}
heading={t('popovers.paramVAEPrecision.heading')}
triggerComponent={props.children}
/>
);
};

15
invokeai/frontend/web/src/features/informationalPopovers/components/scaleBeforeProcessing.tsx
View File

@ -1,15 +0,0 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import { useTranslation } from 'react-i18next';
export const ScaleBeforeProcessingPopover = (props: PropsWithChildren) => {
const { t } = useTranslation();
return (
<IAIInformationalPopover
paragraph={t('popovers.scaleBeforeProcessing.paragraph')}
heading={t('popovers.scaleBeforeProcessing.heading')}
triggerComponent={props.children}
/>
);
};

6
invokeai/frontend/web/src/features/lora/components/ParamLora.tsx
View File

@ -10,7 +10,7 @@ import {
loraWeightChanged,
loraWeightReset,
} from '../store/loraSlice';
import { LoraPopover } from 'features/informationalPopovers/components/lora';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
type Props = {
lora: LoRA;
@ -36,7 +36,7 @@ const ParamLora = (props: Props) => {
}, [dispatch, lora.id]);
return (
<LoraPopover>
<IAIInformationalPopover details="lora">
<Flex sx={{ gap: 2.5, alignItems: 'flex-end' }}>
<IAISlider
label={lora.model_name}
@ -61,7 +61,7 @@ const ParamLora = (props: Props) => {
colorScheme="error"
/>
</Flex>
</LoraPopover>
</IAIInformationalPopover>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamClipSkip.tsx
View File

@ -1,7 +1,7 @@
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAISlider from 'common/components/IAISlider';
import { ClipSkipPopover } from 'features/informationalPopovers/components/clipSkip';
import { setClipSkip } from 'features/parameters/store/generationSlice';
import { clipSkipMap } from 'features/parameters/types/constants';
import { useCallback, useMemo } from 'react';
@ -43,7 +43,7 @@ export default function ParamClipSkip() {
}, [model]);
return (
<ClipSkipPopover>
<IAIInformationalPopover details="clipSkip">
<IAISlider
label={t('parameters.clipSkip')}
aria-label={t('parameters.clipSkip')}
@ -58,6 +58,6 @@ export default function ParamClipSkip() {
withReset
handleReset={handleClipSkipReset}
/>
</ClipSkipPopover>
</IAIInformationalPopover>
);
}

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
View File

@ -1,8 +1,8 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import { IAISelectDataType } from 'common/components/IAIMantineSearchableSelect';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { CompositingModePopover } from 'features/informationalPopovers/components/compositingMode';
import { setCanvasCoherenceMode } from 'features/parameters/store/generationSlice';
import { CanvasCoherenceModeParam } from 'features/parameters/types/parameterSchemas';
@ -31,14 +31,14 @@ const ParamCanvasCoherenceMode = () => {
};
return (
<CompositingModePopover>
<IAIInformationalPopover details="compositingCoherenceMode">
<IAIMantineSelect
label={t('parameters.coherenceMode')}
data={coherenceModeSelectData}
value={canvasCoherenceMode}
onChange={handleCoherenceModeChange}
/>
</CompositingModePopover>
</IAIInformationalPopover>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
View File

@ -1,7 +1,7 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAISlider from 'common/components/IAISlider';
import { CompositingStepsPopover } from 'features/informationalPopovers/components/compositingSteps';
import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
@ -14,7 +14,7 @@ const ParamCanvasCoherenceSteps = () => {
const { t } = useTranslation();
return (
<CompositingStepsPopover>
<IAIInformationalPopover details="compositingCoherenceSteps">
<IAISlider
label={t('parameters.coherenceSteps')}
min={1}
@ -32,7 +32,7 @@ const ParamCanvasCoherenceSteps = () => {
dispatch(setCanvasCoherenceSteps(20));
}}
/>
</CompositingStepsPopover>
</IAIInformationalPopover>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
View File

@ -1,7 +1,7 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAISlider from 'common/components/IAISlider';
import { CompositingStrengthPopover } from 'features/informationalPopovers/components/compositingStrength';
import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
@ -14,7 +14,7 @@ const ParamCanvasCoherenceStrength = () => {
const { t } = useTranslation();
return (
<CompositingStrengthPopover>
<IAIInformationalPopover details="compositingStrength">
<IAISlider
label={t('parameters.coherenceStrength')}
min={0}
@ -32,7 +32,7 @@ const ParamCanvasCoherenceStrength = () => {
dispatch(setCanvasCoherenceStrength(0.3));
}}
/>
</CompositingStrengthPopover>
</IAIInformationalPopover>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
View File

@ -1,7 +1,7 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAISlider from 'common/components/IAISlider';
import { CompositingBlurPopover } from 'features/informationalPopovers/components/compositingBlur';
import { setMaskBlur } from 'features/parameters/store/generationSlice';
import { useTranslation } from 'react-i18next';
@ -13,7 +13,7 @@ export default function ParamMaskBlur() {
const { t } = useTranslation();
return (
<CompositingBlurPopover>
<IAIInformationalPopover details="compositingBlur">
<IAISlider
label={t('parameters.maskBlur')}
min={0}
@ -30,6 +30,6 @@ export default function ParamMaskBlur() {
dispatch(setMaskBlur(16));
}}
/>
</CompositingBlurPopover>
</IAIInformationalPopover>
);
}

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
View File

@ -2,8 +2,8 @@ import { SelectItem } from '@mantine/core';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { CompositingBlurMethodPopover } from 'features/informationalPopovers/components/compositingBlurMethod';
import { setMaskBlurMethod } from 'features/parameters/store/generationSlice';
import { useTranslation } from 'react-i18next';
@ -29,13 +29,13 @@ export default function ParamMaskBlurMethod() {
};
return (
<CompositingBlurMethodPopover>
<IAIInformationalPopover details="compositingBlur">
<IAIMantineSelect
value={maskBlurMethod}
onChange={handleMaskBlurMethodChange}
label={t('parameters.maskBlurMethod')}
data={maskBlurMethods}
/>
</CompositingBlurMethodPopover>
</IAIInformationalPopover>
);
}

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx
View File

@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { InfillMethodPopover } from 'features/informationalPopovers/components/infillMethod';
import { setInfillMethod } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
@ -40,7 +40,7 @@ const ParamInfillMethod = () => {
);
return (
<InfillMethodPopover>
<IAIInformationalPopover details="infillMethod">
<IAIMantineSelect
disabled={infill_methods?.length === 0}
placeholder={isLoading ? 'Loading...' : undefined}
@ -49,7 +49,7 @@ const ParamInfillMethod = () => {
data={infill_methods ?? []}
onChange={handleChange}
/>
</InfillMethodPopover>
</IAIInformationalPopover>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
View File

@ -1,6 +1,7 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice';
@ -8,7 +9,6 @@ import {
BOUNDING_BOX_SCALES_DICT,
BoundingBoxScale,
} from 'features/canvas/store/canvasTypes';
import { ScaleBeforeProcessingPopover } from 'features/informationalPopovers/components/scaleBeforeProcessing';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
@ -36,14 +36,14 @@ const ParamScaleBeforeProcessing = () => {
};
return (
<ScaleBeforeProcessingPopover>
<IAIInformationalPopover details="scaleBeforeProcessing">
<IAIMantineSearchableSelect
label={t('parameters.scaleBeforeProcessing')}
data={BOUNDING_BOX_SCALES_DICT}
value={boundingBoxScale}
onChange={handleChangeBoundingBoxScaleMethod}
/>
</ScaleBeforeProcessingPopover>
</IAIInformationalPopover>
);
};

10
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx
View File

@ -2,9 +2,9 @@ import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAINumberInput from 'common/components/IAINumberInput';
import IAISlider from 'common/components/IAISlider';
import { ParamCFGScalePopover } from 'features/informationalPopovers/components/paramCFGScale';
import { setCfgScale } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -54,7 +54,7 @@ const ParamCFGScale = () => {
);
return shouldUseSliders ? (
<ParamCFGScalePopover>
<IAIInformationalPopover details="paramCFGScale">
<IAISlider
label={t('parameters.cfgScale')}
step={shift ? 0.1 : 0.5}
@ -69,9 +69,9 @@ const ParamCFGScale = () => {
withSliderMarks
isInteger={false}
/>
</ParamCFGScalePopover>
</IAIInformationalPopover>
) : (
<ParamCFGScalePopover>
<IAIInformationalPopover details="paramCFGScale">
<IAINumberInput
label={t('parameters.cfgScale')}
step={0.5}
@ -82,7 +82,7 @@ const ParamCFGScale = () => {
isInteger={false}
numberInputFieldProps={{ textAlign: 'center' }}
/>
</ParamCFGScalePopover>
</IAIInformationalPopover>
);
};

9
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx
View File

@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAINumberInput from 'common/components/IAINumberInput';
import IAISlider from 'common/components/IAISlider';
import { ParamImagesPopover } from 'features/informationalPopovers/components/paramImages';
@ -61,7 +62,7 @@ const ParamIterations = () => {
}, [dispatch, initial]);
return shouldUseSliders ? (
<ParamImagesPopover>
<IAIInformationalPopover details="paramImages">
<IAISlider
isDisabled={isDisabled}
label={t('parameters.images')}
@ -76,9 +77,9 @@ const ParamIterations = () => {
withSliderMarks
sliderNumberInputProps={{ max: inputMax }}
/>
</ParamImagesPopover>
</IAIInformationalPopover>
) : (
<ParamImagesPopover>
<IAIInformationalPopover details="paramImages">
<IAINumberInput
isDisabled={isDisabled}
label={t('parameters.images')}
@ -89,7 +90,7 @@ const ParamIterations = () => {
value={iterations}
numberInputFieldProps={{ textAlign: 'center' }}
/>
</ParamImagesPopover>
</IAIInformationalPopover>
);
};

5
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
View File

@ -29,7 +29,6 @@ import { useTranslation } from 'react-i18next';
import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
import IAIInformationalPopover from '../../../../../common/components/IAIInformationalPopover';
import InvokeAILogoImage from 'assets/images/logo.png';
import { ParamPositiveConditioningPopover } from '../../../../informationalPopovers/components/paramPositiveConditioning';
const promptInputSelector = createSelector(
[stateSelector, activeTabNameSelector],
@ -139,7 +138,7 @@ const ParamPositiveConditioning = () => {
onClose={onClose}
onSelect={handleSelectEmbedding}
>
<ParamPositiveConditioningPopover>
<IAIInformationalPopover details="paramPositiveConditioning">
<IAITextarea
id="prompt"
name="prompt"
@ -151,7 +150,7 @@ const ParamPositiveConditioning = () => {
resize="vertical"
minH={32}
/>
</ParamPositiveConditioningPopover>
</IAIInformationalPopover>
</ParamEmbeddingPopover>
</FormControl>
{!isOpen && isEmbeddingEnabled && (

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
View File

@ -1,8 +1,8 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
import { ParamSchedulerPopover } from 'features/informationalPopovers/components/paramScheduler';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { setScheduler } from 'features/parameters/store/generationSlice';
import {
@ -52,14 +52,14 @@ const ParamScheduler = () => {
);
return (
<ParamSchedulerPopover>
<IAIInformationalPopover details="paramScheduler">
<IAIMantineSearchableSelect
label={t('parameters.scheduler')}
value={scheduler}
data={data}
onChange={handleChange}
/>
</ParamSchedulerPopover>
</IAIInformationalPopover>
);
};

10
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx
View File

@ -2,10 +2,10 @@ import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAINumberInput from 'common/components/IAINumberInput';
import IAISlider from 'common/components/IAISlider';
import { ParamStepsPopover } from 'features/informationalPopovers/components/paramSteps';
import {
clampSymmetrySteps,
setSteps,
@ -57,7 +57,7 @@ const ParamSteps = () => {
}, [dispatch]);
return shouldUseSliders ? (
<ParamStepsPopover>
<IAIInformationalPopover details="paramSteps">
<IAISlider
label={t('parameters.steps')}
min={min}
@ -71,9 +71,9 @@ const ParamSteps = () => {
withSliderMarks
sliderNumberInputProps={{ max: inputMax }}
/>
</ParamStepsPopover>
</IAIInformationalPopover>
) : (
<ParamStepsPopover>
<IAIInformationalPopover details="paramSteps">
<IAINumberInput
label={t('parameters.steps')}
min={min}
@ -84,7 +84,7 @@ const ParamSteps = () => {
numberInputFieldProps={{ textAlign: 'center' }}
onBlur={handleBlur}
/>
</ParamStepsPopover>
</IAIInformationalPopover>
);
};

31
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx
View File

@ -7,6 +7,7 @@ import { setImg2imgStrength } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import SubParametersWrapper from '../SubParametersWrapper';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
const selector = createSelector(
[stateSelector],
@ -46,20 +47,22 @@ const ImageToImageStrength = () => {
return (
<SubParametersWrapper>
<IAISlider
label={`${t('parameters.denoisingStrength')}`}
step={step}
min={min}
max={sliderMax}
onChange={handleChange}
handleReset={handleReset}
value={img2imgStrength}
isInteger={false}
withInput
withSliderMarks
withReset
sliderNumberInputProps={{ max: inputMax }}
/>
<IAIInformationalPopover details="paramDenoisingStrength">
<IAISlider
label={`${t('parameters.denoisingStrength')}`}
step={step}
min={min}
max={sliderMax}
onChange={handleChange}
handleReset={handleReset}
value={img2imgStrength}
isInteger={false}
withInput
withSliderMarks
withReset
sliderNumberInputProps={{ max: inputMax }}
/>
</IAIInformationalPopover>
</SubParametersWrapper>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/MainModel/ParamMainModelSelect.tsx
View File

@ -21,7 +21,7 @@ import {
useGetOnnxModelsQuery,
} from 'services/api/endpoints/models';
import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
import { ParamModelPopover } from 'features/informationalPopovers/components/paramModel';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
const selector = createSelector(
stateSelector,
@ -119,7 +119,7 @@ const ParamMainModelSelect = () => {
data={[]}
/>
) : (
<ParamModelPopover>
<IAIInformationalPopover details="paramModel" placement="bottom">
<Flex w="100%" alignItems="center" gap={3}>
<IAIMantineSearchableSelect
tooltip={selectedModel?.description}
@ -140,7 +140,7 @@ const ParamMainModelSelect = () => {
</Box>
)}
</Flex>
</ParamModelPopover>
</IAIInformationalPopover>
);
};

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

@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAISwitch from 'common/components/IAISwitch';
import { NoiseUseCPUPopover } from 'features/informationalPopovers/components/noiseUseCPU';
import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
@ -29,13 +29,13 @@ export const ParamCpuNoiseToggle = () => {
dispatch(shouldUseCpuNoiseChanged(e.target.checked));
return (
<NoiseUseCPUPopover>
<IAIInformationalPopover details="noiseUseCPU">
<IAISwitch
isDisabled={isDisabled}
label={t('parameters.useCpuNoise')}
isChecked={shouldUseCpuNoise}
onChange={handleChange}
/>
</NoiseUseCPUPopover>
</IAIInformationalPopover>
);
};

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

@ -1,7 +1,7 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAISwitch from 'common/components/IAISwitch';
import { NoiseEnablePopover } from 'features/informationalPopovers/components/noiseEnable';
import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
@ -18,12 +18,12 @@ export const ParamNoiseToggle = () => {
dispatch(setShouldUseNoiseSettings(e.target.checked));
return (
<NoiseEnablePopover>
<IAIInformationalPopover details="noiseEnable">
<IAISwitch
label={t('parameters.enableNoiseSettings')}
isChecked={shouldUseNoiseSettings}
onChange={handleChange}
/>
</NoiseEnablePopover>
</IAIInformationalPopover>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx
View File

@ -3,17 +3,17 @@ import { memo } from 'react';
import ParamSeed from './ParamSeed';
import ParamSeedShuffle from './ParamSeedShuffle';
import ParamSeedRandomize from './ParamSeedRandomize';
import { ParamSeedPopover } from 'features/informationalPopovers/components/paramSeed';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
const ParamSeedFull = () => {
return (
<ParamSeedPopover>
<IAIInformationalPopover details="paramSeed">
<Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
<ParamSeed />
<ParamSeedShuffle />
<ParamSeedRandomize />
</Flex>
</ParamSeedPopover>
</IAIInformationalPopover>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEModelSelect.tsx
View File

@ -15,7 +15,7 @@ import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectI
import { vaeSelected } from 'features/parameters/store/generationSlice';
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { modelIdToVAEModelParam } from 'features/parameters/util/modelIdToVAEModelParam';
import { ParamVAEPopover } from 'features/informationalPopovers/components/paramVAE';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
const selector = createSelector(
stateSelector,
@ -94,7 +94,7 @@ const ParamVAEModelSelect = () => {
);
return (
<ParamVAEPopover>
<IAIInformationalPopover details="paramVAE">
<IAIMantineSearchableSelect
itemComponent={IAIMantineSelectItemWithTooltip}
tooltip={selectedVaeModel?.description}
@ -106,7 +106,7 @@ const ParamVAEModelSelect = () => {
disabled={data.length === 0}
clearable
/>
</ParamVAEPopover>
</IAIInformationalPopover>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEPrecision.tsx
View File

@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { ParamVAEPrecisionPopover } from 'features/informationalPopovers/components/paramVAEPrecision';
import { vaePrecisionChanged } from 'features/parameters/store/generationSlice';
import { PrecisionParam } from 'features/parameters/types/parameterSchemas';
import { memo, useCallback } from 'react';
@ -35,14 +35,14 @@ const ParamVAEModelSelect = () => {
);
return (
<ParamVAEPrecisionPopover>
<IAIInformationalPopover details="paramVAEPrecision">
<IAIMantineSelect
label="VAE Precision"
value={vaePrecision}
data={DATA}
onChange={handleChange}
/>
</ParamVAEPrecisionPopover>
</IAIInformationalPopover>
);
};

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

@ -7,7 +7,7 @@ import SubParametersWrapper from 'features/parameters/components/Parameters/SubP
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { setSDXLImg2ImgDenoisingStrength } from '../store/sdxlSlice';
import { ParamDenoisingStrengthPopover } from 'features/informationalPopovers/components/paramDenoisingStrength';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
const selector = createSelector(
[stateSelector],
@ -37,7 +37,7 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
return (
<SubParametersWrapper>
<ParamDenoisingStrengthPopover>
<IAIInformationalPopover details="paramDenoisingStrength">
<IAISlider
label={t('sdxl.denoisingStrength')}
step={0.01}
@ -51,7 +51,7 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
withSliderMarks
withReset
/>
</ParamDenoisingStrengthPopover>
</IAIInformationalPopover>
</SubParametersWrapper>
);
};