remove individual popover components

This commit is contained in:
Jennifer Player 2023-09-15 14:36:36 -04:00
parent 7bf7c16a5d
commit 45d5ab20ec
60 changed files with 117 additions and 584 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -7,6 +7,7 @@ import { setImg2imgStrength } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import SubParametersWrapper from '../SubParametersWrapper'; import SubParametersWrapper from '../SubParametersWrapper';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
const selector = createSelector( const selector = createSelector(
[stateSelector], [stateSelector],
@ -46,6 +47,7 @@ const ImageToImageStrength = () => {
return ( return (
<SubParametersWrapper> <SubParametersWrapper>
<IAIInformationalPopover details="paramDenoisingStrength">
<IAISlider <IAISlider
label={`${t('parameters.denoisingStrength')}`} label={`${t('parameters.denoisingStrength')}`}
step={step} step={step}
@ -60,6 +62,7 @@ const ImageToImageStrength = () => {
withReset withReset
sliderNumberInputProps={{ max: inputMax }} sliderNumberInputProps={{ max: inputMax }}
/> />
</IAIInformationalPopover>
</SubParametersWrapper> </SubParametersWrapper>
); );
}; };

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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