feat(ui): do not show canvas progress in viewer

Author: psychedelicious

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

@@ -15,7 +15,7 @@ import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImageBold } from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-import { $hasProgress } from 'services/events/setEventListeners';
+import { $hasProgress, $isProgressFromCanvas } from 'services/events/setEventListeners';
 
 import ProgressImage from './ProgressImage';
 
@@ -24,6 +24,7 @@ const CurrentImagePreview = () => {
   const shouldShowImageDetails = useAppSelector(selectShouldShowImageDetails);
   const imageName = useAppSelector(selectLastSelectedImageName);
   const hasDenoiseProgress = useStore($hasProgress);
+  const isProgressFromCanvas = useStore($isProgressFromCanvas);
   const shouldShowProgressInViewer = useAppSelector(selectShouldShowProgressInViewer);
 
   const { currentData: imageDTO } = useGetImageDTOQuery(imageName ?? skipToken);
@@ -61,7 +62,7 @@ const CurrentImagePreview = () => {
       justifyContent="center"
       position="relative"
     >
-      {hasDenoiseProgress && shouldShowProgressInViewer ? (
+      {hasDenoiseProgress && !isProgressFromCanvas && shouldShowProgressInViewer ? (
         <ProgressImage />
       ) : (
         <IAIDndImage

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx

@@ -5,7 +5,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { memo, useMemo } from 'react';
-import { $progressImage } from 'services/events/setEventListeners';
+import { $isProgressFromCanvas, $progressImage } from 'services/events/setEventListeners';
 
 const selectShouldAntialiasProgressImage = createSelector(
   selectSystemSlice,
@@ -14,6 +14,7 @@ const selectShouldAntialiasProgressImage = createSelector(
 
 const CurrentImagePreview = () => {
   const progressImage = useStore($progressImage);
+  const isProgressFromCanvas = useStore($isProgressFromCanvas);
   const shouldAntialiasProgressImage = useAppSelector(selectShouldAntialiasProgressImage);
 
   const sx = useMemo<SystemStyleObject>(
@@ -23,7 +24,7 @@ const CurrentImagePreview = () => {
     [shouldAntialiasProgressImage]
   );
 
-  if (!progressImage) {
+  if (!progressImage || isProgressFromCanvas) {
     return null;
   }
 

invokeai/frontend/web/src/services/events/setEventListeners.tsx

@@ -40,6 +40,7 @@ const nodeTypeDenylist = ['load_image', 'image'];
 export const $lastProgressEvent = atom<S['InvocationDenoiseProgressEvent'] | null>(null);
 export const $hasProgress = computed($lastProgressEvent, (val) => Boolean(val));
 export const $progressImage = computed($lastProgressEvent, (val) => val?.progress_image ?? null);
+export const $isProgressFromCanvas = computed($lastProgressEvent, (val) => val?.destination === 'canvas');
 
 export const setEventListeners = ({ socket, dispatch, getState, setIsConnected }: SetEventListenersArg) => {
   socket.on('connect', () => {