From ad96c4115673fcb88de17a779ac73b18887fc558 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Sat, 12 Aug 2023 22:04:43 +1200 Subject: [PATCH] feat: Add Canvas Output node to all Canvas Graphs --- .../socketio/socketInvocationComplete.ts | 4 ++-- .../buildCanvasImageToImageGraph.ts | 16 ++++++++++++++++ .../graphBuilders/buildCanvasInpaintGraph.ts | 10 +++++----- .../graphBuilders/buildCanvasOutpaintGraph.ts | 12 ++++++------ .../buildCanvasSDXLImageToImageGraph.ts | 16 ++++++++++++++++ .../graphBuilders/buildCanvasSDXLInpaintGraph.ts | 10 +++++----- .../buildCanvasSDXLOutpaintGraph.ts | 12 ++++++------ .../buildCanvasSDXLTextToImageGraph.ts | 16 ++++++++++++++++ .../graphBuilders/buildCanvasTextToImageGraph.ts | 16 ++++++++++++++++ .../nodes/util/graphBuilders/constants.ts | 1 + 10 files changed, 89 insertions(+), 24 deletions(-) diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts index a5e22de6e4..5b3b9424b6 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts @@ -7,7 +7,7 @@ import { imageSelected, } from 'features/gallery/store/gallerySlice'; import { IMAGE_CATEGORIES } from 'features/gallery/store/types'; -import { INPAINT_FINAL_IMAGE } from 'features/nodes/util/graphBuilders/constants'; +import { CANVAS_OUTPUT } from 'features/nodes/util/graphBuilders/constants'; import { progressImageSet } from 'features/system/store/systemSlice'; import { imagesApi } from 'services/api/endpoints/images'; import { isImageOutput } from 'services/api/guards'; @@ -55,7 +55,7 @@ export const addInvocationCompleteEventListener = () => { if ( graph_execution_state_id === canvas.layerState.stagingArea.sessionId && - data.source_node_id === INPAINT_FINAL_IMAGE + [CANVAS_OUTPUT].includes(data.source_node_id) ) { dispatch(addImageToStagingArea(imageDTO)); } diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts index a4cd3b2add..e8a5b46639 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts @@ -14,6 +14,7 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph'; import { addVAEToGraph } from './addVAEToGraph'; import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { + CANVAS_OUTPUT, CLIP_SKIP, DENOISE_LATENTS, IMAGE_TO_IMAGE_GRAPH, @@ -129,6 +130,10 @@ export const buildCanvasImageToImageGraph = ( id: LATENTS_TO_IMAGE, is_intermediate: !shouldAutoSave, }, + [CANVAS_OUTPUT]: { + type: 'load_image', + id: CANVAS_OUTPUT, + }, }, edges: [ // Connect Model Loader to CLIP Skip and UNet @@ -225,6 +230,17 @@ export const buildCanvasImageToImageGraph = ( field: 'latents', }, }, + // Canvas Output + { + source: { + node_id: LATENTS_TO_IMAGE, + field: 'image', + }, + destination: { + node_id: CANVAS_OUTPUT, + field: 'image', + }, + }, ], }; diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts index 7e6ae2f474..6ecb73b992 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts @@ -12,10 +12,10 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph'; import { addVAEToGraph } from './addVAEToGraph'; import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { + CANVAS_OUTPUT, CLIP_SKIP, COLOR_CORRECT, INPAINT, - INPAINT_FINAL_IMAGE, INPAINT_GRAPH, INPAINT_IMAGE, ITERATE, @@ -149,9 +149,9 @@ export const buildCanvasInpaintGraph = ( is_intermediate: true, reference: canvasInitImage, }, - [INPAINT_FINAL_IMAGE]: { + [CANVAS_OUTPUT]: { type: 'img_paste', - id: INPAINT_FINAL_IMAGE, + id: CANVAS_OUTPUT, is_intermediate: true, base_image: canvasInitImage, }, @@ -324,7 +324,7 @@ export const buildCanvasInpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'image', }, }, @@ -334,7 +334,7 @@ export const buildCanvasInpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'mask', }, }, diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts index 2513144871..2ed0cc952a 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts @@ -14,10 +14,10 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph'; import { addVAEToGraph } from './addVAEToGraph'; import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { + CANVAS_OUTPUT, CLIP_SKIP, COLOR_CORRECT, INPAINT, - INPAINT_FINAL_IMAGE, INPAINT_GRAPH, INPAINT_IMAGE, INPAINT_INFILL, @@ -183,9 +183,9 @@ export const buildCanvasOutpaintGraph = ( id: COLOR_CORRECT, is_intermediate: true, }, - [INPAINT_FINAL_IMAGE]: { + [CANVAS_OUTPUT]: { type: 'img_paste', - id: INPAINT_FINAL_IMAGE, + id: CANVAS_OUTPUT, is_intermediate: true, }, [RANGE_OF_SIZE]: { @@ -399,7 +399,7 @@ export const buildCanvasOutpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'base_image', }, }, @@ -409,7 +409,7 @@ export const buildCanvasOutpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'image', }, }, @@ -419,7 +419,7 @@ export const buildCanvasOutpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'mask', }, }, diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts index 80f3d671c9..5b198e0bc3 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts @@ -15,6 +15,7 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph'; import { addVAEToGraph } from './addVAEToGraph'; import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { + CANVAS_OUTPUT, DENOISE_LATENTS, IMAGE_TO_IMAGE_GRAPH, IMAGE_TO_LATENTS, @@ -136,6 +137,10 @@ export const buildCanvasSDXLImageToImageGraph = ( id: LATENTS_TO_IMAGE, is_intermediate: !shouldAutoSave, }, + [CANVAS_OUTPUT]: { + type: 'load_image', + id: CANVAS_OUTPUT, + }, }, edges: [ // Connect Model Loader To UNet & CLIP @@ -241,6 +246,17 @@ export const buildCanvasSDXLImageToImageGraph = ( field: 'latents', }, }, + // Canvas Output + { + source: { + node_id: LATENTS_TO_IMAGE, + field: 'image', + }, + destination: { + node_id: CANVAS_OUTPUT, + field: 'image', + }, + }, ], }; diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts index 066f049e57..a8e190bcd1 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts @@ -13,9 +13,9 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph'; import { addVAEToGraph } from './addVAEToGraph'; import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { + CANVAS_OUTPUT, COLOR_CORRECT, INPAINT, - INPAINT_FINAL_IMAGE, INPAINT_GRAPH, INPAINT_IMAGE, ITERATE, @@ -153,9 +153,9 @@ export const buildCanvasSDXLInpaintGraph = ( is_intermediate: true, reference: canvasInitImage, }, - [INPAINT_FINAL_IMAGE]: { + [CANVAS_OUTPUT]: { type: 'img_paste', - id: INPAINT_FINAL_IMAGE, + id: CANVAS_OUTPUT, is_intermediate: true, base_image: canvasInitImage, }, @@ -337,7 +337,7 @@ export const buildCanvasSDXLInpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'image', }, }, @@ -347,7 +347,7 @@ export const buildCanvasSDXLInpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'mask', }, }, diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts index 4d0a6feb55..da7eb6b6d3 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts @@ -15,9 +15,9 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph'; import { addVAEToGraph } from './addVAEToGraph'; import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { + CANVAS_OUTPUT, COLOR_CORRECT, INPAINT, - INPAINT_FINAL_IMAGE, INPAINT_GRAPH, INPAINT_IMAGE, INPAINT_INFILL, @@ -187,9 +187,9 @@ export const buildCanvasSDXLOutpaintGraph = ( id: COLOR_CORRECT, is_intermediate: true, }, - [INPAINT_FINAL_IMAGE]: { + [CANVAS_OUTPUT]: { type: 'img_paste', - id: INPAINT_FINAL_IMAGE, + id: CANVAS_OUTPUT, is_intermediate: true, }, [RANGE_OF_SIZE]: { @@ -412,7 +412,7 @@ export const buildCanvasSDXLOutpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'base_image', }, }, @@ -422,7 +422,7 @@ export const buildCanvasSDXLOutpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'image', }, }, @@ -432,7 +432,7 @@ export const buildCanvasSDXLOutpaintGraph = ( field: 'image', }, destination: { - node_id: INPAINT_FINAL_IMAGE, + node_id: CANVAS_OUTPUT, field: 'mask', }, }, diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts index 70375c1423..391cccd7a9 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts @@ -14,6 +14,7 @@ import { addSDXLRefinerToGraph } from './addSDXLRefinerToGraph'; import { addVAEToGraph } from './addVAEToGraph'; import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { + CANVAS_OUTPUT, DENOISE_LATENTS, LATENTS_TO_IMAGE, METADATA_ACCUMULATOR, @@ -148,6 +149,10 @@ export const buildCanvasSDXLTextToImageGraph = ( id: LATENTS_TO_IMAGE, is_intermediate: !shouldAutoSave, }, + [CANVAS_OUTPUT]: { + type: 'load_image', + id: CANVAS_OUTPUT, + }, }, edges: [ // Connect Model Loader to UNet and CLIP @@ -243,6 +248,17 @@ export const buildCanvasSDXLTextToImageGraph = ( field: 'latents', }, }, + // Canvas Output + { + source: { + node_id: LATENTS_TO_IMAGE, + field: 'image', + }, + destination: { + node_id: CANVAS_OUTPUT, + field: 'image', + }, + }, ], }; diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts index 519be4e498..6301ad6c9f 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts @@ -13,6 +13,7 @@ import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph'; import { addVAEToGraph } from './addVAEToGraph'; import { addWatermarkerToGraph } from './addWatermarkerToGraph'; import { + CANVAS_OUTPUT, CLIP_SKIP, DENOISE_LATENTS, LATENTS_TO_IMAGE, @@ -141,6 +142,10 @@ export const buildCanvasTextToImageGraph = ( id: LATENTS_TO_IMAGE, is_intermediate: !shouldAutoSave, }, + [CANVAS_OUTPUT]: { + type: 'load_image', + id: CANVAS_OUTPUT, + }, }, edges: [ // Connect Model Loader to UNet & CLIP Skip @@ -227,6 +232,17 @@ export const buildCanvasTextToImageGraph = ( field: 'latents', }, }, + // Canvas Output + { + source: { + node_id: LATENTS_TO_IMAGE, + field: 'image', + }, + destination: { + node_id: CANVAS_OUTPUT, + field: 'image', + }, + }, ], }; diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/constants.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/constants.ts index 076c92eb76..24bf1b404d 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/constants.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/constants.ts @@ -17,6 +17,7 @@ export const CLIP_SKIP = 'clip_skip'; export const IMAGE_TO_LATENTS = 'image_to_latents'; export const LATENTS_TO_LATENTS = 'latents_to_latents'; export const RESIZE = 'resize_image'; +export const CANVAS_OUTPUT = 'canvas_output'; export const INPAINT = 'inpaint'; export const INPAINT_SEAM_FIX = 'inpaint_seam_fix'; export const INPAINT_IMAGE = 'inpaint_image';