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

added optional popovers for users to learn more about each setting

Browse Source
This commit is contained in:
Jennifer Player
2023-09-15 10:37:05 -04:00
parent 7b2e6deaf1
commit fcea65770f
59 changed files with 1018 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ import {
controlNetBeginStepPctChanged,
controlNetEndStepPctChanged,
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetBeginEndPopover } from 'features/informationalPopovers/components/controlNetBeginEnd';
import { memo, useCallback } from 'react';
type Props = {
@ -47,58 +48,60 @@ const ParamControlNetBeginEnd = (props: Props) => {
);
return (
<FormControl isDisabled={!isEnabled}>
<FormLabel>Begin / End Step Percentage</FormLabel>
<HStack w="100%" gap={2} alignItems="center">
<RangeSlider
aria-label={['Begin Step %', 'End Step %']}
value={[beginStepPct, endStepPct]}
onChange={handleStepPctChanged}
min={0}
max={1}
step={0.01}
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',
}}
<ControlNetBeginEndPopover>
<FormControl isDisabled={!isEnabled}>
<FormLabel>Begin / End Step Percentage</FormLabel>
<HStack w="100%" gap={2} alignItems="center">
<RangeSlider
aria-label={['Begin Step %', 'End Step %']}
value={[beginStepPct, endStepPct]}
onChange={handleStepPctChanged}
min={0}
max={1}
step={0.01}
minStepsBetweenThumbs={5}
isDisabled={!isEnabled}
>
0%
</RangeSliderMark>
<RangeSliderMark
value={0.5}
sx={{
insetInlineStart: '50% !important',
transform: 'translateX(-50%)',
}}
>
50%
</RangeSliderMark>
<RangeSliderMark
value={1}
sx={{
insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important',
}}
>
100%
</RangeSliderMark>
</RangeSlider>
</HStack>
</FormControl>
<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',
}}
>
0%
</RangeSliderMark>
<RangeSliderMark
value={0.5}
sx={{
insetInlineStart: '50% !important',
transform: 'translateX(-50%)',
}}
>
50%
</RangeSliderMark>
<RangeSliderMark
value={1}
sx={{
insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important',
}}
>
100%
</RangeSliderMark>
</RangeSlider>
</HStack>
</FormControl>
</ControlNetBeginEndPopover>
);
};

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

@ -5,6 +5,7 @@ import {
ControlNetConfig,
controlNetControlModeChanged,
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetControlModePopover } from 'features/informationalPopovers/components/controlNetControlMode';
import { useCallback } from 'react';
type ParamControlNetControlModeProps = {
@ -32,12 +33,14 @@ export default function ParamControlNetControlMode(
);
return (
<IAIMantineSelect
disabled={!isEnabled}
label="Control Mode"
data={CONTROL_MODE_DATA}
value={String(controlMode)}
onChange={handleControlModeChange}
/>
<ControlNetControlModePopover>
<IAIMantineSelect
disabled={!isEnabled}
label="Control Mode"
data={CONTROL_MODE_DATA}
value={String(controlMode)}
onChange={handleControlModeChange}
/>
</ControlNetControlModePopover>
);
}

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

@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
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(
@ -25,14 +26,16 @@ const ParamControlNetFeatureToggle = () => {
}, [dispatch]);
return (
<IAISwitch
label="Enable ControlNet"
isChecked={isEnabled}
onChange={handleChange}
formControlProps={{
width: '100%',
}}
/>
<ControlNetTogglePopover>
<IAISwitch
label="Enable ControlNet"
isChecked={isEnabled}
onChange={handleChange}
formControlProps={{
width: '100%',
}}
/>
</ControlNetTogglePopover>
);
};

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

@ -5,6 +5,7 @@ import {
ResizeModes,
controlNetResizeModeChanged,
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetResizeModePopover } from 'features/informationalPopovers/components/controlNetResizeMode';
import { useCallback } from 'react';
type ParamControlNetResizeModeProps = {
@ -31,12 +32,14 @@ export default function ParamControlNetResizeMode(
);
return (
<IAIMantineSelect
disabled={!isEnabled}
label="Resize Mode"
data={RESIZE_MODE_DATA}
value={String(resizeMode)}
onChange={handleResizeModeChange}
/>
<ControlNetResizeModePopover>
<IAIMantineSelect
disabled={!isEnabled}
label="Resize Mode"
data={RESIZE_MODE_DATA}
value={String(resizeMode)}
onChange={handleResizeModeChange}
/>
</ControlNetResizeModePopover>
);
}

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

