Merge branch 'development' into fix-prompts

docs/features/CLI.md

@@ -283,12 +283,20 @@ Some examples:
     Outputs:
     [1] outputs/img-samples/000017.4829112.gfpgan-00.png: !fix "outputs/img-samples/0000045.4829112.png" -s 50 -S  -W 512 -H 512 -C 7.5 -A k_lms -G 0.8
 
-# Model selection and importation
+### !mask
+
+This command takes an image, a text prompt, and uses the `clipseg`
+algorithm to automatically generate a mask of the area that matches
+the text prompt. It is useful for debugging the text masking process
+prior to inpainting with the `--text_mask` argument. See
+[INPAINTING.md] for details.
+
+## Model selection and importation
 
 The CLI allows you to add new models on the fly, as well as to switch
 among them rapidly without leaving the script.
 
-## !models
+### !models
 
 This prints out a list of the models defined in `config/models.yaml'.
 The active model is bold-faced
@@ -300,7 +308,7 @@ laion400m                 not loaded  <no description>
 waifu-diffusion           not loaded  Waifu Diffusion v1.3
 </pre>
 
-## !switch <model>
+### !switch <model>
 
 This quickly switches from one model to another without leaving the 
 CLI script. `invoke.py` uses a memory caching system; once a model
@@ -346,7 +354,7 @@ laion400m                 not loaded  <no description>
 waifu-diffusion               cached  Waifu Diffusion v1.3
 </pre>
 
-## !import_model <path/to/model/weights>
+### !import_model <path/to/model/weights>
 
 This command imports a new model weights file into InvokeAI, makes it
 available for image generation within the script, and writes out the
@@ -398,7 +406,7 @@ OK to import [n]? <b>y</b>
 invoke> 
 </pre>
 
-##!edit_model <name_of_model>
+###!edit_model <name_of_model>
 
 The `!edit_model` command can be used to modify a model that is
 already defined in `config/models.yaml`. Call it with the short
@@ -434,20 +442,12 @@ OK to import [n]? y
     Outputs:
     [2] outputs/img-samples/000018.2273800735.embiggen-00.png: !fix "outputs/img-samples/000017.243781548.gfpgan-00.png" -s 50 -S 2273800735 -W 512 -H 512 -C 7.5 -A k_lms --embiggen 3.0 0.75 0.25
     ```
-# History processing
+## History processing
 
 The CLI provides a series of convenient commands for reviewing previous
 actions, retrieving them, modifying them, and re-running them.
-```bash
-invoke> !fetch 0000015.8929913.png
-# the script returns the next line, ready for editing and running:
-invoke> a fantastic alien landscape -W 576 -H 512 -s 60 -A plms -C 7.5
-```
 
-Note that this command may behave unexpectedly if given a PNG file that
+### !history
-was not generated by InvokeAI.
-
-### `!history`
 
 The invoke script keeps track of all the commands you issue during a
 session, allowing you to re-run them. On Mac and Linux systems, it
@@ -472,20 +472,41 @@ invoke> !20
 invoke> watercolor of beautiful woman sitting under tree wearing broad hat and flowing garment -v0.2 -n6 -S2878767194
 ```
 
-## !fetch
+### !fetch
 
 This command retrieves the generation parameters from a previously
-generated image and either loads them into the command line.  You may
+generated image and either loads them into the command line
-provide either the name of a file in the current output directory, or
+(Linux|Mac), or prints them out in a comment for copy-and-paste
-a full file path.
+(Windows). You may provide either the name of a file in the current
+output directory, or a full file path.  Specify path to a folder with
+image png files, and wildcard *.png to retrieve the dream command used
+to generate the images, and save them to a file commands.txt for
+further processing.
 
-~~~
+This example loads the generation command for a single png file:
+
+```bash
 invoke> !fetch 0000015.8929913.png
 # the script returns the next line, ready for editing and running:
 invoke> a fantastic alien landscape -W 576 -H 512 -s 60 -A plms -C 7.5
