From 272803ba7c19396b3e1da5d9deb86a783d6342a1 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sun, 2 Apr 2023 21:28:58 +1000 Subject: [PATCH] feat(ui): load images on socket connect Rudimentary --- .../web/src/app/nodesSocketio/listeners.ts | 3 +- .../frontend/web/src/services/thunks/extra.ts | 57 +++++++++++++++++++ .../web/src/services/thunks/session.ts | 15 +++++ 3 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 invokeai/frontend/web/src/services/thunks/extra.ts diff --git a/invokeai/frontend/web/src/app/nodesSocketio/listeners.ts b/invokeai/frontend/web/src/app/nodesSocketio/listeners.ts index 3cc56a82c3..38828c145c 100644 --- a/invokeai/frontend/web/src/app/nodesSocketio/listeners.ts +++ b/invokeai/frontend/web/src/app/nodesSocketio/listeners.ts @@ -33,7 +33,7 @@ import { STATUS, } from 'services/apiSlice'; import { emitUnsubscribe } from './actions'; -import { listSessions } from 'services/thunks/session'; +import { getGalleryImages } from 'services/thunks/extra'; /** * Returns an object containing listener callbacks @@ -51,6 +51,7 @@ const makeSocketIOListeners = ( try { dispatch(setIsConnected(true)); dispatch(setCurrentStatus(i18n.t('common.statusConnected'))); + dispatch(getGalleryImages({ count: 20 })); } catch (e) { console.error(e); } diff --git a/invokeai/frontend/web/src/services/thunks/extra.ts b/invokeai/frontend/web/src/services/thunks/extra.ts new file mode 100644 index 0000000000..7de1384ec2 --- /dev/null +++ b/invokeai/frontend/web/src/services/thunks/extra.ts @@ -0,0 +1,57 @@ +import { createAppAsyncThunk } from 'app/storeUtils'; +import { addImage } from 'features/gallery/store/gallerySlice'; +import { forEach } from 'lodash'; +import { SessionsService } from 'services/api'; +import { isImageOutput } from 'services/types/guards'; +import { v4 as uuidv4 } from 'uuid'; + +type GetGalleryImagesArg = { + count: number; +}; + +/** + * Get the last 20 sessions' worth of images. + * + * This should be at most 20 images so long as we continue to make a new session for every + * generation. + * + * If a session was created but no image generated, this will be < 20 images. + * + * When we allow more images per sesssion, this is kinda no longer a viable way to grab results, + * because a session could have many, many images. In that situation, barring a change to the api, + * we have to keep track of images we've grabbed and the session they came from, so that when we + * want to load more, we can "resume" fetching images from that session. + */ +export const getGalleryImages = createAppAsyncThunk( + 'api/getGalleryImages', + async (arg: GetGalleryImagesArg, { dispatch }) => { + const response = await SessionsService.listSessions({ + page: 0, + perPage: 20, + }); + + response.items.forEach((session) => { + forEach(session.results, (result) => { + if (isImageOutput(result)) { + const url = `api/v1/images/${result.image.image_type}/${result.image.image_name}`; + + dispatch( + addImage({ + category: 'result', + image: { + uuid: uuidv4(), + url, + thumbnail: '', + width: 512, + height: 512, + category: 'result', + name: result.image.image_name, + mtime: new Date().getTime(), + }, + }) + ); + } + }); + }); + } +); diff --git a/invokeai/frontend/web/src/services/thunks/session.ts b/invokeai/frontend/web/src/services/thunks/session.ts index f499cf9836..51385b95fb 100644 --- a/invokeai/frontend/web/src/services/thunks/session.ts +++ b/invokeai/frontend/web/src/services/thunks/session.ts @@ -93,3 +93,18 @@ export const cancelProcessing = createAppAsyncThunk( return response; } ); + +/** + * listSessions thunk + */ + +type ListSessionsArg = Parameters<(typeof SessionsService)['listSessions']>[0]; + +export const listSessions = createAppAsyncThunk( + 'api/listSessions', + async (arg: ListSessionsArg, _thunkApi) => { + const response = await SessionsService.listSessions(arg); + + return response; + } +);