Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): improve image urls handling

Browse Source
This commit is contained in:
psychedelicious 2023-05-26 14:50:47 +10:00
parent b3f71b3078
commit 1d4d705795
5 changed files with 59 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
View File

@ -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();

51
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUrlsReceived.ts Normal file
View File

@ -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'
);
},
});
};

23
invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts
View File

@ -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,
},
});
}
});
},
});

19
invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts
View File

@ -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,
},
});
}
});
},
});

9
invokeai/frontend/web/src/services/thunks/image.ts
View File

@ -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;
}
);