reuse ParamSpandrelModel for simple upscale

This commit is contained in:
chainchompa 2024-07-23 11:36:17 -04:00
parent 8107884c8d
commit 8e89157a83
4 changed files with 16 additions and 54 deletions

View File

@ -1,46 +0,0 @@
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useModelCombobox } from 'common/hooks/useModelCombobox';
import { simpleUpscaleModelChanged } from 'features/parameters/store/upscaleSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType';
import type { SpandrelImageToImageModelConfig } from 'services/api/types';
const ParamSimpleUpscale = () => {
const { t } = useTranslation();
const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
const model = useAppSelector((s) => s.upscale.simpleUpscaleModel);
const dispatch = useAppDispatch();
const _onChange = useCallback(
(v: SpandrelImageToImageModelConfig | null) => {
dispatch(simpleUpscaleModelChanged(v));
},
[dispatch]
);
const { options, value, onChange, placeholder, noOptionsMessage } = useModelCombobox({
modelConfigs,
onChange: _onChange,
selectedModel: model,
isLoading,
});
return (
<FormControl orientation="vertical">
<FormLabel>{t('upscaling.upscaleModel')}</FormLabel>
<Combobox
value={value}
placeholder={placeholder}
options={options}
onChange={onChange}
noOptionsMessage={noOptionsMessage}
/>
</FormControl>
);
};
export default memo(ParamSimpleUpscale);

View File

@ -1,17 +1,21 @@
import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useModelCombobox } from 'common/hooks/useModelCombobox';
import { upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
import { simpleUpscaleModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType';
import type { SpandrelImageToImageModelConfig } from 'services/api/types';
const ParamSpandrelModel = () => {
interface Props {
isMultidiffusion: boolean;
}
const ParamSpandrelModel = ({ isMultidiffusion }: Props) => {
const { t } = useTranslation();
const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
const model = useAppSelector((s) => s.upscale.upscaleModel);
const model = useAppSelector((s) => isMultidiffusion ? s.upscale.upscaleModel : s.upscale.simpleUpscaleModel);
const dispatch = useAppDispatch();
const tooltipLabel = useMemo(() => {
@ -23,9 +27,13 @@ const ParamSpandrelModel = () => {
const _onChange = useCallback(
(v: SpandrelImageToImageModelConfig | null) => {
dispatch(upscaleModelChanged(v));
if (isMultidiffusion) {
dispatch(upscaleModelChanged(v));
} else {
dispatch(simpleUpscaleModelChanged(v))
}
},
[dispatch]
[isMultidiffusion, dispatch]
);
const { options, value, onChange, placeholder, noOptionsMessage } = useModelCombobox({

View File

@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next';
import { PiFrameCornersBold } from 'react-icons/pi';
import type { ImageDTO } from 'services/api/types';
import ParamSimpleUpscale from './ParamSimpleUpscale';
import ParamSpandrelModel from './ParamSpandrelModel';
type Props = { imageDTO?: ImageDTO };
@ -51,7 +51,7 @@ const ParamUpscalePopover = (props: Props) => {
<PopoverContent>
<PopoverBody w={96}>
<Flex flexDirection="column" gap={4}>
<ParamSimpleUpscale />
<ParamSpandrelModel isMultidiffusion={false} />
<UpscaleWarning usesTile={false} />
<Button
tooltip={detail}

View File

@ -54,7 +54,7 @@ export const UpscaleSettingsAccordion = memo(() => {
<Flex gap={4}>
<UpscaleInitialImage />
<Flex direction="column" w="full" alignItems="center" gap={2}>
<ParamSpandrelModel />
<ParamSpandrelModel isMultidiffusion={true} />
<UpscaleScaleSlider />
</Flex>
</Flex>