+```
+
+This one fetches the generation commands from a batch of files and
+stores them into `selected.txt`:
+
+```bash
+invoke> !fetch outputs\selected-imgs\*.png selected.txt
+```
+
+### !replay
+
+This command replays a text file generated by !fetch or created manually
+
+~~~
+invoke> !replay outputs\selected-imgs\selected.txt
 ~~~
 
-Note that this command may behave unexpectedly if given a PNG file that
+Note that these commands may behave unexpectedly if given a PNG file that
 was not generated by InvokeAI.
 
 ### !search <search string>
@@ -503,16 +524,6 @@ invoke> !search surreal
 This clears the search history from memory and disk. Be advised that
 this operation is irreversible and does not issue any warnings!
 
-Other ! Commands
-
-### !mask
-
-This command takes an image, a text prompt, and uses the `clipseg`
-algorithm to automatically generate a mask of the area that matches
-the text prompt. It is useful for debugging the text masking process
-prior to inpainting with the `--text_mask` argument. See
-[INPAINTING.md] for details.
-
 ## Command-line editing and completion
 
 The command-line offers convenient history tracking, editing, and

frontend/dist/index.html

@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>InvokeAI - A Stable Diffusion Toolkit</title>
   <link rel="shortcut icon" type="icon" href="/assets/favicon.0d253ced.ico" />
-  <script type="module" crossorigin src="/assets/index.b06af007.js"></script>
+  <script type="module" crossorigin src="/assets/index.2d646c45.js"></script>
-  <link rel="stylesheet" href="/assets/index.58175ea1.css">
+  <link rel="stylesheet" href="/assets/index.7749e179.css">
 </head>
 
 <body>

frontend/package.json

@@ -14,6 +14,7 @@
     "@chakra-ui/react": "^2.3.1",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@radix-ui/react-context-menu": "^2.0.1",
     "@reduxjs/toolkit": "^1.8.5",
     "@types/uuid": "^8.3.4",
     "dateformat": "^5.0.3",
@@ -25,7 +26,6 @@
     "react-dropzone": "^14.2.2",
     "react-hotkeys-hook": "^3.4.7",
     "react-icons": "^4.4.0",
-    "react-masonry-css": "^1.0.16",
     "react-redux": "^8.0.2",
     "redux-persist": "^6.0.0",
     "socket.io": "^4.5.2",

frontend/src/app/socketio/emitters.ts

@@ -26,7 +26,7 @@ const makeSocketIOEmitters = (
 
       const options = { ...getState().options };
 
-      if (tabMap[options.activeTab] === 'txt2img') {
+      if (tabMap[options.activeTab] !== 'img2img') {
         options.shouldUseInitImage = false;
       }
 

frontend/src/common/components/WorkInProgress/PostProcessingWIP.tsx

@@ -7,12 +7,17 @@ export const PostProcessingWIP = () => {
       <p>
         Invoke AI offers a wide variety of post processing features. Image
         Upscaling and Face Restoration are already available in the WebUI. You
-        can access them from the Advanced Options menu of the Text To Image tab.
+        can access them from the Advanced Options menu of the Text To Image and
-        A dedicated UI will be released soon.
+        Image To Image tabs. You can also process images directly, using the
+        image action buttons above the main image display.
+      </p>
+      <p>
+        A dedicated UI will be released soon to facilitate more advanced post
+        processing workflows.
       </p>
       <p>
         The Invoke AI Command Line Interface offers various other features
-        including Embiggen, High Resolution Fixing and more.
+        including Embiggen.
       </p>
     </div>
   );

frontend/src/features/gallery/DeleteImageModal.tsx

@@ -12,6 +12,7 @@ import {
   FormControl,
   FormLabel,
   Flex,
+  useToast,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import {
@@ -57,6 +58,7 @@ const DeleteImageModal = forwardRef(
     const dispatch = useAppDispatch();
     const shouldConfirmOnDelete = useAppSelector(systemSelector);
     const cancelRef = useRef<HTMLButtonElement>(null);
+    const toast = useToast();
 
     const handleClickDelete = (e: SyntheticEvent) => {
       e.stopPropagation();
@@ -65,6 +67,12 @@ const DeleteImageModal = forwardRef(
 
     const handleDelete = () => {
       dispatch(deleteImage(image));
+      toast({
+        title: 'Image Deleted',
+        status: 'success',
+        duration: 2500,
+        isClosable: true,
+      });
       onClose();
     };
 

frontend/src/features/gallery/HoverableImage.scss

@@ -17,6 +17,12 @@
     max-height: 100%;
   }
 
+  .hoverable-image-delete-button {
+    position: absolute;
+    top: 0.25rem;
+    right: 0.25rem;
+  }
+
   .hoverable-image-content {
     display: flex;
     position: absolute;
@@ -57,3 +63,39 @@
     }
   }
 }
+
+.hoverable-image-context-menu {
+  z-index: 999;
+  padding: 0.4rem;
+  border-radius: 0.25rem;
+  background-color: var(--context-menu-bg-color);
+  box-shadow: var(--context-menu-box-shadow);
+
+  [role='menuitem'] {
+    font-size: 0.8rem;
+    line-height: 1rem;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    height: 1.75rem;
+    padding: 0 0.5rem;
+    position: relative;
+    user-select: none;
+    cursor: pointer;
+    outline: none;
+
+    &[data-disabled] {
+      color: grey;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
+    &[data-warning] {
+      color: var(--status-bad-color);
+    }
+
+    &[data-highlighted] {
+      background-color: var(--context-menu-bg-color-hover);
+    }
+  }
+}

frontend/src/features/gallery/HoverableImage.tsx

@@ -1,17 +1,27 @@
-import { Box, Icon, IconButton, Image, Tooltip } from '@chakra-ui/react';
+import {
+  Box,
+  Icon,
+  IconButton,
+  Image,
+  Tooltip,
+  useToast,
+} from '@chakra-ui/react';
 import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
 import { setCurrentImage } from './gallerySlice';
-import { FaCheck, FaImage, FaSeedling, FaTrashAlt } from 'react-icons/fa';
+import { FaCheck, FaTrashAlt } from 'react-icons/fa';
 import DeleteImageModal from './DeleteImageModal';
-import { memo, SyntheticEvent, useState } from 'react';
+import { memo, useState } from 'react';
 import {
   setActiveTab,
-  setAllParameters,
+  setAllImageToImageParameters,
+  setAllTextToImageParameters,
   setInitialImagePath,
+  setPrompt,
   setSeed,
 } from '../options/optionsSlice';
 import * as InvokeAI from '../../app/invokeai';
-import { IoArrowUndoCircleOutline } from 'react-icons/io5';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { tabMap } from '../tabs/InvokeTabs';
 
 interface HoverableImageProps {
   image: InvokeAI.Image;
@@ -27,115 +37,174 @@ const memoEqualityCheck = (
  * Gallery image component with delete/use all/use seed buttons on hover.
  */
 const HoverableImage = memo((props: HoverableImageProps) => {
-  const [isHovered, setIsHovered] = useState<boolean>(false);
   const dispatch = useAppDispatch();
-
   const activeTab = useAppSelector(
     (state: RootState) => state.options.activeTab
   );
 
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+
+  const toast = useToast();
+
   const { image, isSelected } = props;
   const { url, uuid, metadata } = image;
 
   const handleMouseOver = () => setIsHovered(true);
+
   const handleMouseOut = () => setIsHovered(false);
 
-  const handleClickSetAllParameters = (e: SyntheticEvent) => {
+  const handleUsePrompt = () => {
-    e.stopPropagation();
+    dispatch(setPrompt(image.metadata.image.prompt));
-    dispatch(setAllParameters(metadata));
+    toast({
+      title: 'Prompt Set',
+      status: 'success',
+      duration: 2500,
+      isClosable: true,
+    });
   };
 
-  const handleClickSetSeed = (e: SyntheticEvent) => {
+  const handleUseSeed = () => {
-    e.stopPropagation();
     dispatch(setSeed(image.metadata.image.seed));
+    toast({
+      title: 'Seed Set',
+      status: 'success',
+      duration: 2500,
+      isClosable: true,
+    });
   };
 
-  const handleSetInitImage = (e: SyntheticEvent) => {
+  const handleSendToImageToImage = () => {
-    e.stopPropagation();
     dispatch(setInitialImagePath(image.url));
     if (activeTab !== 1) {
       dispatch(setActiveTab(1));
     }
+    toast({
+      title: 'Sent to Image To Image',
+      status: 'success',
+      duration: 2500,
+      isClosable: true,
+    });
   };
 
-  const handleClickImage = () => dispatch(setCurrentImage(image));
+  const handleUseAllParameters = () => {
+    dispatch(setAllTextToImageParameters(metadata));
+    toast({
+      title: 'Parameters Set',
+      status: 'success',
+      duration: 2500,
+      isClosable: true,
+    });
+  };
+
+  const handleUseInitialImage = async () => {
+    // check if the image exists before setting it as initial image
+    if (metadata?.image?.init_image_path) {
+      const response = await fetch(metadata.image.init_image_path);
+      if (response.ok) {
+        dispatch(setActiveTab(tabMap.indexOf('img2img')));
+        dispatch(setAllImageToImageParameters(metadata));
+        toast({
+          title: 'Initial Image Set',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        });
+        return;
+      }
+    }
+    toast({
+      title: 'Initial Image Not Set',
+      description: 'Could not load initial image.',
+      status: 'error',
+      duration: 2500,
+      isClosable: true,
+    });
+  };
+
+  const handleSelectImage = () => dispatch(setCurrentImage(image));
 
   return (
-    <Box
+    <ContextMenu.Root>
-      position={'relative'}
+      <ContextMenu.Trigger>
-      key={uuid}
+        <Box
-      className="hoverable-image"
+          position={'relative'}
-      onMouseOver={handleMouseOver}
+          key={uuid}
-      onMouseOut={handleMouseOut}
+          className="hoverable-image"
-    >
+          onMouseOver={handleMouseOver}
-      <Image
+          onMouseOut={handleMouseOut}
-        objectFit="cover"
+        >
-        rounded={'md'}
+          <Image
-        src={url}
+            className="hoverable-image-image"
-        loading={'lazy'}
+            objectFit="cover"
-        className="hoverable-image-image"
+            rounded={'md'}
-      />
+            src={url}
-      <div className="hoverable-image-content" onClick={handleClickImage}>
+            loading={'lazy'}
-        {isSelected && (
-          <Icon
-            width={'50%'}
-            height={'50%'}
-            as={FaCheck}
-            className="hoverable-image-check"
           />
-        )}
+          <div className="hoverable-image-content" onClick={handleSelectImage}>
-      </div>
+            {isSelected && (
-      {isHovered && (
+              <Icon
-        <div className="hoverable-image-icons">
+                width={'50%'}
-          <Tooltip label={'Delete image'} hasArrow>
+                height={'50%'}
-            <DeleteImageModal image={image}>
+                as={FaCheck}
-              <IconButton
+                className="hoverable-image-check"
-                colorScheme="red"
-                aria-label="Delete image"
-                icon={<FaTrashAlt />}
-                size="xs"
-                variant={'imageHoverIconButton'}
-                fontSize={14}
               />
-            </DeleteImageModal>
+            )}
-          </Tooltip>
+          </div>
-          {['txt2img', 'img2img'].includes(image?.metadata?.image?.type) && (
+          {isHovered && (
-            <Tooltip label="Use All Parameters" hasArrow>
+            <div className="hoverable-image-delete-button">
-              <IconButton
+              <Tooltip label={'Delete image'} hasArrow>
-                aria-label="Use All Parameters"
+                <DeleteImageModal image={image}>
-                icon={<IoArrowUndoCircleOutline />}
+                  <IconButton
-                size="xs"
+                    aria-label="Delete image"
-                fontSize={18}
+                    icon={<FaTrashAlt />}
-                variant={'imageHoverIconButton'}
+                    size="xs"
-                onClickCapture={handleClickSetAllParameters}
+                    variant={'imageHoverIconButton'}
-              />
+                    fontSize={14}
-            </Tooltip>
+                  />
+                </DeleteImageModal>
+              </Tooltip>
+            </div>
           )}
-          {image?.metadata?.image?.seed !== undefined && (
+        </Box>
-            <Tooltip label="Use Seed" hasArrow>
+      </ContextMenu.Trigger>
-              <IconButton
+      <ContextMenu.Content className="hoverable-image-context-menu">
-                aria-label="Use Seed"
+        <ContextMenu.Item
-                icon={<FaSeedling />}
+          onClickCapture={handleUsePrompt}
-                size="xs"
+          disabled={image?.metadata?.image?.prompt === undefined}
-                fontSize={16}
+        >
-                variant={'imageHoverIconButton'}
+          Use Prompt
-                onClickCapture={handleClickSetSeed}
+        </ContextMenu.Item>
-              />
+
-            </Tooltip>
+        <ContextMenu.Item
-          )}
+          onClickCapture={handleUseSeed}
-          <Tooltip label="Send To Image To Image" hasArrow>
+          disabled={image?.metadata?.image?.seed === undefined}
-            <IconButton
+        >
-              aria-label="Send To Image To Image"
+          Use Seed
-              icon={<FaImage />}
+        </ContextMenu.Item>
-              size="xs"
+        <ContextMenu.Item
-              fontSize={16}
+          onClickCapture={handleUseAllParameters}
-              variant={'imageHoverIconButton'}
+          disabled={
-              onClickCapture={handleSetInitImage}
+            !['txt2img', 'img2img'].includes(image?.metadata?.image?.type)
-            />
+          }
-          </Tooltip>
+        >
-        </div>
+          Use All Parameters
-      )}
+        </ContextMenu.Item>
-    </Box>
+        <Tooltip label="Load initial image used for this generation">
+          <ContextMenu.Item
+            onClickCapture={handleUseInitialImage}
+            disabled={image?.metadata?.image?.type !== 'img2img'}
+          >
+            Use Initial Image
+          </ContextMenu.Item>
+        </Tooltip>
+        <ContextMenu.Item onClickCapture={handleSendToImageToImage}>
+          Send to Image To Image
+        </ContextMenu.Item>
+        <DeleteImageModal image={image}>
+          <ContextMenu.Item data-warning>Delete Image</ContextMenu.Item>
+        </DeleteImageModal>
+      </ContextMenu.Content>
+    </ContextMenu.Root>
   );
 }, memoEqualityCheck);
 

frontend/src/features/gallery/ImageGallery.scss

@@ -55,31 +55,37 @@
   @include HideScrollbar;
 }
 
-.masonry-grid {
+// from https://css-tricks.com/a-grid-of-logos-in-squares/
-  display: -webkit-box; /* Not needed if autoprefixing */
+.image-gallery {
-  display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: grid;
-  display: flex;
+  grid-template-columns: repeat(auto-fill, minmax(80px, auto));
-  margin-left: 0.5rem; /* gutter size offset */
+  grid-gap: 0.5rem;
-  width: auto;
+  .hoverable-image {
-}
+    padding: 0.5rem;
-.masonry-grid_column {
+    position: relative;
-  padding-left: 0.5rem; /* gutter size */
+    &::before {
-  background-clip: padding-box;
+      // for apsect ratio
-}
+      content: '';
+      display: block;
+      padding-bottom: 100%;
+    }
+    .hoverable-image-image {
+      position: absolute;
+      max-width: 100%;
 
-/* Style your items */
+      // Alternate Version
-.masonry-grid_column > .hoverable-image {
+      // top: 0;
-  /* change div to reference your elements you put in <Masonry> */
+      // bottom: 0;
-  background: var(--tab-color);
+      // right: 0;
-  margin-bottom: 0.5rem;
+      // left: 0;
-}
+      // margin: auto;
 
-// .image-gallery {
+      top: 50%;
-//   display: flex;
+      left: 50%;
-//   grid-template-columns: repeat(auto-fill, minmax(80px, auto));
+      transform: translate(-50%, -50%);
-//   gap: 0.5rem;
+    }
-//   justify-items: center;
+  }
-// }
+}
 
 .image-gallery-load-more-btn {
   background-color: var(--btn-load-more) !important;

frontend/src/features/gallery/ImageGallery.tsx

@@ -1,10 +1,9 @@
 import { Button, IconButton } from '@chakra-ui/button';
 import { Resizable } from 're-resizable';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { MdClear, MdPhotoLibrary } from 'react-icons/md';
-import Masonry from 'react-masonry-css';
 import { requestImages } from '../../app/socketio/actions';
 import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
 import IAIIconButton from '../../common/components/IAIIconButton';
@@ -27,12 +26,6 @@ export default function ImageGallery() {
 
   const dispatch = useAppDispatch();
 
-  const [column, setColumn] = useState<number | undefined>();
-
-  const handleResize = (event: MouseEvent | TouchEvent | any) => {
-    setColumn(Math.floor((window.innerWidth - event.x) / 120));
-  };
-
   const handleShowGalleryToggle = () => {
     dispatch(setShouldShowGallery(!shouldShowGallery));
   };
@@ -89,9 +82,7 @@ export default function ImageGallery() {
           minWidth={'300'}
           maxWidth={activeTab == 1 ? '300' : '600'}
           className="image-gallery-popup"
-          onResize={handleResize}
         >
-          {/* <div className="image-gallery-popup"></div> */}
           <div className="image-gallery-header">
             <h1>Your Invocations</h1>
             <IconButton
@@ -104,12 +95,7 @@ export default function ImageGallery() {
           </div>
           <div className="image-gallery-container">
             {images.length ? (
-              <Masonry
+              <div className="image-gallery">
-                className="masonry-grid"
-                columnClassName="masonry-grid_column"
-                breakpointCols={column}
-              >
-                {/* <div className="image-gallery"> */}
                 {images.map((image) => {
                   const { uuid } = image;
                   const isSelected = currentImageUuid === uuid;
@@ -121,8 +107,7 @@ export default function ImageGallery() {
                     />
                   );
                 })}
-                {/* </div> */}
+              </div>
-              </Masonry>
             ) : (
               <div className="image-gallery-container-placeholder">
                 <MdPhotoLibrary />

frontend/src/features/options/optionsSlice.ts

@@ -183,6 +183,67 @@ export const optionsSlice = createSlice({
     setSeedWeights: (state, action: PayloadAction<string>) => {
       state.seedWeights = action.payload;
     },
+    setAllTextToImageParameters: (
+      state,
+      action: PayloadAction<InvokeAI.Metadata>
+    ) => {
+      const {
+        sampler,
+        prompt,
+        seed,
+        variations,
+        steps,
+        cfg_scale,
+        threshold,
+        perlin,
+        seamless,
+        hires_fix,
+        width,
+        height,
+      } = action.payload.image;
+
+      if (variations && variations.length > 0) {
+        state.seedWeights = seedWeightsToString(variations);
+        state.shouldGenerateVariations = true;
+      } else {
+        state.shouldGenerateVariations = false;
+      }
+
+      if (seed) {
+        state.seed = seed;
+        state.shouldRandomizeSeed = false;
+      }
+
+      if (prompt) state.prompt = promptToString(prompt);
+      if (sampler) state.sampler = sampler;
+      if (steps) state.steps = steps;
+      if (cfg_scale) state.cfgScale = cfg_scale;
+      if (threshold) state.threshold = threshold;
+      if (typeof threshold === 'undefined') state.threshold = 0;
+      if (perlin) state.perlin = perlin;
+      if (typeof perlin === 'undefined') state.perlin = 0;
+      if (typeof seamless === 'boolean') state.seamless = seamless;
+      if (typeof hires_fix === 'boolean') state.hiresFix = hires_fix;
+      if (width) state.width = width;
+      if (height) state.height = height;
+    },
+    setAllImageToImageParameters: (
+      state,
+      action: PayloadAction<InvokeAI.Metadata>
+    ) => {
+      const { type, strength, fit, init_image_path, mask_image_path } =
+        action.payload.image;
+
+      if (type === 'img2img') {
+        if (init_image_path) state.initialImagePath = init_image_path;
+        if (mask_image_path) state.maskPath = mask_image_path;
+        if (strength) state.img2imgStrength = strength;
+        if (typeof fit === 'boolean') state.shouldFitToWidthHeight = fit;
+        state.shouldUseInitImage = true;
+      } else {
+        state.shouldUseInitImage = false;
+      }
+    },
     setAllParameters: (state, action: PayloadAction<InvokeAI.Metadata>) => {
       const {
         type,
@@ -226,43 +287,6 @@ export const optionsSlice = createSlice({
         state.shouldRandomizeSeed = false;
       }
 
-      /**
-       * We support arbitrary numbers of postprocessing steps, so it
-       * doesnt make sense to be include postprocessing metadata when
-       * we use all parameters. Because this code needed a bit of braining
-       * to figure out, I am leaving it, in case it is needed again.
-       */
-
-      // let postprocessingNotDone = ['gfpgan', 'esrgan'];
-      // if (postprocessing && postprocessing.length > 0) {
-      //   postprocessing.forEach(
-      //     (postprocess: InvokeAI.PostProcessedImageMetadata) => {
-      //       if (postprocess.type === 'gfpgan') {
-      //         const { strength } = postprocess;
-      //         if (strength) state.facetoolStrength = strength;
-      //         state.shouldRunFacetool = true;
-      //         postprocessingNotDone = postprocessingNotDone.filter(
-      //           (p) => p !== 'gfpgan'
-      //         );
-      //       }
-      //       if (postprocess.type === 'esrgan') {
-      //         const { scale, strength } = postprocess;
-      //         if (scale) state.upscalingLevel = scale;
-      //         if (strength) state.upscalingStrength = strength;
-      //         state.shouldRunESRGAN = true;
-      //         postprocessingNotDone = postprocessingNotDone.filter(
-      //           (p) => p !== 'esrgan'
-      //         );
-      //       }
-      //     }
-      //   );
-      // }
-
-      // postprocessingNotDone.forEach((p) => {
-      //   if (p === 'esrgan') state.shouldRunESRGAN = false;
-      //   if (p === 'gfpgan') state.shouldRunFacetool = false;
-      // });
-
       if (prompt) state.prompt = promptToString(prompt);
       if (sampler) state.sampler = sampler;
       if (steps) state.steps = steps;
@@ -346,6 +370,8 @@ export const {
   setActiveTab,
   setShouldShowImageDetails,
   setShouldShowGallery,
+  setAllTextToImageParameters,
+  setAllImageToImageParameters,
 } = optionsSlice.actions;
 
 export default optionsSlice.reducer;

frontend/src/features/tabs/ImageToImage/InitImagePreview.tsx

@@ -1,4 +1,4 @@
-import { IconButton, Image } from '@chakra-ui/react';
+import { IconButton, Image, useToast } from '@chakra-ui/react';
 import React, { SyntheticEvent } from 'react';
 import { MdClear } from 'react-icons/md';
 import { RootState, useAppDispatch, useAppSelector } from '../../../app/store';
@@ -11,10 +11,23 @@ export default function InitImagePreview() {
 
   const dispatch = useAppDispatch();
 
+  const toast = useToast();
+
   const handleClickResetInitialImage = (e: SyntheticEvent) => {
     e.stopPropagation();
     dispatch(setInitialImagePath(null));
   };
+
+  const alertMissingInitImage = () => {
+    toast({
+      title: 'Problem loading parameters',
+      description: 'Unable to load init image.',
+      status: 'error',
+      isClosable: true,
+    });
+    dispatch(setInitialImagePath(null));
+  };
+
   return (
     <div className="init-image-preview">
       <div className="init-image-preview-header">
@@ -29,7 +42,12 @@ export default function InitImagePreview() {
       </div>
       {initialImagePath && (
         <div className="init-image-image">
-          <Image fit={'contain'} src={initialImagePath} rounded={'md'} />
+          <Image
+            fit={'contain'}
+            src={initialImagePath}
+            rounded={'md'}
+            onError={alertMissingInitImage}
+          />
         </div>
       )}
     </div>

frontend/src/features/tabs/InvokeTabs.tsx

@@ -50,8 +50,13 @@ export const tab_dict = {
   },
 };
 
+// Array where index maps to the key of tab_dict
 export const tabMap = _.map(tab_dict, (tab, key) => key);
 
+// Use tabMap to generate a union type of tab names
+const tabMapTypes = [...tabMap] as const;
+export type InvokeTabName = typeof tabMapTypes[number];
+
 export default function InvokeTabs() {
   const activeTab = useAppSelector(
     (state: RootState) => state.options.activeTab

frontend/src/styles/_Colors_Dark.scss

@@ -95,4 +95,9 @@
 
   // Gallery
   --gallery-resizeable-color: rgb(36, 38, 48);
+
+  // Context Menus
+  --context-menu-bg-color: rgb(46, 48, 58);
+  --context-menu-box-shadow: none;
+  --context-menu-bg-color-hover: rgb(30, 32, 42);
 }

frontend/src/styles/_Colors_Light.scss

@@ -94,4 +94,11 @@
 
   // Gallery
   --gallery-resizeable-color: rgb(192, 194, 196);
+
+  // Context Menus
+  --context-menu-bg-color: var(--background-color);
+    --context-menu-box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  --context-menu-bg-color-hover: var(--background-color-secondary);
+
 }

frontend/yarn.lock

@@ -213,6 +213,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.13.10":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
+  integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -1122,6 +1129,26 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
+  integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
+
+"@floating-ui/dom@^0.5.3":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
+  integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
+  dependencies:
+    "@floating-ui/core" "^0.7.3"
+
+"@floating-ui/react-dom@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
+  integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
+  dependencies:
+    "@floating-ui/dom" "^0.5.3"
+    use-isomorphic-layout-effect "^1.1.1"
+
 "@humanwhocodes/config-array@^0.10.4":
   version "0.10.4"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.4.tgz#01e7366e57d2ad104feea63e72248f22015c520c"
@@ -1265,6 +1292,246 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
+"@radix-ui/primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
+  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-arrow@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz#5246adf79e97f89e819af68da51ddcf349ecf1c4"
+  integrity sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.1"
+
+"@radix-ui/react-collection@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.1.tgz#259506f97c6703b36291826768d3c1337edd1de5"
+  integrity sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-slot" "1.0.1"
+
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context-menu@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-2.0.1.tgz#aee7c81bac9983b3748284bf3925dd63796c90b4"
+  integrity sha512-7DuhU4xDcUk3AMJUlb5tHHOvJZ1GF4+snDIpjtWGlTvO0VktNKgbvBuGLlirdkYoUSI0mJXwOUcUXQapgIyefw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-menu" "2.0.1"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
+"@radix-ui/react-context@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
+  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-direction@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
+  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dismissable-layer@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.2.tgz#f04d1061bddf00b1ca304148516b9ddc62e45fb2"
+  integrity sha512-WjJzMrTWROozDqLB0uRWYvj4UuXsM/2L19EmQ3Au+IJWqwvwq9Bwd+P8ivo0Deg9JDPArR1I6MbWNi1CmXsskg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-escape-keydown" "1.0.2"
+
+"@radix-ui/react-focus-guards@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
+  integrity sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.1.tgz#faea8c25f537c5a5c38c50914b63722db0e7f951"
+  integrity sha512-Ej2MQTit8IWJiS2uuujGUmxXjF/y5xZptIIQnyd2JHLwtV0R2j9NRVoRj/1j/gJ7e3REdaBw4Hjf4a1ImhkZcQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-id@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
+  integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
+"@radix-ui/react-menu@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.1.tgz#44ebfd45d8482db678b935c0b9d1102d683372d8"
+  integrity sha512-I5FFZQxCl2fHoJ7R0m5/oWA9EX8/ttH4AbgneoCH7DAXQioFeb0XMAYnOVSp1GgJZ1Nx/mohxNQSeTMcaF1YPw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.2"
+    "@radix-ui/react-focus-guards" "1.0.0"
+    "@radix-ui/react-focus-scope" "1.0.1"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-popper" "1.0.1"
+    "@radix-ui/react-portal" "1.0.1"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-roving-focus" "1.0.1"
+    "@radix-ui/react-slot" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-popper@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.1.tgz#9fa8a6a493404afa225866a5cd75af23d141baa0"
+  integrity sha512-J4Vj7k3k+EHNWgcKrE+BLlQfpewxA7Zd76h5I0bIa+/EqaIZ3DuwrbPj49O3wqN+STnXsBuxiHLiF0iU3yfovw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "0.7.2"
+    "@radix-ui/react-arrow" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-rect" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+    "@radix-ui/rect" "1.0.0"
+
+"@radix-ui/react-portal@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.1.tgz#169c5a50719c2bb0079cf4c91a27aa6d37e5dd33"
+  integrity sha512-NY2vUWI5WENgAT1nfC6JS7RU5xRYBfjZVLq0HmgEN1Ezy3rk/UruMV4+Rd0F40PEaFC5SrLS1ixYvcYIQrb4Ig==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.1"
+
+"@radix-ui/react-presence@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
+  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
+"@radix-ui/react-primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a"
+  integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.1"
+
+"@radix-ui/react-roving-focus@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.1.tgz#475621f63aee43faa183a5270f35d49e530de3d7"
+  integrity sha512-TB76u5TIxKpqMpUAuYH2VqMhHYKa+4Vs1NHygo/llLvlffN6mLVsFhz0AnSFlSBAvTBYVHYAkHAyEt7x1gPJOA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
+"@radix-ui/react-slot@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
+  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
+"@radix-ui/react-use-callback-ref@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
+  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-use-escape-keydown@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz#09ab6455ab240b4f0a61faf06d4e5132c4d639f6"
+  integrity sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-use-layout-effect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-rect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz#b040cc88a4906b78696cd3a32b075ed5b1423b3e"
+  integrity sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.0"
+
+"@radix-ui/react-use-size@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz#a0b455ac826749419f6354dc733e2ca465054771"
+  integrity sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
+"@radix-ui/rect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.0.tgz#0dc8e6a829ea2828d53cbc94b81793ba6383bf3c"
+  integrity sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@reduxjs/toolkit@^1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.5.tgz#c14bece03ee08be88467f22dc0ecf9cf875527cd"
@@ -2850,11 +3117,6 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-masonry-css@^1.0.16:
-  version "1.0.16"
-  resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
-  integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
-
 react-redux@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.2.tgz#bc2a304bb21e79c6808e3e47c50fe1caf62f7aad"
@@ -2880,7 +3142,7 @@ react-remove-scroll-bar@^2.3.3:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
-react-remove-scroll@^2.5.4:
+react-remove-scroll@2.5.5, react-remove-scroll@^2.5.4:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
   integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
@@ -3255,6 +3517,11 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
+use-isomorphic-layout-effect@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"

ldm/invoke/readline.py

@@ -22,6 +22,7 @@ except (ImportError,ModuleNotFoundError):
 
 IMG_EXTENSIONS     = ('.png','.jpg','.jpeg','.PNG','.JPG','.JPEG','.gif','.GIF')
 WEIGHT_EXTENSIONS  = ('.ckpt','.bae')
+TEXT_EXTENSIONS  = ('.txt','.TXT')
 CONFIG_EXTENSIONS  = ('.yaml','.yml')
 COMMANDS = (
     '--steps','-s',
@@ -55,7 +56,7 @@ COMMANDS = (
     '--inpaint_replace','-r',
     '--png_compression','-z',
     '--text_mask','-tm',
-    '!fix','!fetch','!history','!search','!clear',
+    '!fix','!fetch','!replay','!history','!search','!clear',
     '!mask',
     '!models','!switch','!import_model','!edit_model'
     )
@@ -69,6 +70,9 @@ WEIGHT_COMMANDS = (
 IMG_PATH_COMMANDS = (
     '--outdir[=\s]',
     )
+TEXT_PATH_COMMANDS=(
+    '!replay',
+    )
 IMG_FILE_COMMANDS=(
     '!fix',
     '!fetch',
@@ -78,8 +82,9 @@ IMG_FILE_COMMANDS=(
     '--init_color[=\s]',
     '--embedding_path[=\s]',
     )
-path_regexp   = '('+'|'.join(IMG_PATH_COMMANDS+IMG_FILE_COMMANDS) + ')\s*\S*$'
+path_regexp   = '(' + '|'.join(IMG_PATH_COMMANDS+IMG_FILE_COMMANDS) + ')\s*\S*$'
-weight_regexp = '('+'|'.join(WEIGHT_COMMANDS) + ')\s*\S*$'
+weight_regexp = '(' + '|'.join(WEIGHT_COMMANDS) + ')\s*\S*$'
+text_regexp = '(' + '|'.join(TEXT_PATH_COMMANDS) + ')\s*\S*$'
 
 class Completer(object):
     def __init__(self, options, models=[]):
@@ -122,6 +127,9 @@ class Completer(object):
             elif re.search(weight_regexp,buffer):
                 self.matches = self._path_completions(text, state, WEIGHT_EXTENSIONS)
 
+            elif re.search(text_regexp,buffer):
+                self.matches = self._path_completions(text, state, TEXT_EXTENSIONS)
+
             # This is the first time for this text, so build a match list.
             elif text:
                 self.matches = [

ldm/modules/diffusionmodules/util.py

@@ -64,7 +64,8 @@ def make_ddim_timesteps(
 ):
     if ddim_discr_method == 'uniform':
         c = num_ddpm_timesteps // num_ddim_timesteps
-        # ddim_timesteps = np.asarray(list(range(0, num_ddpm_timesteps, c)))
+        if c < 1:
+          c = 1
         ddim_timesteps = (np.arange(0, num_ddim_timesteps) * c).astype(int)
     elif ddim_discr_method == 'quad':
         ddim_timesteps = (

main.py

@@ -439,7 +439,7 @@ class ImageLogger(Callback):
         self.rescale = rescale
         self.batch_freq = batch_frequency
         self.max_images = max_images
-        self.logger_log_images = { pl.loggers.TestTubeLogger: self._testtube, } if torch.cuda.is_available() else { }
+        self.logger_log_images = { }
         self.log_steps = [
             2**n for n in range(int(np.log2(self.batch_freq)) + 1)
         ]
@@ -451,17 +451,6 @@ class ImageLogger(Callback):
         self.log_images_kwargs = log_images_kwargs if log_images_kwargs else {}
         self.log_first_step = log_first_step
 
-    @rank_zero_only
-    def _testtube(self, pl_module, images, batch_idx, split):
-        for k in images:
-            grid = torchvision.utils.make_grid(images[k])
-            grid = (grid + 1.0) / 2.0  # -1,1 -> 0,1; c,h,w
-
-            tag = f'{split}/{k}'
-            pl_module.logger.experiment.add_image(
-                tag, grid, global_step=pl_module.global_step
-            )
-
     @rank_zero_only
     def log_local(
         self, save_dir, split, images, global_step, current_epoch, batch_idx
@@ -714,7 +703,7 @@ if __name__ == '__main__':
         # merge trainer cli with config
         trainer_config = lightning_config.get('trainer', OmegaConf.create())
         # default to ddp
-        trainer_config['accelerator'] = 'ddp'
+        trainer_config['accelerator'] = 'auto'
         for k in nondefault_trainer_args(opt):
             trainer_config[k] = getattr(opt, k)
         if not 'gpus' in trainer_config:
@@ -751,12 +740,8 @@ if __name__ == '__main__':
         trainer_kwargs = dict()
 
         # default logger configs
-        if torch.cuda.is_available():
+        def_logger = 'csv'
-            def_logger = 'testtube'
+        def_logger_target = 'CSVLogger'
-            def_logger_target = 'TestTubeLogger'
-        else:
-            def_logger = 'csv'
-            def_logger_target = 'CSVLogger'
         default_logger_cfgs = {
             'wandb': {
                 'target': 'pytorch_lightning.loggers.WandbLogger',
@@ -918,7 +903,8 @@ if __name__ == '__main__':
             config.model.base_learning_rate,
         )
         if not cpu:
-            ngpu = len(lightning_config.trainer.gpus.strip(',').split(','))
+            gpus = str(lightning_config.trainer.gpus).strip(', ').split(',')
+            ngpu = len(gpus)
         else:
             ngpu = 1
         if 'accumulate_grad_batches' in lightning_config.trainer:

scripts/invoke.py

@@ -17,9 +17,15 @@ from ldm.invoke.pngwriter import PngWriter, retrieve_metadata, write_metadata
 from ldm.invoke.image_util import make_grid
 from ldm.invoke.log import write_log
 from omegaconf import OmegaConf
+from pathlib import Path
+
+# global used in multiple functions (fix)
+infile = None
 
 def main():
     """Initialize command-line parsers and the diffusion model"""
+    global infile
+    
     opt  = Args()
     args = opt.parse_args()
     if not args:
@@ -48,7 +54,6 @@ def main():
         os.makedirs(opt.outdir)
 
     # load the infile as a list of lines
-    infile = None
     if opt.infile:
         try:
             if os.path.isfile(opt.infile):
@@ -96,14 +101,16 @@ def main():
         )
 
     try:
-        main_loop(gen, opt, infile)
+        main_loop(gen, opt)
     except KeyboardInterrupt:
         print("\ngoodbye!")
 
 # TODO: main_loop() has gotten busy. Needs to be refactored.
-def main_loop(gen, opt, infile):
+def main_loop(gen, opt):
     """prompt/read/execute loop"""
+    global infile
     done = False
+    doneAfterInFile = infile is not None
     path_filter = re.compile(r'[<>:"/\\|?*]')
     last_results = list()
     model_config = OmegaConf.load(opt.conf)
@@ -130,7 +137,8 @@ def main_loop(gen, opt, infile):
         try:
             command = get_next_command(infile)
         except EOFError:
-            done = True
+            done = infile is None or doneAfterInFile
+            infile = None
             continue
 
         # skip empty lines
@@ -368,7 +376,10 @@ def main_loop(gen, opt, infile):
 
     print('goodbye!')
 
+# TO DO: remove repetitive code and the awkward command.replace() trope
+# Just do a simple parse of the command!
 def do_command(command:str, gen, opt:Args, completer) -> tuple:
+    global infile
     operation = 'generate'   # default operation, alternative is 'postprocess'
 
     if command.startswith('!dream'):   # in case a stored prompt still contains the !dream command
@@ -414,8 +425,16 @@ def do_command(command:str, gen, opt:Args, completer) -> tuple:
         operation = None
 
     elif command.startswith('!fetch'):
-        file_path = command.replace('!fetch ','',1)
+        file_path = command.replace('!fetch','',1).strip()
         retrieve_dream_command(opt,file_path,completer)
+        completer.add_history(command)
+        operation = None
+
+    elif command.startswith('!replay'):
+        file_path = command.replace('!replay','',1).strip()
+        if infile is None and os.path.isfile(file_path):
+            infile = open(file_path, 'r', encoding='utf-8')
+        completer.add_history(command)
         operation = None
 
     elif command.startswith('!history'):
@@ -423,7 +442,7 @@ def do_command(command:str, gen, opt:Args, completer) -> tuple:
         operation = None
 
     elif command.startswith('!search'):
-        search_str = command.replace('!search ','',1)
+        search_str = command.replace('!search','',1).strip()
         completer.show_history(search_str)
         operation = None
 
@@ -723,27 +742,63 @@ def make_step_callback(gen, opt, prefix):
             image.save(filename,'PNG')
     return callback
     
-def retrieve_dream_command(opt,file_path,completer):
+def retrieve_dream_command(opt,command,completer):
     '''
     Given a full or partial path to a previously-generated image file,
     will retrieve and format the dream command used to generate the image,
     and pop it into the readline buffer (linux, Mac), or print out a comment
     for cut-and-paste (windows)
+    Given a wildcard path to a folder with image png files, 
+    will retrieve and format the dream command used to generate the images,
+    and save them to a file commands.txt for further processing
     '''
+    if len(command) == 0:
+        return
+    tokens = command.split()
+    if len(tokens) > 1:
+        outfilepath = tokens[1]
+    else:
+        outfilepath = "commands.txt"
+        
+    file_path = tokens[0]    
     dir,basename = os.path.split(file_path)
     if len(dir) == 0:
-        path = os.path.join(opt.outdir,basename)
+        dir = opt.outdir
-    else:
+        
-        path = file_path
+    outdir,outname = os.path.split(outfilepath)    
+    if len(outdir) == 0:
+        outfilepath = os.path.join(dir,outname)
     try:
-        cmd = dream_cmd_from_png(path)
+        paths = list(Path(dir).glob(basename))
-    except OSError:
+    except ValueError:
-        print(f'** {path}: file could not be read')
+        print(f'## "{basename}": unacceptable pattern')
         return
-    except (KeyError, AttributeError):
+ 
-        print(f'** {path}: file has no metadata')
+    commands = []
-        return
+    for path in paths:
-    completer.set_line(cmd)
+        try:
+            cmd = dream_cmd_from_png(path)
+        except OSError:
+            print(f'## {path}: file could not be read')
+            continue
+        except (KeyError, AttributeError, IndexError):
+            print(f'## {path}: file has no metadata')
+            continue
+        except:
+            print(f'## {path}: file could not be processed')
+            continue
+            
+        commands.append(f'# {path}')
+        commands.append(cmd)
+ 
+    with open(outfilepath, 'w', encoding='utf-8') as f:
+        f.write('\n'.join(commands))
+    print(f'>> File {outfilepath} with commands created')
+
+    if len(commands) == 2:
+       completer.set_line(commands[1])
+
+######################################
 
 if __name__ == '__main__':
     main()