fix(ui): fix no progress images when gallery is empty (#3268)

When gallery was empty (and there is therefore no selected image), no
progress images were displayed.

- fix by correcting the logic in CurrentImageDisplay
- also fix app crash introduced by fixing the first bug

invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx

@@ -151,11 +151,17 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   };
 
   const handleCopyImage = async () => {
-    if (!selectedImage) return;
+    if (!selectedImage?.url) {
+      return;
+    }
 
-    const blob = await fetch(getUrl(selectedImage.url)).then((res) =>
+    const url = getUrl(selectedImage.url);
-      res.blob()
+
-    );
+    if (!url) {
+      return;
+    }
+
+    const blob = await fetch(url).then((res) => res.blob());
     const data = [new ClipboardItem({ [blob.type]: blob })];
 
     await navigator.clipboard.write(data);
@@ -175,6 +181,10 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         : window.location.toString() + selectedImage.url
       : '';
 
+    if (!url) {
+      return;
+    }
+
     navigator.clipboard.writeText(url).then(() => {
       toast({
         title: t('toast.imageLinkCopied'),
@@ -477,7 +487,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
               {t('parameters.copyImageToLink')}
             </IAIButton>
 
-            <Link download={true} href={getUrl(selectedImage!.url)}>
+            <Link download={true} href={getUrl(selectedImage?.url)}>
               <IAIButton leftIcon={<FaDownload />} size="sm" w="100%">
                 {t('parameters.downloadImage')}
               </IAIButton>

invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx

@@ -1,6 +1,7 @@
 import { Flex, Icon } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/storeHooks';
+import { systemSelector } from 'features/system/store/systemSelectors';
 import { isEqual } from 'lodash';
 
 import { MdPhoto } from 'react-icons/md';
@@ -12,12 +13,12 @@ import CurrentImageButtons from './CurrentImageButtons';
 import CurrentImagePreview from './CurrentImagePreview';
 
 export const currentImageDisplaySelector = createSelector(
-  [gallerySelector, selectedImageSelector],
+  [systemSelector, selectedImageSelector],
-  (gallery, selectedImage) => {
+  (system, selectedImage) => {
-    const { currentImage, intermediateImage } = gallery;
+    const { progressImage } = system;
 
     return {
-      hasAnImageToDisplay: selectedImage || intermediateImage,
+      hasAnImageToDisplay: selectedImage || progressImage,
     };
   },
   {