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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -653,6 +653,132 @@
"infillAndScaling": "Manage infill methods (used on masked or erased areas of the canvas) and scaling (useful for small bounding box sizes)."
}
},
"popovers": {
"clipSkip": {
"heading": "CLIP Skip",
"paragraph": "Choose how many layers of the CLIP model to skip. Certain models are better suited to be used with CLIP Skip."
},
"compositingBlur": {
"heading": "Blur",
"paragraph": "The blur radius of the mask."
},
"compositingBlurMethod": {
"heading": "Blur Method",
"paragraph": "The method of blur applied to the masked area."
},
"compositingCoherencePass": {
"heading": "Coherence Pass",
"paragraph": "Composite the Inpainted/Outpainted images."
},
"compositingMode": {
"heading": "Mode",
"paragraph": "The mode of the Coherence Pass."
},
"compositingSteps": {
"heading": "Steps",
"paragraph": "Number of steps in the Coherence Pass. Similar to Denoising Steps."
},
"compositingStrength": {
"heading": "Strength",
"paragraph": "Amount of noise added for the Coherence Pass. Similar to Denoising Strength."
},
"compositingMaskAdjustments": {
"heading": "Mask Adjustments",
"paragraph": "Adjust the mask."
},
"controlNetBeginEnd": {
"heading": "Begin / End Step Percentage",
"paragraph": "Which parts of the denoising process will have the ControlNet applied. ControlNets applied at the start of the process guide composition, and ControlNets applied at the end guide details."
},
"controlNetControlMode": {
"heading": "Control Mode",
"paragraph": "Lends more weight to either the prompt or ControlNet."
},
"controlNetResizeMode": {
"heading": "Resize Mode",
"paragraph": "How the ControlNet image will be fit to the image generation Ratio"
},
"controlNetToggle": {
"heading": "Enable ControlNet",
"paragraph": "ControlNets provide guidance to the generation process, helping create images with controlled composition, structure, or style, depending on the model selected."
},
"controlNetWeight": {
"heading": "Weight",
"paragraph": "How strongly the ControlNet will impact the generated image."
},
"dynamicPromptsToggle": {
"heading": "Enable Dynamic Prompts",
"paragraph": "Dynamic prompts allow multiple options within a prompt. Dynamic prompts can be used by: {option1|option2|option3}. Combinations of prompts will be randomly generated until the “Images” number has been reached."
},
"dynamicPromptsCombinatorial": {
"heading": "Combinatorial Generation",
"paragraph": "Generate an image for every possible combination of Dynamic Prompt until the Max Prompts is reached."
},
"infillMethod": {
"heading": "Infill Method",
"paragraph": "Method to infill the selected area."
},
"lora": {
"heading": "LoRA",
"paragraph": "Weight of the LoRA. Higher weight will lead to larger impacts on the final image."
},
"noiseEnable": {
"heading": "Enable Noise Settings",
"paragraph": "Advanced control over noise generation."
},
"noiseUseCPU": {
"heading": "Use CPU Noise",
"paragraph": "Uses the CPU to generate random noise."
},
"paramsCFGScale": {
"heading": "CFG Scale",
"paragraph": "Controls how much your prompt influences the generation process."
},
"paramDenoisingStrength": {
"heading": "Denoising Strength",
"paragraph": "How much noise is added to the input image. 0 will result in an identical image, while 1 will result in a completely new image."
},
"paramImages": {
"heading": "Images",
"paragraph": "Number of images that will be generated."
},
"paramModel": {
"heading": "Model",
"paragraph": "Model used for the denoising steps. Different models are trained to specialize in producing different aesthetic results and content."
},
"paramPositiveConditioning": {
"heading": "Positive Prompts",
"paragraph": "This is where you enter your positive prompts."
},
"paramScheduler": {
"heading": "Scheduler",
"paragraph": "Scheduler defines how to iteratively add noise to an image or how to update a sample based on a model's output."
},
"paramSeed": {
"heading": "Seed",
"paragraph": "Controls the starting noise used for generation. Disable “Random Seed” to produce identical results with the same generation settings."
},
"paramNegativeConditioning": {
"heading": "Negative Prompts",
"paragraph": "This is where you enter your negative prompts."
},
"paramSteps": {
"heading": "Steps",
"paragraph": "Number of steps that will be performed in each generation. Higher step counts will typically create better images but will require more generation time."
},
"paramVAE": {
"heading": "VAE",
"paragraph": "Model used for translating AI output into the final image."
},
"paramVAEPrecision": {
"heading": "VAE Precision",
"paragraph": "The precision used during VAE encoding and decoding. Fp16/Half precision is more efficient, at the expense of minor image variations."
},
"scaleBeforeProcessing": {
"heading": "Scale Before Processing",
"paragraph": "Scales the selected area to the size best suited for the model before the image generation process."
}
},
"unifiedCanvas": {
"layer": "Layer",
"base": "Base",

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

@ -17,12 +17,13 @@ import { useAppSelector } from '../../app/store/storeHooks';
import { systemSelector } from '../../features/system/store/systemSelectors';
interface Props extends PopoverProps {
heading: string;
heading?: string;
paragraph: string;
triggerComponent: ReactNode;
image?: string;
buttonLabel?: string;
buttonHref?: string;
placement?: string;
}
function IAIInformationalPopover({
@ -32,6 +33,7 @@ function IAIInformationalPopover({
buttonLabel,
buttonHref,
triggerComponent,
placement,
}: Props) {
const { shouldDisableInformationalPopovers } = useAppSelector(systemSelector);
@ -40,7 +42,7 @@ function IAIInformationalPopover({
} else {
return (
<Popover
placement="top"
placement={placement || 'top'}
closeOnBlur={false}
trigger="hover"
variant="informational"
@ -58,14 +60,15 @@ function IAIInformationalPopover({
gap: 3,
flexDirection: 'column',
width: '100%',
alignItems: 'center',
}}
>
{image && (
<Image
sx={{
objectFit: 'contain',
maxW: '100%',
maxH: 'full',
maxW: '60%',
maxH: '60%',
backgroundColor: 'white',
}}
src={image}
@ -78,13 +81,13 @@ function IAIInformationalPopover({
flexDirection: 'column',
p: 3,
pt: 0,
pt: heading ? 0 : 3,
}}
>
<PopoverHeader>{heading}</PopoverHeader>
<Text sx={{ pl: 3, pr: 3 }}>{paragraph}</Text>
{heading && <PopoverHeader>{heading}</PopoverHeader>}
<Text sx={{ px: 3 }}>{paragraph}</Text>
{buttonLabel && (
<Flex sx={{ pl: 3, pr: 3 }} justifyContent="flex-end">
<Flex sx={{ px: 3 }} justifyContent="flex-end">
<Button
onClick={() => window.open(buttonHref)}
size="sm"

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>
);
};