github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-01-15 06:58:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

(ui) add Canvas Alert for invocation progress messages

Browse Source
This commit is contained in:
Mary Hipp
2024-11-06 20:32:47 -05:00
committed by psychedelicious
parent 9bbb5644af
commit bdbdb22b74
4 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { Alert, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { memo } from 'react';
import { $progressEventMessage } from 'services/events/stores';
export const CanvasAlertsInvocationProgress = memo(() => {
const progressEventMessage = useStore($progressEventMessage);
if (!progressEventMessage) {
return <></>;
}
return (
<Alert status="loading" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
<AlertIcon />
<AlertTitle>{progressEventMessage}</AlertTitle>
</Alert>
);
});
CanvasAlertsInvocationProgress.displayName = 'CanvasAlertsInvocationProgress';

3
invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
View File

@@ -21,6 +21,8 @@ import { GatedImageViewer } from 'features/gallery/components/ImageViewer/ImageV
import { memo, useCallback, useRef } from 'react';
import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
import { CanvasAlertsInvocationProgress } from './CanvasAlerts/CanvasAlertsInvocationProgress';
const MenuContent = () => {
return (
<CanvasManagerProviderGate>
@@ -83,6 +85,7 @@ export const CanvasMainPanelContent = memo(() => {
{showHUD && <CanvasHUD />}
<CanvasAlertsSelectedEntityStatus />
<CanvasAlertsPreserveMask />
<CanvasAlertsInvocationProgress />
<CanvasAlertsSendingToGallery />
</Flex>
<Flex position="absolute" top={1} insetInlineEnd={1}>

2
invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
View File

@@ -2,6 +2,7 @@ import { Box, Flex } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { skipToken } from '@reduxjs/toolkit/query';
import { useAppSelector } from 'app/store/storeHooks';
import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
import { CanvasAlertsSendingToCanvas } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo';
import { DndImage } from 'features/dnd/DndImage';
import ImageMetadataViewer from 'features/gallery/components/ImageMetadataViewer/ImageMetadataViewer';
@@ -49,6 +50,7 @@ const CurrentImagePreview = () => {
>
<ImageContent imageDTO={imageDTO} />
<Box position="absolute" top={0} insetInlineStart={0}>
<CanvasAlertsInvocationProgress />
<CanvasAlertsSendingToCanvas />
</Box>
{shouldShowImageDetails && imageDTO && (

1
invokeai/frontend/web/src/services/events/stores.ts
View File

@@ -10,3 +10,4 @@ export const $lastProgressEvent = atom<S['InvocationProgressEvent'] | null>(null
export const $progressImage = computed($lastProgressEvent, (val) => val?.image ?? null);
export const $hasProgressImage = computed($lastProgressEvent, (val) => Boolean(val?.image));
export const $isProgressFromCanvas = computed($lastProgressEvent, (val) => val?.destination === 'canvas');
export const $progressEventMessage = computed($lastProgressEvent, (val) => val?.message);