feat(ui): add badges for advanced settings

Author: psychedelicious

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<string[] | undefined>(
+    () =>
+      _badges?.map((b) => truncate(String(b), { length: 24, omission: '...' })),
+    [_badges]
+  );
   return (
     <ChakraAccordionButton {...rest}>
       {children}

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({

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 (
-    <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 />

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);
     }