diff --git a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx index 1f747b6b42..c9b446d606 100644 --- a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx +++ b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx @@ -3,12 +3,19 @@ import { Spacer, } from '@chakra-ui/react'; import { InvBadge } from 'common/components/InvBadge/wrapper'; +import { truncate } from 'lodash-es'; +import { useMemo } from 'react'; import type { InvAccordionButtonProps } from './types'; import { InvAccordionIcon } from './wrapper'; export const InvAccordionButton = (props: InvAccordionButtonProps) => { - const { children, badges, ...rest } = props; + const { children, badges: _badges, ...rest } = props; + const badges = useMemo( + () => + _badges?.map((b) => truncate(String(b), { length: 24, omission: '...' })), + [_badges] + ); return ( {children} diff --git a/invokeai/frontend/web/src/common/components/InvBadge/theme.ts b/invokeai/frontend/web/src/common/components/InvBadge/theme.ts index d5ab6f494b..db4d927160 100644 --- a/invokeai/frontend/web/src/common/components/InvBadge/theme.ts +++ b/invokeai/frontend/web/src/common/components/InvBadge/theme.ts @@ -1,7 +1,7 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; const baseStyle = defineStyle((props) => ({ - fontSize: '10px', + fontSize: '9px', px: 2, py: 1, minW: 4, @@ -11,6 +11,10 @@ const baseStyle = defineStyle((props) => ({ color: 'base.900', fontWeight: 'bold', letterSpacing: 0.5, + wordBreak: 'break-all', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden' })); export const badgeTheme = defineStyleConfig({ diff --git a/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx index 5544c256dd..777945f501 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx @@ -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 ( - + diff --git a/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx index 6993b67071..568aeb8088 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx @@ -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); }