github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(nodes): add enable, disable, status to invocation cache

Browse Source 
- New routes to clear, enable, disable and get the status of the cache
- Status includes hits, misses, size, max size, enabled
- Add client cache queries and mutations, abstracted into hooks
- Add invocation cache status area (next to queue status) w/ buttons
This commit is contained in:
psychedelicious
2023-09-21 18:57:52 +10:00
committed by Kent Keirsey
parent aa82f9360c
commit 7ac99d6bc3
22 changed files with 687 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
invokeai/frontend/web/src/features/queue/components/ClearInvocationCacheButton.tsx Normal file
View File

@@ -0,0 +1,22 @@
import IAIButton from 'common/components/IAIButton';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { useClearInvocationCache } from '../hooks/useClearInvocationCache';
const ClearInvocationCacheButton = () => {
const { t } = useTranslation();
const { clearInvocationCache, isDisabled, isLoading } =
useClearInvocationCache();
return (
<IAIButton
isDisabled={isDisabled}
isLoading={isLoading}
onClick={clearInvocationCache}
>
{t('invocationCache.clear')}
</IAIButton>
);
};
export default memo(ClearInvocationCacheButton);

45
invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { ButtonGroup } from '@chakra-ui/react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetInvocationCacheStatusQuery } from 'services/api/endpoints/appInfo';
import ClearInvocationCacheButton from './ClearInvocationCacheButton';
import ToggleInvocationCacheButton from './ToggleInvocationCacheButton';
import StatusStatGroup from './common/StatusStatGroup';
import StatusStatItem from './common/StatusStatItem';
const InvocationCacheStatus = () => {
const { data: cacheStatus } = useGetInvocationCacheStatusQuery(undefined, {
pollingInterval: 5000,
});
const { t } = useTranslation();
return (
<StatusStatGroup>
<StatusStatItem
isDisabled={!cacheStatus?.enabled}
label={t('invocationCache.cacheSize')}
value={cacheStatus?.size ?? 0}
/>
<StatusStatItem
isDisabled={!cacheStatus?.enabled}
label={t('invocationCache.hits')}
value={cacheStatus?.hits ?? 0}
/>
<StatusStatItem
isDisabled={!cacheStatus?.enabled}
label={t('invocationCache.misses')}
value={cacheStatus?.misses ?? 0}
/>
<StatusStatItem
isDisabled={!cacheStatus?.enabled}
label={t('invocationCache.maxCacheSize')}
value={cacheStatus?.max_size ?? 0}
/>
<ButtonGroup w={24} orientation="vertical" size="xs">
<ClearInvocationCacheButton />
<ToggleInvocationCacheButton />
</ButtonGroup>
</StatusStatGroup>
);
};
export default memo(InvocationCacheStatus);

55
invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx
View File

@@ -1,38 +1,39 @@
import { Stat, StatGroup, StatLabel, StatNumber } from '@chakra-ui/react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
import StatusStatGroup from './common/StatusStatGroup';
import StatusStatItem from './common/StatusStatItem';
const QueueStatus = () => {
const { data: queueStatus } = useGetQueueStatusQuery();
const { t } = useTranslation();
return (
<StatGroup alignItems="center" justifyContent="center" w="full" h="full">
<Stat w={24}>
<StatLabel>{t('queue.in_progress')}</StatLabel>
<StatNumber>{queueStatus?.queue.in_progress ?? 0}</StatNumber>
</Stat>
<Stat w={24}>
<StatLabel>{t('queue.pending')}</StatLabel>
<StatNumber>{queueStatus?.queue.pending ?? 0}</StatNumber>
</Stat>
<Stat w={24}>
<StatLabel>{t('queue.completed')}</StatLabel>
<StatNumber>{queueStatus?.queue.completed ?? 0}</StatNumber>
</Stat>
<Stat w={24}>
<StatLabel>{t('queue.failed')}</StatLabel>
<StatNumber>{queueStatus?.queue.failed ?? 0}</StatNumber>
</Stat>
<Stat w={24}>
<StatLabel>{t('queue.canceled')}</StatLabel>
<StatNumber>{queueStatus?.queue.canceled ?? 0}</StatNumber>
</Stat>
<Stat w={24}>
<StatLabel>{t('queue.total')}</StatLabel>
<StatNumber>{queueStatus?.queue.total}</StatNumber>
</Stat>
</StatGroup>
<StatusStatGroup>
<StatusStatItem
label={t('queue.in_progress')}
value={queueStatus?.queue.in_progress ?? 0}
/>
<StatusStatItem
label={t('queue.pending')}
value={queueStatus?.queue.pending ?? 0}
/>
<StatusStatItem
label={t('queue.completed')}
value={queueStatus?.queue.completed ?? 0}
/>
<StatusStatItem
label={t('queue.failed')}
value={queueStatus?.queue.failed ?? 0}
/>
<StatusStatItem
label={t('queue.canceled')}
value={queueStatus?.queue.canceled ?? 0}
/>
<StatusStatItem
label={t('queue.total')}
value={queueStatus?.queue.total ?? 0}
/>
</StatusStatGroup>
);
};