@ -4,6 +4,7 @@ import {
ControlNetConfig,
controlNetWeightChanged,
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetWeightPopover } from 'features/informationalPopovers/components/controlNetWeight';
import { memo, useCallback } from 'react';
type ParamControlNetWeightProps = {
@ -21,17 +22,19 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
);
return (
<IAISlider
isDisabled={!isEnabled}
label="Weight"
value={weight}
onChange={handleWeightChanged}
min={0}
max={2}
step={0.01}
withSliderMarks
sliderMarks={[0, 1, 2]}
/>
<ControlNetWeightPopover>
<IAISlider
isDisabled={!isEnabled}
label="Weight"
value={weight}
onChange={handleWeightChanged}
min={0}
max={2}
step={0.01}
withSliderMarks
sliderMarks={[0, 1, 2]}
/>
</ControlNetWeightPopover>
);
};

15
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 { DynamicPromptsCombinatorialPopover } from 'features/informationalPopovers/components/dynamicPromptsCombinatorial';
const selector = createSelector(
stateSelector,
@ -25,12 +26,14 @@ const ParamDynamicPromptsCombinatorial = () => {
}, [dispatch]);
return (
<IAISwitch
isDisabled={isDisabled}
label="Combinatorial Generation"
isChecked={combinatorial}
onChange={handleChange}
/>
<DynamicPromptsCombinatorialPopover>
<IAISwitch
isDisabled={isDisabled}
label="Combinatorial Generation"
isChecked={combinatorial}
onChange={handleChange}
/>
</DynamicPromptsCombinatorialPopover>
);
};

13
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 { DynamicPromptsTogglePopover } from 'features/informationalPopovers/components/dynamicPromptsToggle';
const selector = createSelector(
stateSelector,
@ -25,11 +26,13 @@ const ParamDynamicPromptsToggle = () => {
}, [dispatch]);
return (
<IAISwitch
label="Enable Dynamic Prompts"
isChecked={isEnabled}
onChange={handleToggleIsEnabled}
/>
<DynamicPromptsTogglePopover>
<IAISwitch
label="Enable Dynamic Prompts"
isChecked={isEnabled}
onChange={handleToggleIsEnabled}
/>
</DynamicPromptsTogglePopover>
);
};

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

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,17 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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}
/>
);
};

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

@ -1,12 +1,15 @@
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
heading="Prompt Box"
paragraph="This is where you enter your prompt"
paragraph={t('popovers.paramPositiveConditioning.paragraph')}
heading={t('popovers.paramPositiveConditioning.heading')}
buttonLabel="Learn more"
buttonHref="http://google.com"
image={InvokeAILogoImage}

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

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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}
/>
);
};

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

@ -10,6 +10,7 @@ import {
loraWeightChanged,
loraWeightReset,
} from '../store/loraSlice';
import { LoraPopover } from 'features/informationalPopovers/components/lora';
type Props = {
lora: LoRA;
@ -35,30 +36,32 @@ const ParamLora = (props: Props) => {
}, [dispatch, lora.id]);
return (
<Flex sx={{ gap: 2.5, alignItems: 'flex-end' }}>
<IAISlider
label={lora.model_name}
value={lora.weight}
onChange={handleChange}
min={-1}
max={2}
step={0.01}
withInput
withReset
handleReset={handleReset}
withSliderMarks
sliderMarks={[-1, 0, 1, 2]}
sliderNumberInputProps={{ min: -50, max: 50 }}
/>
<IAIIconButton
size="sm"
onClick={handleRemoveLora}
tooltip="Remove LoRA"
aria-label="Remove LoRA"
icon={<FaTrash />}
colorScheme="error"
/>
</Flex>
<LoraPopover>
<Flex sx={{ gap: 2.5, alignItems: 'flex-end' }}>
<IAISlider
label={lora.model_name}
value={lora.weight}
onChange={handleChange}
min={-1}
max={2}
step={0.01}
withInput
withReset
handleReset={handleReset}
withSliderMarks
sliderMarks={[-1, 0, 1, 2]}
sliderNumberInputProps={{ min: -50, max: 50 }}
/>
<IAIIconButton
size="sm"
onClick={handleRemoveLora}
tooltip="Remove LoRA"
aria-label="Remove LoRA"
icon={<FaTrash />}
colorScheme="error"
/>
</Flex>
</LoraPopover>
);
};

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

