github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-18 08:12:22 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add badges for advanced settings

Browse Source
This commit is contained in:
psychedelicious
2024-01-03 09:23:10 +11:00
parent b1b5c0d3b2
commit 930de51910
4 changed files with 43 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
View File

@@ -1,4 +1,7 @@
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 { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
import type { InvLabelProps } from 'common/components/InvControl/types';
import { InvSingleAccordion } from 'common/components/InvSingleAccordion/InvSingleAccordion';
@@ -19,11 +22,35 @@ const labelProps2: InvLabelProps = {
flexGrow: 1,
};
const selectBadges = createMemoizedSelector(stateSelector, (state) => {
const badges: (string | number)[] = [];
if (state.generation.vae) {
let vaeBadge = state.generation.vae.model_name;
if (state.generation.vaePrecision === 'fp16') {
vaeBadge += ` ${state.generation.vaePrecision}`;
}
badges.push(vaeBadge);
} else if (state.generation.vaePrecision === 'fp16') {
badges.push(`VAE ${state.generation.vaePrecision}`);
}
if (state.generation.clipSkip) {
badges.push(`Skip ${state.generation.clipSkip}`);
}
if (state.generation.cfgRescaleMultiplier) {
badges.push(`Rescale ${state.generation.cfgRescaleMultiplier}`);
}
if (state.generation.seamlessXAxis || state.generation.seamlessYAxis) {
badges.push('seamless');
}
return badges;
});
export const AdvancedSettingsAccordion = memo(() => {
const badges = useAppSelector(selectBadges);
const { t } = useTranslation();
return (
<InvSingleAccordion label={t('accordions.advanced.title')}>
<InvSingleAccordion label={t('accordions.advanced.title')} badges={badges}>
<Flex gap={4} alignItems="center" p={4} flexDir="column">
<Flex gap={4} w="full">
<ParamVAEModelSelect />

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

@@ -20,7 +20,7 @@ import ParamCFGScale from 'features/parameters/components/Core/ParamCFGScale';
import ParamScheduler from 'features/parameters/components/Core/ParamScheduler';
import ParamSteps from 'features/parameters/components/Core/ParamSteps';
import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect';
import { size, truncate } from 'lodash-es';
import { size } from 'lodash-es';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
@@ -34,9 +34,7 @@ const badgesSelector = createMemoizedSelector(
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.model_name);
accordionBadges.push(generation.model.base_model);
}