diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useControlLayersTitle.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useControlLayersTitle.ts deleted file mode 100644 index bf0fa661a9..0000000000 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/useControlLayersTitle.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { createSelector } from '@reduxjs/toolkit'; -import { useAppSelector } from 'app/store/storeHooks'; -import { - isControlAdapterLayer, - isInitialImageLayer, - isIPAdapterLayer, - isRegionalGuidanceLayer, - selectControlLayersSlice, -} from 'features/controlLayers/store/controlLayersSlice'; -import { useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; - -const selectValidLayerCount = createSelector(selectControlLayersSlice, (controlLayers) => { - let count = 0; - controlLayers.present.layers.forEach((l) => { - if (isRegionalGuidanceLayer(l)) { - const hasTextPrompt = Boolean(l.positivePrompt || l.negativePrompt); - const hasAtLeastOneImagePrompt = l.ipAdapters.filter((ipa) => Boolean(ipa.image)).length > 0; - if (hasTextPrompt || hasAtLeastOneImagePrompt) { - count += 1; - } - } - if (isControlAdapterLayer(l)) { - if (l.controlAdapter.image || l.controlAdapter.processedImage) { - count += 1; - } - } - if (isIPAdapterLayer(l)) { - if (l.ipAdapter.image) { - count += 1; - } - } - if (isInitialImageLayer(l)) { - if (l.image) { - count += 1; - } - } - }); - - return count; -}); - -export const useControlLayersTitle = () => { - const { t } = useTranslation(); - const validLayerCount = useAppSelector(selectValidLayerCount); - const title = useMemo(() => { - const suffix = validLayerCount > 0 ? ` (${validLayerCount})` : ''; - return `${t('controlLayers.controlLayers')}${suffix}`; - }, [t, validLayerCount]); - return title; -}; diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx index 3e02e1e132..a7a401cde4 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx @@ -3,7 +3,6 @@ import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/u import { useAppSelector } from 'app/store/storeHooks'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { ControlLayersPanelContent } from 'features/controlLayers/components/ControlLayersPanelContent'; -import { useControlLayersTitle } from 'features/controlLayers/hooks/useControlLayersTitle'; import { Prompts } from 'features/parameters/components/Prompts/Prompts'; import QueueControls from 'features/queue/components/QueueControls'; import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts'; @@ -16,7 +15,7 @@ import { RefinerSettingsAccordion } from 'features/settingsAccordions/components import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import type { CSSProperties } from 'react'; -import { memo } from 'react'; +import { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; const overlayScrollbarsStyles: CSSProperties = { @@ -39,7 +38,13 @@ const selectedStyles: ChakraProps['sx'] = { const ParametersPanelTextToImage = () => { const { t } = useTranslation(); const activeTabName = useAppSelector(activeTabNameSelector); - const controlLayersTitle = useControlLayersTitle(); + const controlLayersCount = useAppSelector((s) => s.controlLayers.present.layers.length); + const controlLayersTitle = useMemo(() => { + if (controlLayersCount === 0) { + return t('controlLayers.controlLayers'); + } + return `${t('controlLayers.controlLayers')} (${controlLayersCount})`; + }, [controlLayersCount, t]); const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl'); return (