File size: 1,922 Bytes
8a37e0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 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 { postProcessingModelChanged, selectPostProcessingModel } 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 ParamPostProcessingModel = () => {
const { t } = useTranslation();
const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
const model = useAppSelector(selectPostProcessingModel);
const dispatch = useAppDispatch();
const tooltipLabel = useMemo(() => {
if (!modelConfigs.length || !model) {
return;
}
return modelConfigs.find((m) => m.key === model?.key)?.description;
}, [modelConfigs, model]);
const _onChange = useCallback(
(v: SpandrelImageToImageModelConfig | null) => {
dispatch(postProcessingModelChanged(v));
},
[dispatch]
);
const { options, value, onChange, placeholder, noOptionsMessage } = useModelCombobox({
modelConfigs,
onChange: _onChange,
selectedModel: model,
isLoading,
});
return (
<FormControl orientation="vertical">
<FormLabel>{t('upscaling.postProcessingModel')}</FormLabel>
<Tooltip label={tooltipLabel}>
<Box w="full">
<Combobox
value={value}
placeholder={placeholder}
options={options}
onChange={onChange}
noOptionsMessage={noOptionsMessage}
isDisabled={options.length === 0}
/>
</Box>
</Tooltip>
</FormControl>
);
};
export default memo(ParamPostProcessingModel);
|