feat(ui): show placeholder in refiner collapse instead of hiding it, if no refiner models installed

This commit is contained in:
psychedelicious 2023-11-01 20:27:28 -05:00
parent 3d32ce2b58
commit 5b420653f9
3 changed files with 16 additions and 5 deletions

View File

@ -722,7 +722,9 @@
"noMatchingModels": "No matching Models", "noMatchingModels": "No matching Models",
"noModelsAvailable": "No models available", "noModelsAvailable": "No models available",
"selectLoRA": "Select a LoRA", "selectLoRA": "Select a LoRA",
"selectModel": "Select a Model" "selectModel": "Select a Model",
"noLoRAsInstalled": "No LoRAs installed",
"noRefinerModelsInstalled": "No SDXL Refiner models installed"
}, },
"nodes": { "nodes": {
"addNode": "Add Node", "addNode": "Add Node",

View File

@ -10,6 +10,7 @@ import { loraAdded } from 'features/lora/store/loraSlice';
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants'; import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { forEach } from 'lodash-es'; import { forEach } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetLoRAModelsQuery } from 'services/api/endpoints/models'; import { useGetLoRAModelsQuery } from 'services/api/endpoints/models';
const selector = createSelector( const selector = createSelector(
@ -24,7 +25,7 @@ const ParamLoRASelect = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { loras } = useAppSelector(selector); const { loras } = useAppSelector(selector);
const { data: loraModels } = useGetLoRAModelsQuery(); const { data: loraModels } = useGetLoRAModelsQuery();
const { t } = useTranslation();
const currentMainModel = useAppSelector( const currentMainModel = useAppSelector(
(state: RootState) => state.generation.model (state: RootState) => state.generation.model
); );
@ -79,7 +80,7 @@ const ParamLoRASelect = () => {
return ( return (
<Flex sx={{ justifyContent: 'center', p: 2 }}> <Flex sx={{ justifyContent: 'center', p: 2 }}>
<Text sx={{ fontSize: 'sm', color: 'base.500', _dark: 'base.700' }}> <Text sx={{ fontSize: 'sm', color: 'base.500', _dark: 'base.700' }}>
No LoRAs Loaded {t('models.noLoRAsInstalled')}
</Text> </Text>
</Flex> </Flex>
); );

View File

@ -1,4 +1,4 @@
import { Flex } from '@chakra-ui/react'; import { Flex, Text } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store'; import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
@ -35,7 +35,15 @@ const ParamSDXLRefinerCollapse = () => {
const isRefinerAvailable = useIsRefinerAvailable(); const isRefinerAvailable = useIsRefinerAvailable();
if (!isRefinerAvailable) { if (!isRefinerAvailable) {
return null; return (
<IAICollapse label={t('sdxl.refiner')} activeLabel={activeLabel}>
<Flex sx={{ justifyContent: 'center', p: 2 }}>
<Text sx={{ fontSize: 'sm', color: 'base.500', _dark: 'base.700' }}>
{t('models.noRefinerModelsInstalled')}
</Text>
</Flex>
</IAICollapse>
);
} }
return ( return (