fix(ui): only count enabled control adapters in collapse heading

This commit is contained in:
psychedelicious 2023-10-12 14:16:54 +11:00
parent 69937d68d2
commit 8ef38ecc7c
3 changed files with 41 additions and 13 deletions

View File

@ -968,10 +968,10 @@
"missingFieldTemplate": "Missing field template", "missingFieldTemplate": "Missing field template",
"missingInputForField": "{{nodeLabel}} -> {{fieldLabel}} missing input", "missingInputForField": "{{nodeLabel}} -> {{fieldLabel}} missing input",
"missingNodeTemplate": "Missing node template", "missingNodeTemplate": "Missing node template",
"noControlImageForControlAdapter": "Control Adapter {{number}} has no control image", "noControlImageForControlAdapter": "Control Adapter #{{number}} has no control image",
"noInitialImageSelected": "No initial image selected", "noInitialImageSelected": "No initial image selected",
"noModelForControlAdapter": "Control Adapter {{number}} has no model selected.", "noModelForControlAdapter": "Control Adapter #{{number}} has no model selected.",
"incompatibleBaseModelForControlAdapter": "Control Adapter {{number}} model is invalid with main model.", "incompatibleBaseModelForControlAdapter": "Control Adapter #{{number}} model is invalid with main model.",
"noModelSelected": "No model selected", "noModelSelected": "No model selected",
"noPrompts": "No prompts generated", "noPrompts": "No prompts generated",
"noNodesInGraph": "No nodes in graph", "noNodesInGraph": "No nodes in graph",

View File

@ -11,31 +11,53 @@ import {
selectAllIPAdapters, selectAllIPAdapters,
selectAllT2IAdapters, selectAllT2IAdapters,
selectControlAdapterIds, selectControlAdapterIds,
selectValidControlNets,
selectValidIPAdapters,
selectValidT2IAdapters,
} from 'features/controlAdapters/store/controlAdaptersSlice'; } from 'features/controlAdapters/store/controlAdaptersSlice';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { Fragment, memo } from 'react'; import { Fragment, memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaPlus } from 'react-icons/fa'; import { FaPlus } from 'react-icons/fa';
import { useAddControlAdapter } from '../hooks/useAddControlAdapter'; import { useAddControlAdapter } from '../hooks/useAddControlAdapter';
import { useTranslation } from 'react-i18next';
const selector = createSelector( const selector = createSelector(
[stateSelector], [stateSelector],
({ controlAdapters }) => { ({ controlAdapters }) => {
const activeLabel: string[] = []; const activeLabel: string[] = [];
let isError = false;
const ipAdapterCount = selectAllIPAdapters(controlAdapters).length; const enabledIPAdapterCount = selectAllIPAdapters(controlAdapters).filter(
if (ipAdapterCount > 0) { (ca) => ca.isEnabled
activeLabel.push(`${ipAdapterCount} IP`); ).length;
const validIPAdapterCount = selectValidIPAdapters(controlAdapters).length;
if (enabledIPAdapterCount > 0) {
activeLabel.push(`${enabledIPAdapterCount} IP`);
}
if (enabledIPAdapterCount > validIPAdapterCount) {
isError = true;
} }
const controlNetCount = selectAllControlNets(controlAdapters).length; const enabledControlNetCount = selectAllControlNets(controlAdapters).filter(
if (controlNetCount > 0) { (ca) => ca.isEnabled
activeLabel.push(`${controlNetCount} ControlNet`); ).length;
const validControlNetCount = selectValidControlNets(controlAdapters).length;
if (enabledControlNetCount > 0) {
activeLabel.push(`${enabledControlNetCount} ControlNet`);
}
if (enabledControlNetCount > validControlNetCount) {
isError = true;
} }
const t2iAdapterCount = selectAllT2IAdapters(controlAdapters).length; const enabledT2IAdapterCount = selectAllT2IAdapters(controlAdapters).filter(
if (t2iAdapterCount > 0) { (ca) => ca.isEnabled
activeLabel.push(`${t2iAdapterCount} T2I`); ).length;
const validT2IAdapterCount = selectValidT2IAdapters(controlAdapters).length;
if (enabledT2IAdapterCount > 0) {
activeLabel.push(`${enabledT2IAdapterCount} T2I`);
}
if (enabledT2IAdapterCount > validT2IAdapterCount) {
isError = true;
} }
const controlAdapterIds = const controlAdapterIds =
@ -44,6 +66,7 @@ const selector = createSelector(
return { return {
controlAdapterIds, controlAdapterIds,
activeLabel: activeLabel.join(', '), activeLabel: activeLabel.join(', '),
isError, // TODO: Add some visual indicator that the control adapters are in an error state
}; };
}, },
defaultSelectorOptions defaultSelectorOptions

View File

@ -1,6 +1,10 @@
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools'; import { mode } from '@chakra-ui/theme-tools';
const error = defineStyle((props) => ({
color: mode('error.500', 'error.400')(props),
}));
const subtext = defineStyle((props) => ({ const subtext = defineStyle((props) => ({
color: mode('base.500', 'base.400')(props), color: mode('base.500', 'base.400')(props),
})); }));
@ -8,5 +12,6 @@ const subtext = defineStyle((props) => ({
export const textTheme = defineStyleConfig({ export const textTheme = defineStyleConfig({
variants: { variants: {
subtext, subtext,
error,
}, },
}); });