44
invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
View File

@@ -1,16 +1,14 @@
import { Box, ButtonGroup, Flex } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import { memo } from 'react';
import ClearQueueButton from './ClearQueueButton';
import PauseProcessorButton from './PauseProcessorButton';
import PruneQueueButton from './PruneQueueButton';
import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
import InvocationCacheStatus from './InvocationCacheStatus';
import QueueList from './QueueList/QueueList';
import QueueStatus from './QueueStatus';
import ResumeProcessorButton from './ResumeProcessorButton';
import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
import QueueTabQueueControls from './QueueTabQueueControls';
const QueueTabContent = () => {
const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled;
const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled;
const isInvocationCacheEnabled =
useFeatureStatus('invocationCache').isFeatureEnabled;
return (
<Flex
@@ -23,33 +21,9 @@ const QueueTabContent = () => {
gap={2}
>
<Flex gap={2} w="full">
<Flex layerStyle="second" borderRadius="base" p={2} gap={2}>
{isPauseEnabled || isResumeEnabled ? (
<ButtonGroup w={28} orientation="vertical" isAttached size="sm">
{isResumeEnabled ? <ResumeProcessorButton /> : <></>}
{isPauseEnabled ? <PauseProcessorButton /> : <></>}
</ButtonGroup>
) : (
<></>
)}
<ButtonGroup w={28} orientation="vertical" isAttached size="sm">
<PruneQueueButton />
<ClearQueueButton />
</ButtonGroup>
</Flex>
<Flex
layerStyle="second"
borderRadius="base"
flexDir="column"
py={2}
px={3}
gap={2}
>
<QueueStatus />
</Flex>
{/* <QueueStatusCard />
<CurrentQueueItemCard />
<NextQueueItemCard /> */}
<QueueTabQueueControls />
<QueueStatus />
{isInvocationCacheEnabled && <InvocationCacheStatus />}
</Flex>
<Box layerStyle="second" p={2} borderRadius="base" w="full" h="full">
<QueueList />

30
invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { ButtonGroup, Flex } from '@chakra-ui/react';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import ClearQueueButton from './ClearQueueButton';
import PauseProcessorButton from './PauseProcessorButton';
import PruneQueueButton from './PruneQueueButton';
import ResumeProcessorButton from './ResumeProcessorButton';
const QueueTabQueueControls = () => {
const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled;
const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled;
return (
<Flex layerStyle="second" borderRadius="base" p={2} gap={2}>
{isPauseEnabled || isResumeEnabled ? (
<ButtonGroup w={28} orientation="vertical" isAttached size="sm">
{isResumeEnabled ? <ResumeProcessorButton /> : <></>}
{isPauseEnabled ? <PauseProcessorButton /> : <></>}
</ButtonGroup>
) : (
<></>
)}
<ButtonGroup w={28} orientation="vertical" isAttached size="sm">
<PruneQueueButton />
<ClearQueueButton />
</ButtonGroup>
</Flex>
);
};
export default memo(QueueTabQueueControls);

47
invokeai/frontend/web/src/features/queue/components/ToggleInvocationCacheButton.tsx Normal file
View File

@@ -0,0 +1,47 @@
import IAIButton from 'common/components/IAIButton';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetInvocationCacheStatusQuery } from 'services/api/endpoints/appInfo';
import { useDisableInvocationCache } from '../hooks/useDisableInvocationCache';
import { useEnableInvocationCache } from '../hooks/useEnableInvocationCache';
const ToggleInvocationCacheButton = () => {
const { t } = useTranslation();
const { data: cacheStatus } = useGetInvocationCacheStatusQuery();
const {
enableInvocationCache,
isDisabled: isEnableDisabled,
isLoading: isEnableLoading,
} = useEnableInvocationCache();
const {
disableInvocationCache,
isDisabled: isDisableDisabled,
isLoading: isDisableLoading,
} = useDisableInvocationCache();
if (cacheStatus?.enabled) {
return (
<IAIButton
isDisabled={isDisableDisabled}
isLoading={isDisableLoading}
onClick={disableInvocationCache}
>
{t('invocationCache.disable')}
</IAIButton>
);
}
return (
<IAIButton
isDisabled={isEnableDisabled}
isLoading={isEnableLoading}
onClick={enableInvocationCache}
>
{t('invocationCache.enable')}
</IAIButton>
);
};
export default memo(ToggleInvocationCacheButton);

27
invokeai/frontend/web/src/features/queue/components/VerticalQueueControls.tsx
View File

@@ -1,27 +0,0 @@
import { ButtonGroup, ButtonGroupProps, Flex } from '@chakra-ui/react';
import { memo } from 'react';
import ClearQueueButton from './ClearQueueButton';
import PauseProcessorButton from './PauseProcessorButton';
import PruneQueueButton from './PruneQueueButton';
import ResumeProcessorButton from './ResumeProcessorButton';
type Props = ButtonGroupProps & {
asIconButtons?: boolean;
};
const VerticalQueueControls = ({ asIconButtons, ...rest }: Props) => {
return (
<Flex flexDir="column" gap={2}>
<ButtonGroup w="full" isAttached {...rest}>
<ResumeProcessorButton asIconButton={asIconButtons} />
<PauseProcessorButton asIconButton={asIconButtons} />
</ButtonGroup>
<ButtonGroup w="full" isAttached {...rest}>
<PruneQueueButton asIconButton={asIconButtons} />
<ClearQueueButton asIconButton={asIconButtons} />
</ButtonGroup>
</Flex>
);
};
export default memo(VerticalQueueControls);

22
invokeai/frontend/web/src/features/queue/components/common/StatusStatGroup.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { StatGroup, StatGroupProps } from '@chakra-ui/react';
import { memo } from 'react';
const StatusStatGroup = ({ children, ...rest }: StatGroupProps) => (
<StatGroup
alignItems="center"
justifyContent="center"
w="full"
h="full"
layerStyle="second"
borderRadius="base"
py={2}
px={3}
gap={6}
flexWrap="nowrap"
{...rest}
>
{children}
</StatGroup>
);
export default memo(StatusStatGroup);

47
invokeai/frontend/web/src/features/queue/components/common/StatusStatItem.tsx Normal file
View File

@@ -0,0 +1,47 @@
import {
ChakraProps,
Stat,
StatLabel,
StatNumber,
StatProps,
} from '@chakra-ui/react';
import { memo } from 'react';
const sx: ChakraProps['sx'] = {
'&[aria-disabled="true"]': {
color: 'base.400',
_dark: {
color: 'base.500',
},
},
};
type Props = Omit<StatProps, 'children'> & {
label: string;
value: string | number;
isDisabled?: boolean;
};
const StatusStatItem = ({
label,
value,
isDisabled = false,
...rest
}: Props) => (
<Stat
flexGrow={1}
textOverflow="ellipsis"
overflow="hidden"
whiteSpace="nowrap"
aria-disabled={isDisabled}
sx={sx}
{...rest}
>
<StatLabel textOverflow="ellipsis" overflow="hidden" whiteSpace="nowrap">
{label}
</StatLabel>
<StatNumber>{value}</StatNumber>
</Stat>
);
export default memo(StatusStatItem);

48
invokeai/frontend/web/src/features/queue/hooks/useClearInvocationCache.ts Normal file
View File

@@ -0,0 +1,48 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useClearInvocationCacheMutation,
useGetInvocationCacheStatusQuery,
} from 'services/api/endpoints/appInfo';
export const useClearInvocationCache = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { data: cacheStatus } = useGetInvocationCacheStatusQuery();
const isConnected = useAppSelector((state) => state.system.isConnected);
const [trigger, { isLoading }] = useClearInvocationCacheMutation({
fixedCacheKey: 'clearInvocationCache',
});
const isDisabled = useMemo(
() => !cacheStatus?.size || !isConnected,
[cacheStatus?.size, isConnected]
);
const clearInvocationCache = useCallback(async () => {
if (isDisabled) {
return;
}
try {
await trigger().unwrap();
dispatch(
addToast({
title: t('invocationCache.clearSucceeded'),
status: 'success',
})
);
} catch {
dispatch(
addToast({
title: t('invocationCache.clearFailed'),
status: 'error',
})
);
}
}, [isDisabled, trigger, dispatch, t]);
return { clearInvocationCache, isLoading, cacheStatus, isDisabled };
};

