Merges development

frontend/src/app/invokeai.d.ts

@@ -111,6 +111,8 @@ export declare type Image = {
   url: string;
   mtime: number;
   metadata: Metadata;
+  width: number;
+  height: number;
 };
 
 // GalleryImages is an array of Image.
@@ -154,6 +156,8 @@ export declare type ImageResultResponse = {
   url: string;
   mtime: number;
   metadata: Metadata;
+  width: number;
+  height: number;
 };
 
 export declare type ErrorResponse = {

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

frontend/src/app/store.ts

@@ -7,6 +7,7 @@ import storage from 'redux-persist/lib/storage'; // defaults to localStorage for
 
 import optionsReducer from '../features/options/optionsSlice';
 import galleryReducer from '../features/gallery/gallerySlice';
+import inpaintingReducer from '../features/tabs/Inpainting/inpaintingSlice';
 
 import systemReducer from '../features/system/systemSlice';
 import { socketioMiddleware } from './socketio/middleware';
@@ -32,7 +33,7 @@ import { socketioMiddleware } from './socketio/middleware';
 const rootPersistConfig = {
   key: 'root',
   storage,
-  blacklist: ['gallery', 'system'],
+  blacklist: ['gallery', 'system', 'inpainting'],
 };
 
 const systemPersistConfig = {
@@ -53,10 +54,28 @@ const systemPersistConfig = {
   ],
 };
 
+const galleryPersistConfig = {
+  key: 'gallery',
+  storage,
+  whitelist: [
+    'shouldPinGallery',
+    'shouldShowGallery',
+    'galleryScrollPosition',
+    'galleryImageMinimumWidth',
+  ],
+};
+
+const inpaintingPersistConfig = {
+  key: 'inpainting',
+  storage,
+  blacklist: ['pastLines', 'futuresLines', 'cursorPosition'],
+};
+
 const reducers = combineReducers({
   options: optionsReducer,
-  gallery: galleryReducer,
+  gallery: persistReducer(galleryPersistConfig, galleryReducer),
   system: persistReducer(systemPersistConfig, systemReducer),
+  inpainting: persistReducer(inpaintingPersistConfig, inpaintingReducer),
 });
 
 const persistedReducer = persistReducer(rootPersistConfig, reducers);