@ -1,6 +1,7 @@
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
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';
@ -42,19 +43,21 @@ export default function ParamClipSkip() {
}, [model]);
return (
<IAISlider
label={t('parameters.clipSkip')}
aria-label={t('parameters.clipSkip')}
min={0}
max={max}
step={1}
value={clipSkip}
onChange={handleClipSkipChange}
withSliderMarks
sliderMarks={sliderMarks}
withInput
withReset
handleReset={handleClipSkipReset}
/>
<ClipSkipPopover>
<IAISlider
label={t('parameters.clipSkip')}
aria-label={t('parameters.clipSkip')}
min={0}
max={max}
step={1}
value={clipSkip}
onChange={handleClipSkipChange}
withSliderMarks
sliderMarks={sliderMarks}
withInput
withReset
handleReset={handleClipSkipReset}
/>
</ClipSkipPopover>
);
}

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

@ -2,6 +2,7 @@ import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
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';
@ -30,12 +31,14 @@ const ParamCanvasCoherenceMode = () => {
};
return (
<IAIMantineSelect
label={t('parameters.coherenceMode')}
data={coherenceModeSelectData}
value={canvasCoherenceMode}
onChange={handleCoherenceModeChange}
/>
<CompositingModePopover>
<IAIMantineSelect
label={t('parameters.coherenceMode')}
data={coherenceModeSelectData}
value={canvasCoherenceMode}
onChange={handleCoherenceModeChange}
/>
</CompositingModePopover>
);
};

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

@ -1,6 +1,7 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
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';
@ -13,23 +14,25 @@ const ParamCanvasCoherenceSteps = () => {
const { t } = useTranslation();
return (
<IAISlider
label={t('parameters.coherenceSteps')}
min={1}
max={100}
step={1}
sliderNumberInputProps={{ max: 999 }}
value={canvasCoherenceSteps}
onChange={(v) => {
dispatch(setCanvasCoherenceSteps(v));
}}
withInput
withSliderMarks
withReset
handleReset={() => {
dispatch(setCanvasCoherenceSteps(20));
}}
/>
<CompositingStepsPopover>
<IAISlider
label={t('parameters.coherenceSteps')}
min={1}
max={100}
step={1}
sliderNumberInputProps={{ max: 999 }}
value={canvasCoherenceSteps}
onChange={(v) => {
dispatch(setCanvasCoherenceSteps(v));
}}
withInput
withSliderMarks
withReset
handleReset={() => {
dispatch(setCanvasCoherenceSteps(20));
}}
/>
</CompositingStepsPopover>
);
};

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

@ -1,6 +1,7 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
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';
@ -13,23 +14,25 @@ const ParamCanvasCoherenceStrength = () => {
const { t } = useTranslation();
return (
<IAISlider
label={t('parameters.coherenceStrength')}
min={0}
max={1}
step={0.01}
sliderNumberInputProps={{ max: 999 }}
value={canvasCoherenceStrength}
onChange={(v) => {
dispatch(setCanvasCoherenceStrength(v));
}}
withInput
withSliderMarks
withReset
handleReset={() => {
dispatch(setCanvasCoherenceStrength(0.3));
}}
/>
<CompositingStrengthPopover>
<IAISlider
label={t('parameters.coherenceStrength')}
min={0}
max={1}
step={0.01}
sliderNumberInputProps={{ max: 999 }}
value={canvasCoherenceStrength}
onChange={(v) => {
dispatch(setCanvasCoherenceStrength(v));
}}
withInput
withSliderMarks
withReset
handleReset={() => {
dispatch(setCanvasCoherenceStrength(0.3));
}}
/>
</CompositingStrengthPopover>
);
};

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

@ -1,6 +1,7 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
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';
@ -12,21 +13,23 @@ export default function ParamMaskBlur() {
const { t } = useTranslation();
return (
<IAISlider
label={t('parameters.maskBlur')}
min={0}
max={64}
sliderNumberInputProps={{ max: 512 }}
value={maskBlur}
onChange={(v) => {
dispatch(setMaskBlur(v));
}}
withInput
withSliderMarks
withReset
handleReset={() => {
dispatch(setMaskBlur(16));
}}
/>
<CompositingBlurPopover>
<IAISlider
label={t('parameters.maskBlur')}
min={0}
max={64}
sliderNumberInputProps={{ max: 512 }}
value={maskBlur}
onChange={(v) => {
dispatch(setMaskBlur(v));
}}
withInput
withSliderMarks
withReset
handleReset={() => {
dispatch(setMaskBlur(16));
}}
/>
</CompositingBlurPopover>
);
}

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

