Merge branch 'main' into feat/compel_node

invokeai/frontend/CLI/CLI.py

@@ -16,6 +16,7 @@ if sys.platform == "darwin":
 import pyparsing  # type: ignore
 
 import invokeai.version as invokeai
+import invokeai.backend.util.logging as logger
 
 from ...backend import Generate, ModelManager
 from ...backend.args import Args, dream_cmd_from_png, metadata_dumps, metadata_from_png
@@ -69,7 +70,7 @@ def main():
     # run any post-install patches needed
     run_patches()
 
-    print(f">> Internet connectivity is {Globals.internet_available}")
+    logger.info(f"Internet connectivity is {Globals.internet_available}")
 
     if not args.conf:
         config_file = os.path.join(Globals.root, "configs", "models.yaml")
@@ -78,8 +79,8 @@ def main():
                 opt, FileNotFoundError(f"The file {config_file} could not be found.")
             )
 
-    print(f">> {invokeai.__app_name__}, version {invokeai.__version__}")
-    print(f'>> InvokeAI runtime directory is "{Globals.root}"')
+    logger.info(f"{invokeai.__app_name__}, version {invokeai.__version__}")
+    logger.info(f'InvokeAI runtime directory is "{Globals.root}"')
 
     # loading here to avoid long delays on startup
     # these two lines prevent a horrible warning message from appearing
@@ -121,7 +122,7 @@ def main():
             else:
                 raise FileNotFoundError(f"{opt.infile} not found.")
         except (FileNotFoundError, IOError) as e:
-            print(f"{e}. Aborting.")
+            logger.critical('Aborted',exc_info=True)
             sys.exit(-1)
 
     # creating a Generate object:
@@ -142,12 +143,12 @@ def main():
         )
     except (FileNotFoundError, TypeError, AssertionError) as e:
         report_model_error(opt, e)
-    except (IOError, KeyError) as e:
-        print(f"{e}. Aborting.")
+    except (IOError, KeyError):
+        logger.critical("Aborted",exc_info=True)
         sys.exit(-1)
 
     if opt.seamless:
-        print(">> changed to seamless tiling mode")
+        logger.info("Changed to seamless tiling mode")
 
     # preload the model
     try:
@@ -180,9 +181,7 @@ def main():
             f'\nGoodbye!\nYou can start InvokeAI again by running the "invoke.bat" (or "invoke.sh") script from {Globals.root}'
         )
     except Exception:
-        print(">> An error occurred:")
-        traceback.print_exc()
-
+        logger.error("An error occurred",exc_info=True)
 
 # TODO: main_loop() has gotten busy. Needs to be refactored.
 def main_loop(gen, opt):
@@ -248,7 +247,7 @@ def main_loop(gen, opt):
                 if not opt.prompt:
                     oldargs = metadata_from_png(opt.init_img)
                     opt.prompt = oldargs.prompt
-                    print(f'>> Retrieved old prompt "{opt.prompt}" from {opt.init_img}')
+                    logger.info(f'Retrieved old prompt "{opt.prompt}" from {opt.init_img}')
             except (OSError, AttributeError, KeyError):
                 pass
 
@@ -265,9 +264,9 @@ def main_loop(gen, opt):
         if opt.init_img is not None and re.match("^-\\d+$", opt.init_img):
             try:
                 opt.init_img = last_results[int(opt.init_img)][0]
-                print(f">> Reusing previous image {opt.init_img}")
+                logger.info(f"Reusing previous image {opt.init_img}")
             except IndexError:
-                print(f">> No previous initial image at position {opt.init_img} found")
+                logger.info(f"No previous initial image at position {opt.init_img} found")
                 opt.init_img = None
                 continue
 
@@ -288,9 +287,9 @@ def main_loop(gen, opt):
         if opt.seed is not None and opt.seed < 0 and operation != "postprocess":
             try:
                 opt.seed = last_results[opt.seed][1]
-                print(f">> Reusing previous seed {opt.seed}")
+                logger.info(f"Reusing previous seed {opt.seed}")
             except IndexError:
-                print(f">> No previous seed at position {opt.seed} found")
+                logger.info(f"No previous seed at position {opt.seed} found")
                 opt.seed = None
                 continue
 
@@ -309,7 +308,7 @@ def main_loop(gen, opt):
             subdir = subdir[: (path_max - 39 - len(os.path.abspath(opt.outdir)))]
             current_outdir = os.path.join(opt.outdir, subdir)
 
-            print('Writing files to directory: "' + current_outdir + '"')
+            logger.info('Writing files to directory: "' + current_outdir + '"')
 
             # make sure the output directory exists
             if not os.path.exists(current_outdir):
@@ -438,15 +437,14 @@ def main_loop(gen, opt):
                         catch_interrupts=catch_ctrl_c,
                         **vars(opt),
                     )
-                except (PromptParser.ParsingException, pyparsing.ParseException) as e:
-                    print("** An error occurred while processing your prompt **")
-                    print(f"** {str(e)} **")
+                except (PromptParser.ParsingException, pyparsing.ParseException):
+                    logger.error("An error occurred while processing your prompt",exc_info=True)
             elif operation == "postprocess":
-                print(f">> fixing {opt.prompt}")
+                logger.info(f"fixing {opt.prompt}")
                 opt.last_operation = do_postprocess(gen, opt, image_writer)
 
             elif operation == "mask":
-                print(f">> generating masks from {opt.prompt}")
+                logger.info(f"generating masks from {opt.prompt}")
                 do_textmask(gen, opt, image_writer)
 
             if opt.grid and len(grid_images) > 0:
@@ -469,12 +467,12 @@ def main_loop(gen, opt):
                 )
                 results = [[path, formatted_dream_prompt]]
 
-        except AssertionError as e:
-            print(e)
+        except AssertionError:
+            logger.error(e)
             continue
 
         except OSError as e:
-            print(e)
+            logger.error(e)
             continue
 
         print("Outputs:")
@@ -513,7 +511,7 @@ def do_command(command: str, gen, opt: Args, completer) -> tuple:
             gen.set_model(model_name)
             add_embedding_terms(gen, completer)
         except KeyError as e:
-            print(str(e))
+            logger.error(e)
         except Exception as e:
             report_model_error(opt, e)
         completer.add_history(command)
@@ -527,8 +525,8 @@ def do_command(command: str, gen, opt: Args, completer) -> tuple:
     elif command.startswith("!import"):
         path = shlex.split(command)
         if len(path) < 2:
