Merge branch 'main' of github.com:invoke-ai/InvokeAI into main

fix typo

.github/workflows/test-invoke-conda.yml

@@ -1,4 +1,4 @@
-name: Test Dream with Conda
+name: Test Invoke with Conda
 on:
   push:
     branches:
@@ -9,7 +9,7 @@ jobs:
     strategy:
       matrix:
         os: [ ubuntu-latest, macos-12 ]
-    name: Test dream.py on ${{ matrix.os }} with conda
+    name: Test invoke.py on ${{ matrix.os }} with conda
     runs-on: ${{ matrix.os }}
     steps:
       - run: |
@@ -85,9 +85,9 @@ jobs:
           fi
           # Utterly hacky, but I don't know how else to do this
           if [[ ${{ github.ref }} == 'refs/heads/master' ]]; then
-            time ${{ steps.vars.outputs.PYTHON_BIN }} scripts/dream.py --from_file tests/preflight_prompts.txt
+            time ${{ steps.vars.outputs.PYTHON_BIN }} scripts/invoke.py --from_file tests/preflight_prompts.txt
           elif [[ ${{ github.ref }} == 'refs/heads/development' ]]; then
-            time ${{ steps.vars.outputs.PYTHON_BIN }} scripts/dream.py --from_file tests/dev_prompts.txt
+            time ${{ steps.vars.outputs.PYTHON_BIN }} scripts/invoke.py --from_file tests/dev_prompts.txt
           fi
           mkdir -p outputs/img-samples
       - name: Archive results

README.md

@@ -24,7 +24,7 @@ _This repository was formally known as lstein/stable-diffusion_
 [CI checks on dev badge]: https://flat.badgen.net/github/checks/invoke-ai/InvokeAI/development?label=CI%20status%20on%20dev&cache=900&icon=github
 [CI checks on dev link]: https://github.com/invoke-ai/InvokeAI/actions?query=branch%3Adevelopment
 [CI checks on main badge]: https://flat.badgen.net/github/checks/invoke-ai/InvokeAI/main?label=CI%20status%20on%20main&cache=900&icon=github
-[CI checks on main link]: https://github.com/invoke-ai/InvokeAI/actions/workflows/test-dream-conda.yml
+[CI checks on main link]: https://github.com/invoke-ai/InvokeAI/actions/workflows/test-invoke-conda.yml
 [discord badge]: https://flat.badgen.net/discord/members/ZmtBAhwWhy?icon=discord
 [discord link]: https://discord.gg/ZmtBAhwWhy
 [github forks badge]: https://flat.badgen.net/github/forks/invoke-ai/InvokeAI?icon=github
@@ -41,10 +41,13 @@ _This repository was formally known as lstein/stable-diffusion_
 [latest release link]: https://github.com/invoke-ai/InvokeAI/releases
 </div>
 
