Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): generation accordion badges

Browse Source
This commit is contained in:
psychedelicious 2023-12-29 12:47:36 +11:00 committed by Kent Keirsey
parent ccbbb417f9
commit f5194f9e2d
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
View File

@ -1,4 +1,6 @@
import { Flex } from '@chakra-ui/layout'; import { Flex } from '@chakra-ui/layout';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { InvControlGroup } from 'common/components/InvControl/InvControlGroup'; import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
import type { InvLabelProps } from 'common/components/InvControl/types'; import type { InvLabelProps } from 'common/components/InvControl/types';
@ -18,26 +20,43 @@ import ParamCFGScale from 'features/parameters/components/Core/ParamCFGScale';
import ParamScheduler from 'features/parameters/components/Core/ParamScheduler'; import ParamScheduler from 'features/parameters/components/Core/ParamScheduler';
import ParamSteps from 'features/parameters/components/Core/ParamSteps'; import ParamSteps from 'features/parameters/components/Core/ParamSteps';
import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect'; import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect';
import { size } from 'lodash-es'; import { size, truncate } from 'lodash-es';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const labelProps: InvLabelProps = { const labelProps: InvLabelProps = {
w: '4rem', w: '4rem',
}; };
const badgesSelector = createMemoizedSelector(
stateSelector,
({ lora, generation }) => {
const loraTabBadges = size(lora.loras) ? [size(lora.loras)] : [];
const accordionBadges: (string | number)[] = [];
if (generation.model) {
accordionBadges.push(
truncate(generation.model.model_name, { length: 24, omission: '...' })
);
accordionBadges.push(generation.model.base_model);
}
return { loraTabBadges, accordionBadges };
}
);
export const GenerationSettingsAccordion = () => { export const GenerationSettingsAccordion = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const loraCount = useAppSelector((state) => size(state.lora.loras)); const { loraTabBadges, accordionBadges } = useAppSelector(badgesSelector);
return ( return (
<InvSingleAccordion <InvSingleAccordion
label={t('accordions.generation.title')} label={t('accordions.generation.title')}
defaultIsOpen={true} defaultIsOpen={true}
badges={accordionBadges}
> >
<InvTabs variant="collapse"> <InvTabs variant="collapse">
<InvTabList> <InvTabList>
<InvTab>{t('accordions.generation.modelTab')}</InvTab> <InvTab>{t('accordions.generation.modelTab')}</InvTab>
<InvTab badges={loraCount ? [loraCount] : undefined}> <InvTab badges={loraTabBadges}>
{t('accordions.generation.conceptsTab')} {t('accordions.generation.conceptsTab')}
</InvTab> </InvTab>
</InvTabList> </InvTabList>