-            print(
-                "** please provide (1) a URL to a .ckpt file to import; (2) a local path to a .ckpt file; or (3) a diffusers repository id in the form stabilityai/stable-diffusion-2-1"
+            logger.warning(
+                "please provide (1) a URL to a .ckpt file to import; (2) a local path to a .ckpt file; or (3) a diffusers repository id in the form stabilityai/stable-diffusion-2-1"
             )
         else:
             try:
@@ -541,7 +539,7 @@ def do_command(command: str, gen, opt: Args, completer) -> tuple:
     elif command.startswith(("!convert", "!optimize")):
         path = shlex.split(command)
         if len(path) < 2:
-            print("** please provide the path to a .ckpt or .safetensors model")
+            logger.warning("please provide the path to a .ckpt or .safetensors model")
         else:
             try:
                 convert_model(path[1], gen, opt, completer)
@@ -553,7 +551,7 @@ def do_command(command: str, gen, opt: Args, completer) -> tuple:
     elif command.startswith("!edit"):
         path = shlex.split(command)
         if len(path) < 2:
-            print("** please provide the name of a model")
+            logger.warning("please provide the name of a model")
         else:
             edit_model(path[1], gen, opt, completer)
         completer.add_history(command)
@@ -562,7 +560,7 @@ def do_command(command: str, gen, opt: Args, completer) -> tuple:
     elif command.startswith("!del"):
         path = shlex.split(command)
         if len(path) < 2:
-            print("** please provide the name of a model")
+            logger.warning("please provide the name of a model")
         else:
             del_config(path[1], gen, opt, completer)
         completer.add_history(command)
@@ -642,8 +640,8 @@ def import_model(model_path: str, gen, opt, completer):
             try:
                 default_name = url_attachment_name(model_path)
                 default_name = Path(default_name).stem
-            except Exception as e:
-                print(f"** URL: {str(e)}")
+            except Exception:
+                logger.warning(f"A problem occurred while assigning the name of the downloaded model",exc_info=True)
             model_name, model_desc = _get_model_name_and_desc(
                 gen.model_manager,
                 completer,
@@ -664,11 +662,11 @@ def import_model(model_path: str, gen, opt, completer):
                 model_config_file=config_file,
             )
     if not imported_name:
-        print("** Aborting import.")
+        logger.error("Aborting import.")
         return
 
     if not _verify_load(imported_name, gen):
-        print("** model failed to load. Discarding configuration entry")
+        logger.error("model failed to load. Discarding configuration entry")
         gen.model_manager.del_model(imported_name)
         return
     if click.confirm("Make this the default model?", default=False):
@@ -676,7 +674,7 @@ def import_model(model_path: str, gen, opt, completer):
 
     gen.model_manager.commit(opt.conf)
     completer.update_models(gen.model_manager.list_models())
-    print(f">> {imported_name} successfully installed")
+    logger.info(f"{imported_name} successfully installed")
 
 def _pick_configuration_file(completer)->Path:
     print(
@@ -720,21 +718,21 @@ Please select the type of this model:
     return choice
 
 def _verify_load(model_name: str, gen) -> bool:
-    print(">> Verifying that new model loads...")
+    logger.info("Verifying that new model loads...")
     current_model = gen.model_name
     try:
         if not gen.set_model(model_name):
             return
     except Exception as e:
-        print(f"** model failed to load: {str(e)}")
-        print(
+        logger.warning(f"model failed to load: {str(e)}")
+        logger.warning(
             "** note that importing 2.X checkpoints is not supported. Please use !convert_model instead."
         )
         return False
     if click.confirm("Keep model loaded?", default=True):
         gen.set_model(model_name)
     else:
-        print(">> Restoring previous model")
+        logger.info("Restoring previous model")
         gen.set_model(current_model)
     return True
 
@@ -757,7 +755,7 @@ def convert_model(model_name_or_path: Union[Path, str], gen, opt, completer):
     ckpt_path = None
     original_config_file = None
     if model_name_or_path == gen.model_name:
-        print("** Can't convert the active model. !switch to another model first. **")
+        logger.warning("Can't convert the active model. !switch to another model first. **")
         return
     elif model_info := manager.model_info(model_name_or_path):
         if "weights" in model_info:
@@ -767,7 +765,7 @@ def convert_model(model_name_or_path: Union[Path, str], gen, opt, completer):
             model_description = model_info["description"]
             vae_path = model_info.get("vae")
         else:
-            print(f"** {model_name_or_path} is not a legacy .ckpt weights file")
+            logger.warning(f"{model_name_or_path} is not a legacy .ckpt weights file")
             return
         model_name = manager.convert_and_import(
             ckpt_path,
@@ -788,16 +786,16 @@ def convert_model(model_name_or_path: Union[Path, str], gen, opt, completer):
     manager.commit(opt.conf)
     if click.confirm(f"Delete the original .ckpt file at {ckpt_path}?", default=False):
         ckpt_path.unlink(missing_ok=True)
-        print(f"{ckpt_path} deleted")
+        logger.warning(f"{ckpt_path} deleted")
 
 
 def del_config(model_name: str, gen, opt, completer):
     current_model = gen.model_name
     if model_name == current_model:
-        print("** Can't delete active model. !switch to another model first. **")
+        logger.warning("Can't delete active model. !switch to another model first. **")
         return
     if model_name not in gen.model_manager.config:
-        print(f"** Unknown model {model_name}")
+        logger.warning(f"Unknown model {model_name}")
         return
 
     if not click.confirm(
@@ -810,17 +808,17 @@ def del_config(model_name: str, gen, opt, completer):
     )
     gen.model_manager.del_model(model_name, delete_files=delete_completely)
     gen.model_manager.commit(opt.conf)
-    print(f"** {model_name} deleted")
+    logger.warning(f"{model_name} deleted")
     completer.update_models(gen.model_manager.list_models())
 
 
 def edit_model(model_name: str, gen, opt, completer):
     manager = gen.model_manager
     if not (info := manager.model_info(model_name)):
-        print(f"** Unknown model {model_name}")
+        logger.warning(f"** Unknown model {model_name}")
         return
-
-    print(f"\n>> Editing model {model_name} from configuration file {opt.conf}")
+    print()
+    logger.info(f"Editing model {model_name} from configuration file {opt.conf}")
     new_name = _get_model_name(manager.list_models(), completer, model_name)
 
     for attribute in info.keys():
@@ -858,7 +856,7 @@ def edit_model(model_name: str, gen, opt, completer):
         manager.set_default_model(new_name)
     manager.commit(opt.conf)
     completer.update_models(manager.list_models())
-    print(">> Model successfully updated")
+    logger.info("Model successfully updated")
 
 
 def _get_model_name(existing_names, completer, default_name: str = "") -> str:
@@ -869,11 +867,11 @@ def _get_model_name(existing_names, completer, default_name: str = "") -> str:
         if len(model_name) == 0:
             model_name = default_name
         if not re.match("^[\w._+:/-]+$", model_name):
-            print(
-                '** model name must contain only words, digits and the characters "._+:/-" **'
+            logger.warning(
+                'model name must contain only words, digits and the characters "._+:/-" **'
             )
         elif model_name != default_name and model_name in existing_names:
-            print(f"** the name {model_name} is already in use. Pick another.")
+            logger.warning(f"the name {model_name} is already in use. Pick another.")
         else:
             done = True
     return model_name
@@ -940,11 +938,10 @@ def do_postprocess(gen, opt, callback):
             opt=opt,
         )
     except OSError:
-        print(traceback.format_exc(), file=sys.stderr)
-        print(f"** {file_path}: file could not be read")
+        logger.error(f"{file_path}: file could not be read",exc_info=True)
         return
     except (KeyError, AttributeError):
-        print(traceback.format_exc(), file=sys.stderr)
+        logger.error(f"an error occurred while applying the {tool} postprocessor",exc_info=True)
         return
     return opt.last_operation
 
@@ -999,13 +996,13 @@ def prepare_image_metadata(
         try:
             filename = opt.fnformat.format(**wildcards)
         except KeyError as e:
-            print(
-                f"** The filename format contains an unknown key '{e.args[0]}'. Will use {{prefix}}.{{seed}}.png' instead"
+            logger.error(
+                f"The filename format contains an unknown key '{e.args[0]}'. Will use {{prefix}}.{{seed}}.png' instead"
             )
             filename = f"{prefix}.{seed}.png"
         except IndexError:
-            print(
-                "** The filename format is broken or complete. Will use '{prefix}.{seed}.png' instead"
+            logger.error(
+                "The filename format is broken or complete. Will use '{prefix}.{seed}.png' instead"
             )
             filename = f"{prefix}.{seed}.png"
 
@@ -1094,14 +1091,14 @@ def split_variations(variations_string) -> list:
     for part in variations_string.split(","):
         seed_and_weight = part.split(":")
         if len(seed_and_weight) != 2:
-            print(f'** Could not parse with_variation part "{part}"')
+            logger.warning(f'Could not parse with_variation part "{part}"')
             broken = True
             break
         try:
             seed = int(seed_and_weight[0])
             weight = float(seed_and_weight[1])
         except ValueError:
-            print(f'** Could not parse with_variation part "{part}"')
+            logger.warning(f'Could not parse with_variation part "{part}"')
             broken = True
             break
         parts.append([seed, weight])
@@ -1125,23 +1122,23 @@ def load_face_restoration(opt):
                     opt.gfpgan_model_path
                 )
             else:
-                print(">> Face restoration disabled")
+                logger.info("Face restoration disabled")
             if opt.esrgan:
                 esrgan = restoration.load_esrgan(opt.esrgan_bg_tile)
             else:
-                print(">> Upscaling disabled")
+                logger.info("Upscaling disabled")
         else:
-            print(">> Face restoration and upscaling disabled")
+            logger.info("Face restoration and upscaling disabled")
     except (ModuleNotFoundError, ImportError):
         print(traceback.format_exc(), file=sys.stderr)
-        print(">> You may need to install the ESRGAN and/or GFPGAN modules")
+        logger.info("You may need to install the ESRGAN and/or GFPGAN modules")
     return gfpgan, codeformer, esrgan
 
 
 def make_step_callback(gen, opt, prefix):
     destination = os.path.join(opt.outdir, "intermediates", prefix)
     os.makedirs(destination, exist_ok=True)
-    print(f">> Intermediate images will be written into {destination}")
+    logger.info(f"Intermediate images will be written into {destination}")
 
     def callback(state: PipelineIntermediateState):
         latents = state.latents
@@ -1183,21 +1180,20 @@ def retrieve_dream_command(opt, command, completer):
     try:
         cmd = dream_cmd_from_png(path)
     except OSError:
-        print(f"## {tokens[0]}: file could not be read")
+        logger.error(f"{tokens[0]}: file could not be read")
     except (KeyError, AttributeError, IndexError):
-        print(f"## {tokens[0]}: file has no metadata")
+        logger.error(f"{tokens[0]}: file has no metadata")
     except:
-        print(f"## {tokens[0]}: file could not be processed")
+        logger.error(f"{tokens[0]}: file could not be processed")
     if len(cmd) > 0:
         completer.set_line(cmd)
 
-
 def write_commands(opt, file_path: str, outfilepath: str):
     dir, basename = os.path.split(file_path)
     try:
         paths = sorted(list(Path(dir).glob(basename)))
     except ValueError:
-        print(f'## "{basename}": unacceptable pattern')
+        logger.error(f'"{basename}": unacceptable pattern')
         return
 
     commands = []
@@ -1206,9 +1202,9 @@ def write_commands(opt, file_path: str, outfilepath: str):
         try:
             cmd = dream_cmd_from_png(path)
         except (KeyError, AttributeError, IndexError):
-            print(f"## {path}: file has no metadata")
+            logger.error(f"{path}: file has no metadata")
         except:
-            print(f"## {path}: file could not be processed")
+            logger.error(f"{path}: file could not be processed")
         if cmd:
             commands.append(f"# {path}")
             commands.append(cmd)
@@ -1218,18 +1214,18 @@ def write_commands(opt, file_path: str, outfilepath: str):
             outfilepath = os.path.join(opt.outdir, basename)
         with open(outfilepath, "w", encoding="utf-8") as f:
             f.write("\n".join(commands))
-        print(f">> File {outfilepath} with commands created")
+        logger.info(f"File {outfilepath} with commands created")
 
 
 def report_model_error(opt: Namespace, e: Exception):
-    print(f'** An error occurred while attempting to initialize the model: "{str(e)}"')
-    print(
-        "** This can be caused by a missing or corrupted models file, and can sometimes be fixed by (re)installing the models."
+    logger.warning(f'An error occurred while attempting to initialize the model: "{str(e)}"')
+    logger.warning(
+        "This can be caused by a missing or corrupted models file, and can sometimes be fixed by (re)installing the models."
     )
     yes_to_all = os.environ.get("INVOKE_MODEL_RECONFIGURE")
     if yes_to_all:
-        print(
-            "** Reconfiguration is being forced by environment variable INVOKE_MODEL_RECONFIGURE"
+        logger.warning(
+            "Reconfiguration is being forced by environment variable INVOKE_MODEL_RECONFIGURE"
         )
     else:
         if not click.confirm(
@@ -1238,7 +1234,7 @@ def report_model_error(opt: Namespace, e: Exception):
         ):
             return
 
-    print("invokeai-configure is launching....\n")
+    logger.info("invokeai-configure is launching....\n")
 
     # Match arguments that were set on the CLI
     # only the arguments accepted by the configuration script are parsed
@@ -1255,7 +1251,7 @@ def report_model_error(opt: Namespace, e: Exception):
     from ..install import invokeai_configure
 
     invokeai_configure()
-    print("** InvokeAI will now restart")
+    logger.warning("InvokeAI will now restart")
     sys.argv = previous_args
     main()  # would rather do a os.exec(), but doesn't exist?
     sys.exit(0)

invokeai/frontend/install/model_install.py

@@ -22,6 +22,7 @@ import torch
 from npyscreen import widget
 from omegaconf import OmegaConf
 
+import invokeai.backend.util.logging as logger
 from invokeai.backend.globals import Globals, global_config_dir
 
 from ...backend.config.model_install_backend import (
@@ -455,8 +456,8 @@ def main():
     Globals.root = os.path.expanduser(get_root(opt.root) or "")
 
     if not global_config_dir().exists():
-        print(
-            ">> Your InvokeAI root directory is not set up. Calling invokeai-configure."
+        logger.info(
+            "Your InvokeAI root directory is not set up. Calling invokeai-configure."
         )
         from invokeai.frontend.install import invokeai_configure
 
@@ -466,18 +467,18 @@ def main():
     try:
         select_and_download_models(opt)
     except AssertionError as e:
-        print(str(e))
+        logger.error(e)
         sys.exit(-1)
     except KeyboardInterrupt:
-        print("\nGoodbye! Come back soon.")
+        logger.info("Goodbye! Come back soon.")
     except widget.NotEnoughSpaceForWidget as e:
         if str(e).startswith("Height of 1 allocated"):
-            print(
-                "** Insufficient vertical space for the interface. Please make your window taller and try again"
+            logger.error(
+                "Insufficient vertical space for the interface. Please make your window taller and try again"
             )
         elif str(e).startswith("addwstr"):
-            print(
-                "** Insufficient horizontal space for the interface. Please make your window wider and try again."
+            logger.error(
+                "Insufficient horizontal space for the interface. Please make your window wider and try again."
             )
 
 

invokeai/frontend/merge/merge_diffusers.py

@@ -27,6 +27,8 @@ from ...backend.globals import (
     global_models_dir,
     global_set_root,
 )
+
+import invokeai.backend.util.logging as logger
 from ...backend.model_management import ModelManager
 from ...frontend.install.widgets import FloatTitleSlider
 
@@ -113,7 +115,7 @@ def merge_diffusion_models_and_commit(
         model_name=merged_model_name, description=f'Merge of models {", ".join(models)}'
     )
     if vae := model_manager.config[models[0]].get("vae", None):
-        print(f">> Using configured VAE assigned to {models[0]}")
+        logger.info(f"Using configured VAE assigned to {models[0]}")
         import_args.update(vae=vae)
     model_manager.import_diffuser_model(dump_path, **import_args)
     model_manager.commit(config_file)
@@ -391,10 +393,8 @@ class mergeModelsForm(npyscreen.FormMultiPageAction):
             for name in self.model_manager.model_names()
             if self.model_manager.model_info(name).get("format") == "diffusers"
         ]
-        print(model_names)
         return sorted(model_names)
 
-
 class Mergeapp(npyscreen.NPSAppManaged):
     def __init__(self):
         super().__init__()
@@ -414,7 +414,7 @@ def run_gui(args: Namespace):
 
     args = mergeapp.merge_arguments
     merge_diffusion_models_and_commit(**args)
-    print(f'>> Models merged into new model: "{args["merged_model_name"]}".')
+    logger.info(f'Models merged into new model: "{args["merged_model_name"]}".')
 
 
 def run_cli(args: Namespace):
@@ -425,8 +425,8 @@ def run_cli(args: Namespace):
 
     if not args.merged_model_name:
         args.merged_model_name = "+".join(args.models)
-        print(
-            f'>> No --merged_model_name provided. Defaulting to "{args.merged_model_name}"'
+        logger.info(
+            f'No --merged_model_name provided. Defaulting to "{args.merged_model_name}"'
         )
 
         model_manager = ModelManager(OmegaConf.load(global_config_file()))
@@ -435,7 +435,7 @@ def run_cli(args: Namespace):
         ), f'A model named "{args.merged_model_name}" already exists. Use --clobber to overwrite.'
 
         merge_diffusion_models_and_commit(**vars(args))
-        print(f'>> Models merged into new model: "{args.merged_model_name}".')
+        logger.info(f'Models merged into new model: "{args.merged_model_name}".')
 
 
 def main():
@@ -455,17 +455,16 @@ def main():
             run_cli(args)
     except widget.NotEnoughSpaceForWidget as e:
         if str(e).startswith("Height of 1 allocated"):
-            print(
-                "** You need to have at least two diffusers models defined in models.yaml in order to merge"
+            logger.error(
+                "You need to have at least two diffusers models defined in models.yaml in order to merge"
             )
         else:
-            print(
-                "** Not enough room for the user interface. Try making this window larger."
+            logger.error(
+                "Not enough room for the user interface. Try making this window larger."
             )
         sys.exit(-1)
-    except Exception:
-        print(">> An error occurred:")
-        traceback.print_exc()
+    except Exception as e:
+        logger.error(e)
         sys.exit(-1)
     except KeyboardInterrupt:
         sys.exit(-1)

invokeai/frontend/training/textual_inversion.py

@@ -20,6 +20,7 @@ import npyscreen
 from npyscreen import widget
 from omegaconf import OmegaConf
 
+import invokeai.backend.util.logging as logger
 from invokeai.backend.globals import Globals, global_set_root
 
 from ...backend.training import do_textual_inversion_training, parse_args
@@ -368,14 +369,14 @@ def copy_to_embeddings_folder(args: dict):
     dest_dir_name = args["placeholder_token"].strip("<>")
     destination = Path(Globals.root, "embeddings", dest_dir_name)
     os.makedirs(destination, exist_ok=True)
-    print(f">> Training completed. Copying learned_embeds.bin into {str(destination)}")
+    logger.info(f"Training completed. Copying learned_embeds.bin into {str(destination)}")
     shutil.copy(source, destination)
     if (
         input("Delete training logs and intermediate checkpoints? [y] ") or "y"
     ).startswith(("y", "Y")):
         shutil.rmtree(Path(args["output_dir"]))
     else:
-        print(f'>> Keeping {args["output_dir"]}')
+        logger.info(f'Keeping {args["output_dir"]}')
 
 
 def save_args(args: dict):
@@ -422,10 +423,10 @@ def do_front_end(args: Namespace):
             do_textual_inversion_training(**args)
             copy_to_embeddings_folder(args)
         except Exception as e:
-            print("** An exception occurred during training. The exception was:")
-            print(str(e))
-            print("** DETAILS:")
-            print(traceback.format_exc())
+            logger.error("An exception occurred during training. The exception was:")
+            logger.error(str(e))
+            logger.error("DETAILS:")
+            logger.error(traceback.format_exc())
 
 
 def main():
@@ -437,21 +438,21 @@ def main():
         else:
             do_textual_inversion_training(**vars(args))
     except AssertionError as e:
-        print(str(e))
+        logger.error(e)
         sys.exit(-1)
     except KeyboardInterrupt:
         pass
     except (widget.NotEnoughSpaceForWidget, Exception) as e:
         if str(e).startswith("Height of 1 allocated"):
-            print(
-                "** You need to have at least one diffusers models defined in models.yaml in order to train"
+            logger.error(
+                "You need to have at least one diffusers models defined in models.yaml in order to train"
             )
         elif str(e).startswith("addwstr"):
-            print(
-                "** Not enough window space for the interface. Please make your window larger and try again."
+            logger.error(
+                "Not enough window space for the interface. Please make your window larger and try again."
             )
         else:
-            print(f"** An error has occurred: {str(e)}")
+            logger.error(e)
         sys.exit(-1)
 
 

invokeai/frontend/web/config/vite.app.config.ts

@@ -0,0 +1,40 @@
+import react from '@vitejs/plugin-react-swc';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { PluginOption, UserConfig } from 'vite';
+import eslint from 'vite-plugin-eslint';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export const appConfig: UserConfig = {
+  base: './',
+  plugins: [
+    react(),
+    eslint(),
+    tsconfigPaths(),
+    visualizer() as unknown as PluginOption,
+  ],
+  build: {
+    chunkSizeWarningLimit: 1500,
+  },
+  server: {
+    // Proxy HTTP requests to the flask server
+    proxy: {
+      // Proxy socket.io to the nodes socketio server
+      '/ws/socket.io': {
+        target: 'ws://127.0.0.1:9090',
+        ws: true,
+      },
+      // Proxy openapi schema definiton
+      '/openapi.json': {
+        target: 'http://127.0.0.1:9090/openapi.json',
+        rewrite: (path) => path.replace(/^\/openapi.json/, ''),
+        changeOrigin: true,
+      },
+      // proxy nodes api
+      '/api/v1': {
+        target: 'http://127.0.0.1:9090/api/v1',
+        rewrite: (path) => path.replace(/^\/api\/v1/, ''),
+        changeOrigin: true,
+      },
+    },
+  },
+};

invokeai/frontend/web/config/vite.package.config.ts

@@ -0,0 +1,47 @@
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { PluginOption, UserConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import eslint from 'vite-plugin-eslint';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export const packageConfig: UserConfig = {
+  base: './',
+  plugins: [
+    react(),
+    eslint(),
+    tsconfigPaths(),
+    visualizer() as unknown as PluginOption,
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  build: {
+    chunkSizeWarningLimit: 1500,
+    lib: {
+      entry: path.resolve(__dirname, '../src/index.ts'),
+      name: 'InvokeAIUI',
+      fileName: (format) => `invoke-ai-ui.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@emotion/react'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      app: path.resolve(__dirname, '../src/app'),
+      assets: path.resolve(__dirname, '../src/assets'),
+      common: path.resolve(__dirname, '../src/common'),
+      features: path.resolve(__dirname, '../src/features'),
+      services: path.resolve(__dirname, '../src/services'),
+      theme: path.resolve(__dirname, '../src/theme'),
+    },
+  },
+};

invokeai/frontend/web/index.d.ts

@@ -1,98 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { IAIPopoverProps } from '../web/src/common/components/IAIPopover';
-import { IAIIconButtonProps } from '../web/src/common/components/IAIIconButton';
-import { InvokeTabName } from 'features/ui/store/tabMap';
-
-export {};
-
-declare module 'redux-socket.io-middleware';
-
-declare global {
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  interface Array<T> {
-    /**
-     * Returns the value of the last element in the array where predicate is true, and undefined
-     * otherwise.
-     * @param predicate findLast calls predicate once for each element of the array, in descending
-     * order, until it finds one where predicate returns true. If such an element is found, findLast
-     * immediately returns that element value. Otherwise, findLast returns undefined.
-     * @param thisArg If provided, it will be used as the this value for each invocation of
-     * predicate. If it is not provided, undefined is used instead.
-     */
-    findLast<S extends T>(
-      predicate: (value: T, index: number, array: T[]) => value is S,
-      thisArg?: any
-    ): S | undefined;
-    findLast(
-      predicate: (value: T, index: number, array: T[]) => unknown,
-      thisArg?: any
-    ): T | undefined;
-
-    /**
-     * Returns the index of the last element in the array where predicate is true, and -1
-     * otherwise.
-     * @param predicate findLastIndex calls predicate once for each element of the array, in descending
-     * order, until it finds one where predicate returns true. If such an element is found,
-     * findLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1.
-     * @param thisArg If provided, it will be used as the this value for each invocation of
-     * predicate. If it is not provided, undefined is used instead.
-     */
-    findLastIndex(
-      predicate: (value: T, index: number, array: T[]) => unknown,
-      thisArg?: any
-    ): number;
-  }
-  /* eslint-enable @typescript-eslint/no-explicit-any */
-}
-
-declare module '@invoke-ai/invoke-ai-ui' {
-  declare class ThemeChanger extends React.Component<ThemeChangerProps> {
-    public constructor(props: ThemeChangerProps);
-  }
-
-  declare class InvokeAiLogoComponent extends React.Component<InvokeAILogoComponentProps> {
-    public constructor(props: InvokeAILogoComponentProps);
-  }
-
-  declare class IAIPopover extends React.Component<IAIPopoverProps> {
-    public constructor(props: IAIPopoverProps);
-  }
-
-  declare class IAIIconButton extends React.Component<IAIIconButtonProps> {
-    public constructor(props: IAIIconButtonProps);
-  }
-
-  declare class SettingsModal extends React.Component<SettingsModalProps> {
-    public constructor(props: SettingsModalProps);
-  }
-
-  declare class StatusIndicator extends React.Component<StatusIndicatorProps> {
-    public constructor(props: StatusIndicatorProps);
-  }
-
-  declare class ModelSelect extends React.Component<ModelSelectProps> {
-    public constructor(props: ModelSelectProps);
-  }
-}
-
-interface InvokeProps extends PropsWithChildren {
-  apiUrl?: string;
-  disabledPanels?: string[];
-  disabledTabs?: InvokeTabName[];
-  token?: string;
-  shouldTransformUrls?: boolean;
-  shouldFetchImages?: boolean;
-}
-
-declare function Invoke(props: InvokeProps): JSX.Element;
-
-export {
-  ThemeChanger,
-  InvokeAiLogoComponent,
-  IAIPopover,
-  IAIIconButton,
-  SettingsModal,
-  StatusIndicator,
-  ModelSelect,
-};
-export = Invoke;

invokeai/frontend/web/package.json

@@ -1,7 +1,23 @@
 {
-  "name": "invoke-ai-ui",
+  "name": "@invoke-ai/invoke-ai-ui",
   "private": true,
   "version": "0.0.1",
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://npm.pkg.github.com"
+  },
+  "main": "./dist/invoke-ai-ui.umd.js",
+  "module": "./dist/invoke-ai-ui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/invoke-ai-ui.es.js",
+      "require": "./dist/invoke-ai-ui.umd.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky",
     "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
@@ -40,81 +56,96 @@
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.1.1",
-    "@chakra-ui/cli": "^2.3.0",
-    "@chakra-ui/icons": "^2.0.17",
-    "@chakra-ui/react": "^2.5.1",
-    "@chakra-ui/styled-system": "^2.6.1",
+    "@chakra-ui/icons": "^2.0.19",
+    "@chakra-ui/react": "^2.6.0",
+    "@chakra-ui/styled-system": "^2.9.0",
     "@chakra-ui/theme-tools": "^2.0.16",
     "@dagrejs/graphlib": "^2.1.12",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fontsource/inter": "^4.5.15",
-    "@reduxjs/toolkit": "^1.9.3",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@roarr/browser-log-writer": "^1.1.5",
     "chakra-ui-contextmenu": "^1.0.5",
     "dateformat": "^5.0.3",
     "formik": "^2.2.9",
-    "framer-motion": "^9.0.4",
+    "framer-motion": "^10.12.4",
     "fuse.js": "^6.6.2",
-    "i18next": "^22.4.10",
+    "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.0.1",
-    "i18next-http-backend": "^2.1.1",
-    "konva": "^8.4.2",
-    "lodash": "^4.17.21",
-    "patch-package": "^6.5.1",
+    "i18next-http-backend": "^2.2.0",
+    "konva": "^9.0.1",
+    "lodash-es": "^4.17.21",
+    "overlayscrollbars": "^2.1.1",
+    "overlayscrollbars-react": "^0.5.0",
+    "patch-package": "^7.0.0",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-hotkeys-hook": "4.3.5",
-    "react-i18next": "^12.1.5",
+    "react-hotkeys-hook": "4.4.0",
+    "react-i18next": "^12.2.2",
     "react-icons": "^4.7.1",
-    "react-konva": "^18.2.4",
-    "react-konva-utils": "^0.3.2",
+    "react-konva": "^18.2.7",
+    "react-konva-utils": "^1.0.4",
     "react-redux": "^8.0.5",
+    "react-rnd": "^10.4.1",
     "react-transition-group": "^4.4.5",
-    "react-zoom-pan-pinch": "^2.6.1",
+    "react-use": "^17.4.0",
+    "react-virtuoso": "^4.3.5",
+    "react-zoom-pan-pinch": "^3.0.7",
     "reactflow": "^11.7.0",
     "redux-deep-persist": "^1.0.7",
     "redux-dynamic-middlewares": "^2.2.0",
     "redux-persist": "^6.0.0",
+    "roarr": "^7.15.0",
+    "serialize-error": "^11.0.0",
     "socket.io-client": "^4.6.0",
     "use-image": "^1.1.0",
     "uuid": "^9.0.0"
   },
+  "peerDependencies": {
+    "@chakra-ui/cli": "^2.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-toolbelt": "^9.6.0"
+  },
   "devDependencies": {
+    "@chakra-ui/cli": "^2.4.0",
     "@types/dateformat": "^5.0.0",
-    "@types/lodash": "^4.14.194",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/lodash-es": "^4.14.194",
+    "@types/node": "^18.16.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "@types/react-transition-group": "^4.4.5",
     "@types/uuid": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
-    "@vitejs/plugin-react-swc": "^3.2.0",
-    "axios": "^1.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "@vitejs/plugin-react-swc": "^3.3.0",
+    "axios": "^1.4.0",
     "babel-plugin-transform-imports": "^2.0.0",
-    "concurrently": "^7.6.0",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
+    "concurrently": "^8.0.1",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "form-data": "^4.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.2",
+    "lint-staged": "^13.2.2",
     "madge": "^6.0.0",
     "openapi-types": "^12.1.0",
-    "openapi-typescript-codegen": "^0.23.0",
+    "openapi-typescript-codegen": "^0.24.0",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
     "rollup-plugin-visualizer": "^5.9.0",
-    "terser": "^5.16.4",
+    "terser": "^5.17.1",
     "ts-toolbelt": "^9.6.0",
-    "typescript": "4.9.5",
-    "vite": "^4.1.2",
+    "vite": "^4.3.3",
+    "vite-plugin-dts": "^2.3.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.0.5",
+    "vite-tsconfig-paths": "^4.2.0",
     "yarn": "^1.22.19"
   }
 }

invokeai/frontend/web/public/locales/en.json

@@ -527,10 +527,15 @@
         "useCanvasBeta": "Use Canvas Beta Layout",
         "enableImageDebugging": "Enable Image Debugging",
         "useSlidersForAll": "Use Sliders For All Options",
+        "autoShowProgress": "Auto Show Progress Images",
         "resetWebUI": "Reset Web UI",
         "resetWebUIDesc1": "Resetting the web UI only resets the browser's local cache of your images and remembered settings. It does not delete any images from disk.",
         "resetWebUIDesc2": "If images aren't showing up in the gallery or something else isn't working, please try resetting before submitting an issue on GitHub.",
-        "resetComplete": "Web UI has been reset. Refresh the page to reload."
+        "resetComplete": "Web UI has been reset. Refresh the page to reload.",
+        "consoleLogLevel": "Log Level",
+        "shouldLogToConsole": "Console Logging",
+        "developer": "Developer",
+        "general": "General"
     },
     "toast": {
         "serverError": "Server Error",
@@ -641,5 +646,9 @@
         "betaDarkenOutside": "Darken Outside",
         "betaLimitToBox": "Limit To Box",
         "betaPreserveMasked": "Preserve Masked"
+    },
+    "ui": {
+        "showProgressImages": "Show Progress Images",
+        "hideProgressImages": "Hide Progress Images"
     }
 }

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

@@ -1,9 +1,7 @@
 import ImageUploader from 'common/components/ImageUploader';
-import Console from 'features/system/components/Console';
 import ProgressBar from 'features/system/components/ProgressBar';
 import SiteHeader from 'features/system/components/SiteHeader';
 import InvokeTabs from 'features/ui/components/InvokeTabs';
-import { keepGUIAlive } from './utils';
 
 import useToastWatcher from 'features/system/hooks/useToastWatcher';
 
@@ -13,25 +11,34 @@ import { Box, Flex, Grid, Portal, useColorMode } from '@chakra-ui/react';
 import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
-import { useAppDispatch, useAppSelector } from './storeHooks';
-import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import {
+  memo,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Loading from 'common/components/Loading/Loading';
 import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
-import { PartialAppConfig } from './invokeai';
+import { PartialAppConfig } from 'app/types/invokeai';
 import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { useLogger } from 'app/logging/useLogger';
+import ProgressImagePreview from 'features/parameters/components/ProgressImagePreview';
 
-keepGUIAlive();
+const DEFAULT_CONFIG = {};
 
 interface Props extends PropsWithChildren {
   config?: PartialAppConfig;
 }
 
-const App = ({ config = {}, children }: Props) => {
+const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
   useToastWatcher();
   useGlobalHotkeys();
+  const log = useLogger();
 
   const currentTheme = useAppSelector((state) => state.ui.currentTheme);
 
@@ -45,9 +52,9 @@ const App = ({ config = {}, children }: Props) => {
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    console.log('Received config: ', config);
+    log.info({ namespace: 'App', data: config }, 'Received config');
     dispatch(configChanged(config));
-  }, [dispatch, config]);
+  }, [dispatch, config, log]);
 
   useEffect(() => {
     setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark');
@@ -58,7 +65,7 @@ const App = ({ config = {}, children }: Props) => {
   }, []);
 
   return (
-    <Grid w="100vw" h="100vh" position="relative">
+    <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
       {isLightboxEnabled && <Lightbox />}
       <ImageUploader>
         <ProgressBar />
@@ -114,11 +121,9 @@ const App = ({ config = {}, children }: Props) => {
       <Portal>
         <FloatingGalleryButton />
       </Portal>
-      <Portal>
-        <Console />
-      </Portal>
+      <ProgressImagePreview />
     </Grid>
   );
 };
 
-export default App;
+export default memo(App);

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -1,8 +1,8 @@
-import React, { lazy, PropsWithChildren, useEffect } from 'react';
+import React, { lazy, memo, PropsWithChildren, useEffect } from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import { buildMiddleware, store } from './app/store';
-import { persistor } from './persistor';
+import { store } from 'app/store/store';
+import { persistor } from '../store/persistor';
 import { OpenAPI } from 'services/api';
 import '@fontsource/inter/100.css';
 import '@fontsource/inter/200.css';
@@ -14,14 +14,15 @@ import '@fontsource/inter/700.css';
 import '@fontsource/inter/800.css';
 import '@fontsource/inter/900.css';
 
-import Loading from './common/components/Loading/Loading';
+import Loading from '../../common/components/Loading/Loading';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
-import { PartialAppConfig } from 'app/invokeai';
+import { PartialAppConfig } from 'app/types/invokeai';
 
-import './i18n';
+import '../../i18n';
+import { socketMiddleware } from 'services/events/middleware';
 
-const App = lazy(() => import('./app/App'));
-const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider'));
+const App = lazy(() => import('./App'));
+const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
 
 interface Props extends PropsWithChildren {
   apiUrl?: string;
@@ -29,7 +30,7 @@ interface Props extends PropsWithChildren {
   config?: PartialAppConfig;
 }
 
-export default function Component({ apiUrl, token, config, children }: Props) {
+const InvokeAIUI = ({ apiUrl, token, config, children }: Props) => {
   useEffect(() => {
     // configure API client token
     if (token) {
@@ -50,7 +51,7 @@ export default function Component({ apiUrl, token, config, children }: Props) {
     // the `apiUrl`/`token` dynamically.
 
     // rebuild socket middleware with token and apiUrl
-    addMiddleware(buildMiddleware());
+    addMiddleware(socketMiddleware());
   }, [apiUrl, token]);
 
   return (
@@ -66,4 +67,6 @@ export default function Component({ apiUrl, token, config, children }: Props) {
       </Provider>
     </React.StrictMode>
   );
-}
+};
+
+export default memo(InvokeAIUI);

invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx

@@ -2,8 +2,8 @@ import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 import { ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { theme as invokeAITheme } from 'theme/theme';
-import { RootState } from './store';
-import { useAppSelector } from './storeHooks';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 
 import { greenTeaThemeColors } from 'theme/colors/greenTea';
 import { invokeAIThemeColors } from 'theme/colors/invokeAI';
@@ -18,6 +18,8 @@ import '@fontsource/inter/600.css';
 import '@fontsource/inter/700.css';
 import '@fontsource/inter/800.css';
 import '@fontsource/inter/900.css';
+import 'overlayscrollbars/overlayscrollbars.css';
+import 'theme/css/overlayscrollbars.css';
 
 type ThemeLocaleProviderProps = {
   children: ReactNode;

invokeai/frontend/web/src/app/constants.ts

@@ -1,23 +1,6 @@
 // TODO: use Enums?
 
-import { InProgressImageType } from 'features/system/store/systemSlice';
-
-// Valid samplers
-export const SAMPLERS: Array<string> = [
-  'ddim',
-  'plms',
-  'k_lms',
-  'k_dpm_2',
-  'k_dpm_2_a',
-  'k_dpmpp_2',
-  'k_dpmpp_2_a',
-  'k_euler',
-  'k_euler_a',
-  'k_heun',
-];
-
-// Valid Diffusers Samplers
-export const DIFFUSERS_SAMPLERS: Array<string> = [
+export const DIFFUSERS_SCHEDULERS: Array<string> = [
   'ddim',
   'plms',
   'k_lms',
@@ -48,17 +31,8 @@ export const UPSCALING_LEVELS: Array<{ key: string; value: number }> = [
 
 export const NUMPY_RAND_MIN = 0;
 
-export const NUMPY_RAND_MAX = 4294967295;
+export const NUMPY_RAND_MAX = 2147483647;
 
 export const FACETOOL_TYPES = ['gfpgan', 'codeformer'] as const;
 
-export const IN_PROGRESS_IMAGE_TYPES: Array<{
-  key: string;
-  value: InProgressImageType;
-}> = [
-  { key: 'None', value: 'none' },
-  { key: 'Fast', value: 'latents' },
-  { key: 'Accurate', value: 'full-res' },
-];
-
 export const NODE_MIN_WIDTH = 250;

invokeai/frontend/web/src/app/logging/useLogger.ts

@@ -0,0 +1,94 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { systemSelector } from 'features/system/store/systemSelectors';
+import { isEqual } from 'lodash-es';
+import { useEffect } from 'react';
+import { LogLevelName, ROARR, Roarr } from 'roarr';
+import { createLogWriter } from '@roarr/browser-log-writer';
+
+// Base logging context includes only the package name
+const baseContext = { package: '@invoke-ai/invoke-ai-ui' };
+
+// Create browser log writer
+ROARR.write = createLogWriter();
+
+// Module-scoped logger - can be imported and used anywhere
+export let log = Roarr.child(baseContext);
+
+// Translate human-readable log levels to numbers, used for log filtering
+export const LOG_LEVEL_MAP: Record<LogLevelName, number> = {
+  trace: 10,
+  debug: 20,
+  info: 30,
+  warn: 40,
+  error: 50,
+  fatal: 60,
+};
+
+export const VALID_LOG_LEVELS = [
+  'trace',
+  'debug',
+  'info',
+  'warn',
+  'error',
+  'fatal',
+] as const;
+
+export type InvokeLogLevel = (typeof VALID_LOG_LEVELS)[number];
+
+const selector = createSelector(
+  systemSelector,
+  (system) => {
+    const { app_version, consoleLogLevel, shouldLogToConsole } = system;
+
+    return {
+      version: app_version,
+      consoleLogLevel,
+      shouldLogToConsole,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: isEqual,
+    },
+  }
+);
+
+export const useLogger = () => {
+  const { version, consoleLogLevel, shouldLogToConsole } =
+    useAppSelector(selector);
+
+  // The provided Roarr browser log writer uses localStorage to config logging to console
+  useEffect(() => {
+    if (shouldLogToConsole) {
+      // Enable console log output
+      localStorage.setItem('ROARR_LOG', 'true');
+
+      // Use a filter to show only logs of the given level
+      localStorage.setItem(
+        'ROARR_FILTER',
+        `context.logLevel:>=${LOG_LEVEL_MAP[consoleLogLevel]}`
+      );
+    } else {
+      // Disable console log output
+      localStorage.setItem('ROARR_LOG', 'false');
+    }
+    ROARR.write = createLogWriter();
+  }, [consoleLogLevel, shouldLogToConsole]);
+
+  // Update the module-scoped logger context as needed
+  useEffect(() => {
+    const newContext: Record<string, any> = {
+      ...baseContext,
+    };
+
+    if (version) {
+      newContext.version = version;
+    }
+
+    log = Roarr.child(newContext);
+  }, [version]);
+
+  // Use the logger within components - no different than just importing it directly
+  return log;
+};

invokeai/frontend/web/src/app/selectors/readinessSelector.ts

@@ -4,7 +4,7 @@ import { initialCanvasImageSelector } from 'features/canvas/store/canvasSelector
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 export const readinessSelector = createSelector(
   [

invokeai/frontend/web/src/app/socketio/actions.ts

@@ -1,65 +1,67 @@
-import { createAction } from '@reduxjs/toolkit';
-import * as InvokeAI from 'app/invokeai';
-import { GalleryCategory } from 'features/gallery/store/gallerySlice';
-import { InvokeTabName } from 'features/ui/store/tabMap';
+// import { createAction } from '@reduxjs/toolkit';
+// import * as InvokeAI from 'app/types/invokeai';
+// import { GalleryCategory } from 'features/gallery/store/gallerySlice';
+// import { InvokeTabName } from 'features/ui/store/tabMap';
 
-/**
- * We can't use redux-toolkit's createSlice() to make these actions,
- * because they have no associated reducer. They only exist to dispatch
- * requests to the server via socketio. These actions will be handled
- * by the middleware.
- */
+// /**
+//  * We can't use redux-toolkit's createSlice() to make these actions,
+//  * because they have no associated reducer. They only exist to dispatch
+//  * requests to the server via socketio. These actions will be handled
+//  * by the middleware.
+//  */
 
-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<GalleryCategory>(
-  'socketio/requestImages'
-);
-export const requestNewImages = createAction<GalleryCategory>(
-  'socketio/requestNewImages'
-);
-export const cancelProcessing = createAction<undefined>(
-  'socketio/cancelProcessing'
-);
+// 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<GalleryCategory>(
+//   'socketio/requestImages'
+// );
+// export const requestNewImages = createAction<GalleryCategory>(
+//   'socketio/requestNewImages'
+// );
+// export const cancelProcessing = createAction<undefined>(
+//   'socketio/cancelProcessing'
+// );
 
-export const requestSystemConfig = createAction<undefined>(
-  'socketio/requestSystemConfig'
-);
+// export const requestSystemConfig = createAction<undefined>(
+//   'socketio/requestSystemConfig'
+// );
 
-export const searchForModels = createAction<string>('socketio/searchForModels');
+// export const searchForModels = createAction<string>('socketio/searchForModels');
 
-export const addNewModel = createAction<
-  InvokeAI.InvokeModelConfigProps | InvokeAI.InvokeDiffusersModelConfigProps
->('socketio/addNewModel');
+// export const addNewModel = createAction<
+//   InvokeAI.InvokeModelConfigProps | InvokeAI.InvokeDiffusersModelConfigProps
+// >('socketio/addNewModel');
 
-export const deleteModel = createAction<string>('socketio/deleteModel');
+// export const deleteModel = createAction<string>('socketio/deleteModel');
 
-export const convertToDiffusers =
-  createAction<InvokeAI.InvokeModelConversionProps>(
-    'socketio/convertToDiffusers'
-  );
+// export const convertToDiffusers =
+//   createAction<InvokeAI.InvokeModelConversionProps>(
+//     'socketio/convertToDiffusers'
+//   );
 
-export const mergeDiffusersModels =
-  createAction<InvokeAI.InvokeModelMergingProps>(
-    'socketio/mergeDiffusersModels'
-  );
+// export const mergeDiffusersModels =
+//   createAction<InvokeAI.InvokeModelMergingProps>(
+//     'socketio/mergeDiffusersModels'
+//   );
 
-export const requestModelChange = createAction<string>(
-  'socketio/requestModelChange'
-);
+// export const requestModelChange = createAction<string>(
+//   'socketio/requestModelChange'
+// );
 
-export const saveStagingAreaImageToGallery = createAction<string>(
-  'socketio/saveStagingAreaImageToGallery'
-);
+// export const saveStagingAreaImageToGallery = createAction<string>(
+//   'socketio/saveStagingAreaImageToGallery'
+// );
 
-export const emptyTempFolder = createAction<undefined>(
-  'socketio/requestEmptyTempFolder'
-);
+// export const emptyTempFolder = createAction<undefined>(
+//   'socketio/requestEmptyTempFolder'
+// );
+
+export default {};

invokeai/frontend/web/src/app/socketio/emitters.ts

@@ -1,208 +1,209 @@
-import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
-import * as InvokeAI from 'app/invokeai';
-import type { RootState } from 'app/store';
-import {
-  frontendToBackendParameters,
-  FrontendToBackendParametersConfig,
-} from 'common/util/parameterTranslation';
-import dateFormat from 'dateformat';
-import {
-  GalleryCategory,
-  GalleryState,
-  removeImage,
-} from 'features/gallery/store/gallerySlice';
-import {
-  addLogEntry,
-  generationRequested,
-  modelChangeRequested,
-  modelConvertRequested,
-  modelMergingRequested,
-  setIsProcessing,
-} from 'features/system/store/systemSlice';
-import { InvokeTabName } from 'features/ui/store/tabMap';
-import { Socket } from 'socket.io-client';
+// import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
+// import * as InvokeAI from 'app/types/invokeai';
+// import type { RootState } from 'app/store/store';
+// import {
+//   frontendToBackendParameters,
+//   FrontendToBackendParametersConfig,
+// } from 'common/util/parameterTranslation';
+// import dateFormat from 'dateformat';
+// import {
+//   GalleryCategory,
+//   GalleryState,
+//   removeImage,
+// } from 'features/gallery/store/gallerySlice';
+// import {
+//   generationRequested,
+//   modelChangeRequested,
+//   modelConvertRequested,
+//   modelMergingRequested,
+//   setIsProcessing,
+// } from 'features/system/store/systemSlice';
+// import { InvokeTabName } from 'features/ui/store/tabMap';
+// import { Socket } from 'socket.io-client';
 
-/**
- * Returns an object containing all functions which use `socketio.emit()`.
- * i.e. those which make server requests.
- */
-const makeSocketIOEmitters = (
-  store: MiddlewareAPI<Dispatch<AnyAction>, RootState>,
-  socketio: Socket
-) => {
-  // We need to dispatch actions to redux and get pieces of state from the store.
-  const { dispatch, getState } = store;
+// /**
+//  * Returns an object containing all functions which use `socketio.emit()`.
+//  * i.e. those which make server requests.
+//  */
+// const makeSocketIOEmitters = (
+//   store: MiddlewareAPI<Dispatch<AnyAction>, RootState>,
+//   socketio: Socket
+// ) => {
+//   // We need to dispatch actions to redux and get pieces of state from the store.
+//   const { dispatch, getState } = store;
 
-  return {
-    emitGenerateImage: (generationMode: InvokeTabName) => {
-      dispatch(setIsProcessing(true));
+//   return {
+//     emitGenerateImage: (generationMode: InvokeTabName) => {
+//       dispatch(setIsProcessing(true));
 
-      const state: RootState = getState();
+//       const state: RootState = getState();
 
-      const {
-        generation: generationState,
-        postprocessing: postprocessingState,
-        system: systemState,
-        canvas: canvasState,
-      } = state;
+//       const {
+//         generation: generationState,
+//         postprocessing: postprocessingState,
+//         system: systemState,
+//         canvas: canvasState,
+//       } = state;
 
-      const frontendToBackendParametersConfig: FrontendToBackendParametersConfig =
-        {
-          generationMode,
-          generationState,
-          postprocessingState,
-          canvasState,
-          systemState,
-        };
+//       const frontendToBackendParametersConfig: FrontendToBackendParametersConfig =
+//         {
+//           generationMode,
+//           generationState,
+//           postprocessingState,
+//           canvasState,
+//           systemState,
+//         };
 
-      dispatch(generationRequested());
+//       dispatch(generationRequested());
 
-      const { generationParameters, esrganParameters, facetoolParameters } =
-        frontendToBackendParameters(frontendToBackendParametersConfig);
+//       const { generationParameters, esrganParameters, facetoolParameters } =
+//         frontendToBackendParameters(frontendToBackendParametersConfig);
 
-      socketio.emit(
-        'generateImage',
-        generationParameters,
-        esrganParameters,
-        facetoolParameters
-      );
+//       socketio.emit(
+//         'generateImage',
+//         generationParameters,
+//         esrganParameters,
+//         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, 64)
-          .concat('...');
-      }
-      if (generationParameters.init_img) {
-        generationParameters.init_img = generationParameters.init_img
-          .substr(0, 64)
-          .concat('...');
-      }
+//       // 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, 64)
+//           .concat('...');
+//       }
+//       if (generationParameters.init_img) {
+//         generationParameters.init_img = generationParameters.init_img
+//           .substr(0, 64)
+//           .concat('...');
+//       }
 
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Image generation requested: ${JSON.stringify({
-            ...generationParameters,
-            ...esrganParameters,
-            ...facetoolParameters,
-          })}`,
-        })
-      );
-    },
-    emitRunESRGAN: (imageToProcess: InvokeAI._Image) => {
-      dispatch(setIsProcessing(true));
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Image generation requested: ${JSON.stringify({
+//             ...generationParameters,
+//             ...esrganParameters,
+//             ...facetoolParameters,
+//           })}`,
+//         })
+//       );
+//     },
+//     emitRunESRGAN: (imageToProcess: InvokeAI._Image) => {
+//       dispatch(setIsProcessing(true));
 
-      const {
-        postprocessing: {
-          upscalingLevel,
-          upscalingDenoising,
-          upscalingStrength,
-        },
-      } = getState();
+//       const {
+//         postprocessing: {
+//           upscalingLevel,
+//           upscalingDenoising,
+//           upscalingStrength,
+//         },
+//       } = getState();
 
-      const esrganParameters = {
-        upscale: [upscalingLevel, upscalingDenoising, upscalingStrength],
-      };
-      socketio.emit('runPostprocessing', imageToProcess, {
-        type: 'esrgan',
-        ...esrganParameters,
-      });
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `ESRGAN upscale requested: ${JSON.stringify({
-            file: imageToProcess.url,
-            ...esrganParameters,
-          })}`,
-        })
-      );
-    },
-    emitRunFacetool: (imageToProcess: InvokeAI._Image) => {
-      dispatch(setIsProcessing(true));
+//       const esrganParameters = {
+//         upscale: [upscalingLevel, upscalingDenoising, upscalingStrength],
+//       };
+//       socketio.emit('runPostprocessing', imageToProcess, {
+//         type: 'esrgan',
+//         ...esrganParameters,
+//       });
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `ESRGAN upscale requested: ${JSON.stringify({
+//             file: imageToProcess.url,
+//             ...esrganParameters,
+//           })}`,
+//         })
+//       );
+//     },
+//     emitRunFacetool: (imageToProcess: InvokeAI._Image) => {
+//       dispatch(setIsProcessing(true));
 
-      const {
-        postprocessing: { facetoolType, facetoolStrength, codeformerFidelity },
-      } = getState();
+//       const {
+//         postprocessing: { facetoolType, facetoolStrength, codeformerFidelity },
+//       } = getState();
 
-      const facetoolParameters: Record<string, unknown> = {
-        facetool_strength: facetoolStrength,
-      };
+//       const facetoolParameters: Record<string, unknown> = {
+//         facetool_strength: facetoolStrength,
+//       };
 
-      if (facetoolType === 'codeformer') {
-        facetoolParameters.codeformer_fidelity = codeformerFidelity;
-      }
+//       if (facetoolType === 'codeformer') {
+//         facetoolParameters.codeformer_fidelity = codeformerFidelity;
+//       }
 
-      socketio.emit('runPostprocessing', imageToProcess, {
-        type: facetoolType,
-        ...facetoolParameters,
-      });
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Face restoration (${facetoolType}) requested: ${JSON.stringify(
-            {
-              file: imageToProcess.url,
-              ...facetoolParameters,
-            }
-          )}`,
-        })
-      );
-    },
-    emitDeleteImage: (imageToDelete: InvokeAI._Image) => {
-      const { url, uuid, category, thumbnail } = imageToDelete;
-      dispatch(removeImage(imageToDelete));
-      socketio.emit('deleteImage', url, thumbnail, uuid, category);
-    },
-    emitRequestImages: (category: GalleryCategory) => {
-      const gallery: GalleryState = getState().gallery;
-      const { earliest_mtime } = gallery.categories[category];
-      socketio.emit('requestImages', category, earliest_mtime);
-    },
-    emitRequestNewImages: (category: GalleryCategory) => {
-      const gallery: GalleryState = getState().gallery;
-      const { latest_mtime } = gallery.categories[category];
-      socketio.emit('requestLatestImages', category, latest_mtime);
-    },
-    emitCancelProcessing: () => {
-      socketio.emit('cancel');
-    },
-    emitRequestSystemConfig: () => {
-      socketio.emit('requestSystemConfig');
-    },
-    emitSearchForModels: (modelFolder: string) => {
-      socketio.emit('searchForModels', modelFolder);
-    },
-    emitAddNewModel: (modelConfig: InvokeAI.InvokeModelConfigProps) => {
-      socketio.emit('addNewModel', modelConfig);
-    },
-    emitDeleteModel: (modelName: string) => {
-      socketio.emit('deleteModel', modelName);
-    },
-    emitConvertToDiffusers: (
-      modelToConvert: InvokeAI.InvokeModelConversionProps
-    ) => {
-      dispatch(modelConvertRequested());
-      socketio.emit('convertToDiffusers', modelToConvert);
-    },
-    emitMergeDiffusersModels: (
-      modelMergeInfo: InvokeAI.InvokeModelMergingProps
-    ) => {
-      dispatch(modelMergingRequested());
-      socketio.emit('mergeDiffusersModels', modelMergeInfo);
-    },
-    emitRequestModelChange: (modelName: string) => {
-      dispatch(modelChangeRequested());
-      socketio.emit('requestModelChange', modelName);
-    },
-    emitSaveStagingAreaImageToGallery: (url: string) => {
-      socketio.emit('requestSaveStagingAreaImageToGallery', url);
-    },
-    emitRequestEmptyTempFolder: () => {
-      socketio.emit('requestEmptyTempFolder');
-    },
-  };
-};
+//       socketio.emit('runPostprocessing', imageToProcess, {
+//         type: facetoolType,
+//         ...facetoolParameters,
+//       });
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Face restoration (${facetoolType}) requested: ${JSON.stringify(
+//             {
+//               file: imageToProcess.url,
+//               ...facetoolParameters,
+//             }
+//           )}`,
+//         })
+//       );
+//     },
+//     emitDeleteImage: (imageToDelete: InvokeAI._Image) => {
+//       const { url, uuid, category, thumbnail } = imageToDelete;
+//       dispatch(removeImage(imageToDelete));
+//       socketio.emit('deleteImage', url, thumbnail, uuid, category);
+//     },
+//     emitRequestImages: (category: GalleryCategory) => {
+//       const gallery: GalleryState = getState().gallery;
+//       const { earliest_mtime } = gallery.categories[category];
+//       socketio.emit('requestImages', category, earliest_mtime);
+//     },
+//     emitRequestNewImages: (category: GalleryCategory) => {
+//       const gallery: GalleryState = getState().gallery;
+//       const { latest_mtime } = gallery.categories[category];
+//       socketio.emit('requestLatestImages', category, latest_mtime);
+//     },
+//     emitCancelProcessing: () => {
+//       socketio.emit('cancel');
+//     },
+//     emitRequestSystemConfig: () => {
+//       socketio.emit('requestSystemConfig');
+//     },
+//     emitSearchForModels: (modelFolder: string) => {
+//       socketio.emit('searchForModels', modelFolder);
+//     },
+//     emitAddNewModel: (modelConfig: InvokeAI.InvokeModelConfigProps) => {
+//       socketio.emit('addNewModel', modelConfig);
+//     },
+//     emitDeleteModel: (modelName: string) => {
+//       socketio.emit('deleteModel', modelName);
+//     },
+//     emitConvertToDiffusers: (
+//       modelToConvert: InvokeAI.InvokeModelConversionProps
+//     ) => {
+//       dispatch(modelConvertRequested());
+//       socketio.emit('convertToDiffusers', modelToConvert);
+//     },
+//     emitMergeDiffusersModels: (
+//       modelMergeInfo: InvokeAI.InvokeModelMergingProps
+//     ) => {
+//       dispatch(modelMergingRequested());
+//       socketio.emit('mergeDiffusersModels', modelMergeInfo);
+//     },
+//     emitRequestModelChange: (modelName: string) => {
+//       dispatch(modelChangeRequested());
+//       socketio.emit('requestModelChange', modelName);
+//     },
+//     emitSaveStagingAreaImageToGallery: (url: string) => {
+//       socketio.emit('requestSaveStagingAreaImageToGallery', url);
+//     },
+//     emitRequestEmptyTempFolder: () => {
+//       socketio.emit('requestEmptyTempFolder');
+//     },
+//   };
+// };
 
-export default makeSocketIOEmitters;
+// export default makeSocketIOEmitters;
+
+export default {};

invokeai/frontend/web/src/app/socketio/listeners.ts

@@ -1,501 +1,502 @@
-import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
-import dateFormat from 'dateformat';
-import i18n from 'i18n';
-import { v4 as uuidv4 } from 'uuid';
+// import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
+// import dateFormat from 'dateformat';
+// import i18n from 'i18n';
+// import { v4 as uuidv4 } from 'uuid';
 
-import * as InvokeAI from 'app/invokeai';
+// import * as InvokeAI from 'app/types/invokeai';
 
-import {
-  addLogEntry,
-  addToast,
-  errorOccurred,
-  processingCanceled,
-  setCurrentStatus,
-  setFoundModels,
-  setIsCancelable,
-  setIsConnected,
-  setIsProcessing,
-  setModelList,
-  setSearchFolder,
-  setSystemConfig,
-  setSystemStatus,
-} from 'features/system/store/systemSlice';
+// import {
+//   addToast,
+//   errorOccurred,
+//   processingCanceled,
+//   setCurrentStatus,
+//   setFoundModels,
+//   setIsCancelable,
+//   setIsConnected,
+//   setIsProcessing,
+//   setModelList,
+//   setSearchFolder,
+//   setSystemConfig,
+//   setSystemStatus,
+// } from 'features/system/store/systemSlice';
 
-import {
-  addGalleryImages,
-  addImage,
-  clearIntermediateImage,
-  GalleryState,
-  removeImage,
-  setIntermediateImage,
-} from 'features/gallery/store/gallerySlice';
+// import {
+//   addGalleryImages,
+//   addImage,
+//   clearIntermediateImage,
+//   GalleryState,
+//   removeImage,
+//   setIntermediateImage,
+// } from 'features/gallery/store/gallerySlice';
 
-import type { RootState } from 'app/store';
-import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
-import {
-  clearInitialImage,
-  initialImageSelected,
-  setInfillMethod,
-  // setInitialImage,
-  setMaskPath,
-} from 'features/parameters/store/generationSlice';
-import { tabMap } from 'features/ui/store/tabMap';
-import {
-  requestImages,
-  requestNewImages,
-  requestSystemConfig,
-} from './actions';
+// import type { RootState } from 'app/store/store';
+// import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
+// import {
+//   clearInitialImage,
+//   initialImageSelected,
+//   setInfillMethod,
+//   // setInitialImage,
+//   setMaskPath,
+// } from 'features/parameters/store/generationSlice';
+// import { tabMap } from 'features/ui/store/tabMap';
+// import {
+//   requestImages,
+//   requestNewImages,
+//   requestSystemConfig,
+// } from './actions';
 
-/**
- * Returns an object containing listener callbacks for socketio events.
- * TODO: This file is large, but simple. Should it be split up further?
- */
-const makeSocketIOListeners = (
-  store: MiddlewareAPI<Dispatch<AnyAction>, RootState>
-) => {
-  const { dispatch, getState } = store;
+// /**
+//  * Returns an object containing listener callbacks for socketio events.
+//  * TODO: This file is large, but simple. Should it be split up further?
+//  */
+// const makeSocketIOListeners = (
+//   store: MiddlewareAPI<Dispatch<AnyAction>, RootState>
+// ) => {
+//   const { dispatch, getState } = store;
 
-  return {
-    /**
-     * Callback to run when we receive a 'connect' event.
-     */
-    onConnect: () => {
-      try {
-        dispatch(setIsConnected(true));
-        dispatch(setCurrentStatus(i18n.t('common.statusConnected')));
-        dispatch(requestSystemConfig());
-        const gallery: GalleryState = getState().gallery;
+//   return {
+//     /**
+//      * Callback to run when we receive a 'connect' event.
+//      */
+//     onConnect: () => {
+//       try {
+//         dispatch(setIsConnected(true));
+//         dispatch(setCurrentStatus(i18n.t('common.statusConnected')));
+//         dispatch(requestSystemConfig());
+//         const gallery: GalleryState = getState().gallery;
 
-        if (gallery.categories.result.latest_mtime) {
-          dispatch(requestNewImages('result'));
-        } else {
-          dispatch(requestImages('result'));
-        }
+//         if (gallery.categories.result.latest_mtime) {
+//           dispatch(requestNewImages('result'));
+//         } else {
+//           dispatch(requestImages('result'));
+//         }
 
-        if (gallery.categories.user.latest_mtime) {
-          dispatch(requestNewImages('user'));
-        } else {
-          dispatch(requestImages('user'));
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    /**
-     * Callback to run when we receive a 'disconnect' event.
-     */
-    onDisconnect: () => {
-      try {
-        dispatch(setIsConnected(false));
-        dispatch(setCurrentStatus(i18n.t('common.statusDisconnected')));
+//         if (gallery.categories.user.latest_mtime) {
+//           dispatch(requestNewImages('user'));
+//         } else {
+//           dispatch(requestImages('user'));
+//         }
+//       } catch (e) {
+//         console.error(e);
+//       }
+//     },
+//     /**
+//      * Callback to run when we receive a 'disconnect' event.
+//      */
+//     onDisconnect: () => {
+//       try {
+//         dispatch(setIsConnected(false));
+//         dispatch(setCurrentStatus(i18n.t('common.statusDisconnected')));
 
-        dispatch(
-          addLogEntry({
-            timestamp: dateFormat(new Date(), 'isoDateTime'),
-            message: `Disconnected from server`,
-            level: 'warning',
-          })
-        );
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    /**
-     * Callback to run when we receive a 'generationResult' event.
-     */
-    onGenerationResult: (data: InvokeAI.ImageResultResponse) => {
-      try {
-        const state = getState();
-        const { activeTab } = state.ui;
-        const { shouldLoopback } = state.postprocessing;
-        const { boundingBox: _, generationMode, ...rest } = data;
+//         dispatch(
+//           addLogEntry({
+//             timestamp: dateFormat(new Date(), 'isoDateTime'),
+//             message: `Disconnected from server`,
+//             level: 'warning',
+//           })
+//         );
+//       } catch (e) {
+//         console.error(e);
+//       }
+//     },
+//     /**
+//      * Callback to run when we receive a 'generationResult' event.
+//      */
+//     onGenerationResult: (data: InvokeAI.ImageResultResponse) => {
+//       try {
+//         const state = getState();
+//         const { activeTab } = state.ui;
+//         const { shouldLoopback } = state.postprocessing;
+//         const { boundingBox: _, generationMode, ...rest } = data;
 
-        const newImage = {
-          uuid: uuidv4(),
-          ...rest,
-        };
+//         const newImage = {
+//           uuid: uuidv4(),
+//           ...rest,
+//         };
 
-        if (['txt2img', 'img2img'].includes(generationMode)) {
-          dispatch(
-            addImage({
-              category: 'result',
-              image: { ...newImage, category: 'result' },
-            })
-          );
-        }
+//         if (['txt2img', 'img2img'].includes(generationMode)) {
+//           dispatch(
+//             addImage({
+//               category: 'result',
+//               image: { ...newImage, category: 'result' },
+//             })
+//           );
+//         }
 
-        if (generationMode === 'unifiedCanvas' && data.boundingBox) {
-          const { boundingBox } = data;
-          dispatch(
-            addImageToStagingArea({
-              image: { ...newImage, category: 'temp' },
-              boundingBox,
-            })
-          );
+//         if (generationMode === 'unifiedCanvas' && data.boundingBox) {
+//           const { boundingBox } = data;
+//           dispatch(
+//             addImageToStagingArea({
+//               image: { ...newImage, category: 'temp' },
+//               boundingBox,
+//             })
+//           );
 
-          if (state.canvas.shouldAutoSave) {
-            dispatch(
-              addImage({
-                image: { ...newImage, category: 'result' },
-                category: 'result',
-              })
-            );
-          }
-        }
+//           if (state.canvas.shouldAutoSave) {
+//             dispatch(
+//               addImage({
+//                 image: { ...newImage, category: 'result' },
+//                 category: 'result',
+//               })
+//             );
+//           }
+//         }
 
-        // TODO: fix
-        // if (shouldLoopback) {
-        //   const activeTabName = tabMap[activeTab];
-        //   switch (activeTabName) {
-        //     case 'img2img': {
-        //       dispatch(initialImageSelected(newImage.uuid));
-        //       // dispatch(setInitialImage(newImage));
-        //       break;
-        //     }
-        //   }
-        // }
+//         // TODO: fix
+//         // if (shouldLoopback) {
+//         //   const activeTabName = tabMap[activeTab];
+//         //   switch (activeTabName) {
+//         //     case 'img2img': {
+//         //       dispatch(initialImageSelected(newImage.uuid));
+//         //       // dispatch(setInitialImage(newImage));
+//         //       break;
+//         //     }
+//         //   }
+//         // }
 
-        dispatch(clearIntermediateImage());
+//         dispatch(clearIntermediateImage());
 
-        dispatch(
-          addLogEntry({
-            timestamp: dateFormat(new Date(), 'isoDateTime'),
-            message: `Image generated: ${data.url}`,
-          })
-        );
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    /**
-     * Callback to run when we receive a 'intermediateResult' event.
-     */
-    onIntermediateResult: (data: InvokeAI.ImageResultResponse) => {
-      try {
-        dispatch(
-          setIntermediateImage({
-            uuid: uuidv4(),
-            ...data,
-            category: 'result',
-          })
-        );
-        if (!data.isBase64) {
-          dispatch(
-            addLogEntry({
-              timestamp: dateFormat(new Date(), 'isoDateTime'),
-              message: `Intermediate image generated: ${data.url}`,
-            })
-          );
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    /**
-     * Callback to run when we receive an 'esrganResult' event.
-     */
-    onPostprocessingResult: (data: InvokeAI.ImageResultResponse) => {
-      try {
-        dispatch(
-          addImage({
-            category: 'result',
-            image: {
-              uuid: uuidv4(),
-              ...data,
-              category: 'result',
-            },
-          })
-        );
+//         dispatch(
+//           addLogEntry({
+//             timestamp: dateFormat(new Date(), 'isoDateTime'),
+//             message: `Image generated: ${data.url}`,
+//           })
+//         );
+//       } catch (e) {
+//         console.error(e);
+//       }
+//     },
+//     /**
+//      * Callback to run when we receive a 'intermediateResult' event.
+//      */
+//     onIntermediateResult: (data: InvokeAI.ImageResultResponse) => {
+//       try {
+//         dispatch(
+//           setIntermediateImage({
+//             uuid: uuidv4(),
+//             ...data,
+//             category: 'result',
+//           })
+//         );
+//         if (!data.isBase64) {
+//           dispatch(
+//             addLogEntry({
+//               timestamp: dateFormat(new Date(), 'isoDateTime'),
+//               message: `Intermediate image generated: ${data.url}`,
+//             })
+//           );
+//         }
+//       } catch (e) {
+//         console.error(e);
+//       }
+//     },
+//     /**
+//      * Callback to run when we receive an 'esrganResult' event.
+//      */
+//     onPostprocessingResult: (data: InvokeAI.ImageResultResponse) => {
+//       try {
+//         dispatch(
+//           addImage({
+//             category: 'result',
+//             image: {
+//               uuid: uuidv4(),
+//               ...data,
+//               category: 'result',
+//             },
+//           })
+//         );
 
-        dispatch(
-          addLogEntry({
-            timestamp: dateFormat(new Date(), 'isoDateTime'),
-            message: `Postprocessed: ${data.url}`,
-          })
-        );
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    /**
-     * Callback to run when we receive a 'progressUpdate' event.
-     * TODO: Add additional progress phases
-     */
-    onProgressUpdate: (data: InvokeAI.SystemStatus) => {
-      try {
-        dispatch(setIsProcessing(true));
-        dispatch(setSystemStatus(data));
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    /**
-     * Callback to run when we receive a 'progressUpdate' event.
-     */
-    onError: (data: InvokeAI.ErrorResponse) => {
-      const { message, additionalData } = data;
+//         dispatch(
+//           addLogEntry({
+//             timestamp: dateFormat(new Date(), 'isoDateTime'),
+//             message: `Postprocessed: ${data.url}`,
+//           })
+//         );
+//       } catch (e) {
+//         console.error(e);
+//       }
+//     },
+//     /**
+//      * Callback to run when we receive a 'progressUpdate' event.
+//      * TODO: Add additional progress phases
+//      */
+//     onProgressUpdate: (data: InvokeAI.SystemStatus) => {
+//       try {
+//         dispatch(setIsProcessing(true));
+//         dispatch(setSystemStatus(data));
+//       } catch (e) {
+//         console.error(e);
+//       }
+//     },
+//     /**
+//      * Callback to run when we receive a 'progressUpdate' event.
+//      */
+//     onError: (data: InvokeAI.ErrorResponse) => {
+//       const { message, additionalData } = data;
 
-      if (additionalData) {
-        // TODO: handle more data than short message
-      }
+//       if (additionalData) {
+//         // TODO: handle more data than short message
+//       }
 
-      try {
-        dispatch(
-          addLogEntry({
-            timestamp: dateFormat(new Date(), 'isoDateTime'),
-            message: `Server error: ${message}`,
-            level: 'error',
-          })
-        );
-        dispatch(errorOccurred());
-        dispatch(clearIntermediateImage());
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    /**
-     * Callback to run when we receive a 'galleryImages' event.
-     */
-    onGalleryImages: (data: InvokeAI.GalleryImagesResponse) => {
-      const { images, areMoreImagesAvailable, category } = data;
+//       try {
+//         dispatch(
+//           addLogEntry({
+//             timestamp: dateFormat(new Date(), 'isoDateTime'),
+//             message: `Server error: ${message}`,
+//             level: 'error',
+//           })
+//         );
+//         dispatch(errorOccurred());
+//         dispatch(clearIntermediateImage());
+//       } catch (e) {
+//         console.error(e);
+//       }
+//     },
+//     /**
+//      * Callback to run when we receive a 'galleryImages' event.
+//      */
+//     onGalleryImages: (data: InvokeAI.GalleryImagesResponse) => {
+//       const { images, areMoreImagesAvailable, category } = data;
 
-      /**
-       * the logic here ideally would be in the reducer but we have a side effect:
-       * generating a uuid. so the logic needs to be here, outside redux.
-       */
+//       /**
+//        * the logic here ideally would be in the reducer but we have a side effect:
+//        * generating a uuid. so the logic needs to be here, outside redux.
+//        */
 
-      // Generate a UUID for each image
-      const preparedImages = images.map((image): InvokeAI._Image => {
-        return {
-          uuid: uuidv4(),
-          ...image,
-        };
-      });
+//       // Generate a UUID for each image
+//       const preparedImages = images.map((image): InvokeAI._Image => {
+//         return {
+//           uuid: uuidv4(),
+//           ...image,
+//         };
+//       });
 
-      dispatch(
-        addGalleryImages({
-          images: preparedImages,
-          areMoreImagesAvailable,
-          category,
-        })
-      );
+//       dispatch(
+//         addGalleryImages({
+//           images: preparedImages,
+//           areMoreImagesAvailable,
+//           category,
+//         })
+//       );
 
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Loaded ${images.length} images`,
-        })
-      );
-    },
-    /**
-     * Callback to run when we receive a 'processingCanceled' event.
-     */
-    onProcessingCanceled: () => {
-      dispatch(processingCanceled());
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Loaded ${images.length} images`,
+//         })
+//       );
+//     },
+//     /**
+//      * Callback to run when we receive a 'processingCanceled' event.
+//      */
+//     onProcessingCanceled: () => {
+//       dispatch(processingCanceled());
 
-      const { intermediateImage } = getState().gallery;
+//       const { intermediateImage } = getState().gallery;
 
-      if (intermediateImage) {
-        if (!intermediateImage.isBase64) {
-          dispatch(
-            addImage({
-              category: 'result',
-              image: intermediateImage,
-            })
-          );
-          dispatch(
-            addLogEntry({
-              timestamp: dateFormat(new Date(), 'isoDateTime'),
-              message: `Intermediate image saved: ${intermediateImage.url}`,
-            })
-          );
-        }
-        dispatch(clearIntermediateImage());
-      }
+//       if (intermediateImage) {
+//         if (!intermediateImage.isBase64) {
+//           dispatch(
+//             addImage({
+//               category: 'result',
+//               image: intermediateImage,
+//             })
+//           );
+//           dispatch(
+//             addLogEntry({
+//               timestamp: dateFormat(new Date(), 'isoDateTime'),
+//               message: `Intermediate image saved: ${intermediateImage.url}`,
+//             })
+//           );
+//         }
+//         dispatch(clearIntermediateImage());
+//       }
 
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Processing canceled`,
-          level: 'warning',
-        })
-      );
-    },
-    /**
-     * Callback to run when we receive a 'imageDeleted' event.
-     */
-    onImageDeleted: (data: InvokeAI.ImageDeletedResponse) => {
-      const { url } = data;
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Processing canceled`,
+//           level: 'warning',
+//         })
+//       );
+//     },
+//     /**
+//      * Callback to run when we receive a 'imageDeleted' event.
+//      */
+//     onImageDeleted: (data: InvokeAI.ImageDeletedResponse) => {
+//       const { url } = data;
 
-      // remove image from gallery
-      dispatch(removeImage(data));
+//       // remove image from gallery
+//       dispatch(removeImage(data));
 
-      // remove references to image in options
-      const {
-        generation: { initialImage, maskPath },
-      } = getState();
+//       // remove references to image in options
+//       const {
+//         generation: { initialImage, maskPath },
+//       } = getState();
 
-      if (
-        initialImage === url ||
-        (initialImage as InvokeAI._Image)?.url === url
-      ) {
-        dispatch(clearInitialImage());
-      }
+//       if (
+//         initialImage === url ||
+//         (initialImage as InvokeAI._Image)?.url === url
+//       ) {
+//         dispatch(clearInitialImage());
+//       }
 
-      if (maskPath === url) {
-        dispatch(setMaskPath(''));
-      }
+//       if (maskPath === url) {
+//         dispatch(setMaskPath(''));
+//       }
 
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Image deleted: ${url}`,
-        })
-      );
-    },
-    onSystemConfig: (data: InvokeAI.SystemConfig) => {
-      dispatch(setSystemConfig(data));
-      if (!data.infill_methods.includes('patchmatch')) {
-        dispatch(setInfillMethod(data.infill_methods[0]));
-      }
-    },
-    onFoundModels: (data: InvokeAI.FoundModelResponse) => {
-      const { search_folder, found_models } = data;
-      dispatch(setSearchFolder(search_folder));
-      dispatch(setFoundModels(found_models));
-    },
-    onNewModelAdded: (data: InvokeAI.ModelAddedResponse) => {
-      const { new_model_name, model_list, update } = data;
-      dispatch(setModelList(model_list));
-      dispatch(setIsProcessing(false));
-      dispatch(setCurrentStatus(i18n.t('modelManager.modelAdded')));
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Model Added: ${new_model_name}`,
-          level: 'info',
-        })
-      );
-      dispatch(
-        addToast({
-          title: !update
-            ? `${i18n.t('modelManager.modelAdded')}: ${new_model_name}`
-            : `${i18n.t('modelManager.modelUpdated')}: ${new_model_name}`,
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        })
-      );
-    },
-    onModelDeleted: (data: InvokeAI.ModelDeletedResponse) => {
-      const { deleted_model_name, model_list } = data;
-      dispatch(setModelList(model_list));
-      dispatch(setIsProcessing(false));
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `${i18n.t(
-            'modelManager.modelAdded'
-          )}: ${deleted_model_name}`,
-          level: 'info',
-        })
-      );
-      dispatch(
-        addToast({
-          title: `${i18n.t(
-            'modelManager.modelEntryDeleted'
-          )}: ${deleted_model_name}`,
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        })
-      );
-    },
-    onModelConverted: (data: InvokeAI.ModelConvertedResponse) => {
-      const { converted_model_name, model_list } = data;
-      dispatch(setModelList(model_list));
-      dispatch(setCurrentStatus(i18n.t('common.statusModelConverted')));
-      dispatch(setIsProcessing(false));
-      dispatch(setIsCancelable(true));
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Model converted: ${converted_model_name}`,
-          level: 'info',
-        })
-      );
-      dispatch(
-        addToast({
-          title: `${i18n.t(
-            'modelManager.modelConverted'
-          )}: ${converted_model_name}`,
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        })
-      );
-    },
-    onModelsMerged: (data: InvokeAI.ModelsMergedResponse) => {
-      const { merged_models, merged_model_name, model_list } = data;
-      dispatch(setModelList(model_list));
-      dispatch(setCurrentStatus(i18n.t('common.statusMergedModels')));
-      dispatch(setIsProcessing(false));
-      dispatch(setIsCancelable(true));
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Models merged: ${merged_models}`,
-          level: 'info',
-        })
-      );
-      dispatch(
-        addToast({
-          title: `${i18n.t('modelManager.modelsMerged')}: ${merged_model_name}`,
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        })
-      );
-    },
-    onModelChanged: (data: InvokeAI.ModelChangeResponse) => {
-      const { model_name, model_list } = data;
-      dispatch(setModelList(model_list));
-      dispatch(setCurrentStatus(i18n.t('common.statusModelChanged')));
-      dispatch(setIsProcessing(false));
-      dispatch(setIsCancelable(true));
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Model changed: ${model_name}`,
-          level: 'info',
-        })
-      );
-    },
-    onModelChangeFailed: (data: InvokeAI.ModelChangeResponse) => {
-      const { model_name, model_list } = data;
-      dispatch(setModelList(model_list));
-      dispatch(setIsProcessing(false));
-      dispatch(setIsCancelable(true));
-      dispatch(errorOccurred());
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Model change failed: ${model_name}`,
-          level: 'error',
-        })
-      );
-    },
-    onTempFolderEmptied: () => {
-      dispatch(
-        addToast({
-          title: i18n.t('toast.tempFoldersEmptied'),
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        })
-      );
-    },
-  };
-};
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Image deleted: ${url}`,
+//         })
+//       );
+//     },
+//     onSystemConfig: (data: InvokeAI.SystemConfig) => {
+//       dispatch(setSystemConfig(data));
+//       if (!data.infill_methods.includes('patchmatch')) {
+//         dispatch(setInfillMethod(data.infill_methods[0]));
+//       }
+//     },
+//     onFoundModels: (data: InvokeAI.FoundModelResponse) => {
+//       const { search_folder, found_models } = data;
+//       dispatch(setSearchFolder(search_folder));
+//       dispatch(setFoundModels(found_models));
+//     },
+//     onNewModelAdded: (data: InvokeAI.ModelAddedResponse) => {
+//       const { new_model_name, model_list, update } = data;
+//       dispatch(setModelList(model_list));
+//       dispatch(setIsProcessing(false));
+//       dispatch(setCurrentStatus(i18n.t('modelManager.modelAdded')));
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Model Added: ${new_model_name}`,
+//           level: 'info',
+//         })
+//       );
+//       dispatch(
+//         addToast({
+//           title: !update
+//             ? `${i18n.t('modelManager.modelAdded')}: ${new_model_name}`
+//             : `${i18n.t('modelManager.modelUpdated')}: ${new_model_name}`,
+//           status: 'success',
+//           duration: 2500,
+//           isClosable: true,
+//         })
+//       );
+//     },
+//     onModelDeleted: (data: InvokeAI.ModelDeletedResponse) => {
+//       const { deleted_model_name, model_list } = data;
+//       dispatch(setModelList(model_list));
+//       dispatch(setIsProcessing(false));
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `${i18n.t(
+//             'modelManager.modelAdded'
+//           )}: ${deleted_model_name}`,
+//           level: 'info',
+//         })
+//       );
+//       dispatch(
+//         addToast({
+//           title: `${i18n.t(
+//             'modelManager.modelEntryDeleted'
+//           )}: ${deleted_model_name}`,
+//           status: 'success',
+//           duration: 2500,
+//           isClosable: true,
+//         })
+//       );
+//     },
+//     onModelConverted: (data: InvokeAI.ModelConvertedResponse) => {
+//       const { converted_model_name, model_list } = data;
+//       dispatch(setModelList(model_list));
+//       dispatch(setCurrentStatus(i18n.t('common.statusModelConverted')));
+//       dispatch(setIsProcessing(false));
+//       dispatch(setIsCancelable(true));
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Model converted: ${converted_model_name}`,
+//           level: 'info',
+//         })
+//       );
+//       dispatch(
+//         addToast({
+//           title: `${i18n.t(
+//             'modelManager.modelConverted'
+//           )}: ${converted_model_name}`,
+//           status: 'success',
+//           duration: 2500,
+//           isClosable: true,
+//         })
+//       );
+//     },
+//     onModelsMerged: (data: InvokeAI.ModelsMergedResponse) => {
+//       const { merged_models, merged_model_name, model_list } = data;
+//       dispatch(setModelList(model_list));
+//       dispatch(setCurrentStatus(i18n.t('common.statusMergedModels')));
+//       dispatch(setIsProcessing(false));
+//       dispatch(setIsCancelable(true));
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Models merged: ${merged_models}`,
+//           level: 'info',
+//         })
+//       );
+//       dispatch(
+//         addToast({
+//           title: `${i18n.t('modelManager.modelsMerged')}: ${merged_model_name}`,
+//           status: 'success',
+//           duration: 2500,
+//           isClosable: true,
+//         })
+//       );
+//     },
+//     onModelChanged: (data: InvokeAI.ModelChangeResponse) => {
+//       const { model_name, model_list } = data;
+//       dispatch(setModelList(model_list));
+//       dispatch(setCurrentStatus(i18n.t('common.statusModelChanged')));
+//       dispatch(setIsProcessing(false));
+//       dispatch(setIsCancelable(true));
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Model changed: ${model_name}`,
+//           level: 'info',
+//         })
+//       );
+//     },
+//     onModelChangeFailed: (data: InvokeAI.ModelChangeResponse) => {
+//       const { model_name, model_list } = data;
+//       dispatch(setModelList(model_list));
+//       dispatch(setIsProcessing(false));
+//       dispatch(setIsCancelable(true));
+//       dispatch(errorOccurred());
+//       dispatch(
+//         addLogEntry({
+//           timestamp: dateFormat(new Date(), 'isoDateTime'),
+//           message: `Model change failed: ${model_name}`,
+//           level: 'error',
+//         })
+//       );
+//     },
+//     onTempFolderEmptied: () => {
+//       dispatch(
+//         addToast({
+//           title: i18n.t('toast.tempFoldersEmptied'),
+//           status: 'success',
+//           duration: 2500,
+//           isClosable: true,
+//         })
+//       );
+//     },
+//   };
+// };
 
-export default makeSocketIOListeners;
+// export default makeSocketIOListeners;
+
+export default {};

invokeai/frontend/web/src/app/socketio/middleware.ts

@@ -1,246 +1,248 @@
-import { Middleware } from '@reduxjs/toolkit';
-import { io } from 'socket.io-client';
+// import { Middleware } from '@reduxjs/toolkit';
+// import { io } from 'socket.io-client';
 
-import makeSocketIOEmitters from './emitters';
-import makeSocketIOListeners from './listeners';
+// import makeSocketIOEmitters from './emitters';
+// import makeSocketIOListeners from './listeners';
 
-import * as InvokeAI from 'app/invokeai';
+// import * as InvokeAI from 'app/types/invokeai';
 
-/**
- * Creates a socketio middleware to handle communication with server.
- *
- * Special `socketio/actionName` actions are created in actions.ts and
- * exported for use by the application, which treats them like any old
- * action, using `dispatch` to dispatch them.
- *
- * These actions are intercepted here, where `socketio.emit()` calls are
- * made on their behalf - see `emitters.ts`. The emitter functions
- * are the outbound communication to the server.
- *
- * Listeners are also established here - see `listeners.ts`. The listener
- * functions receive communication from the server and usually dispatch
- * some new action to handle whatever data was sent from the server.
- */
-export const socketioMiddleware = () => {
-  const { origin } = new URL(window.location.href);
+// /**
+//  * Creates a socketio middleware to handle communication with server.
+//  *
+//  * Special `socketio/actionName` actions are created in actions.ts and
+//  * exported for use by the application, which treats them like any old
+//  * action, using `dispatch` to dispatch them.
+//  *
+//  * These actions are intercepted here, where `socketio.emit()` calls are
+//  * made on their behalf - see `emitters.ts`. The emitter functions
+//  * are the outbound communication to the server.
+//  *
+//  * Listeners are also established here - see `listeners.ts`. The listener
+//  * functions receive communication from the server and usually dispatch
+//  * some new action to handle whatever data was sent from the server.
+//  */
+// export const socketioMiddleware = () => {
+//   const { origin } = new URL(window.location.href);
 
-  const socketio = io(origin, {
-    timeout: 60000,
-    path: `${window.location.pathname}socket.io`,
-  });
+//   const socketio = io(origin, {
+//     timeout: 60000,
+//     path: `${window.location.pathname}socket.io`,
+//   });
 
-  socketio.disconnect();
+//   socketio.disconnect();
 
-  let areListenersSet = false;
+//   let areListenersSet = false;
 
-  const middleware: Middleware = (store) => (next) => (action) => {
-    const {
-      onConnect,
-      onDisconnect,
-      onError,
-      onPostprocessingResult,
-      onGenerationResult,
-      onIntermediateResult,
-      onProgressUpdate,
-      onGalleryImages,
-      onProcessingCanceled,
-      onImageDeleted,
-      onSystemConfig,
-      onModelChanged,
-      onFoundModels,
-      onNewModelAdded,
-      onModelDeleted,
-      onModelConverted,
-      onModelsMerged,
-      onModelChangeFailed,
-      onTempFolderEmptied,
-    } = makeSocketIOListeners(store);
+//   const middleware: Middleware = (store) => (next) => (action) => {
+//     const {
+//       onConnect,
+//       onDisconnect,
+//       onError,
+//       onPostprocessingResult,
+//       onGenerationResult,
+//       onIntermediateResult,
+//       onProgressUpdate,
+//       onGalleryImages,
+//       onProcessingCanceled,
+//       onImageDeleted,
+//       onSystemConfig,
+//       onModelChanged,
+//       onFoundModels,
+//       onNewModelAdded,
+//       onModelDeleted,
+//       onModelConverted,
+//       onModelsMerged,
+//       onModelChangeFailed,
+//       onTempFolderEmptied,
+//     } = makeSocketIOListeners(store);
 
-    const {
-      emitGenerateImage,
-      emitRunESRGAN,
-      emitRunFacetool,
-      emitDeleteImage,
-      emitRequestImages,
-      emitRequestNewImages,
-      emitCancelProcessing,
-      emitRequestSystemConfig,
-      emitSearchForModels,
-      emitAddNewModel,
-      emitDeleteModel,
-      emitConvertToDiffusers,
-      emitMergeDiffusersModels,
-      emitRequestModelChange,
-      emitSaveStagingAreaImageToGallery,
-      emitRequestEmptyTempFolder,
-    } = makeSocketIOEmitters(store, socketio);
+//     const {
+//       emitGenerateImage,
+//       emitRunESRGAN,
+//       emitRunFacetool,
+//       emitDeleteImage,
+//       emitRequestImages,
+//       emitRequestNewImages,
+//       emitCancelProcessing,
+//       emitRequestSystemConfig,
+//       emitSearchForModels,
+//       emitAddNewModel,
+//       emitDeleteModel,
+//       emitConvertToDiffusers,
+//       emitMergeDiffusersModels,
+//       emitRequestModelChange,
+//       emitSaveStagingAreaImageToGallery,
+//       emitRequestEmptyTempFolder,
+//     } = makeSocketIOEmitters(store, socketio);
 
-    /**
-     * If this is the first time the middleware has been called (e.g. during store setup),
-     * initialize all our socket.io listeners.
-     */
-    if (!areListenersSet) {
-      socketio.on('connect', () => onConnect());
+//     /**
+//      * If this is the first time the middleware has been called (e.g. during store setup),
+//      * initialize all our socket.io listeners.
+//      */
+//     if (!areListenersSet) {
+//       socketio.on('connect', () => onConnect());
 
-      socketio.on('disconnect', () => onDisconnect());
+//       socketio.on('disconnect', () => onDisconnect());
 
-      socketio.on('error', (data: InvokeAI.ErrorResponse) => onError(data));
+//       socketio.on('error', (data: InvokeAI.ErrorResponse) => onError(data));
 
-      socketio.on('generationResult', (data: InvokeAI.ImageResultResponse) =>
-        onGenerationResult(data)
-      );
+//       socketio.on('generationResult', (data: InvokeAI.ImageResultResponse) =>
+//         onGenerationResult(data)
+//       );
 
-      socketio.on(
-        'postprocessingResult',
-        (data: InvokeAI.ImageResultResponse) => onPostprocessingResult(data)
-      );
+//       socketio.on(
+//         'postprocessingResult',
+//         (data: InvokeAI.ImageResultResponse) => onPostprocessingResult(data)
+//       );
 
-      socketio.on('intermediateResult', (data: InvokeAI.ImageResultResponse) =>
-        onIntermediateResult(data)
-      );
+//       socketio.on('intermediateResult', (data: InvokeAI.ImageResultResponse) =>
+//         onIntermediateResult(data)
+//       );
 
-      socketio.on('progressUpdate', (data: InvokeAI.SystemStatus) =>
-        onProgressUpdate(data)
-      );
+//       socketio.on('progressUpdate', (data: InvokeAI.SystemStatus) =>
+//         onProgressUpdate(data)
+//       );
 
-      socketio.on('galleryImages', (data: InvokeAI.GalleryImagesResponse) =>
-        onGalleryImages(data)
-      );
+//       socketio.on('galleryImages', (data: InvokeAI.GalleryImagesResponse) =>
+//         onGalleryImages(data)
+//       );
 
-      socketio.on('processingCanceled', () => {
-        onProcessingCanceled();
-      });
+//       socketio.on('processingCanceled', () => {
+//         onProcessingCanceled();
+//       });
 
-      socketio.on('imageDeleted', (data: InvokeAI.ImageDeletedResponse) => {
-        onImageDeleted(data);
-      });
+//       socketio.on('imageDeleted', (data: InvokeAI.ImageDeletedResponse) => {
+//         onImageDeleted(data);
+//       });
 
-      socketio.on('systemConfig', (data: InvokeAI.SystemConfig) => {
-        onSystemConfig(data);
-      });
+//       socketio.on('systemConfig', (data: InvokeAI.SystemConfig) => {
+//         onSystemConfig(data);
+//       });
 
-      socketio.on('foundModels', (data: InvokeAI.FoundModelResponse) => {
-        onFoundModels(data);
-      });
+//       socketio.on('foundModels', (data: InvokeAI.FoundModelResponse) => {
+//         onFoundModels(data);
+//       });
 
-      socketio.on('newModelAdded', (data: InvokeAI.ModelAddedResponse) => {
-        onNewModelAdded(data);
-      });
+//       socketio.on('newModelAdded', (data: InvokeAI.ModelAddedResponse) => {
+//         onNewModelAdded(data);
+//       });
 
-      socketio.on('modelDeleted', (data: InvokeAI.ModelDeletedResponse) => {
-        onModelDeleted(data);
-      });
+//       socketio.on('modelDeleted', (data: InvokeAI.ModelDeletedResponse) => {
+//         onModelDeleted(data);
+//       });
 
-      socketio.on('modelConverted', (data: InvokeAI.ModelConvertedResponse) => {
-        onModelConverted(data);
-      });
+//       socketio.on('modelConverted', (data: InvokeAI.ModelConvertedResponse) => {
+//         onModelConverted(data);
+//       });
 
-      socketio.on('modelsMerged', (data: InvokeAI.ModelsMergedResponse) => {
-        onModelsMerged(data);
-      });
+//       socketio.on('modelsMerged', (data: InvokeAI.ModelsMergedResponse) => {
+//         onModelsMerged(data);
+//       });
 
-      socketio.on('modelChanged', (data: InvokeAI.ModelChangeResponse) => {
-        onModelChanged(data);
-      });
+//       socketio.on('modelChanged', (data: InvokeAI.ModelChangeResponse) => {
+//         onModelChanged(data);
+//       });
 
-      socketio.on('modelChangeFailed', (data: InvokeAI.ModelChangeResponse) => {
-        onModelChangeFailed(data);
-      });
+//       socketio.on('modelChangeFailed', (data: InvokeAI.ModelChangeResponse) => {
+//         onModelChangeFailed(data);
+//       });
 
-      socketio.on('tempFolderEmptied', () => {
-        onTempFolderEmptied();
-      });
+//       socketio.on('tempFolderEmptied', () => {
+//         onTempFolderEmptied();
+//       });
 
-      areListenersSet = true;
-    }
+//       areListenersSet = true;
+//     }
 
-    /**
-     * Handle redux actions caught by middleware.
-     */
-    switch (action.type) {
-      case 'socketio/generateImage': {
-        emitGenerateImage(action.payload);
-        break;
-      }
+//     /**
+//      * Handle redux actions caught by middleware.
+//      */
+//     switch (action.type) {
+//       case 'socketio/generateImage': {
+//         emitGenerateImage(action.payload);
+//         break;
+//       }
 
-      case 'socketio/runESRGAN': {
-        emitRunESRGAN(action.payload);
-        break;
-      }
+//       case 'socketio/runESRGAN': {
+//         emitRunESRGAN(action.payload);
+//         break;
+//       }
 
-      case 'socketio/runFacetool': {
-        emitRunFacetool(action.payload);
-        break;
-      }
+//       case 'socketio/runFacetool': {
+//         emitRunFacetool(action.payload);
+//         break;
+//       }
 
-      case 'socketio/deleteImage': {
-        emitDeleteImage(action.payload);
-        break;
-      }
+//       case 'socketio/deleteImage': {
+//         emitDeleteImage(action.payload);
+//         break;
+//       }
 
-      case 'socketio/requestImages': {
-        emitRequestImages(action.payload);
-        break;
-      }
+//       case 'socketio/requestImages': {
+//         emitRequestImages(action.payload);
+//         break;
+//       }
 
-      case 'socketio/requestNewImages': {
-        emitRequestNewImages(action.payload);
-        break;
-      }
+//       case 'socketio/requestNewImages': {
+//         emitRequestNewImages(action.payload);
+//         break;
+//       }
 
-      case 'socketio/cancelProcessing': {
-        emitCancelProcessing();
-        break;
-      }
+//       case 'socketio/cancelProcessing': {
+//         emitCancelProcessing();
+//         break;
+//       }
 
-      case 'socketio/requestSystemConfig': {
-        emitRequestSystemConfig();
-        break;
-      }
+//       case 'socketio/requestSystemConfig': {
+//         emitRequestSystemConfig();
+//         break;
+//       }
 
-      case 'socketio/searchForModels': {
-        emitSearchForModels(action.payload);
-        break;
-      }
+//       case 'socketio/searchForModels': {
+//         emitSearchForModels(action.payload);
+//         break;
+//       }
 
-      case 'socketio/addNewModel': {
-        emitAddNewModel(action.payload);
-        break;
-      }
+//       case 'socketio/addNewModel': {
+//         emitAddNewModel(action.payload);
+//         break;
+//       }
 
-      case 'socketio/deleteModel': {
-        emitDeleteModel(action.payload);
-        break;
-      }
+//       case 'socketio/deleteModel': {
+//         emitDeleteModel(action.payload);
+//         break;
+//       }
 
-      case 'socketio/convertToDiffusers': {
-        emitConvertToDiffusers(action.payload);
-        break;
-      }
+//       case 'socketio/convertToDiffusers': {
+//         emitConvertToDiffusers(action.payload);
+//         break;
+//       }
 
-      case 'socketio/mergeDiffusersModels': {
-        emitMergeDiffusersModels(action.payload);
-        break;
-      }
+//       case 'socketio/mergeDiffusersModels': {
+//         emitMergeDiffusersModels(action.payload);
+//         break;
+//       }
 
-      case 'socketio/requestModelChange': {
-        emitRequestModelChange(action.payload);
-        break;
-      }
+//       case 'socketio/requestModelChange': {
+//         emitRequestModelChange(action.payload);
+//         break;
+//       }
 
-      case 'socketio/saveStagingAreaImageToGallery': {
-        emitSaveStagingAreaImageToGallery(action.payload);
-        break;
-      }
+//       case 'socketio/saveStagingAreaImageToGallery': {
+//         emitSaveStagingAreaImageToGallery(action.payload);
+//         break;
+//       }
 
-      case 'socketio/requestEmptyTempFolder': {
-        emitRequestEmptyTempFolder();
-        break;
-      }
-    }
+//       case 'socketio/requestEmptyTempFolder': {
+//         emitRequestEmptyTempFolder();
+//         break;
+//       }
+//     }
 
-    next(action);
-  };
+//     next(action);
+//   };
 
-  return middleware;
-};
+//   return middleware;
+// };
+
+export default {};

invokeai/frontend/web/src/app/store/persistor.ts

@@ -1,4 +1,4 @@
-import { store } from 'app/store';
+import { store } from 'app/store/store';
 import { persistStore } from 'redux-persist';
 
 export const persistor = persistStore(store);

invokeai/frontend/web/src/app/store/store.ts

@@ -19,8 +19,6 @@ import hotkeysReducer from 'features/ui/store/hotkeysSlice';
 import modelsReducer from 'features/system/store/modelSlice';
 import nodesReducer from 'features/nodes/store/nodesSlice';
 
-import { socketioMiddleware } from './socketio/middleware';
-import { socketMiddleware } from 'services/events/middleware';
 import { canvasDenylist } from 'features/canvas/store/canvasPersistDenylist';
 import { galleryDenylist } from 'features/gallery/store/galleryPersistDenylist';
 import { generationDenylist } from 'features/parameters/store/generationPersistDenylist';
@@ -28,8 +26,10 @@ import { lightboxDenylist } from 'features/lightbox/store/lightboxPersistDenylis
 import { modelsDenylist } from 'features/system/store/modelsPersistDenylist';
 import { nodesDenylist } from 'features/nodes/store/nodesPersistDenylist';
 import { postprocessingDenylist } from 'features/parameters/store/postprocessingPersistDenylist';
-import { systemDenylist } from 'features/system/store/systemPersistsDenylist';
+import { systemDenylist } from 'features/system/store/systemPersistDenylist';
 import { uiDenylist } from 'features/ui/store/uiPersistDenylist';
+import { resultsDenylist } from 'features/gallery/store/resultsPersistDenylist';
+import { uploadsDenylist } from 'features/gallery/store/uploadsPersistDenylist';
 
 /**
  * redux-persist provides an easy and reliable way to persist state across reloads.
@@ -82,19 +82,18 @@ const rootPersistConfig = getPersistConfig({
     'hotkeys',
     'config',
   ],
-  debounce: 300,
 });
 
 const persistedReducer = persistReducer(rootPersistConfig, rootReducer);
 
 // TODO: rip the old middleware out when nodes is complete
-export function buildMiddleware() {
-  if (import.meta.env.MODE === 'nodes' || import.meta.env.MODE === 'package') {
-    return socketMiddleware();
-  } else {
-    return socketioMiddleware();
-  }
-}
+// export function buildMiddleware() {
+//   if (import.meta.env.MODE === 'nodes' || import.meta.env.MODE === 'package') {
+//     return socketMiddleware();
+//   } else {
+//     return socketioMiddleware();
+//   }
+// }
 
 export const store = configureStore({
   reducer: persistedReducer,
@@ -114,6 +113,7 @@ export const store = configureStore({
       'canvas/setBoundingBoxDimensions',
       'canvas/setIsDrawing',
       'canvas/addPointToCurrentLine',
+      'socket/generatorProgress',
     ],
   },
 });

invokeai/frontend/web/src/app/store/storeHooks.ts

@@ -1,5 +1,5 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState } from './store';
+import { AppDispatch, RootState } from 'app/store/store';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch;

invokeai/frontend/web/src/app/store/storeUtils.ts

@@ -1,5 +1,5 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import { AppDispatch, RootState } from './store';
+import { AppDispatch, RootState } from 'app/store/store';
 
 // https://redux-toolkit.js.org/usage/usage-with-typescript#defining-a-pre-typed-createasyncthunk
 export const createAppAsyncThunk = createAsyncThunk.withTypes<{

invokeai/frontend/web/src/app/types/invokeai.ts

@@ -12,10 +12,11 @@
  * 'gfpgan'.
  */
 
+import { GalleryCategory } from 'features/gallery/store/gallerySlice';
 import { FacetoolType } from 'features/parameters/store/postprocessingSlice';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 import { IRect } from 'konva/lib/types';
-import { ImageMetadata, ImageType } from 'services/api';
+import { ImageResponseMetadata, ImageType } from 'services/api';
 import { AnyInvocation } from 'services/events/types';
 import { O } from 'ts-toolbelt';
 
@@ -28,24 +29,24 @@ import { O } from 'ts-toolbelt';
  * TODO: Better documentation of types.
  */
 
-export declare type PromptItem = {
+export type PromptItem = {
   prompt: string;
   weight: number;
 };
 
 // TECHDEBT: We need to retain compatibility with plain prompt strings and the structure Prompt type
-export declare type Prompt = Array<PromptItem> | string;
+export type Prompt = Array<PromptItem> | string;
 
-export declare type SeedWeightPair = {
+export type SeedWeightPair = {
   seed: number;
   weight: number;
 };
 
-export declare type SeedWeights = Array<SeedWeightPair>;
+export type SeedWeights = Array<SeedWeightPair>;
 
 // All generated images contain these metadata.
-export declare type CommonGeneratedImageMetadata = {
-  postprocessing: null | Array<ESRGANMetadata | GFPGANMetadata>;
+export type CommonGeneratedImageMetadata = {
+  postprocessing: null | Array<ESRGANMetadata | FacetoolMetadata>;
   sampler:
     | 'ddim'
     | 'k_dpm_2_a'
@@ -70,11 +71,11 @@ export declare type CommonGeneratedImageMetadata = {
 };
 
 // txt2img and img2img images have some unique attributes.
-export declare type Txt2ImgMetadata = GeneratedImageMetadata & {
+export type Txt2ImgMetadata = CommonGeneratedImageMetadata & {
   type: 'txt2img';
 };
 
-export declare type Img2ImgMetadata = GeneratedImageMetadata & {
+export type Img2ImgMetadata = CommonGeneratedImageMetadata & {
   type: 'img2img';
   orig_hash: string;
   strength: number;
@@ -84,102 +85,80 @@ export declare type Img2ImgMetadata = GeneratedImageMetadata & {
 };
 
 // Superset of  generated image metadata types.
-export declare type GeneratedImageMetadata = Txt2ImgMetadata | Img2ImgMetadata;
+export type GeneratedImageMetadata = Txt2ImgMetadata | Img2ImgMetadata;
 
 // All post processed images contain these metadata.
-export declare type CommonPostProcessedImageMetadata = {
+export type CommonPostProcessedImageMetadata = {
   orig_path: string;
   orig_hash: string;
 };
 
 // esrgan and gfpgan images have some unique attributes.
-export declare type ESRGANMetadata = CommonPostProcessedImageMetadata & {
+export type ESRGANMetadata = CommonPostProcessedImageMetadata & {
   type: 'esrgan';
   scale: 2 | 4;
   strength: number;
   denoise_str: number;
 };
 
-export declare type FacetoolMetadata = CommonPostProcessedImageMetadata & {
+export type FacetoolMetadata = CommonPostProcessedImageMetadata & {
   type: 'gfpgan' | 'codeformer';
   strength: number;
   fidelity?: number;
 };
 
 // Superset of all postprocessed image metadata types..
-export declare type PostProcessedImageMetadata =
-  | ESRGANMetadata
-  | FacetoolMetadata;
+export type PostProcessedImageMetadata = ESRGANMetadata | FacetoolMetadata;
 
 // Metadata includes the system config and image metadata.
-export declare type Metadata = SystemGenerationMetadata & {
-  image: GeneratedImageMetadata | PostProcessedImageMetadata;
-};
-
-// An Image has a UUID, url, modified timestamp, width, height and maybe metadata
-export declare type _Image = {
-  uuid: string;
-  url: string;
-  thumbnail: string;
-  mtime: number;
-  metadata?: Metadata;
-  width: number;
-  height: number;
-  category: GalleryCategory;
-  isBase64?: boolean;
-  dreamPrompt?: 'string';
-  name?: string;
-};
+// export type Metadata = SystemGenerationMetadata & {
+//   image: GeneratedImageMetadata | PostProcessedImageMetadata;
+// };
 
 /**
  * ResultImage
  */
-export declare type Image = {
+export type Image = {
   name: string;
   type: ImageType;
   url: string;
   thumbnail: string;
-  metadata: ImageMetadata;
-};
-
-// GalleryImages is an array of Image.
-export declare type GalleryImages = {
-  images: Array<_Image>;
+  metadata: ImageResponseMetadata;
 };
 
 /**
  * Types related to the system status.
  */
 
-// This represents the processing status of the backend.
-export declare type SystemStatus = {
-  isProcessing: boolean;
-  currentStep: number;
-  totalSteps: number;
-  currentIteration: number;
-  totalIterations: number;
-  currentStatus: string;
-  currentStatusHasSteps: boolean;
-  hasError: boolean;
-};
+// // This represents the processing status of the backend.
+// export type SystemStatus = {
+//   isProcessing: boolean;
+//   currentStep: number;
+//   totalSteps: number;
+//   currentIteration: number;
+//   totalIterations: number;
+//   currentStatus: string;
+//   currentStatusHasSteps: boolean;
+//   hasError: boolean;
+// };
 
-export declare type SystemGenerationMetadata = {
-  model: string;
-  model_weights?: string;
-  model_id?: string;
-  model_hash: string;
-  app_id: string;
-  app_version: string;
-};
+// export type SystemGenerationMetadata = {
+//   model: string;
+//   model_weights?: string;
+//   model_id?: string;
+//   model_hash: string;
+//   app_id: string;
+//   app_version: string;
+// };
 
-export declare type SystemConfig = SystemGenerationMetadata & {
-  model_list: ModelList;
-  infill_methods: string[];
-};
+// export type SystemConfig = SystemGenerationMetadata & {
+//   model_list: ModelList;
+//   infill_methods: string[];
+// };
 
-export declare type ModelStatus = 'active' | 'cached' | 'not loaded';
+export type ModelStatus = 'active' | 'cached' | 'not loaded';
 
-export declare type Model = {
+export type Model = {
   status: ModelStatus;
   description: string;
   weights: string;
@@ -191,7 +170,7 @@ export declare type Model = {
   format?: string;
 };
 
-export declare type DiffusersModel = {
+export type DiffusersModel = {
   status: ModelStatus;
   description: string;
   repo_id?: string;
@@ -204,14 +183,14 @@ export declare type DiffusersModel = {
   default?: boolean;
 };
 
-export declare type ModelList = Record<string, Model & DiffusersModel>;
+export type ModelList = Record<string, Model & DiffusersModel>;
 
-export declare type FoundModel = {
+export type FoundModel = {
   name: string;
   location: string;
 };
 
-export declare type InvokeModelConfigProps = {
+export type InvokeModelConfigProps = {
   name: string | undefined;
   description: string | undefined;
   config: string | undefined;
@@ -223,7 +202,7 @@ export declare type InvokeModelConfigProps = {
   format: string | undefined;
 };
 
-export declare type InvokeDiffusersModelConfigProps = {
+export type InvokeDiffusersModelConfigProps = {
   name: string | undefined;
   description: string | undefined;
   repo_id: string | undefined;
@@ -236,13 +215,13 @@ export declare type InvokeDiffusersModelConfigProps = {
   };
 };
 
-export declare type InvokeModelConversionProps = {
+export type InvokeModelConversionProps = {
   model_name: string;
   save_location: string;
   custom_location: string | null;
 };
 
-export declare type InvokeModelMergingProps = {
+export type InvokeModelMergingProps = {
   models_to_merge: string[];
   alpha: number;
   interp: 'weighted_sum' | 'sigmoid' | 'inv_sigmoid' | 'add_difference';
@@ -255,48 +234,48 @@ export declare type InvokeModelMergingProps = {
  * These types type data received from the server via socketio.
  */
 
-export declare type ModelChangeResponse = {
+export type ModelChangeResponse = {
   model_name: string;
   model_list: ModelList;
 };
 
-export declare type ModelConvertedResponse = {
+export type ModelConvertedResponse = {
   converted_model_name: string;
   model_list: ModelList;
 };
 
-export declare type ModelsMergedResponse = {
+export type ModelsMergedResponse = {
   merged_models: string[];
   merged_model_name: string;
   model_list: ModelList;
 };
 
-export declare type ModelAddedResponse = {
+export type ModelAddedResponse = {
   new_model_name: string;
   model_list: ModelList;
   update: boolean;
 };
 
-export declare type ModelDeletedResponse = {
+export type ModelDeletedResponse = {
   deleted_model_name: string;
   model_list: ModelList;
 };
 
-export declare type FoundModelResponse = {
+export type FoundModelResponse = {
   search_folder: string;
   found_models: FoundModel[];
 };
 
-export declare type SystemStatusResponse = SystemStatus;
+// export type SystemStatusResponse = SystemStatus;
 
-export declare type SystemConfigResponse = SystemConfig;
+// export type SystemConfigResponse = SystemConfig;
 
-export declare type ImageResultResponse = Omit<_Image, 'uuid'> & {
+export type ImageResultResponse = Omit<_Image, 'uuid'> & {
   boundingBox?: IRect;
   generationMode: InvokeTabName;
 };
 
-export declare type ImageUploadResponse = {
+export type ImageUploadResponse = {
   // image: Omit<Image, 'uuid' | 'metadata' | 'category'>;
   url: string;
   mtime: number;
@@ -306,33 +285,16 @@ export declare type ImageUploadResponse = {
   // bbox: [number, number, number, number];
 };
 
-export declare type ErrorResponse = {
+export type ErrorResponse = {
   message: string;
   additionalData?: string;
 };
 
-export declare type GalleryImagesResponse = {
-  images: Array<Omit<_Image, 'uuid'>>;
-  areMoreImagesAvailable: boolean;
-  category: GalleryCategory;
-};
-
-export declare type ImageDeletedResponse = {
-  uuid: string;
-  url: string;
-  category: GalleryCategory;
-};
-
-export declare type ImageUrlResponse = {
+export type ImageUrlResponse = {
   url: string;
 };
 
-export declare type UploadImagePayload = {
-  file: File;
-  destination?: ImageUploadDestination;
-};
-
-export declare type UploadOutpaintingMergeImagePayload = {
+export type UploadOutpaintingMergeImagePayload = {
   dataURL: string;
   name: string;
 };
@@ -340,7 +302,7 @@ export declare type UploadOutpaintingMergeImagePayload = {
 /**
  * A disable-able application feature
  */
-export declare type AppFeature =
+export type AppFeature =
   | 'faceRestore'
   | 'upscaling'
   | 'lightbox'
@@ -353,7 +315,7 @@ export declare type AppFeature =
 /**
  * A disable-able Stable Diffusion feature
  */
-export declare type StableDiffusionFeature =
+export type StableDiffusionFeature =
   | 'noiseConfig'
   | 'variations'
   | 'symmetry'
@@ -364,7 +326,7 @@ export declare type StableDiffusionFeature =
  * Configuration options for the InvokeAI UI.
  * Distinct from system settings which may be changed inside the app.
  */
-export declare type AppConfig = {
+export type AppConfig = {
   /**
    * Whether or not URLs should be transformed to use a different host
    */
@@ -428,4 +390,4 @@ export declare type AppConfig = {
   };
 };
 
-export declare type PartialAppConfig = O.Partial<AppConfig, 'deep'>;
+export type PartialAppConfig = O.Partial<AppConfig, 'deep'>;

invokeai/frontend/web/src/app/utils.ts

@@ -1,25 +0,0 @@
-export function keepGUIAlive() {
-  async function getRequest(url = '') {
-    const response = await fetch(url, {
-      method: 'GET',
-      cache: 'no-cache',
-    });
-    return response;
-  }
-
-  const keepAliveServer = () => {
-    const url = document.location;
-    const route = '/flaskwebgui-keep-server-alive';
-    getRequest(url + route).then((data) => {
-      return data;
-    });
-  };
-
-  if (!import.meta.env.NODE_ENV || import.meta.env.NODE_ENV === 'production') {
-    document.addEventListener('DOMContentLoaded', () => {
-      const intervalRequest = 3 * 1000;
-      keepAliveServer();
-      setInterval(keepAliveServer, intervalRequest);
-    });
-  }
-}

invokeai/frontend/web/src/common/components/GuidePopover.tsx

@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { Feature, useFeatureHelpInfo } from 'app/features';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { SystemState } from 'features/system/store/systemSlice';
 import { memo, ReactElement } from 'react';

invokeai/frontend/web/src/common/components/IAINumberInput.tsx

@@ -14,7 +14,7 @@ import {
   Tooltip,
   TooltipProps,
 } from '@chakra-ui/react';
-import { clamp } from 'lodash';
+import { clamp } from 'lodash-es';
 
 import { FocusEvent, memo, useEffect, useState } from 'react';
 

invokeai/frontend/web/src/common/components/IAISelect.tsx

@@ -16,13 +16,23 @@ type IAISelectProps = SelectProps & {
   validValues:
     | Array<number | string>
     | Array<{ key: string; value: string | number }>;
+  horizontal?: boolean;
+  spaceEvenly?: boolean;
 };
 /**
  * Customized Chakra FormControl + Select multi-part component.
  */
 const IAISelect = (props: IAISelectProps) => {
-  const { label, isDisabled, validValues, tooltip, tooltipProps, ...rest } =
-    props;
+  const {
+    label,
+    isDisabled,
+    validValues,
+    tooltip,
+    tooltipProps,
+    horizontal,
+    spaceEvenly,
+    ...rest
+  } = props;
   return (
     <FormControl
       isDisabled={isDisabled}
@@ -32,10 +42,28 @@ const IAISelect = (props: IAISelectProps) => {
         e.nativeEvent.stopPropagation();
         e.nativeEvent.cancelBubble = true;
       }}
+      sx={
+        horizontal
+          ? {
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 4,
+            }
+          : {}
+      }
     >
-      {label && <FormLabel>{label}</FormLabel>}
+      {label && (
+        <FormLabel sx={spaceEvenly ? { flexBasis: 0, flexGrow: 1 } : {}}>
+          {label}
+        </FormLabel>
+      )}
       <Tooltip label={tooltip} {...tooltipProps}>
-        <Select {...rest}>
+        <Select
+          {...rest}
+          rootProps={{ sx: spaceEvenly ? { flexBasis: 0, flexGrow: 1 } : {} }}
+        >
           {validValues.map((opt) => {
             return typeof opt === 'string' || typeof opt === 'number' ? (
               <IAIOption key={opt} value={opt}>

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -23,7 +23,7 @@ import {
   Tooltip,
   TooltipProps,
 } from '@chakra-ui/react';
-import { clamp } from 'lodash';
+import { clamp } from 'lodash-es';
 
 import { useTranslation } from 'react-i18next';
 import {
@@ -233,7 +233,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
             hidden={hideTooltip}
             {...sliderTooltipProps}
           >
-            <SliderThumb {...sliderThumbProps} />
+            <SliderThumb {...sliderThumbProps} zIndex={0} />
           </Tooltip>
         </Slider>
 

invokeai/frontend/web/src/common/components/ImageToImageOverlay.tsx

@@ -1,32 +1,11 @@
-import { Badge, Box, ButtonGroup, Flex } from '@chakra-ui/react';
-import { RootState } from 'app/store';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-import { clearInitialImage } from 'features/parameters/store/generationSlice';
-import { useCallback } from 'react';
-import IAIIconButton from 'common/components/IAIIconButton';
-import { FaUndo, FaUpload } from 'react-icons/fa';
-import { useTranslation } from 'react-i18next';
-import { Image } from 'app/invokeai';
+import { Badge, Box, Flex } from '@chakra-ui/react';
+import { Image } from 'app/types/invokeai';
 
 type ImageToImageOverlayProps = {
-  setIsLoaded: (isLoaded: boolean) => void;
   image: Image;
 };
 
-const ImageToImageOverlay = ({
-  setIsLoaded,
-  image,
-}: ImageToImageOverlayProps) => {
-  const isImageToImageEnabled = useAppSelector(
-    (state: RootState) => state.generation.isImageToImageEnabled
-  );
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const handleResetInitialImage = useCallback(() => {
-    dispatch(clearInitialImage());
-    setIsLoaded(false);
-  }, [dispatch, setIsLoaded]);
-
+const ImageToImageOverlay = ({ image }: ImageToImageOverlayProps) => {
   return (
     <Box
       sx={{

invokeai/frontend/web/src/common/components/ImageToImageSettingsHeader.tsx

@@ -1,34 +1,13 @@
-import {
-  Box,
-  ButtonGroup,
-  Collapse,
-  Flex,
-  Heading,
-  HStack,
-  Image,
-  Spacer,
-  Text,
-  useDisclosure,
-  VStack,
-} from '@chakra-ui/react';
-import { motion } from 'framer-motion';
-
-import IAIButton from 'common/components/IAIButton';
-import ImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageFit';
-import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
+import { ButtonGroup, Flex, Spacer, Text } from '@chakra-ui/react';
 import IAIIconButton from 'common/components/IAIIconButton';
 
 import { useTranslation } from 'react-i18next';
 import { FaUndo, FaUpload } from 'react-icons/fa';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-import { RootState } from 'app/store';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { useCallback } from 'react';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
 
 const ImageToImageSettingsHeader = () => {
-  const isImageToImageEnabled = useAppSelector(
-    (state: RootState) => state.generation.isImageToImageEnabled
-  );
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 

invokeai/frontend/web/src/common/components/ImageUploader.tsx

@@ -1,6 +1,6 @@
 import { Box, useToast } from '@chakra-ui/react';
 import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import useImageUploader from 'common/hooks/useImageUploader';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { ResourceKey } from 'i18next';

invokeai/frontend/web/src/common/components/Loading/Loading.tsx

@@ -1,5 +1,6 @@
 import { Flex, Image, Spinner } from '@chakra-ui/react';
 import InvokeAILogoImage from 'assets/images/logo.png';
+import { memo } from 'react';
 
 // This component loads before the theme so we cannot use theme tokens here
 
@@ -29,4 +30,4 @@ const Loading = () => {
   );
 };
 
-export default Loading;
+export default memo(Loading);

invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts

@@ -1,8 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook';
 
 const globalHotkeysSelector = createSelector(

invokeai/frontend/web/src/common/util/getPromptAndNegative.ts

@@ -1,4 +1,4 @@
-import * as InvokeAI from 'app/invokeai';
+import * as InvokeAI from 'app/types/invokeai';
 import promptToString from './promptToString';
 
 export function getPromptAndNegative(inputPrompt: InvokeAI.Prompt) {

invokeai/frontend/web/src/common/util/getUrl.ts

@@ -1,5 +1,6 @@
-import { RootState } from 'app/store';
-import { useAppSelector } from 'app/storeHooks';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useCallback } from 'react';
 import { OpenAPI } from 'services/api';
 
 export const getUrlAlt = (url: string, shouldTransformUrls: boolean) => {
@@ -15,14 +16,19 @@ export const useGetUrl = () => {
     (state: RootState) => state.config.shouldTransformUrls
   );
 
-  return {
-    shouldTransformUrls,
-    getUrl: (url?: string) => {
+  const getUrl = useCallback(
+    (url?: string) => {
       if (OpenAPI.BASE && shouldTransformUrls) {
         return [OpenAPI.BASE, url].join('/');
       }
 
       return url;
     },
+    [shouldTransformUrls]
+  );
+
+  return {
+    shouldTransformUrls,
+    getUrl,
   };
 };

invokeai/frontend/web/src/common/util/parseMetadata.ts

@@ -1,4 +1,4 @@
-import { forEach, size } from 'lodash';
+import { forEach, size } from 'lodash-es';
 import { ImageField, LatentsField, ConditioningField } from 'services/api';
 
 const OBJECT_TYPESTRING = '[object Object]';

invokeai/frontend/web/src/common/util/promptToString.ts

@@ -1,4 +1,4 @@
-import * as InvokeAI from 'app/invokeai';
+import * as InvokeAI from 'app/types/invokeai';
 
 const promptToString = (prompt: InvokeAI.Prompt): string => {
   if (typeof prompt === 'string') {

invokeai/frontend/web/src/common/util/seedWeightPairs.ts

@@ -1,4 +1,4 @@
-import * as InvokeAI from 'app/invokeai';
+import * as InvokeAI from 'app/types/invokeai';
 
 export const stringToSeedWeights = (
   string: string

invokeai/frontend/web/src/exports.tsx

@@ -1,20 +0,0 @@
-import Component from './component';
-
-import InvokeAiLogoComponent from './features/system/components/InvokeAILogoComponent';
-import ThemeChanger from './features/system/components/ThemeChanger';
-import IAIPopover from './common/components/IAIPopover';
-import IAIIconButton from './common/components/IAIIconButton';
-import SettingsModal from './features/system/components/SettingsModal/SettingsModal';
-import StatusIndicator from './features/system/components/StatusIndicator';
-import ModelSelect from 'features/system/components/ModelSelect';
-
-export default Component;
-export {
-  InvokeAiLogoComponent,
-  ThemeChanger,
-  IAIPopover,
-  IAIIconButton,
-  SettingsModal,
-  StatusIndicator,
-  ModelSelect,
-};

invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx

@@ -1,4 +1,4 @@
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIAlertDialog from 'common/components/IAIAlertDialog';
 import IAIButton from 'common/components/IAIButton';
 import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';

invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx

@@ -1,6 +1,6 @@
 import { Box, chakra, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import {
   canvasSelector,
   isStagingSelector,
@@ -8,7 +8,7 @@ import {
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import { Vector2d } from 'konva/lib/types';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useCallback, useRef } from 'react';
 import { Layer, Stage } from 'react-konva';

invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
-import { isEqual } from 'lodash';
+import { useAppSelector } from 'app/store/storeHooks';
+import { isEqual } from 'lodash-es';
 
 import { Group, Rect } from 'react-konva';
 import { canvasSelector } from '../store/canvasSelectors';

invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx

@@ -2,10 +2,10 @@
 
 import { useToken } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
-import { useAppSelector } from 'app/storeHooks';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
-import { isEqual, range } from 'lodash';
+import { isEqual, range } from 'lodash-es';
 
 import { ReactNode, useCallback, useLayoutEffect, useState } from 'react';
 import { Group, Line as KonvaLine } from 'react-konva';

invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx

@@ -1,10 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
-import { useAppSelector } from 'app/storeHooks';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import { GalleryState } from 'features/gallery/store/gallerySlice';
 import { ImageConfig } from 'konva/lib/shapes/Image';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useEffect, useState } from 'react';
 import { Image as KonvaImage } from 'react-konva';

invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx

@@ -1,12 +1,12 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { RectConfig } from 'konva/lib/shapes/Rect';
 import { Rect } from 'react-konva';
 
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
 import Konva from 'konva';
-import { isNumber } from 'lodash';
+import { isNumber } from 'lodash-es';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export const canvasMaskCompositerSelector = createSelector(

invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx

@@ -1,8 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { GroupConfig } from 'konva/lib/Group';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { Group, Line } from 'react-konva';
 import { isCanvasMaskLine } from '../store/canvasTypes';

invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx

@@ -1,9 +1,9 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { Group, Line, Rect } from 'react-konva';
 import {

invokeai/frontend/web/src/features/canvas/components/IAICanvasResizer.tsx

@@ -1,6 +1,6 @@
 import { Flex, Spinner } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   canvasSelector,
   initialCanvasImageSelector,

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx

@@ -1,9 +1,9 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { GroupConfig } from 'konva/lib/Group';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { Group, Rect } from 'react-konva';
 import IAICanvasImage from './IAICanvasImage';

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx

@@ -1,7 +1,7 @@
 import { ButtonGroup, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { saveStagingAreaImageToGallery } from 'app/socketio/actions';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+// import { saveStagingAreaImageToGallery } from 'app/socketio/actions';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import {
@@ -12,7 +12,7 @@ import {
   setShouldShowStagingImage,
   setShouldShowStagingOutline,
 } from 'features/canvas/store/canvasSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx

@@ -1,8 +1,8 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useTranslation } from 'react-i18next';
 import roundToHundreth from '../util/roundToHundreth';

invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx

@@ -1,9 +1,9 @@
 import { Box } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import roundToHundreth from 'features/canvas/util/roundToHundreth';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useTranslation } from 'react-i18next';
 

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx

@@ -1,9 +1,9 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
 import { GroupConfig } from 'konva/lib/Group';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { Circle, Group } from 'react-konva';
 import {

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   roundDownToMultiple,
   roundToMultiple,
@@ -16,7 +16,7 @@ import Konva from 'konva';
 import { GroupConfig } from 'konva/lib/Group';
 import { KonvaEventObject } from 'konva/lib/Node';
 import { Vector2d } from 'konva/lib/types';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Group, Rect, Transformer } from 'react-konva';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAICheckbox from 'common/components/IAICheckbox';
 import IAIColorPicker from 'common/components/IAIColorPicker';
@@ -18,7 +18,7 @@ import {
   setShouldPreserveMaskedArea,
 } from 'features/canvas/store/canvasSlice';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
@@ -9,7 +9,7 @@ import { FaRedo } from 'react-icons/fa';
 import { redo } from 'features/canvas/store/canvasSlice';
 import { systemSelector } from 'features/system/store/systemSelectors';
 
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
 const canvasRedoSelector = createSelector(

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAICheckbox from 'common/components/IAICheckbox';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAIPopover from 'common/components/IAIPopover';
@@ -16,7 +16,7 @@ import {
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
 import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { ChangeEvent } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAIPopover from 'common/components/IAIPopover';
@@ -17,7 +17,7 @@ import {
   setTool,
 } from 'features/canvas/store/canvasSlice';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { clamp, isEqual } from 'lodash';
+import { clamp, isEqual } from 'lodash-es';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAISelect from 'common/components/IAISelect';
 import useImageUploader from 'common/hooks/useImageUploader';
@@ -24,7 +24,7 @@ import {
 import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { ChangeEvent } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -9,7 +9,7 @@ import { undo } from 'features/canvas/store/canvasSlice';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
 const canvasUndoSelector = createSelector(

invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   canvasSelector,
   isStagingSelector,
@@ -9,7 +9,7 @@ import {
   setStageCoordinates,
 } from 'features/canvas/store/canvasSlice';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useCallback } from 'react';
 

invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   canvasSelector,
   isStagingSelector,
@@ -13,7 +13,7 @@ import {
   setTool,
 } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   canvasSelector,
   isStagingSelector,
@@ -12,7 +12,7 @@ import {
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { MutableRefObject, useCallback } from 'react';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   canvasSelector,
   isStagingSelector,
@@ -11,7 +11,7 @@ import {
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
 import { Vector2d } from 'konva/lib/types';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { MutableRefObject, useCallback } from 'react';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseOut.ts

@@ -1,4 +1,4 @@
-import { useAppDispatch } from 'app/storeHooks';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { mouseLeftCanvas } from 'features/canvas/store/canvasSlice';
 import { useCallback } from 'react';
 

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   canvasSelector,
   isStagingSelector,
@@ -12,7 +12,7 @@ import {
 } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { MutableRefObject, useCallback } from 'react';
 import getScaledCursorPosition from '../util/getScaledCursorPosition';

invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import {
   setStageCoordinates,
@@ -7,7 +7,7 @@ import {
 } from 'features/canvas/store/canvasSlice';
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { clamp, isEqual } from 'lodash';
+import { clamp, isEqual } from 'lodash-es';
 
 import { MutableRefObject, useCallback } from 'react';
 import {

invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts

@@ -1,4 +1,4 @@
-import { useAppDispatch } from 'app/storeHooks';
+import { useAppDispatch } from 'app/store/storeHooks';
 import Konva from 'konva';
 import {
   commitColorPickerColor,

invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
+import { RootState } from 'app/store/store';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { CanvasImage, CanvasState, isCanvasBaseImage } from './canvasTypes';

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -1,12 +1,12 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
-import * as InvokeAI from 'app/invokeai';
+import * as InvokeAI from 'app/types/invokeai';
 import {
   roundDownToMultiple,
   roundToMultiple,
 } from 'common/util/roundDownToMultiple';
 import { IRect, Vector2d } from 'konva/lib/types';
-import { clamp, cloneDeep } from 'lodash';
+import { clamp, cloneDeep } from 'lodash-es';
 //
 import { RgbaColor } from 'react-colorful';
 import calculateCoordinates from '../util/calculateCoordinates';

invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts

@@ -1,4 +1,4 @@
-import * as InvokeAI from 'app/invokeai';
+import * as InvokeAI from 'app/types/invokeai';
 import { IRect, Vector2d } from 'konva/lib/types';
 import { RgbaColor } from 'react-colorful';
 

invokeai/frontend/web/src/features/canvas/store/thunks/mergeAndUploadCanvas.ts

@@ -1,7 +1,7 @@
 import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
-import * as InvokeAI from 'app/invokeai';
-import { RootState } from 'app/store';
-import { addImage } from 'features/gallery/store/gallerySlice';
+import * as InvokeAI from 'app/types/invokeai';
+import { RootState } from 'app/store/store';
+// import { addImage } from 'features/gallery/store/gallerySlice';
 import {
   addToast,
   setCurrentStatus,

invokeai/frontend/web/src/features/canvas/store/thunks/requestCanvasScale.ts

@@ -1,6 +1,6 @@
-import { AppDispatch, AppGetState } from 'app/store';
+import { AppDispatch, AppGetState } from 'app/store/store';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 import { setDoesCanvasNeedScaling } from '../canvasSlice';
 
 const debouncedCanvasScale = debounce((dispatch: AppDispatch) => {

invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { isEqual } from 'lodash';
+import { get, isEqual, isNumber, isString } from 'lodash-es';
 
 import {
   ButtonGroup,
@@ -10,8 +10,8 @@ import {
   useDisclosure,
   useToast,
 } from '@chakra-ui/react';
-import { runESRGAN, runFacetool } from 'app/socketio/actions';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+// import { runESRGAN, runFacetool } from 'app/socketio/actions';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAIPopover from 'common/components/IAIPopover';
@@ -63,11 +63,11 @@ import {
 } from '../store/gallerySelectors';
 import DeleteImageModal from './DeleteImageModal';
 import { useCallback } from 'react';
-import useSetBothPrompts from 'features/parameters/hooks/usePrompt';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { useGetUrl } from 'common/util/getUrl';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { imageDeleted } from 'services/thunks/image';
+import { useParameters } from 'features/parameters/hooks/useParameters';
 
 const currentImageButtonsSelector = createSelector(
   [
@@ -112,6 +112,8 @@ const currentImageButtonsSelector = createSelector(
       isLightboxOpen,
       shouldHidePreview,
       image,
+      seed: image?.metadata?.invokeai?.node?.seed,
+      prompt: image?.metadata?.invokeai?.node?.prompt,
     };
   },
   {
@@ -161,18 +163,10 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
 
   const toast = useToast();
   const { t } = useTranslation();
-  const setBothPrompts = useSetBothPrompts();
 
-  const handleClickUseAsInitialImage = () => {
-    if (!image) return;
-    if (isLightboxOpen) dispatch(setIsLightboxOpen(false));
-    dispatch(initialImageSelected(image.name));
-    // dispatch(setInitialImage(currentImage));
+  const { recallPrompt, recallSeed, sendToImageToImage } = useParameters();
 
-    // dispatch(setActiveTab('img2img'));
-  };
-
-  const handleCopyImage = async () => {
+  const handleCopyImage = useCallback(async () => {
     if (!image?.url) {
       return;
     }
@@ -194,9 +188,9 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
       duration: 2500,
       isClosable: true,
     });
-  };
+  }, [getUrl, t, image?.url, toast]);
 
-  const handleCopyImageLink = () => {
+  const handleCopyImageLink = useCallback(() => {
     const url = image
       ? shouldTransformUrls
         ? getUrl(image.url)
@@ -215,37 +209,13 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         isClosable: true,
       });
     });
-  };
+  }, [toast, shouldTransformUrls, getUrl, t, image]);
 
-  useHotkeys(
-    'shift+i',
-    () => {
-      if (image) {
-        handleClickUseAsInitialImage();
-        toast({
-          title: t('toast.sentToImageToImage'),
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        });
-      } else {
-        toast({
-          title: t('toast.imageNotLoaded'),
-          description: t('toast.imageNotLoadedDesc'),
-          status: 'error',
-          duration: 2500,
-          isClosable: true,
-        });
-      }
-    },
-    [image]
-  );
-
-  const handlePreviewVisibility = () => {
+  const handlePreviewVisibility = useCallback(() => {
     dispatch(setShouldHidePreview(!shouldHidePreview));
-  };
+  }, [dispatch, shouldHidePreview]);
 
-  const handleClickUseAllParameters = () => {
+  const handleClickUseAllParameters = useCallback(() => {
     if (!image) return;
     // selectedImage.metadata &&
     //   dispatch(setAllParameters(selectedImage.metadata));
@@ -254,12 +224,13 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     // } else if (selectedImage.metadata?.image.type === 'txt2img') {
     //   dispatch(setActiveTab('txt2img'));
     // }
-  };
+  }, [image]);
 
   useHotkeys(
     'a',
     () => {
-      if (['txt2img', 'img2img'].includes(image?.metadata?.sd_metadata?.type)) {
+      const type = image?.metadata?.invokeai?.node?.types;
+      if (isString(type) && ['txt2img', 'img2img'].includes(type)) {
         handleClickUseAllParameters();
         toast({
           title: t('toast.parametersSet'),
@@ -280,67 +251,27 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     [image]
   );
 
-  const handleClickUseSeed = () => {
-    image?.metadata && dispatch(setSeed(image.metadata.sd_metadata.seed));
-  };
+  const handleUseSeed = useCallback(() => {
+    recallSeed(image?.metadata?.invokeai?.node?.seed);
+  }, [image, recallSeed]);
 
-  useHotkeys(
-    's',
-    () => {
-      if (image?.metadata?.sd_metadata?.seed) {
-        handleClickUseSeed();
-        toast({
-          title: t('toast.seedSet'),
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        });
-      } else {
-        toast({
-          title: t('toast.seedNotSet'),
-          description: t('toast.seedNotSetDesc'),
-          status: 'error',
-          duration: 2500,
-          isClosable: true,
-        });
-      }
-    },
-    [image]
-  );
+  useHotkeys('s', handleUseSeed, [image]);
 
-  const handleClickUsePrompt = useCallback(() => {
-    if (image?.metadata?.sd_metadata?.prompt) {
-      setBothPrompts(image?.metadata?.sd_metadata?.prompt);
-    }
-  }, [image?.metadata?.sd_metadata?.prompt, setBothPrompts]);
+  const handleUsePrompt = useCallback(() => {
+    recallPrompt(image?.metadata?.invokeai?.node?.prompt);
+  }, [image, recallPrompt]);
 
-  useHotkeys(
-    'p',
-    () => {
-      if (image?.metadata?.sd_metadata?.prompt) {
-        handleClickUsePrompt();
-        toast({
-          title: t('toast.promptSet'),
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        });
-      } else {
-        toast({
-          title: t('toast.promptNotSet'),
-          description: t('toast.promptNotSetDesc'),
-          status: 'error',
-          duration: 2500,
-          isClosable: true,
-        });
-      }
-    },
-    [image]
-  );
+  useHotkeys('p', handleUsePrompt, [image]);
 
-  const handleClickUpscale = () => {
+  const handleSendToImageToImage = useCallback(() => {
+    sendToImageToImage(image);
+  }, [image, sendToImageToImage]);
+
+  useHotkeys('shift+i', handleSendToImageToImage, [image]);
+
+  const handleClickUpscale = useCallback(() => {
     // selectedImage && dispatch(runESRGAN(selectedImage));
-  };
+  }, []);
 
   useHotkeys(
     'Shift+U',
@@ -369,9 +300,9 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     ]
   );
 
-  const handleClickFixFaces = () => {
+  const handleClickFixFaces = useCallback(() => {
     // selectedImage && dispatch(runFacetool(selectedImage));
-  };
+  }, []);
 
   useHotkeys(
     'Shift+R',
@@ -401,10 +332,12 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     ]
   );
 
-  const handleClickShowImageDetails = () =>
-    dispatch(setShouldShowImageDetails(!shouldShowImageDetails));
+  const handleClickShowImageDetails = useCallback(
+    () => dispatch(setShouldShowImageDetails(!shouldShowImageDetails)),
+    [dispatch, shouldShowImageDetails]
+  );
 
-  const handleSendToCanvas = () => {
+  const handleSendToCanvas = useCallback(() => {
     if (!image) return;
     if (isLightboxOpen) dispatch(setIsLightboxOpen(false));
 
@@ -421,7 +354,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
       duration: 2500,
       isClosable: true,
     });
-  };
+  }, [image, isLightboxOpen, dispatch, activeTabName, toast, t]);
 
   useHotkeys(
     'i',
@@ -440,19 +373,19 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     [image, shouldShowImageDetails]
   );
 
-  const handleInitiateDelete = () => {
+  const handleDelete = useCallback(() => {
+    if (canDeleteImage && image) {
+      dispatch(imageDeleted({ imageType: image.type, imageName: image.name }));
+    }
+  }, [image, canDeleteImage, dispatch]);
+
+  const handleInitiateDelete = useCallback(() => {
     if (shouldConfirmOnDelete) {
       onDeleteDialogOpen();
     } else {
       handleDelete();
     }
-  };
-
-  const handleDelete = () => {
-    if (canDeleteImage && image) {
-      dispatch(imageDeleted({ imageType: image.type, imageName: image.name }));
-    }
-  };
+  }, [shouldConfirmOnDelete, onDeleteDialogOpen, handleDelete]);
 
   useHotkeys('delete', handleInitiateDelete, [
     image,
@@ -461,9 +394,9 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     isProcessing,
   ]);
 
-  const handleLightBox = () => {
+  const handleLightBox = useCallback(() => {
     dispatch(setIsLightboxOpen(!isLightboxOpen));
-  };
+  }, [dispatch, isLightboxOpen]);
 
   return (
     <>
@@ -494,7 +427,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
             >
               <IAIButton
                 size="sm"
-                onClick={handleClickUseAsInitialImage}
+                onClick={handleSendToImageToImage}
                 leftIcon={<FaShare />}
               >
                 {t('parameters.sendToImg2Img')}
@@ -568,16 +501,16 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
             icon={<FaQuoteRight />}
             tooltip={`${t('parameters.usePrompt')} (P)`}
             aria-label={`${t('parameters.usePrompt')} (P)`}
-            isDisabled={!image?.metadata?.sd_metadata?.prompt}
-            onClick={handleClickUsePrompt}
+            isDisabled={!image?.metadata?.invokeai?.node?.prompt}
+            onClick={handleUsePrompt}
           />
 
           <IAIIconButton
             icon={<FaSeedling />}
             tooltip={`${t('parameters.useSeed')} (S)`}
             aria-label={`${t('parameters.useSeed')} (S)`}
-            isDisabled={!image?.metadata?.sd_metadata?.seed}
-            onClick={handleClickUseSeed}
+            isDisabled={!image?.metadata?.invokeai?.node?.seed}
+            onClick={handleUseSeed}
           />
 
           <IAIIconButton

invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx

@@ -1,8 +1,8 @@
 import { Flex, Icon } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { MdPhoto } from 'react-icons/md';
 import { selectedImageSelector } from '../store/gallerySelectors';

invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx

@@ -1,46 +1,27 @@
 import { Box, Flex, Image } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { uiSelector } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { selectedImageSelector } from '../store/gallerySelectors';
 import CurrentImageFallback from './CurrentImageFallback';
 import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
 import NextPrevImageButtons from './NextPrevImageButtons';
 import CurrentImageHidden from './CurrentImageHidden';
+import { memo } from 'react';
 
 export const imagesSelector = createSelector(
   [uiSelector, selectedImageSelector, systemSelector],
   (ui, selectedImage, system) => {
     const { shouldShowImageDetails, shouldHidePreview } = ui;
-    const { progressImage } = system;
-
-    // TODO: Clean this up, this is really gross
-    const imageToDisplay = progressImage
-      ? {
-          url: progressImage.dataURL,
-          width: progressImage.width,
-          height: progressImage.height,
-          isProgressImage: true,
-          image: progressImage,
-        }
-      : selectedImage
-      ? {
-          url: selectedImage.url,
-          width: selectedImage.metadata.width,
-          height: selectedImage.metadata.height,
-          isProgressImage: false,
-          image: selectedImage,
-        }
-      : null;
 
     return {
       shouldShowImageDetails,
       shouldHidePreview,
-      imageToDisplay,
+      image: selectedImage,
     };
   },
   {
@@ -50,8 +31,8 @@ export const imagesSelector = createSelector(
   }
 );
 
-export default function CurrentImagePreview() {
-  const { shouldShowImageDetails, imageToDisplay, shouldHidePreview } =
+const CurrentImagePreview = () => {
+  const { shouldShowImageDetails, image, shouldHidePreview } =
     useAppSelector(imagesSelector);
   const { getUrl } = useGetUrl();
 
@@ -65,54 +46,39 @@ export default function CurrentImagePreview() {
         height: '100%',
       }}
     >
-      {imageToDisplay && (
+      {image && (
         <Image
-          src={
-            shouldHidePreview
-              ? undefined
-              : imageToDisplay.isProgressImage
-              ? imageToDisplay.url
-              : getUrl(imageToDisplay.url)
-          }
-          width={imageToDisplay.width}
-          height={imageToDisplay.height}
-          fallback={
-            shouldHidePreview ? (
-              <CurrentImageHidden />
-            ) : !imageToDisplay.isProgressImage ? (
-              <CurrentImageFallback />
-            ) : undefined
-          }
+          src={shouldHidePreview ? undefined : getUrl(image.url)}
+          width={image.metadata.width}
+          height={image.metadata.height}
+          fallback={shouldHidePreview ? <CurrentImageHidden /> : undefined}
           sx={{
             objectFit: 'contain',
             maxWidth: '100%',
             maxHeight: '100%',
             height: 'auto',
             position: 'absolute',
-            imageRendering: imageToDisplay.isProgressImage
-              ? 'pixelated'
-              : 'initial',
             borderRadius: 'base',
           }}
         />
       )}
+      {shouldShowImageDetails && image && 'metadata' in image && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '0',
+            width: '100%',
+            height: '100%',
+            borderRadius: 'base',
+            overflow: 'scroll',
+          }}
+        >
+          <ImageMetadataViewer image={image} />
+        </Box>
+      )}
       {!shouldShowImageDetails && <NextPrevImageButtons />}
-      {shouldShowImageDetails &&
-        imageToDisplay &&
-        'metadata' in imageToDisplay.image && (
-          <Box
-            sx={{
-              position: 'absolute',
-              top: '0',
-              width: '100%',
-              height: '100%',
-              borderRadius: 'base',
-              overflow: 'scroll',
-            }}
-          >
-            <ImageMetadataViewer image={imageToDisplay.image} />
-          </Box>
-        )}
     </Flex>
   );
-}
+};
+
+export default memo(CurrentImagePreview);

invokeai/frontend/web/src/features/gallery/components/DeleteImageModal.tsx

@@ -9,13 +9,13 @@ import {
   Text,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAISwitch from 'common/components/IAISwitch';
 import { configSelector } from 'features/system/store/configSelectors';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { setShouldConfirmOnDelete } from 'features/system/store/systemSlice';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 import { ChangeEvent, memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx

@@ -5,65 +5,38 @@ import {
   Image,
   MenuItem,
   MenuList,
-  Text,
+  Skeleton,
   useDisclosure,
   useTheme,
   useToast,
 } from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-import {
-  imageSelected,
-  setCurrentImage,
-} from 'features/gallery/store/gallerySlice';
-import {
-  initialImageSelected,
-  setAllImageToImageParameters,
-  setAllParameters,
-  setSeed,
-} from 'features/parameters/store/generationSlice';
-import { DragEvent, memo, useState } from 'react';
-import {
-  FaCheck,
-  FaExpand,
-  FaLink,
-  FaShare,
-  FaTrash,
-  FaTrashAlt,
-} from 'react-icons/fa';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { imageSelected } from 'features/gallery/store/gallerySlice';
+import { DragEvent, memo, useCallback, useState } from 'react';
+import { FaCheck, FaExpand, FaImage, FaShare, FaTrash } from 'react-icons/fa';
 import DeleteImageModal from './DeleteImageModal';
 import { ContextMenu } from 'chakra-ui-contextmenu';
-import * as InvokeAI from 'app/invokeai';
-import {
-  resizeAndScaleCanvas,
-  setInitialCanvasImage,
-} from 'features/canvas/store/canvasSlice';
+import * as InvokeAI from 'app/types/invokeai';
+import { resizeAndScaleCanvas } from 'features/canvas/store/canvasSlice';
 import { gallerySelector } from 'features/gallery/store/gallerySelectors';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useTranslation } from 'react-i18next';
-import useSetBothPrompts from 'features/parameters/hooks/usePrompt';
-import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { useGetUrl } from 'common/util/getUrl';
 import { ExternalLinkIcon } from '@chakra-ui/icons';
-import { BiZoomIn } from 'react-icons/bi';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
 import { imageDeleted } from 'services/thunks/image';
 import { createSelector } from '@reduxjs/toolkit';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { configSelector } from 'features/system/store/configSelectors';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { useParameters } from 'features/parameters/hooks/useParameters';
 
 export const selector = createSelector(
-  [
-    gallerySelector,
-    systemSelector,
-    configSelector,
-    lightboxSelector,
-    activeTabNameSelector,
-  ],
-  (gallery, system, config, lightbox, activeTabName) => {
+  [gallerySelector, systemSelector, lightboxSelector, activeTabNameSelector],
+  (gallery, system, lightbox, activeTabName) => {
     const {
       galleryImageObjectFit,
       galleryImageMinimumWidth,
@@ -71,7 +44,6 @@ export const selector = createSelector(
     } = gallery;
 
     const { isLightboxOpen } = lightbox;
-    const { disabledFeatures } = config;
     const { isConnected, isProcessing, shouldConfirmOnDelete } = system;
 
     return {
@@ -82,7 +54,6 @@ export const selector = createSelector(
       shouldUseSingleGalleryColumn,
       activeTabName,
       isLightboxOpen,
-      disabledFeatures,
     };
   },
   {
@@ -113,14 +84,15 @@ const HoverableImage = memo((props: HoverableImageProps) => {
     galleryImageMinimumWidth,
     canDeleteImage,
     shouldUseSingleGalleryColumn,
-    disabledFeatures,
     shouldConfirmOnDelete,
   } = useAppSelector(selector);
+
   const {
     isOpen: isDeleteDialogOpen,
     onOpen: onDeleteDialogOpen,
     onClose: onDeleteDialogClose,
   } = useDisclosure();
+
   const { image, isSelected } = props;
   const { url, thumbnail, name, metadata } = image;
   const { getUrl } = useGetUrl();
@@ -130,53 +102,62 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   const toast = useToast();
   const { direction } = useTheme();
   const { t } = useTranslation();
-  const setBothPrompts = useSetBothPrompts();
+  const { isFeatureEnabled: isLightboxEnabled } = useFeatureStatus('lightbox');
+  const { recallSeed, recallPrompt, sendToImageToImage, recallInitialImage } =
+    useParameters();
 
   const handleMouseOver = () => setIsHovered(true);
-
   const handleMouseOut = () => setIsHovered(false);
 
-  const handleInitiateDelete = () => {
+  // Immediately deletes an image
+  const handleDelete = useCallback(() => {
+    if (canDeleteImage && image) {
+      dispatch(imageDeleted({ imageType: image.type, imageName: image.name }));
+    }
+  }, [dispatch, image, canDeleteImage]);
+
+  // Opens the alert dialog to check if user is sure they want to delete
+  const handleInitiateDelete = useCallback(() => {
     if (shouldConfirmOnDelete) {
       onDeleteDialogOpen();
     } else {
       handleDelete();
     }
-  };
+  }, [handleDelete, onDeleteDialogOpen, shouldConfirmOnDelete]);
 
-  const handleDelete = () => {
-    if (canDeleteImage && image) {
-      dispatch(imageDeleted({ imageType: image.type, imageName: image.name }));
-    }
-  };
+  const handleSelectImage = useCallback(() => {
+    dispatch(imageSelected(image));
+  }, [image, dispatch]);
 
-  const handleUsePrompt = () => {
-    if (image.metadata?.sd_metadata?.prompt) {
-      setBothPrompts(image.metadata?.sd_metadata?.prompt);
-    }
-    toast({
-      title: t('toast.promptSet'),
-      status: 'success',
-      duration: 2500,
-      isClosable: true,
-    });
-  };
+  const handleDragStart = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.dataTransfer.setData('invokeai/imageName', image.name);
+      e.dataTransfer.setData('invokeai/imageType', image.type);
+      e.dataTransfer.effectAllowed = 'move';
+    },
+    [image]
+  );
 
-  const handleUseSeed = () => {
-    image.metadata.sd_metadata &&
-      dispatch(setSeed(image.metadata.sd_metadata.image.seed));
-    toast({
-      title: t('toast.seedSet'),
-      status: 'success',
-      duration: 2500,
-      isClosable: true,
-    });
-  };
+  // Recall parameters handlers
+  const handleRecallPrompt = useCallback(() => {
+    recallPrompt(image.metadata?.invokeai?.node?.prompt);
+  }, [image, recallPrompt]);
 
-  const handleSendToImageToImage = () => {
-    dispatch(initialImageSelected(image.name));
-  };
+  const handleRecallSeed = useCallback(() => {
+    recallSeed(image.metadata.invokeai?.node?.seed);
+  }, [image, recallSeed]);
 
+  const handleSendToImageToImage = useCallback(() => {
+    sendToImageToImage(image);
+  }, [image, sendToImageToImage]);
+
+  const handleRecallInitialImage = useCallback(() => {
+    recallInitialImage(image.metadata.invokeai?.node?.image);
+  }, [image, recallInitialImage]);
+
+  /**
+   * TODO: the rest of these
+   */
   const handleSendToCanvas = () => {
     // dispatch(setInitialCanvasImage(image));
 
@@ -195,48 +176,14 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   };
 
   const handleUseAllParameters = () => {
-    metadata.sd_metadata && dispatch(setAllParameters(metadata.sd_metadata));
-    toast({
-      title: t('toast.parametersSet'),
-      status: 'success',
-      duration: 2500,
-      isClosable: true,
-    });
-  };
-
-  const handleUseInitialImage = async () => {
-    if (metadata.sd_metadata?.image?.init_image_path) {
-      const response = await fetch(
-        metadata.sd_metadata?.image?.init_image_path
-      );
-      if (response.ok) {
-        dispatch(setAllImageToImageParameters(metadata?.sd_metadata));
-        toast({
-          title: t('toast.initialImageSet'),
-          status: 'success',
-          duration: 2500,
-          isClosable: true,
-        });
-        return;
-      }
-    }
-    toast({
-      title: t('toast.initialImageNotSet'),
-      description: t('toast.initialImageNotSetDesc'),
-      status: 'error',
-      duration: 2500,
-      isClosable: true,
-    });
-  };
-
-  const handleSelectImage = () => {
-    dispatch(imageSelected(image.name));
-  };
-
-  const handleDragStart = (e: DragEvent<HTMLDivElement>) => {
-    e.dataTransfer.setData('invokeai/imageName', image.name);
-    e.dataTransfer.setData('invokeai/imageType', image.type);
-    e.dataTransfer.effectAllowed = 'move';
+    // metadata.invokeai?.node &&
+    //   dispatch(setAllParameters(metadata.invokeai?.node));
+    // toast({
+    //   title: t('toast.parametersSet'),
+    //   status: 'success',
+    //   duration: 2500,
+    //   isClosable: true,
+    // });
   };
 
   const handleLightBox = () => {
@@ -253,37 +200,37 @@ const HoverableImage = memo((props: HoverableImageProps) => {
       <ContextMenu<HTMLDivElement>
         menuProps={{ size: 'sm', isLazy: true }}
         renderMenu={() => (
-          <MenuList>
+          <MenuList sx={{ visibility: 'visible !important' }}>
             <MenuItem
               icon={<ExternalLinkIcon />}
               onClickCapture={handleOpenInNewTab}
             >
               {t('common.openInNewTab')}
             </MenuItem>
-            {!disabledFeatures.includes('lightbox') && (
+            {isLightboxEnabled && (
               <MenuItem icon={<FaExpand />} onClickCapture={handleLightBox}>
                 {t('parameters.openInViewer')}
               </MenuItem>
             )}
             <MenuItem
               icon={<IoArrowUndoCircleOutline />}
-              onClickCapture={handleUsePrompt}
-              isDisabled={image?.metadata?.sd_metadata?.prompt === undefined}
+              onClickCapture={handleRecallPrompt}
+              isDisabled={image?.metadata?.invokeai?.node?.prompt === undefined}
             >
               {t('parameters.usePrompt')}
             </MenuItem>
 
             <MenuItem
               icon={<IoArrowUndoCircleOutline />}
-              onClickCapture={handleUseSeed}
-              isDisabled={image?.metadata?.sd_metadata?.seed === undefined}
+              onClickCapture={handleRecallSeed}
+              isDisabled={image?.metadata?.invokeai?.node?.seed === undefined}
             >
               {t('parameters.useSeed')}
             </MenuItem>
             <MenuItem
               icon={<IoArrowUndoCircleOutline />}
-              onClickCapture={handleUseInitialImage}
-              isDisabled={image?.metadata?.sd_metadata?.type !== 'img2img'}
+              onClickCapture={handleRecallInitialImage}
+              isDisabled={image?.metadata?.invokeai?.node?.type !== 'img2img'}
             >
               {t('parameters.useInitImg')}
             </MenuItem>
@@ -292,7 +239,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
               onClickCapture={handleUseAllParameters}
               isDisabled={
                 !['txt2img', 'img2img'].includes(
-                  image?.metadata?.sd_metadata?.type
+                  String(image?.metadata?.invokeai?.node?.type)
                 )
               }
             >
@@ -322,58 +269,48 @@ const HoverableImage = memo((props: HoverableImageProps) => {
             userSelect="none"
             draggable={true}
             onDragStart={handleDragStart}
+            onClick={handleSelectImage}
             ref={ref}
             sx={{
-              padding: 2,
               display: 'flex',
               justifyContent: 'center',
+              alignItems: 'center',
+              w: 'full',
+              h: 'full',
               transition: 'transform 0.2s ease-out',
-              _hover: {
-                cursor: 'pointer',
-
-                zIndex: 2,
-              },
-              _before: {
-                content: '""',
-                display: 'block',
-                paddingBottom: '100%',
-              },
+              aspectRatio: '1/1',
             }}
           >
             <Image
+              loading="lazy"
               objectFit={
                 shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit
               }
               rounded="md"
               src={getUrl(thumbnail || url)}
-              loading="lazy"
+              fallback={<FaImage />}
               sx={{
-                position: 'absolute',
                 width: '100%',
                 height: '100%',
                 maxWidth: '100%',
                 maxHeight: '100%',
-                top: '50%',
-                transform: 'translate(-50%,-50%)',
-                ...(direction === 'rtl'
-                  ? { insetInlineEnd: '50%' }
-                  : { insetInlineStart: '50%' }),
               }}
             />
-            <Flex
-              onClick={handleSelectImage}
-              sx={{
-                position: 'absolute',
-                top: '0',
-                insetInlineStart: '0',
-                width: '100%',
-                height: '100%',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              {isSelected && (
+            {isSelected && (
+              <Flex
+                sx={{
+                  position: 'absolute',
+                  top: '0',
+                  insetInlineStart: '0',
+                  width: '100%',
+                  height: '100%',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  pointerEvents: 'none',
+                }}
+              >
                 <Icon
+                  filter={'drop-shadow(0px 0px 1rem black)'}
                   as={FaCheck}
                   sx={{
                     width: '50%',
@@ -381,9 +318,9 @@ const HoverableImage = memo((props: HoverableImageProps) => {
                     fill: 'ok.500',
                   }}
                 />
-              )}
-            </Flex>
-            {isHovered && galleryImageMinimumWidth >= 64 && (
+              </Flex>
+            )}
+            {isHovered && galleryImageMinimumWidth >= 100 && (
               <Box
                 sx={{
                   position: 'absolute',

invokeai/frontend/web/src/features/gallery/components/ImageGallery.tsx

@@ -10,7 +10,7 @@
 //   useTheme,
 // } from '@chakra-ui/react';
 // import { requestImages } from 'app/socketio/actions';
-// import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+// import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 // import IAIButton from 'common/components/IAIButton';
 // import IAICheckbox from 'common/components/IAICheckbox';
 // import IAIIconButton from 'common/components/IAIIconButton';
@@ -35,7 +35,7 @@
 // } from 'features/ui/store/uiSlice';
 // import { InvokeTabName } from 'features/ui/store/tabMap';
 
-// import { clamp } from 'lodash';
+// import { clamp } from 'lodash-es';
 // import { Direction } from 're-resizable/lib/resizer';
 // import React, {
 //   ChangeEvent,

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

@@ -1,6 +1,14 @@
-import { ButtonGroup, Flex, Grid, Icon, Image, Text } from '@chakra-ui/react';
-import { requestImages } from 'app/socketio/actions';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import {
+  Box,
+  ButtonGroup,
+  Flex,
+  FlexProps,
+  Grid,
+  Icon,
+  Text,
+  forwardRef,
+} from '@chakra-ui/react';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAICheckbox from 'common/components/IAICheckbox';
 import IAIIconButton from 'common/components/IAIIconButton';
@@ -15,28 +23,33 @@ import {
   setShouldUseSingleGalleryColumn,
 } from 'features/gallery/store/gallerySlice';
 import { togglePinGalleryPanel } from 'features/ui/store/uiSlice';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
 
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  PropsWithChildren,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
 import { FaImage, FaUser, FaWrench } from 'react-icons/fa';
 import { MdPhotoLibrary } from 'react-icons/md';
 import HoverableImage from './HoverableImage';
 
-import Scrollable from 'features/ui/components/common/Scrollable';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
-import {
-  resultsAdapter,
-  selectResultsAll,
-  selectResultsTotal,
-} from '../store/resultsSlice';
+import { resultsAdapter } from '../store/resultsSlice';
 import {
   receivedResultImagesPage,
   receivedUploadImagesPage,
 } from 'services/thunks/gallery';
-import { selectUploadsAll, uploadsAdapter } from '../store/uploadsSlice';
+import { uploadsAdapter } from '../store/uploadsSlice';
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
+import { RootState } from 'app/store/store';
+import { Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
 const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 290;
 
@@ -49,7 +62,7 @@ const gallerySelector = createSelector(
   (uploads, results, gallery) => {
     const { currentCategory } = gallery;
 
-    return currentCategory === 'result'
+    return currentCategory === 'results'
       ? {
           images: resultsAdapter.getSelectors().selectAll(results),
           isLoading: results.isLoading,
@@ -68,32 +81,41 @@ const ImageGalleryContent = () => {
   const { t } = useTranslation();
   const resizeObserverRef = useRef<HTMLDivElement>(null);
   const [shouldShouldIconButtons, setShouldShouldIconButtons] = useState(true);
+  const rootRef = useRef(null);
+  const [scroller, setScroller] = useState<HTMLElement | null>(null);
+  const [initialize, osInstance] = useOverlayScrollbars({
+    defer: true,
+    options: {
+      scrollbars: {
+        visibility: 'auto',
+        autoHide: 'leave',
+        autoHideDelay: 1300,
+        theme: 'os-theme-dark',
+      },
+      overflow: { x: 'hidden' },
+    },
+  });
 
   const {
     // images,
     currentCategory,
-    currentImageUuid,
     shouldPinGallery,
     galleryImageMinimumWidth,
-    galleryGridTemplateColumns,
     galleryImageObjectFit,
     shouldAutoSwitchToNewImages,
-    // areMoreImagesAvailable,
     shouldUseSingleGalleryColumn,
+    selectedImage,
   } = useAppSelector(imageGallerySelector);
 
   const { images, areMoreImagesAvailable, isLoading } =
     useAppSelector(gallerySelector);
 
-  // const handleClickLoadMore = () => {
-  //   dispatch(requestImages(currentCategory));
-  // };
   const handleClickLoadMore = () => {
-    if (currentCategory === 'result') {
+    if (currentCategory === 'results') {
       dispatch(receivedResultImagesPage());
     }
 
-    if (currentCategory === 'user') {
+    if (currentCategory === 'uploads') {
       dispatch(receivedUploadImagesPage());
     }
   };
@@ -129,6 +151,25 @@ const ImageGalleryContent = () => {
     return () => resizeObserver.disconnect(); // clean up
   }, []);
 
+  useEffect(() => {
+    const { current: root } = rootRef;
+    if (scroller && root) {
+      initialize({
+        target: root,
+        elements: {
+          viewport: scroller,
+        },
+      });
+    }
+    return () => osInstance()?.destroy();
+  }, [scroller, initialize, osInstance]);
+
+  const setScrollerRef = useCallback((ref: HTMLElement | Window | null) => {
+    if (ref instanceof HTMLElement) {
+      setScroller(ref);
+    }
+  }, []);
+
   return (
     <Flex flexDirection="column" w="full" h="full" gap={4}>
       <Flex
@@ -147,34 +188,34 @@ const ImageGalleryContent = () => {
               <IAIIconButton
                 aria-label={t('gallery.showGenerations')}
                 tooltip={t('gallery.showGenerations')}
-                isChecked={currentCategory === 'result'}
+                isChecked={currentCategory === 'results'}
                 role="radio"
                 icon={<FaImage />}
-                onClick={() => dispatch(setCurrentCategory('result'))}
+                onClick={() => dispatch(setCurrentCategory('results'))}
               />
               <IAIIconButton
                 aria-label={t('gallery.showUploads')}
                 tooltip={t('gallery.showUploads')}
                 role="radio"
-                isChecked={currentCategory === 'user'}
+                isChecked={currentCategory === 'uploads'}
                 icon={<FaUser />}
-                onClick={() => dispatch(setCurrentCategory('user'))}
+                onClick={() => dispatch(setCurrentCategory('uploads'))}
               />
             </>
           ) : (
             <>
               <IAIButton
                 size="sm"
-                isChecked={currentCategory === 'result'}
-                onClick={() => dispatch(setCurrentCategory('result'))}
+                isChecked={currentCategory === 'results'}
+                onClick={() => dispatch(setCurrentCategory('results'))}
                 flexGrow={1}
               >
                 {t('gallery.generations')}
               </IAIButton>
               <IAIButton
                 size="sm"
-                isChecked={currentCategory === 'user'}
-                onClick={() => dispatch(setCurrentCategory('user'))}
+                isChecked={currentCategory === 'uploads'}
+                onClick={() => dispatch(setCurrentCategory('uploads'))}
                 flexGrow={1}
               >
                 {t('gallery.uploads')}
@@ -241,65 +282,119 @@ const ImageGalleryContent = () => {
           />
         </Flex>
       </Flex>
-      <Scrollable>
-        <Flex direction="column" gap={2} h="full">
-          {images.length || areMoreImagesAvailable ? (
-            <>
-              <Grid
-                gap={2}
-                style={{ gridTemplateColumns: galleryGridTemplateColumns }}
-              >
-                {images.map((image) => {
-                  const { name } = image;
-                  const isSelected = currentImageUuid === name;
-                  return (
-                    <HoverableImage
-                      key={`${name}-${image.thumbnail}`}
-                      image={image}
-                      isSelected={isSelected}
-                    />
-                  );
-                })}
-              </Grid>
-              <IAIButton
-                onClick={handleClickLoadMore}
-                isDisabled={!areMoreImagesAvailable}
-                isLoading={isLoading}
-                flexShrink={0}
-              >
-                {areMoreImagesAvailable
-                  ? t('gallery.loadMore')
-                  : t('gallery.allImagesLoaded')}
-              </IAIButton>
-            </>
-          ) : (
-            <Flex
-              sx={{
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 2,
-                padding: 8,
-                h: '100%',
-                w: '100%',
-                color: 'base.500',
-              }}
+      <Flex direction="column" gap={2} h="full">
+        {images.length || areMoreImagesAvailable ? (
+          <>
+            <Box ref={rootRef} data-overlayscrollbars="" h="100%">
+              {shouldUseSingleGalleryColumn ? (
+                <Virtuoso
+                  style={{ height: '100%' }}
+                  data={images}
+                  scrollerRef={(ref) => setScrollerRef(ref)}
+                  itemContent={(index, image) => {
+                    const { name } = image;
+                    const isSelected = selectedImage?.name === name;
+
+                    return (
+                      <Flex sx={{ pb: 2 }}>
+                        <HoverableImage
+                          key={`${name}-${image.thumbnail}`}
+                          image={image}
+                          isSelected={isSelected}
+                        />
+                      </Flex>
+                    );
+                  }}
+                />
+              ) : (
+                <VirtuosoGrid
+                  style={{ height: '100%' }}
+                  data={images}
+                  components={{
+                    Item: ItemContainer,
+                    List: ListContainer,
+                  }}
+                  scrollerRef={setScroller}
+                  itemContent={(index, image) => {
+                    const { name } = image;
+                    const isSelected = selectedImage?.name === name;
+
+                    return (
+                      <HoverableImage
+                        key={`${name}-${image.thumbnail}`}
+                        image={image}
+                        isSelected={isSelected}
+                      />
+                    );
+                  }}
+                />
+              )}
+            </Box>
+            <IAIButton
+              onClick={handleClickLoadMore}
+              isDisabled={!areMoreImagesAvailable}
+              isLoading={isLoading}
+              flexShrink={0}
             >
-              <Icon
-                as={MdPhotoLibrary}
-                sx={{
-                  w: 16,
-                  h: 16,
-                }}
-              />
-              <Text textAlign="center">{t('gallery.noImagesInGallery')}</Text>
-            </Flex>
-          )}
-        </Flex>
-      </Scrollable>
+              {areMoreImagesAvailable
+                ? t('gallery.loadMore')
+                : t('gallery.allImagesLoaded')}
+            </IAIButton>
+          </>
+        ) : (
+          <Flex
+            sx={{
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 2,
+              padding: 8,
+              h: '100%',
+              w: '100%',
+              color: 'base.500',
+            }}
+          >
+            <Icon
+              as={MdPhotoLibrary}
+              sx={{
+                w: 16,
+                h: 16,
+              }}
+            />
+            <Text textAlign="center">{t('gallery.noImagesInGallery')}</Text>
+          </Flex>
+        )}
+      </Flex>
     </Flex>
   );
 };
 
-ImageGalleryContent.displayName = 'ImageGalleryContent';
-export default ImageGalleryContent;
+type ItemContainerProps = PropsWithChildren & FlexProps;
+const ItemContainer = forwardRef((props: ItemContainerProps, ref) => (
+  <Box className="item-container" ref={ref}>
+    {props.children}
+  </Box>
+));
+
+type ListContainerProps = PropsWithChildren & FlexProps;
+const ListContainer = forwardRef((props: ListContainerProps, ref) => {
+  const galleryImageMinimumWidth = useAppSelector(
+    (state: RootState) => state.gallery.galleryImageMinimumWidth
+  );
+
+  return (
+    <Grid
+      {...props}
+      className="list-container"
+      ref={ref}
+      sx={{
+        gap: 2,
+        gridTemplateColumns: `repeat(auto-fit, minmax(${galleryImageMinimumWidth}px, 1fr));`,
+      }}
+    >
+      {props.children}
+    </Grid>
+  );
+});
+
+export default memo(ImageGalleryContent);

invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx

@@ -1,13 +1,13 @@
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { gallerySelector } from 'features/gallery/store/gallerySelectors';
 import {
-  selectNextImage,
-  selectPrevImage,
+  // selectNextImage,
+  // selectPrevImage,
   setGalleryImageMinimumWidth,
 } from 'features/gallery/store/gallerySlice';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 
-import { clamp, isEqual } from 'lodash';
+import { clamp, isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import './ImageGallery.css';
@@ -28,6 +28,7 @@ import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvas
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import useResolution from 'common/hooks/useResolution';
 import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
 
 const GALLERY_TAB_WIDTHS: Record<
   InvokeTabName,
@@ -72,7 +73,7 @@ const galleryPanelSelector = createSelector(
   }
 );
 
-export default function ImageGalleryPanel() {
+export const ImageGalleryPanel = () => {
   const dispatch = useAppDispatch();
   const {
     shouldPinGallery,
@@ -109,28 +110,6 @@ export default function ImageGalleryPanel() {
     [shouldPinGallery]
   );
 
-  useHotkeys(
-    'left',
-    () => {
-      dispatch(selectPrevImage());
-    },
-    {
-      enabled: !isStaging || activeTabName !== 'unifiedCanvas',
-    },
-    [isStaging, activeTabName]
-  );
-
-  useHotkeys(
-    'right',
-    () => {
-      dispatch(selectNextImage());
-    },
-    {
-      enabled: !isStaging || activeTabName !== 'unifiedCanvas',
-    },
-    [isStaging, activeTabName]
-  );
-
   useHotkeys(
     'shift+g',
     () => {
@@ -232,4 +211,6 @@ export default function ImageGalleryPanel() {
   };
 
   return renderImageGallery();
-}
+};
+
+export default memo(ImageGalleryPanel);

invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -9,8 +9,8 @@ import {
   Text,
   Tooltip,
 } from '@chakra-ui/react';
-import * as InvokeAI from 'app/invokeai';
-import { useAppDispatch } from 'app/storeHooks';
+import * as InvokeAI from 'app/types/invokeai';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import promptToString from 'common/util/promptToString';
 import { seedWeightsToString } from 'common/util/seedWeightPairs';
@@ -159,6 +159,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
         _dark: {
           bg: 'blackAlpha.600',
         },
+        overflow: 'scroll',
       }}
     >
       <Flex gap={2}>

invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/OLD_ImageMetadataViewer.tsx

@@ -9,8 +9,8 @@ import {
   Text,
   Tooltip,
 } from '@chakra-ui/react';
-import * as InvokeAI from 'app/invokeai';
-import { useAppDispatch } from 'app/storeHooks';
+import * as InvokeAI from 'app/types/invokeai';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import promptToString from 'common/util/promptToString';
 import { seedWeightsToString } from 'common/util/seedWeightPairs';

invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx

@@ -1,16 +1,14 @@
 import { ChakraProps, Flex, Grid, IconButton } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-import { isEqual } from 'lodash';
-import { useState } from 'react';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { clamp, isEqual } from 'lodash-es';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 import { gallerySelector } from '../store/gallerySelectors';
-import {
-  GalleryCategory,
-  selectNextImage,
-  selectPrevImage,
-} from '../store/gallerySlice';
+import { RootState } from 'app/store/store';
+import { imageSelected } from '../store/gallerySlice';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 const nextPrevButtonTriggerAreaStyles: ChakraProps['sx'] = {
   height: '100%',
@@ -23,24 +21,47 @@ const nextPrevButtonStyles: ChakraProps['sx'] = {
 };
 
 export const nextPrevImageButtonsSelector = createSelector(
-  gallerySelector,
-  (gallery) => {
-    const { currentImage } = gallery;
+  [(state: RootState) => state, gallerySelector],
+  (state, gallery) => {
+    const { selectedImage, currentCategory } = gallery;
 
-    const tempImages =
-      gallery.categories[
-        currentImage ? (currentImage.category as GalleryCategory) : 'result'
-      ].images;
+    if (!selectedImage) {
+      return {
+        isOnFirstImage: true,
+        isOnLastImage: true,
+      };
+    }
 
-    const currentImageIndex = tempImages.findIndex(
-      (i) => i.uuid === gallery?.currentImage?.uuid
+    const currentImageIndex = state[currentCategory].ids.findIndex(
+      (i) => i === selectedImage.name
     );
-    const imagesLength = tempImages.length;
+
+    const nextImageIndex = clamp(
+      currentImageIndex + 1,
+      0,
+      state[currentCategory].ids.length - 1
+    );
+
+    const prevImageIndex = clamp(
+      currentImageIndex - 1,
+      0,
+      state[currentCategory].ids.length - 1
+    );
+
+    const nextImageId = state[currentCategory].ids[nextImageIndex];
+    const prevImageId = state[currentCategory].ids[prevImageIndex];
+
+    const nextImage = state[currentCategory].entities[nextImageId];
+    const prevImage = state[currentCategory].entities[prevImageId];
+
+    const imagesLength = state[currentCategory].ids.length;
 
     return {
       isOnFirstImage: currentImageIndex === 0,
       isOnLastImage:
         !isNaN(currentImageIndex) && currentImageIndex === imagesLength - 1,
+      nextImage,
+      prevImage,
     };
   },
   {
@@ -54,34 +75,48 @@ const NextPrevImageButtons = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const { isOnFirstImage, isOnLastImage } = useAppSelector(
-    nextPrevImageButtonsSelector
-  );
+  const { isOnFirstImage, isOnLastImage, nextImage, prevImage } =
+    useAppSelector(nextPrevImageButtonsSelector);
 
   const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] =
     useState<boolean>(false);
 
-  const handleCurrentImagePreviewMouseOver = () => {
+  const handleCurrentImagePreviewMouseOver = useCallback(() => {
     setShouldShowNextPrevButtons(true);
-  };
+  }, []);
 
-  const handleCurrentImagePreviewMouseOut = () => {
+  const handleCurrentImagePreviewMouseOut = useCallback(() => {
     setShouldShowNextPrevButtons(false);
-  };
+  }, []);
 
-  const handleClickPrevButton = () => {
-    dispatch(selectPrevImage());
-  };
+  const handlePrevImage = useCallback(() => {
+    dispatch(imageSelected(prevImage));
+  }, [dispatch, prevImage]);
 
-  const handleClickNextButton = () => {
-    dispatch(selectNextImage());
-  };
+  const handleNextImage = useCallback(() => {
+    dispatch(imageSelected(nextImage));
+  }, [dispatch, nextImage]);
+
+  useHotkeys(
+    'left',
+    () => {
+      handlePrevImage();
+    },
+    [prevImage]
+  );
+
+  useHotkeys(
+    'right',
+    () => {
+      handleNextImage();
+    },
+    [nextImage]
+  );
 
   return (
     <Flex
       sx={{
         justifyContent: 'space-between',
-        zIndex: 1,
         height: '100%',
         width: '100%',
         pointerEvents: 'none',
@@ -100,7 +135,7 @@ const NextPrevImageButtons = () => {
             aria-label={t('accessibility.previousImage')}
             icon={<FaAngleLeft size={64} />}
             variant="unstyled"
-            onClick={handleClickPrevButton}
+            onClick={handlePrevImage}
             boxSize={16}
             sx={nextPrevButtonStyles}
           />
@@ -119,7 +154,7 @@ const NextPrevImageButtons = () => {
             aria-label={t('accessibility.nextImage')}
             icon={<FaAngleRight size={64} />}
             variant="unstyled"
-            onClick={handleClickNextButton}
+            onClick={handleNextImage}
             boxSize={16}
             sx={nextPrevButtonStyles}
           />

invokeai/frontend/web/src/features/gallery/hooks/useGetImageByName.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { ImageType } from 'services/api';
 import { selectResultsEntities } from '../store/resultsSlice';
 import { selectUploadsEntities } from '../store/uploadsSlice';

invokeai/frontend/web/src/features/gallery/hooks/useGetImageByUuid.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { gallerySelector } from '../store/gallerySelectors';
 
 const selector = createSelector(gallerySelector, (gallery) => ({

invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
+import { RootState } from 'app/store/store';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import { configSelector } from 'features/system/store/configSelectors';
 import { systemSelector } from 'features/system/store/systemSelectors';
@@ -7,7 +7,7 @@ import {
   activeTabNameSelector,
   uiSelector,
 } from 'features/ui/store/uiSelectors';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import {
   selectResultsAll,
   selectResultsById,
@@ -22,17 +22,22 @@ import {
 export const gallerySelector = (state: RootState) => state.gallery;
 
 export const imageGallerySelector = createSelector(
-  [gallerySelector, uiSelector, lightboxSelector, activeTabNameSelector],
-  (gallery, ui, lightbox, activeTabName) => {
+  [
+    (state: RootState) => state,
+    gallerySelector,
+    uiSelector,
+    lightboxSelector,
+    activeTabNameSelector,
+  ],
+  (state, gallery, ui, lightbox, activeTabName) => {
     const {
-      categories,
       currentCategory,
-      currentImageUuid,
       galleryImageMinimumWidth,
       galleryImageObjectFit,
       shouldAutoSwitchToNewImages,
       galleryWidth,
       shouldUseSingleGalleryColumn,
+      selectedImage,
     } = gallery;
 
     const { shouldPinGallery } = ui;
@@ -40,7 +45,6 @@ export const imageGallerySelector = createSelector(
     const { isLightboxOpen } = lightbox;
 
     return {
-      currentImageUuid,
       shouldPinGallery,
       galleryImageMinimumWidth,
       galleryImageObjectFit,
@@ -49,9 +53,7 @@ export const imageGallerySelector = createSelector(
         : `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, auto))`,
       shouldAutoSwitchToNewImages,
       currentCategory,
-      images: categories[currentCategory].images,
-      areMoreImagesAvailable:
-        categories[currentCategory].areMoreImagesAvailable,
+      images: state[currentCategory].entities,
       galleryWidth,
       shouldEnableResize:
         isLightboxOpen ||
@@ -59,6 +61,7 @@ export const imageGallerySelector = createSelector(
           ? false
           : true,
       shouldUseSingleGalleryColumn,
+      selectedImage,
     };
   },
   {
@@ -69,16 +72,16 @@ export const imageGallerySelector = createSelector(
 );
 
 export const selectedImageSelector = createSelector(
-  [gallerySelector, selectResultsEntities, selectUploadsEntities],
-  (gallery, allResults, allUploads) => {
-    const selectedImageName = gallery.selectedImageName;
+  [(state: RootState) => state, gallerySelector],
+  (state, gallery) => {
+    const selectedImage = gallery.selectedImage;
 
-    if (selectedImageName in allResults) {
-      return allResults[selectedImageName];
+    if (selectedImage?.type === 'results') {
+      return selectResultsById(state, selectedImage.name);
     }
 
-    if (selectedImageName in allUploads) {
-      return allUploads[selectedImageName];
+    if (selectedImage?.type === 'uploads') {
+      return selectUploadsById(state, selectedImage.name);
     }
   }
 );

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

@@ -1,259 +1,47 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
-import * as InvokeAI from 'app/invokeai';
 import { invocationComplete } from 'services/events/actions';
-import { InvokeTabName } from 'features/ui/store/tabMap';
-import { IRect } from 'konva/lib/types';
-import { clamp } from 'lodash';
 import { isImageOutput } from 'services/types/guards';
 import { deserializeImageResponse } from 'services/util/deserializeImageResponse';
 import { imageUploaded } from 'services/thunks/image';
-
-export type GalleryCategory = 'user' | 'result';
-
-export type AddImagesPayload = {
-  images: Array<InvokeAI._Image>;
-  areMoreImagesAvailable: boolean;
-  category: GalleryCategory;
-};
+import { SelectedImage } from 'features/parameters/store/generationSlice';
 
 type GalleryImageObjectFitType = 'contain' | 'cover';
 
-export type Gallery = {
-  images: InvokeAI._Image[];
-  latest_mtime?: number;
-  earliest_mtime?: number;
-  areMoreImagesAvailable: boolean;
-};
-
 export interface GalleryState {
   /**
-   * The selected image's unique name
-   * Use `selectedImageSelector` to access the image
+   * The selected image
    */
-  selectedImageName: string;
-  /**
-   * The currently selected image
-   * @deprecated See `state.gallery.selectedImageName`
-   */
-  currentImage?: InvokeAI._Image;
-  /**
-   * The currently selected image's uuid.
-   * @deprecated See `state.gallery.selectedImageName`, use `selectedImageSelector` to access the image
-   */
-  currentImageUuid: string;
-  /**
-   * The current progress image
-   * @deprecated See `state.system.progressImage`
-   */
-  intermediateImage?: InvokeAI._Image & {
-    boundingBox?: IRect;
-    generationMode?: InvokeTabName;
-  };
+  selectedImage?: SelectedImage;
   galleryImageMinimumWidth: number;
   galleryImageObjectFit: GalleryImageObjectFitType;
   shouldAutoSwitchToNewImages: boolean;
-  categories: {
-    user: Gallery;
-    result: Gallery;
-  };
-  currentCategory: GalleryCategory;
   galleryWidth: number;
   shouldUseSingleGalleryColumn: boolean;
+  currentCategory: 'results' | 'uploads';
 }
 
 const initialState: GalleryState = {
-  selectedImageName: '',
-  currentImageUuid: '',
+  selectedImage: undefined,
   galleryImageMinimumWidth: 64,
   galleryImageObjectFit: 'cover',
   shouldAutoSwitchToNewImages: true,
-  currentCategory: 'result',
-  categories: {
-    user: {
-      images: [],
-      latest_mtime: undefined,
-      earliest_mtime: undefined,
-      areMoreImagesAvailable: true,
-    },
-    result: {
-      images: [],
-      latest_mtime: undefined,
-      earliest_mtime: undefined,
-      areMoreImagesAvailable: true,
-    },
-  },
   galleryWidth: 300,
   shouldUseSingleGalleryColumn: false,
+  currentCategory: 'results',
 };
 
 export const gallerySlice = createSlice({
   name: 'gallery',
   initialState,
   reducers: {
-    imageSelected: (state, action: PayloadAction<string>) => {
-      state.selectedImageName = action.payload;
-    },
-    setCurrentImage: (state, action: PayloadAction<InvokeAI._Image>) => {
-      state.currentImage = action.payload;
-      state.currentImageUuid = action.payload.uuid;
-    },
-    removeImage: (
+    imageSelected: (
       state,
-      action: PayloadAction<InvokeAI.ImageDeletedResponse>
+      action: PayloadAction<SelectedImage | undefined>
     ) => {
-      const { uuid, category } = action.payload;
-
-      const tempImages = state.categories[category as GalleryCategory].images;
-
-      const newImages = tempImages.filter((image) => image.uuid !== uuid);
-
-      if (uuid === state.currentImageUuid) {
-        /**
-         * We are deleting the currently selected image.
-         *
-         * We want the new currentl selected image to be under the cursor in the
-         * gallery, so we need to do some fanagling. The currently selected image
-         * is set by its UUID, not its index in the image list.
-         *
-         * Get the currently selected image's index.
-         */
-        const imageToDeleteIndex = tempImages.findIndex(
-          (image) => image.uuid === uuid
-        );
-
-        /**
-         * New current image needs to be in the same spot, but because the gallery
-         * is sorted in reverse order, the new current image's index will actuall be
-         * one less than the deleted image's index.
-         *
-         * Clamp the new index to ensure it is valid..
-         */
-        const newCurrentImageIndex = clamp(
-          imageToDeleteIndex,
-          0,
-          newImages.length - 1
-        );
-
-        state.currentImage = newImages.length
-          ? newImages[newCurrentImageIndex]
-          : undefined;
-
-        state.currentImageUuid = newImages.length
-          ? newImages[newCurrentImageIndex].uuid
-          : '';
-      }
-
-      state.categories[category as GalleryCategory].images = newImages;
-    },
-    addImage: (
-      state,
-      action: PayloadAction<{
-        image: InvokeAI._Image;
-        category: GalleryCategory;
-      }>
-    ) => {
-      const { image: newImage, category } = action.payload;
-      const { uuid, url, mtime } = newImage;
-
-      const tempCategory = state.categories[category as GalleryCategory];
-
-      // Do not add duplicate images
-      if (tempCategory.images.find((i) => i.url === url && i.mtime === mtime)) {
-        return;
-      }
-
-      tempCategory.images.unshift(newImage);
-      if (state.shouldAutoSwitchToNewImages) {
-        state.currentImageUuid = uuid;
-        state.currentImage = newImage;
-        state.currentCategory = category;
-      }
-      state.intermediateImage = undefined;
-      tempCategory.latest_mtime = mtime;
-    },
-    setIntermediateImage: (
-      state,
-      action: PayloadAction<
-        InvokeAI._Image & {
-          boundingBox?: IRect;
-          generationMode?: InvokeTabName;
-        }
-      >
-    ) => {
-      state.intermediateImage = action.payload;
-    },
-    clearIntermediateImage: (state) => {
-      state.intermediateImage = undefined;
-    },
-    selectNextImage: (state) => {
-      const { currentImage } = state;
-      if (!currentImage) return;
-      const tempImages =
-        state.categories[currentImage.category as GalleryCategory].images;
-
-      if (currentImage) {
-        const currentImageIndex = tempImages.findIndex(
-          (i) => i.uuid === currentImage.uuid
-        );
-        if (currentImageIndex < tempImages.length - 1) {
-          const newCurrentImage = tempImages[currentImageIndex + 1];
-          state.currentImage = newCurrentImage;
-          state.currentImageUuid = newCurrentImage.uuid;
-        }
-      }
-    },
-    selectPrevImage: (state) => {
-      const { currentImage } = state;
-      if (!currentImage) return;
-      const tempImages =
-        state.categories[currentImage.category as GalleryCategory].images;
-
-      if (currentImage) {
-        const currentImageIndex = tempImages.findIndex(
-          (i) => i.uuid === currentImage.uuid
-        );
-        if (currentImageIndex > 0) {
-          const newCurrentImage = tempImages[currentImageIndex - 1];
-          state.currentImage = newCurrentImage;
-          state.currentImageUuid = newCurrentImage.uuid;
-        }
-      }
-    },
-    addGalleryImages: (state, action: PayloadAction<AddImagesPayload>) => {
-      const { images, areMoreImagesAvailable, category } = action.payload;
-      const tempImages = state.categories[category].images;
-
-      // const prevImages = category === 'user' ? state.userImages : state.resultImages
-
-      if (images.length > 0) {
-        // Filter images that already exist in the gallery
-        const newImages = images.filter(
-          (newImage) =>
-            !tempImages.find(
-              (i) => i.url === newImage.url && i.mtime === newImage.mtime
-            )
-        );
-        state.categories[category].images = tempImages
-          .concat(newImages)
-          .sort((a, b) => b.mtime - a.mtime);
-
-        if (!state.currentImage) {
-          const newCurrentImage = images[0];
-          state.currentImage = newCurrentImage;
-          state.currentImageUuid = newCurrentImage.uuid;
-        }
-
-        // keep track of the timestamps of latest and earliest images received
-        state.categories[category].latest_mtime = images[0].mtime;
-        state.categories[category].earliest_mtime =
-          images[images.length - 1].mtime;
-      }
-
-      if (areMoreImagesAvailable !== undefined) {
-        state.categories[category].areMoreImagesAvailable =
-          areMoreImagesAvailable;
-      }
+      state.selectedImage = action.payload;
+      // TODO: if the user selects an image, disable the auto switch?
+      // state.shouldAutoSwitchToNewImages = false;
     },
     setGalleryImageMinimumWidth: (state, action: PayloadAction<number>) => {
       state.galleryImageMinimumWidth = action.payload;
@@ -267,7 +55,10 @@ export const gallerySlice = createSlice({
     setShouldAutoSwitchToNewImages: (state, action: PayloadAction<boolean>) => {
       state.shouldAutoSwitchToNewImages = action.payload;
     },
-    setCurrentCategory: (state, action: PayloadAction<GalleryCategory>) => {
+    setCurrentCategory: (
+      state,
+      action: PayloadAction<'results' | 'uploads'>
+    ) => {
       state.currentCategory = action.payload;
     },
     setGalleryWidth: (state, action: PayloadAction<number>) => {
@@ -286,9 +77,11 @@ export const gallerySlice = createSlice({
      */
     builder.addCase(invocationComplete, (state, action) => {
       const { data } = action.payload;
-      if (isImageOutput(data.result)) {
-        state.selectedImageName = data.result.image.image_name;
-        state.intermediateImage = undefined;
+      if (isImageOutput(data.result) && state.shouldAutoSwitchToNewImages) {
+        state.selectedImage = {
+          name: data.result.image.image_name,
+          type: 'results',
+        };
       }
     });
 
@@ -299,27 +92,19 @@ export const gallerySlice = createSlice({
       const { response } = action.payload;
 
       const uploadedImage = deserializeImageResponse(response);
-      state.selectedImageName = uploadedImage.name;
+      state.selectedImage = { name: uploadedImage.name, type: 'uploads' };
     });
   },
 });
 
 export const {
   imageSelected,
-  addImage,
-  clearIntermediateImage,
-  removeImage,
-  setCurrentImage,
-  addGalleryImages,
-  setIntermediateImage,
-  selectNextImage,
-  selectPrevImage,
   setGalleryImageMinimumWidth,
   setGalleryImageObjectFit,
   setShouldAutoSwitchToNewImages,
-  setCurrentCategory,
   setGalleryWidth,
   setShouldUseSingleGalleryColumn,
+  setCurrentCategory,
 } = gallerySlice.actions;
 
 export default gallerySlice.reducer;

invokeai/frontend/web/src/features/gallery/store/resultsPersistDenylist.ts

@@ -5,7 +5,7 @@ import { ResultsState } from './resultsSlice';
  *
  * Currently denylisting results slice entirely, see persist config in store.ts
  */
-const itemsToDenylist: (keyof ResultsState)[] = [];
+const itemsToDenylist: (keyof ResultsState)[] = ['isLoading'];
 
 export const resultsDenylist = itemsToDenylist.map(
   (denylistItem) => `results.${denylistItem}`

invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts

@@ -1,8 +1,8 @@
 import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
-import { Image } from 'app/invokeai';
+import { Image } from 'app/types/invokeai';
 import { invocationComplete } from 'services/events/actions';
 
-import { RootState } from 'app/store';
+import { RootState } from 'app/store/store';
 import {
   receivedResultImagesPage,
   IMAGES_PER_PAGE,
@@ -65,7 +65,7 @@ const resultsSlice = createSlice({
         deserializeImageResponse(image)
       );
 
-      resultsAdapter.addMany(state, resultImages);
+      resultsAdapter.setMany(state, resultImages);
 
       state.page = page;
       state.pages = pages;
@@ -107,7 +107,7 @@ const resultsSlice = createSlice({
           },
         };
 
-        resultsAdapter.addOne(state, image);
+        resultsAdapter.setOne(state, image);
       }
     });
 

invokeai/frontend/web/src/features/gallery/store/uploadsPersistDenylist.ts

@@ -5,7 +5,7 @@ import { UploadsState } from './uploadsSlice';
  *
  * Currently denylisting uploads slice entirely, see persist config in store.ts
  */
-const itemsToDenylist: (keyof UploadsState)[] = [];
+const itemsToDenylist: (keyof UploadsState)[] = ['isLoading'];
 
 export const uploadsDenylist = itemsToDenylist.map(
   (denylistItem) => `uploads.${denylistItem}`

invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts

@@ -1,7 +1,7 @@
 import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
-import { Image } from 'app/invokeai';
+import { Image } from 'app/types/invokeai';
 
-import { RootState } from 'app/store';
+import { RootState } from 'app/store/store';
 import {
   receivedUploadImagesPage,
   IMAGES_PER_PAGE,
@@ -53,7 +53,7 @@ const uploadsSlice = createSlice({
 
       const images = items.map((image) => deserializeImageResponse(image));
 
-      uploadsAdapter.addMany(state, images);
+      uploadsAdapter.setMany(state, images);
 
       state.page = page;
       state.pages = pages;
@@ -69,7 +69,7 @@ const uploadsSlice = createSlice({
 
       const uploadedImage = deserializeImageResponse(response);
 
-      uploadsAdapter.addOne(state, uploadedImage);
+      uploadsAdapter.setOne(state, uploadedImage);
     });
 
     /**

invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import CurrentImageButtons from 'features/gallery/components/CurrentImageButtons';
 import ImageMetadataViewer from 'features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer';
@@ -10,7 +10,7 @@ import { gallerySelector } from 'features/gallery/store/gallerySelectors';
 import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { AnimatePresence, motion } from 'framer-motion';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { BiExit } from 'react-icons/bi';
 import { TransformWrapper } from 'react-zoom-pan-pinch';

invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TransformComponent, useTransformContext } from 'react-zoom-pan-pinch';
-import * as InvokeAI from 'app/invokeai';
+import * as InvokeAI from 'app/types/invokeai';
 import { useGetUrl } from 'common/util/getUrl';
 
 type ReactPanZoomProps = {

invokeai/frontend/web/src/features/lightbox/store/lightboxSelectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store';
-import { isEqual } from 'lodash';
+import { RootState } from 'app/store/store';
+import { isEqual } from 'lodash-es';
 
 export const lightboxSelector = createSelector(
   (state: RootState) => state.lightbox,

invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx

@@ -11,15 +11,15 @@ import {
   IconButton,
 } from '@chakra-ui/react';
 import { FaEllipsisV, FaPlus } from 'react-icons/fa';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { nodeAdded } from '../store/nodesSlice';
-import { cloneDeep, map } from 'lodash';
-import { RootState } from 'app/store';
+import { cloneDeep, map } from 'lodash-es';
+import { RootState } from 'app/store/store';
 import { useBuildInvocation } from '../hooks/useBuildInvocation';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/hooks/useToastWatcher';
-import { IAIIconButton } from 'exports';
 import { AnyInvocationType } from 'services/events/types';
+import IAIIconButton from 'common/components/IAIIconButton';
 
 const AddNodeMenu = () => {
   const dispatch = useAppDispatch();

invokeai/frontend/web/src/features/nodes/components/FieldTypeLegend.tsx

@@ -1,6 +1,6 @@
 import 'reactflow/dist/style.css';
 import { Tooltip, Badge, Flex } from '@chakra-ui/react';
-import { map } from 'lodash';
+import { map } from 'lodash-es';
 import { FIELDS } from '../types/constants';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/nodes/components/Flow.tsx

@@ -7,8 +7,8 @@ import {
   OnConnectStart,
   OnConnectEnd,
 } from 'reactflow';
-import { useAppDispatch, useAppSelector } from 'app/storeHooks';
-import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { RootState } from 'app/store/store';
 import {
   connectionEnded,
   connectionMade,