-This is a fork of [CompVis/stable-diffusion](https://github.com/CompVis/stable-diffusion), the open
-source text-to-image generator. It provides a streamlined process with various new features and
-options to aid the image generation process. It runs on Windows, Mac and Linux machines, and runs on
-GPU cards with as little as 4 GB or RAM.
+This is a fork of
+[CompVis/stable-diffusion](https://github.com/CompVis/stable-diffusion),
+the open source text-to-image generator. It provides a streamlined
+process with various new features and options to aid the image
+generation process. It runs on Windows, Mac and Linux machines, with
+GPU cards with as little as 4 GB of RAM. It provides both a polished
+Web interface, and an easy-to-use command-line interface.
 
 _Note: This fork is rapidly evolving. Please use the
 [Issues](https://github.com/invoke-ai/InvokeAI/issues) tab to report bugs and make feature
@@ -90,20 +93,26 @@ You wil need one of the following:
 
 - At least 6 GB of free disk space for the machine learning model, Python, and all its dependencies.
 
-#### Note
+**Note**
+
+If you have a Nvidia 10xx series card (e.g. the 1080ti), please
+run the dream script in full-precision mode as shown below.
+
+Similarly, specify full-precision mode on Apple M1 hardware.
 
 Precision is auto configured based on the device. If however you encounter
 errors like 'expected type Float but found Half' or 'not implemented for Half'
-you can try starting `dream.py` with the `--precision=float32` flag:
+you can try starting `invoke.py` with the `--precision=float32` flag:
 
 ```bash
-(ldm) ~/stable-diffusion$ python scripts/dream.py --precision=float32
+(ldm) ~/stable-diffusion$ python scripts/invoke.py --precision=float32
 ```
 
 ### Features
 
 #### Major Features
 
+- [Web Server](docs/features/WEB.md)
 - [Interactive Command Line Interface](docs/features/CLI.md)
 - [Image To Image](docs/features/IMG2IMG.md)
 - [Inpainting Support](docs/features/INPAINTING.md)
@@ -111,7 +120,6 @@ you can try starting `dream.py` with the `--precision=float32` flag:
 - [Upscaling, face-restoration and outpainting](docs/features/POSTPROCESS.md)
 - [Seamless Tiling](docs/features/OTHER.md#seamless-tiling)
 - [Google Colab](docs/features/OTHER.md#google-colab)
-- [Web Server](docs/features/WEB.md)
 - [Reading Prompts From File](docs/features/PROMPTS.md#reading-prompts-from-a-file)
 - [Shortcut: Reusing Seeds](docs/features/OTHER.md#shortcuts-reusing-seeds)
 - [Prompt Blending](docs/features/PROMPTS.md#prompt-blending)
@@ -128,9 +136,31 @@ you can try starting `dream.py` with the `--precision=float32` flag:
 
 ### Latest Changes
 
-- vNEXT (TODO 2022)
+- v2.0.0 (9 October 2022)
 
-  - Deprecated `--full_precision` / `-F`. Simply omit it and `dream.py` will auto
+  - `dream.py` script renamed `invoke.py`. A `dream.py` script wrapper remains
+    for backward compatibility.
+  - Completely new WebGUI - launch with `python3 scripts/invoke.py --web`
+  - Support for <a href="https://github.com/invoke-ai/InvokeAI/blob/main/docs/features/INPAINTING.md">inpainting</a> and <a href="https://github.com/invoke-ai/InvokeAI/blob/main/docs/features/OUTPAINTING.md">outpainting</a>
+  - img2img runs on all k* samplers
+  - Support for <a href="https://github.com/invoke-ai/InvokeAI/blob/main/docs/features/PROMPTS.md#negative-and-unconditioned-prompts">negative prompts</a>
+  - Support for CodeFormer face reconstruction
+  - Support for Textual Inversion on Macintoshes
+  - Support in both WebGUI and CLI for <a href="https://github.com/invoke-ai/InvokeAI/blob/main/docs/features/POSTPROCESS.md">post-processing of previously-generated images</a>
+    using facial reconstruction, ESRGAN upscaling, outcropping (similar to DALL-E infinite canvas),
+    and "embiggen" upscaling. See the `!fix` command.
+  - New `--hires` option on `invoke>` line allows <a href="https://github.com/invoke-ai/InvokeAI/blob/main/docs/features/CLI.m#this-is-an-example-of-txt2img">larger images to be created without duplicating elements</a>, at the cost of some performance.
+  - New `--perlin` and `--threshold` options allow you to add and control variation
+    during image generation (see <a href="https://github.com/invoke-ai/InvokeAI/blob/main/docs/features/OTHER.md#thresholding-and-perlin-noise-initialization-options">Thresholding and Perlin Noise Initialization</a>
+  - Extensive metadata now written into PNG files, allowing reliable regeneration of images
+    and tweaking of previous settings.
+  - Command-line completion in `invoke.py` now works on Windows, Linux and Mac platforms.
+  - Improved <a href="https://github.com/invoke-ai/InvokeAI/blob/main/docs/features/CLI.m">command-line completion behavior</a>.
+    New commands added:
+       * List command-line history with `!history`
+       * Search command-line history with `!search`
+       * Clear history with `!clear`
+  - Deprecated `--full_precision` / `-F`. Simply omit it and `invoke.py` will auto
     configure. To switch away from auto use the new flag like `--precision=float32`.
 
 - v1.14 (11 September 2022)
@@ -156,7 +186,7 @@ you can try starting `dream.py` with the `--precision=float32` flag:
   - A new configuration file scheme that allows new models (including upcoming
     stable-diffusion-v1.5) to be added without altering the code.
     ([David Wager](https://github.com/maddavid12))
-  - Can specify --grid on dream.py command line as the default.
+  - Can specify --grid on invoke.py command line as the default.
   - Miscellaneous internal bug and stability fixes.
   - Works on M1 Apple hardware.
   - Multiple bug fixes.

backend/invoke_ai_web_server.py

@@ -12,9 +12,9 @@ from PIL import Image
 from uuid import uuid4
 from threading import Event
 
-from ldm.dream.args import Args, APP_ID, APP_VERSION, calculate_init_img_hash
-from ldm.dream.pngwriter import PngWriter, retrieve_metadata
-from ldm.dream.conditioning import split_weighted_subprompts
+from ldm.invoke.args import Args, APP_ID, APP_VERSION, calculate_init_img_hash
+from ldm.invoke.pngwriter import PngWriter, retrieve_metadata
+from ldm.invoke.conditioning import split_weighted_subprompts
 
 from backend.modules.parameters import parameters_to_command
 
@@ -49,24 +49,16 @@ class InvokeAIWebServer:
         engineio_logger = True if args.web_verbose else False
         max_http_buffer_size = 10000000
 
-        # CORS Allowed Setup
-        cors_allowed_origins = [
-            'http://127.0.0.1:5173',
-            'http://localhost:5173',
-        ]
-        additional_allowed_origins = (
-            opt.cors if opt.cors else []
-        )  # additional CORS allowed origins
-        if self.host == '127.0.0.1':
-            cors_allowed_origins.extend(
-                [
-                    f'http://{self.host}:{self.port}',
-                    f'http://localhost:{self.port}',
-                ]
-            )
-        cors_allowed_origins = (
-            cors_allowed_origins + additional_allowed_origins
-        )
+        socketio_args = {
+            'logger': logger,
+            'engineio_logger': engineio_logger,
+            'max_http_buffer_size': max_http_buffer_size,
+            'ping_interval': (50, 50),
+            'ping_timeout': 60,
+        }
+
+        if opt.cors:
+            socketio_args['cors_allowed_origins'] = opt.cors
 
         self.app = Flask(
             __name__, static_url_path='', static_folder='../frontend/dist/'
@@ -74,12 +66,7 @@ class InvokeAIWebServer:
 
         self.socketio = SocketIO(
             self.app,
-            logger=logger,
-            engineio_logger=engineio_logger,
-            max_http_buffer_size=max_http_buffer_size,
-            cors_allowed_origins=cors_allowed_origins,
-            ping_interval=(50, 50),
-            ping_timeout=60,
+            **socketio_args
         )
 
         # Keep Server Alive Route
@@ -160,7 +147,7 @@ class InvokeAIWebServer:
         self.init_image_path = os.path.join(self.result_path, 'init-images/')
         self.mask_image_path = os.path.join(self.result_path, 'mask-images/')
         # txt log
-        self.log_path = os.path.join(self.result_path, 'dream_log.txt')
+        self.log_path = os.path.join(self.result_path, 'invoke_log.txt')
         # make all output paths
         [
             os.makedirs(path, exist_ok=True)

backend/modules/create_cmd_parser.py

@@ -1,6 +1,6 @@
 import argparse
 import os
-from ldm.dream.args import PRECISION_CHOICES
+from ldm.invoke.args import PRECISION_CHOICES
 
 
 def create_cmd_parser():

backend/modules/parameters.py

@@ -15,7 +15,7 @@ SAMPLER_CHOICES = [
 
 def parameters_to_command(params):
     """
-    Converts dict of parameters into a `dream.py` REPL command.
+    Converts dict of parameters into a `invoke.py` REPL command.
     """
 
     switches = list()

backend/server.py

@@ -30,10 +30,10 @@ from send2trash import send2trash
 
 
 from ldm.generate import Generate
-from ldm.dream.restoration import Restoration
-from ldm.dream.pngwriter import PngWriter, retrieve_metadata
-from ldm.dream.args import APP_ID, APP_VERSION, calculate_init_img_hash
-from ldm.dream.conditioning import split_weighted_subprompts
+from ldm.invoke.restoration import Restoration
+from ldm.invoke.pngwriter import PngWriter, retrieve_metadata
+from ldm.invoke.args import APP_ID, APP_VERSION, calculate_init_img_hash
+from ldm.invoke.conditioning import split_weighted_subprompts
 
 from modules.parameters import parameters_to_command
 
@@ -125,7 +125,7 @@ class CanceledException(Exception):
 
 try:
     gfpgan, codeformer, esrgan = None, None, None
-    from ldm.dream.restoration.base import Restoration
+    from ldm.invoke.restoration.base import Restoration
 
     restoration = Restoration()
     gfpgan, codeformer = restoration.load_face_restore_models()
@@ -164,7 +164,7 @@ init_image_path = os.path.join(result_path, "init-images/")
 mask_image_path = os.path.join(result_path, "mask-images/")
 
 # txt log
-log_path = os.path.join(result_path, "dream_log.txt")
+log_path = os.path.join(result_path, "invoke_log.txt")
 
 # make all output paths
 [

configs/stable-diffusion/v1-inference.yaml

@@ -32,7 +32,7 @@ model:
         placeholder_strings: ["*"]
         initializer_words: ['face', 'man', 'photo', 'africanmale']
         per_image_tokens: false
-        num_vectors_per_token: 6
+        num_vectors_per_token: 1
         progressive_words: False
 
     unet_config:

docs/CHANGELOG.md

@@ -5,9 +5,9 @@
 - Supports a Google Colab notebook for a standalone server running on Google hardware [Arturo Mendivil](https://github.com/artmen1516)
 - WebUI supports GFPGAN/ESRGAN facial reconstruction and upscaling [Kevin Gibbons](https://github.com/bakkot)
 - WebUI supports incremental display of in-progress images during generation [Kevin Gibbons](https://github.com/bakkot)
-- Output directory can be specified on the dream> command line.
+- Output directory can be specified on the invoke> command line.
 - The grid was displaying duplicated images when not enough images to fill the final row [Muhammad Usama](https://github.com/SMUsamaShah)
-- Can specify --grid on dream.py command line as the default.
+- Can specify --grid on invoke.py command line as the default.
 - Miscellaneous internal bug and stability fixes.
 
 ---
@@ -16,13 +16,13 @@
 
 - Improved file handling, including ability to read prompts from standard input.
   (kudos to [Yunsaki](https://github.com/yunsaki)
-- The web server is now integrated with the dream.py script. Invoke by adding --web to
-  the dream.py command arguments.
+- The web server is now integrated with the invoke.py script. Invoke by adding --web to
+  the invoke.py command arguments.
 - Face restoration and upscaling via GFPGAN and Real-ESGAN are now automatically
   enabled if the GFPGAN directory is located as a sibling to Stable Diffusion.
   VRAM requirements are modestly reduced. Thanks to both [Blessedcoolant](https://github.com/blessedcoolant) and
   [Oceanswave](https://github.com/oceanswave) for their work on this.
-- You can now swap samplers on the dream> command line. [Blessedcoolant](https://github.com/blessedcoolant)
+- You can now swap samplers on the invoke> command line. [Blessedcoolant](https://github.com/blessedcoolant)
 
 ---
 
@@ -32,7 +32,7 @@
 - You now can specify a seed of -1 to use the previous image's seed, -2 to use the seed for the image generated before that, etc.
   Seed memory only extends back to the previous command, but will work on all images generated with the -n# switch.
 - Variant generation support temporarily disabled pending more general solution.
-- Created a feature branch named **yunsaki-morphing-dream** which adds experimental support for
+- Created a feature branch named **yunsaki-morphing-invoke** which adds experimental support for
   iteratively modifying the prompt and its parameters. Please see[ Pull Request #86](https://github.com/lstein/stable-diffusion/pull/86)
   for a synopsis of how this works. Note that when this feature is eventually added to the main branch, it will may be modified
   significantly.
@@ -57,7 +57,7 @@
 
 ## v1.08 (24 August 2022)
 
-- Escape single quotes on the dream> command before trying to parse. This avoids
+- Escape single quotes on the invoke> command before trying to parse. This avoids
   parse errors.
 - Removed instruction to get Python3.8 as first step in Windows install.
   Anaconda3 does it for you.
@@ -94,7 +94,7 @@
   be regenerated with the indicated key
 
 - It should no longer be possible for one image to overwrite another
-- You can use the "cd" and "pwd" commands at the dream> prompt to set and retrieve
+- You can use the "cd" and "pwd" commands at the invoke> prompt to set and retrieve
   the path of the output directory.
 
 ---
@@ -128,7 +128,7 @@
 - added k_lms sampling.
   **Please run "conda env update" to load the k_lms dependencies!!**
 - use half precision arithmetic by default, resulting in faster execution and lower memory requirements
-  Pass argument --full_precision to dream.py to get slower but more accurate image generation
+  Pass argument --full_precision to invoke.py to get slower but more accurate image generation
 
 ---
 

docs/features/CHANGELOG.md

@@ -4,7 +4,7 @@ title: Changelog
 
 # :octicons-log-16: Changelog
 
-## v1.13 <small>(in process)</small>
+## v1.13
 
 - Supports a Google Colab notebook for a standalone server running on Google
   hardware [Arturo Mendivil](https://github.com/artmen1516)
@@ -12,10 +12,10 @@ title: Changelog
   [Kevin Gibbons](https://github.com/bakkot)
 - WebUI supports incremental display of in-progress images during generation
   [Kevin Gibbons](https://github.com/bakkot)
-- Output directory can be specified on the dream> command line.
+- Output directory can be specified on the invoke> command line.
 - The grid was displaying duplicated images when not enough images to fill the
   final row [Muhammad Usama](https://github.com/SMUsamaShah)
-- Can specify --grid on dream.py command line as the default.
+- Can specify --grid on invoke.py command line as the default.
 - Miscellaneous internal bug and stability fixes.
 
 ---
@@ -24,14 +24,14 @@ title: Changelog
 
 - Improved file handling, including ability to read prompts from standard input.
   (kudos to [Yunsaki](https://github.com/yunsaki)
-- The web server is now integrated with the dream.py script. Invoke by adding
-  --web to the dream.py command arguments.
+- The web server is now integrated with the invoke.py script. Invoke by adding
+  --web to the invoke.py command arguments.
 - Face restoration and upscaling via GFPGAN and Real-ESGAN are now automatically
   enabled if the GFPGAN directory is located as a sibling to Stable Diffusion.
   VRAM requirements are modestly reduced. Thanks to both
   [Blessedcoolant](https://github.com/blessedcoolant) and
   [Oceanswave](https://github.com/oceanswave) for their work on this.
-- You can now swap samplers on the dream> command line.
+- You can now swap samplers on the invoke> command line.
   [Blessedcoolant](https://github.com/blessedcoolant)
 
 ---
@@ -45,7 +45,7 @@ title: Changelog
   back to the previous command, but will work on all images generated with the
   -n# switch.
 - Variant generation support temporarily disabled pending more general solution.
-- Created a feature branch named **yunsaki-morphing-dream** which adds
+- Created a feature branch named **yunsaki-morphing-invoke** which adds
   experimental support for iteratively modifying the prompt and its parameters.
   Please
   see[ Pull Request #86](https://github.com/lstein/stable-diffusion/pull/86) for
@@ -75,7 +75,7 @@ title: Changelog
 
 ## v1.08 <small>(24 August 2022)</small>
 
-- Escape single quotes on the dream> command before trying to parse. This avoids
+- Escape single quotes on the invoke> command before trying to parse. This avoids
   parse errors.
 - Removed instruction to get Python3.8 as first step in Windows install.
   Anaconda3 does it for you.
@@ -112,7 +112,7 @@ title: Changelog
   can be regenerated with the indicated key
 
 - It should no longer be possible for one image to overwrite another
-- You can use the "cd" and "pwd" commands at the dream> prompt to set and
+- You can use the "cd" and "pwd" commands at the invoke> prompt to set and
   retrieve the path of the output directory.
 
 ## v1.04 <small>(22 August 2022 - after the drop)</small>
@@ -139,5 +139,5 @@ title: Changelog
 - added k_lms sampling. **Please run "conda env update -f environment.yaml" to
   load the k_lms dependencies!!**
 - use half precision arithmetic by default, resulting in faster execution and
-  lower memory requirements Pass argument --full_precision to dream.py to get
+  lower memory requirements Pass argument --full_precision to invoke.py to get
   slower but more accurate image generation

docs/features/CLI.md

@@ -8,8 +8,8 @@ hide:
 
 ## **Interactive Command Line Interface**
 
-The `dream.py` script, located in `scripts/dream.py`, provides an interactive
-interface to image generation similar to the "dream mothership" bot that Stable
+The `invoke.py` script, located in `scripts/dream.py`, provides an interactive
+interface to image generation similar to the "invoke mothership" bot that Stable
 AI provided on its Discord server.
 
 Unlike the `txt2img.py` and `img2img.py` scripts provided in the original
@@ -34,21 +34,21 @@ The script is confirmed to work on Linux, Windows and Mac systems.
     currently rudimentary, but a much better replacement is on its way.
 
 ```bash
-(ldm) ~/stable-diffusion$ python3 ./scripts/dream.py
+(ldm) ~/stable-diffusion$ python3 ./scripts/invoke.py
 * Initializing, be patient...
 Loading model from models/ldm/text2img-large/model.ckpt
 (...more initialization messages...)
 
 * Initialization done! Awaiting your command...
-dream> ashley judd riding a camel -n2 -s150
+invoke> ashley judd riding a camel -n2 -s150
 Outputs:
    outputs/img-samples/00009.png: "ashley judd riding a camel" -n2 -s150 -S 416354203
    outputs/img-samples/00010.png: "ashley judd riding a camel" -n2 -s150 -S 1362479620
 
-dream> "there's a fly in my soup" -n6 -g
+invoke> "there's a fly in my soup" -n6 -g
     outputs/img-samples/00011.png: "there's a fly in my soup" -n6 -g -S 2685670268
     seeds for individual rows: [2685670268, 1216708065, 2335773498, 822223658, 714542046, 3395302430]
-dream> q
+invoke> q
 
 # this shows how to retrieve the prompt stored in the saved image's metadata
 (ldm) ~/stable-diffusion$ python ./scripts/images2prompt.py outputs/img_samples/*.png
@@ -57,10 +57,10 @@ dream> q
 00011.png: "there's a fly in my soup" -n6 -g -S 2685670268
 ```
 
-![dream-py-demo](../assets/dream-py-demo.png)
+![invoke-py-demo](../assets/dream-py-demo.png)
 
-The `dream>` prompt's arguments are pretty much identical to those used in the
-Discord bot, except you don't need to type "!dream" (it doesn't hurt if you do).
+The `invoke>` prompt's arguments are pretty much identical to those used in the
+Discord bot, except you don't need to type "!invoke" (it doesn't hurt if you do).
 A significant change is that creation of individual images is now the default
 unless `--grid` (`-g`) is given. A full list is given in
 [List of prompt arguments](#list-of-prompt-arguments).
@@ -73,7 +73,7 @@ the location of the model weight files.
 
 ### List of arguments recognized at the command line
 
-These command-line arguments can be passed to `dream.py` when you first run it
+These command-line arguments can be passed to `invoke.py` when you first run it
 from the Windows, Mac or Linux command line. Some set defaults that can be
 overridden on a per-prompt basis (see [List of prompt arguments]
 (#list-of-prompt-arguments). Others
@@ -112,15 +112,15 @@ These arguments are deprecated but still work:
 | --laion400m        | -l         | False               | Use older LAION400m weights; use `--model=laion400m` instead |
 
 **A note on path names:** On Windows systems, you may run into
-  problems when passing the dream script standard backslashed path
+  problems when passing the invoke script standard backslashed path
   names because the Python interpreter treats "\" as an escape.
   You can either double your slashes (ick): C:\\\\path\\\\to\\\\my\\\\file, or
   use Linux/Mac style forward slashes (better): C:/path/to/my/file.
 
 ## List of prompt arguments
 
-After the dream.py script initializes, it will present you with a
-**dream>** prompt. Here you can enter information to generate images
+After the invoke.py script initializes, it will present you with a
+**invoke>** prompt. Here you can enter information to generate images
 from text (txt2img), to embellish an existing image or sketch
 (img2img), or to selectively alter chosen regions of the image
 (inpainting).
@@ -128,13 +128,13 @@ from text (txt2img), to embellish an existing image or sketch
 ### This is an example of txt2img:
 
 ~~~~
-dream> waterfall and rainbow -W640 -H480
+invoke> waterfall and rainbow -W640 -H480
 ~~~~
 
 This will create the requested image with the dimensions 640 (width)
 and 480 (height).
 
-Here are the dream> command that apply to txt2img:
+Here are the invoke> command that apply to txt2img:
 
 | Argument           |  Shortcut  |  Default            |  Description |
 |--------------------|------------|---------------------|--------------|
@@ -167,7 +167,7 @@ the nearest multiple of 64.
 ### This is an example of img2img:	
 
 ~~~~
-dream> waterfall and rainbow -I./vacation-photo.png -W640 -H480 --fit
+invoke> waterfall and rainbow -I./vacation-photo.png -W640 -H480 --fit
 ~~~~
 
 This will modify the indicated vacation photograph by making it more
@@ -188,7 +188,7 @@ accepts additional options:
 ### This is an example of inpainting:
 
 ~~~~
-dream> waterfall and rainbow -I./vacation-photo.png -M./vacation-mask.png -W640 -H480 --fit
+invoke> waterfall and rainbow -I./vacation-photo.png -M./vacation-mask.png -W640 -H480 --fit
 ~~~~
 
 This will do the same thing as img2img, but image alterations will
@@ -224,20 +224,20 @@ Some examples:
 
 Upscale to 4X its original size and fix faces using codeformer:
 ~~~
-dream> !fix 0000045.4829112.png -G1 -U4 -ft codeformer
+invoke> !fix 0000045.4829112.png -G1 -U4 -ft codeformer
 ~~~
 
 Use the GFPGAN algorithm to fix faces, then upscale to 3X using --embiggen:
 
 ~~~
-dream> !fix 0000045.4829112.png -G0.8 -ft gfpgan
+invoke> !fix 0000045.4829112.png -G0.8 -ft gfpgan
 >> fixing outputs/img-samples/0000045.4829112.png
 >> retrieved seed 4829112 and prompt "boy enjoying a banana split"
 >> GFPGAN - Restoring Faces for image seed:4829112
 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
 
-dream> !fix 000017.4829112.gfpgan-00.png --embiggen 3
+invoke> !fix 000017.4829112.gfpgan-00.png --embiggen 3
 ...lots of text...
 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
@@ -251,9 +251,9 @@ provide either the name of a file in the current output directory, or
 a full file path.
 
 ~~~
-dream> !fetch 0000015.8929913.png
+invoke> !fetch 0000015.8929913.png
 # the script returns the next line, ready for editing and running:
-dream> a fantastic alien landscape -W 576 -H 512 -s 60 -A plms -C 7.5
+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
@@ -261,7 +261,7 @@ was not generated by InvokeAI.
 
 ## !history
 
-The dream script keeps track of all the commands you issue during a
+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
 also writes the command-line history out to disk, giving you access to
 the most recent 1000 commands issued.
@@ -272,7 +272,7 @@ issued during the session (Windows), or the most recent 1000 commands
 where "NNN" is the history line number. For example:
 
 ~~~
-dream> !history
+invoke> !history
 ...
 [14] happy woman sitting under tree wearing broad hat and flowing garment
 [15] beautiful woman sitting under tree wearing broad hat and flowing garment
@@ -280,8 +280,8 @@ dream> !history
 [20] watercolor of beautiful woman sitting under tree wearing broad hat and flowing garment -v0.2 -n6 -S2878767194
 [21] surrealist painting of beautiful woman sitting under tree wearing broad hat and flowing garment -v0.2 -n6 -S2878767194
 ...
-dream> !20
-dream> watercolor of beautiful woman sitting under tree wearing broad hat and flowing garment -v0.2 -n6 -S2878767194
+invoke> !20
+invoke> watercolor of beautiful woman sitting under tree wearing broad hat and flowing garment -v0.2 -n6 -S2878767194
 ~~~
 
 ## !search <search string>
@@ -290,7 +290,7 @@ This is similar to !history but it only returns lines that contain
 `search string`. For example:
 
 ~~~
-dream> !search surreal
+invoke> !search surreal
 [21] surrealist painting of beautiful woman sitting under tree wearing broad hat and flowing garment -v0.2 -n6 -S2878767194
 ~~~
 
@@ -312,16 +312,16 @@ command completion.
 - To paste a cut section back in, position the cursor where you want to paste, and type CTRL-Y
 
 Windows users can get similar, but more limited, functionality if they
-launch dream.py with the "winpty" program and have the `pyreadline3`
+launch invoke.py with the "winpty" program and have the `pyreadline3`
 library installed:
 
 ~~~
-> winpty python scripts\dream.py
+> winpty python scripts\invoke.py
 ~~~
 
-On the Mac and Linux platforms, when you exit dream.py, the last 1000
+On the Mac and Linux platforms, when you exit invoke.py, the last 1000
 lines of your command-line history will be saved. When you restart
-dream.py, you can access the saved history using the up-arrow key.
+invoke.py, you can access the saved history using the up-arrow key.
 
 In addition, limited command-line completion is installed. In various
 contexts, you can start typing your command and press tab. A list of
@@ -334,7 +334,7 @@ will attempt to complete pathnames for you. This is most handy for the
 the path with a slash ("/") or "./". For example:
 
 ~~~
-dream> zebra with a mustache -I./test-pictures<TAB>
+invoke> zebra with a mustache -I./test-pictures<TAB>
 -I./test-pictures/Lincoln-and-Parrot.png  -I./test-pictures/zebra.jpg        -I./test-pictures/madonna.png
 -I./test-pictures/bad-sketch.png          -I./test-pictures/man_with_eagle/
 ```

docs/features/EMBIGGEN.md

@@ -106,8 +106,8 @@ Running Embiggen with 512x512 tiles on an existing image, scaling up by a factor
 and doing the same again (default ESRGAN strength is 0.75, default overlap between tiles is 0.25):
 
 ```bash
-dream > a photo of a forest at sunset -s 100 -W 512 -H 512 -I outputs/forest.png -f 0.4 -embiggen 2.5
-dream > a photo of a forest at sunset -s 100 -W 512 -H 512 -I outputs/forest.png -f 0.4 -embiggen 2.5 0.75 0.25
+invoke > a photo of a forest at sunset -s 100 -W 512 -H 512 -I outputs/forest.png -f 0.4 -embiggen 2.5
+invoke > a photo of a forest at sunset -s 100 -W 512 -H 512 -I outputs/forest.png -f 0.4 -embiggen 2.5 0.75 0.25
 ```
 
 If your starting image was also 512x512 this should have taken 9 tiles.
@@ -118,7 +118,7 @@ If there weren't enough clouds in the sky of that forest you just made
 tiles:
 
 ```bash
-dream> a photo of puffy clouds over a forest at sunset -s 100 -W 512 -H 512 -I outputs/000002.seed.png -f 0.5 -embiggen_tiles 1 2 3
+invoke> a photo of puffy clouds over a forest at sunset -s 100 -W 512 -H 512 -I outputs/000002.seed.png -f 0.5 -embiggen_tiles 1 2 3
 ```
 
 ## Fixing Previously-Generated Images
@@ -129,7 +129,7 @@ syntax `!fix path/to/file.png <embiggen>`. For example, you can rewrite the
 previous command to look like this:
 
 ~~~~
-dream> !fix ./outputs/000002.seed.png -embiggen_tiles 1 2 3
+invoke> !fix ./outputs/000002.seed.png -embiggen_tiles 1 2 3
 ~~~~
 
 A new file named `000002.seed.fixed.png` will be created in the output directory. Note that

docs/features/IMG2IMG.md

@@ -10,18 +10,39 @@ top of the image you provide, preserving the original's basic shape and layout.
 the `--init_img` option as shown here:
 
 ```commandline
-dream> "waterfall and rainbow" --init_img=./init-images/crude_drawing.png --strength=0.5 -s100 -n4
+tree on a hill with a river, nature photograph, national geographic -I./test-pictures/tree-and-river-sketch.png -f 0.85
 ```
 
+This will take the original image shown here:
+
+<img src="https://user-images.githubusercontent.com/50542132/193946000-c42a96d8-5a74-4f8a-b4c3-5213e6cadcce.png" width=350>
+                                                                                                               
+and generate a new image based on it as shown here:
+
+<img src="https://user-images.githubusercontent.com/111189/194135515-53d4c060-e994-4016-8121-7c685e281ac9.png" width=350>
+
 The `--init_img (-I)` option gives the path to the seed picture. `--strength (-f)` controls how much
 the original will be modified, ranging from `0.0` (keep the original intact), to `1.0` (ignore the
-original completely). The default is `0.75`, and ranges from `0.25-0.75` give interesting results.
+original completely). The default is `0.75`, and ranges from `0.25-0.90` give interesting results. 
+Other relevant options include `-C` (classification free guidance scale), and `-s` (steps). Unlike `txt2img`, 
+adding steps will continuously change the resulting image and it will not converge.
 
 You may also pass a `-v<variation_amount>` option to generate `-n<iterations>` count variants on
 the original image. This is done by passing the first generated image
 back into img2img the requested number of times. It generates
 interesting variants.
 
+Note that the prompt makes a big difference. For example, this slight variation on the prompt produces
+a very different image:
+
+`photograph of a tree on a hill with a river`
+
+<img src="https://user-images.githubusercontent.com/111189/194135220-16b62181-b60c-4248-8989-4834a8fd7fbd.png" width=350>
+
+(When designing prompts, think about how the images scraped from the internet were captioned. Very few photographs will
+be labeled "photograph" or "photorealistic." They will, however, be captioned with the publication, photographer, camera
+model, or film settings.)
+
 If the initial image contains transparent regions, then Stable Diffusion will only draw within the
 transparent regions, a process called "inpainting". However, for this to work correctly, the color
 information underneath the transparent needs to be preserved, not erased.
@@ -29,6 +50,17 @@ information underneath the transparent needs to be preserved, not erased.
 More details can be found here:
 [Creating Transparent Images For Inpainting](./INPAINTING.md#creating-transparent-regions-for-inpainting)
 
+<<<<<<< HEAD
+=======
+**IMPORTANT ISSUE** `img2img` does not work properly on initial images smaller than 512x512. Please scale your
+image to at least 512x512 before using it. Larger images are not a problem, but may run out of VRAM on your
+GPU card. To fix this, use the --fit option, which downscales the initial image to fit within the box specified
+by width x height:
+~~~
+tree on a hill with a river, national geographic -I./test-pictures/big-sketch.png -H512 -W512 --fit
+~~~
+
+>>>>>>> main
 ## How does it actually work, though?
 
 The main difference between `img2img` and `prompt2img` is the starting point. While `prompt2img` always starts with pure 
@@ -38,7 +70,11 @@ gaussian noise and progressively refines it over the requested number of steps,
 **Let's start** by thinking about vanilla `prompt2img`, just generating an image from a prompt. If the step count is 10, then the "latent space" (Stable Diffusion's internal representation of the image) for the prompt "fire" with seed `1592514025` develops something like this:
 
 ```commandline
+<<<<<<< HEAD
 dream> "fire" -s10 -W384 -H384 -S1592514025
+=======
+invoke> "fire" -s10 -W384 -H384 -S1592514025
+>>>>>>> main
 ```
 
 ![latent steps](../assets/img2img/000019.steps.png)
@@ -66,7 +102,11 @@ Notice how much more fuzzy the starting image is for strength `0.7` compared to
 |  | strength = 0.7 | strength = 0.4 |
 | -- | -- | -- |
 | initial image that SD sees | ![](../assets/img2img/000032.step-0.png) | ![](../assets/img2img/000030.step-0.png) |
+<<<<<<< HEAD
 | steps argument to `dream>` | `-S10` | `-S10` |
+=======
+| steps argument to `invoke>` | `-S10` | `-S10` |
+>>>>>>> main
 | steps actually taken | 7 | 4 |
 | latent space at each step | ![](../assets/img2img/000032.steps.gravity.png) | ![](../assets/img2img/000030.steps.gravity.png) |
 | output | ![](../assets/img2img/000032.1592514025.png) | ![](../assets/img2img/000030.1592514025.png) |
@@ -77,10 +117,17 @@ Both of the outputs look kind of like what I was thinking of. With the strength
 If you want to try this out yourself, all of these are using a seed of `1592514025` with a width/height of `384`, step count `10`, the default sampler (`k_lms`), and the single-word prompt `fire`:
 
 ```commandline
+<<<<<<< HEAD
 dream> "fire" -s10 -W384 -H384 -S1592514025 -I /tmp/fire-drawing.png --strength 0.7
 ```
 
 The code for rendering intermediates is on my (damian0815's) branch [document-img2img](https://github.com/damian0815/InvokeAI/tree/document-img2img) - run `dream.py` and check your `outputs/img-samples/intermediates` folder while generating an image. 
+=======
+invoke> "fire" -s10 -W384 -H384 -S1592514025 -I /tmp/fire-drawing.png --strength 0.7
+```
+
+The code for rendering intermediates is on my (damian0815's) branch [document-img2img](https://github.com/damian0815/InvokeAI/tree/document-img2img) - run `invoke.py` and check your `outputs/img-samples/intermediates` folder while generating an image. 
+>>>>>>> main
 
 ### Compensating for the reduced step count
 
@@ -89,7 +136,11 @@ After putting this guide together I was curious to see how the difference would
 Here's strength `0.4` (note step count `50`, which is `20 ÷ 0.4` to make sure SD does `20` steps from my image):
 
 ```commandline
+<<<<<<< HEAD
 dream> "fire" -s50 -W384 -H384 -S1592514025 -I /tmp/fire-drawing.png -f 0.4
+=======
+invoke> "fire" -s50 -W384 -H384 -S1592514025 -I /tmp/fire-drawing.png -f 0.4
+>>>>>>> main
 ```
 
 ![](../assets/img2img/000035.1592514025.png)
@@ -97,7 +148,11 @@ dream> "fire" -s50 -W384 -H384 -S1592514025 -I /tmp/fire-drawing.png -f 0.4
 and strength `0.7` (note step count `30`, which is roughly `20 ÷ 0.7` to make sure SD does `20` steps from my image):
 
 ```commandline
+<<<<<<< HEAD
 dream> "fire" -s30 -W384 -H384 -S1592514025 -I /tmp/fire-drawing.png -f 0.7
+=======
+invoke> "fire" -s30 -W384 -H384 -S1592514025 -I /tmp/fire-drawing.png -f 0.7
+>>>>>>> main
 ```
 
 ![](../assets/img2img/000046.1592514025.png)

docs/features/INPAINTING.md

@@ -8,7 +8,7 @@ title: Inpainting
 
 Inpainting is really cool. To do it, you start with an initial image and use a photoeditor to make
 one or more regions transparent (i.e. they have a "hole" in them). You then provide the path to this
-image at the dream> command line using the `-I` switch. Stable Diffusion will only paint within the
+image at the invoke> command line using the `-I` switch. Stable Diffusion will only paint within the
 transparent region.
 
 There's a catch. In the current implementation, you have to prepare the initial image correctly so
@@ -17,13 +17,13 @@ applications will by default erase the color information under the transparent p
 them with white or black, which will lead to suboptimal inpainting. You also must take care to
 export the PNG file in such a way that the color information is preserved.
 
-If your photoeditor is erasing the underlying color information, `dream.py` will give you a big fat
+If your photoeditor is erasing the underlying color information, `invoke.py` will give you a big fat
 warning. If you can't find a way to coax your photoeditor to retain color values under transparent
 areas, then you can combine the `-I` and `-M` switches to provide both the original unedited image
 and the masked (partially transparent) image:
 
 ```bash
-dream> "man with cat on shoulder" -I./images/man.png -M./images/man-transparent.png
+invoke> "man with cat on shoulder" -I./images/man.png -M./images/man-transparent.png
 ```
 
 We are hoping to get rid of the need for this workaround in an upcoming release.
@@ -38,8 +38,8 @@ We are hoping to get rid of the need for this workaround in an upcoming release.
 2. Layer->Transparency->Add Alpha Channel
 3. Use lasoo tool to select region to mask
 4. Choose Select -> Float to create a floating selection
-5. Open the Layers toolbar (++ctrl+l++) and select "Floating Selection"
-6. Set opacity to 0%
+5. Open the Layers toolbar (^L) and select "Floating Selection"
+6. Set opacity to a value between 0% and 99%
 7. Export as PNG
 8. In the export dialogue, Make sure the "Save colour values from
    transparent pixels" checkbox is selected.
@@ -69,7 +69,7 @@ We are hoping to get rid of the need for this workaround in an upcoming release.
 
 ![step6](../assets/step6.png)
 
-7. After following the inpainting instructions above (either through the CLI or the Web UI), marvel at your newfound ability to selectively dream. Lookin' good!
+7. After following the inpainting instructions above (either through the CLI or the Web UI), marvel at your newfound ability to selectively invoke. Lookin' good!
 
 ![step7](../assets/step7.png)
 

docs/features/OTHER.md

@@ -22,10 +22,10 @@ Output Example: ![Colab Notebook](../assets/colab_notebook.png)
 
 The seamless tiling mode causes generated images to seamlessly tile with itself. To use it, add the
 `--seamless` option when starting the script which will result in all generated images to tile, or
-for each `dream>` prompt as shown here:
+for each `invoke>` prompt as shown here:
 
 ```python
-dream> "pond garden with lotus by claude monet" --seamless -s100 -n4
+invoke> "pond garden with lotus by claude monet" --seamless -s100 -n4
 ```
 
 ---
@@ -42,12 +42,12 @@ Here's an example of using this to do a quick refinement. It also illustrates us
 switch to turn on upscaling and face enhancement (see previous section):
 
 ```bash
-dream> a cute child playing hopscotch -G0.5
+invoke> a cute child playing hopscotch -G0.5
 [...]
 outputs/img-samples/000039.3498014304.png: "a cute child playing hopscotch" -s50 -W512 -H512 -C7.5 -mk_lms -S3498014304
 
 # I wonder what it will look like if I bump up the steps and set facial enhancement to full strength?
-dream> a cute child playing hopscotch -G1.0 -s100 -S -1
+invoke> a cute child playing hopscotch -G1.0 -s100 -S -1
 reusing previous seed 3498014304
 [...]
 outputs/img-samples/000040.3498014304.png: "a cute child playing hopscotch" -G1.0 -s100 -W512 -H512 -C7.5 -mk_lms -S3498014304

docs/features/OUTPAINTING.md

@@ -31,7 +31,7 @@ Pretty nice, but it's annoying that the top of her head is cut
 off. She's also a bit off center. Let's fix that!
 
 ~~~~
-dream> !fix images/curly.png --outcrop top 64 right 64
+invoke> !fix images/curly.png --outcrop top 64 right 64
 ~~~~
 
 This is saying to apply the `outcrop` extension by extending the top
@@ -67,10 +67,10 @@ differences. Starting with the same image, here is how we would add an
 additional 64 pixels to the top of the image:
 
 ~~~
-dream> !fix images/curly.png --out_direction top 64
+invoke> !fix images/curly.png --out_direction top 64
 ~~~
 
-(you can abbreviate ``--out_direction` as `-D`.
+(you can abbreviate `--out_direction` as `-D`.
 
 The result is shown here:
 

docs/features/POSTPROCESS.md

@@ -20,39 +20,33 @@ The default face restoration module is GFPGAN. The default upscale is
 Real-ESRGAN. For an alternative face restoration module, see [CodeFormer
 Support] below.
 
-As of version 1.14, environment.yaml will install the Real-ESRGAN package into
-the standard install location for python packages, and will put GFPGAN into a
-subdirectory of "src" in the InvokeAI directory. (The reason for this is
-that the standard GFPGAN distribution has a minor bug that adversely affects
-image color.) Upscaling with Real-ESRGAN should "just work" without further
-intervention. Simply pass the --upscale (-U) option on the dream> command line,
-or indicate the desired scale on the popup in the Web GUI.
+As of version 1.14, environment.yaml will install the Real-ESRGAN
+package into the standard install location for python packages, and
+will put GFPGAN into a subdirectory of "src" in the InvokeAI
+directory. Upscaling with Real-ESRGAN should "just work" without
+further intervention. Simply pass the --upscale (-U) option on the
+invoke> command line, or indicate the desired scale on the popup in
+the Web GUI.
 
-For **GFPGAN** to work, there is one additional step needed. You will need to
-download and copy the GFPGAN
-[models file](https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.4.pth)
-into **src/gfpgan/experiments/pretrained_models**. On Mac and Linux systems,
-here's how you'd do it using **wget**:
+**GFPGAN** requires a series of downloadable model files to
+work. These are loaded when you run `scripts/preload_models.py`. If
+GFPAN is failing with an error, please run the following from the
+InvokeAI directory:
 
-```bash
-wget https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.4.pth -P src/gfpgan/experiments/pretrained_models/
-```
+~~~~
+python scripts/preload_models.py
+~~~~
 
-Make sure that you're in the InvokeAI directory when you do this.
+If you do not run this script in advance, the GFPGAN module will attempt
+to download the models files the first time you try to perform facial
+reconstruction. 
 
-Alternatively, if you have GFPGAN installed elsewhere, or if you are using an
-earlier version of this package which asked you to install GFPGAN in a sibling
-directory, you may use the `--gfpgan_dir` argument with `dream.py` to set a
-custom path to your GFPGAN directory. _There are other GFPGAN related boot
-arguments if you wish to customize further._
-
-!!! warning "Internet connection needed"
-
-    Users whose GPU machines are isolated from the Internet (e.g.
-    on a University cluster) should be aware that the first time you run dream.py with GFPGAN and
-    Real-ESRGAN turned on, it will try to download model files from the Internet. To rectify this, you
-    may run `python3 scripts/preload_models.py` after you have installed GFPGAN and all its
-    dependencies.
+Alternatively, if you have GFPGAN installed elsewhere, or if you are
+using an earlier version of this package which asked you to install
+GFPGAN in a sibling directory, you may use the `--gfpgan_dir` argument
+with `invoke.py` to set a custom path to your GFPGAN directory. _There
+are other GFPGAN related boot arguments if you wish to customize
+further._
 
 ## Usage
 
@@ -94,13 +88,13 @@ too.
 ### Example Usage
 
 ```bash
-dream> superman dancing with a panda bear -U 2 0.6 -G 0.4
+invoke> superman dancing with a panda bear -U 2 0.6 -G 0.4
 ```
 
 This also works with img2img:
 
 ```bash
-dream> a man wearing a pineapple hat -I path/to/your/file.png -U 2 0.5 -G 0.6
+invoke> a man wearing a pineapple hat -I path/to/your/file.png -U 2 0.5 -G 0.6
 ```
 
 !!! note
@@ -124,15 +118,15 @@ actions.
 This repo also allows you to perform face restoration using
 [CodeFormer](https://github.com/sczhou/CodeFormer).
 
-In order to setup CodeFormer to work, you need to download the models like with
-GFPGAN. You can do this either by running `preload_models.py` or by manually
-downloading the
-[model file](https://github.com/sczhou/CodeFormer/releases/download/v0.1.0/codeformer.pth)
+In order to setup CodeFormer to work, you need to download the models
+like with GFPGAN. You can do this either by running
+`preload_models.py` or by manually downloading the [model
+file](https://github.com/sczhou/CodeFormer/releases/download/v0.1.0/codeformer.pth)
 and saving it to `ldm/restoration/codeformer/weights` folder.
 
-You can use `-ft` prompt argument to swap between CodeFormer and the default
-GFPGAN. The above mentioned `-G` prompt argument will allow you to control the
-strength of the restoration effect.
+You can use `-ft` prompt argument to swap between CodeFormer and the
+default GFPGAN. The above mentioned `-G` prompt argument will allow
+you to control the strength of the restoration effect.
 
 ### Usage:
 
@@ -168,7 +162,7 @@ previously-generated file. Just use the syntax `!fix path/to/file.png
 just run:
 
 ```
-dream> !fix ./outputs/img-samples/000044.2945021133.png -G 0.8 -U 2
+invoke> !fix ./outputs/img-samples/000044.2945021133.png -G 0.8 -U 2
 ```
 
 A new file named `000044.2945021133.fixed.png` will be created in the output
@@ -178,5 +172,5 @@ unlike the behavior at generate time.
 ### Disabling:
 
 If, for some reason, you do not wish to load the GFPGAN and/or ESRGAN libraries,
-you can disable them on the dream.py command line with the `--no_restore` and
+you can disable them on the invoke.py command line with the `--no_restore` and
 `--no_upscale` options, respectively.

docs/features/PROMPTS.md

@@ -6,9 +6,9 @@ title: Prompting Features
 
 ## **Reading Prompts from a File**
 
-You can automate `dream.py` by providing a text file with the prompts you want to run, one line per
+You can automate `invoke.py` by providing a text file with the prompts you want to run, one line per
 prompt. The text file must be composed with a text editor (e.g. Notepad) and not a word processor.
-Each line should look like what you would type at the dream> prompt:
+Each line should look like what you would type at the invoke> prompt:
 
 ```bash
 a beautiful sunny day in the park, children playing -n4 -C10
@@ -16,16 +16,16 @@ stormy weather on a mountain top, goats grazing     -s100
 innovative packaging for a squid's dinner           -S137038382
 ```
 
-Then pass this file's name to `dream.py` when you invoke it:
+Then pass this file's name to `invoke.py` when you invoke it:
 
 ```bash
-(ldm) ~/stable-diffusion$ python3 scripts/dream.py --from_file "path/to/prompts.txt"
+(ldm) ~/stable-diffusion$ python3 scripts/invoke.py --from_file "path/to/prompts.txt"
 ```
 
 You may read a series of prompts from standard input by providing a filename of `-`:
 
 ```bash
-(ldm) ~/stable-diffusion$ echo "a beautiful day" | python3 scripts/dream.py --from_file -
+(ldm) ~/stable-diffusion$ echo "a beautiful day" | python3 scripts/invoke.py --from_file -
 ```
 ---
 
@@ -114,7 +114,7 @@ is depth there, so the enclosing frame is actually a cube.
 
 ### "blue sphere:0.25 red cube:0.75 hybrid"
 
-<img src="../assets/prompt-blending/blue-sphere:0.25-red-cube:0.75-hybrid.png" width=256>
+<img src="../assets/prompt-blending/blue-sphere-0.25-red-cube-0.75-hybrid.png" width=256>
 
 Now that's interesting. We get neither a blue sphere nor a red cube,
 but a red sphere embedded in a brick wall, which represents a melding
@@ -123,14 +123,14 @@ representations. Where is Ludwig Wittgenstein when you need him?
 
 ### "blue sphere:0.75 red cube:0.25 hybrid"
 
-<img src="../assets/prompt-blending/blue-sphere:0.75-red-cube:0.25-hybrid.png" width=256>
+<img src="../assets/prompt-blending/blue-sphere-0.75-red-cube-0.25-hybrid.png" width=256>
 
 Definitely more blue-spherey. The cube is gone entirely, but it's
 really cool abstract art.
 
 ### "blue sphere:0.5 red cube:0.5 hybrid"
 
-<img src="../assets/prompt-blending/blue-sphere:0.5-red-cube:0.5-hybrid.png" width=256>
+<img src="../assets/prompt-blending/blue-sphere-0.5-red-cube-0.5-hybrid.png" width=256>
 
 Whoa...! I see blue and red, but no spheres or cubes. Is the word
 "hybrid" summoning up the concept of some sort of scifi creature?
@@ -138,7 +138,7 @@ Let's find out.
 
 ### "blue sphere:0.5 red cube:0.5"
 
-<img src="../assets/prompt-blending/blue-sphere:0.5-red-cube:0.5.png" width=256>
+<img src="../assets/prompt-blending/blue-sphere-0.5-red-cube-0.5.png" width=256>
 
 Indeed, removing the word "hybrid" produces an image that is more like
 what we'd expect.

docs/features/TEXTUAL_INVERSION.md

@@ -56,22 +56,22 @@ configs/stable_diffusion/v1-finetune.yaml (currently set to 4000000)
 ## **Run the Model**
 
 Once the model is trained, specify the trained .pt or .bin file when starting
-dream using
+invoke using
 
 ```bash
-python3 ./scripts/dream.py --embedding_path /path/to/embedding.pt
+python3 ./scripts/invoke.py --embedding_path /path/to/embedding.pt
 ```
 
-Then, to utilize your subject at the dream prompt
+Then, to utilize your subject at the invoke prompt
 
 ```bash
-dream> "a photo of *"
+invoke> "a photo of *"
 ```
 
 This also works with image2image
 
 ```bash
-dream> "waterfall and rainbow in the style of *" --init_img=./init-images/crude_drawing.png --strength=0.5 -s100 -n4
+invoke> "waterfall and rainbow in the style of *" --init_img=./init-images/crude_drawing.png --strength=0.5 -s100 -n4
 ```
 
 For .pt files it's also possible to train multiple tokens (modify the

docs/features/VARIATIONS.md

@@ -34,7 +34,7 @@ First we let SD create a series of images in the usual way, in this case
 requesting six iterations:
 
 ```bash
-dream> lucy lawless as xena, warrior princess, character portrait, high resolution -n6
+invoke> lucy lawless as xena, warrior princess, character portrait, high resolution -n6
 ...
 Outputs:
 ./outputs/Xena/000001.1579445059.png: "prompt" -s50 -W512 -H512 -C7.5 -Ak_lms -S1579445059
@@ -57,7 +57,7 @@ differing by a variation amount of 0.2. This number ranges from `0` to `1.0`,
 with higher numbers being larger amounts of variation.
 
 ```bash
-dream> "prompt" -n6 -S3357757885 -v0.2
+invoke> "prompt" -n6 -S3357757885 -v0.2
 ...
 Outputs:
 ./outputs/Xena/000002.784039624.png: "prompt" -s50 -W512 -H512 -C7.5 -Ak_lms -V 784039624:0.2 -S3357757885
@@ -89,7 +89,7 @@ We combine the two variations using `-V` (`--with_variations`). Again, we must
 provide the seed for the originally-chosen image in order for this to work.
 
 ```bash
-dream> "prompt"  -S3357757885 -V3647897225,0.1,1614299449,0.1
+invoke> "prompt"  -S3357757885 -V3647897225,0.1,1614299449,0.1
 Outputs:
 ./outputs/Xena/000003.1614299449.png: "prompt" -s50 -W512 -H512 -C7.5 -Ak_lms -V 3647897225:0.1,1614299449:0.1 -S3357757885
 ```
@@ -105,7 +105,7 @@ latter, using both the `-V` (combining) and `-v` (variation strength) options.
 Note that we use `-n6` to generate 6 variations:
 
 ```bash
-dream> "prompt" -S3357757885 -V3647897225,0.1,1614299449,0.1 -v0.05 -n6
+invoke> "prompt" -S3357757885 -V3647897225,0.1,1614299449,0.1 -v0.05 -n6
 Outputs:
 ./outputs/Xena/000004.3279757577.png: "prompt" -s50 -W512 -H512 -C7.5 -Ak_lms -V 3647897225:0.1,1614299449:0.1,3279757577:0.05 -S3357757885
 ./outputs/Xena/000004.2853129515.png: "prompt" -s50 -W512 -H512 -C7.5 -Ak_lms -V 3647897225:0.1,1614299449:0.1,2853129515:0.05 -S3357757885

docs/features/WEB.md

@@ -1,21 +1,357 @@
 ---
-title: Barebones Web Server
+title: InvokeAI Web Server
 ---
 
-# :material-web: Barebones Web Server
-
-As of version 1.10, this distribution comes with a bare bones web server (see
-screenshot). To use it, run the `dream.py` script by adding the `--web`
-option.
+As of version 2.0.0, this distribution comes with a full-featured web
+server (see screenshot). To use it, run the `invoke.py` script by
+adding the `--web` option:
 
 ```bash
-(ldm) ~/stable-diffusion$ python3 scripts/dream.py --web
+(ldm) ~/InvokeAI$ python3 scripts/invoke.py --web
 ```
 
 You can then connect to the server by pointing your web browser at
-http://localhost:9090, or to the network name or IP address of the server.
+http://localhost:9090. To reach the server from a different machine on
+your LAN, you may launch the web server with the `--host` argument and
+either the IP address of the host you are running it on, or the
+wildcard `0.0.0.0`. For example:
 
-Kudos to [Tesseract Cat](https://github.com/TesseractCat) for contributing this
-code, and to [dagf2101](https://github.com/dagf2101) for refining it.
+```bash
+(ldm) ~/InvokeAI$ python3 scripts/invoke.py --web --host 0.0.0.0
+```
 
-![Dream Web Server](../assets/dream_web_server.png)
+# Quick guided walkthrough of the WebGUI's features
+
+While most of the WebGUI's features are intuitive, here is a guided
+walkthrough through its various components.
+
+<img src="../assets/invoke-web-server-1.png" width=640>
+
+The screenshot above shows the Text to Image tab of the WebGUI. There
+are three main sections:
+
+1. A **control panel** on the left, which contains various settings
+for text to image generation. The most important part is the text
+field (currently showing `strawberry sushi`) for entering the text
+prompt, and the camera icon directly underneath that will render the
+image. We'll call this the *Invoke* button from now on.
+
+2. The **current image** section in the middle, which shows a large
+format version of the image you are currently working on. A series of
+buttons at the top ("image to image", "Use All", "Use Seed", etc) lets
+you modify the image in various ways.
+
+3. A **gallery* section on the left that contains a history of the
+images you have generated. These images are read and written to the
+directory specified at launch time in `--outdir`.
+
+In addition to these three elements, there are a series of icons for
+changing global settings, reporting bugs, and changing the theme on
+the upper right.
+
+There are also a series of icons to the left of the control panel (see
+highlighted area in the screenshot below) which select among a series
+of tabs for performing different types of operations.
+
+<img src="../assets/invoke-web-server-2.png" width=512>
+
+From top to bottom, these are:
+
+1. Text to Image  - generate images from text
+2. Image to Image - from an uploaded starting image (drawing or photograph) generate a new one, modified by the text prompt
+3. Inpainting (pending) - Interactively erase portions of a starting image and have the AI fill in the erased region from a text prompt.
+4. Outpainting (pending) - Interactively add blank space to the borders of a starting image and fill in the background from a text prompt.
+5. Postprocessing (pending) - Interactively postprocess generated images using a variety of filters.
+
+The inpainting, outpainting and postprocessing tabs are currently in
+development. However, limited versions of their features can already
+be accessed through the Text to Image and Image to Image tabs.
+
+## Walkthrough
+
+The following walkthrough will exercise most (but not all) of the
+WebGUI's feature set.
+
+### Text to Image
+
+1. Launch the WebGUI using `python scripts/invoke.py --web` and
+connect to it with your browser by accessing
+`http://localhost:9090`. If the browser and server are running on
+different machines on your LAN, add the option `--host 0.0.0.0` to the
+launch command line and connect to the machine hosting the web server
+using its IP address or domain name.
+
+2. If all goes well, the WebGUI should come up and you'll see a green
+`connected` message on the upper right.
+
+#### Basics
+
+3. Generate an image by typing *strawberry sushi* into the large
+prompt field on the upper left and then clicking on the Invoke button
+(the one with the Camera icon). After a short wait, you'll see a large
+image of sushi in the image panel, and a new thumbnail in the gallery
+on the right.
+
+If you need more room on the screen, you can turn the gallery  off
+by clicking on the **x** to the right of "Your Invocations". You can
+turn it back on later by clicking the image icon that appears in the
+gallery's place.
+
+The images are written into the directory indicated by the `--outdir`
+option provided at script launch time. By default, this is
+`outputs/img-samples` under the InvokeAI directory.
+
+4. Generate a bunch of strawberry sushi images by increasing the
+number of requested images by adjusting the Images counter just below
+the Camera button. As each is generated, it will be added to the
+gallery. You can switch the active image by clicking on the gallery
+thumbnails.
+
+5. Try playing with different settings, including image width and
+height, the Sampler, the Steps and the CFG scale.
+
+Image *Width* and *Height* do what you'd expect. However, be aware that
+larger images consume more VRAM memory and take longer to generate.
+
+The *Sampler* controls how the AI selects the image to display. Some
+samplers are more "creative" than others and will produce a wider
+range of variations (see next section). Some samplers run faster than
+others.
+
+*Steps* controls how many noising/denoising/sampling steps the AI will
+take. The higher this value, the more refined the image will be, but
+the longer the image will take to generate. A typical strategy is to
+generate images with a low number of steps in order to select one to
+work on further, and then regenerate it using a higher number of
+steps.
+
+The *CFG Scale* controls how hard the AI tries to match the generated
+image to the input prompt. You can go as high or low as you like, but
+generally values greater than 20 won't improve things much, and values
+lower than 5 will produce unexpected images. There are complex
+interactions between *Steps*, *CFG Scale* and the *Sampler*, so
+experiment to find out what works for you.
+
+6. To regenerate a previously-generated image, select the image you
+want and click *Use All*. This loads the text prompt and other
+original settings into the control panel. If you then press *Invoke*
+it will regenerate the image exactly. You can also selectively modify
+the prompt or other settings to tweak the image.
+
+Alternatively, you may click on *Use Seed* to load just the image's
+seed, and leave other settings unchanged.
+
+7. To regenerate a Stable Diffusion image that was generated by
+another SD package, you need to know its text prompt and its
+*Seed*. Copy-paste the prompt into the prompt box, unset the
+*Randomize Seed* control in the control panel, and copy-paste the
+desired *Seed* into its text field. When you Invoke, you will get
+something similar to the original image. It will not be exact unless
+you also set the correct values for the original sampler, CFG,
+steps and dimensions, but it will (usually) be close.
+
+#### Variations on a theme
+
+5. Let's try generating some variations. Select your favorite sushi
+image from the gallery to load it. Then select "Use All" from the list
+of buttons above. This will load up all the settings used to generate
+this image, including its unique seed.
+
+Go down to the Variations section of the Control Panel and set the
+button to On. Set Variation Amount to 0.2 to generate a modest
+number of variations on the image, and also set the Image counter to
+4. Press the `invoke` button. This will generate a series of related
+images. To obtain smaller variations, just lower the Variation
+Amount. You may also experiment with changing the Sampler. Some
+samplers generate more variability than others. *k_euler_a* is
+particularly creative, while *ddim* is pretty conservative.
+
+6. For even more variations, experiment with increasing the setting
+for *Perlin*. This adds a bit of noise to the image generation
+process. Note that values of Perlin noise greater than 0.15 produce
+poor images for several of the samplers.
+
+#### Facial reconstruction and upscaling
+
+Stable Diffusion frequently produces mangled faces, particularly when
+there are multiple figures in the same scene. Stable Diffusion has
+particular issues with generating reallistic eyes. InvokeAI provides
+the ability to reconstruct faces using either the GFPGAN or CodeFormer
+libraries. For more information see [POSTPROCESS](POSTPROCESS.md).
+  
+7. Invoke a prompt that generates a mangled face. A prompt that often
+gives this is "portrait of a lawyer, 3/4 shot" (this is not intended
+as a slur against lawyers!) Once you have an image that needs some
+touching up, load it into the Image panel, and press the button with
+the face icon (highlighted in the first screenshot below). A dialog
+box will appear. Leave *Strength* at 0.8 and press *Restore Faces". If
+all goes well, the eyes and other aspects of the face will be improved
+(see the second screenshot)
+
+<img src="../assets/invoke-web-server-3.png">
+<img src="../assets/invoke-web-server-4.png">
+
+The facial reconstruction *Strength* field adjusts how aggressively
+the face library will try to alter the face. It can be as high as 1.0,
+but be aware that this often softens the face airbrush style, losing
+some details. The default 0.8 is usually sufficient.
+
+8. "Upscaling" is the process of increasing the size of an image while
+retaining the sharpness. InvokeAI uses an external library called
+"ESRGAN" to do this. To invoke upscaling, simply select an image and
+press the *HD* button above it. You can select between 2X and 4X
+upscaling, and adjust the upscaling strength, which has much the same
+meaning as in facial reconstruction. Try running this on one of your
+previously-generated images.
+
+9. Finally, you can run facial reconstruction and/or upscaling
+automatically after each Invocation. Go to the Advanced Options
+section of the Control Panel and turn on *Restore Face* and/or
+*Upscale*.
+
+### Image to Image
+
+InvokeAI lets you take an existing image and use it as the basis for a
+new creation. You can use any sort of image, including a photograph, a
+scanned sketch, or a digital drawing, as long as it is in PNG or JPEG
+format.
+
+For this tutorial, we'll use files named
+[Lincoln-and-Parrot-512.png](../assets/Lincoln-and-Parrot-512.png),
+and
+[Lincoln-and-Parrot-512-transparent.png](../assets/Lincoln-and-Parrot-512-transparent.png).
+Download these images to your local machine now to continue with the walkthrough.
+
+10. Click on the *Image to Image* tab icon, which is the second icon
+from the top on the left-hand side of the screen:
+
+<img src="../assets/invoke-web-server-5.png">
+
+This will bring you to a screen similar to the one shown here:
+
+<img src="../assets/invoke-web-server-6.png" width=640>
+
+Drag-and-drop the Lincoln-and-Parrot image into the Image panel, or
+click the blank area to get an upload dialog. The image will load into
+an area marked *Initial Image*. (The WebGUI will also load the most
+recently-generated image from the gallery into a section on the left,
+but this image will be replaced in the next step.)
+
+11. Go to the prompt box and type *old sea captain with raven on
+shoulder* and press Invoke. A derived image will appear to the right
+of the original one:
+
+<img src="../assets/invoke-web-server-7.png" width=640>
+
+12. Experiment with the different settings. The most influential one
+in Image to Image is *Image to Image Strength* located about midway
+down the control panel. By default it is set to 0.75, but can range
+from 0.0 to 0.99. The higher the value, the more of the original image
+the AI will replace. A value of 0 will leave the initial image
+completely unchanged, while 0.99 will replace it completely. However,
+the Sampler and CFG Scale also influence the final result. You can
+also generate variations in the same way as described in Text to
+Image.
+
+13. What if we only want to change certain part(s) of the image and
+leave the rest intact? This is called Inpainting, and a future version
+of the InvokeAI web server will provide an interactive painting canvas
+on which you can directly draw the areas you wish to Inpaint into. For
+now, you can achieve this effect by using an external photoeditor tool
+to make one or more regions of the image transparent as described in
+[INPAINTING.md] and uploading that.
+
+The file
+[Lincoln-and-Parrot-512-transparent.png](../assets/Lincoln-and-Parrot-512-transparent.png)
+is a version of the earlier image in which the area around the parrot
+has been replaced with transparency. Click on the "x" in the upper
+right of the Initial Image and upload the transparent version. Using
+the same prompt "old sea captain with raven on shoulder" try Invoking
+an image. This time, only the parrot will be replaced, leaving the
+rest of the original image intact:
+
+<img src="../assets/invoke-web-server-8.png" width=640>
+
+14. Would you like to modify a previously-generated image using the
+Image to Image facility? Easy! While in the Image to Image panel,
+hover over any of the gallery images to see a little menu of icons pop
+up.  Click the picture icon to instantly send the selected image to
+Image to Image as the initial image.
+
+You can do the same from the Text to Image tab by clicking on the
+picture icon above the central image panel. The screenshot below
+shows where the "use as initial image" icons are located.
+
+<img src="../assets/invoke-web-server-9.png" width=640>
+
+## Parting remarks
+
+This concludes the walkthrough, but there are several more features that you
+can explore. Please check out the [Command Line Interface](CLI.md)
+documentation for further explanation of the advanced features that
+were not covered here.
+
+The WebGUI is only rapid development. Check back regularly for
+updates!
+
+# Reference
+
+## Additional Options
+  `--web_develop`    -   Starts the web server in development mode.
+  
+  `--web_verbose`    -   Enables verbose logging
+  
+  `--cors [CORS ...]`    -   Additional allowed origins, comma-separated
+  
+  `--host HOST`    -   Web server: Host or IP to listen on. Set to 0.0.0.0 to
+  accept traffic from other devices on your network.
+                        
+  `--port PORT`    -   Web server: Port to listen on
+  
+  `--gui`    -   Start InvokeAI GUI - This is the "desktop mode" version of the web app. It uses Flask 
+  to create a desktop app experience of the webserver.
+
+
+## Web Specific Features
+
+The web experience offers an incredibly easy-to-use experience for interacting with the InvokeAI toolkit. 
+For detailed guidance on individual features, see the Feature-specific help documents available in this directory.
+Note that the latest functionality available in the CLI may not always be available in the Web interface.
+
+### Dark Mode & Light Mode 
+The InvokeAI interface is available in a nano-carbon black & purple Dark Mode, and a "burn your eyes out Nosferatu" Light Mode. These can be toggled by clicking the Sun/Moon icons at the top right of the interface. 
+
+![InvokeAI Web Server - Dark Mode](../assets/invoke_web_dark.png)
+
+![InvokeAI Web Server - Light Mode](../assets/invoke_web_light.png)
+
+### Invocation Toolbar
+The left side of the InvokeAI interface is available for customizing the prompt and the settings used for invoking your new image. Typing your prompt into the open text field and clicking the Invoke button will produce the image based on the settings configured in the toolbar. 
+
+See below for additional documentation related to each feature:
+- [Core Prompt Settings](./CLI.md)
+- [Variations](./VARIATIONS.md)
+- [Upscaling](./UPSCALE.md)
+- [Image to Image](./IMG2IMG.md)
+- [Inpainting](./INPAINTING.md)
+- [Other](./OTHER.md)
+
+### Invocation Gallery
+The currently selected --outdir (or the default outputs folder) will display all previously generated files on load. As new invocations are generated, these will be dynamically added to the gallery, and can be previewed by selecting them. Each image also has a simple set of actions (e.g., Delete, Use Seed, Use All Parameters, etc.) that can be accessed by hovering over the image.
+
+### Image Workspace
+When an image from the Invocation Gallery is selected, or is generated, the image will be displayed within the center of the interface. A quickbar of common image interactions are displayed along the top of the image, including:
+- Use image in the `Image to Image` workflow
+- Initialize Face Restoration on the selected file
+- Initialize Upscaling on the selected file
+- View File metadata and details
+- Delete the file
+
+## Acknowledgements
+
+A huge shout-out to the core team working to make this vision a
+reality, including
+[psychedelicious](https://github.com/psychedelicious),
+[Kyle0654](https://github.com/Kyle0654) and
+[blessedcoolant](https://github.com/blessedcoolant). [hipsterusername](https://github.com/hipsterusername)
+was the team's unofficial cheerleader and added tooltips/docs.

docs/help/TROUBLESHOOT.md

@@ -51,7 +51,7 @@ rm ${PIP_LOG}
 
 ### **QUESTION**
 
-`dream.py` crashes with the complaint that it can't find `ldm.simplet2i.py`. Or it complains that
+`invoke.py` crashes with the complaint that it can't find `ldm.simplet2i.py`. Or it complains that
 function is being passed incorrect parameters.
 
 ### **SOLUTION**
@@ -63,7 +63,7 @@ Reinstall the stable diffusion modules. Enter the `stable-diffusion` directory a
 
 ### **QUESTION**
 
-`dream.py` dies, complaining of various missing modules, none of which starts with `ldm``.
+`invoke.py` dies, complaining of various missing modules, none of which starts with `ldm``.
 
 ### **SOLUTION**
 

docs/index.md

@@ -25,24 +25,24 @@ template: main.html
 
 [![github open issues badge]][github open issues link] [![github open prs badge]][github open prs link]
 
-[CI checks on dev badge]: https://flat.badgen.net/github/checks/lstein/stable-diffusion/development?label=CI%20status%20on%20dev&cache=900&icon=github
-[CI checks on dev link]: https://github.com/lstein/stable-diffusion/actions?query=branch%3Adevelopment
-[CI checks on main badge]: https://flat.badgen.net/github/checks/lstein/stable-diffusion/main?label=CI%20status%20on%20main&cache=900&icon=github
-[CI checks on main link]: https://github.com/lstein/stable-diffusion/actions/workflows/test-dream-conda.yml
+[CI checks on dev badge]: https://flat.badgen.net/github/checks/invoke-ai/InvokeAI/development?label=CI%20status%20on%20dev&cache=900&icon=github
+[CI checks on dev link]: https://github.com/invoke-ai/InvokeAI/actions?query=branch%3Adevelopment
+[CI checks on main badge]: https://flat.badgen.net/github/checks/invoke-ai/InvokeAI/main?label=CI%20status%20on%20main&cache=900&icon=github
+[CI checks on main link]: https://github.com/invoke-ai/InvokeAI/actions/workflows/test-invoke-conda.yml
 [discord badge]: https://flat.badgen.net/discord/members/htRgbc7e?icon=discord
 [discord link]: https://discord.com/invite/htRgbc7e
-[github forks badge]: https://flat.badgen.net/github/forks/lstein/stable-diffusion?icon=github
+[github forks badge]: https://flat.badgen.net/github/forks/invoke-ai/InvokeAI?icon=github
 [github forks link]: https://useful-forks.github.io/?repo=lstein%2Fstable-diffusion
-[github open issues badge]: https://flat.badgen.net/github/open-issues/lstein/stable-diffusion?icon=github
-[github open issues link]: https://github.com/lstein/stable-diffusion/issues?q=is%3Aissue+is%3Aopen
-[github open prs badge]: https://flat.badgen.net/github/open-prs/lstein/stable-diffusion?icon=github
-[github open prs link]: https://github.com/lstein/stable-diffusion/pulls?q=is%3Apr+is%3Aopen
-[github stars badge]: https://flat.badgen.net/github/stars/lstein/stable-diffusion?icon=github
-[github stars link]: https://github.com/lstein/stable-diffusion/stargazers
-[latest commit to dev badge]: https://flat.badgen.net/github/last-commit/lstein/stable-diffusion/development?icon=github&color=yellow&label=last%20dev%20commit&cache=900
-[latest commit to dev link]: https://github.com/lstein/stable-diffusion/commits/development
-[latest release badge]: https://flat.badgen.net/github/release/lstein/stable-diffusion/development?icon=github
-[latest release link]: https://github.com/lstein/stable-diffusion/releases
+[github open issues badge]: https://flat.badgen.net/github/open-issues/invoke-ai/InvokeAI?icon=github
+[github open issues link]: https://github.com/invoke-ai/InvokeAI/issues?q=is%3Aissue+is%3Aopen
+[github open prs badge]: https://flat.badgen.net/github/open-prs/invoke-ai/InvokeAI?icon=github
+[github open prs link]: https://github.com/invoke-ai/InvokeAI/pulls?q=is%3Apr+is%3Aopen
+[github stars badge]: https://flat.badgen.net/github/stars/invoke-ai/InvokeAI?icon=github
+[github stars link]: https://github.com/invoke-ai/InvokeAI/stargazers
+[latest commit to dev badge]: https://flat.badgen.net/github/last-commit/invoke-ai/InvokeAI/development?icon=github&color=yellow&label=last%20dev%20commit&cache=900
+[latest commit to dev link]: https://github.com/invoke-ai/InvokeAI/commits/development
+[latest release badge]: https://flat.badgen.net/github/release/invoke-ai/InvokeAI/development?icon=github
+[latest release link]: https://github.com/invoke-ai/InvokeAI/releases
 
 </div>
 
@@ -54,7 +54,7 @@ GPU cards with as little as 4 GB or RAM.
 !!! note
 
     This fork is rapidly evolving. Please use the
-    [Issues](https://github.com/lstein/stable-diffusion/issues) tab to report bugs and make feature
+    [Issues](https://github.com/invoke-ai/InvokeAI/issues) tab to report bugs and make feature
     requests. Be sure to use the provided templates. They will help aid diagnose issues faster.
 
 ## :octicons-package-dependencies-24: Installation
@@ -85,21 +85,21 @@ You wil need one of the following:
 
 !!! note
 
-    If you are have a Nvidia 10xx series card (e.g. the 1080ti), please run the dream script in
+    If you are have a Nvidia 10xx series card (e.g. the 1080ti), please run the invoke script in
     full-precision mode as shown below.
 
     Similarly, specify full-precision mode on Apple M1 hardware.
 
-    To run in full-precision mode, start `dream.py` with the `--full_precision` flag:
+    To run in full-precision mode, start `invoke.py` with the `--full_precision` flag:
 
     ```bash
-    (ldm) ~/stable-diffusion$ python scripts/dream.py --full_precision
+    (ldm) ~/stable-diffusion$ python scripts/invoke.py --full_precision
     ```
 ## :octicons-log-16: Latest Changes
 
 ### vNEXT <small>(TODO 2022)</small>
 
-  - Deprecated `--full_precision` / `-F`. Simply omit it and `dream.py` will auto
+  - Deprecated `--full_precision` / `-F`. Simply omit it and `invoke.py` will auto
     configure. To switch away from auto use the new flag like `--precision=float32`.
 
 ### v1.14 <small>(11 September 2022)</small>
@@ -124,7 +124,7 @@ You wil need one of the following:
   [Kevin Gibbons](https://github.com/bakkot)
 - A new configuration file scheme that allows new models (including upcoming stable-diffusion-v1.5)
   to be added without altering the code. ([David Wager](https://github.com/maddavid12))
-- Can specify --grid on dream.py command line as the default.
+- Can specify --grid on invoke.py command line as the default.
 - Miscellaneous internal bug and stability fixes.
 - Works on M1 Apple hardware.
 - Multiple bug fixes.

docs/installation/INSTALL_DOCKER.md

@@ -136,7 +136,7 @@ $TAG_STABLE_DIFFUSION
 
 ## Startup
 
-If you're on a **Linux container** the `dream` script is **automatically
+If you're on a **Linux container** the `invoke` script is **automatically
 started** and the output dir set to the Docker volume you created earlier.
 
 If you're **directly on macOS follow these startup instructions**.  
@@ -148,14 +148,14 @@ half-precision requires autocast and won't work.
 By default the images are saved in `outputs/img-samples/`.
 
 ```Shell
-python3 scripts/dream.py --full_precision
+python3 scripts/invoke.py --full_precision
 ```
 
 You'll get the script's prompt. You can see available options or quit.
 
 ```Shell
-dream> -h
-dream> q
+invoke> -h
+invoke> q
 ```
 
 ## Text to Image
@@ -166,10 +166,10 @@ Then increase steps to 100 or more for good (but slower) results.
 The prompt can be in quotes or not.
 
 ```Shell
-dream> The hulk fighting with sheldon cooper -s5 -n1
-dream> "woman closeup highly detailed"  -s 150
+invoke> The hulk fighting with sheldon cooper -s5 -n1
+invoke> "woman closeup highly detailed"  -s 150
 # Reuse previous seed and apply face restoration
-dream> "woman closeup highly detailed"  --steps 150 --seed -1 -G 0.75
+invoke> "woman closeup highly detailed"  --steps 150 --seed -1 -G 0.75
 ```
 
 You'll need to experiment to see if face restoration is making it better or
@@ -210,28 +210,28 @@ If you're on a Docker container, copy your input image into the Docker volume
 docker cp /Users/<your-user>/Pictures/sketch-mountains-input.jpg dummy:/data/
 ```
 
-Try it out generating an image (or more). The `dream` script needs absolute
+Try it out generating an image (or more). The `invoke` script needs absolute
 paths to find the image so don't use `~`.
 
 If you're on your Mac
 
 ```Shell
-dream> "A fantasy landscape, trending on artstation" -I /Users/<your-user>/Pictures/sketch-mountains-input.jpg --strength 0.75  --steps 100 -n4
+invoke> "A fantasy landscape, trending on artstation" -I /Users/<your-user>/Pictures/sketch-mountains-input.jpg --strength 0.75  --steps 100 -n4
 ```
 
 If you're on a Linux container on your Mac
 
 ```Shell
-dream> "A fantasy landscape, trending on artstation" -I /data/sketch-mountains-input.jpg --strength 0.75  --steps 50 -n1
+invoke> "A fantasy landscape, trending on artstation" -I /data/sketch-mountains-input.jpg --strength 0.75  --steps 50 -n1
 ```
 
 ## Web Interface
 
-You can use the `dream` script with a graphical web interface. Start the web
+You can use the `invoke` script with a graphical web interface. Start the web
 server with:
 
 ```Shell
-python3 scripts/dream.py --full_precision --web
+python3 scripts/invoke.py --full_precision --web
 ```
 
 If it's running on your Mac point your Mac web browser to http://127.0.0.1:9090

docs/installation/INSTALL_LINUX.md

@@ -89,16 +89,16 @@ This will create InvokeAI folder where you will follow the rest of the steps.
 
 ```
 # for the pre-release weights use the -l or --liaon400m switch
-(ldm) ~/InvokeAI$ python3 scripts/dream.py -l
+(ldm) ~/InvokeAI$ python3 scripts/invoke.py -l
 
 # for the post-release weights do not use the switch
-(ldm) ~/InvokeAI$ python3 scripts/dream.py
+(ldm) ~/InvokeAI$ python3 scripts/invoke.py
 
 # for additional configuration switches and arguments, use -h or --help
-(ldm) ~/InvokeAI$ python3 scripts/dream.py -h
+(ldm) ~/InvokeAI$ python3 scripts/invoke.py -h
 ```
 
-9. Subsequently, to relaunch the script, be sure to run "conda activate ldm" (step 5, second command), enter the `InvokeAI` directory, and then launch the dream script (step 8). If you forget to activate the ldm environment, the script will fail with multiple `ModuleNotFound` errors.
+9. Subsequently, to relaunch the script, be sure to run "conda activate ldm" (step 5, second command), enter the `InvokeAI` directory, and then launch the invoke script (step 8). If you forget to activate the ldm environment, the script will fail with multiple `ModuleNotFound` errors.
 
 ## Updating to newer versions of the script
 

docs/installation/INSTALL_MAC.md

@@ -2,145 +2,112 @@
 title: macOS
 ---
 
-# :fontawesome-brands-apple: macOS
+Invoke AI runs quite well on M1 Macs and we have a number of M1 users
+in the community.
+
+While the repo does run on Intel Macs, we only have a couple
+reports. If you have an Intel Mac and run into issues, please create
+an issue on Github and we will do our best to help.
 
 ## Requirements
 
 - macOS 12.3 Monterey or later
-- Python
-- Patience
-- Apple Silicon or Intel Mac
+- About 10GB of storage (and 10GB of data if your internet connection has data caps)
+- Any M1 Macs or an Intel Macs with 4GB+ of VRAM (ideally more)
 
-Things have moved really fast and so these instructions change often which makes
-them outdated pretty fast. One of the problems is that there are so many
-different ways to run this.
+## Installation
 
-We are trying to build a testing setup so that when we make changes it doesn't
-always break.
+First you need to download a large checkpoint file.
 
-## How to
+1. Sign up at https://huggingface.co
+2. Go to the [Stable diffusion diffusion model page](https://huggingface.co/CompVis/stable-diffusion-v-1-4-original)
+3. Accept the terms and click Access Repository
+4. Download [sd-v1-4.ckpt (4.27 GB)](https://huggingface.co/CompVis/stable-diffusion-v-1-4-original/blob/main/sd-v1-4.ckpt) and note where you have saved it (probably the Downloads folder). You may want to move it somewhere else for longer term storage - SD needs this file to run.
 
-(this hasn't been 100% tested yet)
+While that is downloading, open Terminal and run the following commands one at a time, reading the comments and taking care to run the appropriate command for your Mac's architecture (Intel or M1).
 
-First get the weights checkpoint download started since it's big and will take
-some time:
+Do not just copy and paste the whole thing into your terminal!
 
-1. Sign up at [huggingface.co](https://huggingface.co)
-2. Go to the
-   [Stable diffusion diffusion model page](https://huggingface.co/CompVis/stable-diffusion-v-1-4-original)
-3. Accept the terms and click Access Repository:
-4. Download
-   [sd-v1-4.ckpt (4.27 GB)](https://huggingface.co/CompVis/stable-diffusion-v-1-4-original/blob/main/sd-v1-4.ckpt)
-   and note where you have saved it (probably the Downloads folder)
+```bash
+# Install brew (and Xcode command line tools):
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 
-While that is downloading, open a Terminal and run the following commands:
+# Now there are two options to get the Python (miniconda) environment up and running:
+# 1. Alongside pyenv
+# 2. Standalone
+#
+# If you don't know what we are talking about, choose 2.
+#
+# If you are familiar with python environments, you'll know there are other options
+# for setting up the environment - you are on your own if you go one of those routes.
 
-!!! todo "Homebrew"
+##### BEGIN TWO DIFFERENT OPTIONS #####
 
-    === "no brew installation yet"
+### BEGIN OPTION 1: Installing alongside pyenv ###
+brew install pyenv-virtualenv # you might have this from before, no problem
+pyenv install anaconda3-2022.05
+pyenv virtualenv anaconda3-2022.05
+eval "$(pyenv init -)"
+pyenv activate anaconda3-2022.05
+### END OPTION 1 ###
 
-        ```bash title="install brew (and Xcode command line tools)"
-        /bin/bash -c \
-          "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-        ```
+### BEGIN OPTION 2: Installing standalone ###
+# Install cmake, protobuf, and rust:
+brew install cmake protobuf rust
 
-    === "brew is already installed"
-    
-        Only if you installed protobuf in a previous version of this tutorial, otherwise skip
+# BEGIN ARCHITECTURE-DEPENDENT STEP #
+# For M1: install miniconda (M1 arm64 version):
+curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-arm64.sh -o Miniconda3-latest-MacOSX-arm64.sh
+/bin/bash Miniconda3-latest-MacOSX-arm64.sh
 
-        `#!bash brew uninstall protobuf`
+# For Intel: install miniconda (Intel x86-64 version):
+curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-x86_64.sh -o Miniconda3-latest-MacOSX-x86_64.sh
+/bin/bash Miniconda3-latest-MacOSX-x86_64.sh
+# END ARCHITECTURE-DEPENDENT STEP #
 
-!!! todo "Conda Installation"
+### END OPTION 2 ###
 
-    Now there are two different ways to set up the Python (miniconda) environment:
-    1. Standalone
-    2. with pyenv
-    If you don't know what we are talking about, choose Standalone
+##### END TWO DIFFERENT OPTIONS #####
 
-    === "Standalone"
-
-        ```bash
-        # install cmake and rust:
-        brew install cmake rust
-        ```
-
-        === "M1 arm64"
-
-            ```bash title="Install miniconda for M1 arm64"
-            curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-arm64.sh \
-              -o Miniconda3-latest-MacOSX-arm64.sh
-            /bin/bash Miniconda3-latest-MacOSX-arm64.sh
-            ```
-
-        === "Intel x86_64"
-
-            ```bash title="Install miniconda for Intel"
-            curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-x86_64.sh \
-              -o Miniconda3-latest-MacOSX-x86_64.sh
-            /bin/bash Miniconda3-latest-MacOSX-x86_64.sh
-            ```
-
-    === "with pyenv"
-
-        ```{.bash .annotate}
-        brew install rust pyenv-virtualenv # (1)!
-        pyenv install anaconda3-2022.05
-        pyenv virtualenv anaconda3-2022.05
-        eval "$(pyenv init -)"
-        pyenv activate anaconda3-2022.05
-        ```
-        
-        1. You might already have this installed, if that is the case just continue.
-
-```{.bash .annotate title="local repo setup"}
-# clone the repo
+# Clone the Invoke AI repo
 git clone https://github.com/invoke-ai/InvokeAI.git
-
 cd InvokeAI
 
-# wait until the checkpoint file has downloaded, then proceed
+### WAIT FOR THE CHECKPOINT FILE TO DOWNLOAD, THEN PROCEED ###
 
-# create symlink to checkpoint
+# We will leave the big checkpoint wherever you stashed it for long-term storage,
+# and make a link to it from the repo's folder. This allows you to use it for
+# other repos, and if you need to delete Invoke AI, you won't have to download it again.
+
+# Make the directory in the repo for the symlink
 mkdir -p models/ldm/stable-diffusion-v1/
 
-PATH_TO_CKPT="$HOME/Downloads" # (1)!
+# This is the folder where you put the checkpoint file `sd-v1-4.ckpt`
+PATH_TO_CKPT="$HOME/Downloads"
 
-ln -s "$PATH_TO_CKPT/sd-v1-4.ckpt" \
-  models/ldm/stable-diffusion-v1/model.ckpt
-```
+# Create a link to the checkpoint
+ln -s "$PATH_TO_CKPT/sd-v1-4.ckpt" models/ldm/stable-diffusion-v1/model.ckpt
 
-1. or wherever you saved sd-v1-4.ckpt
+# BEGIN ARCHITECTURE-DEPENDENT STEP #
+# For M1: Create the environment & install packages
+PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-arm64 conda env create -f environment-mac.yml
 
-!!! todo "create Conda Environment"
+# For Intel: Create the environment & install packages
+PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-64 conda env create -f environment-mac.yml
 
-    === "M1 arm64"
+# END ARCHITECTURE-DEPENDENT STEP #
 
-        ```bash
-        PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-arm64 \
-          conda env create \
-          -f environment-mac.yml \
-          && conda activate ldm
-        ```
+# Activate the environment (you need to do this every time you want to run SD)
+conda activate ldm
 
-
-    === "Intel x86_64"
-
-        ```bash
-        PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-64 \
-          conda env create \
-          -f environment-mac.yml \
-          && conda activate ldm
-        ```
-
-```{.bash .annotate title="preload models and run script"}
-# only need to do this once
+# This will download some bits and pieces and make take a while
 python scripts/preload_models.py
 
-# now you can run SD in CLI mode
-python scripts/dream.py --full_precision  # (1)!
-
+# Run SD!
+python scripts/dream.py
+```
 # or run the web interface!
-python scripts/dream.py --web
+python scripts/invoke.py --web
 
 # The original scripts should work as well.
 python scripts/orig_scripts/txt2img.py \
@@ -155,7 +122,7 @@ it isn't required but wont hurt.
 
 ## Common problems
 
-After you followed all the instructions and try to run dream.py, you might
+After you followed all the instructions and try to run invoke.py, you might
 get several errors. Here's the errors I've seen and found solutions for.
 
 ### Is it slow?
@@ -172,13 +139,13 @@ python ./scripts/orig_scripts/txt2img.py \
 
 ### Doesn't work anymore?
 
-PyTorch nightly includes support for MPS. Because of this, this setup is
-inherently unstable. One morning I woke up and it no longer worked no matter
-what I did until I switched to miniforge. However, I have another Mac that works
-just fine with Anaconda. If you can't get it to work, please search a little
-first because many of the errors will get posted and solved. If you can't find a
-solution please
-[create an issue](https://github.com/invoke-ai/InvokeAI/issues).
+PyTorch nightly includes support for MPS. Because of this, this setup
+is inherently unstable. One morning I woke up and it no longer worked
+no matter what I did until I switched to miniforge. However, I have
+another Mac that works just fine with Anaconda. If you can't get it to
+work, please search a little first because many of the errors will get
+posted and solved. If you can't find a solution please [create an
+issue](https://github.com/invoke-ai/InvokeAI/issues).
 
 One debugging step is to update to the latest version of PyTorch nightly.
 
@@ -220,9 +187,9 @@ There are several causes of these errors:
    "(ldm)" then you activated it. If it begins with "(base)" or something else
    you haven't.
 
-2. You might've run `./scripts/preload_models.py` or `./scripts/dream.py`
+2. You might've run `./scripts/preload_models.py` or `./scripts/invoke.py`
    instead of `python ./scripts/preload_models.py` or
-   `python ./scripts/dream.py`. The cause of this error is long so it's below.
+   `python ./scripts/invoke.py`. The cause of this error is long so it's below.
 
     <!-- I could not find out where the error is, otherwise would have marked it as a footnote -->
 
@@ -378,7 +345,7 @@ python scripts/preload_models.py
     WARNING: this will be slower than running natively on MPS.
     ```
 
-This fork already includes a fix for this in
+The InvokeAI version includes this fix in
 [environment-mac.yml](https://github.com/invoke-ai/InvokeAI/blob/main/environment-mac.yml).
 
 ### "Could not build wheels for tokenizers"
@@ -463,13 +430,10 @@ C.
 
 You don't have a virus. It's part of the project. Here's
 [Rick](https://github.com/invoke-ai/InvokeAI/blob/main/assets/rick.jpeg)
-and here's
-[the code](https://github.com/invoke-ai/InvokeAI/blob/69ae4b35e0a0f6ee1af8bb9a5d0016ccb27e36dc/scripts/txt2img.py#L79)
-that swaps him in. It's a NSFW filter, which IMO, doesn't work very good (and we
-call this "computer vision", sheesh).
-
-Actually, this could be happening because there's not enough RAM. You could try
-the `model.half()` suggestion or specify smaller output images.
+and here's [the
+code](https://github.com/invoke-ai/InvokeAI/blob/69ae4b35e0a0f6ee1af8bb9a5d0016ccb27e36dc/scripts/txt2img.py#L79)
+that swaps him in. It's a NSFW filter, which IMO, doesn't work very
+good (and we call this "computer vision", sheesh).
 
 ---
 
@@ -492,11 +456,9 @@ return torch.layer_norm(input, normalized_shape, weight, bias, eps, torch.backen
 RuntimeError: view size is not compatible with input tensor's size and stride (at least one dimension spans across two contiguous subspaces). Use .reshape(...) instead.
 ```
 
-Update to the latest version of invoke-ai/InvokeAI. We were patching
-pytorch but we found a file in stable-diffusion that we could change instead.
-This is a 32-bit vs 16-bit problem.
-
----
+Update to the latest version of invoke-ai/InvokeAI. We were
+patching pytorch but we found a file in stable-diffusion that we could
+change instead. This is a 32-bit vs 16-bit problem.
 
 ### The processor must support the Intel bla bla bla
 
@@ -519,7 +481,7 @@ use ARM packages, and use `nomkl` as described above.
 May appear when just starting to generate, e.g.:
 
 ```bash
-dream> clouds
+invoke> clouds
 Generating:   0%|                                                              | 0/1 [00:00<?, ?it/s]/Users/[...]/dev/stable-diffusion/ldm/modules/embedding_manager.py:152: UserWarning: The operator 'aten::nonzero' is not currently supported on the MPS backend and will fall back to run on the CPU. This may have performance implications. (Triggered internally at /Users/runner/work/_temp/anaconda/conda-bld/pytorch_1662016319283/work/aten/src/ATen/mps/MPSFallback.mm:11.)
   placeholder_idx = torch.where(
                                                                                                     loc("mps_add"("(mpsFileLoc): /AppleInternal/Library/BuildRoots/20d6c351-ee94-11ec-bcaf-7247572f23b4/Library/Caches/com.apple.xbs/Sources/MetalPerformanceShadersGraph/mpsgraph/MetalPerformanceShadersGraph/Core/Files/MPSGraphUtilities.mm":219:0)): error: input types 'tensor<2x1280xf32>' and 'tensor<*xf16>' are not broadcast compatible

docs/installation/INSTALL_WINDOWS.md

@@ -101,13 +101,13 @@ you may instead create a shortcut to it from within `models\ldm\stable-diffusion
 
     ```bash
     # for the pre-release weights
-    python scripts\dream.py -l
+    python scripts\invoke.py -l
 
     # for the post-release weights
-    python scripts\dream.py
+    python scripts\invoke.py
     ```
 
-10. Subsequently, to relaunch the script, first activate the Anaconda command window (step 3),enter the InvokeAI directory (step 5, `cd \path\to\InvokeAI`), run `conda activate ldm` (step 6b), and then launch the dream script (step 9).
+10. Subsequently, to relaunch the script, first activate the Anaconda command window (step 3),enter the InvokeAI directory (step 5, `cd \path\to\InvokeAI`), run `conda activate ldm` (step 6b), and then launch the invoke script (step 9).
 
     **Note:** Tildebyte has written an alternative
     ["Easy peasy Windows install"](https://github.com/invoke-ai/InvokeAI/wiki/Easy-peasy-Windows-install)

docs/other/CONTRIBUTORS.md

@@ -58,6 +58,7 @@ We thank them for all of their time and hard work.
 - [rabidcopy](https://github.com/rabidcopy)
 - [Dominic Letz](https://github.com/dominicletz)
 - [Dmitry T.](https://github.com/ArDiouscuros)
+- [Kent Keirsey](https://github.com/hipsterusername)
 
 ## **Original CompVis Authors:**
 

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.d9916e7a.js"></script>
-  <link rel="stylesheet" href="/assets/index.853a336f.css">
+  <script type="module" crossorigin src="/assets/index.989a0ca2.js"></script>
+  <link rel="stylesheet" href="/assets/index.58175ea1.css">
 </head>
 
 <body>

frontend/package.json

@@ -23,7 +23,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "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/App.scss

@@ -2,6 +2,7 @@
 
 .App {
   display: grid;
+  width: max-content;
 }
 
 .app-content {
@@ -14,4 +15,9 @@
   grid-auto-rows: max-content;
   width: $app-width;
   height: $app-height;
+  min-width: min-content;
+}
+
+.app-console {
+  z-index: 9999;
 }

frontend/src/app/App.tsx

@@ -26,7 +26,9 @@ const App = () => {
         <SiteHeader />
         <InvokeTabs />
       </div>
-      <Console />
+      <div className="app-console">
+        <Console />
+      </div>
     </div>
   ) : (
     <Loading />

frontend/src/app/socketio/emitters.ts

@@ -6,6 +6,7 @@ import {
   addLogEntry,
   setIsProcessing,
 } from '../../features/system/systemSlice';
+import { tabMap, tab_dict } from '../../features/tabs/InvokeTabs';
 import * as InvokeAI from '../invokeai';
 
 /**
@@ -23,8 +24,14 @@ const makeSocketIOEmitters = (
     emitGenerateImage: () => {
       dispatch(setIsProcessing(true));
 
+      const options = { ...getState().options };
+
+      if (tabMap[options.activeTab] === 'txt2img') {
+        options.shouldUseInitImage = false;
+      }
+
       const { generationParameters, esrganParameters, gfpganParameters } =
-        frontendToBackendParameters(getState().options, getState().system);
+        frontendToBackendParameters(options, getState().system);
 
       socketio.emit(
         'generateImage',

frontend/src/common/components/IAIIconButton.tsx

@@ -1,7 +1,13 @@
-import { IconButtonProps, IconButton, Tooltip } from '@chakra-ui/react';
+import {
+  IconButtonProps,
+  IconButton,
+  Tooltip,
+  PlacementWithLogical,
+} from '@chakra-ui/react';
 
 interface Props extends IconButtonProps {
   tooltip?: string;
+  tooltipPlacement?: PlacementWithLogical | undefined;
 }
 
 /**
@@ -10,10 +16,14 @@ interface Props extends IconButtonProps {
  * TODO: Get rid of this.
  */
 const IAIIconButton = (props: Props) => {
-  const { tooltip = '', onClick, ...rest } = props;
+  const { tooltip = '', tooltipPlacement = 'bottom', onClick, ...rest } = props;
   return (
-    <Tooltip label={tooltip}>
-      <IconButton {...rest} cursor={onClick ? 'pointer' : 'unset'} onClick={onClick}/>
+    <Tooltip label={tooltip} hasArrow placement={tooltipPlacement}>
+      <IconButton
+        {...rest}
+        cursor={onClick ? 'pointer' : 'unset'}
+        onClick={onClick}
+      />
     </Tooltip>
   );
 };

frontend/src/common/components/InvokeImageUploader.tsx

@@ -0,0 +1,65 @@
+import { Button, useToast } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+import { FileRejection } from 'react-dropzone';
+import { useAppDispatch } from '../../app/store';
+import ImageUploader from '../../features/options/ImageUploader';
+
+interface InvokeImageUploaderProps {
+  label?: string;
+  icon?: any;
+  onMouseOver?: any;
+  OnMouseout?: any;
+  dispatcher: any;
+  styleClass?: string;
+}
+
+export default function InvokeImageUploader(props: InvokeImageUploaderProps) {
+  const { label, icon, dispatcher, styleClass, onMouseOver, OnMouseout } =
+    props;
+
+  const toast = useToast();
+  const dispatch = useAppDispatch();
+
+  // Callbacks to for handling file upload attempts
+  const fileAcceptedCallback = useCallback(
+    (file: File) => dispatch(dispatcher(file)),
+    [dispatch, dispatcher]
+  );
+
+  const fileRejectionCallback = useCallback(
+    (rejection: FileRejection) => {
+      const msg = rejection.errors.reduce(
+        (acc: string, cur: { message: string }) => acc + '\n' + cur.message,
+        ''
+      );
+
+      toast({
+        title: 'Upload failed',
+        description: msg,
+        status: 'error',
+        isClosable: true,
+      });
+    },
+    [toast]
+  );
+
+  return (
+    <ImageUploader
+      fileAcceptedCallback={fileAcceptedCallback}
+      fileRejectionCallback={fileRejectionCallback}
+      styleClass={styleClass}
+    >
+      <Button
+        size={'sm'}
+        fontSize={'md'}
+        fontWeight={'normal'}
+        onMouseOver={onMouseOver}
+        onMouseOut={OnMouseout}
+        leftIcon={icon}
+        width={'100%'}
+      >
+        {label ? label : null}
+      </Button>
+    </ImageUploader>
+  );
+}

frontend/src/common/hooks/useCheckParameters.ts

@@ -18,6 +18,7 @@ export const optionsSelector = createSelector(
       maskPath: options.maskPath,
       initialImagePath: options.initialImagePath,
       seed: options.seed,
+      activeTab: options.activeTab,
     };
   },
   {
@@ -55,6 +56,7 @@ const useCheckParameters = (): boolean => {
     maskPath,
     initialImagePath,
     seed,
+    activeTab,
   } = useAppSelector(optionsSelector);
 
   const { isProcessing, isConnected } = useAppSelector(systemSelector);
@@ -65,6 +67,10 @@ const useCheckParameters = (): boolean => {
       return false;
     }
 
+    if (prompt && !initialImagePath && activeTab === 1) {
+      return false;
+    }
+
     //  Cannot generate with a mask without img2img
     if (maskPath && !initialImagePath) {
       return false;
@@ -100,6 +106,7 @@ const useCheckParameters = (): boolean => {
     shouldGenerateVariations,
     seedWeights,
     seed,
+    activeTab,
   ]);
 };
 

frontend/src/features/gallery/CurrentImageButtons.tsx

@@ -6,9 +6,11 @@ import * as InvokeAI from '../../app/invokeai';
 import { useAppDispatch, useAppSelector } from '../../app/store';
 import { RootState } from '../../app/store';
 import {
+  setActiveTab,
   setAllParameters,
   setInitialImagePath,
   setSeed,
+  setShouldShowImageDetails,
 } from '../options/optionsSlice';
 import DeleteImageModal from './DeleteImageModal';
 import { SystemState } from '../system/systemSlice';
@@ -19,6 +21,8 @@ import { MdDelete, MdFace, MdHd, MdImage, MdInfo } from 'react-icons/md';
 import InvokePopover from './InvokePopover';
 import UpscaleOptions from '../options/AdvancedOptions/Upscale/UpscaleOptions';
 import FaceRestoreOptions from '../options/AdvancedOptions/FaceRestore/FaceRestoreOptions';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useToast } from '@chakra-ui/react';
 
 const systemSelector = createSelector(
   (state: RootState) => state.system,
@@ -39,21 +43,21 @@ const systemSelector = createSelector(
 
 type CurrentImageButtonsProps = {
   image: InvokeAI.Image;
-  shouldShowImageDetails: boolean;
-  setShouldShowImageDetails: (b: boolean) => void;
 };
 
 /**
  * Row of buttons for common actions:
  * Use as init image, use all params, use seed, upscale, fix faces, details, delete.
  */
-const CurrentImageButtons = ({
-  image,
-  shouldShowImageDetails,
-  setShouldShowImageDetails,
-}: CurrentImageButtonsProps) => {
+const CurrentImageButtons = ({ image }: CurrentImageButtonsProps) => {
   const dispatch = useAppDispatch();
 
+  const shouldShowImageDetails = useAppSelector(
+    (state: RootState) => state.options.shouldShowImageDetails
+  );
+
+  const toast = useToast();
+
   const intermediateImage = useAppSelector(
     (state: RootState) => state.gallery.intermediateImage
   );
@@ -69,28 +73,176 @@ const CurrentImageButtons = ({
   const { isProcessing, isConnected, isGFPGANAvailable, isESRGANAvailable } =
     useAppSelector(systemSelector);
 
-  const handleClickUseAsInitialImage = () =>
+  const handleClickUseAsInitialImage = () => {
     dispatch(setInitialImagePath(image.url));
+    dispatch(setActiveTab(1));
+  };
+
+  useHotkeys(
+    'shift+i',
+    () => {
+      if (image) {
+        handleClickUseAsInitialImage();
+        toast({
+          title: 'Sent To Image To Image',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        });
+      } else {
+        toast({
+          title: 'No Image Loaded',
+          description: 'No image found to send to image to image module.',
+          status: 'error',
+          duration: 2500,
+          isClosable: true,
+        });
+      }
+    },
+    [image]
+  );
 
   const handleClickUseAllParameters = () =>
     dispatch(setAllParameters(image.metadata));
+  useHotkeys(
+    'a',
+    () => {
+      if (['txt2img', 'img2img'].includes(image?.metadata?.image?.type)) {
+        handleClickUseAllParameters();
+        toast({
+          title: 'Parameters Set',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        });
+      } else {
+        toast({
+          title: 'Parameters Not Set',
+          description: 'No metadata found for this image.',
+          status: 'error',
+          duration: 2500,
+          isClosable: true,
+        });
+      }
+    },
+    [image]
+  );
 
   // Non-null assertion: this button is disabled if there is no seed.
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const handleClickUseSeed = () => dispatch(setSeed(image.metadata.image.seed));
+  useHotkeys(
+    's',
+    () => {
+      if (image?.metadata?.image?.seed) {
+        handleClickUseSeed();
+        toast({
+          title: 'Seed Set',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        });
+      } else {
+        toast({
+          title: 'Seed Not Set',
+          description: 'Could not find seed for this image.',
+          status: 'error',
+          duration: 2500,
+          isClosable: true,
+        });
+      }
+    },
+    [image]
+  );
+
   const handleClickUpscale = () => dispatch(runESRGAN(image));
+  useHotkeys(
+    'u',
+    () => {
+      if (
+        isESRGANAvailable &&
+        Boolean(!intermediateImage) &&
+        isConnected &&
+        !isProcessing &&
+        upscalingLevel
+      ) {
+        handleClickUpscale();
+      } else {
+        toast({
+          title: 'Upscaling Failed',
+          status: 'error',
+          duration: 2500,
+          isClosable: true,
+        });
+      }
+    },
+    [
+      image,
+      isESRGANAvailable,
+      intermediateImage,
+      isConnected,
+      isProcessing,
+      upscalingLevel,
+    ]
+  );
 
   const handleClickFixFaces = () => dispatch(runGFPGAN(image));
+  useHotkeys(
+    'r',
+    () => {
+      if (
+        isGFPGANAvailable &&
+        Boolean(!intermediateImage) &&
+        isConnected &&
+        !isProcessing &&
+        gfpganStrength
+      ) {
+        handleClickFixFaces();
+      } else {
+        toast({
+          title: 'Face Restoration Failed',
+          status: 'error',
+          duration: 2500,
+          isClosable: true,
+        });
+      }
+    },
+    [
+      image,
+      isGFPGANAvailable,
+      intermediateImage,
+      isConnected,
+      isProcessing,
+      gfpganStrength,
+    ]
+  );
 
   const handleClickShowImageDetails = () =>
-    setShouldShowImageDetails(!shouldShowImageDetails);
+    dispatch(setShouldShowImageDetails(!shouldShowImageDetails));
+
+  useHotkeys(
+    'i',
+    () => {
+      if (image) {
+        handleClickShowImageDetails();
+      } else {
+        toast({
+          title: 'Failed to load metadata',
+          status: 'error',
+          duration: 2500,
+          isClosable: true,
+        });
+      }
+    },
+    [image, shouldShowImageDetails]
+  );
 
   return (
     <div className="current-image-options">
       <IAIIconButton
         icon={<MdImage />}
-        tooltip="Use As Initial Image"
-        aria-label="Use As Initial Image"
+        tooltip="Send To Image To Image"
+        aria-label="Send To Image To Image"
         onClick={handleClickUseAsInitialImage}
       />
 

frontend/src/features/gallery/CurrentImageDisplay.scss

@@ -11,23 +11,7 @@
   border-radius: 0.5rem;
 }
 
-.current-image-display-placeholder {
-  background-color: var(--background-color-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-
-  svg {
-    width: 10rem;
-    height: 10rem;
-    color: var(--svg-color);
-  }
-}
-
 .current-image-tools {
-  grid-area: current-image-tools;
   width: 100%;
   height: 100%;
   display: grid;
@@ -58,34 +42,69 @@
   align-items: center;
   display: grid;
   width: 100%;
+  grid-template-areas: 'current-image-content';
 
   img {
+    grid-area: current-image-content;
+    background-color: var(--img2img-img-bg-color);
     border-radius: 0.5rem;
     object-fit: contain;
     width: auto;
+    height: $app-gallery-height;
     max-height: $app-gallery-height;
   }
 }
 
-.current-image-metadata-viewer {
-  border-radius: 0.5rem;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(100% - 2rem);
-  padding: 0.5rem;
-  margin-left: 1rem;
-  background-color: var(--metadata-bg-color);
-  z-index: 1;
-  overflow: scroll;
-  height: calc($app-metadata-height - 1rem);
+.current-image-metadata {
+  grid-area: current-image-preview;
 }
 
-.current-image-json-viewer {
-  border-radius: 0.5rem;
-  margin: 0 0.5rem 1rem 0.5rem;
-  padding: 1rem;
-  overflow-x: scroll;
-  word-break: break-all;
-  background-color: var(--metadata-json-bg-color);
+.current-image-next-prev-buttons {
+  grid-area: current-image-content;
+  display: flex;
+  justify-content: space-between;
+  z-index: 1;
+  height: 100%;
+  pointer-events: none;
+}
+
+.next-prev-button-trigger-area {
+  width: 7rem;
+  height: 100%;
+  width: 15%;
+  display: grid;
+  align-items: center;
+  pointer-events: auto;
+
+  &.prev-button-trigger-area {
+    justify-content: flex-start;
+  }
+
+  &.next-button-trigger-area {
+    justify-content: flex-end;
+  }
+}
+
+.next-prev-button {
+  font-size: 4rem;
+  fill: var(--white);
+  filter: drop-shadow(0 0 1rem var(--text-color-secondary));
+  opacity: 70%;
+}
+
+.current-image-display-placeholder {
+  background-color: var(--background-color-secondary);
+  display: grid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+
+  svg {
+    width: 10rem;
+    height: 10rem;
+    color: var(--svg-color);
+  }
 }

frontend/src/features/gallery/CurrentImageDisplay.tsx

@@ -1,10 +1,8 @@
-import { Image } from '@chakra-ui/react';
-import { useAppSelector } from '../../app/store';
-import { RootState } from '../../app/store';
-import { useState } from 'react';
-import ImageMetadataViewer from './ImageMetadataViewer';
+import { RootState, useAppSelector } from '../../app/store';
 import CurrentImageButtons from './CurrentImageButtons';
 import { MdPhoto } from 'react-icons/md';
+import CurrentImagePreview from './CurrentImagePreview';
+import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
 
 /**
  * Displays the current image if there is one, plus associated actions.
@@ -14,33 +12,24 @@ const CurrentImageDisplay = () => {
     (state: RootState) => state.gallery
   );
 
-  const [shouldShowImageDetails, setShouldShowImageDetails] =
-    useState<boolean>(false);
+  const shouldShowImageDetails = useAppSelector(
+    (state: RootState) => state.options.shouldShowImageDetails
+  );
 
   const imageToDisplay = intermediateImage || currentImage;
 
   return imageToDisplay ? (
     <div className="current-image-display">
       <div className="current-image-tools">
-        <CurrentImageButtons
+        <CurrentImageButtons image={imageToDisplay} />
+      </div>
+      <CurrentImagePreview imageToDisplay={imageToDisplay} />
+      {shouldShowImageDetails && (
+        <ImageMetadataViewer
           image={imageToDisplay}
-          shouldShowImageDetails={shouldShowImageDetails}
-          setShouldShowImageDetails={setShouldShowImageDetails}
+          styleClass="current-image-metadata"
         />
-      </div>
-      <div className="current-image-preview">
-        <Image
-          src={imageToDisplay.url}
-          fit="contain"
-          maxWidth={'100%'}
-          maxHeight={'100%'}
-        />
-        {shouldShowImageDetails && (
-          <div className="current-image-metadata-viewer">
-            <ImageMetadataViewer image={imageToDisplay} />
-          </div>
-        )}
-      </div>
+      )}
     </div>
   ) : (
     <div className="current-image-display-placeholder">

frontend/src/features/gallery/CurrentImagePreview.tsx

@@ -0,0 +1,105 @@
+import { IconButton, Image } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
+import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
+import { GalleryState, selectNextImage, selectPrevImage } from './gallerySlice';
+import * as InvokeAI from '../../app/invokeai';
+import { createSelector } from '@reduxjs/toolkit';
+import _ from 'lodash';
+
+const imagesSelector = createSelector(
+  (state: RootState) => state.gallery,
+  (gallery: GalleryState) => {
+    const currentImageIndex = gallery.images.findIndex(
+      (i) => i.uuid === gallery?.currentImage?.uuid
+    );
+    const imagesLength = gallery.images.length;
+    return {
+      isOnFirstImage: currentImageIndex === 0,
+      isOnLastImage:
+        !isNaN(currentImageIndex) && currentImageIndex === imagesLength - 1,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+interface CurrentImagePreviewProps {
+  imageToDisplay: InvokeAI.Image;
+}
+
+export default function CurrentImagePreview(props: CurrentImagePreviewProps) {
+  const { imageToDisplay } = props;
+  const dispatch = useAppDispatch();
+
+  const { isOnFirstImage, isOnLastImage } = useAppSelector(imagesSelector);
+
+  const shouldShowImageDetails = useAppSelector(
+    (state: RootState) => state.options.shouldShowImageDetails
+  );
+
+  const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] =
+    useState<boolean>(false);
+
+  const handleCurrentImagePreviewMouseOver = () => {
+    setShouldShowNextPrevButtons(true);
+  };
+
+  const handleCurrentImagePreviewMouseOut = () => {
+    setShouldShowNextPrevButtons(false);
+  };
+
+  const handleClickPrevButton = () => {
+    dispatch(selectPrevImage());
+  };
+
+  const handleClickNextButton = () => {
+    dispatch(selectNextImage());
+  };
+
+  return (
+    <div className="current-image-preview">
+      <Image
+        src={imageToDisplay.url}
+        fit="contain"
+        maxWidth={'100%'}
+        maxHeight={'100%'}
+      />
+      {!shouldShowImageDetails && (
+        <div className="current-image-next-prev-buttons">
+          <div
+            className="next-prev-button-trigger-area prev-button-trigger-area"
+            onMouseOver={handleCurrentImagePreviewMouseOver}
+            onMouseOut={handleCurrentImagePreviewMouseOut}
+          >
+            {shouldShowNextPrevButtons && !isOnFirstImage && (
+              <IconButton
+                aria-label="Previous image"
+                icon={<FaAngleLeft className="next-prev-button" />}
+                variant="unstyled"
+                onClick={handleClickPrevButton}
+              />
+            )}
+          </div>
+          <div
+            className="next-prev-button-trigger-area next-button-trigger-area"
+            onMouseOver={handleCurrentImagePreviewMouseOver}
+            onMouseOut={handleCurrentImagePreviewMouseOut}
+          >
+            {shouldShowNextPrevButtons && !isOnLastImage && (
+              <IconButton
+                aria-label="Next image"
+                icon={<FaAngleRight className="next-prev-button" />}
+                variant="unstyled"
+                onClick={handleClickNextButton}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/features/gallery/DeleteImageModal.tsx

@@ -27,6 +27,7 @@ import { deleteImage } from '../../app/socketio/actions';
 import { RootState } from '../../app/store';
 import { setShouldConfirmOnDelete, SystemState } from '../system/systemSlice';
 import * as InvokeAI from '../../app/invokeai';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 interface DeleteImageModalProps {
   /**
@@ -67,6 +68,14 @@ const DeleteImageModal = forwardRef(
       onClose();
     };
 
+    useHotkeys(
+      'del',
+      () => {
+        shouldConfirmOnDelete ? onOpen() : handleDelete();
+      },
+      [image, shouldConfirmOnDelete]
+    );
+
     const handleChangeShouldConfirmOnDelete = (
       e: ChangeEvent<HTMLInputElement>
     ) => dispatch(setShouldConfirmOnDelete(!e.target.checked));

frontend/src/features/gallery/HoverableImage.scss

@@ -0,0 +1,59 @@
+.hoverable-image {
+  display: flex;
+  justify-content: center;
+  transition: transform 0.2s ease-out;
+
+  &:hover {
+    cursor: pointer;
+    border-radius: 0.5rem;
+    z-index: 2;
+  }
+
+  .hoverable-image-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .hoverable-image-content {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
+    .hoverable-image-check {
+      fill: var(--status-good-color);
+    }
+  }
+
+  .hoverable-image-icons {
+    position: absolute;
+    bottom: -2rem;
+    display: grid;
+    width: min-content;
+    grid-template-columns: repeat(2, max-content);
+    border-radius: 0.4rem;
+    background-color: var(--background-color-secondary);
+    padding: 0.2rem;
+    gap: 0.2rem;
+    grid-auto-rows: max-content;
+
+    button {
+      width: 12px;
+      height: 12px;
+      border-radius: 0.2rem;
+      padding: 10px 0;
+      flex-shrink: 2;
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+}

frontend/src/features/gallery/HoverableImage.tsx

@@ -1,18 +1,15 @@
-import {
-  Box,
-  Flex,
-  Icon,
-  IconButton,
-  Image,
-  Tooltip,
-  useColorModeValue,
-} from '@chakra-ui/react';
-import { useAppDispatch } from '../../app/store';
+import { Box, Icon, IconButton, Image, Tooltip } from '@chakra-ui/react';
+import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
 import { setCurrentImage } from './gallerySlice';
-import { FaCheck, FaSeedling, FaTrashAlt } from 'react-icons/fa';
+import { FaCheck, FaImage, FaSeedling, FaTrashAlt } from 'react-icons/fa';
 import DeleteImageModal from './DeleteImageModal';
 import { memo, SyntheticEvent, useState } from 'react';
-import { setAllParameters, setSeed } from '../options/optionsSlice';
+import {
+  setActiveTab,
+  setAllParameters,
+  setInitialImagePath,
+  setSeed,
+} from '../options/optionsSlice';
 import * as InvokeAI from '../../app/invokeai';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
 
@@ -33,11 +30,8 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   const [isHovered, setIsHovered] = useState<boolean>(false);
   const dispatch = useAppDispatch();
 
-  const checkColor = useColorModeValue('green.600', 'green.300');
-  const bgColor = useColorModeValue('gray.200', 'gray.700');
-  const bgGradient = useColorModeValue(
-    'radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 20%, rgba(0,0,0,0) 100%)',
-    'radial-gradient(circle, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0) 100%)'
+  const activeTab = useAppSelector(
+    (state: RootState) => state.options.activeTab
   );
 
   const { image, isSelected } = props;
@@ -56,84 +50,91 @@ const HoverableImage = memo((props: HoverableImageProps) => {
     dispatch(setSeed(image.metadata.image.seed));
   };
 
+  const handleSetInitImage = (e: SyntheticEvent) => {
+    e.stopPropagation();
+    dispatch(setInitialImagePath(image.url));
+    if (activeTab !== 1) {
+      dispatch(setActiveTab(1));
+    }
+  };
+
   const handleClickImage = () => dispatch(setCurrentImage(image));
 
   return (
-    <Box position={'relative'} key={uuid}>
+    <Box
+      position={'relative'}
+      key={uuid}
+      className="hoverable-image"
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+    >
       <Image
-        width={120}
-        height={120}
         objectFit="cover"
         rounded={'md'}
         src={url}
         loading={'lazy'}
-        backgroundColor={bgColor}
+        className="hoverable-image-image"
       />
-      <Flex
-        cursor={'pointer'}
-        position={'absolute'}
-        top={0}
-        left={0}
-        rounded={'md'}
-        width="100%"
-        height="100%"
-        alignItems={'center'}
-        justifyContent={'center'}
-        background={isSelected ? bgGradient : undefined}
-        onClick={handleClickImage}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-      >
+      <div className="hoverable-image-content" onClick={handleClickImage}>
         {isSelected && (
-          <Icon fill={checkColor} width={'50%'} height={'50%'} as={FaCheck} />
+          <Icon
+            width={'50%'}
+            height={'50%'}
+            as={FaCheck}
+            className="hoverable-image-check"
+          />
         )}
-        {isHovered && (
-          <Flex
-            direction={'column'}
-            gap={1}
-            position={'absolute'}
-            top={1}
-            right={1}
-          >
-            <Tooltip label={'Delete image'}>
-              <DeleteImageModal image={image}>
-                <IconButton
-                  colorScheme="red"
-                  aria-label="Delete image"
-                  icon={<FaTrashAlt />}
-                  size="xs"
-                  variant={'imageHoverIconButton'}
-                  fontSize={14}
-                />
-              </DeleteImageModal>
+      </div>
+      {isHovered && (
+        <div className="hoverable-image-icons">
+          <Tooltip label={'Delete image'} hasArrow>
+            <DeleteImageModal image={image}>
+              <IconButton
+                colorScheme="red"
+                aria-label="Delete image"
+                icon={<FaTrashAlt />}
+                size="xs"
+                variant={'imageHoverIconButton'}
+                fontSize={14}
+              />
+            </DeleteImageModal>
+          </Tooltip>
+          {['txt2img', 'img2img'].includes(image?.metadata?.image?.type) && (
+            <Tooltip label="Use All Parameters" hasArrow>
+              <IconButton
+                aria-label="Use All Parameters"
+                icon={<IoArrowUndoCircleOutline />}
+                size="xs"
+                fontSize={18}
+                variant={'imageHoverIconButton'}
+                onClickCapture={handleClickSetAllParameters}
+              />
             </Tooltip>
-            {['txt2img', 'img2img'].includes(image?.metadata?.image?.type) && (
-              <Tooltip label="Use all parameters">
-                <IconButton
-                  aria-label="Use all parameters"
-                  icon={<IoArrowUndoCircleOutline />}
-                  size="xs"
-                  fontSize={18}
-                  variant={'imageHoverIconButton'}
-                  onClickCapture={handleClickSetAllParameters}
-                />
-              </Tooltip>
-            )}
-            {image?.metadata?.image?.seed !== undefined && (
-              <Tooltip label="Use seed">
-                <IconButton
-                  aria-label="Use seed"
-                  icon={<FaSeedling />}
-                  size="xs"
-                  fontSize={16}
-                  variant={'imageHoverIconButton'}
-                  onClickCapture={handleClickSetSeed}
-                />
-              </Tooltip>
-            )}
-          </Flex>
-        )}
-      </Flex>
+          )}
+          {image?.metadata?.image?.seed !== undefined && (
+            <Tooltip label="Use Seed" hasArrow>
+              <IconButton
+                aria-label="Use Seed"
+                icon={<FaSeedling />}
+                size="xs"
+                fontSize={16}
+                variant={'imageHoverIconButton'}
+                onClickCapture={handleClickSetSeed}
+              />
+            </Tooltip>
+          )}
+          <Tooltip label="Send To Image To Image" hasArrow>
+            <IconButton
+              aria-label="Send To Image To Image"
+              icon={<FaImage />}
+              size="xs"
+              fontSize={16}
+              variant={'imageHoverIconButton'}
+              onClickCapture={handleSetInitImage}
+            />
+          </Tooltip>
+        </div>
+      )}
     </Box>
   );
 }, memoEqualityCheck);

frontend/src/features/gallery/ImageGallery.scss

@@ -1,43 +1,90 @@
 @use '../../styles/Mixins/' as *;
 
-.image-gallery-container {
-  display: grid;
+.image-gallery-area {
+  .image-gallery-popup-btn {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    border-radius: 0.5rem 0 0 0.5rem;
+    padding: 0 0.5rem;
+    @include Button(
+      $btn-width: 1rem,
+      $btn-height: 6rem,
+      $icon-size: 20px,
+      $btn-color: var(--btn-grey),
+      $btn-color-hover: var(--btn-grey-hover)
+    );
+  }
+}
+
+.image-gallery-popup {
+  background-color: var(--tab-color);
+  padding: 1rem;
+  animation: slideOut 0.3s ease-out;
+  display: flex;
+  flex-direction: column;
   row-gap: 1rem;
-  grid-auto-rows: max-content;
-  min-width: 16rem;
-}
-
-.image-gallery-container-placeholder {
-  display: grid;
-  background-color: var(--background-color-secondary);
   border-radius: 0.5rem;
-  place-items: center;
-  padding: 2rem 0;
+  border-left-width: 0.2rem;
+  min-width: 300px;
+  border-color: var(--gallery-resizeable-color);
+}
 
-  p {
-    color: var(--subtext-color-bright);
-  }
+.image-gallery-header {
+  display: flex;
+  align-items: center;
 
-  svg {
-    width: 5rem;
-    height: 5rem;
-    color: var(--svg-color);
+  h1 {
+    font-weight: bold;
   }
 }
 
-.image-gallery {
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
-  gap: 0.6rem;
-  justify-items: center;
-  max-height: $app-gallery-height;
+.image-gallery-close-btn {
+  background-color: var(--btn-load-more) !important;
+  &:hover {
+    background-color: var(--btn-load-more-hover) !important;
+  }
+}
+
+.image-gallery-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-height: $app-gallery-popover-height;
   overflow-y: scroll;
   @include HideScrollbar;
 }
 
+.masonry-grid {
+  display: -webkit-box; /* Not needed if autoprefixing */
+  display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: flex;
+  margin-left: 0.5rem; /* gutter size offset */
+  width: auto;
+}
+.masonry-grid_column {
+  padding-left: 0.5rem; /* gutter size */
+  background-clip: padding-box;
+}
+
+/* Style your items */
+.masonry-grid_column > .hoverable-image {
+  /* change div to reference your elements you put in <Masonry> */
+  background: var(--tab-color);
+  margin-bottom: 0.5rem;
+}
+
+// .image-gallery {
+//   display: flex;
+//   grid-template-columns: repeat(auto-fill, minmax(80px, auto));
+//   gap: 0.5rem;
+//   justify-items: center;
+// }
+
 .image-gallery-load-more-btn {
   background-color: var(--btn-load-more) !important;
   font-size: 0.85rem !important;
+  font-family: Inter;
 
   &:disabled {
     &:hover {
@@ -49,3 +96,22 @@
     background-color: var(--btn-load-more-hover) !important;
   }
 }
+
+.image-gallery-container-placeholder {
+  display: flex;
+  background-color: var(--background-color-secondary);
+  border-radius: 0.5rem;
+  place-items: center;
+  padding: 2rem 0;
+
+  p {
+    color: var(--subtext-color-bright);
+    font-family: Inter;
+  }
+
+  svg {
+    width: 5rem;
+    height: 5rem;
+    color: var(--svg-color);
+  }
+}

frontend/src/features/gallery/ImageGallery.tsx

@@ -1,66 +1,144 @@
-import { Button } from '@chakra-ui/react';
-import { MdPhotoLibrary } from 'react-icons/md';
-import { requestImages } from '../../app/socketio/actions';
-import { RootState, useAppDispatch } from '../../app/store';
-import { useAppSelector } from '../../app/store';
-import HoverableImage from './HoverableImage';
+import { Button, IconButton } from '@chakra-ui/button';
+import { Resizable } from 're-resizable';
 
-/**
- * Simple image gallery.
- */
-const ImageGallery = () => {
+import React, { useState } 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';
+import { selectNextImage, selectPrevImage } from './gallerySlice';
+import HoverableImage from './HoverableImage';
+import { setShouldShowGallery } from '../options/optionsSlice';
+
+export default function ImageGallery() {
   const { images, currentImageUuid, areMoreImagesAvailable } = useAppSelector(
     (state: RootState) => state.gallery
   );
+
+  const shouldShowGallery = useAppSelector(
+    (state: RootState) => state.options.shouldShowGallery
+  );
+
+  const activeTab = useAppSelector(
+    (state: RootState) => state.options.activeTab
+  );
+
   const dispatch = useAppDispatch();
-  /**
-   * I don't like that this needs to rerender whenever the current image is changed.
-   * What if we have a large number of images? I suppose pagination (planned) will
-   * mitigate this issue.
-   *
-   * TODO: Refactor if performance complaints, or after migrating to new API which supports pagination.
-   */
+
+  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));
+  };
+
+  const handleGalleryClose = () => {
+    dispatch(setShouldShowGallery(false));
+  };
 
   const handleClickLoadMore = () => {
     dispatch(requestImages());
   };
 
+  useHotkeys(
+    'g',
+    () => {
+      handleShowGalleryToggle();
+    },
+    [shouldShowGallery]
+  );
+
+  useHotkeys(
+    'left',
+    () => {
+      dispatch(selectPrevImage());
+    },
+    []
+  );
+
+  useHotkeys(
+    'right',
+    () => {
+      dispatch(selectNextImage());
+    },
+    []
+  );
+
   return (
-    <div className="image-gallery-container">
-      {images.length ? (
-        <>
-          <p>
-            <strong>Your Invocations</strong>
-          </p>
-          <div className="image-gallery">
-            {images.map((image) => {
-              const { uuid } = image;
-              const isSelected = currentImageUuid === uuid;
-              return (
-                <HoverableImage
-                  key={uuid}
-                  image={image}
-                  isSelected={isSelected}
-                />
-              );
-            })}
-          </div>
-        </>
-      ) : (
-        <div className="image-gallery-container-placeholder">
+    <div className="image-gallery-area">
+      {!shouldShowGallery && (
+        <IAIIconButton
+          tooltip="Show Gallery"
+          tooltipPlacement="top"
+          aria-label="Show Gallery"
+          onClick={handleShowGalleryToggle}
+          className="image-gallery-popup-btn"
+        >
           <MdPhotoLibrary />
-          <p>No Images In Gallery</p>
-        </div>
+        </IAIIconButton>
+      )}
+
+      {shouldShowGallery && (
+        <Resizable
+          defaultSize={{ width: '300', height: '100%' }}
+          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
+              size={'sm'}
+              aria-label={'Close Gallery'}
+              onClick={handleGalleryClose}
+              className="image-gallery-close-btn"
+              icon={<MdClear />}
+            />
+          </div>
+          <div className="image-gallery-container">
+            {images.length ? (
+              <Masonry
+                className="masonry-grid"
+                columnClassName="masonry-grid_column"
+                breakpointCols={column}
+              >
+                {/* <div className="image-gallery"> */}
+                {images.map((image) => {
+                  const { uuid } = image;
+                  const isSelected = currentImageUuid === uuid;
+                  return (
+                    <HoverableImage
+                      key={uuid}
+                      image={image}
+                      isSelected={isSelected}
+                    />
+                  );
+                })}
+                {/* </div> */}
+              </Masonry>
+            ) : (
+              <div className="image-gallery-container-placeholder">
+                <MdPhotoLibrary />
+                <p>No Images In Gallery</p>
+              </div>
+            )}
+            <Button
+              onClick={handleClickLoadMore}
+              isDisabled={!areMoreImagesAvailable}
+              className="image-gallery-load-more-btn"
+            >
+              {areMoreImagesAvailable ? 'Load More' : 'All Images Loaded'}
+            </Button>
+          </div>
+        </Resizable>
       )}
-      <Button
-        onClick={handleClickLoadMore}
-        isDisabled={!areMoreImagesAvailable}
-        className="image-gallery-load-more-btn"
-      >
-        {areMoreImagesAvailable ? 'Load More' : 'All Images Loaded'}
-      </Button>
     </div>
   );
-};
-
-export default ImageGallery;
+}

frontend/src/features/gallery/ImageGalleryOld.tsx

@@ -0,0 +1,129 @@
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  useDisclosure,
+} from '@chakra-ui/react';
+import React from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { MdPhotoLibrary } from 'react-icons/md';
+import { requestImages } from '../../app/socketio/actions';
+import { RootState, useAppDispatch } from '../../app/store';
+import { useAppSelector } from '../../app/store';
+import { selectNextImage, selectPrevImage } from './gallerySlice';
+import HoverableImage from './HoverableImage';
+
+/**
+ * Simple image gallery.
+ */
+const ImageGalleryOld = () => {
+  const { images, currentImageUuid, areMoreImagesAvailable } = useAppSelector(
+    (state: RootState) => state.gallery
+  );
+  const dispatch = useAppDispatch();
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  /**
+   * I don't like that this needs to rerender whenever the current image is changed.
+   * What if we have a large number of images? I suppose pagination (planned) will
+   * mitigate this issue.
+   *
+   * TODO: Refactor if performance complaints, or after migrating to new API which supports pagination.
+   */
+
+  const handleClickLoadMore = () => {
+    dispatch(requestImages());
+  };
+
+  useHotkeys(
+    'g',
+    () => {
+      if (isOpen) {
+        onClose();
+      } else {
+        onOpen();
+      }
+    },
+    [isOpen]
+  );
+
+  useHotkeys(
+    'left',
+    () => {
+      dispatch(selectPrevImage());
+    },
+    []
+  );
+
+  useHotkeys(
+    'right',
+    () => {
+      dispatch(selectNextImage());
+    },
+    []
+  );
+
+  return (
+    <div className="image-gallery-area">
+      <Button
+        colorScheme="teal"
+        onClick={onOpen}
+        className="image-gallery-popup-btn"
+      >
+        <MdPhotoLibrary />
+      </Button>
+      <Drawer
+        isOpen={isOpen}
+        placement="right"
+        onClose={onClose}
+        autoFocus={false}
+        trapFocus={false}
+        closeOnOverlayClick={false}
+      >
+        <DrawerContent className="image-gallery-popup">
+          <div className="image-gallery-header">
+            <DrawerHeader>Your Invocations</DrawerHeader>
+            <DrawerCloseButton />
+          </div>
+          <DrawerBody className="image-gallery-body">
+            <div className="image-gallery-container">
+              {images.length ? (
+                <div className="image-gallery">
+                  {images.map((image) => {
+                    const { uuid } = image;
+                    const isSelected = currentImageUuid === uuid;
+                    return (
+                      <HoverableImage
+                        key={uuid}
+                        image={image}
+                        isSelected={isSelected}
+                      />
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="image-gallery-container-placeholder">
+                  <MdPhotoLibrary />
+                  <p>No Images In Gallery</p>
+                </div>
+              )}
+              <Button
+                onClick={handleClickLoadMore}
+                isDisabled={!areMoreImagesAvailable}
+                className="image-gallery-load-more-btn"
+              >
+                {areMoreImagesAvailable ? 'Load More' : 'All Images Loaded'}
+              </Button>
+            </div>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+};
+
+export default ImageGalleryOld;

frontend/src/features/gallery/ImageMetaDataViewer/ImageMetadataViewer.scss

@@ -0,0 +1,20 @@
+@use '../../../styles/Mixins/' as *;
+
+.image-metadata-viewer {
+  width: 100%;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background-color: var(--metadata-bg-color);
+  overflow: scroll;
+  max-height: $app-metadata-height;
+  z-index: 10;
+}
+
+.image-json-viewer {
+  border-radius: 0.5rem;
+  margin: 0 0.5rem 1rem 0.5rem;
+  padding: 1rem;
+  overflow-x: scroll;
+  word-break: break-all;
+  background-color: var(--metadata-json-bg-color);
+}

frontend/src/features/gallery/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -0,0 +1,360 @@
+import {
+  Center,
+  Flex,
+  Heading,
+  IconButton,
+  Link,
+  Text,
+  Tooltip,
+} from '@chakra-ui/react';
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+import { memo } from 'react';
+import { IoArrowUndoCircleOutline } from 'react-icons/io5';
+import { useAppDispatch } from '../../../app/store';
+import * as InvokeAI from '../../../app/invokeai';
+import {
+  setCfgScale,
+  setGfpganStrength,
+  setHeight,
+  setImg2imgStrength,
+  setInitialImagePath,
+  setMaskPath,
+  setPrompt,
+  setSampler,
+  setSeed,
+  setSeedWeights,
+  setShouldFitToWidthHeight,
+  setSteps,
+  setUpscalingLevel,
+  setUpscalingStrength,
+  setWidth,
+} from '../../options/optionsSlice';
+import promptToString from '../../../common/util/promptToString';
+import { seedWeightsToString } from '../../../common/util/seedWeightPairs';
+import { FaCopy } from 'react-icons/fa';
+
+type MetadataItemProps = {
+  isLink?: boolean;
+  label: string;
+  onClick?: () => void;
+  value: number | string | boolean;
+  labelPosition?: string;
+};
+
+/**
+ * Component to display an individual metadata item or parameter.
+ */
+const MetadataItem = ({
+  label,
+  value,
+  onClick,
+  isLink,
+  labelPosition,
+}: MetadataItemProps) => {
+  return (
+    <Flex gap={2}>
+      {onClick && (
+        <Tooltip label={`Recall ${label}`}>
+          <IconButton
+            aria-label="Use this parameter"
+            icon={<IoArrowUndoCircleOutline />}
+            size={'xs'}
+            variant={'ghost'}
+            fontSize={20}
+            onClick={onClick}
+          />
+        </Tooltip>
+      )}
+      <Flex direction={labelPosition ? 'column' : 'row'}>
+        <Text fontWeight={'semibold'} whiteSpace={'pre-wrap'} pr={2}>
+          {label}:
+        </Text>
+        {isLink ? (
+          <Link href={value.toString()} isExternal wordBreak={'break-all'}>
+            {value.toString()} <ExternalLinkIcon mx="2px" />
+          </Link>
+        ) : (
+          <Text overflowY={'scroll'} wordBreak={'break-all'}>
+            {value.toString()}
+          </Text>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+type ImageMetadataViewerProps = {
+  image: InvokeAI.Image;
+  styleClass?: string;
+};
+
+// TODO: I don't know if this is needed.
+const memoEqualityCheck = (
+  prev: ImageMetadataViewerProps,
+  next: ImageMetadataViewerProps
+) => prev.image.uuid === next.image.uuid;
+
+// TODO: Show more interesting information in this component.
+
+/**
+ * Image metadata viewer overlays currently selected image and provides
+ * access to any of its metadata for use in processing.
+ */
+const ImageMetadataViewer = memo(
+  ({ image, styleClass }: ImageMetadataViewerProps) => {
+    const dispatch = useAppDispatch();
+    // const jsonBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
+
+    const metadata = image?.metadata?.image || {};
+    const {
+      type,
+      postprocessing,
+      sampler,
+      prompt,
+      seed,
+      variations,
+      steps,
+      cfg_scale,
+      seamless,
+      width,
+      height,
+      strength,
+      fit,
+      init_image_path,
+      mask_image_path,
+      orig_path,
+      scale,
+    } = metadata;
+
+    const metadataJSON = JSON.stringify(metadata, null, 2);
+
+    return (
+      <div className={`image-metadata-viewer ${styleClass}`}>
+        <Flex gap={1} direction={'column'} width={'100%'}>
+          <Flex gap={2}>
+            <Text fontWeight={'semibold'}>File:</Text>
+            <Link href={image.url} isExternal>
+              {image.url}
+              <ExternalLinkIcon mx="2px" />
+            </Link>
+          </Flex>
+          {Object.keys(metadata).length > 0 ? (
+            <>
+              {type && <MetadataItem label="Generation type" value={type} />}
+              {['esrgan', 'gfpgan'].includes(type) && (
+                <MetadataItem label="Original image" value={orig_path} />
+              )}
+              {type === 'gfpgan' && strength !== undefined && (
+                <MetadataItem
+                  label="Fix faces strength"
+                  value={strength}
+                  onClick={() => dispatch(setGfpganStrength(strength))}
+                />
+              )}
+              {type === 'esrgan' && scale !== undefined && (
+                <MetadataItem
+                  label="Upscaling scale"
+                  value={scale}
+                  onClick={() => dispatch(setUpscalingLevel(scale))}
+                />
+              )}
+              {type === 'esrgan' && strength !== undefined && (
+                <MetadataItem
+                  label="Upscaling strength"
+                  value={strength}
+                  onClick={() => dispatch(setUpscalingStrength(strength))}
+                />
+              )}
+              {prompt && (
+                <MetadataItem
+                  label="Prompt"
+                  labelPosition="top"
+                  value={promptToString(prompt)}
+                  onClick={() => dispatch(setPrompt(prompt))}
+                />
+              )}
+              {seed !== undefined && (
+                <MetadataItem
+                  label="Seed"
+                  value={seed}
+                  onClick={() => dispatch(setSeed(seed))}
+                />
+              )}
+              {sampler && (
+                <MetadataItem
+                  label="Sampler"
+                  value={sampler}
+                  onClick={() => dispatch(setSampler(sampler))}
+                />
+              )}
+              {steps && (
+                <MetadataItem
+                  label="Steps"
+                  value={steps}
+                  onClick={() => dispatch(setSteps(steps))}
+                />
+              )}
+              {cfg_scale !== undefined && (
+                <MetadataItem
+                  label="CFG scale"
+                  value={cfg_scale}
+                  onClick={() => dispatch(setCfgScale(cfg_scale))}
+                />
+              )}
+              {variations && variations.length > 0 && (
+                <MetadataItem
+                  label="Seed-weight pairs"
+                  value={seedWeightsToString(variations)}
+                  onClick={() =>
+                    dispatch(setSeedWeights(seedWeightsToString(variations)))
+                  }
+                />
+              )}
+              {seamless && (
+                <MetadataItem
+                  label="Seamless"
+                  value={seamless}
+                  onClick={() => dispatch(setWidth(seamless))}
+                />
+              )}
+              {width && (
+                <MetadataItem
+                  label="Width"
+                  value={width}
+                  onClick={() => dispatch(setWidth(width))}
+                />
+              )}
+              {height && (
+                <MetadataItem
+                  label="Height"
+                  value={height}
+                  onClick={() => dispatch(setHeight(height))}
+                />
+              )}
+              {init_image_path && (
+                <MetadataItem
+                  label="Initial image"
+                  value={init_image_path}
+                  isLink
+                  onClick={() => dispatch(setInitialImagePath(init_image_path))}
+                />
+              )}
+              {mask_image_path && (
+                <MetadataItem
+                  label="Mask image"
+                  value={mask_image_path}
+                  isLink
+                  onClick={() => dispatch(setMaskPath(mask_image_path))}
+                />
+              )}
+              {type === 'img2img' && strength && (
+                <MetadataItem
+                  label="Image to image strength"
+                  value={strength}
+                  onClick={() => dispatch(setImg2imgStrength(strength))}
+                />
+              )}
+              {fit && (
+                <MetadataItem
+                  label="Image to image fit"
+                  value={fit}
+                  onClick={() => dispatch(setShouldFitToWidthHeight(fit))}
+                />
+              )}
+              {postprocessing && postprocessing.length > 0 && (
+                <>
+                  <Heading size={'sm'}>Postprocessing</Heading>
+                  {postprocessing.map(
+                    (
+                      postprocess: InvokeAI.PostProcessedImageMetadata,
+                      i: number
+                    ) => {
+                      if (postprocess.type === 'esrgan') {
+                        const { scale, strength } = postprocess;
+                        return (
+                          <Flex
+                            key={i}
+                            pl={'2rem'}
+                            gap={1}
+                            direction={'column'}
+                          >
+                            <Text size={'md'}>{`${
+                              i + 1
+                            }: Upscale (ESRGAN)`}</Text>
+                            <MetadataItem
+                              label="Scale"
+                              value={scale}
+                              onClick={() => dispatch(setUpscalingLevel(scale))}
+                            />
+                            <MetadataItem
+                              label="Strength"
+                              value={strength}
+                              onClick={() =>
+                                dispatch(setUpscalingStrength(strength))
+                              }
+                            />
+                          </Flex>
+                        );
+                      } else if (postprocess.type === 'gfpgan') {
+                        const { strength } = postprocess;
+                        return (
+                          <Flex
+                            key={i}
+                            pl={'2rem'}
+                            gap={1}
+                            direction={'column'}
+                          >
+                            <Text size={'md'}>{`${
+                              i + 1
+                            }: Face restoration (GFPGAN)`}</Text>
+
+                            <MetadataItem
+                              label="Strength"
+                              value={strength}
+                              onClick={() =>
+                                dispatch(setGfpganStrength(strength))
+                              }
+                            />
+                          </Flex>
+                        );
+                      }
+                    }
+                  )}
+                </>
+              )}
+              <Flex gap={2} direction={'column'}>
+                <Flex gap={2}>
+                  <Tooltip label={`Copy metadata JSON`}>
+                    <IconButton
+                      aria-label="Copy metadata JSON"
+                      icon={<FaCopy />}
+                      size={'xs'}
+                      variant={'ghost'}
+                      fontSize={14}
+                      onClick={() =>
+                        navigator.clipboard.writeText(metadataJSON)
+                      }
+                    />
+                  </Tooltip>
+                  <Text fontWeight={'semibold'}>Metadata JSON:</Text>
+                </Flex>
+                <div className={'image-json-viewer'}>
+                  <pre>{metadataJSON}</pre>
+                </div>
+              </Flex>
+            </>
+          ) : (
+            <Center width={'100%'} pt={10}>
+              <Text fontSize={'lg'} fontWeight="semibold">
+                No metadata available
+              </Text>
+            </Center>
+          )}
+        </Flex>
+      </div>
+    );
+  },
+  memoEqualityCheck
+);
+
+export default ImageMetadataViewer;

frontend/src/features/gallery/ImageMetadataViewer.tsx

@@ -1,338 +0,0 @@
-import {
-  Center,
-  Flex,
-  Heading,
-  IconButton,
-  Link,
-  Text,
-  Tooltip,
-} from '@chakra-ui/react';
-import { ExternalLinkIcon } from '@chakra-ui/icons';
-import { memo } from 'react';
-import { IoArrowUndoCircleOutline } from 'react-icons/io5';
-import { useAppDispatch } from '../../app/store';
-import * as InvokeAI from '../../app/invokeai';
-import {
-  setCfgScale,
-  setGfpganStrength,
-  setHeight,
-  setImg2imgStrength,
-  setInitialImagePath,
-  setMaskPath,
-  setPrompt,
-  setSampler,
-  setSeed,
-  setSeedWeights,
-  setShouldFitToWidthHeight,
-  setSteps,
-  setUpscalingLevel,
-  setUpscalingStrength,
-  setWidth,
-} from '../options/optionsSlice';
-import promptToString from '../../common/util/promptToString';
-import { seedWeightsToString } from '../../common/util/seedWeightPairs';
-import { FaCopy } from 'react-icons/fa';
-
-type MetadataItemProps = {
-  isLink?: boolean;
-  label: string;
-  onClick?: () => void;
-  value: number | string | boolean;
-  labelPosition?: string;
-};
-
-/**
- * Component to display an individual metadata item or parameter.
- */
-const MetadataItem = ({
-  label,
-  value,
-  onClick,
-  isLink,
-  labelPosition,
-}: MetadataItemProps) => {
-  return (
-    <Flex gap={2}>
-      {onClick && (
-        <Tooltip label={`Recall ${label}`}>
-          <IconButton
-            aria-label="Use this parameter"
-            icon={<IoArrowUndoCircleOutline />}
-            size={'xs'}
-            variant={'ghost'}
-            fontSize={20}
-            onClick={onClick}
-          />
-        </Tooltip>
-      )}
-      <Flex direction={labelPosition ? 'column' : 'row'}>
-        <Text fontWeight={'semibold'} whiteSpace={'nowrap'} pr={2}>
-          {label}:
-        </Text>
-        {isLink ? (
-          <Link href={value.toString()} isExternal wordBreak={'break-all'}>
-            {value.toString()} <ExternalLinkIcon mx="2px" />
-          </Link>
-        ) : (
-          <Text overflowY={'scroll'} wordBreak={'break-all'}>
-            {value.toString()}
-          </Text>
-        )}
-      </Flex>
-    </Flex>
-  );
-};
-
-type ImageMetadataViewerProps = {
-  image: InvokeAI.Image;
-};
-
-// TODO: I don't know if this is needed.
-const memoEqualityCheck = (
-  prev: ImageMetadataViewerProps,
-  next: ImageMetadataViewerProps
-) => prev.image.uuid === next.image.uuid;
-
-// TODO: Show more interesting information in this component.
-
-/**
- * Image metadata viewer overlays currently selected image and provides
- * access to any of its metadata for use in processing.
- */
-const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
-  const dispatch = useAppDispatch();
-  // const jsonBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
-
-  const metadata = image?.metadata?.image || {};
-  const {
-    type,
-    postprocessing,
-    sampler,
-    prompt,
-    seed,
-    variations,
-    steps,
-    cfg_scale,
-    seamless,
-    width,
-    height,
-    strength,
-    fit,
-    init_image_path,
-    mask_image_path,
-    orig_path,
-    scale,
-  } = metadata;
-
-  const metadataJSON = JSON.stringify(metadata, null, 2);
-
-  return (
-    <Flex gap={1} direction={'column'} width={'100%'}>
-      <Flex gap={2}>
-        <Text fontWeight={'semibold'}>File:</Text>
-        <Link href={image.url} isExternal>
-          {image.url}
-          <ExternalLinkIcon mx="2px" />
-        </Link>
-      </Flex>
-      {Object.keys(metadata).length > 0 ? (
-        <>
-          {type && <MetadataItem label="Generation type" value={type} />}
-          {['esrgan', 'gfpgan'].includes(type) && (
-            <MetadataItem label="Original image" value={orig_path} />
-          )}
-          {type === 'gfpgan' && strength !== undefined && (
-            <MetadataItem
-              label="Fix faces strength"
-              value={strength}
-              onClick={() => dispatch(setGfpganStrength(strength))}
-            />
-          )}
-          {type === 'esrgan' && scale !== undefined && (
-            <MetadataItem
-              label="Upscaling scale"
-              value={scale}
-              onClick={() => dispatch(setUpscalingLevel(scale))}
-            />
-          )}
-          {type === 'esrgan' && strength !== undefined && (
-            <MetadataItem
-              label="Upscaling strength"
-              value={strength}
-              onClick={() => dispatch(setUpscalingStrength(strength))}
-            />
-          )}
-          {prompt && (
-            <MetadataItem
-              label="Prompt"
-              labelPosition="top"
-              value={promptToString(prompt)}
-              onClick={() => dispatch(setPrompt(prompt))}
-            />
-          )}
-          {seed !== undefined && (
-            <MetadataItem
-              label="Seed"
-              value={seed}
-              onClick={() => dispatch(setSeed(seed))}
-            />
-          )}
-          {sampler && (
-            <MetadataItem
-              label="Sampler"
-              value={sampler}
-              onClick={() => dispatch(setSampler(sampler))}
-            />
-          )}
-          {steps && (
-            <MetadataItem
-              label="Steps"
-              value={steps}
-              onClick={() => dispatch(setSteps(steps))}
-            />
-          )}
-          {cfg_scale !== undefined && (
-            <MetadataItem
-              label="CFG scale"
-              value={cfg_scale}
-              onClick={() => dispatch(setCfgScale(cfg_scale))}
-            />
-          )}
-          {variations && variations.length > 0 && (
-            <MetadataItem
-              label="Seed-weight pairs"
-              value={seedWeightsToString(variations)}
-              onClick={() =>
-                dispatch(setSeedWeights(seedWeightsToString(variations)))
-              }
-            />
-          )}
-          {seamless && (
-            <MetadataItem
-              label="Seamless"
-              value={seamless}
-              onClick={() => dispatch(setWidth(seamless))}
-            />
-          )}
-          {width && (
-            <MetadataItem
-              label="Width"
-              value={width}
-              onClick={() => dispatch(setWidth(width))}
-            />
-          )}
-          {height && (
-            <MetadataItem
-              label="Height"
-              value={height}
-              onClick={() => dispatch(setHeight(height))}
-            />
-          )}
-          {init_image_path && (
-            <MetadataItem
-              label="Initial image"
-              value={init_image_path}
-              isLink
-              onClick={() => dispatch(setInitialImagePath(init_image_path))}
-            />
-          )}
-          {mask_image_path && (
-            <MetadataItem
-              label="Mask image"
-              value={mask_image_path}
-              isLink
-              onClick={() => dispatch(setMaskPath(mask_image_path))}
-            />
-          )}
-          {type === 'img2img' && strength && (
-            <MetadataItem
-              label="Image to image strength"
-              value={strength}
-              onClick={() => dispatch(setImg2imgStrength(strength))}
-            />
-          )}
-          {fit && (
-            <MetadataItem
-              label="Image to image fit"
-              value={fit}
-              onClick={() => dispatch(setShouldFitToWidthHeight(fit))}
-            />
-          )}
-          {postprocessing && postprocessing.length > 0 && (
-            <>
-              <Heading size={'sm'}>Postprocessing</Heading>
-              {postprocessing.map(
-                (
-                  postprocess: InvokeAI.PostProcessedImageMetadata,
-                  i: number
-                ) => {
-                  if (postprocess.type === 'esrgan') {
-                    const { scale, strength } = postprocess;
-                    return (
-                      <Flex key={i} pl={'2rem'} gap={1} direction={'column'}>
-                        <Text size={'md'}>{`${i + 1}: Upscale (ESRGAN)`}</Text>
-                        <MetadataItem
-                          label="Scale"
-                          value={scale}
-                          onClick={() => dispatch(setUpscalingLevel(scale))}
-                        />
-                        <MetadataItem
-                          label="Strength"
-                          value={strength}
-                          onClick={() =>
-                            dispatch(setUpscalingStrength(strength))
-                          }
-                        />
-                      </Flex>
-                    );
-                  } else if (postprocess.type === 'gfpgan') {
-                    const { strength } = postprocess;
-                    return (
-                      <Flex key={i} pl={'2rem'} gap={1} direction={'column'}>
-                        <Text size={'md'}>{`${
-                          i + 1
-                        }: Face restoration (GFPGAN)`}</Text>
-
-                        <MetadataItem
-                          label="Strength"
-                          value={strength}
-                          onClick={() => dispatch(setGfpganStrength(strength))}
-                        />
-                      </Flex>
-                    );
-                  }
-                }
-              )}
-            </>
-          )}
-          <Flex gap={2} direction={'column'}>
-            <Flex gap={2}>
-              <Tooltip label={`Copy metadata JSON`}>
-                <IconButton
-                  aria-label="Copy metadata JSON"
-                  icon={<FaCopy />}
-                  size={'xs'}
-                  variant={'ghost'}
-                  fontSize={14}
-                  onClick={() => navigator.clipboard.writeText(metadataJSON)}
-                />
-              </Tooltip>
-              <Text fontWeight={'semibold'}>Metadata JSON:</Text>
-            </Flex>
-            <div className={'current-image-json-viewer'}>
-              <pre>{metadataJSON}</pre>
-            </div>
-          </Flex>
-        </>
-      ) : (
-        <Center width={'100%'} pt={10}>
-          <Text fontSize={'lg'} fontWeight="semibold">
-            No metadata available
-          </Text>
-        </Center>
-      )}
-    </Flex>
-  );
-}, memoEqualityCheck);
-
-export default ImageMetadataViewer;

frontend/src/features/gallery/InvokePopover.scss

@@ -15,9 +15,9 @@
   background: var(--tab-panel-bg);
   border-radius: 0 0 0.4rem 0.4rem;
   border: 2px solid var(--tab-hover-color);
-  padding: .75rem 1rem .75rem 1rem;
+  padding: 0.75rem 1rem 0.75rem 1rem;
   display: grid;
-  grid-template-rows: repeat(auto-fill, 1fr);
+  grid-auto-rows: max-content;
   grid-row-gap: 0.5rem;
   justify-content: space-between;
 }

frontend/src/features/gallery/gallerySlice.ts

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
-import { clamp } from 'lodash';
+import _, { clamp } from 'lodash';
 import * as InvokeAI from '../../app/invokeai';
 
 export interface GalleryState {
@@ -85,6 +85,32 @@ export const gallerySlice = createSlice({
     clearIntermediateImage: (state) => {
       state.intermediateImage = undefined;
     },
+    selectNextImage: (state) => {
+      const { images, currentImage } = state;
+      if (currentImage) {
+        const currentImageIndex = images.findIndex(
+          (i) => i.uuid === currentImage.uuid
+        );
+        if (_.inRange(currentImageIndex, 0, images.length)) {
+          const newCurrentImage = images[currentImageIndex + 1];
+          state.currentImage = newCurrentImage;
+          state.currentImageUuid = newCurrentImage.uuid;
+        }
+      }
+    },
+    selectPrevImage: (state) => {
+      const { images, currentImage } = state;
+      if (currentImage) {
+        const currentImageIndex = images.findIndex(
+          (i) => i.uuid === currentImage.uuid
+        );
+        if (_.inRange(currentImageIndex, 1, images.length + 1)) {
+          const newCurrentImage = images[currentImageIndex - 1];
+          state.currentImage = newCurrentImage;
+          state.currentImageUuid = newCurrentImage.uuid;
+        }
+      }
+    },
     addGalleryImages: (
       state,
       action: PayloadAction<{
@@ -122,6 +148,8 @@ export const {
   setCurrentImage,
   addGalleryImages,
   setIntermediateImage,
+  selectNextImage,
+  selectPrevImage,
 } = gallerySlice.actions;
 
 export default gallerySlice.reducer;

frontend/src/features/options/AccordionItems/InvokeAccordionItem.tsx

@@ -8,7 +8,7 @@ import React, { ReactElement } from 'react';
 import { Feature } from '../../../app/features';
 import GuideIcon from '../../../common/components/GuideIcon';
 
-interface InvokeAccordionItemProps {
+export interface InvokeAccordionItemProps {
   header: ReactElement;
   feature: Feature;
   options: ReactElement;

frontend/src/features/options/AdvancedOptions/ImageToImage/ImageFit.tsx

@@ -19,7 +19,7 @@ export default function ImageFit() {
 
   return (
     <IAISwitch
-      label="Fit initial image to output size"
+      label="Fit Initial Image To Output Size"
       isChecked={shouldFitToWidthHeight}
       onChange={handleChangeFit}
     />

frontend/src/features/options/AdvancedOptions/ImageToImage/ImageToImageAccordion.tsx

@@ -8,7 +8,7 @@ import {
 import IAISwitch from '../../../../common/components/IAISwitch';
 import { setShouldUseInitImage } from '../../optionsSlice';
 
-export default function ImageToImage() {
+export default function ImageToImageAccordion() {
   const dispatch = useAppDispatch();
 
   const initialImagePath = useAppSelector(

frontend/src/features/options/AdvancedOptions/ImageToImage/ImageToImageStrength.tsx

@@ -7,7 +7,13 @@ import {
 import IAINumberInput from '../../../../common/components/IAINumberInput';
 import { setImg2imgStrength } from '../../optionsSlice';
 
-export default function ImageToImageStrength() {
+interface ImageToImageStrengthProps {
+  label?: string;
+  styleClass?: string;
+}
+
+export default function ImageToImageStrength(props: ImageToImageStrengthProps) {
+  const { label = 'Strength', styleClass } = props;
   const img2imgStrength = useAppSelector(
     (state: RootState) => state.options.img2imgStrength
   );
@@ -18,7 +24,7 @@ export default function ImageToImageStrength() {
 
   return (
     <IAINumberInput
-      label="Strength"
+      label={label}
       step={0.01}
       min={0.01}
       max={0.99}
@@ -26,6 +32,7 @@ export default function ImageToImageStrength() {
       value={img2imgStrength}
       width="90px"
       isInteger={false}
+      styleClass={styleClass}
     />
   );
 }

frontend/src/features/options/AdvancedOptions/Seed/Perlin.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { RootState, useAppDispatch, useAppSelector } from '../../../../app/store';
+import {
+  RootState,
+  useAppDispatch,
+  useAppSelector,
+} from '../../../../app/store';
 import IAINumberInput from '../../../../common/components/IAINumberInput';
 import { setPerlin } from '../../optionsSlice';
 
@@ -11,13 +15,13 @@ export default function Perlin() {
 
   return (
     <IAINumberInput
-        label='Perlin'
-        min={0}
-        max={1}
-        step={0.05}
-        onChange={handleChangePerlin}
-        value={perlin}
-        isInteger={false}
+      label="Perlin Noise"
+      min={0}
+      max={1}
+      step={0.05}
+      onChange={handleChangePerlin}
+      value={perlin}
+      isInteger={false}
     />
   );
 }

frontend/src/features/options/AdvancedOptions/Seed/SeedOptions.tsx

@@ -18,6 +18,8 @@ const SeedOptions = () => {
       </Flex>
       <Flex gap={2}>
         <Threshold />
+      </Flex>
+      <Flex gap={2}>
         <Perlin />
       </Flex>
     </Flex>

frontend/src/features/options/AdvancedOptions/Seed/Threshold.tsx

@@ -1,23 +1,29 @@
 import React from 'react';
-import { RootState, useAppDispatch, useAppSelector } from '../../../../app/store';
+import {
+  RootState,
+  useAppDispatch,
+  useAppSelector,
+} from '../../../../app/store';
 import IAINumberInput from '../../../../common/components/IAINumberInput';
 import { setThreshold } from '../../optionsSlice';
 
 export default function Threshold() {
   const dispatch = useAppDispatch();
-  const threshold = useAppSelector((state: RootState) => state.options.threshold);
+  const threshold = useAppSelector(
+    (state: RootState) => state.options.threshold
+  );
 
   const handleChangeThreshold = (v: number) => dispatch(setThreshold(v));
 
   return (
     <IAINumberInput
-        label='Threshold'
-        min={0}
-        max={1000}
-        step={0.1}
-        onChange={handleChangeThreshold}
-        value={threshold}
-        isInteger={false}
+      label="Threshold"
+      min={0}
+      max={1000}
+      step={0.1}
+      onChange={handleChangeThreshold}
+      value={threshold}
+      isInteger={false}
     />
   );
 }

frontend/src/features/options/ImageUploader.tsx

@@ -15,6 +15,8 @@ type ImageUploaderProps = {
    * Callback to handle a file being rejected.
    */
   fileRejectionCallback: (rejection: FileRejection) => void;
+  // Styling
+  styleClass?: string;
 };
 
 /**
@@ -25,6 +27,7 @@ const ImageUploader = ({
   children,
   fileAcceptedCallback,
   fileRejectionCallback,
+  styleClass,
 }: ImageUploaderProps) => {
   const onDrop = useCallback(
     (acceptedFiles: Array<File>, fileRejections: Array<FileRejection>) => {
@@ -52,7 +55,7 @@ const ImageUploader = ({
   };
 
   return (
-    <Box {...getRootProps()} flexGrow={3}>
+    <Box {...getRootProps()} flexGrow={3} className={`${styleClass}`}>
       <input {...getInputProps({ multiple: false })} />
       {cloneElement(children, {
         onClick: handleClickUploadIcon,

frontend/src/features/options/MainOptions/MainOptions.tsx

@@ -1,4 +1,3 @@
-import MainAdvancedOptions from './MainAdvancedOptions';
 import MainCFGScale from './MainCFGScale';
 import MainHeight from './MainHeight';
 import MainIterations from './MainIterations';
@@ -23,7 +22,6 @@ export default function MainOptions() {
           <MainHeight />
           <MainSampler />
         </div>
-        <MainAdvancedOptions />
       </div>
     </div>
   );

frontend/src/features/options/OptionsAccordion.tsx

@@ -1,34 +1,25 @@
-import {
-  Box,
-  Accordion,
-  ExpandedIndex,
-  // ExpandedIndex,
-} from '@chakra-ui/react';
-
-// import { RootState } from '../../app/store';
-// import { useAppDispatch, useAppSelector } from '../../app/store';
-
-// import { setOpenAccordions } from '../system/systemSlice';
-
-import OutputOptions from './OutputOptions';
-import ImageToImageOptions from './AdvancedOptions/ImageToImage/ImageToImageOptions';
-import { Feature } from '../../app/features';
-import SeedOptions from './AdvancedOptions/Seed/SeedOptions';
-import Upscale from './AdvancedOptions/Upscale/Upscale';
-import UpscaleOptions from './AdvancedOptions/Upscale/UpscaleOptions';
-import FaceRestore from './AdvancedOptions/FaceRestore/FaceRestore';
-import FaceRestoreOptions from './AdvancedOptions/FaceRestore/FaceRestoreOptions';
-import ImageToImage from './AdvancedOptions/ImageToImage/ImageToImage';
+import { Accordion, ExpandedIndex } from '@chakra-ui/react';
 import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
 import { setOpenAccordions } from '../system/systemSlice';
-import InvokeAccordionItem from './AccordionItems/InvokeAccordionItem';
-import Variations from './AdvancedOptions/Variations/Variations';
-import VariationsOptions from './AdvancedOptions/Variations/VariationsOptions';
+import InvokeAccordionItem, {
+  InvokeAccordionItemProps,
+} from './AccordionItems/InvokeAccordionItem';
+import { ReactElement } from 'react';
+
+type OptionsAccordionType = {
+  [optionAccordionKey: string]: InvokeAccordionItemProps;
+};
+
+type OptionAccordionsType = {
+  accordionInfo: OptionsAccordionType;
+};
 
 /**
  * Main container for generation and processing parameters.
  */
-const OptionsAccordion = () => {
+const OptionsAccordion = (props: OptionAccordionsType) => {
+  const { accordionInfo } = props;
+
   const openAccordions = useAppSelector(
     (state: RootState) => state.system.openAccordions
   );
@@ -41,6 +32,23 @@ const OptionsAccordion = () => {
   const handleChangeAccordionState = (openAccordions: ExpandedIndex) =>
     dispatch(setOpenAccordions(openAccordions));
 
+  const renderAccordions = () => {
+    const accordionsToRender: ReactElement[] = [];
+    if (accordionInfo) {
+      Object.keys(accordionInfo).forEach((key) => {
+        accordionsToRender.push(
+          <InvokeAccordionItem
+            key={key}
+            header={accordionInfo[key as keyof typeof accordionInfo].header}
+            feature={accordionInfo[key as keyof typeof accordionInfo].feature}
+            options={accordionInfo[key as keyof typeof accordionInfo].options}
+          />
+        );
+      });
+    }
+    return accordionsToRender;
+  };
+
   return (
     <Accordion
       defaultIndex={openAccordions}
@@ -49,49 +57,7 @@ const OptionsAccordion = () => {
       onChange={handleChangeAccordionState}
       className="advanced-settings"
     >
-      <InvokeAccordionItem
-        header={
-          <Box flex="1" textAlign="left">
-            Seed
-          </Box>
-        }
-        feature={Feature.SEED}
-        options={<SeedOptions />}
-      />
-
-      <InvokeAccordionItem
-        header={<Variations />}
-        feature={Feature.VARIATIONS}
-        options={<VariationsOptions />}
-      />
-
-      <InvokeAccordionItem
-        header={<FaceRestore />}
-        feature={Feature.FACE_CORRECTION}
-        options={<FaceRestoreOptions />}
-      />
-
-      <InvokeAccordionItem
-        header={<Upscale />}
-        feature={Feature.UPSCALE}
-        options={<UpscaleOptions />}
-      />
-
-      <InvokeAccordionItem
-        header={<ImageToImage />}
-        feature={Feature.IMAGE_TO_IMAGE}
-        options={<ImageToImageOptions />}
-      />
-
-      <InvokeAccordionItem
-        header={
-          <Box flex="1" textAlign="left">
-            Other
-          </Box>
-        }
-        feature={Feature.OTHER}
-        options={<OutputOptions />}
-      />
+      {renderAccordions()}
     </Accordion>
   );
 };

frontend/src/features/options/ProcessButtons/CancelButton.tsx

@@ -4,12 +4,23 @@ import { cancelProcessing } from '../../../app/socketio/actions';
 import { useAppDispatch, useAppSelector } from '../../../app/store';
 import IAIIconButton from '../../../common/components/IAIIconButton';
 import { systemSelector } from '../../../common/hooks/useCheckParameters';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 export default function CancelButton() {
   const dispatch = useAppDispatch();
   const { isProcessing, isConnected } = useAppSelector(systemSelector);
   const handleClickCancel = () => dispatch(cancelProcessing());
 
+  useHotkeys(
+    'shift+x',
+    () => {
+      if (isConnected || isProcessing) {
+        handleClickCancel();
+      }
+    },
+    [isConnected, isProcessing]
+  );
+
   return (
     <IAIIconButton
       icon={<MdCancel />}

frontend/src/features/options/ProcessButtons/InvokeButton.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { MdAddAPhoto } from 'react-icons/md';
 import { generateImage } from '../../../app/socketio/actions';
 import { useAppDispatch } from '../../../app/store';
-import IAIIconButton from '../../../common/components/IAIIconButton';
+import IAIButton from '../../../common/components/IAIButton';
 import useCheckParameters from '../../../common/hooks/useCheckParameters';
 
 export default function InvokeButton() {
@@ -14,9 +13,8 @@ export default function InvokeButton() {
   };
 
   return (
-    <IAIIconButton
-      icon={<MdAddAPhoto />}
-      tooltip="Invoke"
+    <IAIButton
+      label="Invoke"
       aria-label="Invoke"
       type="submit"
       isDisabled={!isReady}

frontend/src/features/options/PromptInput/PromptInput.tsx

@@ -1,5 +1,5 @@
 import { FormControl, Textarea } from '@chakra-ui/react';
-import { ChangeEvent, KeyboardEvent } from 'react';
+import { ChangeEvent, KeyboardEvent, useRef } from 'react';
 import { RootState, useAppDispatch, useAppSelector } from '../../../app/store';
 import { generateImage } from '../../../app/socketio/actions';
 
@@ -9,6 +9,7 @@ import { isEqual } from 'lodash';
 import useCheckParameters, {
   systemSelector,
 } from '../../../common/hooks/useCheckParameters';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 export const optionsSelector = createSelector(
   (state: RootState) => state.options,
@@ -28,6 +29,7 @@ export const optionsSelector = createSelector(
  * Prompt input text area.
  */
 const PromptInput = () => {
+  const promptRef = useRef<HTMLTextAreaElement>(null);
   const { prompt } = useAppSelector(optionsSelector);
   const { isProcessing } = useAppSelector(systemSelector);
   const dispatch = useAppDispatch();
@@ -37,6 +39,24 @@ const PromptInput = () => {
     dispatch(setPrompt(e.target.value));
   };
 
+  useHotkeys(
+    'ctrl+enter',
+    () => {
+      if (isReady) {
+        dispatch(generateImage());
+      }
+    },
+    [isReady]
+  );
+
+  useHotkeys(
+    'alt+a',
+    () => {
+      promptRef.current?.focus();
+    },
+    []
+  );
+
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && e.shiftKey === false && isReady) {
       e.preventDefault();
@@ -60,6 +80,7 @@ const PromptInput = () => {
           onKeyDown={handleKeyDown}
           resize="vertical"
           height={30}
+          ref={promptRef}
         />
       </FormControl>
     </div>

frontend/src/features/options/optionsSlice.ts

@@ -22,7 +22,7 @@ export interface OptionsState {
   upscalingLevel: UpscalingLevel;
   upscalingStrength: number;
   shouldUseInitImage: boolean;
-  initialImagePath: string;
+  initialImagePath: string | null;
   maskPath: string;
   seamless: boolean;
   shouldFitToWidthHeight: boolean;
@@ -33,6 +33,9 @@ export interface OptionsState {
   shouldRunGFPGAN: boolean;
   shouldRandomizeSeed: boolean;
   showAdvancedOptions: boolean;
+  activeTab: number;
+  shouldShowImageDetails: boolean;
+  shouldShowGallery: boolean;
 }
 
 const initialOptionsState: OptionsState = {
@@ -49,7 +52,7 @@ const initialOptionsState: OptionsState = {
   seamless: false,
   shouldUseInitImage: false,
   img2imgStrength: 0.75,
-  initialImagePath: '',
+  initialImagePath: null,
   maskPath: '',
   shouldFitToWidthHeight: true,
   shouldGenerateVariations: false,
@@ -62,6 +65,9 @@ const initialOptionsState: OptionsState = {
   gfpganStrength: 0.8,
   shouldRandomizeSeed: true,
   showAdvancedOptions: true,
+  activeTab: 0,
+  shouldShowImageDetails: false,
+  shouldShowGallery: false,
 };
 
 const initialState: OptionsState = initialOptionsState;
@@ -121,7 +127,7 @@ export const optionsSlice = createSlice({
     setShouldUseInitImage: (state, action: PayloadAction<boolean>) => {
       state.shouldUseInitImage = action.payload;
     },
-    setInitialImagePath: (state, action: PayloadAction<string>) => {
+    setInitialImagePath: (state, action: PayloadAction<string | null>) => {
       const newInitialImagePath = action.payload;
       state.shouldUseInitImage = newInitialImagePath ? true : false;
       state.initialImagePath = newInitialImagePath;
@@ -246,7 +252,9 @@ export const optionsSlice = createSlice({
       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 (width) state.width = width;
       if (height) state.height = height;
@@ -269,6 +277,15 @@ export const optionsSlice = createSlice({
     setShowAdvancedOptions: (state, action: PayloadAction<boolean>) => {
       state.showAdvancedOptions = action.payload;
     },
+    setActiveTab: (state, action: PayloadAction<number>) => {
+      state.activeTab = action.payload;
+    },
+    setShouldShowImageDetails: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowImageDetails = action.payload;
+    },
+    setShouldShowGallery: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowGallery = action.payload;
+    },
   },
 });
 
@@ -303,6 +320,9 @@ export const {
   setShouldRunESRGAN,
   setShouldRandomizeSeed,
   setShowAdvancedOptions,
+  setActiveTab,
+  setShouldShowImageDetails,
+  setShouldShowGallery,
 } = optionsSlice.actions;
 
 export default optionsSlice.reducer;

frontend/src/features/system/Console.tsx

@@ -7,6 +7,7 @@ import { FaAngleDoubleDown, FaCode, FaMinus } from 'react-icons/fa';
 import { createSelector } from '@reduxjs/toolkit';
 import { isEqual } from 'lodash';
 import { Resizable } from 're-resizable';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 const logSelector = createSelector(
   (state: RootState) => state.system,
@@ -66,6 +67,14 @@ const Console = () => {
     dispatch(setShouldShowLogViewer(!shouldShowLogViewer));
   };
 
+  useHotkeys(
+    '`',
+    () => {
+      dispatch(setShouldShowLogViewer(!shouldShowLogViewer));
+    },
+    [shouldShowLogViewer]
+  );
+
   return (
     <>
       {shouldShowLogViewer && (
@@ -91,7 +100,7 @@ const Console = () => {
         </Resizable>
       )}
       {shouldShowLogViewer && (
-        <Tooltip label={shouldAutoscroll ? 'Autoscroll On' : 'Autoscroll Off'}>
+        <Tooltip hasArrow label={shouldAutoscroll ? 'Autoscroll On' : 'Autoscroll Off'}>
           <IconButton
             className={`console-autoscroll-icon-button ${
               shouldAutoscroll && 'autoscroll-enabled'
@@ -104,7 +113,7 @@ const Console = () => {
           />
         </Tooltip>
       )}
-      <Tooltip label={shouldShowLogViewer ? 'Hide Console' : 'Show Console'}>
+      <Tooltip hasArrow label={shouldShowLogViewer ? 'Hide Console' : 'Show Console'}>
         <IconButton
           className={`console-toggle-icon-button ${
             (hasError || !wasErrorSeen) && 'error-seen'

frontend/src/features/system/HotkeysModal/HotkeysModal.scss

@@ -0,0 +1,53 @@
+@use '../../../styles/Mixins/' as *;
+
+.hotkeys-modal {
+  display: grid;
+  padding: 1rem;
+  background-color: var(--settings-modal-bg) !important;
+  row-gap: 1rem;
+  font-family: Inter;
+
+  h1 {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+}
+
+.hotkeys-modal-items {
+  display: grid;
+  row-gap: 0.5rem;
+  max-height: 32rem;
+  overflow-y: scroll;
+  @include HideScrollbar;
+}
+
+.hotkey-modal-item {
+  display: grid;
+  grid-template-columns: auto max-content;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--background-color);
+  padding: 0.5rem 1rem;
+  border-radius: 0.3rem;
+
+  .hotkey-info {
+    display: grid;
+
+    .hotkey-title {
+      font-weight: bold;
+    }
+
+    .hotkey-description {
+      font-size: 0.9rem;
+      color: var(--text-color-secondary);
+    }
+  }
+
+  .hotkey-key {
+    font-size: 0.8rem;
+    font-weight: bold;
+    border: 2px solid var(--settings-modal-bg);
+    padding: 0.2rem 0.5rem;
+    border-radius: 0.3rem;
+  }
+}

frontend/src/features/system/HotkeysModal/HotkeysModal.tsx

@@ -0,0 +1,118 @@
+import {
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+import React, { cloneElement, ReactElement } from 'react';
+import HotkeysModalItem from './HotkeysModalItem';
+
+type HotkeysModalProps = {
+  /* The button to open the Settings Modal */
+  children: ReactElement;
+};
+
+export default function HotkeysModal({ children }: HotkeysModalProps) {
+  const {
+    isOpen: isHotkeyModalOpen,
+    onOpen: onHotkeysModalOpen,
+    onClose: onHotkeysModalClose,
+  } = useDisclosure();
+
+  const hotkeys = [
+    { title: 'Invoke', desc: 'Generate an image', hotkey: 'Ctrl+Enter' },
+    { title: 'Cancel', desc: 'Cancel image generation', hotkey: 'Shift+X' },
+    {
+      title: 'Toggle Gallery',
+      desc: 'Open and close the gallery drawer',
+      hotkey: 'G',
+    },
+    {
+      title: 'Set Seed',
+      desc: 'Use the seed of the current image',
+      hotkey: 'S',
+    },
+    {
+      title: 'Set Parameters',
+      desc: 'Use all parameters of the current image',
+      hotkey: 'A',
+    },
+    { title: 'Restore Faces', desc: 'Restore the current image', hotkey: 'R' },
+    { title: 'Upscale', desc: 'Upscale the current image', hotkey: 'U' },
+    {
+      title: 'Show Info',
+      desc: 'Show metadata info of the current image',
+      hotkey: 'I',
+    },
+    {
+      title: 'Send To Image To Image',
+      desc: 'Send the current image to Image to Image module',
+      hotkey: 'Shift+I',
+    },
+    { title: 'Delete Image', desc: 'Delete the current image', hotkey: 'Del' },
+    {
+      title: 'Focus Prompt',
+      desc: 'Focus the prompt input area',
+      hotkey: 'Alt+A',
+    },
+    {
+      title: 'Previous Image',
+      desc: 'Display the previous image in the gallery',
+      hotkey: 'Arrow left',
+    },
+    {
+      title: 'Next Image',
+      desc: 'Display the next image in the gallery',
+      hotkey: 'Arrow right',
+    },
+    {
+      title: 'Change Tabs',
+      desc: 'Switch to another workspace',
+      hotkey: '1-6',
+    },
+    {
+      title: 'Theme Toggle',
+      desc: 'Switch between dark and light modes',
+      hotkey: 'Shift+D',
+    },
+    {
+      title: 'Console Toggle',
+      desc: 'Open and close console',
+      hotkey: '`',
+    },
+  ];
+
+  const renderHotkeyModalItems = () => {
+    const hotkeyModalItemsToRender: ReactElement[] = [];
+
+    hotkeys.forEach((hotkey, i) => {
+      hotkeyModalItemsToRender.push(
+        <HotkeysModalItem
+          key={i}
+          title={hotkey.title}
+          description={hotkey.desc}
+          hotkey={hotkey.hotkey}
+        />
+      );
+    });
+
+    return hotkeyModalItemsToRender;
+  };
+
+  return (
+    <>
+      {cloneElement(children, {
+        onClick: onHotkeysModalOpen,
+      })}
+      <Modal isOpen={isHotkeyModalOpen} onClose={onHotkeysModalClose}>
+        <ModalOverlay />
+        <ModalContent className="hotkeys-modal">
+          <ModalCloseButton />
+          <h1>Keyboard Shorcuts</h1>
+          <div className="hotkeys-modal-items">{renderHotkeyModalItems()}</div>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

frontend/src/features/system/HotkeysModal/HotkeysModalItem.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface HotkeysModalProps {
+  hotkey: string;
+  title: string;
+  description?: string;
+}
+
+export default function HotkeysModalItem(props: HotkeysModalProps) {
+  const { title, hotkey, description } = props;
+  return (
+    <div className="hotkey-modal-item">
+      <div className="hotkey-info">
+        <p className="hotkey-title">{title}</p>
+        {description && <p className="hotkey-description">{description}</p>}
+      </div>
+      <div className="hotkey-key">{hotkey}</div>
+    </div>
+  );
+}

frontend/src/features/system/SettingsModal/SettingsModal.scss

@@ -2,6 +2,7 @@
 
 .settings-modal {
   background-color: var(--settings-modal-bg) !important;
+  font-family: Inter;
 
   .settings-modal-content {
     display: grid;

frontend/src/features/system/SiteHeader.scss

@@ -21,7 +21,7 @@
 
 .site-header-right-side {
   display: grid;
-  grid-template-columns: repeat(5, max-content);
+  grid-template-columns: repeat(7, max-content);
   align-items: center;
   column-gap: 0.5rem;
 }

frontend/src/features/system/SiteHeader.tsx

@@ -1,9 +1,12 @@
-import { IconButton, Link, useColorMode } from '@chakra-ui/react';
+import { IconButton, Link, Tooltip, useColorMode } from '@chakra-ui/react';
+import { useHotkeys } from 'react-hotkeys-hook';
 
-import { FaSun, FaMoon, FaGithub } from 'react-icons/fa';
-import { MdHelp, MdSettings } from 'react-icons/md';
+import { FaSun, FaMoon, FaGithub, FaDiscord } from 'react-icons/fa';
+import { MdHelp, MdKeyboard, MdSettings } from 'react-icons/md';
 
 import InvokeAILogo from '../../assets/images/logo.png';
+import HotkeysModal from './HotkeysModal/HotkeysModal';
+
 import SettingsModal from './SettingsModal/SettingsModal';
 import StatusIndicator from './StatusIndicator';
 
@@ -13,6 +16,14 @@ import StatusIndicator from './StatusIndicator';
 const SiteHeader = () => {
   const { colorMode, toggleColorMode } = useColorMode();
 
+  useHotkeys(
+    'shift+d',
+    () => {
+      toggleColorMode();
+    },
+    [colorMode, toggleColorMode]
+  );
+
   const colorModeIcon = colorMode == 'light' ? <FaMoon /> : <FaSun />;
 
   // Make FaMoon and FaSun icon apparent size consistent
@@ -40,41 +51,71 @@ const SiteHeader = () => {
           />
         </SettingsModal>
 
-        <IconButton
-          aria-label="Link to Github Issues"
-          variant="link"
-          fontSize={23}
-          size={'sm'}
-          icon={
-            <Link
-              isExternal
-              href="http://github.com/lstein/stable-diffusion/issues"
-            >
-              <MdHelp />
-            </Link>
-          }
-        />
+        <HotkeysModal>
+          <IconButton
+            aria-label="Hotkeys"
+            variant="link"
+            fontSize={24}
+            size={'sm'}
+            icon={<MdKeyboard />}
+          />
+        </HotkeysModal>
 
-        <IconButton
-          aria-label="Link to Github Repo"
-          variant="link"
-          fontSize={20}
-          size={'sm'}
-          icon={
-            <Link isExternal href="http://github.com/lstein/stable-diffusion">
-              <FaGithub />
-            </Link>
-          }
-        />
+        <Tooltip hasArrow label="Report Bug" placement={'bottom'}>
+          <IconButton
+            aria-label="Link to Github Issues"
+            variant="link"
+            fontSize={23}
+            size={'sm'}
+            icon={
+              <Link
+                isExternal
+                href="http://github.com/invoke-ai/InvokeAI/issues"
+              >
+                <MdHelp />
+              </Link>
+            }
+          />
+        </Tooltip>
 
-        <IconButton
-          aria-label="Toggle Dark Mode"
-          onClick={toggleColorMode}
-          variant="link"
-          size={'sm'}
-          fontSize={colorModeIconFontSize}
-          icon={colorModeIcon}
-        />
+        <Tooltip hasArrow label="Github" placement={'bottom'}>
+          <IconButton
+            aria-label="Link to Github Repo"
+            variant="link"
+            fontSize={20}
+            size={'sm'}
+            icon={
+              <Link isExternal href="http://github.com/invoke-ai/InvokeAI">
+                <FaGithub />
+              </Link>
+            }
+          />
+        </Tooltip>
+
+        <Tooltip hasArrow label="Discord" placement={'bottom'}>
+          <IconButton
+            aria-label="Link to Discord Server"
+            variant="link"
+            fontSize={20}
+            size={'sm'}
+            icon={
+              <Link isExternal href="https://discord.gg/ZmtBAhwWhy">
+                <FaDiscord />
+              </Link>
+            }
+          />
+        </Tooltip>
+
+        <Tooltip hasArrow label="Theme" placement={'bottom'}>
+          <IconButton
+            aria-label="Toggle Dark Mode"
+            onClick={toggleColorMode}
+            variant="link"
+            size={'sm'}
+            fontSize={colorModeIconFontSize}
+            icon={colorModeIcon}
+          />
+        </Tooltip>
       </div>
     </div>
   );

frontend/src/features/tabs/ImageToImage/ImageToImage.scss

@@ -0,0 +1,143 @@
+@use '../../../styles/Mixins/' as *;
+
+.image-to-image-workarea {
+  display: grid;
+  grid-template-columns: max-content auto;
+  column-gap: 1rem;
+}
+
+.image-to-image-panel {
+  display: grid;
+  row-gap: 1rem;
+  grid-auto-rows: max-content;
+  width: $options-bar-max-width;
+  height: $app-content-height;
+  overflow-y: scroll;
+  @include HideScrollbar;
+}
+
+.image-to-image-display-area {
+  display: grid;
+  column-gap: 0.5rem;
+
+  .image-gallery-area {
+    z-index: 2;
+    height: 100%;
+  }
+}
+
+.image-to-image-strength-main-option {
+  display: grid;
+  grid-template-columns: none !important;
+
+  .number-input-entry {
+    padding: 0 1rem;
+  }
+}
+
+.image-to-image-display {
+  border-radius: 0.5rem;
+  background-color: var(--background-color-secondary);
+  display: grid;
+  height: $app-content-height;
+
+  .current-image-options {
+    grid-auto-columns: max-content;
+    justify-self: center;
+    align-self: start;
+  }
+}
+
+.image-to-image-single-preview {
+  display: grid;
+  column-gap: 0.5rem;
+  padding: 0 1rem;
+  place-content: center;
+}
+
+.image-to-image-dual-preview-container {
+  display: grid;
+  grid-template-areas: 'img2img-preview';
+}
+
+.image-to-image-dual-preview {
+  grid-area: img2img-preview;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 0.5rem;
+  padding: 0 1rem;
+  place-content: center;
+
+  .current-image-preview {
+    img {
+      height: calc($app-gallery-height - 2rem);
+      max-height: calc($app-gallery-height - 2rem);
+    }
+  }
+}
+
+.img2img-metadata {
+  grid-area: img2img-preview;
+  z-index: 3;
+}
+
+.init-image-preview {
+  display: grid;
+  grid-template-areas: 'init-image-content';
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+
+  .init-image-preview-header {
+    grid-area: init-image-content;
+    z-index: 2;
+    display: grid;
+    grid-template-columns: auto max-content;
+    height: max-content;
+    align-items: center;
+    align-self: start;
+    padding: 1rem;
+    border-radius: 0.5rem;
+
+    h1 {
+      padding: 0.2rem 0.6rem;
+      border-radius: 0.4rem;
+      background-color: var(--tab-hover-color);
+      width: max-content;
+      font-weight: bold;
+      font-size: 0.85rem;
+    }
+  }
+
+  .init-image-image {
+    grid-area: init-image-content;
+
+    img {
+      border-radius: 0.5rem;
+      object-fit: contain;
+      background-color: var(--img2img-img-bg-color);
+      width: auto;
+      height: calc($app-gallery-height - 2rem);
+      max-height: calc($app-gallery-height - 2rem);
+    }
+  }
+}
+
+.image-to-image-upload-btn {
+  display: grid;
+  width: 100%;
+  height: $app-content-height;
+
+  button {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    font-size: 1.5rem;
+    color: var(--text-color-secondary);
+    background-color: var(--background-color-secondary);
+
+    &:hover {
+      background-color: var(--img2img-img-bg-color);
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import ImageToImagePanel from './ImageToImagePanel';
+import ImageToImageDisplay from './ImageToImageDisplay';
+import ImageGallery from '../../gallery/ImageGallery';
+import { RootState, useAppSelector } from '../../../app/store';
+
+export default function ImageToImage() {
+  const shouldShowGallery = useAppSelector(
+    (state: RootState) => state.options.shouldShowGallery
+  );
+
+  return (
+    <div className="image-to-image-workarea">
+      <ImageToImagePanel />
+      <div
+        className="image-to-image-display-area"
+        style={
+          shouldShowGallery
+            ? { gridTemplateColumns: 'auto max-content' }
+            : { gridTemplateColumns: 'auto' }
+        }
+      >
+        <ImageToImageDisplay />
+        <ImageGallery />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { FaUpload } from 'react-icons/fa';
+import { uploadInitialImage } from '../../../app/socketio/actions';
+import { RootState, useAppSelector } from '../../../app/store';
+import InvokeImageUploader from '../../../common/components/InvokeImageUploader';
+import CurrentImageButtons from '../../gallery/CurrentImageButtons';
+import CurrentImagePreview from '../../gallery/CurrentImagePreview';
+import ImageMetadataViewer from '../../gallery/ImageMetaDataViewer/ImageMetadataViewer';
+
+import InitImagePreview from './InitImagePreview';
+
+export default function ImageToImageDisplay() {
+  const initialImagePath = useAppSelector(
+    (state: RootState) => state.options.initialImagePath
+  );
+
+  const { currentImage, intermediateImage } = useAppSelector(
+    (state: RootState) => state.gallery
+  );
+
+  const shouldShowImageDetails = useAppSelector(
+    (state: RootState) => state.options.shouldShowImageDetails
+  );
+
+  const imageToDisplay = intermediateImage || currentImage;
+
+  return (
+    <div
+      className="image-to-image-display"
+      style={
+        imageToDisplay
+          ? { gridAutoRows: 'max-content auto' }
+          : { gridAutoRows: 'auto' }
+      }
+    >
+      {initialImagePath ? (
+        <>
+          {imageToDisplay ? (
+            <>
+              <CurrentImageButtons image={imageToDisplay} />
+              <div className="image-to-image-dual-preview-container">
+                <div className="image-to-image-dual-preview">
+                  <InitImagePreview />
+                  <div className="image-to-image-current-image-display">
+                    <CurrentImagePreview imageToDisplay={imageToDisplay} />
+                  </div>
+                </div>
+                {shouldShowImageDetails && (
+                  <ImageMetadataViewer
+                    image={imageToDisplay}
+                    styleClass="img2img-metadata"
+                  />
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="image-to-image-single-preview">
+              <InitImagePreview />
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="upload-image">
+          <InvokeImageUploader
+            label="Upload or Drop Image Here"
+            icon={<FaUpload />}
+            styleClass="image-to-image-upload-btn"
+            dispatcher={uploadInitialImage}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+import { Feature } from '../../../app/features';
+import { RootState, useAppSelector } from '../../../app/store';
+import FaceRestore from '../../options/AdvancedOptions/FaceRestore/FaceRestore';
+import FaceRestoreOptions from '../../options/AdvancedOptions/FaceRestore/FaceRestoreOptions';
+import ImageFit from '../../options/AdvancedOptions/ImageToImage/ImageFit';
+import ImageToImageStrength from '../../options/AdvancedOptions/ImageToImage/ImageToImageStrength';
+import SeedOptions from '../../options/AdvancedOptions/Seed/SeedOptions';
+import Upscale from '../../options/AdvancedOptions/Upscale/Upscale';
+import UpscaleOptions from '../../options/AdvancedOptions/Upscale/UpscaleOptions';
+import Variations from '../../options/AdvancedOptions/Variations/Variations';
+import VariationsOptions from '../../options/AdvancedOptions/Variations/VariationsOptions';
+import MainAdvancedOptions from '../../options/MainOptions/MainAdvancedOptions';
+import MainOptions from '../../options/MainOptions/MainOptions';
+import OptionsAccordion from '../../options/OptionsAccordion';
+import OutputOptions from '../../options/OutputOptions';
+import ProcessButtons from '../../options/ProcessButtons/ProcessButtons';
+import PromptInput from '../../options/PromptInput/PromptInput';
+
+export default function ImageToImagePanel() {
+  const showAdvancedOptions = useAppSelector(
+    (state: RootState) => state.options.showAdvancedOptions
+  );
+
+  const imageToImageAccordions = {
+    seed: {
+      header: (
+        <Box flex="1" textAlign="left">
+          Seed
+        </Box>
+      ),
+      feature: Feature.SEED,
+      options: <SeedOptions />,
+    },
+    variations: {
+      header: <Variations />,
+      feature: Feature.VARIATIONS,
+      options: <VariationsOptions />,
+    },
+    face_restore: {
+      header: <FaceRestore />,
+      feature: Feature.FACE_CORRECTION,
+      options: <FaceRestoreOptions />,
+    },
+    upscale: {
+      header: <Upscale />,
+      feature: Feature.UPSCALE,
+      options: <UpscaleOptions />,
+    },
+    other: {
+      header: (
+        <Box flex="1" textAlign="left">
+          Other
+        </Box>
+      ),
+      feature: Feature.OTHER,
+      options: <OutputOptions />,
+    },
+  };
+
+  return (
+    <div className="image-to-image-panel">
+      <PromptInput />
+      <ProcessButtons />
+      <MainOptions />
+      <ImageToImageStrength
+        label="Image To Image Strength"
+        styleClass="main-option-block image-to-image-strength-main-option"
+      />
+      <ImageFit />
+      <MainAdvancedOptions />
+      {showAdvancedOptions ? (
+        <OptionsAccordion accordionInfo={imageToImageAccordions} />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { IconButton, Image } from '@chakra-ui/react';
+import React, { SyntheticEvent } from 'react';
+import { MdClear } from 'react-icons/md';
+import { RootState, useAppDispatch, useAppSelector } from '../../../app/store';
+import { setInitialImagePath } from '../../options/optionsSlice';
+
+export default function InitImagePreview() {
+  const initialImagePath = useAppSelector(
+    (state: RootState) => state.options.initialImagePath
+  );
+
+  const dispatch = useAppDispatch();
+
+  const handleClickResetInitialImage = (e: SyntheticEvent) => {
+    e.stopPropagation();
+    dispatch(setInitialImagePath(null));
+  };
+  return (
+    <div className="init-image-preview">
+      <div className="init-image-preview-header">
+        <h1>Initial Image</h1>
+        <IconButton
+          isDisabled={!initialImagePath}
+          size={'sm'}
+          aria-label={'Reset Initial Image'}
+          onClick={handleClickResetInitialImage}
+          icon={<MdClear />}
+        />
+      </div>
+      {initialImagePath && (
+        <div className="init-image-image">
+          <Image fit={'contain'} src={initialImagePath} rounded={'md'} />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { Image } from '@chakra-ui/react';
+import React from 'react';
+import { RootState, useAppSelector } from '../../../app/store';
+
+export default function InitialImageOverlay() {
+  const initialImagePath = useAppSelector(
+    (state: RootState) => state.options.initialImagePath
+  );
+
+  return initialImagePath ? (
+    <Image
+      fit={'contain'}
+      src={initialImagePath}
+      rounded={'md'}
+      className={'checkerboard'}
+    />
+  ) : null;
+}