@ -3,6 +3,7 @@ import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
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';
@ -28,11 +29,13 @@ export default function ParamMaskBlurMethod() {
};
return (
<IAIMantineSelect
value={maskBlurMethod}
onChange={handleMaskBlurMethodChange}
label={t('parameters.maskBlurMethod')}
data={maskBlurMethods}
/>
<CompositingBlurMethodPopover>
<IAIMantineSelect
value={maskBlurMethod}
onChange={handleMaskBlurMethodChange}
label={t('parameters.maskBlurMethod')}
data={maskBlurMethods}
/>
</CompositingBlurMethodPopover>
);
}

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

@ -3,6 +3,7 @@ import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
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';
@ -39,14 +40,16 @@ const ParamInfillMethod = () => {
);
return (
<IAIMantineSelect
disabled={infill_methods?.length === 0}
placeholder={isLoading ? 'Loading...' : undefined}
label={t('parameters.infillMethod')}
value={infillMethod}
data={infill_methods ?? []}
onChange={handleChange}
/>
<InfillMethodPopover>
<IAIMantineSelect
disabled={infill_methods?.length === 0}
placeholder={isLoading ? 'Loading...' : undefined}
label={t('parameters.infillMethod')}
value={infillMethod}
data={infill_methods ?? []}
onChange={handleChange}
/>
</InfillMethodPopover>
);
};

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

@ -8,6 +8,7 @@ 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';
@ -35,12 +36,14 @@ const ParamScaleBeforeProcessing = () => {
};
return (
<IAIMantineSearchableSelect
label={t('parameters.scaleBeforeProcessing')}
data={BOUNDING_BOX_SCALES_DICT}
value={boundingBoxScale}
onChange={handleChangeBoundingBoxScaleMethod}
/>
<ScaleBeforeProcessingPopover>
<IAIMantineSearchableSelect
label={t('parameters.scaleBeforeProcessing')}
data={BOUNDING_BOX_SCALES_DICT}
value={boundingBoxScale}
onChange={handleChangeBoundingBoxScaleMethod}
/>
</ScaleBeforeProcessingPopover>
);
};

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

@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
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';
@ -53,31 +54,35 @@ const ParamCFGScale = () => {
);
return shouldUseSliders ? (
<IAISlider
label={t('parameters.cfgScale')}
step={shift ? 0.1 : 0.5}
min={min}
max={sliderMax}
onChange={handleChange}
handleReset={handleReset}
value={cfgScale}
sliderNumberInputProps={{ max: inputMax }}
withInput
withReset
withSliderMarks
isInteger={false}
/>
<ParamCFGScalePopover>
<IAISlider
label={t('parameters.cfgScale')}
step={shift ? 0.1 : 0.5}
min={min}
max={sliderMax}
onChange={handleChange}
handleReset={handleReset}
value={cfgScale}
sliderNumberInputProps={{ max: inputMax }}
withInput
withReset
withSliderMarks
isInteger={false}
/>
</ParamCFGScalePopover>
) : (
<IAINumberInput
label={t('parameters.cfgScale')}
step={0.5}
min={min}
max={inputMax}
onChange={handleChange}
value={cfgScale}
isInteger={false}
numberInputFieldProps={{ textAlign: 'center' }}
/>
<ParamCFGScalePopover>
<IAINumberInput
label={t('parameters.cfgScale')}
step={0.5}
min={min}
max={inputMax}
onChange={handleChange}
value={cfgScale}
isInteger={false}
numberInputFieldProps={{ textAlign: 'center' }}
/>
</ParamCFGScalePopover>
);
};

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

