Skip to content

Commit 5aba2c3

Browse files
psychedeliciouspsychedelicious
committed
feat(ui): fill up gallery on app start
taking the coward's way out on this and just fetching 100 images & 100 assets on app start... - add `appStarted` action, dispatched once on mount in App.tsx. listener fetches 100 images & 100 assets - fix bug with selectedBoardId & assets tab
1 parent e0c1371 commit 5aba2c3

File tree

7 files changed

+112
-82
lines changed

7 files changed

+112
-82
lines changed

‎invokeai/frontend/web/src/app/components/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Flex, Grid, Portal } from '@chakra-ui/react';
22
import { useLogger } from 'app/logging/useLogger';
3+
import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
34
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
45
import { PartialAppConfig } from 'app/types/invokeai';
56
import ImageUploader from 'common/components/ImageUploader';
@@ -46,6 +47,10 @@ const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
4647
dispatch(configChanged(config));
4748
}, [dispatch, config, log]);
4849

50+
useEffect(() => {
51+
dispatch(appStarted());
52+
}, [dispatch]);
53+
4954
return (
5055
<>
5156
<Grid w="100vw" h="100vh" position="relative" overflow="hidden">

‎invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts‎

Lines changed: 63 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,68 @@
1+
import type { TypedAddListener, TypedStartListening } from '@reduxjs/toolkit';
12
import {
2-
createListenerMiddleware,
3-
addListener,
4-
ListenerEffect,
53
AnyAction,
4+
ListenerEffect,
5+
addListener,
6+
createListenerMiddleware,
67
} from '@reduxjs/toolkit';
7-
import type { TypedStartListening, TypedAddListener } from '@reduxjs/toolkit';
88

9-
import type { RootState, AppDispatch } from '../../store';
10-
import { addInitialImageSelectedListener } from './listeners/initialImageSelected';
9+
import type { AppDispatch, RootState } from '../../store';
10+
import { addCommitStagingAreaImageListener } from './listeners/addCommitStagingAreaImageListener';
11+
import { addAppStartedListener } from './listeners/appStarted';
12+
import { addBoardIdSelectedListener } from './listeners/boardIdSelected';
13+
import { addRequestedBoardImageDeletionListener } from './listeners/boardImagesDeleted';
14+
import { addCanvasCopiedToClipboardListener } from './listeners/canvasCopiedToClipboard';
15+
import { addCanvasDownloadedAsImageListener } from './listeners/canvasDownloadedAsImage';
16+
import { addCanvasMergedListener } from './listeners/canvasMerged';
17+
import { addCanvasSavedToGalleryListener } from './listeners/canvasSavedToGallery';
18+
import { addControlNetAutoProcessListener } from './listeners/controlNetAutoProcess';
19+
import { addControlNetImageProcessedListener } from './listeners/controlNetImageProcessed';
1120
import {
12-
addImageUploadedFulfilledListener,
13-
addImageUploadedRejectedListener,
14-
} from './listeners/imageUploaded';
21+
addImageAddedToBoardFulfilledListener,
22+
addImageAddedToBoardRejectedListener,
23+
} from './listeners/imageAddedToBoard';
24+
import { addImageCategoriesChangedListener } from './listeners/imageCategoriesChanged';
1525
import {
1626
addImageDeletedFulfilledListener,
1727
addImageDeletedPendingListener,
1828
addImageDeletedRejectedListener,
1929
addRequestedImageDeletionListener,
2030
} from './listeners/imageDeleted';
21-
import { addUserInvokedCanvasListener } from './listeners/userInvokedCanvas';
22-
import { addUserInvokedNodesListener } from './listeners/userInvokedNodes';
23-
import { addUserInvokedTextToImageListener } from './listeners/userInvokedTextToImage';
24-
import { addUserInvokedImageToImageListener } from './listeners/userInvokedImageToImage';
25-
import { addCanvasSavedToGalleryListener } from './listeners/canvasSavedToGallery';
26-
import { addCanvasDownloadedAsImageListener } from './listeners/canvasDownloadedAsImage';
27-
import { addCanvasCopiedToClipboardListener } from './listeners/canvasCopiedToClipboard';
28-
import { addCanvasMergedListener } from './listeners/canvasMerged';
29-
import { addGeneratorProgressEventListener as addGeneratorProgressListener } from './listeners/socketio/socketGeneratorProgress';
30-
import { addGraphExecutionStateCompleteEventListener as addGraphExecutionStateCompleteListener } from './listeners/socketio/socketGraphExecutionStateComplete';
31-
import { addInvocationCompleteEventListener as addInvocationCompleteListener } from './listeners/socketio/socketInvocationComplete';
32-
import { addInvocationErrorEventListener as addInvocationErrorListener } from './listeners/socketio/socketInvocationError';
33-
import { addInvocationStartedEventListener as addInvocationStartedListener } from './listeners/socketio/socketInvocationStarted';
34-
import { addSocketConnectedEventListener as addSocketConnectedListener } from './listeners/socketio/socketConnected';
35-
import { addSocketDisconnectedEventListener as addSocketDisconnectedListener } from './listeners/socketio/socketDisconnected';
36-
import { addSocketSubscribedEventListener as addSocketSubscribedListener } from './listeners/socketio/socketSubscribed';
37-
import { addSocketUnsubscribedEventListener as addSocketUnsubscribedListener } from './listeners/socketio/socketUnsubscribed';
38-
import { addSessionReadyToInvokeListener } from './listeners/sessionReadyToInvoke';
31+
import { addImageDroppedListener } from './listeners/imageDropped';
3932
import {
4033
addImageMetadataReceivedFulfilledListener,
4134
addImageMetadataReceivedRejectedListener,
4235
} from './listeners/imageMetadataReceived';
36+
import {
37+
addImageRemovedFromBoardFulfilledListener,
38+
addImageRemovedFromBoardRejectedListener,
39+
} from './listeners/imageRemovedFromBoard';
40+
import { addImageToDeleteSelectedListener } from './listeners/imageToDeleteSelected';
41+
import {
42+
addImageUpdatedFulfilledListener,
43+
addImageUpdatedRejectedListener,
44+
} from './listeners/imageUpdated';
45+
import {
46+
addImageUploadedFulfilledListener,
47+
addImageUploadedRejectedListener,
48+
} from './listeners/imageUploaded';
4349
import {
4450
addImageUrlsReceivedFulfilledListener,
4551
addImageUrlsReceivedRejectedListener,
4652
} from './listeners/imageUrlsReceived';
53+
import { addInitialImageSelectedListener } from './listeners/initialImageSelected';
54+
import { addModelSelectedListener } from './listeners/modelSelected';
55+
import { addReceivedOpenAPISchemaListener } from './listeners/receivedOpenAPISchema';
56+
import {
57+
addReceivedPageOfImagesFulfilledListener,
58+
addReceivedPageOfImagesRejectedListener,
59+
} from './listeners/receivedPageOfImages';
60+
import { addSelectionAddedToBatchListener } from './listeners/selectionAddedToBatch';
61+
import {
62+
addSessionCanceledFulfilledListener,
63+
addSessionCanceledPendingListener,
64+
addSessionCanceledRejectedListener,
65+
} from './listeners/sessionCanceled';
4766
import {
4867
addSessionCreatedFulfilledListener,
4968
addSessionCreatedPendingListener,
@@ -54,39 +73,21 @@ import {
5473
addSessionInvokedPendingListener,
5574
addSessionInvokedRejectedListener,
5675
} from './listeners/sessionInvoked';
57-
import {
58-
addSessionCanceledFulfilledListener,
59-
addSessionCanceledPendingListener,
60-
addSessionCanceledRejectedListener,
61-
} from './listeners/sessionCanceled';
62-
import {
63-
addImageUpdatedFulfilledListener,
64-
addImageUpdatedRejectedListener,
65-
} from './listeners/imageUpdated';
66-
import {
67-
addReceivedPageOfImagesFulfilledListener,
68-
addReceivedPageOfImagesRejectedListener,
69-
} from './listeners/receivedPageOfImages';
76+
import { addSessionReadyToInvokeListener } from './listeners/sessionReadyToInvoke';
77+
import { addSocketConnectedEventListener as addSocketConnectedListener } from './listeners/socketio/socketConnected';
78+
import { addSocketDisconnectedEventListener as addSocketDisconnectedListener } from './listeners/socketio/socketDisconnected';
79+
import { addGeneratorProgressEventListener as addGeneratorProgressListener } from './listeners/socketio/socketGeneratorProgress';
80+
import { addGraphExecutionStateCompleteEventListener as addGraphExecutionStateCompleteListener } from './listeners/socketio/socketGraphExecutionStateComplete';
81+
import { addInvocationCompleteEventListener as addInvocationCompleteListener } from './listeners/socketio/socketInvocationComplete';
82+
import { addInvocationErrorEventListener as addInvocationErrorListener } from './listeners/socketio/socketInvocationError';
83+
import { addInvocationStartedEventListener as addInvocationStartedListener } from './listeners/socketio/socketInvocationStarted';
84+
import { addSocketSubscribedEventListener as addSocketSubscribedListener } from './listeners/socketio/socketSubscribed';
85+
import { addSocketUnsubscribedEventListener as addSocketUnsubscribedListener } from './listeners/socketio/socketUnsubscribed';
7086
import { addStagingAreaImageSavedListener } from './listeners/stagingAreaImageSaved';
71-
import { addCommitStagingAreaImageListener } from './listeners/addCommitStagingAreaImageListener';
72-
import { addImageCategoriesChangedListener } from './listeners/imageCategoriesChanged';
73-
import { addControlNetImageProcessedListener } from './listeners/controlNetImageProcessed';
74-
import { addControlNetAutoProcessListener } from './listeners/controlNetAutoProcess';
75-
import {
76-
addImageAddedToBoardFulfilledListener,
77-
addImageAddedToBoardRejectedListener,
78-
} from './listeners/imageAddedToBoard';
79-
import { addBoardIdSelectedListener } from './listeners/boardIdSelected';
80-
import {
81-
addImageRemovedFromBoardFulfilledListener,
82-
addImageRemovedFromBoardRejectedListener,
83-
} from './listeners/imageRemovedFromBoard';
84-
import { addReceivedOpenAPISchemaListener } from './listeners/receivedOpenAPISchema';
85-
import { addRequestedBoardImageDeletionListener } from './listeners/boardImagesDeleted';
86-
import { addSelectionAddedToBatchListener } from './listeners/selectionAddedToBatch';
87-
import { addImageDroppedListener } from './listeners/imageDropped';
88-
import { addImageToDeleteSelectedListener } from './listeners/imageToDeleteSelected';
89-
import { addModelSelectedListener } from './listeners/modelSelected';
87+
import { addUserInvokedCanvasListener } from './listeners/userInvokedCanvas';
88+
import { addUserInvokedImageToImageListener } from './listeners/userInvokedImageToImage';
89+
import { addUserInvokedNodesListener } from './listeners/userInvokedNodes';
90+
import { addUserInvokedTextToImageListener } from './listeners/userInvokedTextToImage';
9091

9192
export const listenerMiddleware = createListenerMiddleware();
9293

@@ -224,3 +225,6 @@ addImageDroppedListener();
224225

225226
// Models
226227
addModelSelectedListener();
228+
229+
// app startup
230+
addAppStartedListener();

‎invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/appStarted.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { createAction } from '@reduxjs/toolkit';
2+
import { receivedPageOfImages } from 'services/api/thunks/image';
3+
import { startAppListening } from '..';
4+
5+
export const appStarted = createAction('app/appStarted');
6+
7+
export const addAppStartedListener = () => {
8+
startAppListening({
9+
actionCreator: appStarted,
10+
effect: (action, { getState, dispatch }) => {
11+
// fill up the gallery tab with images
12+
dispatch(
13+
receivedPageOfImages({
14+
categories: ['general'],
15+
is_intermediate: false,
16+
limit: 100,
17+
})
18+
);
19+
20+
// fill up the assets tab with images
21+
dispatch(
22+
receivedPageOfImages({
23+
categories: ['control', 'mask', 'user', 'other'],
24+
is_intermediate: false,
25+
limit: 100,
26+
})
27+
);
28+
},
29+
});
30+
};

‎invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageCategoriesChanged.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { log } from 'app/logging/useLogger';
2-
import { startAppListening } from '..';
3-
import { receivedPageOfImages } from 'services/api/thunks/image';
42
import {
53
imageCategoriesChanged,
64
selectFilteredImages,
75
} from 'features/gallery/store/gallerySlice';
6+
import { receivedPageOfImages } from 'services/api/thunks/image';
7+
import { startAppListening } from '..';
88

99
const moduleLog = log.child({ namespace: 'gallery' });
1010

@@ -19,7 +19,7 @@ export const addImageCategoriesChangedListener = () => {
1919
dispatch(
2020
receivedPageOfImages({
2121
categories: action.payload,
22-
board_id: state.boards.selectedBoardId,
22+
board_id: state.gallery.selectedBoardId,
2323
is_intermediate: false,
2424
})
2525
);

‎invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ import {
1414
} from '@chakra-ui/react';
1515
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
1616
import IAIButton from 'common/components/IAIButton';
17-
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
1817
import IAIIconButton from 'common/components/IAIIconButton';
1918
import IAIPopover from 'common/components/IAIPopover';
19+
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
2020
import IAISlider from 'common/components/IAISlider';
2121
import {
2222
setGalleryImageMinimumWidth,
@@ -40,25 +40,25 @@ import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
4040
import { FaImage, FaServer, FaWrench } from 'react-icons/fa';
4141
import GalleryImage from './GalleryImage';
4242

43-
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
43+
import { ChevronUpIcon } from '@chakra-ui/icons';
4444
import { createSelector } from '@reduxjs/toolkit';
4545
import { RootState, stateSelector } from 'app/store/store';
46-
import { VirtuosoGrid } from 'react-virtuoso';
4746
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
47+
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
48+
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
4849
import {
4950
ASSETS_CATEGORIES,
5051
IMAGE_CATEGORIES,
5152
imageCategoriesChanged,
52-
shouldAutoSwitchChanged,
5353
selectFilteredImages,
54+
shouldAutoSwitchChanged,
5455
} from 'features/gallery/store/gallerySlice';
55-
import { receivedPageOfImages } from 'services/api/thunks/image';
56-
import BoardsList from './Boards/BoardsList';
57-
import { ChevronUpIcon } from '@chakra-ui/icons';
56+
import { VirtuosoGrid } from 'react-virtuoso';
5857
import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
59-
import { mode } from 'theme/util/mode';
58+
import { receivedPageOfImages } from 'services/api/thunks/image';
6059
import { ImageDTO } from 'services/api/types';
61-
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
60+
import { mode } from 'theme/util/mode';
61+
import BoardsList from './Boards/BoardsList';
6262

6363
const LOADING_IMAGE_ARRAY = Array(20).fill('loading');
6464

@@ -182,16 +182,6 @@ const ImageGalleryContent = () => {
182182
return () => osInstance()?.destroy();
183183
}, [scroller, initialize, osInstance]);
184184

185-
useEffect(() => {
186-
dispatch(
187-
receivedPageOfImages({
188-
categories,
189-
is_intermediate: false,
190-
})
191-
);
192-
// eslint-disable-next-line react-hooks/exhaustive-deps
193-
}, []);
194-
195185
const handleClickImagesCategory = useCallback(() => {
196186
dispatch(imageCategoriesChanged(IMAGE_CATEGORIES));
197187
dispatch(setGalleryView('images'));

‎invokeai/frontend/web/src/features/gallery/store/galleryPersistDenylist.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,7 @@ export const galleryPersistDenylist: (keyof typeof initialGalleryState)[] = [
1111
'limit',
1212
'offset',
1313
'selectedBoardId',
14+
'categories',
15+
'galleryView',
1416
'total',
1517
];

‎invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,6 @@ export const gallerySlice = createSlice({
169169
}
170170

171171
state.offset = offset;
172-
state.limit = limit;
173172
state.total = total;
174173
});
175174
builder.addCase(imageUrlsReceived.fulfilled, (state, action) => {

0 commit comments

Comments
 (0)