From 1d4d705795e591fdce8b4af49a93cd8dc4db5821 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 26 May 2023 14:50:47 +1000 Subject: [PATCH] feat(ui): improve image urls handling --- .../middleware/listenerMiddleware/index.ts | 8 +++ .../listeners/imageUrlsReceived.ts | 51 +++++++++++++++++++ .../features/gallery/store/resultsSlice.ts | 23 --------- .../features/gallery/store/uploadsSlice.ts | 19 ------- .../frontend/web/src/services/thunks/image.ts | 9 ---- 5 files changed, 59 insertions(+), 51 deletions(-) create mode 100644 invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUrlsReceived.ts diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts index be3a798015..8467b24c08 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts @@ -40,6 +40,10 @@ import { addImageMetadataReceivedFulfilledListener, addImageMetadataReceivedRejectedListener, } from './listeners/imageMetadataReceived'; +import { + addImageUrlsReceivedFulfilledListener, + addImageUrlsReceivedRejectedListener, +} from './listeners/imageUrlsReceived'; export const listenerMiddleware = createListenerMiddleware(); @@ -75,6 +79,10 @@ addImageDeletedRejectedListener(); addImageMetadataReceivedFulfilledListener(); addImageMetadataReceivedRejectedListener(); +// Image URLs +addImageUrlsReceivedFulfilledListener(); +addImageUrlsReceivedRejectedListener(); + // Invoking stuff addUserInvokedCanvasListener(); addUserInvokedNodesListener(); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUrlsReceived.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUrlsReceived.ts new file mode 100644 index 0000000000..4ff2a02118 --- /dev/null +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUrlsReceived.ts @@ -0,0 +1,51 @@ +import { log } from 'app/logging/useLogger'; +import { startAppListening } from '..'; +import { imageUrlsReceived } from 'services/thunks/image'; +import { resultsAdapter } from 'features/gallery/store/resultsSlice'; +import { uploadsAdapter } from 'features/gallery/store/uploadsSlice'; + +const moduleLog = log.child({ namespace: 'image' }); + +export const addImageUrlsReceivedFulfilledListener = () => { + startAppListening({ + actionCreator: imageUrlsReceived.fulfilled, + effect: (action, { getState, dispatch }) => { + const image = action.payload; + moduleLog.debug({ data: { image } }, 'Image URLs received'); + + const { image_type, image_name, image_url, thumbnail_url } = image; + + if (image_type === 'results') { + resultsAdapter.updateOne(getState().results, { + id: image_name, + changes: { + image_url, + thumbnail_url, + }, + }); + } + + if (image_type === 'uploads') { + uploadsAdapter.updateOne(getState().uploads, { + id: image_name, + changes: { + image_url, + thumbnail_url, + }, + }); + } + }, + }); +}; + +export const addImageUrlsReceivedRejectedListener = () => { + startAppListening({ + actionCreator: imageUrlsReceived.rejected, + effect: (action, { getState, dispatch }) => { + moduleLog.debug( + { data: { image: action.meta.arg } }, + 'Problem getting image URLs' + ); + }, + }); +}; diff --git a/invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts b/invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts index 0a0ba01c40..18d0466033 100644 --- a/invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts +++ b/invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts @@ -4,11 +4,6 @@ import { receivedResultImagesPage, IMAGES_PER_PAGE, } from 'services/thunks/gallery'; -import { - imageDeleted, - imageMetadataReceived, - imageUrlsReceived, -} from 'services/thunks/image'; import { ImageDTO } from 'services/api'; import { dateComparator } from 'common/util/dateComparator'; @@ -68,24 +63,6 @@ const resultsSlice = createSlice({ state.nextPage = items.length < IMAGES_PER_PAGE ? page : page + 1; state.isLoading = false; }); - - /** - * Image URLs Received - FULFILLED - */ - builder.addCase(imageUrlsReceived.fulfilled, (state, action) => { - const { image_name, image_type, image_url, thumbnail_url } = - action.payload; - - if (image_type === 'results') { - resultsAdapter.updateOne(state, { - id: image_name, - changes: { - image_url: image_url, - thumbnail_url: thumbnail_url, - }, - }); - } - }); }, }); diff --git a/invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts b/invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts index 3e1abc9bb4..1a03ed3391 100644 --- a/invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts +++ b/invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts @@ -5,7 +5,6 @@ import { receivedUploadImagesPage, IMAGES_PER_PAGE, } from 'services/thunks/gallery'; -import { imageDeleted, imageUrlsReceived } from 'services/thunks/image'; import { ImageDTO } from 'services/api'; import { dateComparator } from 'common/util/dateComparator'; @@ -65,24 +64,6 @@ const uploadsSlice = createSlice({ state.nextPage = items.length < IMAGES_PER_PAGE ? page : page + 1; state.isLoading = false; }); - - /** - * Image URLs Received - FULFILLED - */ - builder.addCase(imageUrlsReceived.fulfilled, (state, action) => { - const { image_name, image_type, image_url, thumbnail_url } = - action.payload; - - if (image_type === 'uploads') { - uploadsAdapter.updateOne(state, { - id: image_name, - changes: { - image_url: image_url, - thumbnail_url: thumbnail_url, - }, - }); - } - }); }, }); diff --git a/invokeai/frontend/web/src/services/thunks/image.ts b/invokeai/frontend/web/src/services/thunks/image.ts index 4326b82811..f0c0456202 100644 --- a/invokeai/frontend/web/src/services/thunks/image.ts +++ b/invokeai/frontend/web/src/services/thunks/image.ts @@ -1,10 +1,7 @@ -import { log } from 'app/logging/useLogger'; import { createAppAsyncThunk } from 'app/store/storeUtils'; import { InvokeTabName } from 'features/ui/store/tabMap'; import { ImagesService } from 'services/api'; -const imagesLog = log.child({ namespace: 'image' }); - type imageUrlsReceivedArg = Parameters< (typeof ImagesService)['getImageUrls'] >[0]; @@ -16,7 +13,6 @@ export const imageUrlsReceived = createAppAsyncThunk( 'api/imageUrlsReceived', async (arg: imageUrlsReceivedArg) => { const response = await ImagesService.getImageUrls(arg); - imagesLog.info({ arg, response }, 'Received image urls'); return response; } ); @@ -32,7 +28,6 @@ export const imageMetadataReceived = createAppAsyncThunk( 'api/imageMetadataReceived', async (arg: imageMetadataReceivedArg) => { const response = await ImagesService.getImageMetadata(arg); - imagesLog.info({ arg, response }, 'Received image record'); return response; } ); @@ -52,7 +47,6 @@ export const imageUploaded = createAppAsyncThunk( // strip out `activeTabName` from arg - the route does not need it const { activeTabName, ...rest } = arg; const response = await ImagesService.uploadImage(rest); - return response; } ); @@ -79,9 +73,6 @@ export const imageUpdated = createAppAsyncThunk( 'api/imageUpdated', async (arg: ImageUpdatedArg) => { const response = await ImagesService.updateImage(arg); - - imagesLog.debug({ data: { arg, response } }, 'Image updated'); - return response; } );