@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAINumberInput from 'common/components/IAINumberInput';
import IAISlider from 'common/components/IAISlider';
import { ParamImagesPopover } from 'features/informationalPopovers/components/paramImages';
import { setIterations } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -60,31 +61,35 @@ const ParamIterations = () => {
}, [dispatch, initial]);
return shouldUseSliders ? (
<IAISlider
isDisabled={isDisabled}
label={t('parameters.images')}
step={step}
min={min}
max={sliderMax}
onChange={handleChange}
handleReset={handleReset}
value={iterations}
withInput
withReset
withSliderMarks
sliderNumberInputProps={{ max: inputMax }}
/>
<ParamImagesPopover>
<IAISlider
isDisabled={isDisabled}
label={t('parameters.images')}
step={step}
min={min}
max={sliderMax}
onChange={handleChange}
handleReset={handleReset}
value={iterations}
withInput
withReset
withSliderMarks
sliderNumberInputProps={{ max: inputMax }}
/>
</ParamImagesPopover>
) : (
<IAINumberInput
isDisabled={isDisabled}
label={t('parameters.images')}
step={step}
min={min}
max={inputMax}
onChange={handleChange}
value={iterations}
numberInputFieldProps={{ textAlign: 'center' }}
/>
<ParamImagesPopover>
<IAINumberInput
isDisabled={isDisabled}
label={t('parameters.images')}
step={step}
min={min}
max={inputMax}
onChange={handleChange}
value={iterations}
numberInputFieldProps={{ textAlign: 'center' }}
/>
</ParamImagesPopover>
);
};

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

@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
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 {
@ -51,12 +52,14 @@ const ParamScheduler = () => {
);
return (
<IAIMantineSearchableSelect
label={t('parameters.scheduler')}
value={scheduler}
data={data}
onChange={handleChange}
/>
<ParamSchedulerPopover>
<IAIMantineSearchableSelect
label={t('parameters.scheduler')}
value={scheduler}
data={data}
onChange={handleChange}
/>
</ParamSchedulerPopover>
);
};

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

@ -5,6 +5,7 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAINumberInput from 'common/components/IAINumberInput';
import IAISlider from 'common/components/IAISlider';
import { ParamStepsPopover } from 'features/informationalPopovers/components/paramSteps';
import {
clampSymmetrySteps,
setSteps,
@ -56,30 +57,34 @@ const ParamSteps = () => {
}, [dispatch]);
return shouldUseSliders ? (
<IAISlider
label={t('parameters.steps')}
min={min}
max={sliderMax}
step={step}
onChange={handleChange}
handleReset={handleReset}
value={steps}
withInput
withReset
withSliderMarks
sliderNumberInputProps={{ max: inputMax }}
/>
<ParamStepsPopover>
<IAISlider
label={t('parameters.steps')}
min={min}
max={sliderMax}
step={step}
onChange={handleChange}
handleReset={handleReset}
value={steps}
withInput
withReset
withSliderMarks
sliderNumberInputProps={{ max: inputMax }}
/>
</ParamStepsPopover>
) : (
<IAINumberInput
label={t('parameters.steps')}
min={min}
max={inputMax}
step={step}
onChange={handleChange}
value={steps}
numberInputFieldProps={{ textAlign: 'center' }}
onBlur={handleBlur}
/>
<ParamStepsPopover>
<IAINumberInput
label={t('parameters.steps')}
min={min}
max={inputMax}
step={step}
onChange={handleChange}
value={steps}
numberInputFieldProps={{ textAlign: 'center' }}
onBlur={handleBlur}
/>
</ParamStepsPopover>
);
};

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

@ -21,6 +21,7 @@ import {
useGetOnnxModelsQuery,
} from 'services/api/endpoints/models';
import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
import { ParamModelPopover } from 'features/informationalPopovers/components/paramModel';
const selector = createSelector(
stateSelector,
@ -118,24 +119,28 @@ const ParamMainModelSelect = () => {
data={[]}
/>
) : (
<Flex w="100%" alignItems="center" gap={3}>
<IAIMantineSearchableSelect
tooltip={selectedModel?.description}
label={t('modelManager.model')}
value={selectedModel?.id}
placeholder={data.length > 0 ? 'Select a model' : 'No models available'}
data={data}
error={data.length === 0}
disabled={data.length === 0}
onChange={handleChangeModel}
w="100%"
/>
{isSyncModelEnabled && (
<Box mt={7}>
<SyncModelsButton iconMode />
</Box>
)}
</Flex>
<ParamModelPopover>
<Flex w="100%" alignItems="center" gap={3}>
<IAIMantineSearchableSelect
tooltip={selectedModel?.description}
label={t('modelManager.model')}
value={selectedModel?.id}
placeholder={
data.length > 0 ? 'Select a model' : 'No models available'
}
data={data}
error={data.length === 0}
disabled={data.length === 0}
onChange={handleChangeModel}
w="100%"
/>
{isSyncModelEnabled && (
<Box mt={7}>
<SyncModelsButton iconMode />
</Box>
)}
</Flex>
</ParamModelPopover>
);
};

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

