File size: 2,663 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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import type { ChakraProps } from '@invoke-ai/ui-library';
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
import { loraAdded, selectLoRAsSlice } from 'features/controlLayers/store/lorasSlice';
import { selectBase } from 'features/controlLayers/store/paramsSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useLoRAModels } from 'services/api/hooks/modelsByType';
import type { LoRAModelConfig } from 'services/api/types';
const selectLoRAs = createSelector(selectLoRAsSlice, (loras) => loras.loras);
const LoRASelect = () => {
const dispatch = useAppDispatch();
const [modelConfigs, { isLoading }] = useLoRAModels();
const { t } = useTranslation();
const addedLoRAs = useAppSelector(selectLoRAs);
const currentBaseModel = useAppSelector(selectBase);
const getIsDisabled = (model: LoRAModelConfig): boolean => {
const isCompatible = currentBaseModel === model.base;
const isAdded = Boolean(addedLoRAs.find((lora) => lora.model.key === model.key));
const hasMainModel = Boolean(currentBaseModel);
return !hasMainModel || !isCompatible || isAdded;
};
const _onChange = useCallback(
(model: LoRAModelConfig | null) => {
if (!model) {
return;
}
dispatch(loraAdded({ model }));
},
[dispatch]
);
const { options, onChange } = useGroupedModelCombobox({
modelConfigs,
getIsDisabled,
onChange: _onChange,
});
const placeholder = useMemo(() => {
if (isLoading) {
return t('common.loading');
}
if (options.length === 0) {
return t('models.noLoRAsInstalled');
}
return t('models.addLora');
}, [isLoading, options.length, t]);
const noOptionsMessage = useCallback(() => t('models.noMatchingLoRAs'), [t]);
return (
<FormControl isDisabled={!options.length}>
<InformationalPopover feature="lora">
<FormLabel>{t('models.concepts')} </FormLabel>
</InformationalPopover>
<Combobox
placeholder={placeholder}
value={null}
options={options}
noOptionsMessage={noOptionsMessage}
onChange={onChange}
data-testid="add-lora"
sx={selectStyles}
/>
</FormControl>
);
};
export default memo(LoRASelect);
const selectStyles: ChakraProps['sx'] = {
w: 'full',
};
|