48
invokeai/frontend/web/src/features/queue/hooks/useDisableInvocationCache.ts Normal file
View File

@@ -0,0 +1,48 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useDisableInvocationCacheMutation,
useGetInvocationCacheStatusQuery,
} from 'services/api/endpoints/appInfo';
export const useDisableInvocationCache = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { data: cacheStatus } = useGetInvocationCacheStatusQuery();
const isConnected = useAppSelector((state) => state.system.isConnected);
const [trigger, { isLoading }] = useDisableInvocationCacheMutation({
fixedCacheKey: 'disableInvocationCache',
});
const isDisabled = useMemo(
() => !cacheStatus?.enabled || !isConnected,
[cacheStatus?.enabled, isConnected]
);
const disableInvocationCache = useCallback(async () => {
if (isDisabled) {
return;
}
try {
await trigger().unwrap();
dispatch(
addToast({
title: t('invocationCache.disableSucceeded'),
status: 'success',
})
);
} catch {
dispatch(
addToast({
title: t('invocationCache.disableFailed'),
status: 'error',
})
);
}
}, [isDisabled, trigger, dispatch, t]);
return { disableInvocationCache, isLoading, cacheStatus, isDisabled };
};

48
invokeai/frontend/web/src/features/queue/hooks/useEnableInvocationCache.ts Normal file
View File

@@ -0,0 +1,48 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useEnableInvocationCacheMutation,
useGetInvocationCacheStatusQuery,
} from 'services/api/endpoints/appInfo';
export const useEnableInvocationCache = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { data: cacheStatus } = useGetInvocationCacheStatusQuery();
const isConnected = useAppSelector((state) => state.system.isConnected);
const [trigger, { isLoading }] = useEnableInvocationCacheMutation({
fixedCacheKey: 'enableInvocationCache',
});
const isDisabled = useMemo(
() => cacheStatus?.enabled || !isConnected,
[cacheStatus?.enabled, isConnected]
);
const enableInvocationCache = useCallback(async () => {
if (isDisabled) {
return;
}
try {
await trigger().unwrap();
dispatch(
addToast({
title: t('invocationCache.enableSucceeded'),
status: 'success',
})
);
} catch {
dispatch(
addToast({
title: t('invocationCache.enableFailed'),
status: 'error',
})
);
}
}, [isDisabled, trigger, dispatch, t]);
return { enableInvocationCache, isLoading, cacheStatus, isDisabled };
};