Merges development

frontend/src/app/socketio/actions.ts

@@ -1,4 +1,5 @@
 import { createAction } from '@reduxjs/toolkit';
+import { InvokeTabName } from '../../features/tabs/InvokeTabs';
 import * as InvokeAI from '../invokeai';
 
 /**
@@ -8,13 +9,13 @@ import * as InvokeAI from '../invokeai';
  * by the middleware.
  */
 
-export const generateImage = createAction<undefined>('socketio/generateImage');
+export const generateImage = createAction<InvokeTabName>(
+  'socketio/generateImage'
+);
 export const runESRGAN = createAction<InvokeAI.Image>('socketio/runESRGAN');
 export const runFacetool = createAction<InvokeAI.Image>('socketio/runFacetool');
 export const deleteImage = createAction<InvokeAI.Image>('socketio/deleteImage');
-export const requestImages = createAction<undefined>(
-  'socketio/requestImages'
-);
+export const requestImages = createAction<undefined>('socketio/requestImages');
 export const requestNewImages = createAction<undefined>(
   'socketio/requestNewImages'
 );

frontend/src/app/socketio/emitters.ts

@@ -1,13 +1,19 @@
 import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
 import dateFormat from 'dateformat';
 import { Socket } from 'socket.io-client';
-import { frontendToBackendParameters } from '../../common/util/parameterTranslation';
+import {
+  frontendToBackendParameters,
+  FrontendToBackendParametersConfig,
+} from '../../common/util/parameterTranslation';
 import {
   addLogEntry,
+  errorOccurred,
   setIsProcessing,
 } from '../../features/system/systemSlice';
-import { tabMap, tab_dict } from '../../features/tabs/InvokeTabs';
+import { inpaintingImageElementRef } from '../../features/tabs/Inpainting/InpaintingCanvas';
+import { InvokeTabName } from '../../features/tabs/InvokeTabs';
 import * as InvokeAI from '../invokeai';
+import { RootState } from '../store';
 
 /**
  * Returns an object containing all functions which use `socketio.emit()`.
@@ -21,17 +27,56 @@ const makeSocketIOEmitters = (
   const { dispatch, getState } = store;
 
   return {
-    emitGenerateImage: () => {
+    emitGenerateImage: (generationMode: InvokeTabName) => {
       dispatch(setIsProcessing(true));
 
-      const options = { ...getState().options };
+      const state: RootState = getState();
 
-      if (tabMap[options.activeTab] !== 'img2img') {
-        options.shouldUseInitImage = false;
+      const {
+        options: optionsState,
+        system: systemState,
+        inpainting: inpaintingState,
+        gallery: galleryState,
+      } = state;
+
+      const frontendToBackendParametersConfig: FrontendToBackendParametersConfig =
+        {
+          generationMode,
+          optionsState,
+          inpaintingState,
+          systemState,
+        };
+
+      if (generationMode === 'inpainting') {
+        if (
+          !inpaintingImageElementRef.current ||
+          !inpaintingState.imageToInpaint?.url
+        ) {
+          dispatch(
+            addLogEntry({
+              timestamp: dateFormat(new Date(), 'isoDateTime'),
+              message: 'Inpainting image not loaded, cannot generate image.',
+              level: 'error',
+            })
+          );
+          dispatch(errorOccurred());
+          return;
+        }
+
+        frontendToBackendParametersConfig.imageToProcessUrl =
+          inpaintingState.imageToInpaint.url;
+
+        frontendToBackendParametersConfig.maskImageElement =
+          inpaintingImageElementRef.current;
+      } else if (!['txt2img', 'img2img'].includes(generationMode)) {
+        if (!galleryState.currentImage?.url) return;
+
+        frontendToBackendParametersConfig.imageToProcessUrl =
+          galleryState.currentImage.url;
       }
 
       const { generationParameters, esrganParameters, facetoolParameters } =
-        frontendToBackendParameters(options, getState().system);
+        frontendToBackendParameters(frontendToBackendParametersConfig);
 
       socketio.emit(
         'generateImage',
@@ -40,6 +85,14 @@ const makeSocketIOEmitters = (
         facetoolParameters
       );
 
+      // we need to truncate the init_mask base64 else it takes up the whole log
+      // TODO: handle maintaining masks for reproducibility in future
+      if (generationParameters.init_mask) {
+        generationParameters.init_mask = generationParameters.init_mask
+          .substr(0, 20)
+          .concat('...');
+      }
+
       dispatch(
         addLogEntry({
           timestamp: dateFormat(new Date(), 'isoDateTime'),

frontend/src/app/socketio/listeners.ts

@@ -79,21 +79,16 @@ const makeSocketIOListeners = (
      */
     onGenerationResult: (data: InvokeAI.ImageResultResponse) => {
       try {
-        const { url, mtime, metadata } = data;
-        const newUuid = uuidv4();
-
         dispatch(
           addImage({
-            uuid: newUuid,
-            url,
-            mtime,
-            metadata: metadata,
+            uuid: uuidv4(),
+            ...data,
           })
         );
         dispatch(
           addLogEntry({
             timestamp: dateFormat(new Date(), 'isoDateTime'),
-            message: `Image generated: ${url}`,
+            message: `Image generated: ${data.url}`,
           })
         );
       } catch (e) {
@@ -105,20 +100,16 @@ const makeSocketIOListeners = (
      */
     onIntermediateResult: (data: InvokeAI.ImageResultResponse) => {
       try {
-        const uuid = uuidv4();
-        const { url, metadata, mtime } = data;
         dispatch(
           setIntermediateImage({
-            uuid,
-            url,
-            mtime,
-            metadata,
+            uuid: uuidv4(),
+            ...data,
           })
         );
         dispatch(
           addLogEntry({
             timestamp: dateFormat(new Date(), 'isoDateTime'),
-            message: `Intermediate image generated: ${url}`,
+            message: `Intermediate image generated: ${data.url}`,
           })
         );
       } catch (e) {
@@ -130,21 +121,17 @@ const makeSocketIOListeners = (
      */
     onPostprocessingResult: (data: InvokeAI.ImageResultResponse) => {
       try {
-        const { url, metadata, mtime } = data;
-
         dispatch(
           addImage({
             uuid: uuidv4(),
-            url,
-            mtime,
-            metadata,
+            ...data,
           })
         );
 
         dispatch(
           addLogEntry({
             timestamp: dateFormat(new Date(), 'isoDateTime'),
-            message: `Postprocessed: ${url}`,
+            message: `Postprocessed: ${data.url}`,
           })
         );
       } catch (e) {
@@ -200,12 +187,14 @@ const makeSocketIOListeners = (
 
       // Generate a UUID for each image
       const preparedImages = images.map((image): InvokeAI.Image => {
-        const { url, metadata, mtime } = image;
+        const { url, metadata, mtime, width, height } = image;
         return {
           uuid: uuidv4(),
           url,
           mtime,
           metadata,
+          width,
+          height,
         };
       });
 

frontend/src/app/socketio/middleware.ts

@@ -121,7 +121,7 @@ export const socketioMiddleware = () => {
      */
     switch (action.type) {
       case 'socketio/generateImage': {
-        emitGenerateImage();
+        emitGenerateImage(action.payload);
         break;
       }