@ -3,6 +3,7 @@ import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { NoiseUseCPUPopover } from 'features/informationalPopovers/components/noiseUseCPU';
import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
@ -26,11 +27,13 @@ export const ParamCpuNoiseToggle = () => {
dispatch(shouldUseCpuNoiseChanged(e.target.checked));
return (
<IAISwitch
isDisabled={isDisabled}
label="Use CPU Noise"
isChecked={shouldUseCpuNoise}
onChange={handleChange}
/>
<NoiseUseCPUPopover>
<IAISwitch
isDisabled={isDisabled}
label="Use CPU Noise"
isChecked={shouldUseCpuNoise}
onChange={handleChange}
/>
</NoiseUseCPUPopover>
);
};

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

@ -1,6 +1,7 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { NoiseEnablePopover } from 'features/informationalPopovers/components/noiseEnable';
import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
@ -15,10 +16,12 @@ export const ParamNoiseToggle = () => {
dispatch(setShouldUseNoiseSettings(e.target.checked));
return (
<IAISwitch
label="Enable Noise Settings"
isChecked={shouldUseNoiseSettings}
onChange={handleChange}
/>
<NoiseEnablePopover>
<IAISwitch
label="Enable Noise Settings"
isChecked={shouldUseNoiseSettings}
onChange={handleChange}
/>
</NoiseEnablePopover>
);
};

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

@ -3,14 +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';
const ParamSeedFull = () => {
return (
<Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
<ParamSeed />
<ParamSeedShuffle />
<ParamSeedRandomize />
</Flex>
<ParamSeedPopover>
<Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
<ParamSeed />
<ParamSeedShuffle />
<ParamSeedRandomize />
</Flex>
</ParamSeedPopover>
);
};

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

@ -15,6 +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';
const selector = createSelector(
stateSelector,
@ -93,17 +94,19 @@ const ParamVAEModelSelect = () => {
);
return (
<IAIMantineSearchableSelect
itemComponent={IAIMantineSelectItemWithTooltip}
tooltip={selectedVaeModel?.description}
label={t('modelManager.vae')}
value={selectedVaeModel?.id ?? 'default'}
placeholder="Default"
data={data}
onChange={handleChangeModel}
disabled={data.length === 0}
clearable
/>
<ParamVAEPopover>
<IAIMantineSearchableSelect
itemComponent={IAIMantineSelectItemWithTooltip}
tooltip={selectedVaeModel?.description}
label={t('modelManager.vae')}
value={selectedVaeModel?.id ?? 'default'}
placeholder="Default"
data={data}
onChange={handleChangeModel}
disabled={data.length === 0}
clearable
/>
</ParamVAEPopover>
);
};

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

@ -3,6 +3,7 @@ import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
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';
@ -34,12 +35,14 @@ const ParamVAEModelSelect = () => {
);
return (
<IAIMantineSelect
label="VAE Precision"
value={vaePrecision}
data={DATA}
onChange={handleChange}
/>
<ParamVAEPrecisionPopover>
<IAIMantineSelect
label="VAE Precision"
value={vaePrecision}
data={DATA}
onChange={handleChange}
/>
</ParamVAEPrecisionPopover>
);
};

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

@ -7,6 +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';
const selector = createSelector(
[stateSelector],
@ -36,19 +37,21 @@ const ParamSDXLImg2ImgDenoisingStrength = () => {
return (
<SubParametersWrapper>
<IAISlider
label={`${t('parameters.denoisingStrength')}`}
step={0.01}
min={0}
max={1}
onChange={handleChange}
handleReset={handleReset}
value={sdxlImg2ImgDenoisingStrength}
isInteger={false}
withInput
withSliderMarks
withReset
/>
<ParamDenoisingStrengthPopover>
<IAISlider
label={`${t('parameters.denoisingStrength')}`}
step={0.01}
min={0}
max={1}
onChange={handleChange}
handleReset={handleReset}
value={sdxlImg2ImgDenoisingStrength}
isInteger={false}
withInput
withSliderMarks
withReset
/>
</ParamDenoisingStrengthPopover>
</SubParametersWrapper>
);
};