Merge branch 'development' into main

.dev_scripts/test_regression_txt2img_dream_v1_4.sh

@@ -5,8 +5,7 @@ SAMPLES_DIR=${OUT_DIR}
 python scripts/dream.py \
     --from_file ${PROMPT_FILE} \
     --outdir ${OUT_DIR} \
-    --sampler plms \
-    --full_precision
+    --sampler plms
 
 # original output by CompVis/stable-diffusion
 IMAGE1=".dev_scripts/images/v1_4_astronaut_rides_horse_plms_step50_seed42.png"

.github/workflows/cache-model.yml

@@ -1,64 +0,0 @@
-name: Cache Model
-on:
-  workflow_dispatch
-jobs:
-  build:
-    strategy:
-      matrix:
-        os: [ macos-12 ]
-    name: Create Caches using ${{ matrix.os }}
-    runs-on: ${{ matrix.os }}
-    steps:
-      - name: Checkout sources
-        uses: actions/checkout@v3
-      - name: Cache model
-        id: cache-sd-v1-4
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-sd-v1-4
-        with:
-          path: models/ldm/stable-diffusion-v1/model.ckpt
-          key: ${{ env.cache-name }}
-          restore-keys: |
-            ${{ env.cache-name }}
-      - name: Download Stable Diffusion v1.4 model
-        if: ${{ steps.cache-sd-v1-4.outputs.cache-hit != 'true' }}
-        continue-on-error: true
-        run: |
-          if [ ! -e models/ldm/stable-diffusion-v1 ]; then
-              mkdir -p models/ldm/stable-diffusion-v1
-          fi
-          if [ ! -e models/ldm/stable-diffusion-v1/model.ckpt ]; then
-            curl -o models/ldm/stable-diffusion-v1/model.ckpt ${{ secrets.SD_V1_4_URL }}
-          fi
-# Uncomment this when we no longer make changes to environment-mac.yaml
-#       - name: Cache environment
-#         id: cache-conda-env-ldm
-#         uses: actions/cache@v3
-#         env:
-#           cache-name: cache-conda-env-ldm
-#         with:
-#           path: ~/.conda/envs/ldm
-#           key: ${{ env.cache-name }}
-#           restore-keys: |
-#             ${{ env.cache-name }}
-      - name: Install dependencies
-#         if: ${{ steps.cache-conda-env-ldm.outputs.cache-hit != 'true' }}
-        run: |
-          conda env create -f environment-mac.yaml
-      - name: Cache hugginface and torch models
-        id: cache-hugginface-torch
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-hugginface-torch
-        with:
-          path: ~/.cache
-          key: ${{ env.cache-name }}
-          restore-keys: |
-            ${{ env.cache-name }}
-      - name: Download Huggingface and Torch models
-        if: ${{ steps.cache-hugginface-torch.outputs.cache-hit != 'true' }}
-        continue-on-error: true
-        run: |
-          export PYTHON_BIN=/usr/local/miniconda/envs/ldm/bin/python
-          $PYTHON_BIN scripts/preload_models.py

.github/workflows/create-caches.yml

@@ -0,0 +1,70 @@
+name: Create Caches
+on:
+  workflow_dispatch
+jobs:
+  build:
+    strategy:
+      matrix:
+        os: [ ubuntu-latest, macos-12 ]
+    name: Create Caches on ${{ matrix.os }} conda
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Set platform variables
+        id: vars
+        run: |
+            if [ "$RUNNER_OS" = "macOS" ]; then
+                echo "::set-output name=ENV_FILE::environment-mac.yaml"
+                echo "::set-output name=PYTHON_BIN::/usr/local/miniconda/envs/ldm/bin/python"
+            elif [ "$RUNNER_OS" = "Linux" ]; then
+                echo "::set-output name=ENV_FILE::environment.yaml"
+                echo "::set-output name=PYTHON_BIN::/usr/share/miniconda/envs/ldm/bin/python"
+            fi
+      - name: Checkout sources
+        uses: actions/checkout@v3
+      - name: Use Cached Stable Diffusion v1.4 Model
+        id: cache-sd-v1-4
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-sd-v1-4
+        with:
+          path: models/ldm/stable-diffusion-v1/model.ckpt
+          key: ${{ env.cache-name }}
+          restore-keys: |
+            ${{ env.cache-name }}
+      - name: Download Stable Diffusion v1.4 Model
+        if: ${{ steps.cache-sd-v1-4.outputs.cache-hit != 'true' }}
+        run: |
+          if [ ! -e models/ldm/stable-diffusion-v1 ]; then
+              mkdir -p models/ldm/stable-diffusion-v1
+          fi
+          if [ ! -e models/ldm/stable-diffusion-v1/model.ckpt ]; then
+            curl -o models/ldm/stable-diffusion-v1/model.ckpt ${{ secrets.SD_V1_4_URL }}
+          fi
+      - name: Use Cached Dependencies
+        id: cache-conda-env-ldm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-conda-env-ldm
+        with:
+          path: ~/.conda/envs/ldm
+          key: ${{ env.cache-name }}
+          restore-keys: |
+            ${{ env.cache-name }}-${{ runner.os }}-${{ hashFiles(steps.vars.outputs.ENV_FILE) }}
+      - name: Install Dependencies
+        if: ${{ steps.cache-conda-env-ldm.outputs.cache-hit != 'true' }}
+        run: |
+          conda env create -f ${{ steps.vars.outputs.ENV_FILE }}
+      - name: Use Cached Huggingface and Torch models
+        id: cache-huggingface-torch
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-huggingface-torch
+        with:
+          path: ~/.cache
+          key: ${{ env.cache-name }}
+          restore-keys: |
+            ${{ env.cache-name }}-${{ hashFiles('scripts/preload_models.py') }}
+      - name: Download Huggingface and Torch models
+        if: ${{ steps.cache-huggingface-torch.outputs.cache-hit != 'true' }}
+        run: |
+          ${{ steps.vars.outputs.PYTHON_BIN }} scripts/preload_models.py

.github/workflows/macos12-miniconda.yml

@@ -1,80 +0,0 @@
-name: Build
-on: 
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-jobs:
-  build:
-    strategy:
-      matrix:
-        os: [ macos-12 ]
-    name: Build on ${{ matrix.os }} miniconda
-    runs-on: ${{ matrix.os }}
-    steps:
-      - name: Checkout sources
-        uses: actions/checkout@v3
-      - name: Cache model
-        id: cache-sd-v1-4
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-sd-v1-4
-        with:
-          path: models/ldm/stable-diffusion-v1/model.ckpt
-          key: ${{ env.cache-name }}
-          restore-keys: |
-            ${{ env.cache-name }}
-      - name: Download Stable Diffusion v1.4 model
-        if: ${{ steps.cache-sd-v1-4.outputs.cache-hit != 'true' }}
-        continue-on-error: true
-        run: |
-          if [ ! -e models/ldm/stable-diffusion-v1 ]; then
-              mkdir -p models/ldm/stable-diffusion-v1
-          fi
-          if [ ! -e models/ldm/stable-diffusion-v1/model.ckpt ]; then
-            curl -o models/ldm/stable-diffusion-v1/model.ckpt ${{ secrets.SD_V1_4_URL }}
-          fi
-# Uncomment this when we no longer make changes to environment-mac.yaml
-#       - name: Cache environment
-#         id: cache-conda-env-ldm
-#         uses: actions/cache@v3
-#         env:
-#           cache-name: cache-conda-env-ldm
-#         with:
-#           path: ~/.conda/envs/ldm
-#           key: ${{ env.cache-name }}
-#           restore-keys: |
-#             ${{ env.cache-name }}
-      - name: Install dependencies
-#         if: ${{ steps.cache-conda-env-ldm.outputs.cache-hit != 'true' }}
-        run: |
-          conda env create -f environment-mac.yaml
-      - name: Cache hugginface and torch models
-        id: cache-hugginface-torch
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-hugginface-torch
-        with:
-          path: ~/.cache
-          key: ${{ env.cache-name }}
-          restore-keys: |
-            ${{ env.cache-name }}
-      - name: Download Huggingface and Torch models
-        if: ${{ steps.cache-hugginface-torch.outputs.cache-hit != 'true' }}
-        continue-on-error: true
-        run: |
-          export PYTHON_BIN=/usr/local/miniconda/envs/ldm/bin/python
-          $PYTHON_BIN scripts/preload_models.py
-      - name: Run the tests
-        run: |
-          # Note, can't "activate" via automation, and activation is just env vars and path
-          export PYTHON_BIN=/usr/local/miniconda/envs/ldm/bin/python
-          export PYTORCH_ENABLE_MPS_FALLBACK=1
-          $PYTHON_BIN scripts/preload_models.py
-          mkdir -p outputs/img-samples
-          time $PYTHON_BIN scripts/dream.py --from_file tests/prompts.txt </dev/null 2> outputs/img-samples/err.log > outputs/img-samples/out.log
-      - name: Archive results
-        uses: actions/upload-artifact@v3
-        with:
-          name: results
-          path: outputs/img-samples

.github/workflows/mkdocs-flow.yml

@@ -12,7 +12,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
       - name: Build
         uses: Tiryoh/actions-mkdocs@v0
         with:

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

@@ -0,0 +1,97 @@
+name: Test Dream with Conda
+on:
+  push:
+    branches:
+      - 'main'
+      - 'development'
+jobs:
+  os_matrix:
+    strategy:
+      matrix:
+        os: [ ubuntu-latest, macos-12 ]
+    name: Test dream.py on ${{ matrix.os }} with conda
+    runs-on: ${{ matrix.os }}
+    steps:
+      - run: |
+          echo The PR was merged
+      - name: Set platform variables
+        id: vars
+        run: |
+          # Note, can't "activate" via github action; specifying the env's python has the same effect
+          if [ "$RUNNER_OS" = "macOS" ]; then
+              echo "::set-output name=ENV_FILE::environment-mac.yaml"
+              echo "::set-output name=PYTHON_BIN::/usr/local/miniconda/envs/ldm/bin/python"
+          elif [ "$RUNNER_OS" = "Linux" ]; then
+              echo "::set-output name=ENV_FILE::environment.yaml"
+              echo "::set-output name=PYTHON_BIN::/usr/share/miniconda/envs/ldm/bin/python"
+          fi
+      - name: Checkout sources
+        uses: actions/checkout@v3
+      - name: Use Cached Stable Diffusion v1.4 Model
+        id: cache-sd-v1-4
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-sd-v1-4
+        with:
+          path: models/ldm/stable-diffusion-v1/model.ckpt
+          key: ${{ env.cache-name }}
+          restore-keys: |
+            ${{ env.cache-name }}
+      - name: Download Stable Diffusion v1.4 Model
+        if: ${{ steps.cache-sd-v1-4.outputs.cache-hit != 'true' }}
+        run: |
+          if [ ! -e models/ldm/stable-diffusion-v1 ]; then
+              mkdir -p models/ldm/stable-diffusion-v1
+          fi
+          if [ ! -e models/ldm/stable-diffusion-v1/model.ckpt ]; then
+            curl -o models/ldm/stable-diffusion-v1/model.ckpt ${{ secrets.SD_V1_4_URL }}
+          fi
+      - name: Use Cached Dependencies
+        id: cache-conda-env-ldm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-conda-env-ldm
+        with:
+          path: ~/.conda/envs/ldm
+          key: ${{ env.cache-name }}
+          restore-keys: |
+            ${{ env.cache-name }}-${{ runner.os }}-${{ hashFiles(steps.vars.outputs.ENV_FILE) }}
+      - name: Install Dependencies
+        if: ${{ steps.cache-conda-env-ldm.outputs.cache-hit != 'true' }}
+        run: |
+          conda env create -f ${{ steps.vars.outputs.ENV_FILE }}
+      - name: Use Cached Huggingface and Torch models
+        id: cache-hugginface-torch
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-hugginface-torch
+        with:
+          path: ~/.cache
+          key: ${{ env.cache-name }}
+          restore-keys: |
+            ${{ env.cache-name }}-${{ hashFiles('scripts/preload_models.py') }}
+      - name: Download Huggingface and Torch models
+        if: ${{ steps.cache-hugginface-torch.outputs.cache-hit != 'true' }}
+        run: |
+          ${{ steps.vars.outputs.PYTHON_BIN }} scripts/preload_models.py
+#       - name: Run tmate
+#         uses: mxschmitt/action-tmate@v3
+#         timeout-minutes: 30
+      - name: Run the tests
+        run: |
+          # Note, can't "activate" via github action; specifying the env's python has the same effect
+          if [ $(uname) = "Darwin" ]; then
+              export PYTORCH_ENABLE_MPS_FALLBACK=1
+          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
+          elif [[ ${{ github.ref }} == 'refs/heads/development' ]]; then
+            time ${{ steps.vars.outputs.PYTHON_BIN }} scripts/dream.py --from_file tests/dev_prompts.txt
+          fi
+          mkdir -p outputs/img-samples
+      - name: Archive results
+        uses: actions/upload-artifact@v3
+        with:
+          name: results
+          path: outputs/img-samples

.gitignore

@@ -1,6 +1,10 @@
 # ignore default image save location and model symbolic link
 outputs/
 models/ldm/stable-diffusion-v1/model.ckpt
+ldm/dream/restoration/codeformer/weights
+
+# ignore the Anaconda/Miniconda installer used while building Docker image
+anaconda.sh
 
 # ignore a directory which serves as a place for initial images
 inputs/

.prettierrc.yaml

@@ -5,9 +5,9 @@ singleQuote: true
 quoteProps: as-needed
 embeddedLanguageFormatting: auto
 overrides:
-  - files: "*.md"
+  - files: '*.md'
     options:
       proseWrap: always
-      printWidth: 100
+      printWidth: 80
       parser: markdown
       cursorOffset: -1

README.md

@@ -1,16 +1,45 @@
-<h1 align='center'><b>Stable Diffusion Dream Script</b></h1>
+<div align="center">
 
-<p align='center'>
-    <img src="docs/assets/logo.png"/>
-</p>
+# InvokeAI: A Stable Diffusion Toolkit
 
-<p align="center">
-    <img src="https://img.shields.io/github/last-commit/lstein/stable-diffusion?logo=Python&logoColor=green&style=for-the-badge" alt="last-commit"/>
-    <img src="https://img.shields.io/github/stars/lstein/stable-diffusion?logo=GitHub&style=for-the-badge" alt="stars"/>
-    <br>
-    <img src="https://img.shields.io/github/issues/lstein/stable-diffusion?logo=GitHub&style=for-the-badge" alt="issues"/>
-    <img src="https://img.shields.io/github/issues-pr/lstein/stable-diffusion?logo=GitHub&style=for-the-badge" alt="pull-requests"/>
-</p>
+_Note: This fork is rapidly evolving. Please use the
+[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._
+
+_This repository was formally known as lstein/stable-diffusion_
+
+# **Table of Contents**
+
+![project logo](docs/assets/logo.png)
+
+[![discord badge]][discord link]
+
+[![latest release badge]][latest release link] [![github stars badge]][github stars link] [![github forks badge]][github forks link]
+
+[![CI checks on main badge]][CI checks on main link] [![CI checks on dev badge]][CI checks on dev link] [![latest commit to dev badge]][latest commit to dev link]
+
+[![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/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
+[discord badge]: https://flat.badgen.net/discord/members/htRgbc7e?icon=discord
+[discord link]: https://discord.gg/ZmtBAhwWhy
+[github forks badge]: https://flat.badgen.net/github/forks/invoke-ai/InvokeAI?icon=github
+[github forks link]: https://useful-forks.github.io/?repo=invoke-ai%2FInvokeAI
+[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>
 
 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
@@ -18,10 +47,10 @@ options to aid the image generation process. It runs on Windows, Mac and Linux m
 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._
 
-**Table of Contents**
+## Table of Contents
 
 1. [Installation](#installation)
 2. [Hardware Requirements](#hardware-requirements)
@@ -33,84 +62,75 @@ requests. Be sure to use the provided templates. They will help aid diagnose iss
 8. [Support](#support)
 9. [Further Reading](#further-reading)
 
-## Installation
+### Installation
 
 This fork is supported across multiple platforms. You can find individual installation instructions
 below.
 
-- ### [Linux](docs/installation/INSTALL_LINUX.md)
+- #### [Linux](docs/installation/INSTALL_LINUX.md)
 
-- ### [Windows](docs/installation/INSTALL_WINDOWS.md)
+- #### [Windows](docs/installation/INSTALL_WINDOWS.md)
 
-- ### [Macintosh](docs/installation/INSTALL_MAC.md)
+- #### [Macintosh](docs/installation/INSTALL_MAC.md)
 
-## Hardware Requirements
+### Hardware Requirements
 
-**System**
+#### System
 
 You wil need one of the following:
 
 - An NVIDIA-based graphics card with 4 GB or more VRAM memory.
 - An Apple computer with an M1 chip.
 
-**Memory**
+#### Memory
 
 - At least 12 GB Main Memory RAM.
 
-**Disk**
+#### Disk
 
 - At least 6 GB of free disk space for the machine learning model, Python, and all its dependencies.
 
-**Note**
+#### Note
 
-If you are 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.
-
-To run in full-precision mode, start `dream.py` with the `--full_precision` flag:
+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:
 
 ```bash
-(ldm) ~/stable-diffusion$ python scripts/dream.py --full_precision
+(ldm) ~/stable-diffusion$ python scripts/dream.py --precision=float32
 ```
 
-## Features
+### Features
 
-### Major Features
+#### Major Features
 
-- #### [Interactive Command Line Interface](docs/features/CLI.md)
+- [Interactive Command Line Interface](docs/features/CLI.md)
+- [Image To Image](docs/features/IMG2IMG.md)
+- [Inpainting Support](docs/features/INPAINTING.md)
+- [Outpainting Support](docs/features/OUTPAINTING.md)
+- [GFPGAN and Real-ESRGAN Support](docs/features/UPSCALE.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)
+- [Weighted Prompts](docs/features/PROMPTS.md#weighted-prompts)
+- [Negative/Unconditioned Prompts](docs/features/PROMPTS.md#negative-and-unconditioned-prompts)
+- [Variations](docs/features/VARIATIONS.md)
+- [Personalizing Text-to-Image Generation](docs/features/TEXTUAL_INVERSION.md)
+- [Simplified API for text to image generation](docs/features/OTHER.md#simplified-api)
 
-- #### [Image To Image](docs/features/IMG2IMG.md)
+#### Other Features
 
-- #### [Inpainting Support](docs/features/INPAINTING.md)
+- [Creating Transparent Regions for Inpainting](docs/features/INPAINTING.md#creating-transparent-regions-for-inpainting)
+- [Preload Models](docs/features/OTHER.md#preload-models)
 
-- #### [GFPGAN and Real-ESRGAN Support](docs/features/UPSCALE.md)
+### Latest Changes
 
-- #### [Seamless Tiling](docs/features/OTHER.md#seamless-tiling)
+- vNEXT (TODO 2022)
 
-- #### [Google Colab](docs/features/OTHER.md#google-colab)
-
-- #### [Web Server](docs/features/WEB.md)
-
-- #### [Reading Prompts From File](docs/features/OTHER.md#reading-prompts-from-a-file)
-
-- #### [Shortcut: Reusing Seeds](docs/features/OTHER.md#shortcuts-reusing-seeds)
-
-- #### [Weighted Prompts](docs/features/OTHER.md#weighted-prompts)
-
-- #### [Variations](docs/features/VARIATIONS.md)
-
-- #### [Personalizing Text-to-Image Generation](docs/features/TEXTUAL_INVERSION.md)
-
-- #### [Simplified API for text to image generation](docs/features/OTHER.md#simplified-api)
-
-### Other Features
-
-- #### [Creating Transparent Regions for Inpainting](docs/features/INPAINTING.md#creating-transparent-regions-for-inpainting)
-
-- #### [Preload Models](docs/features/OTHER.md#preload-models)
-
-## Latest Changes
+  - Deprecated `--full_precision` / `-F`. Simply omit it and `dream.py` will auto
+    configure. To switch away from auto use the new flag like `--precision=float32`.
 
 - v1.14 (11 September 2022)
 
@@ -142,12 +162,12 @@ To run in full-precision mode, start `dream.py` with the `--full_precision` flag
 
 For older changelogs, please visit the **[CHANGELOG](docs/features/CHANGELOG.md)**.
 
-## Troubleshooting
+### Troubleshooting
 
 Please check out our **[Q&A](docs/help/TROUBLESHOOT.md)** to get solutions for common installation
 problems and other issues.
 
-## Contributing
+# Contributing
 
 Anyone who wishes to contribute to this project, whether documentation, features, bug fixes, code
 cleanup, testing, or code reviews, is very much encouraged to do so. If you are unfamiliar with how
@@ -159,13 +179,13 @@ important thing is to **make your pull request against the "development" branch*
 "main". This will help keep public breakage to a minimum and will allow you to propose more radical
 changes.
 
-## Contributors
+### Contributors
 
 This fork is a combined effort of various people from across the world.
 [Check out the list of all these amazing people](docs/other/CONTRIBUTORS.md). We thank them for
 their time, hard work and effort.
 
-## Support
+### Support
 
 For support, please use this repository's GitHub Issues tracking service. Feel free to send me an
 email if you use and like the script.
@@ -173,7 +193,7 @@ email if you use and like the script.
 Original portions of the software are Copyright (c) 2020
 [Lincoln D. Stein](https://github.com/lstein)
 
-## Further Reading
+### Further Reading
 
 Please see the original README for more information on this software and underlying algorithm,
 located in the file [README-CompViz.md](docs/other/README-CompViz.md).

backend/modules/create_cmd_parser.py

@@ -0,0 +1,49 @@
+import argparse
+import os
+from ldm.dream.args import PRECISION_CHOICES
+
+
+def create_cmd_parser():
+    parser = argparse.ArgumentParser(description="InvokeAI web UI")
+    parser.add_argument(
+        "--host",
+        type=str,
+        help="The host to serve on",
+        default="localhost",
+    )
+    parser.add_argument("--port", type=int, help="The port to serve on", default=9090)
+    parser.add_argument(
+        "--cors",
+        nargs="*",
+        type=str,
+        help="Additional allowed origins, comma-separated",
+    )
+    parser.add_argument(
+        "--embedding_path",
+        type=str,
+        help="Path to a pre-trained embedding manager checkpoint - can only be set on command line",
+    )
+    # TODO: Can't get flask to serve images from any dir (saving to the dir does work when specified)
+    # parser.add_argument(
+    #     "--output_dir",
+    #     default="outputs/",
+    #     type=str,
+    #     help="Directory for output images",
+    # )
+    parser.add_argument(
+        "-v",
+        "--verbose",
+        action="store_true",
+        help="Enables verbose logging",
+    )
+    parser.add_argument(
+        "--precision",
+        dest="precision",
+        type=str,
+        choices=PRECISION_CHOICES,
+        metavar="PRECISION",
+        help=f'Set model precision. Defaults to auto selected based on device. Options: {", ".join(PRECISION_CHOICES)}',
+        default="auto",
+    )
+
+    return parser

backend/modules/parameters.py

@@ -2,14 +2,14 @@ from modules.parse_seed_weights import parse_seed_weights
 import argparse
 
 SAMPLER_CHOICES = [
-    'ddim',
-    'k_dpm_2_a',
-    'k_dpm_2',
-    'k_euler_a',
-    'k_euler',
-    'k_heun',
-    'k_lms',
-    'plms',
+    "ddim",
+    "k_dpm_2_a",
+    "k_dpm_2",
+    "k_euler_a",
+    "k_euler",
+    "k_heun",
+    "k_lms",
+    "plms",
 ]
 
 
@@ -20,187 +20,42 @@ def parameters_to_command(params):
 
     switches = list()
 
-    if 'prompt' in params:
+    if "prompt" in params:
         switches.append(f'"{params["prompt"]}"')
-    if 'steps' in params:
+    if "steps" in params:
         switches.append(f'-s {params["steps"]}')
-    if 'seed' in params:
+    if "seed" in params:
         switches.append(f'-S {params["seed"]}')
-    if 'width' in params:
+    if "width" in params:
         switches.append(f'-W {params["width"]}')
-    if 'height' in params:
+    if "height" in params:
         switches.append(f'-H {params["height"]}')
-    if 'cfg_scale' in params:
+    if "cfg_scale" in params:
         switches.append(f'-C {params["cfg_scale"]}')
-    if 'sampler_name' in params:
+    if "sampler_name" in params:
         switches.append(f'-A {params["sampler_name"]}')
-    if 'seamless' in params and params["seamless"] == True:
-        switches.append(f'--seamless')
-    if 'init_img' in params and len(params['init_img']) > 0:
+    if "seamless" in params and params["seamless"] == True:
+        switches.append(f"--seamless")
+    if "init_img" in params and len(params["init_img"]) > 0:
         switches.append(f'-I {params["init_img"]}')
-    if 'init_mask' in params and len(params['init_mask']) > 0:
+    if "init_mask" in params and len(params["init_mask"]) > 0:
         switches.append(f'-M {params["init_mask"]}')
-    if 'strength' in params and 'init_img' in params:
+    if "init_color" in params and len(params["init_color"]) > 0:
+        switches.append(f'--init_color {params["init_color"]}')
+    if "strength" in params and "init_img" in params:
         switches.append(f'-f {params["strength"]}')
-        if 'fit' in params and params["fit"] == True:
-            switches.append(f'--fit')
-    if 'gfpgan_strength' in params and params["gfpgan_strength"]:
+        if "fit" in params and params["fit"] == True:
+            switches.append(f"--fit")
+    if "gfpgan_strength" in params and params["gfpgan_strength"]:
         switches.append(f'-G {params["gfpgan_strength"]}')
-    if 'upscale' in params and params["upscale"]:
+    if "upscale" in params and params["upscale"]:
         switches.append(f'-U {params["upscale"][0]} {params["upscale"][1]}')
-    if 'variation_amount' in params and params['variation_amount'] > 0:
+    if "variation_amount" in params and params["variation_amount"] > 0:
         switches.append(f'-v {params["variation_amount"]}')
-        if 'with_variations' in params:
-            seed_weight_pairs = ','.join(f'{seed}:{weight}' for seed, weight in params["with_variations"])
-            switches.append(f'-V {seed_weight_pairs}')
+        if "with_variations" in params:
+            seed_weight_pairs = ",".join(
+                f"{seed}:{weight}" for seed, weight in params["with_variations"]
+            )
+            switches.append(f"-V {seed_weight_pairs}")
 
-    return ' '.join(switches)
-
-
-
-def create_cmd_parser():
-    """
-    This is simply a copy of the parser from `dream.py` with a change to give
-    prompt a default value. This is a temporary hack pending merge of #587 which
-    provides a better way to do this.
-    """
-    parser = argparse.ArgumentParser(
-        description='Example: dream> a fantastic alien landscape -W1024 -H960 -s100 -n12',
-        exit_on_error=True,
-    )
-    parser.add_argument('prompt', nargs='?', default='')
-    parser.add_argument('-s', '--steps', type=int, help='Number of steps')
-    parser.add_argument(
-        '-S',
-        '--seed',
-        type=int,
-        help='Image seed; a +ve integer, or use -1 for the previous seed, -2 for the one before that, etc',
-    )
-    parser.add_argument(
-        '-n',
-        '--iterations',
-        type=int,
-        default=1,
-        help='Number of samplings to perform (slower, but will provide seeds for individual images)',
-    )
-    parser.add_argument(
-        '-W', '--width', type=int, help='Image width, multiple of 64'
-    )
-    parser.add_argument(
-        '-H', '--height', type=int, help='Image height, multiple of 64'
-    )
-    parser.add_argument(
-        '-C',
-        '--cfg_scale',
-        default=7.5,
-        type=float,
-        help='Classifier free guidance (CFG) scale - higher numbers cause generator to "try" harder.',
-    )
-    parser.add_argument(
-        '-g', '--grid', action='store_true', help='generate a grid'
-    )
-    parser.add_argument(
-        '--outdir',
-        '-o',
-        type=str,
-        default=None,
-        help='Directory to save generated images and a log of prompts and seeds',
-    )
-    parser.add_argument(
-        '--seamless',
-        action='store_true',
-        help='Change the model to seamless tiling (circular) mode',
-    )
-    parser.add_argument(
-        '-i',
-        '--individual',
-        action='store_true',
-        help='Generate individual files (default)',
-    )
-    parser.add_argument(
-        '-I',
-        '--init_img',
-        type=str,
-        help='Path to input image for img2img mode (supersedes width and height)',
-    )
-    parser.add_argument(
-        '-M',
-        '--init_mask',
-        type=str,
-        help='Path to input mask for inpainting mode (supersedes width and height)',
-    )
-    parser.add_argument(
-        '-T',
-        '-fit',
-        '--fit',
-        action='store_true',
-        help='If specified, will resize the input image to fit within the dimensions of width x height (512x512 default)',
-    )
-    parser.add_argument(
-        '-f',
-        '--strength',
-        default=0.75,
-        type=float,
-        help='Strength for noising/unnoising. 0.0 preserves image exactly, 1.0 replaces it completely',
-    )
-    parser.add_argument(
-        '-G',
-        '--gfpgan_strength',
-        default=0,
-        type=float,
-        help='The strength at which to apply the GFPGAN model to the result, in order to improve faces.',
-    )
-    parser.add_argument(
-        '-U',
-        '--upscale',
-        nargs='+',
-        default=None,
-        type=float,
-        help='Scale factor (2, 4) for upscaling followed by upscaling strength (0-1.0). If strength not specified, defaults to 0.75'
-    )
-    parser.add_argument(
-        '-save_orig',
-        '--save_original',
-        action='store_true',
-        help='Save original. Use it when upscaling to save both versions.',
-    )
-    # variants is going to be superseded by a generalized "prompt-morph" function
-    #    parser.add_argument('-v','--variants',type=int,help="in img2img mode, the first generated image will get passed back to img2img to generate the requested number of variants")
-    parser.add_argument(
-        '-x',
-        '--skip_normalize',
-        action='store_true',
-        help='Skip subprompt weight normalization',
-    )
-    parser.add_argument(
-        '-A',
-        '-m',
-        '--sampler',
-        dest='sampler_name',
-        default=None,
-        type=str,
-        choices=SAMPLER_CHOICES,
-        metavar='SAMPLER_NAME',
-        help=f'Switch to a different sampler. Supported samplers: {", ".join(SAMPLER_CHOICES)}',
-    )
-    parser.add_argument(
-        '-t',
-        '--log_tokenization',
-        action='store_true',
-        help='shows how the prompt is split into tokens'
-    )
-    parser.add_argument(
-        '-v',
-        '--variation_amount',
-        default=0.0,
-        type=float,
-        help='If > 0, generates variations on the initial seed instead of random seeds per iteration. Must be between 0 and 1. Higher values will be more different.'
-    )
-    parser.add_argument(
-        '-V',
-        '--with_variations',
-        default=None,
-        type=str,
-        help='list of variations to apply, in the format `seed:weight,seed:weight,...'
-    )
-    return parser
+    return " ".join(switches)

backend/server.py

@@ -6,7 +6,18 @@ import traceback
 import eventlet
 import glob
 import shlex
-import argparse
+import math
+import shutil
+import sys
+
+sys.path.append(".")
+
+from argparse import ArgumentTypeError
+from modules.create_cmd_parser import create_cmd_parser
+
+parser = create_cmd_parser()
+opt = parser.parse_args()
+
 
 from flask_socketio import SocketIO
 from flask import Flask, send_from_directory, url_for, jsonify
@@ -15,58 +26,67 @@ from PIL import Image
 from pytorch_lightning import logging
 from threading import Event
 from uuid import uuid4
+from send2trash import send2trash
+
 
-from ldm.gfpgan.gfpgan_tools import real_esrgan_upscale
-from ldm.gfpgan.gfpgan_tools import run_gfpgan
 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 modules.parameters import parameters_to_command, create_cmd_parser
+from modules.parameters import parameters_to_command
 
 
 """
 USER CONFIG
 """
+if opt.cors and "*" in opt.cors:
+    raise ArgumentTypeError('"*" is not an allowed CORS origin')
+
 
 output_dir = "outputs/"  # Base output directory for images
-#host = 'localhost'  # Web & socket.io host
-host = '0.0.0.0'  # Web & socket.io host
-port = 9090  # Web & socket.io port
-verbose = False # enables copious socket.io logging
-additional_allowed_origins = ['http://localhost:9090'] # additional CORS allowed origins
-
+host = opt.host  # Web & socket.io host
+port = opt.port  # Web & socket.io port
+verbose = opt.verbose  # enables copious socket.io logging
+precision = opt.precision
+embedding_path = opt.embedding_path
+additional_allowed_origins = (
+    opt.cors if opt.cors else []
+)  # additional CORS allowed origins
+model = "stable-diffusion-1.4"
 
 """
 END USER CONFIG
 """
 
 
+print("* Initializing, be patient...\n")
+
+
 """
 SERVER SETUP
 """
 
 
 # fix missing mimetypes on windows due to registry wonkiness
-mimetypes.add_type('application/javascript', '.js')
-mimetypes.add_type('text/css', '.css')
+mimetypes.add_type("application/javascript", ".js")
+mimetypes.add_type("text/css", ".css")
 
-app = Flask(__name__, static_url_path='', static_folder='../frontend/dist/')
+app = Flask(__name__, static_url_path="", static_folder="../frontend/dist/")
 
 
-app.config['OUTPUTS_FOLDER'] = "../outputs"
+app.config["OUTPUTS_FOLDER"] = "../outputs"
 
 
-@app.route('/outputs/<path:filename>')
+@app.route("/outputs/<path:filename>")
 def outputs(filename):
-    return send_from_directory(
-        app.config['OUTPUTS_FOLDER'],
-        filename
-    )
+    return send_from_directory(app.config["OUTPUTS_FOLDER"], filename)
 
 
-@app.route("/", defaults={'path': ''})
+@app.route("/", defaults={"path": ""})
 def serve(path):
-    return send_from_directory(app.static_folder, 'index.html')
+    return send_from_directory(app.static_folder, "index.html")
 
 
 logger = True if verbose else False
@@ -78,12 +98,14 @@ max_http_buffer_size = 10000000
 cors_allowed_origins = [f"http://{host}:{port}"] + additional_allowed_origins
 
 socketio = SocketIO(
-                        app,
-                        logger=logger,
-                        engineio_logger=engineio_logger,
-                        max_http_buffer_size=max_http_buffer_size,
-                        cors_allowed_origins=cors_allowed_origins,
-                    )
+    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,
+)
 
 
 """
@@ -100,33 +122,53 @@ class CanceledException(Exception):
     pass
 
 
+try:
+    gfpgan, codeformer, esrgan = None, None, None
+    from ldm.dream.restoration.base import Restoration
+
+    restoration = Restoration()
+    gfpgan, codeformer = restoration.load_face_restore_models()
+    esrgan = restoration.load_esrgan()
+
+    # coreformer.process(self, image, strength, device, seed=None, fidelity=0.75)
+
+except (ModuleNotFoundError, ImportError):
+    print(traceback.format_exc(), file=sys.stderr)
+    print(">> You may need to install the ESRGAN and/or GFPGAN modules")
+
 canceled = Event()
 
 # reduce logging outputs to error
 transformers.logging.set_verbosity_error()
-logging.getLogger('pytorch_lightning').setLevel(logging.ERROR)
+logging.getLogger("pytorch_lightning").setLevel(logging.ERROR)
 
 # Initialize and load model
-model = Generate()
-model.load_model()
+generate = Generate(
+    model,
+    precision=precision,
+    embedding_path=embedding_path,
+)
+generate.load_model()
 
 
 # location for "finished" images
-result_path = os.path.join(output_dir, 'img-samples/')
+result_path = os.path.join(output_dir, "img-samples/")
 
 # temporary path for intermediates
-intermediate_path = os.path.join(result_path, 'intermediates/')
+intermediate_path = os.path.join(result_path, "intermediates/")
 
 # path for user-uploaded init images and masks
-init_path = os.path.join(result_path, 'init-images/')
-mask_path = os.path.join(result_path, 'mask-images/')
+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, "dream_log.txt")
 
 # make all output paths
-[os.makedirs(path, exist_ok=True)
- for path in [result_path, intermediate_path, init_path, mask_path]]
+[
+    os.makedirs(path, exist_ok=True)
+    for path in [result_path, intermediate_path, init_image_path, mask_image_path]
+]
 
 
 """
@@ -139,126 +181,251 @@ SOCKET.IO LISTENERS
 """
 
 
-@socketio.on('requestAllImages')
-def handle_request_all_images():
-    print(f'>> All images requested')
-    parser = create_cmd_parser()
-    paths = list(filter(os.path.isfile, glob.glob(result_path + "*.png")))
-    paths.sort(key=lambda x: os.path.getmtime(x))
+@socketio.on("requestSystemConfig")
+def handle_request_capabilities():
+    print(f">> System config requested")
+    config = get_system_config()
+    socketio.emit("systemConfig", config)
+
+
+@socketio.on("requestImages")
+def handle_request_images(page=1, offset=0, last_mtime=None):
+    chunk_size = 50
+
+    if last_mtime:
+        print(f">> Latest images requested")
+    else:
+        print(
+            f">> Page {page} of images requested (page size {chunk_size} offset {offset})"
+        )
+
+    paths = glob.glob(os.path.join(result_path, "*.png"))
+    sorted_paths = sorted(paths, key=lambda x: os.path.getmtime(x), reverse=True)
+
+    if last_mtime:
+        image_paths = filter(lambda x: os.path.getmtime(x) > last_mtime, sorted_paths)
+    else:
+
+        image_paths = sorted_paths[
+            slice(chunk_size * (page - 1) + offset, chunk_size * page + offset)
+        ]
+        page = page + 1
+
     image_array = []
-    for path in paths:
-        # image = Image.open(path)
-        all_metadata = retrieve_metadata(path)
-        if 'Dream' in all_metadata and not all_metadata['sd-metadata']:
-            metadata = vars(parser.parse_args(shlex.split(all_metadata['Dream'])))
-        else:
-            metadata = all_metadata['sd-metadata']
-        image_array.append({'path': path, 'metadata': metadata})
-    return make_response("OK", data=image_array)
 
+    for path in image_paths:
+        metadata = retrieve_metadata(path)
+        image_array.append(
+            {
+                "url": path,
+                "mtime": os.path.getmtime(path),
+                "metadata": metadata["sd-metadata"],
+            }
+        )
 
-@socketio.on('generateImage')
-def handle_generate_image_event(generation_parameters, esrgan_parameters, gfpgan_parameters):
-    print(f'>> Image generation requested: {generation_parameters}\nESRGAN parameters: {esrgan_parameters}\nGFPGAN parameters: {gfpgan_parameters}')
-    generate_images(
-        generation_parameters,
-        esrgan_parameters,
-        gfpgan_parameters
+    socketio.emit(
+        "galleryImages",
+        {
+            "images": image_array,
+            "nextPage": page,
+            "offset": offset,
+            "onlyNewImages": True if last_mtime else False,
+        },
     )
-    return make_response("OK")
 
 
-@socketio.on('runESRGAN')
+@socketio.on("generateImage")
+def handle_generate_image_event(
+    generation_parameters, esrgan_parameters, gfpgan_parameters
+):
+    print(
+        f">> Image generation requested: {generation_parameters}\nESRGAN parameters: {esrgan_parameters}\nGFPGAN parameters: {gfpgan_parameters}"
+    )
+    generate_images(generation_parameters, esrgan_parameters, gfpgan_parameters)
+
+
+@socketio.on("runESRGAN")
 def handle_run_esrgan_event(original_image, esrgan_parameters):
-    print(f'>> ESRGAN upscale requested for "{original_image["url"]}": {esrgan_parameters}')
+    print(
+        f'>> ESRGAN upscale requested for "{original_image["url"]}": {esrgan_parameters}'
+    )
+    progress = {
+        "currentStep": 1,
+        "totalSteps": 1,
+        "currentIteration": 1,
+        "totalIterations": 1,
+        "currentStatus": "Preparing",
+        "isProcessing": True,
+        "currentStatusHasSteps": False,
+    }
+
+    socketio.emit("progressUpdate", progress)
+    eventlet.sleep(0)
+
     image = Image.open(original_image["url"])
 
-    seed = original_image['metadata']['seed'] if 'seed' in original_image['metadata'] else 'unknown_seed'
-
-    image = real_esrgan_upscale(
-        image=image,
-        upsampler_scale=esrgan_parameters['upscale'][0],
-        strength=esrgan_parameters['upscale'][1],
-        seed=seed
+    seed = (
+        original_image["metadata"]["seed"]
+        if "seed" in original_image["metadata"]
+        else "unknown_seed"
     )
 
-    esrgan_parameters['seed'] = seed
-    path = save_image(image, esrgan_parameters, result_path, postprocessing='esrgan')
+    progress["currentStatus"] = "Upscaling"
+    socketio.emit("progressUpdate", progress)
+    eventlet.sleep(0)
+
+    image = esrgan.process(
+        image=image,
+        upsampler_scale=esrgan_parameters["upscale"][0],
+        strength=esrgan_parameters["upscale"][1],
+        seed=seed,
+    )
+
+    progress["currentStatus"] = "Saving image"
+    socketio.emit("progressUpdate", progress)
+    eventlet.sleep(0)
+
+    esrgan_parameters["seed"] = seed
+    metadata = parameters_to_post_processed_image_metadata(
+        parameters=esrgan_parameters,
+        original_image_path=original_image["url"],
+        type="esrgan",
+    )
     command = parameters_to_command(esrgan_parameters)
 
+    path = save_image(image, command, metadata, result_path, postprocessing="esrgan")
+
     write_log_message(f'[Upscaled] "{original_image["url"]}" > "{path}": {command}')
 
+    progress["currentStatus"] = "Finished"
+    progress["currentStep"] = 0
+    progress["totalSteps"] = 0
+    progress["currentIteration"] = 0
+    progress["totalIterations"] = 0
+    progress["isProcessing"] = False
+    socketio.emit("progressUpdate", progress)
+    eventlet.sleep(0)
+
     socketio.emit(
-            'result', {'url': os.path.relpath(path), 'type': 'esrgan', 'uuid': original_image['uuid'],'metadata': esrgan_parameters})
-
-
-
-@socketio.on('runGFPGAN')
-def handle_run_gfpgan_event(original_image, gfpgan_parameters):
-    print(f'>> GFPGAN face fix requested for "{original_image["url"]}": {gfpgan_parameters}')
-    image = Image.open(original_image["url"])
-
-    seed = original_image['metadata']['seed'] if 'seed' in original_image['metadata'] else 'unknown_seed'
-
-    image = run_gfpgan(
-        image=image,
-        strength=gfpgan_parameters['gfpgan_strength'],
-        seed=seed,
-        upsampler_scale=1
+        "esrganResult",
+        {
+            "url": os.path.relpath(path),
+            "mtime": os.path.getmtime(path),
+            "metadata": metadata,
+        },
     )
 
-    gfpgan_parameters['seed'] = seed
-    path = save_image(image, gfpgan_parameters, result_path, postprocessing='gfpgan')
+
+@socketio.on("runGFPGAN")
+def handle_run_gfpgan_event(original_image, gfpgan_parameters):
+    print(
+        f'>> GFPGAN face fix requested for "{original_image["url"]}": {gfpgan_parameters}'
+    )
+    progress = {
+        "currentStep": 1,
+        "totalSteps": 1,
+        "currentIteration": 1,
+        "totalIterations": 1,
+        "currentStatus": "Preparing",
+        "isProcessing": True,
+        "currentStatusHasSteps": False,
+    }
+
+    socketio.emit("progressUpdate", progress)
+    eventlet.sleep(0)
+
+    image = Image.open(original_image["url"])
+
+    seed = (
+        original_image["metadata"]["seed"]
+        if "seed" in original_image["metadata"]
+        else "unknown_seed"
+    )
+
+    progress["currentStatus"] = "Fixing faces"
+    socketio.emit("progressUpdate", progress)
+    eventlet.sleep(0)
+
+    image = gfpgan.process(
+        image=image, strength=gfpgan_parameters["gfpgan_strength"], seed=seed
+    )
+
+    progress["currentStatus"] = "Saving image"
+    socketio.emit("progressUpdate", progress)
+    eventlet.sleep(0)
+
+    gfpgan_parameters["seed"] = seed
+    metadata = parameters_to_post_processed_image_metadata(
+        parameters=gfpgan_parameters,
+        original_image_path=original_image["url"],
+        type="gfpgan",
+    )
     command = parameters_to_command(gfpgan_parameters)
 
+    path = save_image(image, command, metadata, result_path, postprocessing="gfpgan")
+
     write_log_message(f'[Fixed faces] "{original_image["url"]}" > "{path}": {command}')
 
+    progress["currentStatus"] = "Finished"
+    progress["currentStep"] = 0
+    progress["totalSteps"] = 0
+    progress["currentIteration"] = 0
+    progress["totalIterations"] = 0
+    progress["isProcessing"] = False
+    socketio.emit("progressUpdate", progress)
+    eventlet.sleep(0)
+
     socketio.emit(
-            'result', {'url': os.path.relpath(path), 'type': 'gfpgan', 'uuid': original_image['uuid'],'metadata': gfpgan_parameters})
+        "gfpganResult",
+        {
+            "url": os.path.relpath(path),
+            "mtime": os.path.mtime(path),
+            "metadata": metadata,
+        },
+    )
 
 
-@socketio.on('cancel')
+@socketio.on("cancel")
 def handle_cancel():
-    print(f'>> Cancel processing requested')
+    print(f">> Cancel processing requested")
     canceled.set()
-    return make_response("OK")
+    socketio.emit("processingCanceled")
 
 
 # TODO: I think this needs a safety mechanism.
-@socketio.on('deleteImage')
-def handle_delete_image(path):
+@socketio.on("deleteImage")
+def handle_delete_image(path, uuid):
     print(f'>> Delete requested "{path}"')
-    Path(path).unlink()
-    return make_response("OK")
+    send2trash(path)
+    socketio.emit("imageDeleted", {"url": path, "uuid": uuid})
 
 
 # TODO: I think this needs a safety mechanism.
-@socketio.on('uploadInitialImage')
+@socketio.on("uploadInitialImage")
 def handle_upload_initial_image(bytes, name):
     print(f'>> Init image upload requested "{name}"')
     uuid = uuid4().hex
     split = os.path.splitext(name)
-    name = f'{split[0]}.{uuid}{split[1]}'
-    file_path = os.path.join(init_path, name)
+    name = f"{split[0]}.{uuid}{split[1]}"
+    file_path = os.path.join(init_image_path, name)
     os.makedirs(os.path.dirname(file_path), exist_ok=True)
     newFile = open(file_path, "wb")
     newFile.write(bytes)
-    return make_response("OK", data=file_path)
+    socketio.emit("initialImageUploaded", {"url": file_path, "uuid": ""})
 
 
 # TODO: I think this needs a safety mechanism.
-@socketio.on('uploadMaskImage')
+@socketio.on("uploadMaskImage")
 def handle_upload_mask_image(bytes, name):
     print(f'>> Mask image upload requested "{name}"')
     uuid = uuid4().hex
     split = os.path.splitext(name)
-    name = f'{split[0]}.{uuid}{split[1]}'
-    file_path = os.path.join(mask_path, name)
+    name = f"{split[0]}.{uuid}{split[1]}"
+    file_path = os.path.join(mask_image_path, name)
     os.makedirs(os.path.dirname(file_path), exist_ok=True)
     newFile = open(file_path, "wb")
     newFile.write(bytes)
-    return make_response("OK", data=file_path)
-
+    socketio.emit("maskImageUploaded", {"url": file_path, "uuid": ""})
 
 
 """
@@ -266,114 +433,366 @@ END SOCKET.IO LISTENERS
 """
 
 
-
 """
 ADDITIONAL FUNCTIONS
 """
 
 
+def get_system_config():
+    return {
+        "model": "stable diffusion",
+        "model_id": model,
+        "model_hash": generate.model_hash,
+        "app_id": APP_ID,
+        "app_version": APP_VERSION,
+    }
+
+
+def parameters_to_post_processed_image_metadata(parameters, original_image_path, type):
+    # top-level metadata minus `image` or `images`
+    metadata = get_system_config()
+
+    orig_hash = calculate_init_img_hash(original_image_path)
+
+    image = {"orig_path": original_image_path, "orig_hash": orig_hash}
+
+    if type == "esrgan":
+        image["type"] = "esrgan"
+        image["scale"] = parameters["upscale"][0]
+        image["strength"] = parameters["upscale"][1]
+    elif type == "gfpgan":
+        image["type"] = "gfpgan"
+        image["strength"] = parameters["gfpgan_strength"]
+    else:
+        raise TypeError(f"Invalid type: {type}")
+
+    metadata["image"] = image
+    return metadata
+
+
+def parameters_to_generated_image_metadata(parameters):
+    # top-level metadata minus `image` or `images`
+
+    metadata = get_system_config()
+    # remove any image keys not mentioned in RFC #266
+    rfc266_img_fields = [
+        "type",
+        "postprocessing",
+        "sampler",
+        "prompt",
+        "seed",
+        "variations",
+        "steps",
+        "cfg_scale",
+        "step_number",
+        "width",
+        "height",
+        "extra",
+        "seamless",
+    ]
+
+    rfc_dict = {}
+
+    for item in parameters.items():
+        key, value = item
+        if key in rfc266_img_fields:
+            rfc_dict[key] = value
+
+    postprocessing = []
+
+    # 'postprocessing' is either null or an
+    if "gfpgan_strength" in parameters:
+
+        postprocessing.append(
+            {"type": "gfpgan", "strength": float(parameters["gfpgan_strength"])}
+        )
+
+    if "upscale" in parameters:
+        postprocessing.append(
+            {
+                "type": "esrgan",
+                "scale": int(parameters["upscale"][0]),
+                "strength": float(parameters["upscale"][1]),
+            }
+        )
+
+    rfc_dict["postprocessing"] = postprocessing if len(postprocessing) > 0 else None
+
+    # semantic drift
+    rfc_dict["sampler"] = parameters["sampler_name"]
+
+    # display weighted subprompts (liable to change)
+    subprompts = split_weighted_subprompts(parameters["prompt"])
+    subprompts = [{"prompt": x[0], "weight": x[1]} for x in subprompts]
+    rfc_dict["prompt"] = subprompts
+
+    # 'variations' should always exist and be an array, empty or consisting of {'seed': seed, 'weight': weight} pairs
+    variations = []
+
+    if "with_variations" in parameters:
+        variations = [
+            {"seed": x[0], "weight": x[1]} for x in parameters["with_variations"]
+        ]
+
+    rfc_dict["variations"] = variations
+
+    if "init_img" in parameters:
+        rfc_dict["type"] = "img2img"
+        rfc_dict["strength"] = parameters["strength"]
+        rfc_dict["fit"] = parameters["fit"]  # TODO: Noncompliant
+        rfc_dict["orig_hash"] = calculate_init_img_hash(parameters["init_img"])
+        rfc_dict["init_image_path"] = parameters["init_img"]  # TODO: Noncompliant
+        rfc_dict["sampler"] = "ddim"  # TODO: FIX ME WHEN IMG2IMG SUPPORTS ALL SAMPLERS
+        if "init_mask" in parameters:
+            rfc_dict["mask_hash"] = calculate_init_img_hash(
+                parameters["init_mask"]
+            )  # TODO: Noncompliant
+            rfc_dict["mask_image_path"] = parameters["init_mask"]  # TODO: Noncompliant
+    else:
+        rfc_dict["type"] = "txt2img"
+
+    metadata["image"] = rfc_dict
+
+    return metadata
+
+
+def make_unique_init_image_filename(name):
+    uuid = uuid4().hex
+    split = os.path.splitext(name)
+    name = f"{split[0]}.{uuid}{split[1]}"
+    return name
+
+
 def write_log_message(message, log_path=log_path):
     """Logs the filename and parameters used to generate or process that image to log file"""
-    message = f'{message}\n'
-    with open(log_path, 'a', encoding='utf-8') as file:
+    message = f"{message}\n"
+    with open(log_path, "a", encoding="utf-8") as file:
         file.writelines(message)
 
 
-def make_response(status, message=None, data=None):
-    response = {'status': status}
-    if message is not None:
-        response['message'] = message
-    if data is not None:
-        response['data'] = data
-    return response
-
-
-def save_image(image, parameters, output_dir, step_index=None, postprocessing=False):
-    seed = parameters['seed'] if 'seed' in parameters else 'unknown_seed'
-
+def save_image(
+    image, command, metadata, output_dir, step_index=None, postprocessing=False
+):
     pngwriter = PngWriter(output_dir)
     prefix = pngwriter.unique_prefix()
 
-    filename = f'{prefix}.{seed}'
+    seed = "unknown_seed"
+
+    if "image" in metadata:
+        if "seed" in metadata["image"]:
+            seed = metadata["image"]["seed"]
+
+    filename = f"{prefix}.{seed}"
 
     if step_index:
-        filename += f'.{step_index}'
+        filename += f".{step_index}"
     if postprocessing:
-        filename += f'.postprocessed'
+        filename += f".postprocessed"
 
-    filename += '.png'
+    filename += ".png"
 
-    command = parameters_to_command(parameters)
-
-    path = pngwriter.save_image_and_prompt_to_png(image, command, metadata=parameters, name=filename)
+    path = pngwriter.save_image_and_prompt_to_png(
+        image=image, dream_prompt=command, metadata=metadata, name=filename
+    )
 
     return path
 
+
+def calculate_real_steps(steps, strength, has_init_image):
+    return math.floor(strength * steps) if has_init_image else steps
+
+
 def generate_images(generation_parameters, esrgan_parameters, gfpgan_parameters):
     canceled.clear()
 
     step_index = 1
+    prior_variations = (
+        generation_parameters["with_variations"]
+        if "with_variations" in generation_parameters
+        else []
+    )
+    """
+    If a result image is used as an init image, and then deleted, we will want to be
+    able to use it as an init image in the future. Need to copy it.
+
+    If the init/mask image doesn't exist in the init_image_path/mask_image_path,
+    make a unique filename for it and copy it there.
+    """
+    if "init_img" in generation_parameters:
+        filename = os.path.basename(generation_parameters["init_img"])
+        if not os.path.exists(os.path.join(init_image_path, filename)):
+            unique_filename = make_unique_init_image_filename(filename)
+            new_path = os.path.join(init_image_path, unique_filename)
+            shutil.copy(generation_parameters["init_img"], new_path)
+            generation_parameters["init_img"] = new_path
+        if "init_mask" in generation_parameters:
+            filename = os.path.basename(generation_parameters["init_mask"])
+            if not os.path.exists(os.path.join(mask_image_path, filename)):
+                unique_filename = make_unique_init_image_filename(filename)
+                new_path = os.path.join(init_image_path, unique_filename)
+                shutil.copy(generation_parameters["init_img"], new_path)
+                generation_parameters["init_mask"] = new_path
+
+    totalSteps = calculate_real_steps(
+        steps=generation_parameters["steps"],
+        strength=generation_parameters["strength"]
+        if "strength" in generation_parameters
+        else None,
+        has_init_image="init_img" in generation_parameters,
+    )
+
+    progress = {
+        "currentStep": 1,
+        "totalSteps": totalSteps,
+        "currentIteration": 1,
+        "totalIterations": generation_parameters["iterations"],
+        "currentStatus": "Preparing",
+        "isProcessing": True,
+        "currentStatusHasSteps": False,
+    }
+
+    socketio.emit("progressUpdate", progress)
+    eventlet.sleep(0)
 
     def image_progress(sample, step):
         if canceled.is_set():
             raise CanceledException
+
         nonlocal step_index
         nonlocal generation_parameters
-        if generation_parameters["progress_images"] and step % 5 == 0 and step < generation_parameters['steps'] - 1:
-            image = model.sample_to_image(sample)
-            path = save_image(image, generation_parameters, intermediate_path, step_index)
+        nonlocal progress
+
+        progress["currentStep"] = step + 1
+        progress["currentStatus"] = "Generating"
+        progress["currentStatusHasSteps"] = True
+
+        if (
+            generation_parameters["progress_images"]
+            and step % 5 == 0
+            and step < generation_parameters["steps"] - 1
+        ):
+            image = generate.sample_to_image(sample)
+            path = save_image(
+                image, generation_parameters, intermediate_path, step_index
+            )
 
             step_index += 1
-            socketio.emit('intermediateResult', {
-                          'url': os.path.relpath(path), 'metadata': generation_parameters})
-        socketio.emit('progress', {'step': step + 1})
+            socketio.emit(
+                "intermediateResult",
+                {
+                    "url": os.path.relpath(path),
+                    "mtime": os.path.getmtime(path),
+                    "metadata": generation_parameters,
+                },
+            )
+        socketio.emit("progressUpdate", progress)
         eventlet.sleep(0)
 
-    def image_done(image, seed):
+    def image_done(image, seed, first_seed):
         nonlocal generation_parameters
         nonlocal esrgan_parameters
         nonlocal gfpgan_parameters
+        nonlocal progress
+
+        step_index = 1
+        nonlocal prior_variations
+
+        progress["currentStatus"] = "Generation complete"
+        socketio.emit("progressUpdate", progress)
+        eventlet.sleep(0)
 
         all_parameters = generation_parameters
         postprocessing = False
 
+        if (
+            "variation_amount" in all_parameters
+            and all_parameters["variation_amount"] > 0
+        ):
+            first_seed = first_seed or seed
+            this_variation = [[seed, all_parameters["variation_amount"]]]
+            all_parameters["with_variations"] = prior_variations + this_variation
+            all_parameters["seed"] = first_seed
+        elif ("with_variations" in all_parameters):
+            all_parameters["seed"] = first_seed
+        else:
+            all_parameters["seed"] = seed
+
         if esrgan_parameters:
-            image = real_esrgan_upscale(
+            progress["currentStatus"] = "Upscaling"
+            progress["currentStatusHasSteps"] = False
+            socketio.emit("progressUpdate", progress)
+            eventlet.sleep(0)
+
+            image = esrgan.process(
                 image=image,
-                strength=esrgan_parameters['strength'],
-                upsampler_scale=esrgan_parameters['level'],
-                seed=seed
+                upsampler_scale=esrgan_parameters["level"],
+                strength=esrgan_parameters["strength"],
+                seed=seed,
             )
+
             postprocessing = True
-            all_parameters["upscale"] = [esrgan_parameters['level'], esrgan_parameters['strength']]
+            all_parameters["upscale"] = [
+                esrgan_parameters["level"],
+                esrgan_parameters["strength"],
+            ]
 
         if gfpgan_parameters:
-            image = run_gfpgan(
-                image=image,
-                strength=gfpgan_parameters['strength'],
-                seed=seed,
-                upsampler_scale=1,
+            progress["currentStatus"] = "Fixing faces"
+            progress["currentStatusHasSteps"] = False
+            socketio.emit("progressUpdate", progress)
+            eventlet.sleep(0)
+
+            image = gfpgan.process(
+                image=image, strength=gfpgan_parameters["strength"], seed=seed
             )
             postprocessing = True
-            all_parameters["gfpgan_strength"] = gfpgan_parameters['strength']
+            all_parameters["gfpgan_strength"] = gfpgan_parameters["strength"]
 
-        all_parameters['seed'] = seed
+        progress["currentStatus"] = "Saving image"
+        socketio.emit("progressUpdate", progress)
+        eventlet.sleep(0)
 
-        path = save_image(image, all_parameters, result_path, postprocessing=postprocessing)
+        metadata = parameters_to_generated_image_metadata(all_parameters)
         command = parameters_to_command(all_parameters)
 
-        print(f'Image generated: "{path}"')
+        path = save_image(
+            image, command, metadata, result_path, postprocessing=postprocessing
+        )
+
+        print(f'>> Image generated: "{path}"')
         write_log_message(f'[Generated] "{path}": {command}')
 
+        if progress["totalIterations"] > progress["currentIteration"]:
+            progress["currentStep"] = 1
+            progress["currentIteration"] += 1
+            progress["currentStatus"] = "Iteration finished"
+            progress["currentStatusHasSteps"] = False
+        else:
+            progress["currentStep"] = 0
+            progress["totalSteps"] = 0
+            progress["currentIteration"] = 0
+            progress["totalIterations"] = 0
+            progress["currentStatus"] = "Finished"
+            progress["isProcessing"] = False
+
+        socketio.emit("progressUpdate", progress)
+        eventlet.sleep(0)
+
         socketio.emit(
-            'result', {'url': os.path.relpath(path), 'type': 'generation', 'metadata': all_parameters})
+            "generationResult",
+            {
+                "url": os.path.relpath(path),
+                "mtime": os.path.getmtime(path),
+                "metadata": metadata,
+            },
+        )
         eventlet.sleep(0)
 
     try:
-        model.prompt2image(
+        generate.prompt2image(
             **generation_parameters,
             step_callback=image_progress,
-            image_callback=image_done
+            image_callback=image_done,
         )
 
     except KeyboardInterrupt:
@@ -381,7 +800,7 @@ def generate_images(generation_parameters, esrgan_parameters, gfpgan_parameters)
     except CanceledException:
         pass
     except Exception as e:
-        socketio.emit('error', (str(e)))
+        socketio.emit("error", {"message": (str(e))})
         print("\n")
         traceback.print_exc()
         print("\n")
@@ -392,6 +811,6 @@ END ADDITIONAL FUNCTIONS
 """
 
 
-if __name__ == '__main__':
-    print(f'Starting server at http://{host}:{port}')
+if __name__ == "__main__":
+    print(f">> Starting server at http://{host}:{port}")
     socketio.run(app, host=host, port=port)

docker-build/Dockerfile

@@ -0,0 +1,57 @@
+FROM        debian 
+
+ARG         gsd
+ENV         GITHUB_STABLE_DIFFUSION $gsd
+
+ARG         rsd
+ENV         REQS $rsd
+
+ARG         cs
+ENV         CONDA_SUBDIR $cs
+
+ENV         PIP_EXISTS_ACTION="w"
+
+# TODO: Optimize image size
+
+SHELL       ["/bin/bash", "-c"]
+
+WORKDIR     /
+RUN         apt update && apt upgrade -y \
+            && apt install -y \
+            git \
+            libgl1-mesa-glx \
+            libglib2.0-0 \
+            pip \
+            python3 \
+            && git clone $GITHUB_STABLE_DIFFUSION
+
+# Install Anaconda or Miniconda
+COPY        anaconda.sh .
+RUN         bash anaconda.sh -b -u -p /anaconda && /anaconda/bin/conda init bash
+
+# SD 
+WORKDIR     /stable-diffusion 
+RUN         source ~/.bashrc \
+            && conda create -y --name ldm && conda activate ldm \
+            && conda config --env --set subdir $CONDA_SUBDIR \
+            && pip3 install -r $REQS \   
+            && pip3 install basicsr facexlib realesrgan \          
+            && mkdir models/ldm/stable-diffusion-v1 \
+            && ln -s "/data/sd-v1-4.ckpt" models/ldm/stable-diffusion-v1/model.ckpt 
+
+# Face restoreation
+# by default expected in a sibling directory to stable-diffusion
+WORKDIR     /       
+RUN         git clone https://github.com/TencentARC/GFPGAN.git 
+
+WORKDIR     /GFPGAN 
+RUN         pip3 install -r requirements.txt \
+            && python3 setup.py develop \
+            && ln -s "/data/GFPGANv1.4.pth" experiments/pretrained_models/GFPGANv1.4.pth
+
+WORKDIR     /stable-diffusion 
+RUN         python3 scripts/preload_models.py         
+
+WORKDIR     /
+COPY        entrypoint.sh .
+ENTRYPOINT ["/entrypoint.sh"]

docker-build/entrypoint.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+cd /stable-diffusion
+
+if [ $# -eq 0 ]; then
+    python3 scripts/dream.py --full_precision -o /data
+    # bash
+else
+    python3 scripts/dream.py --full_precision -o /data "$@"
+fi

docs/features/CHANGELOG.md

@@ -2,6 +2,8 @@
 title: Changelog
 ---
 
+# :octicons-log-16: Changelog
+
 ## v1.13 <small>(in process)</small>
 
 - Supports a Google Colab notebook for a standalone server running on Google

docs/features/CLI.md

@@ -1,27 +1,37 @@
 ---
 title: CLI
+hide:
+  - toc
 ---
 
+# :material-bash: CLI
+
 ## **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 AI provided on its Discord server.
+The `dream.py` script, located in `scripts/dream.py`, provides an interactive
+interface to image generation similar to the "dream mothership" bot that Stable
+AI provided on its Discord server.
 
-Unlike the txt2img.py and img2img.py scripts provided in the original CompViz/stable-diffusion
-source code repository, the time-consuming initialization of the AI model initialization only
-happens once. After that image generation from the command-line interface is very fast.
+Unlike the `txt2img.py` and `img2img.py` scripts provided in the original
+[CompVis/stable-diffusion](https://github.com/CompVis/stable-diffusion) source
+code repository, the time-consuming initialization of the AI model
+initialization only happens once. After that image generation from the
+command-line interface is very fast.
 
-The script uses the readline library to allow for in-line editing, command history (up and down
-arrows), autocompletion, and more. To help keep track of which prompts generated which images, the
-script writes a log file of image names and prompts to the selected output directory.
+The script uses the readline library to allow for in-line editing, command
+history (++up++ and ++down++), autocompletion, and more. To help keep track of
+which prompts generated which images, the script writes a log file of image
+names and prompts to the selected output directory.
 
-In addition, as of version 1.02, it also writes the prompt into the PNG file's metadata where it can
-be retrieved using scripts/images2prompt.py
+In addition, as of version 1.02, it also writes the prompt into the PNG file's
+metadata where it can be retrieved using `scripts/images2prompt.py`
 
 The script is confirmed to work on Linux, Windows and Mac systems.
 
-_Note:_ This script runs from the command-line or can be used as a Web application. The Web GUI is
-currently rudimentary, but a much better replacement is on its way.
+!!! note
+
+    This script runs from the command-line or can be used as a Web application. The Web GUI is
+    currently rudimentary, but a much better replacement is on its way.
 
 ```bash
 (ldm) ~/stable-diffusion$ python3 ./scripts/dream.py
@@ -47,179 +57,191 @@ dream> q
 00011.png: "there's a fly in my soup" -n6 -g -S 2685670268
 ```
 
-<p align='center'>
-<img src="../assets/dream-py-demo.png"/>
-</p>
+![dream-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). 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).
+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).
+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).
 
 ## Arguments
 
-The script itself also recognizes a series of command-line switches that will change important
-global defaults, such as the directory for image outputs and the location of the model weight files.
+The script itself also recognizes a series of command-line switches that will
+change important global defaults, such as the directory for image outputs and
+the location of the model weight files.
 
-## List of arguments recognized at the command line
+### List of arguments recognized at the command line
 
-These command-line arguments can be passed to dream.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
+These command-line arguments can be passed to `dream.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
 
-| Argument                |  Shortcut   | Default                                          | Description                                                                                          |
-| :---------------------- | :---------: | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
-| --help                  |     -h      |                                                  | Print a concise help message.                                                                        |
-| --outdir <path>         |  -o<path>   | outputs/img_samples                              | Location for generated images.                                                                       |
-| --prompt_as_dir         |     -p      | False                                            | Name output directories using the prompt text.                                                       |
-| --from_file <path>      |             | None                                             | Read list of prompts from a file. Use "-" to read from standard input                                |
-| --model <modelname>     |             | stable-diffusion-1.4                             | Loads model specified in configs/models.yaml. Currently one of "stable-diffusion-1.4" or "laion400m" |
-| --full_precision        |     -F      | False                                            | Run in slower full-precision mode. Needed for Macintosh M1/M2 hardware and some older video cards.   |
-| --web                   |             | False                                            | Start in web server mode                                                                             |
-| --host <ip addr>        |             | localhost                                        | Which network interface web server should listen on. Set to 0.0.0.0 to listen on any.                |
-| --port <port>           |             | 9090                                             | Which port web server should listen for requests on.                                                 |
-| --config <path>         |             | configs/models.yaml                              | Configuration file for models and their weights.                                                     |
-| --iterations <int>      |   -n<int>   | 1                                                | How many images to generate per prompt.                                                              |
-| --grid                  |     -g      | False                                            | Save all image series as a grid rather than individually.                                            |
-| --sampler <sampler>     | -A<sampler> | k_lms                                            | Sampler to use. Use -h to get list of available samplers.                                            |
-| --seamless              |             | False                                            | Create interesting effects by tiling elements of the image.                                          |
-| --embedding_path <path> |             | None                                             | Path to pre-trained embedding manager checkpoints, for custom models                                 |
-| --gfpgan_dir            |             | src/gfpgan                                       | Path to where GFPGAN is installed.                                                                   |
-| --gfpgan_model_path     |             | experiments/pretrained_models<br>/GFPGANv1.3.pth | Path to GFPGAN model file, relative to --gfpgan_dir.                                                 |
-| --device <device>       | -d<device>  | torch.cuda.current_device()                      | Device to run SD on, e.g. "cuda:0"                                                                   |
+| Argument <img width="240" align="right"/> | Shortcut <img width="100" align="right"/> | Default <img width="320" align="right"/>       | Description                                                                                          |
+| ----------------------------------------- | ----------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `--help`                                  | `-h`                                      |                                                | Print a concise help message.                                                                        |
+| `--outdir <path>`                         | `-o<path>`                                | `outputs/img_samples`                          | Location for generated images.                                                                       |
+| `--prompt_as_dir`                         | `-p`                                      | `False`                                        | Name output directories using the prompt text.                                                       |
+| `--from_file <path>`                      |                                           | `None`                                         | Read list of prompts from a file. Use `-` to read from standard input                                |
+| `--model <modelname>`                     |                                           | `stable-diffusion-1.4`                         | Loads model specified in configs/models.yaml. Currently one of "stable-diffusion-1.4" or "laion400m" |
+| `--full_precision`                        | `-F`                                      | `False`                                        | Run in slower full-precision mode. Needed for Macintosh M1/M2 hardware and some older video cards.   |
+| `--web`                                   |                                           | `False`                                        | Start in web server mode                                                                             |
+| `--host <ip addr>`                        |                                           | `localhost`                                    | Which network interface web server should listen on. Set to 0.0.0.0 to listen on any.                |
+| `--port <port>`                           |                                           | `9090`                                         | Which port web server should listen for requests on.                                                 |
+| `--config <path>`                         |                                           | `configs/models.yaml`                          | Configuration file for models and their weights.                                                     |
+| `--iterations <int>`                      | `-n<int>`                                 | `1`                                            | How many images to generate per prompt.                                                              |
+| `--grid`                                  | `-g`                                      | `False`                                        | Save all image series as a grid rather than individually.                                            |
+| `--sampler <sampler>`                     | `-A<sampler>`                             | `k_lms`                                        | Sampler to use. Use `-h` to get list of available samplers.                                          |
+| `--seamless`                              |                                           | `False`                                        | Create interesting effects by tiling elements of the image.                                          |
+| `--embedding_path <path>`                 |                                           | `None`                                         | Path to pre-trained embedding manager checkpoints, for custom models                                 |
+| `--gfpgan_dir`                            |                                           | `src/gfpgan`                                   | Path to where GFPGAN is installed.                                                                   |
+| `--gfpgan_model_path`                     |                                           | `experiments/pretrained_models/GFPGANv1.4.pth` | Path to GFPGAN model file, relative to `--gfpgan_dir`.                                               |
+| `--device <device>`                       | `-d<device>`                              | `torch.cuda.current_device()`                  | Device to run SD on, e.g. "cuda:0"                                                                   |
+
+#### deprecated
 
 These arguments are deprecated but still work:
 
-| Argument         | Shortcut | Default | Description                                                     |
-| ---------------- | -------- | ------- | --------------------------------------------------------------- |
-| --weights <path> |          | None    | Pth to weights file; use `--model stable-diffusion-1.4` instead |
-| --laion400m      | -l       | False   | Use older LAION400m weights; use `--model=laion400m` instead    |
 
-### **A note on path names:**
+| Argument           |  Shortcut  |  Default            |  Description |
+|--------------------|------------|---------------------|--------------|
+| --weights <path>   |            | None                | Pth to weights file; use `--model stable-diffusion-1.4` instead |
+| --laion400m        | -l         | False               | Use older LAION400m weights; use `--model=laion400m` instead |
 
-On Windows systems, you may run into problems when passing the dream 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`.
+**A note on path names:** On Windows systems, you may run into
+  problems when passing the dream 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
+## 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 from text (txt2img), to embellish an existing image or sketch
-(img2img), or to selectively alter chosen regions of the image (inpainting).
+After the dream.py script initializes, it will present you with a
+**dream>** 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).
 
-### This is an example of txt2img
+### This is an example of txt2img:
 
-```bash
-dream> "waterfall and rainbow" -W640 -H480
-```
+~~~~
+dream> waterfall and rainbow -W640 -H480
+~~~~
 
-This will create the requested image with the dimensions 640 (width) and 480 (height).
+This will create the requested image with the dimensions 640 (width)
+and 480 (height).
 
-Those are the `dream` commands that apply to txt2img:
+Here are the dream> command that apply to txt2img:
 
-| Argument                    | Shortcut         | Default             | Description                                                                                                                                                                                                                                  |
-| --------------------------- | ---------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| "my prompt"                 |                  |                     | Text prompt to use. The quotation marks are optional.                                                                                                                                                                                        |
-| --width <int>               | -W<int>          | 512                 | Width of generated image                                                                                                                                                                                                                     |
-| --height <int>              | -H<int>          | 512                 | Height of generated image                                                                                                                                                                                                                    |
-| --iterations <int>          | -n<int>          | 1                   | How many images to generate from this prompt                                                                                                                                                                                                 |
-| --steps <int>               | -s<int>          | 50                  | How many steps of refinement to apply                                                                                                                                                                                                        |
-| --cfg_scale <float>         | -C<float>        | 7.5                 | How hard to try to match the prompt to the generated image; any number greater than 0.0 works, but the useful range is roughly 5.0 to 20.0                                                                                                   |
-| --seed <int>                | -S<int>          | None                | Set the random seed for the next series of images. This can be used to recreate an image generated previously.                                                                                                                               |
-| --sampler <sampler>         | -A<sampler>      | k_lms               | Sampler to use. Use -h to get list of available samplers.                                                                                                                                                                                    |
-| --grid                      | -g               | False               | Turn on grid mode to return a single image combining all the images generated by this prompt                                                                                                                                                 |
-| --individual                | -i               | True                | Turn off grid mode (deprecated; leave off --grid instead)                                                                                                                                                                                    |
-| --outdir <path>             | -o<path>         | outputs/img_samples | Temporarily change the location of these images                                                                                                                                                                                              |
-| --seamless                  |                  | False               | Activate seamless tiling for interesting effects                                                                                                                                                                                             |
-| --log_tokenization          | -t               | False               | Display a color-coded list of the parsed tokens derived from the prompt                                                                                                                                                                      |
-| --skip_normalization        | -x               | False               | Weighted subprompts will not be normalized. See [Weighted Prompts](./OTHER.md#weighted-prompts)                                                                                                                                              |
-| --upscale <int> <float>     | -U <int> <float> | -U 1 0.75           | Upscale image by magnification factor (2, 4), and set strength of upscaling (0.0-1.0). If strength not set, will default to 0.75.                                                                                                            |
-| --gfpgan_strength <float>   | -G <float>       | -G0                 | Fix faces using the GFPGAN algorithm; argument indicates how hard the algorithm should try (0.0-1.0)                                                                                                                                         |
-| --save_original             | -save_orig       | False               | When upscaling or fixing faces, this will cause the original image to be saved rather than replaced.                                                                                                                                         |
-| --variation <float>         | -v<float>        | 0.0                 | Add a bit of noise (0.0=none, 1.0=high) to the image in order to generate a series of variations. Usually used in combination with -S<seed> and -n<int> to generate a series a riffs on a starting image. See [Variations](./VARIATIONS.md). |
-| --with_variations <pattern> | -V<pattern>      | None                | Combine two or more variations. See [Variations](./VARIATIONS.md) for now to use this.                                                                                                                                                       |
+| Argument           |  Shortcut  |  Default            |  Description |
+|--------------------|------------|---------------------|--------------|
+| "my prompt"        |            |                    | Text prompt to use. The quotation marks are optional. |
+| --width <int>      | -W<int>   | 512                 | Width of generated image |
+| --height <int>     | -H<int>   | 512                 | Height of generated image |
+| --iterations <int> | -n<int>   | 1                   | How many images to generate from this prompt |
+| --steps <int>      | -s<int>   | 50                  | How many steps of refinement to apply |
+| --cfg_scale <float>| -C<float> | 7.5                 | How hard to try to match the prompt to the generated image; any number greater than 1.0 works, but the useful range is roughly 5.0 to 20.0 |
+| --seed <int>       | -S<int>   | None                | Set the random seed for the next series of images. This can be used to recreate an image generated previously.|
+| --sampler <sampler>| -A<sampler>| k_lms              | Sampler to use. Use -h to get list of available samplers. |
+| --grid             | -g        | False               | Turn on grid mode to return a single image combining all the images generated by this prompt |
+| --individual       | -i        | True                | Turn off grid mode (deprecated; leave off --grid instead) |
+| --outdir <path>    |  -o<path> | outputs/img_samples  | Temporarily change the location of these images |
+| --seamless         |           | False               | Activate seamless tiling for interesting effects |
+| --log_tokenization | -t        | False               | Display a color-coded list of the parsed tokens derived from the prompt |
+| --skip_normalization| -x       | False               | Weighted subprompts will not be normalized. See [Weighted Prompts](./OTHER.md#weighted-prompts) |
+| --upscale <int> <float> | -U <int> <float> | -U 1 0.75| Upscale image by magnification factor (2, 4), and set strength of upscaling (0.0-1.0). If strength not set, will default to 0.75. |
+| --gfpgan_strength <float>  | -G <float> | -G0        | Fix faces using the GFPGAN algorithm; argument indicates how hard the algorithm should try (0.0-1.0) |
+| --save_original    | -save_orig| False               | When upscaling or fixing faces, this will cause the original image to be saved rather than replaced. |
+| --variation <float>  |-v<float>| 0.0                 | Add a bit of noise (0.0=none, 1.0=high) to the image in order to generate a series of variations. Usually used in combination with -S<seed> and -n<int> to generate a series a riffs on a starting image. See [Variations](./VARIATIONS.md). |
+| --with_variations <pattern> | -V<pattern>| None      | Combine two or more variations. See [Variations](./VARIATIONS.md) for now to use this. |
 
-Note that the width and height of the image must be multiples of 64. You can provide different
-values, but they will be rounded down to the nearest multiple of 64.
+Note that the width and height of the image must be multiples of
+64. You can provide different values, but they will be rounded down to
+the nearest multiple of 64.
 
-### This is an example of img2img
 
-```bash
+### This is an example of img2img:	
+
+~~~~
 dream> waterfall and rainbow -I./vacation-photo.png -W640 -H480 --fit
-```
+~~~~
 
-This will modify the indicated vacation photograph by making it more like the prompt. Results will
-vary greatly depending on what is in the image. We also ask to --fit the image into a box no bigger
-than 640x480. Otherwise the image size will be identical to the provided photo and you may run out
-of memory if it is large.
+This will modify the indicated vacation photograph by making it more
+like the prompt. Results will vary greatly depending on what is in the
+image. We also ask to --fit the image into a box no bigger than
+640x480. Otherwise the image size will be identical to the provided
+photo and you may run out of memory if it is large.
 
-In addition to the command-line options recognized by txt2img, img2img accepts additional options:
+In addition to the command-line options recognized by txt2img, img2img
+accepts additional options:
 
-| Argument           | Shortcut  | Default | Description                                                                                                                                |
-| ------------------ | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| --init_img <path>  | -I<path>  | None    | Path to the initialization image                                                                                                           |
-| --fit              | -F        | False   | Scale the image to fit into the specified -H and -W dimensions                                                                             |
-| --strength <float> | -s<float> | 0.75    | How hard to try to match the prompt to the initial image. Ranges from 0.0-0.99, with higher values replacing the initial image completely. |
+| Argument           |  Shortcut  |  Default            |  Description |
+|--------------------|------------|---------------------|--------------|
+| --init_img <path>  | -I<path>   | None                | Path to the initialization image |
+| --fit              | -F         | False               | Scale the image to fit into the specified -H and -W dimensions |
+| --strength <float> | -s<float>  | 0.75                | How hard to try to match the prompt to the initial image. Ranges from 0.0-0.99, with higher values replacing the initial image completely.|
 
-### This is an example of inpainting
+### This is an example of inpainting:
 
-```bash
-dream> "waterfall and rainbow" -I./vacation-photo.png -M./vacation-mask.png -W640 -H480 --fit
-```
+~~~~
+dream> 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 only occur within transparent
-areas defined by the mask file specified by -M. You may also supply just a single initial image with
-the areas to overpaint made transparent, but you must be careful not to destroy the pixels
-underneath when you create the transparent areas. See [Inpainting](./INPAINTING.md) for details.
+This will do the same thing as img2img, but image alterations will
+only occur within transparent areas defined by the mask file specified
+by -M. You may also supply just a single initial image with the areas
+to overpaint made transparent, but you must be careful not to destroy
+the pixels underneath when you create the transparent areas. See
+[Inpainting](./INPAINTING.md) for details.
 
-inpainting accepts all the arguments used for txt2img and img2img, as well as the --mask (-M)
-argument:
+inpainting accepts all the arguments used for txt2img and img2img, as
+well as the --mask (-M) argument:
 
-| Argument           | Shortcut | Default | Description                                                                                      |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------------------------ |
-| --init_mask <path> | -M<path> | None    | Path to an image the same size as the initial_image, with areas for inpainting made transparent. |
+| Argument           |  Shortcut  |  Default            |  Description |
+|--------------------|------------|---------------------|--------------|
+| --init_mask <path> | -M<path>   | None                |Path to an image the same size as the initial_image, with areas for inpainting made transparent.|
 
-## Command-line editing and completion
 
-If you are on a Macintosh or Linux machine, the command-line offers convenient history tracking,
-editing, and command completion.
+# Command-line editing and completion
 
-- To scroll through previous commands and potentially edit/reuse them, use the up and down cursor
-  keys.
-- To edit the current command, use the left and right cursor keys to position the cursor, and then
-  backspace, delete or insert characters.
+If you are on a Macintosh or Linux machine, the command-line offers
+convenient history tracking, editing, and command completion.
+
+- To scroll through previous commands and potentially edit/reuse them, use the up and down cursor keys.
+- To edit the current command, use the left and right cursor keys to position the cursor, and then backspace, delete or insert characters.
 - To move to the very beginning of the command, type CTRL-A (or command-A on the Mac)
 - To move to the end of the command, type CTRL-E.
-- To cut a section of the command, position the cursor where you want to start cutting and type
-  CTRL-K.
+- To cut a section of the command, position the cursor where you want to start cutting and type CTRL-K.
 - 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:
+Windows users can get similar, but more limited, functionality if they
+launch dream.py with the "winpty" program:
 
-```
+~~~
 > winpty python scripts\dream.py
-```
+~~~
 
-On the Mac and Linux platforms, when you exit dream.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.
+On the Mac and Linux platforms, when you exit dream.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.
 
-In addition, limited command-line completion is installed. In various contexts, you can start typing
-your command and press tab. A list of potential completions will be presented to you. You can then
-type a little more, hit tab again, and eventually autocomplete what you want.
+In addition, limited command-line completion is installed. In various
+contexts, you can start typing your command and press tab. A list of
+potential completions will be presented to you. You can then type a
+little more, hit tab again, and eventually autocomplete what you want.
 
-When specifying file paths using the one-letter shortcuts, the CLI will attempt to complete
-pathnames for you. This is most handy for the -I (init image) and -M (init mask) paths. To initiate
-completion, start the path with a slash ("/") or "./". For example:
+When specifying file paths using the one-letter shortcuts, the CLI
+will attempt to complete pathnames for you. This is most handy for the
+-I (init image) and -M (init mask) paths. To initiate completion, start
+the path with a slash ("/") or "./". For example:
 
-```
+~~~
 dream> 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/
 ```
 
-You can then type "z", hit tab again, and it will autofill to "zebra.jpg".
+You can then type ++z++, hit ++tab++ again, and it will autofill to `zebra.jpg`.
 
 More text completion features (such as autocompleting seeds) are on their way.

docs/features/EMBIGGEN.md

@@ -1,4 +1,10 @@
-# **Embiggen -- upscale your images on limited memory machines**
+---
+title: Embiggen
+---
+
+# :material-loupe: Embiggen
+
+**upscale your images on limited memory machines**
 
 GFPGAN and Real-ESRGAN are both memory intensive. In order to avoid
 crashes and memory overloads during the Stable Diffusion process,
@@ -16,7 +22,7 @@ face restore a particular generated image, pass it again with the same
 prompt and generated seed along with the `-U` and `-G` prompt
 arguments to perform those actions.
 
-## Embiggen 
+## Embiggen
 
 If you wanted to be able to do more (pixels) without running out of VRAM,
 or you want to upscale with details that couldn't possibly appear
@@ -37,7 +43,7 @@ it's similar to that, except it can work up to an arbitrarily large size
 has extra logic to re-run any number of the tile sub-sections of the image
 if for example a small part of a huge run got messed up.
 
-**Usage**
+## Usage
 
 `-embiggen <scaling_factor> <esrgan_strength> <overlap_ratio OR overlap_pixels>`
 
@@ -55,7 +61,6 @@ and it can also be less than one if the init_img is too big.
 Esrgan_strength defaults to 0.75, and the overlap_ratio defaults to
 0.25, both are optional.
 
-
 Unlike Img2Img, the `--width` (`-W`) and `--height` (`-H`) arguments
 do not control the size of the image as a whole, but the size of the
 tiles used to Embiggen the image.
@@ -95,12 +100,12 @@ Tiles are numbered starting with one, and left-to-right,
 top-to-bottom.  So, if you are generating a 3x3 tiled image, the
 middle row would be `4 5 6`.
 
-**Example Usage**
+## Example Usage
 
 Running Embiggen with 512x512 tiles on an existing image, scaling up by a factor of 2.5x;
 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
 ```
@@ -112,12 +117,28 @@ If there weren't enough clouds in the sky of that forest you just made
 512x512 tiles with 0.25 overlaps wide) we can replace that top row of
 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
 ```
 
-**Note**
+## Fixing Previously-Generated Images
 
+It is easy to apply embiggen to any previously-generated file without having to
+look up the original prompt and provide an initial image. Just use the
+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
+~~~~
+
+A new file named `000002.seed.fixed.png` will be created in the output directory. Note that
+the `!fix` command does not replace the original file, unlike the behavior at generate time.
+You do not need to provide the prompt, and `!fix` automatically selects a good strength for
+embiggen-ing.
+
+
+**Note**
 Because the same prompt is used on all the tiled images, and the model
 doesn't have the context of anything outside the tile being run - it
 can end up creating repeated pattern (also called 'motifs') across all
@@ -128,7 +149,6 @@ create the detail.  Anecdotally `--strength` 0.35-0.45 works pretty
 well on most things. It may also work great in some examples even with
 the `--strength` set high for patterns, landscapes, or subjects that
 are more abstract. Because this is (relatively) fast, you can also
-always create a few Embiggen'ed images and manually composite them to
 preserve the best parts from each.
 
-Author: [Travco](https://github.com/travco)
+Author: [Travco](https://github.com/travco)

docs/features/IMG2IMG.md

@@ -2,7 +2,8 @@
 title: Image-to-Image
 ---
 
-## **IMG2IMG**
+# :material-image-multiple: **IMG2IMG**
+
 This script also provides an `img2img` feature that lets you seed your creations with an initial
 drawing or photo. This is a really cool feature that tells stable diffusion to build the prompt on
 top of the image you provide, preserving the original's basic shape and layout. To use it, provide

docs/features/INPAINTING.md

@@ -2,6 +2,8 @@
 title: Inpainting
 ---
 
+# :octicons-paintbrush-16: Inpainting
+
 ## **Creating Transparent Regions for Inpainting**
 
 Inpainting is really cool. To do it, you start with an initial image and use a photoeditor to make
@@ -26,6 +28,8 @@ dream> "man with cat on shoulder" -I./images/man.png -M./images/man-transparent.
 
 We are hoping to get rid of the need for this workaround in an upcoming release.
 
+---
+
 ## Recipe for GIMP
 
 [GIMP](https://www.gimp.org/) is a popular Linux photoediting tool.
@@ -34,8 +38,39 @@ 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 (^L) and select "Floating Selection"
+5. Open the Layers toolbar (++ctrl+l++) and select "Floating Selection"
 6. Set opacity to 0%
 7. Export as PNG
-8. In the export dialogue, Make sure the "Save colour values from transparent pixels" checkbox is
-   selected.
+8. In the export dialogue, Make sure the "Save colour values from
+   transparent pixels" checkbox is selected.
+
+
+## Recipe for Adobe Photoshop
+
+1. Open image in Photoshop
+
+![step1](../assets/step1.png)
+
+2. Use any of the selection tools (Marquee, Lasso, or Wand) to select the area you desire to inpaint.
+
+![step2](../assets/step2.png)
+
+3. Because we'll be applying a mask over the area we want to preserve, you should now select the inverse by using the ++shift+ctrl+i++ shortcut, or right clicking and using the "Select Inverse" option.
+
+4. You'll now create a mask by selecting the image layer, and Masking the selection. Make sure that you don't delete any of the undrlying image, or your inpainting results will be dramatically impacted.
+
+![step4](../assets/step4.png)
+
+5. Make sure to hide any background layers that are present. You should see the mask applied to your image layer, and the image on your canvas should display the checkered background.
+
+![step5](../assets/step5.png)
+
+6. Save the image as a transparent PNG by using the "Save a Copy" option in the File menu, or using the Alt + Ctrl + S keyboard shortcut
+
+![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!
+
+![step7](../assets/step7.png)
+
+8. In the export dialogue, Make sure the "Save colour values from transparent pixels" checkbox is selected.  

docs/features/OTHER.md

@@ -2,6 +2,8 @@
 title: Others
 ---
 
+# :fontawesome-regular-share-from-square: Others
+
 ## **Google Colab**
 
 Stable Diffusion AI Notebook: <a
@@ -28,32 +30,6 @@ dream> "pond garden with lotus by claude monet" --seamless -s100 -n4
 
 ---
 
-## **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
-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:
-
-```bash
-a beautiful sunny day in the park, children playing -n4 -C10
-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:
-
-```bash
-(ldm) ~/stable-diffusion$ python3 scripts/dream.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 -
-```
-
----
-
 ## **Shortcuts: Reusing Seeds**
 
 Since it is so common to reuse seeds while refining a prompt, there is now a shortcut as of version
@@ -79,22 +55,6 @@ outputs/img-samples/000040.3498014304.png: "a cute child playing hopscotch" -G1.
 
 ---
 
-## **Weighted Prompts**
-
-You may weight different sections of the prompt to tell the sampler to attach different levels of
-priority to them, by adding `:(number)` to the end of the section you wish to up- or downweight. For
-example consider this prompt:
-
-```bash
-tabby cat:0.25 white duck:0.75 hybrid
-```
-
-This will tell the sampler to invest 25% of its effort on the tabby cat aspect of the image and 75%
-on the white duck aspect (surprisingly, this example actually works). The prompt weights can use any
-combination of integers and floating point numbers, and they do not need to add up to 1.
-
----
-
 ## **Simplified API**
 
 For programmers who wish to incorporate stable-diffusion into other products, this repository

docs/features/OUTPAINTING.md

@@ -0,0 +1,78 @@
+---
+title: Outpainting
+---
+
+# :octicons-paintbrush-16: Outpainting
+
+## Continous outpainting
+
+This extension uses the inpainting code to extend an existing image to
+any direction of "top", "right", "bottom" or "left". To use it you
+need to provide an initial image with -I and an extension direction
+with -D (direction). When extending using outpainting a higher img2img
+strength value of 0.83 is the default.
+
+The code is not foolproof. Sometimes it will do a good job extending
+the image, and other times it will generate ghost images and other
+artifacts. In addition, the code works best on images that were
+generated by dream.py, because it will be able to recover the original
+prompt that generated the file and "understand" what you are trying to
+achieve.
+
+### Basic Usage
+
+To illustrate, consider this image generated with the prompt "fantasy
+portrait of eleven princess." It's nice, but rather annoying that the
+top of the head has been cropped off.
+
+![elven_princess](../assets/outpainting/elven_princess.png)
+
+We can fix that using the `!fix` command!
+
+~~~~
+dream> !fix my_images/elven_princess.png -D top 50
+~~~~
+
+This is telling dream.py to open up a rectangle 50 pixels high at the
+top of the image and outpaint into it. The result is:
+
+![elven_princess.fixed](../assets/outpainting/elven_princess.outpainted.png)
+
+Viola! You can similarly specify `bottom`, `left` or `right` to
+outpaint into these margins.
+
+There are some limitations to be aware of:
+
+1. You cannot change the size of the image rectangle. In the example,
+   notice that the whole image is shifted downwards by 50 pixels, rather
+   than the top being extended upwards.
+
+2. Attempting to outpaint larger areas will frequently give rise to ugly
+   ghosting effects.
+
+3. For best results, try increasing the step number.
+
+4. If you don't specify a pixel value in -D, it will default to half
+   of the whole image, which is likely not what you want.
+
+You can do more with `!fix` including upscaling and facial
+reconstruction of previously-generated images. See
+[./UPSCALE.md#fixing-previously-generated-images] for the details.
+
+### Advanced Usage
+
+For more control over the outpaintihg process, you can provide the
+`-D` option at image generation time. This allows you to apply all the
+controls, including the ability to resize the image and apply face-fixing
+and upscaling. For example:
+
+~~~~
+dream> man with cat on shoulder -I./images/man.png -D bottom 100 -W960 -H960 -fit
+~~~~
+
+Or even shorter, since the prompt is read from the metadata of the old image:
+
+~~~~
+dream> -I./images/man.png -D bottom 100 -W960 -H960 -fit -U2 -G1
+~~~~
+

docs/features/PROMPTS.md

@@ -0,0 +1,90 @@
+---
+title: Prompting Features
+---
+
+# :octicons-command-palette-24: 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
+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:
+
+```bash
+a beautiful sunny day in the park, children playing -n4 -C10
+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:
+
+```bash
+(ldm) ~/stable-diffusion$ python3 scripts/dream.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 -
+```
+
+---
+
+## **Weighted Prompts**
+
+You may weight different sections of the prompt to tell the sampler to attach different levels of
+priority to them, by adding `:(number)` to the end of the section you wish to up- or downweight. For
+example consider this prompt:
+
+```bash
+tabby cat:0.25 white duck:0.75 hybrid
+```
+
+This will tell the sampler to invest 25% of its effort on the tabby cat aspect of the image and 75%
+on the white duck aspect (surprisingly, this example actually works). The prompt weights can use any
+combination of integers and floating point numbers, and they do not need to add up to 1.
+
+---
+
+## **Negative and Unconditioned Prompts**
+
+Any words between a pair of square brackets will try and be ignored by Stable Diffusion's model during generation of images.
+
+```bash
+this is a test prompt [not really] to make you understand [cool] how this works.
+```
+
+In the above statement, the words 'not really cool` will be ignored by Stable Diffusion.
+
+Here's a prompt that depicts what it does.
+
+original prompt:
+
+`#!bash "A fantastical translucent poney made of water and foam, ethereal, radiant, hyperalism, scottish folklore, digital painting, artstation, concept art, smooth, 8 k frostbite 3 engine, ultra detailed, art by artgerm and greg rutkowski and magali villeneuve" -s 20 -W 512 -H 768 -C 7.5 -A k_euler_a -S 1654590180`
+
+![step1](../assets/negative_prompt_walkthru/step1.png)
+
+That image has a woman, so if we want the horse without a rider, we can influence the image not to have a woman by putting [woman] in the prompt, like this:
+
+`#!bash "A fantastical translucent poney made of water and foam, ethereal, radiant, hyperalism, scottish folklore, digital painting, artstation, concept art, smooth, 8 k frostbite 3 engine, ultra detailed, art by artgerm and greg rutkowski and magali villeneuve [woman]" -s 20 -W 512 -H 768 -C 7.5 -A k_euler_a -S 1654590180`
+
+![step2](../assets/negative_prompt_walkthru/step2.png)
+
+That's nice - but say we also don't want the image to be quite so blue. We can add "blue" to the list of negative prompts, so it's now [woman blue]:
+
+`#!bash "A fantastical translucent poney made of water and foam, ethereal, radiant, hyperalism, scottish folklore, digital painting, artstation, concept art, smooth, 8 k frostbite 3 engine, ultra detailed, art by artgerm and greg rutkowski and magali villeneuve [woman blue]" -s 20 -W 512 -H 768 -C 7.5 -A k_euler_a -S 1654590180`
+
+![step3](../assets/negative_prompt_walkthru/step3.png)
+
+Getting close - but there's no sense in having a saddle when our horse doesn't have a rider, so we'll add one more negative prompt: [woman blue saddle].
+
+`#!bash "A fantastical translucent poney made of water and foam, ethereal, radiant, hyperalism, scottish folklore, digital painting, artstation, concept art, smooth, 8 k frostbite 3 engine, ultra detailed, art by artgerm and greg rutkowski and magali villeneuve [woman blue saddle]" -s 20 -W 512 -H 768 -C 7.5 -A k_euler_a -S 1654590180`
+
+![step4](../assets/negative_prompt_walkthru/step4.png)
+
+!!! notes "Notes about this feature:"
+
+    * The only requirement for words to be ignored is that they are in between a pair of square brackets.
+    * You can provide multiple words within the same bracket.
+    * You can provide multiple brackets with multiple words in different places of your prompt. That works just fine.
+    * To improve typical anatomy problems, you can add negative prompts like `[bad anatomy, extra legs, extra arms, extra fingers, poorly drawn hands, poorly drawn feet, disfigured, out of frame, tiling, bad art, deformed, mutated]`.

docs/features/TEXTUAL_INVERSION.md

@@ -2,6 +2,8 @@
 title: TEXTUAL_INVERSION
 ---
 
+# :material-file-document-plus-outline: TEXTUAL_INVERSION
+
 ## **Personalizing Text-to-Image Generation**
 
 You may personalize the generated images to provide your own styles or objects
@@ -39,7 +41,7 @@ and one with the init word provided.
 
 On a RTX3090, the process for SD will take ~1h @1.6 iterations/sec.
 
-!!! Info _Note_
+!!! note
 
     According to the associated paper, the optimal number of
     images is 3-5. Your model may not converge if you use more images than
@@ -57,9 +59,7 @@ Once the model is trained, specify the trained .pt or .bin file when starting
 dream using
 
 ```bash
-python3 ./scripts/dream.py \
-        --embedding_path /path/to/embedding.pt \
-        --full_precision
+python3 ./scripts/dream.py --embedding_path /path/to/embedding.pt
 ```
 
 Then, to utilize your subject at the dream prompt

docs/features/UPSCALE.md

@@ -2,76 +2,91 @@
 title: Upscale
 ---
 
-## **GFPGAN and Real-ESRGAN Support**
+## Intro
 
-The script also provides the ability to do face restoration and upscaling with the help of GFPGAN
-and Real-ESRGAN respectively.
+The script provides the ability to restore faces and upscale. You can apply
+these operations at the time you generate the images, or at any time to a
+previously-generated PNG file, using the
+[!fix](#fixing-previously-generated-images) command.
 
-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
-stable-diffusion 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.
+## Face Fixing
 
-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.3.pth)
-into **src/gfpgan/experiments/pretrained_models**. On Mac and Linux systems, here's how you'd do it
-using **wget**:
+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 stable-diffusion 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.
+
+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**:
 
 ```bash
-> wget https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.3.pth src/gfpgan/experiments/pretrained_models/
+> wget https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.4.pth src/gfpgan/experiments/pretrained_models/
 ```
 
 Make sure that you're in the stable-diffusion directory when you do this.
 
-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._
+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._
 
-**Note: 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.
+!!! warning "Internet connection needed"
 
-## **Usage**
+    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.
+
+## Usage
 
 You will now have access to two new prompt arguments.
 
-### **Upscaling**
+### Upscaling
 
 `-U : <upscaling_factor> <upscaling_strength>`
 
-The upscaling prompt argument takes two values. The first value is a scaling factor and should be
-set to either `2` or `4` only. This will either scale the image 2x or 4x respectively using
-different models.
+The upscaling prompt argument takes two values. The first value is a scaling
+factor and should be set to either `2` or `4` only. This will either scale the
+image 2x or 4x respectively using different models.
 
-You can set the scaling stength between `0` and `1.0` to control intensity of the of the scaling.
-This is handy because AI upscalers generally tend to smooth out texture details. If you wish to
-retain some of those for natural looking results, we recommend using values between `0.5 to 0.8`.
+You can set the scaling stength between `0` and `1.0` to control intensity of
+the of the scaling. This is handy because AI upscalers generally tend to smooth
+out texture details. If you wish to retain some of those for natural looking
+results, we recommend using values between `0.5 to 0.8`.
 
 If you do not explicitly specify an upscaling_strength, it will default to 0.75.
 
-### **Face Restoration**
+### Face Restoration
 
 `-G : <gfpgan_strength>`
 
-This prompt argument controls the strength of the face restoration that is being applied. Similar to
-upscaling, values between `0.5 to 0.8` are recommended.
+This prompt argument controls the strength of the face restoration that is being
+applied. Similar to upscaling, values between `0.5 to 0.8` are recommended.
 
-You can use either one or both without any conflicts. In cases where you use both, the image will be
-first upscaled and then the face restoration process will be executed to ensure you get the highest
-quality facial features.
+You can use either one or both without any conflicts. In cases where you use
+both, the image will be first upscaled and then the face restoration process
+will be executed to ensure you get the highest quality facial features.
 
 `--save_orig`
 
-When you use either `-U` or `-G`, the final result you get is upscaled or face modified. If you want
-to save the original Stable Diffusion generation, you can use the `-save_orig` prompt argument to
-save the original unaffected version too.
+When you use either `-U` or `-G`, the final result you get is upscaled or face
+modified. If you want to save the original Stable Diffusion generation, you can
+use the `-save_orig` prompt argument to save the original unaffected version
+too.
 
-### **Example Usage**
+### Example Usage
 
 ```bash
 dream> superman dancing with a panda bear -U 2 0.6 -G 0.4
@@ -83,17 +98,80 @@ This also works with img2img:
 dream> a man wearing a pineapple hat -I path/to/your/file.png -U 2 0.5 -G 0.6
 ```
 
-### **Note**
+!!! note
 
-GFPGAN and Real-ESRGAN are both memory intensive. In order to avoid crashes and memory overloads
-during the Stable Diffusion process, these effects are applied after Stable Diffusion has completed
-its work.
+    GFPGAN and Real-ESRGAN are both memory intensive. In order to avoid crashes and memory overloads
+    during the Stable Diffusion process, these effects are applied after Stable Diffusion has completed
+    its work.
 
-In single image generations, you will see the output right away but when you are using multiple
-iterations, the images will first be generated and then upscaled and face restored after that
-process is complete. While the image generation is taking place, you will still be able to preview
-the base images.
+    In single image generations, you will see the output right away but when you are using multiple
+    iterations, the images will first be generated and then upscaled and face restored after that
+    process is complete. While the image generation is taking place, you will still be able to preview
+    the base images.
 
-If you wish to stop during the image generation but want to upscale or face restore a particular
-generated image, pass it again with the same prompt and generated seed along with the `-U` and `-G`
-prompt arguments to perform those actions.
+If you wish to stop during the image generation but want to upscale or face
+restore a particular generated image, pass it again with the same prompt and
+generated seed along with the `-U` and `-G` prompt arguments to perform those
+actions.
+
+## CodeFormer Support
+
+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)
+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.
+
+### Usage:
+
+The following command will perform face restoration with CodeFormer instead of
+the default gfpgan.
+
+`<prompt> -G 0.8 -ft codeformer`
+
+### Other Options:
+
+- `-cf` - cf or CodeFormer Fidelity takes values between `0` and `1`. 0 produces
+  high quality results but low accuracy and 1 produces lower quality results but
+  higher accuacy to your original face.
+
+The following command will perform face restoration with CodeFormer. CodeFormer
+will output a result that is closely matching to the input face.
+
+`<prompt> -G 1.0 -ft codeformer -cf 0.9`
+
+The following command will perform face restoration with CodeFormer. CodeFormer
+will output a result that is the best restoration possible. This may deviate
+slightly from the original face. This is an excellent option to use in
+situations when there is very little facial data to work with.
+
+`<prompt> -G 1.0 -ft codeformer -cf 0.1`
+
+## Fixing Previously-Generated Images
+
+It is easy to apply face restoration and/or upscaling to any
+previously-generated file. Just use the syntax
+`!fix path/to/file.png <options>`. For example, to apply GFPGAN at strength 0.8
+and upscale 2X for a file named `./outputs/img-samples/000044.2945021133.png`,
+just run:
+
+```
+dream> !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
+directory. Note that the `!fix` command does not replace the original file,
+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
+`--no_upscale` options, respectively.

docs/features/VARIATIONS.md

@@ -2,6 +2,10 @@
 title: Variations
 ---
 
+# :material-tune-variant: Variations
+
+## Intro
+
 Release 1.13 of SD-Dream adds support for image variations.
 
 You are able to do the following:
@@ -29,7 +33,7 @@ This will be indicated as `prompt` in the examples below.
 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
 ...
 Outputs:
@@ -41,8 +45,6 @@ Outputs:
 ./outputs/Xena/000001.3357757885.png: "prompt" -s50 -W512 -H512 -C7.5 -Ak_lms -S3357757885
 ```
 
-The one with seed 3357757885 looks nice:
-
 ![var1](../assets/variation_walkthru/000001.3357757885.png)
 
 ---
@@ -75,7 +77,7 @@ used to generate it.
 This gives us a series of closely-related variations, including the two shown
 here.
 
-![var2](../assets/variation_walkthru/000002.3647897225.png) 
+![var2](../assets/variation_walkthru/000002.3647897225.png)
 
 ![var3](../assets/variation_walkthru/000002.1614299449.png)
 
@@ -83,7 +85,7 @@ I like the expression on Xena's face in the first one (subseed 3647897225), and
 the armor on her shoulder in the second one (subseed 1614299449). Can we combine
 them to get the best of both worlds?
 
-We combine the two variations using `-V` (--with_variations). Again, we must
+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
@@ -102,6 +104,7 @@ generate more variations around the almost-but-not-quite image. We do the
 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
 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

docs/features/WEB.md

@@ -2,8 +2,10 @@
 title: Barebones 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**`
+screenshot). To use it, run the `dream.py` script by adding the `--web`
 option.
 
 ```bash

docs/help/SAMPLER_CONVERGENCE.md

@@ -0,0 +1,141 @@
+---
+title: SAMPLER CONVERGENCE
+---
+
+## *Sampler Convergence*
+
+As features keep increasing, making the right choices for your needs can become increasingly difficult. What sampler to use? And for how many steps? Do you change the CFG value? Do you use prompt weighting? Do you allow variations?
+
+Even once you have a result, do you blend it with other images? Pass it through `img2img`? With what strength? Do you use inpainting to correct small details? Outpainting to extend cropped sections?
+
+The purpose of this series of documents is to help you better understand these tools, so you can make the best out of them. Feel free to contribute with your own findings!
+
+In this document, we will talk about sampler convergence.
+
+Looking for a short version? Here's a TL;DR in 3 tables.
+
+| Remember  |
+|:---|
+| Results converge as steps (`-s`) are increased (except for `K_DPM_2_A` and `K_EULER_A`). Often at ≥ `-s100`, but may require ≥ `-s700`).  |
+| Producing a batch of candidate images at low (`-s8` to `-s30`) step counts can save you hours of computation.  |
+| `K_HEUN` and `K_DPM_2`  converge in less steps (but are slower).  |
+| `K_DPM_2_A` and `K_EULER_A` incorporate a lot of creativity/variability. |
+
+| Sampler   | (3 sample avg) it/s (M1 Max 64GB, 512x512)  |
+|---|---|
+|  `DDIM` | 1.89  |
+|  `PLMS` | 1.86  |
+|  `K_EULER` | 1.86  |
+|  `K_LMS` | 1.91  |
+|  `K_HEUN` | 0.95 (slower)  |
+|  `K_DPM_2` | 0.95 (slower)  |
+|  `K_DPM_2_A` | 0.95 (slower)  |
+|  `K_EULER_A` | 1.86  |
+
+| Suggestions  |
+|:---|
+| For most use cases, `K_LMS`, `K_HEUN` and `K_DPM_2` are the best choices (the latter 2 run 0.5x as quick, but tend to converge 2x as quick as `K_LMS`). At very low steps (≤ `-s8`), `K_HEUN` and `K_DPM_2` are not recommended. Use `K_LMS` instead.|
+| For variability, use `K_EULER_A` (runs 2x as quick as `K_DPM_2_A`).  |
+
+---
+
+### *Sampler results*
+
+Let's start by choosing a prompt and using it with each of our 8 samplers, running it for 10, 20, 30, 40, 50 and 100 steps.
+
+Anime. `"an anime girl" -W512 -H512 -C7.5 -S3031912972`
+
+![191636411-083c8282-6ed1-4f78-9273-ee87c0a0f1b6-min (1)](https://user-images.githubusercontent.com/50542132/191868725-7f7af991-e254-4c1f-83e7-bed8c9b2d34f.png)
+
+### *Sampler convergence*
+
+Immediately, you can notice results tend to converge -that is, as `-s` (step) values increase, images look more and more similar until there comes a point where the image no longer changes.
+
+You can also notice how `DDIM` and `PLMS` eventually tend to converge to K-sampler results as steps are increased.
+Among K-samplers, `K_HEUN` and `K_DPM_2` seem to require the fewest steps to converge, and even at low step counts they are good indicators of the final result. And finally, `K_DPM_2_A` and `K_EULER_A` seem to do a bit of their own thing and don't keep much similarity with the rest of the samplers.
+
+### *Batch generation speedup*
+
+This realization is very useful because it means you don't need to create a batch of 100 images (`-n100`) at `-s100` to choose your favorite 2 or 3 images.
+You can produce the same 100 images at `-s10` to `-s30` using a K-sampler (since they converge faster), get a rough idea of the final result, choose your 2 or 3 favorite ones, and then run `-s100` on those images to polish some details.
+The latter technique is 3-8x as quick.
+
+Example:
+
+At 60s per 100 steps.
+
+(Option A) 60s * 100 images = 6000s (100 images at `-s100`, manually picking 3 favorites)
+
+(Option B) 6s * 100 images + 60s * 3 images = 780s (100 images at `-s10`, manually picking 3 favorites, and running those 3 at `-s100` to polish details)
+
+The result is 1 hour and 40 minutes (Option A) vs 13 minutes (Option B).
+
+### *Topic convergance*
+
+Now, these results seem interesting, but do they hold for other topics? How about nature? Food? People? Animals? Let's try!
+
+Nature. `"valley landscape wallpaper, d&d art, fantasy, painted, 4k, high detail, sharp focus, washed colors, elaborate excellent painted illustration" -W512 -H512 -C7.5 -S1458228930`
+
+![191736091-dda76929-00d1-4590-bef4-7314ea4ea419-min (1)](https://user-images.githubusercontent.com/50542132/191868763-b151c69e-0a72-4cf1-a151-5a64edd0c93e.png)
+
+With nature, you can see how initial results are even more indicative of final result -more so than with characters/people. `K_HEUN` and `K_DPM_2` are again the quickest indicators, almost right from the start. Results also converge faster (e.g. `K_HEUN` converged at `-s21`).
+
+Food. `"a hamburger with a bowl of french fries" -W512 -H512 -C7.5 -S4053222918`
+
+![191639011-f81d9d38-0a15-45f0-9442-a5e8d5c25f1f-min (1)](https://user-images.githubusercontent.com/50542132/191868898-98801a62-885f-4ea1-aee8-563503522aa9.png)
+
+Again, `K_HEUN` and `K_DPM_2` take the fewest number of steps to be good indicators of the final result. `K_DPM_2_A` and `K_EULER_A` seem to incorporate a lot of creativity/variability, capable of producing rotten hamburgers, but also of adding lettuce to the mix. And they're the only samplers that produced an actual 'bowl of fries'!
+
+Animals. `"grown tiger, full body" -W512 -H512 -C7.5 -S3721629802`
+
+![191771922-6029a4f5-f707-4684-9011-c6f96e25fe56-min (1)](https://user-images.githubusercontent.com/50542132/191868870-9e3b7d82-b909-429f-893a-13f6ec343454.png)
+
+`K_HEUN` and `K_DPM_2` once again require the least number of steps to be indicative of the final result (around `-s30`), while other samplers are still struggling with several tails or malformed back legs.
+
+It also takes longer to converge (for comparison, `K_HEUN` required around 150 steps to converge). This is normal, as producing human/animal faces/bodies is one of the things the model struggles the most with. For these topics, running for more steps will often increase coherence within the composition.
+
+People. `"Ultra realistic photo, (Miranda Bloom-Kerr), young, stunning model, blue eyes, blond hair, beautiful face, intricate, highly detailed, smooth, art by artgerm and greg rutkowski and alphonse mucha, stained glass" -W512 -H512 -C7.5 -S2131956332`. This time, we will go up to 300 steps.
+
+![Screenshot 2022-09-23 at 02 05 48-min (1)](https://user-images.githubusercontent.com/50542132/191871743-6802f199-0ffd-4986-98c5-df2d8db30d18.png)
+
+Observing the results, it again takes longer for all samplers to converge (`K_HEUN` took around 150 steps), but we can observe good indicative results much earlier (see: `K_HEUN`). Conversely, `DDIM` and `PLMS` are still undergoing moderate changes (see: lace around her neck), even at `-s300`.
+
+In fact, as we can see in this other experiment, some samplers can take 700+ steps to converge when generating people.
+
+![191988191-c586b75a-2d7f-4351-b705-83cc1149881a-min (1)](https://user-images.githubusercontent.com/50542132/191992123-7e0759d6-6220-42c4-a961-88c7071c5ee6.png)
+
+Note also the point of convergence may not be the most desirable state (e.g. I prefer an earlier version of the face, more rounded), but it will probably be the most coherent arms/hands/face attributes-wise. You can always merge different images with a photo editing tool and pass it through `img2img` to smoothen the composition.
+
+### *Sampler generation times*
+
+Once we understand the concept of sampler convergence, we must look into the performance of each sampler in terms of steps (iterations) per second, as not all samplers run at the same speed.
+
+On my M1 Max with 64GB of RAM, for a 512x512 image:
+| Sampler   | (3 sample average) it/s |
+|---|---|
+|  `DDIM` | 1.89  |
+|  `PLMS` | 1.86  |
+|  `K_EULER` | 1.86  |
+|  `K_LMS` | 1.91  |
+|  `K_HEUN` | 0.95 (slower)  |
+|  `K_DPM_2` | 0.95 (slower)  |
+|  `K_DPM_2_A` | 0.95 (slower)  |
+|  `K_EULER_A` | 1.86  |
+
+Combining our results with the steps per second of each sampler, three choices come out on top: `K_LMS`, `K_HEUN` and `K_DPM_2` (where the latter two run 0.5x as quick but tend to converge 2x as quick as `K_LMS`). For creativity and a lot of variation between iterations, `K_EULER_A` can be a good choice (which runs 2x as quick as `K_DPM_2_A`).
+
+Additionally, image generation at very low steps (≤ `-s8`) is not recommended for `K_HEUN` and `K_DPM_2`. Use `K_LMS` instead.
+
+<img width="397" alt="192044949-67d5d441-a0d5-4d5a-be30-5dda4fc28a00-min" src="https://user-images.githubusercontent.com/50542132/192046823-2714cb29-bbf3-4eb1-9213-e27a0963905c.png">
+
+### *Three key points*
+
+Finally, it is relevant to mention that, in general, there are 3 important moments in the process of image formation as steps increase:
+
+* The (earliest) point at which an image becomes a good indicator of the final result (useful for batch generation at low step values, to then improve the quality/coherence of the chosen images via running the same prompt and seed for more steps).
+
+* The (earliest) point at which an image becomes coherent, even if different from the result if steps are increased (useful for batch generation at low step values, where quality/coherence is improved via techniques other than increasing the steps -e.g. via inpainting).
+
+* The point at which an image fully converges.
+
+Hence, remember that your workflow/strategy should define your optimal number of steps, even for the same prompt and seed (for example, if you seek full convergence, you may run `K_LMS` for `-s200` in the case of the red-haired girl, but `K_LMS` and `-s20`-taking one tenth the time- may do as well if your workflow includes adding small details, such as the missing shoulder strap, via `img2img`).

docs/help/TROUBLESHOOT.md

@@ -2,6 +2,8 @@
 title: F.A.Q.
 ---
 
+# :material-frequently-asked-questions: F.A.Q.
+
 ## **Frequently-Asked-Questions**
 
 Here are a few common installation problems and their solutions. Often these are caused by
@@ -15,10 +17,25 @@ During `conda env create -f environment.yaml`, conda hangs indefinitely.
 
 ### **SOLUTION**
 
-Enter the stable-diffusion directory and completely remove the `src` directory and all its contents.
-The safest way to do this is to enter the stable-diffusion directory and give the command
-`git clean -f`. If this still doesn't fix the problem, try "conda clean -all" and then restart at
-the `conda env create` step.
+Conda sometimes gets stuck  at the last PIP step, in which several git repositories are
+cloned and built.
+
+Enter the stable-diffusion directory and completely remove the `src`
+directory and all its contents.  The safest way to do this is to enter
+the stable-diffusion directory and give the command `git clean -f`. If
+this still doesn't fix the problem, try "conda clean -all" and then
+restart at the `conda env create` step.
+
+To further understand the problem to checking the install lot using this method:
+
+```bash
+export PIP_LOG="/tmp/pip_log.txt"
+touch ${PIP_LOG}
+tail -f ${PIP_LOG} & 
+conda env create -f environment-mac.yaml --debug --verbose
+killall tail
+rm ${PIP_LOG}
+```
 
 ---
 

docs/index.md

@@ -1,102 +1,106 @@
 ---
 title: Home
+template: main.html
 ---
 
 <!--
-  The Docs you find here (/docs/*) are built and deployed via mkdocs. If you want to do so from local it is pretty strait forward:
+  The Docs you find here (/docs/*) are built and deployed via mkdocs. If you want to run a local version to verify your changes, it's as simple as::
 
   ```bash
   pip install -r requirements-mkdocs.txt
-  mkdocs serve -a localhost:8080
+  mkdocs serve
   ```
 -->
+<div align="center" markdown>
 
-<h1 align='center'><b>Stable Diffusion Dream Script</b></h1>
+# :material-script-text-outline: Stable Diffusion Dream Script
 
-<p align='center'>
-<img src="./assets/logo.png"/>
-</p>
+![project logo](assets/logo.png)
 
-<p align="center">
-    <img src="https://img.shields.io/github/last-commit/lstein/stable-diffusion?logo=Python&logoColor=green&style=for-the-badge" alt="last-commit"/>
-    <img src="https://img.shields.io/github/stars/lstein/stable-diffusion?logo=GitHub&style=for-the-badge" alt="stars"/>
-    <br>
-    <img src="https://img.shields.io/github/issues/lstein/stable-diffusion?logo=GitHub&style=for-the-badge" alt="issues"/>
-    <img src="https://img.shields.io/github/issues-pr/lstein/stable-diffusion?logo=GitHub&style=for-the-badge" alt="pull-requests"/>
-</p>
+[![discord badge]][discord link]
+
+[![latest release badge]][latest release link] [![github stars badge]][github stars link] [![github forks badge]][github forks link]
+
+[![CI checks on main badge]][CI checks on main link] [![CI checks on dev badge]][CI checks on dev link] [![latest commit to dev badge]][latest commit to dev link]
+
+[![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
+[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 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
+
+</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.
 
-_Note: This fork is rapidly evolving. Please use the
-[Issues](https://github.com/lstein/stable-diffusion/issues) tab to report bugs and make feature
-requests. Be sure to use the provided templates. They will help aid diagnose issues faster._
+!!! note
 
-## Installation
+    This fork is rapidly evolving. Please use the
+    [Issues](https://github.com/lstein/stable-diffusion/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
 
 This fork is supported across multiple platforms. You can find individual installation instructions
 below.
 
-- [Linux](installation/INSTALL_LINUX.md)
-- [Windows](installation/INSTALL_WINDOWS.md)
-- [Macintosh](installation/INSTALL_MAC.md)
+- :fontawesome-brands-linux: [Linux](installation/INSTALL_LINUX.md)
+- :fontawesome-brands-windows: [Windows](installation/INSTALL_WINDOWS.md)
+- :fontawesome-brands-apple: [Macintosh](installation/INSTALL_MAC.md)
 
-## Hardware Requirements
+## :fontawesome-solid-computer: Hardware Requirements
 
-### System
+### :octicons-cpu-24: System
 
 You wil need one of the following:
 
-- An NVIDIA-based graphics card with 4 GB or more VRAM memory.
-- An Apple computer with an M1 chip.
+- :simple-nvidia: An NVIDIA-based graphics card with 4 GB or more VRAM memory.
+- :fontawesome-brands-apple: An Apple computer with an M1 chip.
 
-### Memory
+### :fontawesome-solid-memory: Memory
 
 - At least 12 GB Main Memory RAM.
 
-### Disk
+### :fontawesome-regular-hard-drive: Disk
 
 - At least 6 GB of free disk space for the machine learning model, Python, and all its dependencies.
 
-### Note
+!!! note
 
-If you are have a Nvidia 10xx series card (e.g. the 1080ti), please run the dream script in
-full-precision mode as shown below.
+    If you are 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.
+    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 `dream.py` with the `--full_precision` flag:
 
-```bash
-(ldm) ~/stable-diffusion$ python scripts/dream.py --full_precision
-```
+    ```bash
+    (ldm) ~/stable-diffusion$ python scripts/dream.py --full_precision
+    ```
+## :octicons-log-16: Latest Changes
 
-## Features
+### vNEXT <small>(TODO 2022)</small>
 
-### Major Features
-
-- [Interactive Command Line Interface](features/CLI.md)
-- [Image To Image](features/IMG2IMG.md)
-- [Inpainting Support](features/INPAINTING.md)
-- [GFPGAN and Real-ESRGAN Support](features/UPSCALE.md)
-- [Seamless Tiling](features/OTHER.md#seamless-tiling)
-- [Google Colab](features/OTHER.md#google-colab)
-- [Web Server](features/WEB.md)
-- [Reading Prompts From File](features/OTHER.md#reading-prompts-from-a-file)
-- [Shortcut: Reusing Seeds](features/OTHER.md#shortcuts-reusing-seeds)
-- [Weighted Prompts](features/OTHER.md#weighted-prompts)
-- [Variations](features/VARIATIONS.md)
-- [Personalizing Text-to-Image Generation](features/TEXTUAL_INVERSION.md)
-- [Simplified API for text to image generation](features/OTHER.md#simplified-api)
-
-### Other Features
-
-- [Creating Transparent Regions for Inpainting](features/INPAINTING.md#creating-transparent-regions-for-inpainting)
-- [Preload Models](features/OTHER.md#preload-models)
-
-## Latest Changes
+  - Deprecated `--full_precision` / `-F`. Simply omit it and `dream.py` will auto
+    configure. To switch away from auto use the new flag like `--precision=float32`.
 
 ### v1.14 <small>(11 September 2022)</small>
 
@@ -127,12 +131,12 @@ To run in full-precision mode, start `dream.py` with the `--full_precision` flag
 
 For older changelogs, please visit the **[CHANGELOG](features/CHANGELOG.md)**.
 
-## Troubleshooting
+## :material-target: Troubleshooting
 
-Please check out our **[Q&A](help/TROUBLESHOOT.md)** to get solutions for common installation
+Please check out our **[:material-frequently-asked-questions: Q&A](help/TROUBLESHOOT.md)** to get solutions for common installation
 problems and other issues.
 
-## Contributing
+## :octicons-repo-push-24: Contributing
 
 Anyone who wishes to contribute to this project, whether documentation, features, bug fixes, code
 cleanup, testing, or code reviews, is very much encouraged to do so. If you are unfamiliar with how
@@ -144,13 +148,13 @@ important thing is to **make your pull request against the "development" branch*
 "main". This will help keep public breakage to a minimum and will allow you to propose more radical
 changes.
 
-## Contributors
+## :octicons-person-24: Contributors
 
 This fork is a combined effort of various people from across the world.
 [Check out the list of all these amazing people](other/CONTRIBUTORS.md). We thank them for their
 time, hard work and effort.
 
-## Support
+## :octicons-question-24: Support
 
 For support, please use this repository's GitHub Issues tracking service. Feel free to send me an
 email if you use and like the script.
@@ -158,7 +162,7 @@ email if you use and like the script.
 Original portions of the software are Copyright (c) 2020
 [Lincoln D. Stein](https://github.com/lstein)
 
-## Further Reading
+## :octicons-book-24: Further Reading
 
 Please see the original README for more information on this software and underlying algorithm,
 located in the file [README-CompViz.md](other/README-CompViz.md).

docs/installation/INSTALL_DOCKER.md

@@ -0,0 +1,255 @@
+# Before you begin
+
+- For end users: Install Stable Diffusion locally using the instructions for
+  your OS.
+- For developers: For container-related development tasks or for enabling easy
+  deployment to other environments (on-premises or cloud), follow these
+  instructions. For general use, install locally to leverage your machine's GPU.
+
+# Why containers?
+
+They provide a flexible, reliable way to build and deploy Stable Diffusion.
+You'll also use a Docker volume to store the largest model files and image
+outputs as a first step in decoupling storage and compute. Future enhancements
+can do this for other assets. See [Processes](https://12factor.net/processes)
+under the Twelve-Factor App methodology for details on why running applications
+in such a stateless fashion is important.
+
+You can specify the target platform when building the image and running the
+container. You'll also need to specify the Stable Diffusion requirements file
+that matches the container's OS and the architecture it will run on.
+
+Developers on Apple silicon (M1/M2): You
+[can't access your GPU cores from Docker containers](https://github.com/pytorch/pytorch/issues/81224)
+and performance is reduced compared with running it directly on macOS but for
+development purposes it's fine. Once you're done with development tasks on your
+laptop you can build for the target platform and architecture and deploy to
+another environment with NVIDIA GPUs on-premises or in the cloud.
+
+# Installation on a Linux container
+
+## Prerequisites
+
+### Get the data files
+
+Go to
+[Hugging Face](https://huggingface.co/CompVis/stable-diffusion-v-1-4-original),
+and click "Access repository" to Download the model file `sd-v1-4.ckpt` (~4 GB)
+to `~/Downloads`. You'll need to create an account but it's quick and free.
+
+Also download the face restoration model.
+
+```Shell
+cd ~/Downloads
+wget https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.4.pth
+```
+
+### Install [Docker](https://github.com/santisbon/guides#docker)
+
+On the Docker Desktop app, go to Preferences, Resources, Advanced. Increase the
+CPUs and Memory to avoid this
+[Issue](https://github.com/invoke-ai/InvokeAI/issues/342). You may need to
+increase Swap and Disk image size too.
+
+## Setup
+
+Set the fork you want to use and other variables.
+
+```Shell
+TAG_STABLE_DIFFUSION="santisbon/stable-diffusion"
+PLATFORM="linux/arm64"
+GITHUB_STABLE_DIFFUSION="-b orig-gfpgan https://github.com/santisbon/stable-diffusion.git"
+REQS_STABLE_DIFFUSION="requirements-linux-arm64.txt"
+CONDA_SUBDIR="osx-arm64"
+
+echo $TAG_STABLE_DIFFUSION
+echo $PLATFORM
+echo $GITHUB_STABLE_DIFFUSION
+echo $REQS_STABLE_DIFFUSION
+echo $CONDA_SUBDIR
+```
+
+Create a Docker volume for the downloaded model files.
+
+```Shell
+docker volume create my-vol
+```
+
+Copy the data files to the Docker volume using a lightweight Linux container.
+We'll need the models at run time. You just need to create the container with
+the mountpoint; no need to run this dummy container.
+
+```Shell
+cd ~/Downloads # or wherever you saved the files
+
+docker create --platform $PLATFORM --name dummy --mount source=my-vol,target=/data alpine
+
+docker cp sd-v1-4.ckpt dummy:/data
+docker cp GFPGANv1.4.pth dummy:/data
+```
+
+Get the repo and download the Miniconda installer (we'll need it at build time).
+Replace the URL with the version matching your container OS and the architecture
+it will run on.
+
+```Shell
+cd ~
+git clone $GITHUB_STABLE_DIFFUSION
+
+cd stable-diffusion/docker-build
+chmod +x entrypoint.sh
+wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-aarch64.sh -O anaconda.sh && chmod +x anaconda.sh
+```
+
+Build the Docker image. Give it any tag `-t` that you want.  
+Choose the Linux container's host platform: x86-64/Intel is `amd64`. Apple
+silicon is `arm64`. If deploying the container to the cloud to leverage powerful
+GPU instances you'll be on amd64 hardware but if you're just trying this out
+locally on Apple silicon choose arm64.  
+The application uses libraries that need to match the host environment so use
+the appropriate requirements file.  
+Tip: Check that your shell session has the env variables set above.
+
+```Shell
+docker build -t $TAG_STABLE_DIFFUSION \
+--platform $PLATFORM \
+--build-arg gsd=$GITHUB_STABLE_DIFFUSION \
+--build-arg rsd=$REQS_STABLE_DIFFUSION \
+--build-arg cs=$CONDA_SUBDIR \
+.
+```
+
+Run a container using your built image.  
+Tip: Make sure you've created and populated the Docker volume (above).
+
+```Shell
+docker run -it \
+--rm \
+--platform $PLATFORM \
+--name stable-diffusion \
+--hostname stable-diffusion \
+--mount source=my-vol,target=/data \
+$TAG_STABLE_DIFFUSION
+```
+
+# Usage (time to have fun)
+
+## Startup
+
+If you're on a **Linux container** the `dream` 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**.  
+With the Conda environment activated (`conda activate ldm`), run the interactive
+interface that combines the functionality of the original scripts `txt2img` and
+`img2img`:  
+Use the more accurate but VRAM-intensive full precision math because
+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
+```
+
+You'll get the script's prompt. You can see available options or quit.
+
+```Shell
+dream> -h
+dream> q
+```
+
+## Text to Image
+
+For quick (but bad) image results test with 5 steps (default 50) and 1 sample
+image. This will let you know that everything is set up correctly.  
+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
+# Reuse previous seed and apply face restoration
+dream> "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
+worse for your specific prompt.
+
+If you're on a container the output is set to the Docker volume. You can copy it
+wherever you want.  
+You can download it from the Docker Desktop app, Volumes, my-vol, data.  
+Or you can copy it from your Mac terminal. Keep in mind `docker cp` can't expand
+`*.png` so you'll need to specify the image file name.
+
+On your host Mac (you can use the name of any container that mounted the
+volume):
+
+```Shell
+docker cp dummy:/data/000001.928403745.png /Users/<your-user>/Pictures
+```
+
+## Image to Image
+
+You can also do text-guided image-to-image translation. For example, turning a
+sketch into a detailed drawing.
+
+`strength` is a value between 0.0 and 1.0 that controls the amount of noise that
+is added to the input image. Values that approach 1.0 allow for lots of
+variations but will also produce images that are not semantically consistent
+with the input. 0.0 preserves image exactly, 1.0 replaces it completely.
+
+Make sure your input image size dimensions are multiples of 64 e.g. 512x512.
+Otherwise you'll get `Error: product of dimension sizes > 2**31'`. If you still
+get the error
+[try a different size](https://support.apple.com/guide/preview/resize-rotate-or-flip-an-image-prvw2015/mac#:~:text=image's%20file%20size-,In%20the%20Preview%20app%20on%20your%20Mac%2C%20open%20the%20file,is%20shown%20at%20the%20bottom.)
+like 512x256.
+
+If you're on a Docker container, copy your input image into the Docker volume
+
+```Shell
+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
+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
+```
+
+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
+```
+
+## Web Interface
+
+You can use the `dream` script with a graphical web interface. Start the web
+server with:
+
+```Shell
+python3 scripts/dream.py --full_precision --web
+```
+
+If it's running on your Mac point your Mac web browser to http://127.0.0.1:9090
+
+Press Control-C at the command line to stop the web server.
+
+## Notes
+
+Some text you can add at the end of the prompt to make it very pretty:
+
+```Shell
+cinematic photo, highly detailed, cinematic lighting, ultra-detailed, ultrarealistic, photorealism, Octane Rendering, cyberpunk lights, Hyper Detail, 8K, HD, Unreal Engine, V-Ray, full hd, cyberpunk, abstract, 3d octane render + 4k UHD + immense detail + dramatic lighting + well lit + black, purple, blue, pink, cerulean, teal, metallic colours, + fine details, ultra photoreal, photographic, concept art, cinematic composition, rule of thirds, mysterious, eerie, photorealism, breathtaking detailed, painting art deco pattern, by hsiao, ron cheng, john james audubon, bizarre compositions, exquisite detail, extremely moody lighting, painted by greg rutkowski makoto shinkai takashi takeuchi studio ghibli, akihiko yoshida
+```
+
+The original scripts should work as well.
+
+```Shell
+python3 scripts/orig_scripts/txt2img.py --help
+python3 scripts/orig_scripts/txt2img.py --ddim_steps 100 --n_iter 1 --n_samples 1  --plms --prompt "new born baby kitten. Hyper Detail, Octane Rendering, Unreal Engine, V-Ray"
+python3 scripts/orig_scripts/txt2img.py --ddim_steps 5   --n_iter 1 --n_samples 1  --plms --prompt "ocean" # or --klms
+```

docs/installation/INSTALL_LINUX.md

@@ -2,6 +2,10 @@
 title: Linux
 ---
 
+# :fontawesome-brands-linux: Linux
+
+## Installation
+
 1. You will need to install the following prerequisites if they are not already
    available. Use your operating system's preferred installer.
 
@@ -20,44 +24,46 @@ title: Linux
     the installation worked, your command prompt will be prefixed by the name of the
     current anaconda environment - `(base)`.
 
-3. Copy the stable-diffusion source code from GitHub:
+3. Copy the InvokeAI source code from GitHub:
 
-    ```bash
-    (base) ~$ git clone https://github.com/lstein/stable-diffusion.git
-    ```
+```
+(base) ~$ git clone https://github.com/invoke-ai/InvokeAI.git
+```
 
-    This will create stable-diffusion folder where you will follow the rest of the
-    steps.
+This will create InvokeAI folder where you will follow the rest of the steps.
 
-4. Enter the newly-created stable-diffusion folder. From this step forward make
-   sure that you are working in the stable-diffusion directory!
+4. Enter the newly-created InvokeAI folder. From this step forward make sure that you are working in the InvokeAI directory!
 
-    ```bash
-    (base) ~$ cd stable-diffusion
-    (base) ~/stable-diffusion$
-    ```
+```
+(base) ~$ cd InvokeAI
+(base) ~/InvokeAI$
+```
 
 5. Use anaconda to copy necessary python packages, create a new python
    environment named `ldm` and activate the environment.
 
-    ```bash
-    (base) ~/stable-diffusion$ conda env create -f environment.yaml
-    (base) ~/stable-diffusion$ conda activate ldm
-    (ldm) ~/stable-diffusion$
-    ```
+
+```
+(base) ~/InvokeAI$ conda env create -f environment.yaml
+(base) ~/InvokeAI$ conda activate ldm
+(ldm) ~/InvokeAI$
+```
 
     After these steps, your command prompt will be prefixed by `(ldm)` as shown
     above.
 
 6. Load a couple of small machine-learning models required by stable diffusion:
 
-    ```bash
-    (ldm) ~/stable-diffusion$ python3 scripts/preload_models.py
-    ```
 
-    Note that this step is necessary because I modified the original just-in-time
-    model loading scheme to allow the script to work on GPU machines that are not
-    internet connected. See [Preload Models](../features/OTHER.md#preload-models)
+```
+(ldm) ~/InvokeAI$ python3 scripts/preload_models.py
+```
+
+    !!! note
+
+        This step is necessary because I modified the original just-in-time
+        model loading scheme to allow the script to work on GPU machines that are not
+        internet connected. See [Preload Models](../features/OTHER.md#preload-models)
 
 7. Now you need to install the weights for the stable diffusion model.
 
@@ -73,38 +79,34 @@ title: Linux
       This will create a symbolic link from the stable-diffusion model.ckpt file, to
       the true location of the `sd-v1-4.ckpt` file.
 
-    ```bash
-    (ldm) ~/stable-diffusion$ mkdir -p models/ldm/stable-diffusion-v1
-    (ldm) ~/stable-diffusion$ ln -sf /path/to/sd-v1-4.ckpt models/ldm/stable-diffusion-v1/model.ckpt
-    ```
+
+```
+(ldm) ~/InvokeAI$ mkdir -p models/ldm/stable-diffusion-v1
+(ldm) ~/InvokeAI$ ln -sf /path/to/sd-v1-4.ckpt models/ldm/stable-diffusion-v1/model.ckpt
+```
 
 8. Start generating images!
 
-    ```bash
-    # for the pre-release weights use the -l or --liaon400m switch
-    (ldm) ~/stable-diffusion$ python3 scripts/dream.py -l
+```
+# for the pre-release weights use the -l or --liaon400m switch
+(ldm) ~/InvokeAI$ python3 scripts/dream.py -l
 
-    # for the post-release weights do not use the switch
-    (ldm) ~/stable-diffusion$ python3 scripts/dream.py
+# for the post-release weights do not use the switch
+(ldm) ~/InvokeAI$ python3 scripts/dream.py
 
-    # for additional configuration switches and arguments, use -h or --help
-    (ldm) ~/stable-diffusion$ python3 scripts/dream.py -h
-    ```
+# for additional configuration switches and arguments, use -h or --help
+(ldm) ~/InvokeAI$ python3 scripts/dream.py -h
+```
 
-9. Subsequently, to relaunch the script, be sure to run "conda activate ldm"
-   (step 5, second command), enter the `stable-diffusion` 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 dream 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
+## Updating to newer versions of the script
 
-    This distribution is changing rapidly. If you used the `git clone` method
-    (step 5) to download the stable-diffusion directory, then to update to the
-    latest and greatest version, launch the Anaconda window, enter
-    `stable-diffusion` and type:
 
-    ```bash
-    (ldm) ~/stable-diffusion$ git pull
-    ```
+This distribution is changing rapidly. If you used the `git clone` method (step 5) to download the InvokeAI directory, then to update to the latest and greatest version, launch the Anaconda window, enter `InvokeAI` and type:
 
-    This will bring your local copy into sync with the remote one.
+```
+(ldm) ~/InvokeAI$ git pull
+```
+
+This will bring your local copy into sync with the remote one.

docs/installation/INSTALL_MAC.md

@@ -2,6 +2,8 @@
 title: macOS
 ---
 
+# :fontawesome-brands-apple: macOS
+
 ## Requirements
 
 - macOS 12.3 Monterey or later
@@ -9,18 +11,21 @@ title: macOS
 - Patience
 - Apple Silicon or Intel Mac
 
-Things have moved really fast and so these instructions change often and are
-often out-of-date. One of the problems is that there are so many different ways
-to run this.
+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.
 
 We are trying to build a testing setup so that when we make changes it doesn't
 always break.
 
-How to (this hasn't been 100% tested yet):
+## How to
 
-First get the weights checkpoint download started - it's big:
+(this hasn't been 100% tested yet)
 
-1. Sign up at https://huggingface.co
+First get the weights checkpoint download started since it's big and will take
+some time:
+
+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:
@@ -28,114 +33,148 @@ First get the weights checkpoint download started - it's big:
    [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)
 
-   While that is downloading, open Terminal and run the following commands one
-   at a time.
+While that is downloading, open a Terminal and run the following commands:
 
-```bash
-# install brew (and Xcode command line tools):
+!!! todo "Homebrew"
 
-/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+    === "no brew installation yet"
 
-# Now there are two different routes to get the Python (miniconda) environment up and running:
-# 1. Alongside pyenv
-# 2. No pyenv
-#
-# If you don't know what we are talking about, choose 2.
-#
-# NOW EITHER DO
-# 1. Installing alongside pyenv
+        ```bash title="install brew (and Xcode command line tools)"
+        /bin/bash -c \
+          "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+        ```
 
-  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
+    === "brew is already installed"
+    
+        Only if you installed protobuf in a previous version of this tutorial, otherwise skip
 
-# OR,
-# 2. Installing standalone
-# install python 3, git, cmake, protobuf:
-brew install cmake protobuf rust
+        `#!bash brew uninstall protobuf`
 
-# 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
+!!! todo "Conda Installation"
 
-# OR 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
+    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
 
+    === "Standalone"
 
-# EITHER WAY,
-# continue from here
+        ```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
-  git clone https://github.com/lstein/stable-diffusion.git
-  cd stable-diffusion
+git clone https://github.com/invoke-ai/InvokeAI.git
+
+cd InvokeAI
 
-#
 # wait until the checkpoint file has downloaded, then proceed
-#
 
 # create symlink to checkpoint
-  mkdir -p models/ldm/stable-diffusion-v1/
+mkdir -p models/ldm/stable-diffusion-v1/
 
-  PATH_TO_CKPT="$HOME/Downloads"  # or wherever you saved sd-v1-4.ckpt
+PATH_TO_CKPT="$HOME/Downloads" # (1)!
 
-  ln -s "$PATH_TO_CKPT/sd-v1-4.ckpt" models/ldm/stable-diffusion-v1/model.ckpt
+ln -s "$PATH_TO_CKPT/sd-v1-4.ckpt" \
+  models/ldm/stable-diffusion-v1/model.ckpt
+```
 
-# install packages for arm64
-PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-arm64 conda env create -f environment-mac.yaml
-conda activate ldm
+1. or wherever you saved sd-v1-4.ckpt
 
-# OR install packages for x86_64
-PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-x86_64 conda env create -f environment-mac.yaml
-conda activate ldm
+!!! todo "create Conda Environment"
 
+    === "M1 arm64"
+
+        ```bash
+        PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-arm64 \
+          conda env create \
+          -f environment-mac.yaml \
+          && conda activate ldm
+        ```
+
+    === "Intel x86_64"
+
+        ```bash
+        PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-x86_64 \
+          conda env create \
+          -f environment-mac.yaml \
+          && conda activate ldm
+        ```
+
+```{.bash .annotate title="preload models and run script"}
 # only need to do this once
 python scripts/preload_models.py
 
-# run SD!
-python scripts/dream.py --full_precision  # half-precision requires autocast and won't work
+# now you can run SD in CLI mode
+python scripts/dream.py --full_precision  # (1)!
 
 # or run the web interface!
 python scripts/dream.py --web
+
+# The original scripts should work as well.
+python scripts/orig_scripts/txt2img.py \
+  --prompt "a photograph of an astronaut riding a horse" \
+  --plms
 ```
 
-The original scripts should work as well.
+1. half-precision requires autocast which is unfortunatelly incompatible
 
-```bash
-python scripts/orig_scripts/txt2img.py --prompt "a photograph of an astronaut riding a horse" --plms
-```
+!!! note
 
-Note,
+    `#!bash export PIP_EXISTS_ACTION=w` is a precaution to fix a problem where
 
-```bash
-export PIP_EXISTS_ACTION=w
-```
+    ```bash
+    conda env create \
+      -f environment-mac.yaml
+    ```
 
-is a precaution to fix
-
-```bash
-conda env create -f environment-mac.yaml
-```
-
-never finishing in some situations. So it isn't required but wont hurt.
-
-After you follow all the instructions and run dream.py you might get several
-errors. Here's the errors I've seen and found solutions for.
+    did never finish in some situations. So it isn't required but wont hurt.
 
 ---
 
+## Common problems
+
+After you followed all the instructions and try to run dream.py, you might
+get several errors. Here's the errors I've seen and found solutions for.
+
 ### Is it slow?
 
-Be sure to specify 1 sample and 1 iteration.
-
-```bash
+```bash title="Be sure to specify 1 sample and 1 iteration."
 python ./scripts/orig_scripts/txt2img.py \
-      --prompt "ocean" \
-      --ddim_steps 5 \
-      --n_samples 1 \
-      --n_iter 1
+  --prompt "ocean" \
+  --ddim_steps 5 \
+  --n_samples 1 \
+  --n_iter 1
 ```
 
 ---
@@ -148,60 +187,80 @@ 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/lstein/stable-diffusion/issues).
+[create an issue](https://github.com/invoke-ai/InvokeAI/issues).
 
 One debugging step is to update to the latest version of PyTorch nightly.
 
 ```bash
-conda install pytorch torchvision torchaudio -c pytorch-nightly
+conda install \
+  pytorch \
+  torchvision \
+  -c pytorch-nightly \
+  -n ldm
 ```
 
 If it takes forever to run
 
 ```bash
-conda env create -f environment-mac.yaml
+conda env create \
+  -f environment-mac.yaml
 ```
 
-you could try to run `git clean -f` followed by:
+you could try to run:
 
-`conda clean --yes --all`
+```bash
+git clean -f
+conda clean \
+  --yes \
+  --all
+```
 
 Or you could try to completley reset Anaconda:
 
 ```bash
-conda update --force-reinstall -y -n base -c defaults conda
+conda update \
+  --force-reinstall \
+  -y \
+  -n base \
+  -c defaults conda
 ```
 
 ---
 
 ### "No module named cv2", torch, 'ldm', 'transformers', 'taming', etc
 
-There are several causes of these errors.
+There are several causes of these errors:
 
-- First, did you remember to `conda activate ldm`? If your terminal prompt
-  begins with "(ldm)" then you activated it. If it begins with "(base)" or
-  something else you haven't.
+1. Did you remember to `conda activate ldm`? If your terminal prompt begins with
+   "(ldm)" then you activated it. If it begins with "(base)" or something else
+   you haven't.
 
-- Second, you might've run `./scripts/preload_models.py` or `./scripts/dream.py`
-  instead of `python ./scripts/preload_models.py` or
-  `python ./scripts/dream.py`. The cause of this error is long so it's below.
+2. You might've run `./scripts/preload_models.py` or `./scripts/dream.py`
+   instead of `python ./scripts/preload_models.py` or
+   `python ./scripts/dream.py`. The cause of this error is long so it's below.
 
-- Third, if it says you're missing taming you need to rebuild your virtual
-  environment.
+    <!-- I could not find out where the error is, otherwise would have marked it as a footnote -->
 
-````bash
-conda deactivate
+3. if it says you're missing taming you need to rebuild your virtual
+   environment.
 
-conda env remove -n ldm
-PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-arm64 conda env create -f environment-mac.yaml
-```
+    ```bash
+    conda deactivate
+    conda env remove -n ldm
+    PIP_EXISTS_ACTION=w CONDA_SUBDIR=osx-arm64 \
+      conda env create \
+      -f environment-mac.yaml
+    ```
 
-Fourth, If you have activated the ldm virtual environment and tried rebuilding
-it, maybe the problem could be that I have something installed that you don't
-and you'll just need to manually install it. Make sure you activate the virtual
-environment so it installs there instead of globally.
+4. If you have activated the ldm virtual environment and tried rebuilding it,
+   maybe the problem could be that I have something installed that you don't and
+   you'll just need to manually install it. Make sure you activate the virtual
+   environment so it installs there instead of globally.
 
-`conda activate ldm pip install _name_`
+    ```bash
+    conda activate ldm
+    pip install <package name>
+    ```
 
 You might also need to install Rust (I mention this again below).
 
@@ -261,21 +320,20 @@ output of `python3 -V` and `python -V`.
 /Users/name/miniforge3/envs/ldm/bin/python
 ```
 
-The above is what you'll see if you have miniforge and you've correctly
-activated the ldm environment, and you used option 2 in the setup instructions
-above ("no pyenv").
+The above is what you'll see if you have miniforge and correctly activated the
+ldm environment, while usingd the standalone setup instructions above.
+
+If you otherwise installed via pyenv, you will get this result:
 
 ```bash
 (anaconda3-2022.05) % which python
 /Users/name/.pyenv/shims/python
 ```
 
-... and the above is what you'll see if you used option 1 ("Alongside pyenv").
-
 It's all a mess and you should know
 [how to modify the path environment variable](https://support.apple.com/guide/terminal/use-environment-variables-apd382cc5fa-4f58-4449-b20a-41c53c006f8f/mac)
-if you want to fix it. Here's a brief hint of all the ways you can modify it
-(don't really have the time to explain it all here).
+if you want to fix it. Here's a brief hint of the most common ways you can
+modify it (don't really have the time to explain it all here).
 
 - ~/.zshrc
 - ~/.bash_profile
@@ -283,16 +341,21 @@ if you want to fix it. Here's a brief hint of all the ways you can modify it
 - /etc/paths.d
 - /etc/path
 
-Which one you use will depend on what you have installed except putting a file
-in /etc/paths.d is what I prefer to do.
+Which one you use will depend on what you have installed, except putting a file
+in /etc/paths.d - which also is the way I prefer to do.
 
 Finally, to answer the question posed by this section's title, it may help to
 list all of the `python` / `python3` things found in `$PATH` instead of just the
-one that will be executed by default. To do that, add the `-a` switch to
-`which`:
+first hit. To do so, add the `-a` switch to `which`:
 
-    % which -a python3
-    ...
+```bash
+% which -a python3
+...
+```
+
+This will show a list of all binaries which are actually available in your PATH.
+
+---
 
 ### Debugging?
 
@@ -300,37 +363,56 @@ Tired of waiting for your renders to finish before you can see if it works?
 Reduce the steps! The image quality will be horrible but at least you'll get
 quick feedback.
 
-    python ./scripts/txt2img.py --prompt "ocean" --ddim_steps 5 --n_samples 1 --n_iter 1
+```bash
+python ./scripts/txt2img.py \
+  --prompt "ocean" \
+  --ddim_steps 5 \
+  --n_samples 1 \
+  --n_iter 1
+```
 
-### OSError: Can't load tokenizer for 'openai/clip-vit-large-patch14'...
+---
 
-    python scripts/preload_models.py
+### OSError: Can't load tokenizer for 'openai/clip-vit-large-patch14'
+
+```bash
+python scripts/preload_models.py
+```
+
+---
 
 ### "The operator [name] is not current implemented for the MPS device." (sic)
 
-Example error.
+!!! example "example error"
 
-```
+    ```bash
+    ... NotImplementedError: The operator 'aten::_index_put_impl_' is not current
+    implemented for the MPS device. If you want this op to be added in priority
+    during the prototype phase of this feature, please comment on
+    https://github.com/pytorch/pytorch/issues/77764.
+    As a temporary fix, you can set the environment variable
+    `PYTORCH_ENABLE_MPS_FALLBACK=1` to use the CPU as a fallback for this op.
+    WARNING: this will be slower than running natively on MPS.
+    ```
 
-... NotImplementedError: The operator 'aten::_index_put_impl_' is not current
-implemented for the MPS device. If you want this op to be added in priority
-during the prototype phase of this feature, please comment on
-[https://github.com/pytorch/pytorch/issues/77764](https://github.com/pytorch/pytorch/issues/77764).
-As a temporary fix, you can set the environment variable
-`PYTORCH_ENABLE_MPS_FALLBACK=1` to use the CPU as a fallback for this op.
-WARNING: this will be slower than running natively on MPS.
+This fork already includes a fix for this in
+[environment-mac.yaml](https://github.com/invoke-ai/InvokeAI/blob/main/environment-mac.yaml).
 
-```
-
-The lstein branch includes this fix in
-[environment-mac.yaml](https://github.com/lstein/stable-diffusion/blob/main/environment-mac.yaml).
+---
 
 ### "Could not build wheels for tokenizers"
 
 I have not seen this error because I had Rust installed on my computer before I
 started playing with Stable Diffusion. The fix is to install Rust.
 
-    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+```bash
+curl \
+  --proto '=https' \
+  --tlsv1.2 \
+  -sSf https://sh.rustup.rs | sh
+```
+
+---
 
 ### How come `--seed` doesn't work?
 
@@ -347,7 +429,9 @@ still working on it.
 
 ### libiomp5.dylib error?
 
-    OMP: Error #15: Initializing libiomp5.dylib, but found libomp.dylib already initialized.
+```bash
+OMP: Error #15: Initializing libiomp5.dylib, but found libomp.dylib already initialized.
+```
 
 You are likely using an Intel package by mistake. Be sure to run conda with the
 environment variable `CONDA_SUBDIR=osx-arm64`, like so:
@@ -363,6 +447,8 @@ is a metapackage designed to prevent this, by making it impossible to install
 Do _not_ use `os.environ['KMP_DUPLICATE_LIB_OK']='True'` or equivalents as this
 masks the underlying issue of using Intel packages.
 
+---
+
 ### Not enough memory
 
 This seems to be a common problem and is probably the underlying problem for a
@@ -374,6 +460,8 @@ how that would affect the quality of the images though.
 
 See [this issue](https://github.com/CompVis/stable-diffusion/issues/71).
 
+---
+
 ### "Error: product of dimension sizes > 2\*\*31'"
 
 This error happens with img2img, which I haven't played with too much yet. But I
@@ -388,18 +476,22 @@ BTW, 2\*\*31-1 =
 is also 32-bit signed [LONG_MAX](https://en.wikipedia.org/wiki/C_data_types) in
 C.
 
+---
+
 ### I just got Rickrolled! Do I have a virus?
 
 You don't have a virus. It's part of the project. Here's
-[Rick](https://github.com/lstein/stable-diffusion/blob/main/assets/rick.jpeg)
+[Rick](https://github.com/invoke-ai/InvokeAI/blob/main/assets/rick.jpeg)
 and here's
-[the code](https://github.com/lstein/stable-diffusion/blob/69ae4b35e0a0f6ee1af8bb9a5d0016ccb27e36dc/scripts/txt2img.py#L79)
+[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.
 
+---
+
 ### My images come out black
 
 We might have this fixed, we are still testing.
@@ -419,7 +511,7 @@ 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 lstein/stable-diffusion. We were patching
+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.
 
@@ -428,7 +520,10 @@ This is a 32-bit vs 16-bit problem.
 ### The processor must support the Intel bla bla bla
 
 What? Intel? On an Apple Silicon?
-`bash Intel MKL FATAL ERROR: This system does not meet the minimum requirements for use of the Intel(R) Math Kernel Library. The processor must support the Intel(R) Supplemental Streaming SIMD Extensions 3 (Intel(R) SSSE3) instructions. The processor must support the Intel(R) Streaming SIMD Extensions 4.2 (Intel(R) SSE4.2) instructions. The processor must support the Intel(R) Advanced Vector Extensions (Intel(R) AVX) instructions. `
+
+```bash
+Intel MKL FATAL ERROR: This system does not meet the minimum requirements for use of the Intel(R) Math Kernel Library. The processor must support the Intel(R) Supplemental Streaming SIMD Extensions 3 (Intel(R) SSSE3) instructions. The processor must support the Intel(R) Streaming SIMD Extensions 4.2 (Intel(R) SSE4.2) instructions. The processor must support the Intel(R) Advanced Vector Extensions (Intel(R) AVX) instructions.
+```
 
 This is due to the Intel `mkl` package getting picked up when you try to install
 something that depends on it-- Rosetta can translate some Intel instructions but
@@ -453,5 +548,3 @@ Abort trap: 6
   warnings.warn('resource_tracker: There appear to be %d '
 ```
 
-Macs do not support `autocast/mixed-precision`, so you need to supply
-`--full_precision` to use float32 everywhere.

docs/installation/INSTALL_WINDOWS.md

@@ -2,10 +2,12 @@
 title: Windows
 ---
 
+# :fontawesome-brands-windows: Windows
+
 ## **Notebook install (semi-automated)**
 
 We have a
-[Jupyter notebook](https://github.com/lstein/stable-diffusion/blob/main/notebooks/Stable-Diffusion-local-Windows.ipynb)
+[Jupyter notebook](https://github.com/invoke-ai/InvokeAI/blob/main/notebooks/Stable-Diffusion-local-Windows.ipynb)
 with cell-by-cell installation steps. It will download the code in this repo as
 one of the steps, so instead of cloning this repo, simply download the notebook
 from the link above and load it up in VSCode (with the appropriate extensions
@@ -13,7 +15,7 @@ installed)/Jupyter/JupyterLab and start running the cells one-by-one.
 
 Note that you will need NVIDIA drivers, Python 3.10, and Git installed
 beforehand - simplified
-[step-by-step instructions](https://github.com/lstein/stable-diffusion/wiki/Easy-peasy-Windows-install)
+[step-by-step instructions](https://github.com/invoke-ai/InvokeAI/wiki/Easy-peasy-Windows-install)
 are available in the wiki (you'll only need steps 1, 2, & 3 ).
 
 ## **Manual Install**
@@ -21,25 +23,24 @@ are available in the wiki (you'll only need steps 1, 2, & 3 ).
 ### **pip**
 
 See
-[Easy-peasy Windows install](https://github.com/lstein/stable-diffusion/wiki/Easy-peasy-Windows-install)
+[Easy-peasy Windows install](https://github.com/invoke-ai/InvokeAI/wiki/Easy-peasy-Windows-install)
 in the wiki
 
 ---
 
 ### **Conda**
 
-1. Install Anaconda3 (miniconda3 version) from here:
-   https://docs.anaconda.com/anaconda/install/windows/
+1. Install Anaconda3 (miniconda3 version) from [here](https://docs.anaconda.com/anaconda/install/windows/)
 
-2. Install Git from here: https://git-scm.com/download/win
+2. Install Git from [here](https://git-scm.com/download/win)
 
 3. Launch Anaconda from the Windows Start menu. This will bring up a command
    window. Type all the remaining commands in this window.
 
 4. Run the command:
 
-    ```bash
-    git clone https://github.com/lstein/stable-diffusion.git
+    ```batch
+    git clone https://github.com/invoke-ai/InvokeAI.git
     ```
 
     This will create stable-diffusion folder where you will follow the rest of
@@ -48,15 +49,15 @@ in the wiki
 5. Enter the newly-created stable-diffusion folder. From this step forward make
    sure that you are working in the stable-diffusion directory!
 
-    ```bash
+    ```batch
     cd stable-diffusion
     ```
 
 6. Run the following two commands:
 
-    ```bash
-    conda env create -f environment.yaml    (step 6a)
-    conda activate ldm                      (step 6b)
+    ```batch
+    conda env create -f environment.yaml
+    conda activate ldm
     ```
 
     This will install all python requirements and activate the "ldm" environment
@@ -64,7 +65,7 @@ in the wiki
 
 7. Run the command:
 
-    ```bash
+    ```batch
     python scripts\preload_models.py
     ```
 
@@ -77,9 +78,9 @@ in the wiki
 8. Now you need to install the weights for the big stable diffusion model.
 
       - For running with the released weights, you will first need to set up an
-        acount with Hugging Face (https://huggingface.co).
+        acount with [Hugging Face](https://huggingface.co).
       - Use your credentials to log in, and then point your browser at
-        https://huggingface.co/CompVis/stable-diffusion-v-1-4-original.
+        [https://huggingface.co/CompVis/stable-diffusion-v-1-4-original](https://huggingface.co/CompVis/stable-diffusion-v-1-4-original).
       - You may be asked to sign a license agreement at this point.
       - Click on "Files and versions" near the top of the page, and then click on
         the file named `sd-v1-4.ckpt`. You'll be taken to a page that prompts you
@@ -90,7 +91,7 @@ in the wiki
       Now run the following commands from **within the stable-diffusion directory**
       to copy the weights file to the right place:
 
-      ```bash
+      ```batch
       mkdir -p models\ldm\stable-diffusion-v1
       copy C:\path\to\sd-v1-4.ckpt models\ldm\stable-diffusion-v1\model.ckpt
       ```
@@ -102,7 +103,7 @@ in the wiki
 
 9. Start generating images!
 
-    ```bash
+    ```batch
     # for the pre-release weights
     python scripts\dream.py -l
 
@@ -116,20 +117,20 @@ in the wiki
     then launch the dream script (step 9).
 
     **Note:** Tildebyte has written an alternative
-    ["Easy peasy Windows install"](https://github.com/lstein/stable-diffusion/wiki/Easy-peasy-Windows-install)
+    ["Easy peasy Windows install"](https://github.com/invoke-ai/InvokeAI/wiki/Easy-peasy-Windows-install)
     which uses the Windows Powershell and pew. If you are having trouble with
     Anaconda on Windows, give this a try (or try it first!)
 
 ---
 
-### Updating to newer versions of the script
+## Updating to newer versions of the script
 
 This distribution is changing rapidly. If you used the `git clone` method
 (step 5) to download the stable-diffusion directory, then to update to the
 latest and greatest version, launch the Anaconda window, enter
 `stable-diffusion`, and type:
 
-```bash
+```batch
 git pull
 conda env update -f environment.yaml
 ```

docs/other/CONTRIBUTORS.md

@@ -2,15 +2,18 @@
 title: Contributors
 ---
 
-The list of all the amazing people who have contributed to the various features that you get to experience in this fork.
+# :octicons-person-24: Contributors
+
+The list of all the amazing people who have contributed to the various features that you get to
+experience in this fork.
 
 We thank them for all of their time and hard work.
 
-## __Original Author:__
+## **Original Author:**
 
 - [Lincoln D. Stein](mailto:lincoln.stein@gmail.com)
 
-## __Contributions by:__
+## **Contributions by:**
 
 - [Sean McLellan](https://github.com/Oceanswave)
 - [Kevin Gibbons](https://github.com/bakkot)
@@ -52,8 +55,10 @@ We thank them for all of their time and hard work.
 - [Doggettx](https://github.com/doggettx)
 - [Matthias Wild](https://github.com/mauwii)
 - [Kyle Schouviller](https://github.com/kyle0654)
+- [rabidcopy](https://github.com/rabidcopy)
+- [Dominic Letz](https://github.com/dominicletz)
 
-## __Original CompVis Authors:__
+## **Original CompVis Authors:**
 
 - [Robin Rombach](https://github.com/rromb)
 - [Patrick von Platen](https://github.com/patrickvonplaten)
@@ -65,4 +70,5 @@ We thank them for all of their time and hard work.
 
 ---
 
-_If you have contributed and don't see your name on the list of contributors, please let one of the collaborators know about the omission, or feel free to make a pull request._
+_If you have contributed and don't see your name on the list of contributors, please let one of the
+collaborators know about the omission, or feel free to make a pull request._

environment-mac.yaml

@@ -30,8 +30,10 @@ dependencies:
   - nomkl
   - numpy==1.23.2
   - omegaconf==2.1.1
+  - openh264==2.3.0
   - onnx==1.12.0
   - onnxruntime==1.12.1
+  - protobuf==3.20.1
   - pudb==2022.1
   - pytorch-lightning==1.6.5
   - scipy==1.9.1
@@ -48,6 +50,7 @@ dependencies:
     - opencv-python==4.6.0
     - protobuf==3.20.1
     - realesrgan==0.2.5.0
+    - send2trash==1.8.0
     - test-tube==0.7.5
     - transformers==4.21.2
     - torch-fidelity==0.3.0

environment.yaml

@@ -20,7 +20,8 @@ dependencies:
     - realesrgan==0.2.5.0
     - test-tube>=0.7.5
     - streamlit==1.12.0
-    - pillow==6.2.0
+    - send2trash==1.8.0
+    - pillow==9.2.0
     - einops==0.3.0
     - torch-fidelity==0.3.0
     - transformers==4.19.2

frontend/README.md

@@ -1,85 +1,37 @@
 # Stable Diffusion Web UI
 
-Demo at https://peaceful-otter-7a427f.netlify.app/ (not connected to back end)
+## Run
 
-much of this readme is just notes for myself during dev work
+- `python backend/server.py` serves both frontend and backend at http://localhost:9090
 
-numpy rand: 0 to 4294967295
+## Evironment
 
-## Test and Build
+Install [node](https://nodejs.org/en/download/) (includes npm) and optionally
+[yarn](https://yarnpkg.com/getting-started/install).
 
-from `frontend/`:
+From `frontend/` run `npm install` / `yarn install` to install the frontend packages.
 
--   `yarn dev` runs `tsc-watch`, which runs `vite build` on successful `tsc` transpilation
+## Dev
 
-from `.`:
+1. From `frontend/`, run `npm dev` / `yarn dev` to start the dev server.
+2. Note the address it starts up on (probably `http://localhost:5173/`).
+3. Edit `backend/server.py`'s `additional_allowed_origins` to include this address, e.g.
+   `additional_allowed_origins = ['http://localhost:5173']`.
+4. Leaving the dev server running, open a new terminal and go to the project root.
+5. Run `python backend/server.py`.
+6. Navigate to the dev server address e.g. `http://localhost:5173/`.
 
--   `python backend/server.py` serves both frontend and backend at http://localhost:9090
+To build for dev: `npm build-dev` / `yarn build-dev`
 
-## API
-
-`backend/server.py` serves the UI and provides a [socket.io](https://github.com/socketio/socket.io) API via [flask-socketio](https://github.com/miguelgrinberg/flask-socketio).
-
-### Server Listeners
-
-The server listens for these socket.io events:
-
-`cancel`
-
--   Cancels in-progress image generation
--   Returns ack only
-
-`generateImage`
-
--   Accepts object of image parameters
--   Generates an image
--   Returns ack only (image generation function sends progress and result via separate events)
-
-`deleteImage`
-
--   Accepts file path to image
--   Deletes image
--   Returns ack only
-
-`deleteAllImages` WIP
-
--   Deletes all images in `outputs/`
--   Returns ack only
-
-`requestAllImages`
-
--   Returns array of all images in `outputs/`
-
-`requestCapabilities` WIP
-
--   Returns capabilities of server (torch device, GFPGAN and ESRGAN availability, ???)
-
-`sendImage` WIP
-
--   Accepts a File and attributes
--   Saves image
--   Used to save init images which are not generated images
-
-### Server Emitters
-
-`progress`
-
--   Emitted during each step in generation
--   Sends a number from 0 to 1 representing percentage of steps completed
-
-`result` WIP
-
--   Emitted when an image generation has completed
--   Sends a object:
-
-```
-{
-    url: relative_file_path,
-    metadata: image_metadata_object
-}
-```
+To build for production: `npm build` / `yarn build`
 
 ## TODO
 
--   Search repo for "TODO"
--   My one gripe with Chakra: no way to disable all animations right now and drop the dependence on `framer-motion`. I would prefer to save the ~30kb on bundle and have zero animations. This is on the Chakra roadmap. See https://github.com/chakra-ui/chakra-ui/pull/6368 for last discussion on this. Need to check in on this issue periodically.
+- Search repo for "TODO"
+- My one gripe with Chakra: no way to disable all animations right now and drop the dependence on
+  `framer-motion`. I would prefer to save the ~30kb on bundle and have zero animations. This is on
+  the Chakra roadmap. See https://github.com/chakra-ui/chakra-ui/pull/6368 for last discussion on
+  this. Need to check in on this issue periodically.
+- Mobile friendly layout
+- Proper image gallery/viewer/manager
+- Help tooltips and such

frontend/dist/index.html

@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Stable Diffusion Dream Server</title>
-    <script type="module" crossorigin src="/assets/index.cc5cde43.js"></script>
+    <title>InvokeAI Stable Diffusion Dream Server</title>
+    <script type="module" crossorigin src="/assets/index.66192cce.js"></script>
     <link rel="stylesheet" href="/assets/index.447eb2a9.css">
   </head>
   <body>

frontend/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Stable Diffusion Dream Server</title>
+    <title>InvokeAI Stable Diffusion Dream Server</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -1,16 +1,16 @@
 {
-  "name": "sdui",
+  "name": "invoke-ai-ui",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "dev": "tsc-watch --onSuccess 'yarn run vite build -m development'",
-    "hmr": "vite dev",
+    "dev": "vite dev",
     "build": "tsc && vite build",
     "build-dev": "tsc && vite build -m development",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.10",
     "@chakra-ui/react": "^2.3.1",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

frontend/src/App.tsx

@@ -1,60 +0,0 @@
-import { Grid, GridItem } from '@chakra-ui/react';
-import CurrentImage from './features/gallery/CurrentImage';
-import LogViewer from './features/system/LogViewer';
-import PromptInput from './features/sd/PromptInput';
-import ProgressBar from './features/header/ProgressBar';
-import { useEffect } from 'react';
-import { useAppDispatch } from './app/hooks';
-import { requestAllImages } from './app/socketio';
-import ProcessButtons from './features/sd/ProcessButtons';
-import ImageRoll from './features/gallery/ImageRoll';
-import SiteHeader from './features/header/SiteHeader';
-import OptionsAccordion from './features/sd/OptionsAccordion';
-
-const App = () => {
-    const dispatch = useAppDispatch();
-    useEffect(() => {
-        dispatch(requestAllImages());
-    }, [dispatch]);
-    return (
-        <>
-            <Grid
-                width='100vw'
-                height='100vh'
-                templateAreas={`
-                    "header header header header"
-                    "progressBar progressBar progressBar progressBar"
-                    "menu prompt processButtons imageRoll"
-                    "menu currentImage currentImage imageRoll"`}
-                gridTemplateRows={'36px 10px 100px auto'}
-                gridTemplateColumns={'350px auto 100px 388px'}
-                gap={2}
-            >
-                <GridItem area={'header'} pt={1}>
-                    <SiteHeader />
-                </GridItem>
-                <GridItem area={'progressBar'}>
-                    <ProgressBar />
-                </GridItem>
-                <GridItem pl='2' area={'menu'} overflowY='scroll'>
-                    <OptionsAccordion />
-                </GridItem>
-                <GridItem area={'prompt'}>
-                    <PromptInput />
-                </GridItem>
-                <GridItem area={'processButtons'}>
-                    <ProcessButtons />
-                </GridItem>
-                <GridItem area={'currentImage'}>
-                    <CurrentImage />
-                </GridItem>
-                <GridItem pr='2' area={'imageRoll'} overflowY='scroll'>
-                    <ImageRoll />
-                </GridItem>
-            </Grid>
-            <LogViewer />
-        </>
-    );
-};
-
-export default App;

frontend/src/app/App.tsx

@@ -0,0 +1,67 @@
+import { Grid, GridItem } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import CurrentImageDisplay from '../features/gallery/CurrentImageDisplay';
+import ImageGallery from '../features/gallery/ImageGallery';
+import ProgressBar from '../features/system/ProgressBar';
+import SiteHeader from '../features/system/SiteHeader';
+import OptionsAccordion from '../features/options/OptionsAccordion';
+import ProcessButtons from '../features/options/ProcessButtons';
+import PromptInput from '../features/options/PromptInput';
+import LogViewer from '../features/system/LogViewer';
+import Loading from '../Loading';
+import { useAppDispatch } from './store';
+import { requestSystemConfig } from './socketio/actions';
+
+const App = () => {
+  const dispatch = useAppDispatch();
+  const [isReady, setIsReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    dispatch(requestSystemConfig());
+    setIsReady(true);
+  }, [dispatch]);
+
+  return isReady ? (
+    <>
+      <Grid
+        width="100vw"
+        height="100vh"
+        templateAreas={`
+                    "header header header header"
+                    "progressBar progressBar progressBar progressBar"
+                    "menu prompt processButtons imageRoll"
+                    "menu currentImage currentImage imageRoll"`}
+        gridTemplateRows={'36px 10px 100px auto'}
+        gridTemplateColumns={'350px auto 100px 388px'}
+        gap={2}
+      >
+        <GridItem area={'header'} pt={1}>
+          <SiteHeader />
+        </GridItem>
+        <GridItem area={'progressBar'}>
+          <ProgressBar />
+        </GridItem>
+        <GridItem pl="2" area={'menu'} overflowY="scroll">
+          <OptionsAccordion />
+        </GridItem>
+        <GridItem area={'prompt'}>
+          <PromptInput />
+        </GridItem>
+        <GridItem area={'processButtons'}>
+          <ProcessButtons />
+        </GridItem>
+        <GridItem area={'currentImage'}>
+          <CurrentImageDisplay />
+        </GridItem>
+        <GridItem pr="2" area={'imageRoll'} overflowY="scroll">
+          <ImageGallery />
+        </GridItem>
+      </Grid>
+      <LogViewer />
+    </>
+  ) : (
+    <Loading />
+  );
+};
+
+export default App;

frontend/src/app/constants.ts

@@ -2,52 +2,52 @@
 
 // Valid samplers
 export const SAMPLERS: Array<string> = [
-    'ddim',
-    'plms',
-    'k_lms',
-    'k_dpm_2',
-    'k_dpm_2_a',
-    'k_euler',
-    'k_euler_a',
-    'k_heun',
+  'ddim',
+  'plms',
+  'k_lms',
+  'k_dpm_2',
+  'k_dpm_2_a',
+  'k_euler',
+  'k_euler_a',
+  'k_heun',
 ];
 
 // Valid image widths
 export const WIDTHS: Array<number> = [
-    64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960,
-    1024,
+  64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960,
+  1024,
 ];
 
 // Valid image heights
 export const HEIGHTS: Array<number> = [
-    64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960,
-    1024,
+  64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960,
+  1024,
 ];
 
 // Valid upscaling levels
 export const UPSCALING_LEVELS: Array<{ key: string; value: number }> = [
-    { key: '2x', value: 2 },
-    { key: '4x', value: 4 },
+  { key: '2x', value: 2 },
+  { key: '4x', value: 4 },
 ];
 
 // Internal to human-readable parameters
 export const PARAMETERS: { [key: string]: string } = {
-    prompt: 'Prompt',
-    iterations: 'Iterations',
-    steps: 'Steps',
-    cfgScale: 'CFG Scale',
-    height: 'Height',
-    width: 'Width',
-    sampler: 'Sampler',
-    seed: 'Seed',
-    img2imgStrength: 'img2img Strength',
-    gfpganStrength: 'GFPGAN Strength',
-    upscalingLevel: 'Upscaling Level',
-    upscalingStrength: 'Upscaling Strength',
-    initialImagePath: 'Initial Image',
-    maskPath: 'Initial Image Mask',
-    shouldFitToWidthHeight: 'Fit Initial Image',
-    seamless: 'Seamless Tiling',
+  prompt: 'Prompt',
+  iterations: 'Iterations',
+  steps: 'Steps',
+  cfgScale: 'CFG Scale',
+  height: 'Height',
+  width: 'Width',
+  sampler: 'Sampler',
+  seed: 'Seed',
+  img2imgStrength: 'img2img Strength',
+  gfpganStrength: 'GFPGAN Strength',
+  upscalingLevel: 'Upscaling Level',
+  upscalingStrength: 'Upscaling Strength',
+  initialImagePath: 'Initial Image',
+  maskPath: 'Initial Image Mask',
+  shouldFitToWidthHeight: 'Fit Initial Image',
+  seamless: 'Seamless Tiling',
 };
 
 export const NUMPY_RAND_MIN = 0;

frontend/src/app/features.ts

@@ -0,0 +1,59 @@
+type FeatureHelpInfo = {
+  text: string;
+  href: string;
+  guideImage: string;
+};
+
+export enum Feature {
+  PROMPT,
+  GALLERY,
+  OUTPUT,
+  SEED_AND_VARIATION,
+  ESRGAN,
+  FACE_CORRECTION,
+  IMAGE_TO_IMAGE,
+  SAMPLER,
+}
+
+export const FEATURES: Record<Feature, FeatureHelpInfo> = {
+  [Feature.PROMPT]: {
+    text: 'This field will take all prompt text, including both content and stylistic terms. CLI Commands will not work in the prompt.',
+    href: 'link/to/docs/feature3.html',
+    guideImage: 'asset/path.gif',
+  },
+  [Feature.GALLERY]: {
+    text: 'As new invocations are generated, files from the output directory will be displayed here. Generations have additional options to configure new generations.',
+    href: 'link/to/docs/feature3.html',
+    guideImage: 'asset/path.gif',
+  },
+  [Feature.OUTPUT]: {
+    text: 'The Height and Width of generations can be controlled here. If you experience errors, you may be generating an image too large for your system. The seamless option will more often result in repeating patterns in outputs.',
+    href: 'link/to/docs/feature3.html',
+    guideImage: 'asset/path.gif',
+  },
+  [Feature.SEED_AND_VARIATION]: {
+    text: 'Seed values provide an initial set of noise which guide the denoising process. Try a variation with an amount of between 0 and 1 to change the output image for that seed.',
+    href: 'link/to/docs/feature3.html',
+    guideImage: 'asset/path.gif',
+  },
+  [Feature.ESRGAN]: {
+    text: 'The ESRGAN setting can be used to increase the output resolution without requiring a higher width/height in the initial generation.',
+    href: 'link/to/docs/feature1.html',
+    guideImage: 'asset/path.gif',
+  },
+  [Feature.FACE_CORRECTION]: {
+    text: 'Using GFPGAN or CodeFormer, Face Correction will attempt to identify faces in outputs, and correct any defects/abnormalities. Higher values will apply a stronger corrective pressure on outputs.',
+    href: 'link/to/docs/feature2.html',
+    guideImage: 'asset/path.gif',
+  },
+  [Feature.IMAGE_TO_IMAGE]: {
+    text: 'ImageToImage allows the upload of an initial image, which InvokeAI will use to guide the generation process, along with a prompt. A lower value for this setting will more closely resemble the original image. Values between 0-1 are accepted, and a range of .25-.75 is recommended ',
+    href: 'link/to/docs/feature3.html',
+    guideImage: 'asset/path.gif',
+  },
+  [Feature.SAMPLER]: {
+    text: 'This setting allows for different denoising samplers to be used, as well as the number of denoising steps used, which will change the resulting output.',
+    href: 'link/to/docs/feature3.html',
+    guideImage: 'asset/path.gif',
+  },
+};

frontend/src/app/hooks.ts

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

frontend/src/app/invokeai.d.ts

@@ -0,0 +1,175 @@
+/**
+ * Types for images, the things they are made of, and the things
+ * they make up.
+ *
+ * Generated images are txt2img and img2img images. They may have
+ * had additional postprocessing done on them when they were first
+ * generated.
+ *
+ * Postprocessed images are images which were not generated here
+ * but only postprocessed by the app. They only get postprocessing
+ * metadata and have a different image type, e.g. 'esrgan' or
+ * 'gfpgan'.
+ */
+
+/**
+ * TODO:
+ * Once an image has been generated, if it is postprocessed again,
+ * additional postprocessing steps are added to its postprocessing
+ * array.
+ *
+ * TODO: Better documentation of types.
+ */
+
+export declare type PromptItem = {
+  prompt: string;
+  weight: number;
+};
+
+export declare type Prompt = Array<PromptItem>;
+
+export declare type SeedWeightPair = {
+  seed: number;
+  weight: number;
+};
+
+export declare type SeedWeights = Array<SeedWeightPair>;
+
+// All generated images contain these metadata.
+export declare type CommonGeneratedImageMetadata = {
+  postprocessing: null | Array<ESRGANMetadata | GFPGANMetadata>;
+  sampler:
+    | 'ddim'
+    | 'k_dpm_2_a'
+    | 'k_dpm_2'
+    | 'k_euler_a'
+    | 'k_euler'
+    | 'k_heun'
+    | 'k_lms'
+    | 'plms';
+  prompt: Prompt;
+  seed: number;
+  variations: SeedWeights;
+  steps: number;
+  cfg_scale: number;
+  width: number;
+  height: number;
+  seamless: boolean;
+  extra: null | Record<string, never>; // Pending development of RFC #266
+};
+
+// txt2img and img2img images have some unique attributes.
+export declare type Txt2ImgMetadata = GeneratedImageMetadata & {
+  type: 'txt2img';
+};
+
+export declare type Img2ImgMetadata = GeneratedImageMetadata & {
+  type: 'img2img';
+  orig_hash: string;
+  strength: number;
+  fit: boolean;
+  init_image_path: string;
+  mask_image_path?: string;
+};
+
+// Superset of  generated image metadata types.
+export declare type GeneratedImageMetadata = Txt2ImgMetadata | Img2ImgMetadata;
+
+// All post processed images contain these metadata.
+export declare type CommonPostProcessedImageMetadata = {
+  orig_path: string;
+  orig_hash: string;
+};
+
+// esrgan and gfpgan images have some unique attributes.
+export declare type ESRGANMetadata = CommonPostProcessedImageMetadata & {
+  type: 'esrgan';
+  scale: 2 | 4;
+  strength: number;
+};
+
+export declare type GFPGANMetadata = CommonPostProcessedImageMetadata & {
+  type: 'gfpgan';
+  strength: number;
+};
+
+// Superset of all postprocessed image metadata types..
+export declare type PostProcessedImageMetadata =
+  | ESRGANMetadata
+  | GFPGANMetadata;
+
+// Metadata includes the system config and image metadata.
+export declare type Metadata = SystemConfig & {
+  image: GeneratedImageMetadata | PostProcessedImageMetadata;
+};
+
+// An Image has a UUID, url (path?) and Metadata.
+export declare type Image = {
+  uuid: string;
+  url: string;
+  mtime: number;
+  metadata: Metadata;
+};
+
+// GalleryImages is an array of Image.
+export declare type GalleryImages = {
+  images: Array<Image>;
+};
+
+/**
+ * Types related to the system status.
+ */
+
+// This represents the processing status of the backend.
+export declare type SystemStatus = {
+  isProcessing: boolean;
+  currentStep: number;
+  totalSteps: number;
+  currentIteration: number;
+  totalIterations: number;
+  currentStatus: string;
+  currentStatusHasSteps: boolean;
+};
+
+export declare type SystemConfig = {
+  model: string;
+  model_id: string;
+  model_hash: string;
+  app_id: string;
+  app_version: string;
+};
+
+/**
+ * These types type data received from the server via socketio.
+ */
+
+export declare type SystemStatusResponse = SystemStatus;
+
+export declare type SystemConfigResponse = SystemConfig;
+
+export declare type ImageResultResponse = {
+  url: string;
+  mtime: number;
+  metadata: Metadata;
+};
+
+export declare type ErrorResponse = {
+  message: string;
+  additionalData?: string;
+};
+
+export declare type GalleryImagesResponse = {
+  images:  Array<Omit<Image, 'uuid'>>;
+  nextPage: number;
+  offset: number;
+  onlyNewImages: boolean;
+};
+
+export declare type ImageUrlAndUuidResponse = {
+  uuid: string;
+  url: string;
+};
+
+export declare type ImageUrlResponse = {
+  url: string;
+};

frontend/src/app/parameterTranslation.ts

@@ -1,182 +0,0 @@
-import { SDState } from '../features/sd/sdSlice';
-import randomInt from '../features/sd/util/randomInt';
-import {
-    seedWeightsToString,
-    stringToSeedWeights,
-} from '../features/sd/util/seedWeightPairs';
-import { SystemState } from '../features/system/systemSlice';
-import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from './constants';
-
-/*
-    These functions translate frontend state into parameters
-    suitable for consumption by the backend, and vice-versa.
-*/
-
-export const frontendToBackendParameters = (
-    sdState: SDState,
-    systemState: SystemState
-): { [key: string]: any } => {
-    const {
-        prompt,
-        iterations,
-        steps,
-        cfgScale,
-        height,
-        width,
-        sampler,
-        seed,
-        seamless,
-        shouldUseInitImage,
-        img2imgStrength,
-        initialImagePath,
-        maskPath,
-        shouldFitToWidthHeight,
-        shouldGenerateVariations,
-        variantAmount,
-        seedWeights,
-        shouldRunESRGAN,
-        upscalingLevel,
-        upscalingStrength,
-        shouldRunGFPGAN,
-        gfpganStrength,
-        shouldRandomizeSeed,
-    } = sdState;
-
-    const { shouldDisplayInProgress } = systemState;
-
-    const generationParameters: { [k: string]: any } = {
-        prompt,
-        iterations,
-        steps,
-        cfg_scale: cfgScale,
-        height,
-        width,
-        sampler_name: sampler,
-        seed,
-        seamless,
-        progress_images: shouldDisplayInProgress,
-    };
-
-    generationParameters.seed = shouldRandomizeSeed
-        ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)
-        : seed;
-
-    if (shouldUseInitImage) {
-        generationParameters.init_img = initialImagePath;
-        generationParameters.strength = img2imgStrength;
-        generationParameters.fit = shouldFitToWidthHeight;
-        if (maskPath) {
-            generationParameters.init_mask = maskPath;
-        }
-    }
-
-    if (shouldGenerateVariations) {
-        generationParameters.variation_amount = variantAmount;
-        if (seedWeights) {
-            generationParameters.with_variations =
-                stringToSeedWeights(seedWeights);
-        }
-    } else {
-        generationParameters.variation_amount = 0;
-    }
-
-    let esrganParameters: false | { [k: string]: any } = false;
-    let gfpganParameters: false | { [k: string]: any } = false;
-
-    if (shouldRunESRGAN) {
-        esrganParameters = {
-            level: upscalingLevel,
-            strength: upscalingStrength,
-        };
-    }
-
-    if (shouldRunGFPGAN) {
-        gfpganParameters = {
-            strength: gfpganStrength,
-        };
-    }
-
-    return {
-        generationParameters,
-        esrganParameters,
-        gfpganParameters,
-    };
-};
-
-export const backendToFrontendParameters = (parameters: {
-    [key: string]: any;
-}) => {
-    const {
-        prompt,
-        iterations,
-        steps,
-        cfg_scale,
-        height,
-        width,
-        sampler_name,
-        seed,
-        seamless,
-        progress_images,
-        variation_amount,
-        with_variations,
-        gfpgan_strength,
-        upscale,
-        init_img,
-        init_mask,
-        strength,
-    } = parameters;
-
-    const sd: { [key: string]: any } = {
-        shouldDisplayInProgress: progress_images,
-        // init
-        shouldGenerateVariations: false,
-        shouldRunESRGAN: false,
-        shouldRunGFPGAN: false,
-        initialImagePath: '',
-        maskPath: '',
-    };
-
-    if (variation_amount > 0) {
-        sd.shouldGenerateVariations = true;
-        sd.variantAmount = variation_amount;
-        if (with_variations) {
-            sd.seedWeights = seedWeightsToString(with_variations);
-        }
-    }
-
-    if (gfpgan_strength > 0) {
-        sd.shouldRunGFPGAN = true;
-        sd.gfpganStrength = gfpgan_strength;
-    }
-
-    if (upscale) {
-        sd.shouldRunESRGAN = true;
-        sd.upscalingLevel = upscale[0];
-        sd.upscalingStrength = upscale[1];
-    }
-
-    if (init_img) {
-        sd.shouldUseInitImage = true
-        sd.initialImagePath = init_img;
-        sd.strength = strength;
-        if (init_mask) {
-            sd.maskPath = init_mask;
-        }
-    }
-
-    // if we had a prompt, add all the metadata, but if we don't have a prompt,
-    // we must have only done ESRGAN or GFPGAN so do not add that metadata
-    if (prompt) {
-        sd.prompt = prompt;
-        sd.iterations = iterations;
-        sd.steps = steps;
-        sd.cfgScale = cfg_scale;
-        sd.height = height;
-        sd.width = width;
-        sd.sampler = sampler_name;
-        sd.seed = seed;
-        sd.seamless = seamless;
-    }
-
-    return sd;
-};

frontend/src/app/socketio.ts

@@ -1,393 +0,0 @@
-import { createAction, Middleware } from '@reduxjs/toolkit';
-import { io } from 'socket.io-client';
-import {
-    addImage,
-    clearIntermediateImage,
-    removeImage,
-    SDImage,
-    SDMetadata,
-    setGalleryImages,
-    setIntermediateImage,
-} from '../features/gallery/gallerySlice';
-import {
-    addLogEntry,
-    setCurrentStep,
-    setIsConnected,
-    setIsProcessing,
-} from '../features/system/systemSlice';
-import { v4 as uuidv4 } from 'uuid';
-import { setInitialImagePath, setMaskPath } from '../features/sd/sdSlice';
-import {
-    backendToFrontendParameters,
-    frontendToBackendParameters,
-} from './parameterTranslation';
-
-export interface SocketIOResponse {
-    status: 'OK' | 'ERROR';
-    message?: string;
-    data?: any;
-}
-
-export const socketioMiddleware = () => {
-    const { hostname, port } = new URL(window.location.href);
-
-    const socketio = io(`http://${hostname}:9090`);
-
-    let areListenersSet = false;
-
-    const middleware: Middleware = (store) => (next) => (action) => {
-        const { dispatch, getState } = store;
-        if (!areListenersSet) {
-            // CONNECT
-            socketio.on('connect', () => {
-                try {
-                    dispatch(setIsConnected(true));
-                } catch (e) {
-                    console.error(e);
-                }
-            });
-
-            // DISCONNECT
-            socketio.on('disconnect', () => {
-                try {
-                    dispatch(setIsConnected(false));
-                    dispatch(setIsProcessing(false));
-                    dispatch(addLogEntry(`Disconnected from server`));
-                } catch (e) {
-                    console.error(e);
-                }
-            });
-
-            // PROCESSING RESULT
-            socketio.on(
-                'result',
-                (data: {
-                    url: string;
-                    type: 'generation' | 'esrgan' | 'gfpgan';
-                    uuid?: string;
-                    metadata: { [key: string]: any };
-                }) => {
-                    try {
-                        const newUuid = uuidv4();
-                        const { type, url, uuid, metadata } = data;
-                        switch (type) {
-                            case 'generation': {
-                                const translatedMetadata =
-                                    backendToFrontendParameters(metadata);
-                                dispatch(
-                                    addImage({
-                                        uuid: newUuid,
-                                        url,
-                                        metadata: translatedMetadata,
-                                    })
-                                );
-                                dispatch(
-                                    addLogEntry(`Image generated: ${url}`)
-                                );
-
-                                break;
-                            }
-                            case 'esrgan': {
-                                const originalImage =
-                                    getState().gallery.images.find(
-                                        (i: SDImage) => i.uuid === uuid
-                                    );
-                                const newMetadata = {
-                                    ...originalImage.metadata,
-                                };
-                                newMetadata.shouldRunESRGAN = true;
-                                newMetadata.upscalingLevel =
-                                    metadata.upscale[0];
-                                newMetadata.upscalingStrength =
-                                    metadata.upscale[1];
-                                dispatch(
-                                    addImage({
-                                        uuid: newUuid,
-                                        url,
-                                        metadata: newMetadata,
-                                    })
-                                );
-                                dispatch(
-                                    addLogEntry(`ESRGAN upscaled: ${url}`)
-                                );
-
-                                break;
-                            }
-                            case 'gfpgan': {
-                                const originalImage =
-                                    getState().gallery.images.find(
-                                        (i: SDImage) => i.uuid === uuid
-                                    );
-                                const newMetadata = {
-                                    ...originalImage.metadata,
-                                };
-                                newMetadata.shouldRunGFPGAN = true;
-                                newMetadata.gfpganStrength =
-                                    metadata.gfpgan_strength;
-                                dispatch(
-                                    addImage({
-                                        uuid: newUuid,
-                                        url,
-                                        metadata: newMetadata,
-                                    })
-                                );
-                                dispatch(
-                                    addLogEntry(`GFPGAN fixed faces: ${url}`)
-                                );
-
-                                break;
-                            }
-                        }
-                        dispatch(setIsProcessing(false));
-                    } catch (e) {
-                        console.error(e);
-                    }
-                }
-            );
-
-            // PROGRESS UPDATE
-            socketio.on('progress', (data: { step: number }) => {
-                try {
-                    dispatch(setIsProcessing(true));
-                    dispatch(setCurrentStep(data.step));
-                } catch (e) {
-                    console.error(e);
-                }
-            });
-
-            // INTERMEDIATE IMAGE
-            socketio.on(
-                'intermediateResult',
-                (data: { url: string; metadata: SDMetadata }) => {
-                    try {
-                        const uuid = uuidv4();
-                        const { url, metadata } = data;
-                        dispatch(
-                            setIntermediateImage({
-                                uuid,
-                                url,
-                                metadata,
-                            })
-                        );
-                        dispatch(
-                            addLogEntry(`Intermediate image generated: ${url}`)
-                        );
-                    } catch (e) {
-                        console.error(e);
-                    }
-                }
-            );
-
-            // ERROR FROM BACKEND
-            socketio.on('error', (message) => {
-                try {
-                    dispatch(addLogEntry(`Server error: ${message}`));
-                    dispatch(setIsProcessing(false));
-                    dispatch(clearIntermediateImage());
-                } catch (e) {
-                    console.error(e);
-                }
-            });
-
-            areListenersSet = true;
-        }
-
-        // HANDLE ACTIONS
-
-        switch (action.type) {
-            // GENERATE IMAGE
-            case 'socketio/generateImage': {
-                dispatch(setIsProcessing(true));
-                dispatch(setCurrentStep(-1));
-
-                const {
-                    generationParameters,
-                    esrganParameters,
-                    gfpganParameters,
-                } = frontendToBackendParameters(
-                    getState().sd,
-                    getState().system
-                );
-
-                socketio.emit(
-                    'generateImage',
-                    generationParameters,
-                    esrganParameters,
-                    gfpganParameters
-                );
-
-                dispatch(
-                    addLogEntry(
-                        `Image generation requested: ${JSON.stringify({
-                            ...generationParameters,
-                            ...esrganParameters,
-                            ...gfpganParameters,
-                        })}`
-                    )
-                );
-                break;
-            }
-
-            // RUN ESRGAN (UPSCALING)
-            case 'socketio/runESRGAN': {
-                const imageToProcess = action.payload;
-                dispatch(setIsProcessing(true));
-                dispatch(setCurrentStep(-1));
-                const { upscalingLevel, upscalingStrength } = getState().sd;
-                const esrganParameters = {
-                    upscale: [upscalingLevel, upscalingStrength],
-                };
-                socketio.emit('runESRGAN', imageToProcess, esrganParameters);
-                dispatch(
-                    addLogEntry(
-                        `ESRGAN upscale requested: ${JSON.stringify({
-                            file: imageToProcess.url,
-                            ...esrganParameters,
-                        })}`
-                    )
-                );
-                break;
-            }
-
-            // RUN GFPGAN (FIX FACES)
-            case 'socketio/runGFPGAN': {
-                const imageToProcess = action.payload;
-                dispatch(setIsProcessing(true));
-                dispatch(setCurrentStep(-1));
-                const { gfpganStrength } = getState().sd;
-
-                const gfpganParameters = {
-                    gfpgan_strength: gfpganStrength,
-                };
-                socketio.emit('runGFPGAN', imageToProcess, gfpganParameters);
-                dispatch(
-                    addLogEntry(
-                        `GFPGAN fix faces requested: ${JSON.stringify({
-                            file: imageToProcess.url,
-                            ...gfpganParameters,
-                        })}`
-                    )
-                );
-                break;
-            }
-
-            // DELETE IMAGE
-            case 'socketio/deleteImage': {
-                const imageToDelete = action.payload;
-                const { url } = imageToDelete;
-                socketio.emit(
-                    'deleteImage',
-                    url,
-                    (response: SocketIOResponse) => {
-                        if (response.status === 'OK') {
-                            dispatch(removeImage(imageToDelete));
-                            dispatch(addLogEntry(`Image deleted: ${url}`));
-                        }
-                    }
-                );
-                break;
-            }
-
-            // GET ALL IMAGES FOR GALLERY
-            case 'socketio/requestAllImages': {
-                socketio.emit(
-                    'requestAllImages',
-                    (response: SocketIOResponse) => {
-                        dispatch(setGalleryImages(response.data));
-                        dispatch(
-                            addLogEntry(`Loaded ${response.data.length} images`)
-                        );
-                    }
-                );
-                break;
-            }
-
-            // CANCEL PROCESSING
-            case 'socketio/cancelProcessing': {
-                socketio.emit('cancel', (response: SocketIOResponse) => {
-                    const { intermediateImage } = getState().gallery;
-                    if (response.status === 'OK') {
-                        dispatch(setIsProcessing(false));
-                        if (intermediateImage) {
-                            dispatch(addImage(intermediateImage));
-                            dispatch(
-                                addLogEntry(
-                                    `Intermediate image saved: ${intermediateImage.url}`
-                                )
-                            );
-
-                            dispatch(clearIntermediateImage());
-                        }
-                        dispatch(addLogEntry(`Processing canceled`));
-                    }
-                });
-                break;
-            }
-
-            // UPLOAD INITIAL IMAGE
-            case 'socketio/uploadInitialImage': {
-                const file = action.payload;
-
-                socketio.emit(
-                    'uploadInitialImage',
-                    file,
-                    file.name,
-                    (response: SocketIOResponse) => {
-                        if (response.status === 'OK') {
-                            dispatch(setInitialImagePath(response.data));
-                            dispatch(
-                                addLogEntry(
-                                    `Initial image uploaded: ${response.data}`
-                                )
-                            );
-                        }
-                    }
-                );
-                break;
-            }
-
-            // UPLOAD MASK IMAGE
-            case 'socketio/uploadMaskImage': {
-                const file = action.payload;
-
-                socketio.emit(
-                    'uploadMaskImage',
-                    file,
-                    file.name,
-                    (response: SocketIOResponse) => {
-                        if (response.status === 'OK') {
-                            dispatch(setMaskPath(response.data));
-                            dispatch(
-                                addLogEntry(
-                                    `Mask image uploaded: ${response.data}`
-                                )
-                            );
-                        }
-                    }
-                );
-                break;
-            }
-        }
-
-        next(action);
-    };
-
-    return middleware;
-};
-
-// Actions to be used by app
-
-export const generateImage = createAction<undefined>('socketio/generateImage');
-export const runESRGAN = createAction<SDImage>('socketio/runESRGAN');
-export const runGFPGAN = createAction<SDImage>('socketio/runGFPGAN');
-export const deleteImage = createAction<SDImage>('socketio/deleteImage');
-export const requestAllImages = createAction<undefined>(
-    'socketio/requestAllImages'
-);
-export const cancelProcessing = createAction<undefined>(
-    'socketio/cancelProcessing'
-);
-export const uploadInitialImage = createAction<File>(
-    'socketio/uploadInitialImage'
-);
-export const uploadMaskImage = createAction<File>('socketio/uploadMaskImage');

frontend/src/app/socketio/actions.ts

@@ -0,0 +1,31 @@
+import { createAction } from '@reduxjs/toolkit';
+import * as InvokeAI from '../invokeai';
+
+/**
+ * We can't use redux-toolkit's createSlice() to make these actions,
+ * because they have no associated reducer. They only exist to dispatch
+ * requests to the server via socketio. These actions will be handled
+ * by the middleware.
+ */
+
+export const generateImage = createAction<undefined>('socketio/generateImage');
+export const runESRGAN = createAction<InvokeAI.Image>('socketio/runESRGAN');
+export const runGFPGAN = createAction<InvokeAI.Image>('socketio/runGFPGAN');
+export const deleteImage = createAction<InvokeAI.Image>('socketio/deleteImage');
+export const requestImages = createAction<undefined>(
+  'socketio/requestImages'
+);
+export const requestNewImages = createAction<undefined>(
+  'socketio/requestNewImages'
+);
+export const cancelProcessing = createAction<undefined>(
+  'socketio/cancelProcessing'
+);
+export const uploadInitialImage = createAction<File>(
+  'socketio/uploadInitialImage'
+);
+export const uploadMaskImage = createAction<File>('socketio/uploadMaskImage');
+
+export const requestSystemConfig = createAction<undefined>(
+  'socketio/requestSystemConfig'
+);

frontend/src/app/socketio/emitters.ts

@@ -0,0 +1,113 @@
+import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
+import dateFormat from 'dateformat';
+import { Socket } from 'socket.io-client';
+import { frontendToBackendParameters } from '../../common/util/parameterTranslation';
+import {
+  addLogEntry,
+  setIsProcessing,
+} from '../../features/system/systemSlice';
+import * as InvokeAI from '../invokeai';
+
+/**
+ * Returns an object containing all functions which use `socketio.emit()`.
+ * i.e. those which make server requests.
+ */
+const makeSocketIOEmitters = (
+  store: MiddlewareAPI<Dispatch<AnyAction>, any>,
+  socketio: Socket
+) => {
+  // We need to dispatch actions to redux and get pieces of state from the store.
+  const { dispatch, getState } = store;
+
+  return {
+    emitGenerateImage: () => {
+      dispatch(setIsProcessing(true));
+
+      const { generationParameters, esrganParameters, gfpganParameters } =
+        frontendToBackendParameters(getState().options, getState().system);
+
+      socketio.emit(
+        'generateImage',
+        generationParameters,
+        esrganParameters,
+        gfpganParameters
+      );
+
+      dispatch(
+        addLogEntry({
+          timestamp: dateFormat(new Date(), 'isoDateTime'),
+          message: `Image generation requested: ${JSON.stringify({
+            ...generationParameters,
+            ...esrganParameters,
+            ...gfpganParameters,
+          })}`,
+        })
+      );
+    },
+    emitRunESRGAN: (imageToProcess: InvokeAI.Image) => {
+      dispatch(setIsProcessing(true));
+      const { upscalingLevel, upscalingStrength } = getState().options;
+      const esrganParameters = {
+        upscale: [upscalingLevel, upscalingStrength],
+      };
+      socketio.emit('runESRGAN', imageToProcess, esrganParameters);
+      dispatch(
+        addLogEntry({
+          timestamp: dateFormat(new Date(), 'isoDateTime'),
+          message: `ESRGAN upscale requested: ${JSON.stringify({
+            file: imageToProcess.url,
+            ...esrganParameters,
+          })}`,
+        })
+      );
+    },
+    emitRunGFPGAN: (imageToProcess: InvokeAI.Image) => {
+      dispatch(setIsProcessing(true));
+      const { gfpganStrength } = getState().options;
+
+      const gfpganParameters = {
+        gfpgan_strength: gfpganStrength,
+      };
+      socketio.emit('runGFPGAN', imageToProcess, gfpganParameters);
+      dispatch(
+        addLogEntry({
+          timestamp: dateFormat(new Date(), 'isoDateTime'),
+          message: `GFPGAN fix faces requested: ${JSON.stringify({
+            file: imageToProcess.url,
+            ...gfpganParameters,
+          })}`,
+        })
+      );
+    },
+    emitDeleteImage: (imageToDelete: InvokeAI.Image) => {
+      const { url, uuid } = imageToDelete;
+      socketio.emit('deleteImage', url, uuid);
+    },
+    emitRequestImages: () => {
+      const { nextPage, offset } = getState().gallery;
+      socketio.emit('requestImages', nextPage, offset);
+    },
+    emitRequestNewImages: () => {
+      const { nextPage, offset, images } = getState().gallery;
+      if (images.length > 0) {
+        socketio.emit('requestImages', nextPage, offset, images[0].mtime);
+      } else {
+        socketio.emit('requestImages', nextPage, offset);
+      }
+    },
+    emitCancelProcessing: () => {
+      socketio.emit('cancel');
+    },
+    emitUploadInitialImage: (file: File) => {
+      socketio.emit('uploadInitialImage', file, file.name);
+    },
+    emitUploadMaskImage: (file: File) => {
+      socketio.emit('uploadMaskImage', file, file.name);
+    },
+    emitRequestSystemConfig: () => {
+      socketio.emit('requestSystemConfig');
+    },
+  };
+};
+
+export default makeSocketIOEmitters;

frontend/src/app/socketio/listeners.ts

@@ -0,0 +1,315 @@
+import { AnyAction, MiddlewareAPI, Dispatch } from '@reduxjs/toolkit';
+import { v4 as uuidv4 } from 'uuid';
+import dateFormat from 'dateformat';
+
+import * as InvokeAI from '../invokeai';
+
+import {
+  addLogEntry,
+  setIsConnected,
+  setIsProcessing,
+  setSystemStatus,
+  setCurrentStatus,
+  setSystemConfig,
+} from '../../features/system/systemSlice';
+
+import {
+  addGalleryImages,
+  addImage,
+  clearIntermediateImage,
+  removeImage,
+  setIntermediateImage,
+} from '../../features/gallery/gallerySlice';
+
+import {
+  setInitialImagePath,
+  setMaskPath,
+} from '../../features/options/optionsSlice';
+import { requestNewImages } from './actions';
+
+/**
+ * Returns an object containing listener callbacks for socketio events.
+ * TODO: This file is large, but simple. Should it be split up further?
+ */
+const makeSocketIOListeners = (
+  store: MiddlewareAPI<Dispatch<AnyAction>, any>
+) => {
+  const { dispatch, getState } = store;
+
+  return {
+    /**
+     * Callback to run when we receive a 'connect' event.
+     */
+    onConnect: () => {
+      try {
+        dispatch(setIsConnected(true));
+        dispatch(setCurrentStatus('Connected'));
+        dispatch(requestNewImages());
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    /**
+     * Callback to run when we receive a 'disconnect' event.
+     */
+    onDisconnect: () => {
+      try {
+        dispatch(setIsConnected(false));
+        dispatch(setCurrentStatus('Disconnected'));
+
+        dispatch(
+          addLogEntry({
+            timestamp: dateFormat(new Date(), 'isoDateTime'),
+            message: `Disconnected from server`,
+            level: 'warning',
+          })
+        );
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    /**
+     * Callback to run when we receive a 'generationResult' event.
+     */
+    onGenerationResult: (data: InvokeAI.ImageResultResponse) => {
+      try {
+        const { url, mtime, metadata } = data;
+        const newUuid = uuidv4();
+
+        dispatch(
+          addImage({
+            uuid: newUuid,
+            url,
+            mtime,
+            metadata: metadata,
+          })
+        );
+        dispatch(
+          addLogEntry({
+            timestamp: dateFormat(new Date(), 'isoDateTime'),
+            message: `Image generated: ${url}`,
+          })
+        );
+        dispatch(setIsProcessing(false));
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    /**
+     * Callback to run when we receive a 'intermediateResult' event.
+     */
+    onIntermediateResult: (data: InvokeAI.ImageResultResponse) => {
+      try {
+        const uuid = uuidv4();
+        const { url, metadata, mtime } = data;
+        dispatch(
+          setIntermediateImage({
+            uuid,
+            url,
+            mtime,
+            metadata,
+          })
+        );
+        dispatch(
+          addLogEntry({
+            timestamp: dateFormat(new Date(), 'isoDateTime'),
+            message: `Intermediate image generated: ${url}`,
+          })
+        );
+        dispatch(setIsProcessing(false));
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    /**
+     * Callback to run when we receive an 'esrganResult' event.
+     */
+    onESRGANResult: (data: InvokeAI.ImageResultResponse) => {
+      try {
+        const { url, metadata, mtime } = data;
+
+        dispatch(
+          addImage({
+            uuid: uuidv4(),
+            url,
+            mtime,
+            metadata,
+          })
+        );
+
+        dispatch(
+          addLogEntry({
+            timestamp: dateFormat(new Date(), 'isoDateTime'),
+            message: `Upscaled: ${url}`,
+          })
+        );
+        dispatch(setIsProcessing(false));
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    /**
+     * Callback to run when we receive a 'gfpganResult' event.
+     */
+    onGFPGANResult: (data: InvokeAI.ImageResultResponse) => {
+      try {
+        const { url, metadata, mtime } = data;
+
+        dispatch(
+          addImage({
+            uuid: uuidv4(),
+            url,
+            mtime,
+            metadata,
+          })
+        );
+
+        dispatch(
+          addLogEntry({
+            timestamp: dateFormat(new Date(), 'isoDateTime'),
+            message: `Fixed faces: ${url}`,
+          })
+        );
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    /**
+     * Callback to run when we receive a 'progressUpdate' event.
+     * TODO: Add additional progress phases
+     */
+    onProgressUpdate: (data: InvokeAI.SystemStatus) => {
+      try {
+        dispatch(setIsProcessing(true));
+        dispatch(setSystemStatus(data));
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    /**
+     * Callback to run when we receive a 'progressUpdate' event.
+     */
+    onError: (data: InvokeAI.ErrorResponse) => {
+      const { message, additionalData } = data;
+
+      if (additionalData) {
+        // TODO: handle more data than short message
+      }
+
+      try {
+        dispatch(
+          addLogEntry({
+            timestamp: dateFormat(new Date(), 'isoDateTime'),
+            message: `Server error: ${message}`,
+            level: 'error',
+          })
+        );
+        dispatch(setIsProcessing(false));
+        dispatch(clearIntermediateImage());
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    /**
+     * Callback to run when we receive a 'galleryImages' event.
+     */
+    onGalleryImages: (data: InvokeAI.GalleryImagesResponse) => {
+      const { images, nextPage, offset } = data;
+
+      /**
+       * the logic here ideally would be in the reducer but we have a side effect:
+       * generating a uuid. so the logic needs to be here, outside redux.
+       */
+
+      // Generate a UUID for each image
+      const preparedImages = images.map((image): InvokeAI.Image => {
+        const { url, metadata, mtime } = image;
+        return {
+          uuid: uuidv4(),
+          url,
+          mtime,
+          metadata,
+        };
+      });
+
+      dispatch(addGalleryImages({ images: preparedImages, nextPage, offset }));
+
+      dispatch(
+        addLogEntry({
+          timestamp: dateFormat(new Date(), 'isoDateTime'),
+          message: `Loaded ${images.length} images`,
+        })
+      );
+    },
+    /**
+     * Callback to run when we receive a 'processingCanceled' event.
+     */
+    onProcessingCanceled: () => {
+      dispatch(setIsProcessing(false));
+
+      const { intermediateImage } = getState().gallery;
+
+      if (intermediateImage) {
+        dispatch(addImage(intermediateImage));
+        dispatch(
+          addLogEntry({
+            timestamp: dateFormat(new Date(), 'isoDateTime'),
+            message: `Intermediate image saved: ${intermediateImage.url}`,
+          })
+        );
+        dispatch(clearIntermediateImage());
+      }
+      dispatch(
+        addLogEntry({
+          timestamp: dateFormat(new Date(), 'isoDateTime'),
+          message: `Processing canceled`,
+          level: 'warning',
+        })
+      );
+    },
+    /**
+     * Callback to run when we receive a 'imageDeleted' event.
+     */
+    onImageDeleted: (data: InvokeAI.ImageUrlAndUuidResponse) => {
+      const { url, uuid } = data;
+      dispatch(removeImage(uuid));
+      dispatch(
+        addLogEntry({
+          timestamp: dateFormat(new Date(), 'isoDateTime'),
+          message: `Image deleted: ${url}`,
+        })
+      );
+    },
+    /**
+     * Callback to run when we receive a 'initialImageUploaded' event.
+     */
+    onInitialImageUploaded: (data: InvokeAI.ImageUrlResponse) => {
+      const { url } = data;
+      dispatch(setInitialImagePath(url));
+      dispatch(
+        addLogEntry({
+          timestamp: dateFormat(new Date(), 'isoDateTime'),
+          message: `Initial image uploaded: ${url}`,
+        })
+      );
+    },
+    /**
+     * Callback to run when we receive a 'maskImageUploaded' event.
+     */
+    onMaskImageUploaded: (data: InvokeAI.ImageUrlResponse) => {
+      const { url } = data;
+      dispatch(setMaskPath(url));
+      dispatch(
+        addLogEntry({
+          timestamp: dateFormat(new Date(), 'isoDateTime'),
+          message: `Mask image uploaded: ${url}`,
+        })
+      );
+    },
+    onSystemConfig: (data: InvokeAI.SystemConfig) => {
+      dispatch(setSystemConfig(data));
+    },
+  };
+};
+
+export default makeSocketIOListeners;

frontend/src/app/socketio/middleware.ts

@@ -0,0 +1,182 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { io } from 'socket.io-client';
+
+import makeSocketIOListeners from './listeners';
+import makeSocketIOEmitters from './emitters';
+
+import * as InvokeAI from '../invokeai';
+
+/**
+ * Creates a socketio middleware to handle communication with server.
+ *
+ * Special `socketio/actionName` actions are created in actions.ts and
+ * exported for use by the application, which treats them like any old
+ * action, using `dispatch` to dispatch them.
+ *
+ * These actions are intercepted here, where `socketio.emit()` calls are
+ * made on their behalf - see `emitters.ts`. The emitter functions
+ * are the outbound communication to the server.
+ *
+ * Listeners are also established here - see `listeners.ts`. The listener
+ * functions receive communication from the server and usually dispatch
+ * some new action to handle whatever data was sent from the server.
+ */
+export const socketioMiddleware = () => {
+  const { hostname, port } = new URL(window.location.href);
+
+  const socketio = io(`http://${hostname}:9090`, {
+    timeout: 60000,
+  });
+
+  let areListenersSet = false;
+
+  const middleware: Middleware = (store) => (next) => (action) => {
+    const {
+      onConnect,
+      onDisconnect,
+      onError,
+      onESRGANResult,
+      onGFPGANResult,
+      onGenerationResult,
+      onIntermediateResult,
+      onProgressUpdate,
+      onGalleryImages,
+      onProcessingCanceled,
+      onImageDeleted,
+      onInitialImageUploaded,
+      onMaskImageUploaded,
+      onSystemConfig,
+    } = makeSocketIOListeners(store);
+
+    const {
+      emitGenerateImage,
+      emitRunESRGAN,
+      emitRunGFPGAN,
+      emitDeleteImage,
+      emitRequestImages,
+      emitRequestNewImages,
+      emitCancelProcessing,
+      emitUploadInitialImage,
+      emitUploadMaskImage,
+      emitRequestSystemConfig,
+    } = makeSocketIOEmitters(store, socketio);
+
+    /**
+     * If this is the first time the middleware has been called (e.g. during store setup),
+     * initialize all our socket.io listeners.
+     */
+    if (!areListenersSet) {
+      socketio.on('connect', () => onConnect());
+
+      socketio.on('disconnect', () => onDisconnect());
+
+      socketio.on('error', (data: InvokeAI.ErrorResponse) => onError(data));
+
+      socketio.on('generationResult', (data: InvokeAI.ImageResultResponse) =>
+        onGenerationResult(data)
+      );
+
+      socketio.on('esrganResult', (data: InvokeAI.ImageResultResponse) =>
+        onESRGANResult(data)
+      );
+
+      socketio.on('gfpganResult', (data: InvokeAI.ImageResultResponse) =>
+        onGFPGANResult(data)
+      );
+
+      socketio.on('intermediateResult', (data: InvokeAI.ImageResultResponse) =>
+        onIntermediateResult(data)
+      );
+
+      socketio.on('progressUpdate', (data: InvokeAI.SystemStatus) =>
+        onProgressUpdate(data)
+      );
+
+      socketio.on('galleryImages', (data: InvokeAI.GalleryImagesResponse) =>
+        onGalleryImages(data)
+      );
+
+      socketio.on('processingCanceled', () => {
+        onProcessingCanceled();
+      });
+
+      socketio.on('imageDeleted', (data: InvokeAI.ImageUrlAndUuidResponse) => {
+        onImageDeleted(data);
+      });
+
+      socketio.on('initialImageUploaded', (data: InvokeAI.ImageUrlResponse) => {
+        onInitialImageUploaded(data);
+      });
+
+      socketio.on('maskImageUploaded', (data: InvokeAI.ImageUrlResponse) => {
+        onMaskImageUploaded(data);
+      });
+
+      socketio.on('systemConfig', (data: InvokeAI.SystemConfig) => {
+        onSystemConfig(data);
+      });
+
+      areListenersSet = true;
+    }
+
+    /**
+     * Handle redux actions caught by middleware.
+     */
+    switch (action.type) {
+      case 'socketio/generateImage': {
+        emitGenerateImage();
+        break;
+      }
+
+      case 'socketio/runESRGAN': {
+        emitRunESRGAN(action.payload);
+        break;
+      }
+
+      case 'socketio/runGFPGAN': {
+        emitRunGFPGAN(action.payload);
+        break;
+      }
+
+      case 'socketio/deleteImage': {
+        emitDeleteImage(action.payload);
+        break;
+      }
+
+      case 'socketio/requestImages': {
+        emitRequestImages();
+        break;
+      }
+
+      case 'socketio/requestNewImages': {
+        emitRequestNewImages();
+        break;
+      }
+
+
+      case 'socketio/cancelProcessing': {
+        emitCancelProcessing();
+        break;
+      }
+
+      case 'socketio/uploadInitialImage': {
+        emitUploadInitialImage(action.payload);
+        break;
+      }
+
+      case 'socketio/uploadMaskImage': {
+        emitUploadMaskImage(action.payload);
+        break;
+      }
+
+      case 'socketio/requestSystemConfig': {
+        emitRequestSystemConfig();
+        break;
+      }
+    }
+
+    next(action);
+  };
+
+  return middleware;
+};

frontend/src/app/store.ts

@@ -1,53 +1,78 @@
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { useDispatch, useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+
 import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
 
-import sdReducer from '../features/sd/sdSlice';
+import optionsReducer from '../features/options/optionsSlice';
 import galleryReducer from '../features/gallery/gallerySlice';
 import systemReducer from '../features/system/systemSlice';
-import { socketioMiddleware } from './socketio';
+import { socketioMiddleware } from './socketio/middleware';
 
-const reducers = combineReducers({
-  sd: sdReducer,
-  gallery: galleryReducer,
-  system: systemReducer,
-});
+/**
+ * redux-persist provides an easy and reliable way to persist state across reloads.
+ *
+ * While we definitely want generation parameters to be persisted, there are a number
+ * of things we do *not* want to be persisted across reloads:
+ *   - Gallery/selected image (user may add/delete images from disk between page loads)
+ *   - Connection/processing status
+ *   - Availability of external libraries like ESRGAN/GFPGAN
+ *
+ * These can be blacklisted in redux-persist.
+ *
+ * The necesssary nested persistors with blacklists are configured below.
+ *
+ * TODO: Do we blacklist initialImagePath? If the image is deleted from disk we get an
+ * ugly 404. But if we blacklist it, then this is a valuable parameter that is lost
+ * on reload. Need to figure out a good way to handle this.
+ */
 
-const persistConfig = {
+const rootPersistConfig = {
   key: 'root',
   storage,
+  blacklist: ['gallery', 'system'],
 };
 
-const persistedReducer = persistReducer(persistConfig, reducers);
+const systemPersistConfig = {
+  key: 'system',
+  storage,
+  blacklist: [
+    'isConnected',
+    'isProcessing',
+    'currentStep',
+    'socketId',
+    'isESRGANAvailable',
+    'isGFPGANAvailable',
+    'currentStep',
+    'totalSteps',
+    'currentIteration',
+    'totalIterations',
+    'currentStatus',
+  ],
+};
 
-/*
-  The frontend needs to be distributed as a production build, so
-  we cannot reasonably ask users to edit the JS and specify the
-  host and port on which the socket.io server will run.
-
-  The solution is to allow server script to be run with arguments
-  (or just edited) providing the host and port. Then, the server
-  serves a route `/socketio_config` which responds with the host
-  and port.
-
-  When the frontend loads, it synchronously requests that route
-  and thus gets the host and port. This requires a suspicious
-  fetch somewhere, and the store setup seems like as good a place
-  as any to make this fetch request.
-*/
+const reducers = combineReducers({
+  options: optionsReducer,
+  gallery: galleryReducer,
+  system: persistReducer(systemPersistConfig, systemReducer),
+});
 
+const persistedReducer = persistReducer(rootPersistConfig, reducers);
 
 // Continue with store setup
 export const store = configureStore({
   reducer: persistedReducer,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
-      // redux-persist sometimes needs to have a function in redux, need to disable this check
+      // redux-persist sometimes needs to temporarily put a function in redux state, need to disable this check
       serializableCheck: false,
     }).concat(socketioMiddleware()),
 });
 
-// Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>;
-// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
 export type AppDispatch = typeof store.dispatch;
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

frontend/src/app/theme.ts

@@ -33,5 +33,20 @@ export const theme = extendTheme({
         fontWeight: 'light',
       },
     },
+    Button: {
+      variants: {
+        imageHoverIconButton: (props: StyleFunctionProps) => ({
+          bg: props.colorMode === 'dark' ? 'blackAlpha.700' : 'whiteAlpha.800',
+          color:
+            props.colorMode === 'dark' ? 'whiteAlpha.700' : 'blackAlpha.700',
+          _hover: {
+            bg:
+              props.colorMode === 'dark' ? 'blackAlpha.800' : 'whiteAlpha.800',
+            color:
+              props.colorMode === 'dark' ? 'whiteAlpha.900' : 'blackAlpha.900',
+          },
+        }),
+      },
+    },
   },
 });

frontend/src/common/components/GuideIcon.tsx

@@ -0,0 +1,22 @@
+import { Box, forwardRef, Icon } from '@chakra-ui/react';
+import { IconType } from 'react-icons';
+import { MdHelp } from 'react-icons/md';
+import { Feature } from '../../app/features';
+import GuidePopover from './GuidePopover';
+
+type GuideIconProps = {
+  feature: Feature;
+  icon?: IconType;
+};
+
+const GuideIcon = forwardRef(
+  ({ feature, icon = MdHelp }: GuideIconProps, ref) => (
+    <GuidePopover feature={feature}>
+      <Box ref={ref}>
+        <Icon as={icon} />
+      </Box>
+    </GuidePopover>
+  )
+);
+
+export default GuideIcon;

frontend/src/common/components/GuidePopover.tsx

@@ -0,0 +1,51 @@
+import {
+  Popover,
+  PopoverArrow,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverHeader,
+  Flex,
+  Box,
+} from '@chakra-ui/react';
+import { SystemState } from '../../features/system/systemSlice';
+import { useAppSelector } from '../../app/store';
+import { RootState } from '../../app/store';
+import { createSelector } from '@reduxjs/toolkit';
+import { ReactElement } from 'react';
+import {  Feature, FEATURES } from '../../app/features';
+
+type GuideProps = {
+  children: ReactElement;
+  feature: Feature;
+};
+
+const systemSelector = createSelector(
+  (state: RootState) => state.system,
+  (system: SystemState) => system.shouldDisplayGuides
+);
+
+const GuidePopover = ({ children, feature }: GuideProps) => {
+  const shouldDisplayGuides = useAppSelector(systemSelector);
+  const { text } = FEATURES[feature];
+  return shouldDisplayGuides ? (
+    <Popover trigger={'hover'}>
+      <PopoverTrigger>
+        <Box>{children}</Box>
+      </PopoverTrigger>
+      <PopoverContent
+        maxWidth="400px"
+        onClick={(e) => e.preventDefault()}
+        cursor={'initial'}
+      >
+        <PopoverArrow />
+        <Flex alignItems={'center'} gap={2} p={4}>
+          {text}
+        </Flex>
+      </PopoverContent>
+    </Popover>
+  ) : (
+    <></>
+  );
+};
+
+export default GuidePopover;

frontend/src/common/components/SDButton.tsx

@@ -0,0 +1,21 @@
+import { Button, ButtonProps } from '@chakra-ui/react';
+
+interface Props extends ButtonProps {
+  label: string;
+}
+
+/**
+ * Reusable customized button component. Originally was more customized - now probably unecessary.
+ *
+ * TODO: Get rid of this.
+ */
+const SDButton = (props: Props) => {
+  const { label, size = 'sm', ...rest } = props;
+  return (
+    <Button size={size} {...rest}>
+      {label}
+    </Button>
+  );
+};
+
+export default SDButton;

frontend/src/common/components/SDNumberInput.tsx

@@ -16,6 +16,9 @@ interface Props extends NumberInputProps {
   width?: string | number;
 }
 
+/**
+ * Customized Chakra FormControl + NumberInput multi-part component.
+ */
 const SDNumberInput = (props: Props) => {
   const {
     label,
@@ -31,7 +34,7 @@ const SDNumberInput = (props: Props) => {
       <Flex gap={2} justifyContent={'space-between'} alignItems={'center'}>
         {label && (
           <FormLabel marginBottom={1}>
-            <Text fontSize={fontSize} whiteSpace='nowrap'>
+            <Text fontSize={fontSize} whiteSpace="nowrap">
               {label}
             </Text>
           </FormLabel>
@@ -42,7 +45,7 @@ const SDNumberInput = (props: Props) => {
           keepWithinRange={false}
           clampValueOnBlur={true}
         >
-          <NumberInputField fontSize={'md'}/>
+          <NumberInputField fontSize={'md'} />
           <NumberInputStepper>
             <NumberIncrementStepper />
             <NumberDecrementStepper />

frontend/src/common/components/SDSelect.tsx

@@ -0,0 +1,56 @@
+import {
+  Flex,
+  FormControl,
+  FormLabel,
+  Select,
+  SelectProps,
+  Text,
+} from '@chakra-ui/react';
+
+interface Props extends SelectProps {
+  label: string;
+  validValues:
+    | Array<number | string>
+    | Array<{ key: string; value: string | number }>;
+}
+/**
+ * Customized Chakra FormControl + Select multi-part component.
+ */
+const SDSelect = (props: Props) => {
+  const {
+    label,
+    isDisabled,
+    validValues,
+    size = 'sm',
+    fontSize = 'md',
+    marginBottom = 1,
+    whiteSpace = 'nowrap',
+    ...rest
+  } = props;
+  return (
+    <FormControl isDisabled={isDisabled}>
+      <Flex justifyContent={'space-between'} alignItems={'center'}>
+        <FormLabel marginBottom={marginBottom}>
+          <Text fontSize={fontSize} whiteSpace={whiteSpace}>
+            {label}
+          </Text>
+        </FormLabel>
+        <Select fontSize={fontSize} size={size} {...rest}>
+          {validValues.map((opt) => {
+            return typeof opt === 'string' || typeof opt === 'number' ? (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ) : (
+              <option key={opt.value} value={opt.value}>
+                {opt.key}
+              </option>
+            );
+          })}
+        </Select>
+      </Flex>
+    </FormControl>
+  );
+};
+
+export default SDSelect;

frontend/src/common/components/SDSwitch.tsx

@@ -11,6 +11,9 @@ interface Props extends SwitchProps {
   width?: string | number;
 }
 
+/**
+ * Customized Chakra FormControl + Switch multi-part component.
+ */
 const SDSwitch = (props: Props) => {
   const {
     label,
@@ -28,7 +31,7 @@ const SDSwitch = (props: Props) => {
             fontSize={fontSize}
             marginBottom={1}
             flexGrow={2}
-            whiteSpace='nowrap'
+            whiteSpace="nowrap"
           >
             {label}
           </FormLabel>

frontend/src/common/hooks/useCheckParameters.ts

@@ -0,0 +1,104 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { useMemo } from 'react';
+import { useAppSelector } from '../../app/store';
+import { RootState } from '../../app/store';
+import { OptionsState } from '../../features/options/optionsSlice';
+import { SystemState } from '../../features/system/systemSlice';
+import { validateSeedWeights } from '../util/seedWeightPairs';
+
+const optionsSelector = createSelector(
+  (state: RootState) => state.options,
+  (options: OptionsState) => {
+    return {
+      prompt: options.prompt,
+      shouldGenerateVariations: options.shouldGenerateVariations,
+      seedWeights: options.seedWeights,
+      maskPath: options.maskPath,
+      initialImagePath: options.initialImagePath,
+      seed: options.seed,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: isEqual,
+    },
+  }
+);
+
+const systemSelector = createSelector(
+  (state: RootState) => state.system,
+  (system: SystemState) => {
+    return {
+      isProcessing: system.isProcessing,
+      isConnected: system.isConnected,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: isEqual,
+    },
+  }
+);
+
+/**
+ * Checks relevant pieces of state to confirm generation will not deterministically fail.
+ * This is used to prevent the 'Generate' button from being clicked.
+ */
+const useCheckParameters = (): boolean => {
+  const {
+    prompt,
+    shouldGenerateVariations,
+    seedWeights,
+    maskPath,
+    initialImagePath,
+    seed,
+  } = useAppSelector(optionsSelector);
+
+  const { isProcessing, isConnected } = useAppSelector(systemSelector);
+
+  return useMemo(() => {
+    // Cannot generate without a prompt
+    if (!prompt) {
+      return false;
+    }
+
+    //  Cannot generate with a mask without img2img
+    if (maskPath && !initialImagePath) {
+      return false;
+    }
+
+    // TODO: job queue
+    // Cannot generate if already processing an image
+    if (isProcessing) {
+      return false;
+    }
+
+    // Cannot generate if not connected
+    if (!isConnected) {
+      return false;
+    }
+
+    // Cannot generate variations without valid seed weights
+    if (
+      shouldGenerateVariations &&
+      (!(validateSeedWeights(seedWeights) || seedWeights === '') || seed === -1)
+    ) {
+      return false;
+    }
+
+    // All good
+    return true;
+  }, [
+    prompt,
+    maskPath,
+    initialImagePath,
+    isProcessing,
+    isConnected,
+    shouldGenerateVariations,
+    seedWeights,
+    seed,
+  ]);
+};
+
+export default useCheckParameters;

frontend/src/common/util/parameterTranslation.ts

@@ -0,0 +1,182 @@
+/*
+    These functions translate frontend state into parameters
+    suitable for consumption by the backend, and vice-versa.
+*/
+
+import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from '../../app/constants';
+import { OptionsState } from '../../features/options/optionsSlice';
+import { SystemState } from '../../features/system/systemSlice';
+import {
+  seedWeightsToString,
+  stringToSeedWeightsArray,
+} from './seedWeightPairs';
+import randomInt from './randomInt';
+
+export const frontendToBackendParameters = (
+  optionsState: OptionsState,
+  systemState: SystemState
+): { [key: string]: any } => {
+  const {
+    prompt,
+    iterations,
+    steps,
+    cfgScale,
+    height,
+    width,
+    sampler,
+    seed,
+    seamless,
+    shouldUseInitImage,
+    img2imgStrength,
+    initialImagePath,
+    maskPath,
+    shouldFitToWidthHeight,
+    shouldGenerateVariations,
+    variationAmount,
+    seedWeights,
+    shouldRunESRGAN,
+    upscalingLevel,
+    upscalingStrength,
+    shouldRunGFPGAN,
+    gfpganStrength,
+    shouldRandomizeSeed,
+  } = optionsState;
+
+  const { shouldDisplayInProgress } = systemState;
+
+  const generationParameters: { [k: string]: any } = {
+    prompt,
+    iterations,
+    steps,
+    cfg_scale: cfgScale,
+    height,
+    width,
+    sampler_name: sampler,
+    seed,
+    seamless,
+    progress_images: shouldDisplayInProgress,
+  };
+
+  generationParameters.seed = shouldRandomizeSeed
+    ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)
+    : seed;
+
+  if (shouldUseInitImage) {
+    generationParameters.init_img = initialImagePath;
+    generationParameters.strength = img2imgStrength;
+    generationParameters.fit = shouldFitToWidthHeight;
+    if (maskPath) {
+      generationParameters.init_mask = maskPath;
+    }
+  }
+
+  if (shouldGenerateVariations) {
+    generationParameters.variation_amount = variationAmount;
+    if (seedWeights) {
+      generationParameters.with_variations =
+        stringToSeedWeightsArray(seedWeights);
+    }
+  } else {
+    generationParameters.variation_amount = 0;
+  }
+
+  let esrganParameters: false | { [k: string]: any } = false;
+  let gfpganParameters: false | { [k: string]: any } = false;
+
+  if (shouldRunESRGAN) {
+    esrganParameters = {
+      level: upscalingLevel,
+      strength: upscalingStrength,
+    };
+  }
+
+  if (shouldRunGFPGAN) {
+    gfpganParameters = {
+      strength: gfpganStrength,
+    };
+  }
+
+  return {
+    generationParameters,
+    esrganParameters,
+    gfpganParameters,
+  };
+};
+
+export const backendToFrontendParameters = (parameters: {
+  [key: string]: any;
+}) => {
+  const {
+    prompt,
+    iterations,
+    steps,
+    cfg_scale,
+    height,
+    width,
+    sampler_name,
+    seed,
+    seamless,
+    progress_images,
+    variation_amount,
+    with_variations,
+    gfpgan_strength,
+    upscale,
+    init_img,
+    init_mask,
+    strength,
+  } = parameters;
+
+  const options: { [key: string]: any } = {
+    shouldDisplayInProgress: progress_images,
+    // init
+    shouldGenerateVariations: false,
+    shouldRunESRGAN: false,
+    shouldRunGFPGAN: false,
+    initialImagePath: '',
+    maskPath: '',
+  };
+
+  if (variation_amount > 0) {
+    options.shouldGenerateVariations = true;
+    options.variationAmount = variation_amount;
+    if (with_variations) {
+      options.seedWeights = seedWeightsToString(with_variations);
+    }
+  }
+
+  if (gfpgan_strength > 0) {
+    options.shouldRunGFPGAN = true;
+    options.gfpganStrength = gfpgan_strength;
+  }
+
+  if (upscale) {
+    options.shouldRunESRGAN = true;
+    options.upscalingLevel = upscale[0];
+    options.upscalingStrength = upscale[1];
+  }
+
+  if (init_img) {
+    options.shouldUseInitImage = true;
+    options.initialImagePath = init_img;
+    options.strength = strength;
+    if (init_mask) {
+      options.maskPath = init_mask;
+    }
+  }
+
+  // if we had a prompt, add all the metadata, but if we don't have a prompt,
+  // we must have only done ESRGAN or GFPGAN so do not add that metadata
+  if (prompt) {
+    options.prompt = prompt;
+    options.iterations = iterations;
+    options.steps = steps;
+    options.cfgScale = cfg_scale;
+    options.height = height;
+    options.width = width;
+    options.sampler = sampler_name;
+    options.seed = seed;
+    options.seamless = seamless;
+  }
+
+  return options;
+};

frontend/src/common/util/promptToString.ts

@@ -0,0 +1,16 @@
+import * as InvokeAI from '../../app/invokeai';
+
+const promptToString = (prompt: InvokeAI.Prompt): string => {
+  if (prompt.length === 1) {
+    return prompt[0].prompt;
+  }
+
+  return prompt
+    .map(
+      (promptItem: InvokeAI.PromptItem): string =>
+        `${promptItem.prompt}:${promptItem.weight}`
+    )
+    .join(' ');
+};
+
+export default promptToString;

frontend/src/common/util/seedWeightPairs.ts

@@ -0,0 +1,68 @@
+import * as InvokeAI from '../../app/invokeai';
+
+export const stringToSeedWeights = (
+  string: string
+): InvokeAI.SeedWeights | boolean => {
+  const stringPairs = string.split(',');
+  const arrPairs = stringPairs.map((p) => p.split(':'));
+  const pairs = arrPairs.map((p: Array<string>): InvokeAI.SeedWeightPair => {
+    return { seed: parseInt(p[0]), weight: parseFloat(p[1]) };
+  });
+
+  if (!validateSeedWeights(pairs)) {
+    return false;
+  }
+
+  return pairs;
+};
+
+export const validateSeedWeights = (
+  seedWeights: InvokeAI.SeedWeights | string
+): boolean => {
+  return typeof seedWeights === 'string'
+    ? Boolean(stringToSeedWeights(seedWeights))
+    : Boolean(
+        seedWeights.length &&
+          !seedWeights.some((pair: InvokeAI.SeedWeightPair) => {
+            const { seed, weight } = pair;
+            const isSeedValid = !isNaN(parseInt(seed.toString(), 10));
+            const isWeightValid =
+              !isNaN(parseInt(weight.toString(), 10)) &&
+              weight >= 0 &&
+              weight <= 1;
+            return !(isSeedValid && isWeightValid);
+          })
+      );
+};
+
+export const seedWeightsToString = (
+  seedWeights: InvokeAI.SeedWeights
+): string => {
+  return seedWeights.reduce((acc, pair, i, arr) => {
+    const { seed, weight } = pair;
+    acc += `${seed}:${weight}`;
+    if (i !== arr.length - 1) {
+      acc += ',';
+    }
+    return acc;
+  }, '');
+};
+
+export const seedWeightsToArray = (
+  seedWeights: InvokeAI.SeedWeights
+): Array<Array<number>> => {
+  return seedWeights.map((pair: InvokeAI.SeedWeightPair) => [
+    pair.seed,
+    pair.weight,
+  ]);
+};
+
+export const stringToSeedWeightsArray = (
+  string: string
+): Array<Array<number>> => {
+  const stringPairs = string.split(',');
+  const arrPairs = stringPairs.map((p) => p.split(':'));
+  return arrPairs.map(
+    (p: Array<string>): Array<number> => [parseInt(p[0]), parseFloat(p[1])]
+  );
+};

frontend/src/components/SDButton.tsx

@@ -1,16 +0,0 @@
-import { Button, ButtonProps } from '@chakra-ui/react';
-
-interface Props extends ButtonProps {
-    label: string;
-}
-
-const SDButton = (props: Props) => {
-    const { label, size = 'sm', ...rest } = props;
-    return (
-        <Button size={size} {...rest}>
-            {label}
-        </Button>
-    );
-};
-
-export default SDButton;

frontend/src/components/SDSelect.tsx

@@ -1,57 +0,0 @@
-import {
-    Flex,
-    FormControl,
-    FormLabel,
-    Select,
-    SelectProps,
-    Text,
-} from '@chakra-ui/react';
-
-interface Props extends SelectProps {
-    label: string;
-    validValues:
-        | Array<number | string>
-        | Array<{ key: string; value: string | number }>;
-}
-
-const SDSelect = (props: Props) => {
-    const {
-        label,
-        isDisabled,
-        validValues,
-        size = 'sm',
-        fontSize = 'md',
-        marginBottom = 1,
-        whiteSpace = 'nowrap',
-        ...rest
-    } = props;
-    return (
-        <FormControl isDisabled={isDisabled}>
-            <Flex justifyContent={'space-between'} alignItems={'center'}>
-                <FormLabel
-                    marginBottom={marginBottom}
-                >
-                    <Text fontSize={fontSize} whiteSpace={whiteSpace}>
-                        {label}
-                    </Text>
-                </FormLabel>
-                <Select fontSize={fontSize} size={size} {...rest}>
-                    {validValues.map((opt) => {
-                        return typeof opt === 'string' ||
-                            typeof opt === 'number' ? (
-                            <option key={opt} value={opt}>
-                                {opt}
-                            </option>
-                        ) : (
-                            <option key={opt.value} value={opt.value}>
-                                {opt.key}
-                            </option>
-                        );
-                    })}
-                </Select>
-            </Flex>
-        </FormControl>
-    );
-};
-
-export default SDSelect;

frontend/src/features/gallery/CurrentImage.tsx

@@ -1,161 +0,0 @@
-import { Center, Flex, Image, useColorModeValue } from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from '../../app/hooks';
-import { RootState } from '../../app/store';
-import { setAllParameters, setInitialImagePath, setSeed } from '../sd/sdSlice';
-import { useState } from 'react';
-import ImageMetadataViewer from './ImageMetadataViewer';
-import DeleteImageModalButton from './DeleteImageModalButton';
-import SDButton from '../../components/SDButton';
-import { runESRGAN, runGFPGAN } from '../../app/socketio';
-import { createSelector } from '@reduxjs/toolkit';
-import { SystemState } from '../system/systemSlice';
-import { isEqual } from 'lodash';
-
-const height = 'calc(100vh - 238px)';
-
-const systemSelector = createSelector(
-    (state: RootState) => state.system,
-    (system: SystemState) => {
-        return {
-            isProcessing: system.isProcessing,
-            isConnected: system.isConnected,
-            isGFPGANAvailable: system.isGFPGANAvailable,
-            isESRGANAvailable: system.isESRGANAvailable,
-        };
-    },
-    {
-        memoizeOptions: {
-            resultEqualityCheck: isEqual,
-        },
-    }
-);
-
-const CurrentImage = () => {
-    const { currentImage, intermediateImage } = useAppSelector(
-        (state: RootState) => state.gallery
-    );
-    const { isProcessing, isConnected, isGFPGANAvailable, isESRGANAvailable } =
-        useAppSelector(systemSelector);
-
-    const dispatch = useAppDispatch();
-
-    const bgColor = useColorModeValue(
-        'rgba(255, 255, 255, 0.85)',
-        'rgba(0, 0, 0, 0.8)'
-    );
-
-    const [shouldShowImageDetails, setShouldShowImageDetails] =
-        useState<boolean>(false);
-
-    const imageToDisplay = intermediateImage || currentImage;
-
-    return (
-        <Flex direction={'column'} rounded={'md'} borderWidth={1} p={2} gap={2}>
-            {imageToDisplay && (
-                <Flex gap={2}>
-                    <SDButton
-                        label='Use as initial image'
-                        colorScheme={'gray'}
-                        flexGrow={1}
-                        variant={'outline'}
-                        onClick={() =>
-                            dispatch(setInitialImagePath(imageToDisplay.url))
-                        }
-                    />
-
-                    <SDButton
-                        label='Use all'
-                        colorScheme={'gray'}
-                        flexGrow={1}
-                        variant={'outline'}
-                        onClick={() =>
-                            dispatch(setAllParameters(imageToDisplay.metadata))
-                        }
-                    />
-
-                    <SDButton
-                        label='Use seed'
-                        colorScheme={'gray'}
-                        flexGrow={1}
-                        variant={'outline'}
-                        isDisabled={!imageToDisplay.metadata.seed}
-                        onClick={() =>
-                            dispatch(setSeed(imageToDisplay.metadata.seed!))
-                        }
-                    />
-
-                    <SDButton
-                        label='Upscale'
-                        colorScheme={'gray'}
-                        flexGrow={1}
-                        variant={'outline'}
-                        isDisabled={
-                            !isESRGANAvailable ||
-                            Boolean(intermediateImage) ||
-                            !(isConnected && !isProcessing)
-                        }
-                        onClick={() => dispatch(runESRGAN(imageToDisplay))}
-                    />
-                    <SDButton
-                        label='Fix faces'
-                        colorScheme={'gray'}
-                        flexGrow={1}
-                        variant={'outline'}
-                        isDisabled={
-                            !isGFPGANAvailable ||
-                            Boolean(intermediateImage) ||
-                            !(isConnected && !isProcessing)
-                        }
-                        onClick={() => dispatch(runGFPGAN(imageToDisplay))}
-                    />
-                    <SDButton
-                        label='Details'
-                        colorScheme={'gray'}
-                        variant={shouldShowImageDetails ? 'solid' : 'outline'}
-                        borderWidth={1}
-                        flexGrow={1}
-                        onClick={() =>
-                            setShouldShowImageDetails(!shouldShowImageDetails)
-                        }
-                    />
-                    <DeleteImageModalButton image={imageToDisplay}>
-                        <SDButton
-                            label='Delete'
-                            colorScheme={'red'}
-                            flexGrow={1}
-                            variant={'outline'}
-                            isDisabled={Boolean(intermediateImage)}
-                        />
-                    </DeleteImageModalButton>
-                </Flex>
-            )}
-            <Center height={height} position={'relative'}>
-                {imageToDisplay && (
-                    <Image
-                        src={imageToDisplay.url}
-                        fit='contain'
-                        maxWidth={'100%'}
-                        maxHeight={'100%'}
-                    />
-                )}
-                {imageToDisplay && shouldShowImageDetails && (
-                    <Flex
-                        width={'100%'}
-                        height={'100%'}
-                        position={'absolute'}
-                        top={0}
-                        left={0}
-                        p={3}
-                        boxSizing='border-box'
-                        backgroundColor={bgColor}
-                        overflow='scroll'
-                    >
-                        <ImageMetadataViewer image={imageToDisplay} />
-                    </Flex>
-                )}
-            </Center>
-        </Flex>
-    );
-};
-
-export default CurrentImage;

frontend/src/features/gallery/CurrentImageButtons.tsx

@@ -0,0 +1,155 @@
+import { Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+
+import * as InvokeAI from '../../app/invokeai';
+
+import { useAppDispatch, useAppSelector } from '../../app/store';
+import { RootState } from '../../app/store';
+import {
+  setAllParameters,
+  setInitialImagePath,
+  setSeed,
+} from '../options/optionsSlice';
+import DeleteImageModal from './DeleteImageModal';
+import { SystemState } from '../system/systemSlice';
+import SDButton from '../../common/components/SDButton';
+import { runESRGAN, runGFPGAN } from '../../app/socketio/actions';
+
+const systemSelector = createSelector(
+  (state: RootState) => state.system,
+  (system: SystemState) => {
+    return {
+      isProcessing: system.isProcessing,
+      isConnected: system.isConnected,
+      isGFPGANAvailable: system.isGFPGANAvailable,
+      isESRGANAvailable: system.isESRGANAvailable,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: isEqual,
+    },
+  }
+);
+
+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 dispatch = useAppDispatch();
+
+  const { intermediateImage } = useAppSelector(
+    (state: RootState) => state.gallery
+  );
+
+  const { upscalingLevel, gfpganStrength } = useAppSelector(
+    (state: RootState) => state.options
+  );
+
+  const { isProcessing, isConnected, isGFPGANAvailable, isESRGANAvailable } =
+    useAppSelector(systemSelector);
+
+  const handleClickUseAsInitialImage = () =>
+    dispatch(setInitialImagePath(image.url));
+
+  const handleClickUseAllParameters = () =>
+    dispatch(setAllParameters(image.metadata));
+
+  // 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));
+  const handleClickUpscale = () => dispatch(runESRGAN(image));
+
+  const handleClickFixFaces = () => dispatch(runGFPGAN(image));
+
+  const handleClickShowImageDetails = () =>
+    setShouldShowImageDetails(!shouldShowImageDetails);
+
+  return (
+    <Flex gap={2}>
+      <SDButton
+        label="Use as initial image"
+        colorScheme={'gray'}
+        flexGrow={1}
+        variant={'outline'}
+        onClick={handleClickUseAsInitialImage}
+      />
+
+      <SDButton
+        label="Use all"
+        colorScheme={'gray'}
+        flexGrow={1}
+        variant={'outline'}
+        isDisabled={!['txt2img', 'img2img'].includes(image?.metadata?.image?.type)}
+        onClick={handleClickUseAllParameters}
+      />
+
+      <SDButton
+        label="Use seed"
+        colorScheme={'gray'}
+        flexGrow={1}
+        variant={'outline'}
+        isDisabled={!image?.metadata?.image?.seed}
+        onClick={handleClickUseSeed}
+      />
+
+      <SDButton
+        label="Upscale"
+        colorScheme={'gray'}
+        flexGrow={1}
+        variant={'outline'}
+        isDisabled={
+          !isESRGANAvailable ||
+          Boolean(intermediateImage) ||
+          !(isConnected && !isProcessing) ||
+          !upscalingLevel
+        }
+        onClick={handleClickUpscale}
+      />
+      <SDButton
+        label="Fix faces"
+        colorScheme={'gray'}
+        flexGrow={1}
+        variant={'outline'}
+        isDisabled={
+          !isGFPGANAvailable ||
+          Boolean(intermediateImage) ||
+          !(isConnected && !isProcessing) ||
+          !gfpganStrength
+        }
+        onClick={handleClickFixFaces}
+      />
+      <SDButton
+        label="Details"
+        colorScheme={'gray'}
+        variant={shouldShowImageDetails ? 'solid' : 'outline'}
+        borderWidth={1}
+        flexGrow={1}
+        onClick={handleClickShowImageDetails}
+      />
+      <DeleteImageModal image={image}>
+        <SDButton
+          label="Delete"
+          colorScheme={'red'}
+          flexGrow={1}
+          variant={'outline'}
+          isDisabled={Boolean(intermediateImage)}
+        />
+      </DeleteImageModal>
+    </Flex>
+  );
+};
+
+export default CurrentImageButtons;

frontend/src/features/gallery/CurrentImageDisplay.tsx

@@ -0,0 +1,67 @@
+import { Center, Flex, Image, Text, useColorModeValue } from '@chakra-ui/react';
+import { useAppSelector } from '../../app/store';
+import { RootState } from '../../app/store';
+import { useState } from 'react';
+import ImageMetadataViewer from './ImageMetadataViewer';
+import CurrentImageButtons from './CurrentImageButtons';
+
+// TODO: With CSS Grid I had a hard time centering the image in a grid item. This is needed for that.
+const height = 'calc(100vh - 238px)';
+
+/**
+ * Displays the current image if there is one, plus associated actions.
+ */
+const CurrentImageDisplay = () => {
+  const { currentImage, intermediateImage } = useAppSelector(
+    (state: RootState) => state.gallery
+  );
+
+  const bgColor = useColorModeValue(
+    'rgba(255, 255, 255, 0.85)',
+    'rgba(0, 0, 0, 0.8)'
+  );
+
+  const [shouldShowImageDetails, setShouldShowImageDetails] =
+    useState<boolean>(false);
+
+  const imageToDisplay = intermediateImage || currentImage;
+
+  return imageToDisplay ? (
+    <Flex direction={'column'} borderWidth={1} rounded={'md'} p={2} gap={2}>
+      <CurrentImageButtons
+        image={imageToDisplay}
+        shouldShowImageDetails={shouldShowImageDetails}
+        setShouldShowImageDetails={setShouldShowImageDetails}
+      />
+      <Center height={height} position={'relative'}>
+        <Image
+          src={imageToDisplay.url}
+          fit="contain"
+          maxWidth={'100%'}
+          maxHeight={'100%'}
+        />
+        {shouldShowImageDetails && (
+          <Flex
+            width={'100%'}
+            height={'100%'}
+            position={'absolute'}
+            top={0}
+            left={0}
+            p={3}
+            boxSizing="border-box"
+            backgroundColor={bgColor}
+            overflow="scroll"
+          >
+            <ImageMetadataViewer image={imageToDisplay} />
+          </Flex>
+        )}
+      </Center>
+    </Flex>
+  ) : (
+    <Center height={'100%'} position={'relative'}>
+      <Text size={'xl'}>No image selected</Text>
+    </Center>
+  );
+};
+
+export default CurrentImageDisplay;

frontend/src/features/gallery/DeleteImageModal.tsx

@@ -0,0 +1,125 @@
+import {
+  Text,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  useDisclosure,
+  Button,
+  Switch,
+  FormControl,
+  FormLabel,
+  Flex,
+} from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import {
+  ChangeEvent,
+  cloneElement,
+  forwardRef,
+  ReactElement,
+  SyntheticEvent,
+  useRef,
+} from 'react';
+import { useAppDispatch, useAppSelector } from '../../app/store';
+import { deleteImage } from '../../app/socketio/actions';
+import { RootState } from '../../app/store';
+import { setShouldConfirmOnDelete, SystemState } from '../system/systemSlice';
+import * as InvokeAI from '../../app/invokeai';
+
+interface DeleteImageModalProps {
+  /**
+   *  Component which, on click, should delete the image/open the modal.
+   */
+  children: ReactElement;
+  /**
+   * The image to delete.
+   */
+  image: InvokeAI.Image;
+}
+
+const systemSelector = createSelector(
+  (state: RootState) => state.system,
+  (system: SystemState) => system.shouldConfirmOnDelete
+);
+
+/**
+ * Needs a child, which will act as the button to delete an image.
+ * If system.shouldConfirmOnDelete is true, a confirmation modal is displayed.
+ * If it is false, the image is deleted immediately.
+ * The confirmation modal has a "Don't ask me again" switch to set the boolean.
+ */
+const DeleteImageModal = forwardRef(
+  ({ image, children }: DeleteImageModalProps, ref) => {
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const dispatch = useAppDispatch();
+    const shouldConfirmOnDelete = useAppSelector(systemSelector);
+    const cancelRef = useRef<HTMLButtonElement>(null);
+
+    const handleClickDelete = (e: SyntheticEvent) => {
+      e.stopPropagation();
+      shouldConfirmOnDelete ? onOpen() : handleDelete();
+    };
+
+    const handleDelete = () => {
+      dispatch(deleteImage(image));
+      onClose();
+    };
+
+    const handleChangeShouldConfirmOnDelete = (
+      e: ChangeEvent<HTMLInputElement>
+    ) => dispatch(setShouldConfirmOnDelete(!e.target.checked));
+
+    return (
+      <>
+        {cloneElement(children, {
+          // TODO: This feels wrong.
+          onClick: handleClickDelete,
+          ref: ref,
+        })}
+
+        <AlertDialog
+          isOpen={isOpen}
+          leastDestructiveRef={cancelRef}
+          onClose={onClose}
+        >
+          <AlertDialogOverlay>
+            <AlertDialogContent>
+              <AlertDialogHeader fontSize="lg" fontWeight="bold">
+                Delete image
+              </AlertDialogHeader>
+
+              <AlertDialogBody>
+                <Flex direction={'column'} gap={5}>
+                  <Text>
+                    Are you sure? You can't undo this action afterwards.
+                  </Text>
+                  <FormControl>
+                    <Flex alignItems={'center'}>
+                      <FormLabel mb={0}>Don't ask me again</FormLabel>
+                      <Switch
+                        checked={!shouldConfirmOnDelete}
+                        onChange={handleChangeShouldConfirmOnDelete}
+                      />
+                    </Flex>
+                  </FormControl>
+                </Flex>
+              </AlertDialogBody>
+              <AlertDialogFooter>
+                <Button ref={cancelRef} onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button colorScheme="red" onClick={handleDelete} ml={3}>
+                  Delete
+                </Button>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogOverlay>
+        </AlertDialog>
+      </>
+    );
+  }
+);
+
+export default DeleteImageModal;

frontend/src/features/gallery/DeleteImageModalButton.tsx

@@ -1,94 +0,0 @@
-import {
-  IconButtonProps,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  useDisclosure,
-} from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import {
-  cloneElement,
-  ReactElement,
-  SyntheticEvent,
-} from 'react';
-import { useAppDispatch, useAppSelector } from '../../app/hooks';
-import { deleteImage } from '../../app/socketio';
-import { RootState } from '../../app/store';
-import SDButton from '../../components/SDButton';
-import { setShouldConfirmOnDelete, SystemState } from '../system/systemSlice';
-import { SDImage } from './gallerySlice';
-
-interface Props extends IconButtonProps {
-  image: SDImage;
-  'aria-label': string;
-  children: ReactElement;
-}
-
-const systemSelector = createSelector(
-  (state: RootState) => state.system,
-  (system: SystemState) => system.shouldConfirmOnDelete
-);
-
-/*
-TODO: The modal and button to open it should be two different components,
-but their state is closely related and I'm not sure how best to accomplish it.
-*/
-const DeleteImageModalButton = (props: Omit<Props, 'aria-label'>) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const dispatch = useAppDispatch();
-  const shouldConfirmOnDelete = useAppSelector(systemSelector);
-
-  const handleClickDelete = (e: SyntheticEvent) => {
-    e.stopPropagation();
-    shouldConfirmOnDelete ? onOpen() : handleDelete();
-  };
-
-  const { image, children } = props;
-
-  const handleDelete = () => {
-    dispatch(deleteImage(image));
-    onClose();
-  };
-
-  const handleDeleteAndDontAsk = () => {
-    dispatch(deleteImage(image));
-    dispatch(setShouldConfirmOnDelete(false));
-    onClose();
-  };
-
-  return (
-    <>
-      {cloneElement(children, {
-        onClick: handleClickDelete,
-      })}
-
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Are you sure you want to delete this image?</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Text>It will be deleted forever!</Text>
-          </ModalBody>
-
-          <ModalFooter justifyContent={'space-between'}>
-            <SDButton label={'Yes'} colorScheme='red' onClick={handleDelete} />
-            <SDButton
-              label={"Yes, and don't ask me again"}
-              colorScheme='red'
-              onClick={handleDeleteAndDontAsk}
-            />
-            <SDButton label='Cancel' colorScheme='blue' onClick={onClose} />
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-};
-
-export default DeleteImageModalButton;

frontend/src/features/gallery/HoverableImage.tsx

@@ -0,0 +1,141 @@
+import {
+  Box,
+  Flex,
+  Icon,
+  IconButton,
+  Image,
+  Tooltip,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { useAppDispatch } from '../../app/store';
+import { setCurrentImage } from './gallerySlice';
+import { FaCheck, FaSeedling, FaTrashAlt } from 'react-icons/fa';
+import DeleteImageModal from './DeleteImageModal';
+import { memo, SyntheticEvent, useState } from 'react';
+import { setAllParameters, setSeed } from '../options/optionsSlice';
+import * as InvokeAI from '../../app/invokeai';
+import { IoArrowUndoCircleOutline } from 'react-icons/io5';
+
+interface HoverableImageProps {
+  image: InvokeAI.Image;
+  isSelected: boolean;
+}
+
+const memoEqualityCheck = (
+  prev: HoverableImageProps,
+  next: HoverableImageProps
+) => prev.image.uuid === next.image.uuid && prev.isSelected === next.isSelected;
+
+/**
+ * Gallery image component with delete/use all/use seed buttons on hover.
+ */
+const HoverableImage = memo((props: HoverableImageProps) => {
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+  const dispatch = useAppDispatch();
+
+  const 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 { image, isSelected } = props;
+  const { url, uuid, metadata } = image;
+
+  const handleMouseOver = () => setIsHovered(true);
+  const handleMouseOut = () => setIsHovered(false);
+
+  const handleClickSetAllParameters = (e: SyntheticEvent) => {
+    e.stopPropagation();
+    dispatch(setAllParameters(metadata));
+  };
+
+  const handleClickSetSeed = (e: SyntheticEvent) => {
+    e.stopPropagation();
+    dispatch(setSeed(image.metadata.image.seed));
+  };
+
+  const handleClickImage = () => dispatch(setCurrentImage(image));
+
+  return (
+    <Box position={'relative'} key={uuid}>
+      <Image
+        width={120}
+        height={120}
+        objectFit="cover"
+        rounded={'md'}
+        src={url}
+        loading={'lazy'}
+        backgroundColor={bgColor}
+      />
+      <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}
+      >
+        {isSelected && (
+          <Icon fill={checkColor} width={'50%'} height={'50%'} as={FaCheck} />
+        )}
+        {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>
+            </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 && (
+              <Tooltip label="Use seed">
+                <IconButton
+                  aria-label="Use seed"
+                  icon={<FaSeedling />}
+                  size="xs"
+                  fontSize={16}
+                  variant={'imageHoverIconButton'}
+                  onClickCapture={handleClickSetSeed}
+                />
+              </Tooltip>
+            )}
+          </Flex>
+        )}
+      </Flex>
+    </Box>
+  );
+}, memoEqualityCheck);
+
+export default HoverableImage;

frontend/src/features/gallery/ImageGallery.tsx

@@ -0,0 +1,47 @@
+import { Button, Center, Flex, Text } from '@chakra-ui/react';
+import { requestImages } from '../../app/socketio/actions';
+import { RootState, useAppDispatch } from '../../app/store';
+import { useAppSelector } from '../../app/store';
+import HoverableImage from './HoverableImage';
+
+/**
+ * Simple image gallery.
+ */
+const ImageGallery = () => {
+  const { images, currentImageUuid } = useAppSelector(
+    (state: RootState) => state.gallery
+  );
+  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 handleClickLoadMore = () => {
+    dispatch(requestImages());
+  };
+
+  return images.length ? (
+    <Flex direction={'column'} gap={2} pb={2}>
+      <Flex gap={2} wrap="wrap">
+        {images.map((image) => {
+          const { uuid } = image;
+          const isSelected = currentImageUuid === uuid;
+          return (
+            <HoverableImage key={uuid} image={image} isSelected={isSelected} />
+          );
+        })}
+      </Flex>
+      <Button onClick={handleClickLoadMore}>Load more...</Button>
+    </Flex>
+  ) : (
+    <Center height={'100%'} position={'relative'}>
+      <Text size={'xl'}>No images in gallery</Text>
+    </Center>
+  );
+};
+
+export default ImageGallery;

frontend/src/features/gallery/ImageMetadataViewer.tsx

@@ -1,124 +1,321 @@
 import {
-    Center,
-    Flex,
-    IconButton,
-    Link,
-    List,
-    ListItem,
-    Text,
+  Box,
+  Center,
+  Flex,
+  IconButton,
+  Link,
+  Text,
+  Tooltip,
+  useColorModeValue,
 } from '@chakra-ui/react';
-import { FaPlus } from 'react-icons/fa';
-import { PARAMETERS } from '../../app/constants';
-import { useAppDispatch } from '../../app/hooks';
-import SDButton from '../../components/SDButton';
-import { setAllParameters, setParameter } from '../sd/sdSlice';
-import { SDImage, SDMetadata } from './gallerySlice';
+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 Props = {
-    image: SDImage;
+type MetadataItemProps = {
+  isLink?: boolean;
+  label: string;
+  onClick?: () => void;
+  value: number | string | boolean;
 };
 
-const ImageMetadataViewer = ({ image }: Props) => {
-    const dispatch = useAppDispatch();
+/**
+ * Component to display an individual metadata item or parameter.
+ */
+const MetadataItem = ({ label, value, onClick, isLink }: 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>
+      )}
+      <Text fontWeight={'semibold'} whiteSpace={'nowrap'}>
+        {label}:
+      </Text>
+      {isLink ? (
+        <Link href={value.toString()} isExternal wordBreak={'break-all'}>
+          {value.toString()} <ExternalLinkIcon mx="2px" />
+        </Link>
+      ) : (
+        <Text maxHeight={100} overflowY={'scroll'} wordBreak={'break-all'}>
+          {value.toString()}
+        </Text>
+      )}
+    </Flex>
+  );
+};
 
-    const keys = Object.keys(PARAMETERS);
+type ImageMetadataViewerProps = {
+  image: InvokeAI.Image;
+};
 
-    const metadata: Array<{
-        label: string;
-        key: string;
-        value: string | number | boolean;
-    }> = [];
+// TODO: I don't know if this is needed.
+const memoEqualityCheck = (
+  prev: ImageMetadataViewerProps,
+  next: ImageMetadataViewerProps
+) => prev.image.uuid === next.image.uuid;
 
-    keys.forEach((key) => {
-        const value = image.metadata[key as keyof SDMetadata];
-        if (value !== undefined) {
-            metadata.push({ label: PARAMETERS[key], key, value });
-        }
-    });
+// TODO: Show more interesting information in this component.
 
-    return (
-        <Flex gap={2} direction={'column'} overflowY={'scroll'} width={'100%'}>
-            <SDButton
-                label='Use all parameters'
-                colorScheme={'gray'}
-                padding={2}
-                isDisabled={metadata.length === 0}
-                onClick={() => dispatch(setAllParameters(image.metadata))}
+/**
+ * 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'} overflowY={'scroll'} 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="Type" value={type} />}
+          {['esrgan', 'gfpgan'].includes(type) && (
+            <MetadataItem label="Original image" value={orig_path} isLink />
+          )}
+          {type === 'gfpgan' && strength && (
+            <MetadataItem
+              label="Fix faces strength"
+              value={strength}
+              onClick={() => dispatch(setGfpganStrength(strength))}
             />
-            <Flex gap={2}>
-                <Text fontWeight={'semibold'}>File:</Text>
-                <Link href={image.url} isExternal>
-                    <Text>{image.url}</Text>
-                </Link>
-            </Flex>
-            {metadata.length ? (
-                <>
-                    <List>
-                        {metadata.map((parameter, i) => {
-                            const { label, key, value } = parameter;
-                            return (
-                                <ListItem key={i} pb={1}>
-                                    <Flex gap={2}>
-                                        <IconButton
-                                            aria-label='Use this parameter'
-                                            icon={<FaPlus />}
-                                            size={'xs'}
-                                            onClick={() =>
-                                                dispatch(
-                                                    setParameter({
-                                                        key,
-                                                        value,
-                                                    })
-                                                )
-                                            }
-                                        />
-                                        <Text fontWeight={'semibold'}>
-                                            {label}:
-                                        </Text>
-
-                                        {value === undefined ||
-                                        value === null ||
-                                        value === '' ||
-                                        value === 0 ? (
-                                            <Text
-                                                maxHeight={100}
-                                                fontStyle={'italic'}
-                                            >
-                                                None
-                                            </Text>
-                                        ) : (
-                                            <Text
-                                                maxHeight={100}
-                                                overflowY={'scroll'}
-                                            >
-                                                {value.toString()}
-                                            </Text>
-                                        )}
-                                    </Flex>
-                                </ListItem>
-                            );
-                        })}
-                    </List>
-                    <Flex gap={2}>
-                        <Text fontWeight={'semibold'}>Raw:</Text>
-                        <Text
-                            maxHeight={100}
-                            overflowY={'scroll'}
-                            wordBreak={'break-all'}
-                        >
-                            {JSON.stringify(image.metadata)}
-                        </Text>
-                    </Flex>
-                </>
-            ) : (
-                <Center width={'100%'} pt={10}>
-                    <Text fontSize={'lg'} fontWeight='semibold'>
-                        No metadata available
-                    </Text>
-                </Center>
+          )}
+          {type === 'esrgan' && scale && (
+            <MetadataItem
+              label="Upscaling scale"
+              value={scale}
+              onClick={() => dispatch(setUpscalingLevel(scale))}
+            />
+          )}
+          {type === 'esrgan' && strength && (
+            <MetadataItem
+              label="Upscaling strength"
+              value={strength}
+              onClick={() => dispatch(setUpscalingStrength(strength))}
+            />
+          )}
+          {prompt && (
+            <MetadataItem
+              label="Prompt"
+              value={promptToString(prompt)}
+              onClick={() => dispatch(setPrompt(prompt))}
+            />
+          )}
+          {seed && (
+            <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 && (
+            <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 &&
+            postprocessing.map(
+              (postprocess: InvokeAI.PostProcessedImageMetadata) => {
+                if (postprocess.type === 'esrgan') {
+                  const { scale, strength } = postprocess;
+                  return (
+                    <>
+                      <MetadataItem
+                        label="Upscaling scale"
+                        value={scale}
+                        onClick={() => dispatch(setUpscalingLevel(scale))}
+                      />
+                      <MetadataItem
+                        label="Upscaling strength"
+                        value={strength}
+                        onClick={() => dispatch(setUpscalingStrength(strength))}
+                      />
+                    </>
+                  );
+                } else if (postprocess.type === 'gfpgan') {
+                  const { strength } = postprocess;
+                  return (
+                    <MetadataItem
+                      label="Fix faces 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>
+            <Box
+              // maxHeight={200}
+              overflow={'scroll'}
+              flexGrow={3}
+              wordBreak={'break-all'}
+              bgColor={jsonBgColor}
+              padding={2}
+            >
+              <pre>{metadataJSON}</pre>
+            </Box>
+          </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/ImageRoll.tsx

@@ -1,150 +0,0 @@
-import {
-    Box,
-    Flex,
-    Icon,
-    IconButton,
-    Image,
-    useColorModeValue,
-} from '@chakra-ui/react';
-import { RootState } from '../../app/store';
-import { useAppDispatch, useAppSelector } from '../../app/hooks';
-import { SDImage, setCurrentImage } from './gallerySlice';
-import { FaCheck, FaCopy, FaSeedling, FaTrash } from 'react-icons/fa';
-import DeleteImageModalButton from './DeleteImageModalButton';
-import { memo, SyntheticEvent, useState } from 'react';
-import { setAllParameters, setSeed } from '../sd/sdSlice';
-
-interface HoverableImageProps {
-    image: SDImage;
-    isSelected: boolean;
-}
-
-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 { image, isSelected } = props;
-        const { url, uuid, metadata } = image;
-
-        const handleMouseOver = () => setIsHovered(true);
-        const handleMouseOut = () => setIsHovered(false);
-        const handleClickSetAllParameters = (e: SyntheticEvent) => {
-            e.stopPropagation();
-            dispatch(setAllParameters(metadata));
-        };
-        const handleClickSetSeed = (e: SyntheticEvent) => {
-            e.stopPropagation();
-            dispatch(setSeed(image.metadata.seed!)); // component not rendered unless this exists
-        };
-
-        return (
-            <Box position={'relative'} key={uuid}>
-                <Image
-                    width={120}
-                    height={120}
-                    objectFit='cover'
-                    rounded={'md'}
-                    src={url}
-                    loading={'lazy'}
-                    backgroundColor={bgColor}
-                />
-                <Flex
-                    cursor={'pointer'}
-                    position={'absolute'}
-                    top={0}
-                    left={0}
-                    rounded={'md'}
-                    width='100%'
-                    height='100%'
-                    alignItems={'center'}
-                    justifyContent={'center'}
-                    background={isSelected ? bgGradient : undefined}
-                    onClick={() => dispatch(setCurrentImage(image))}
-                    onMouseOver={handleMouseOver}
-                    onMouseOut={handleMouseOut}
-                >
-                    {isSelected && (
-                        <Icon
-                            fill={checkColor}
-                            width={'50%'}
-                            height={'50%'}
-                            as={FaCheck}
-                        />
-                    )}
-                    {isHovered && (
-                        <Flex
-                            direction={'column'}
-                            gap={1}
-                            position={'absolute'}
-                            top={1}
-                            right={1}
-                        >
-                            <DeleteImageModalButton image={image}>
-                                <IconButton
-                                    colorScheme='red'
-                                    aria-label='Delete image'
-                                    icon={<FaTrash />}
-                                    size='xs'
-                                    fontSize={15}
-                                />
-                            </DeleteImageModalButton>
-                            <IconButton
-                                aria-label='Use all parameters'
-                                colorScheme={'blue'}
-                                icon={<FaCopy />}
-                                size='xs'
-                                fontSize={15}
-                                onClickCapture={handleClickSetAllParameters}
-                            />
-                            {image.metadata.seed && (
-                                <IconButton
-                                    aria-label='Use seed'
-                                    colorScheme={'blue'}
-                                    icon={<FaSeedling />}
-                                    size='xs'
-                                    fontSize={16}
-                                    onClickCapture={handleClickSetSeed}
-                                />
-                            )}
-                        </Flex>
-                    )}
-                </Flex>
-            </Box>
-        );
-    },
-    (prev, next) =>
-        prev.image.uuid === next.image.uuid &&
-        prev.isSelected === next.isSelected
-);
-
-const ImageRoll = () => {
-    const { images, currentImageUuid } = useAppSelector(
-        (state: RootState) => state.gallery
-    );
-
-    return (
-        <Flex gap={2} wrap='wrap' pb={2}>
-            {[...images].reverse().map((image) => {
-                const { uuid } = image;
-                const isSelected = currentImageUuid === uuid;
-                return (
-                    <HoverableImage
-                        key={uuid}
-                        image={image}
-                        isSelected={isSelected}
-                    />
-                );
-            })}
-        </Flex>
-    );
-};
-
-export default ImageRoll;

frontend/src/features/gallery/gallerySlice.ts

@@ -1,144 +1,118 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
-import { v4 as uuidv4 } from 'uuid';
-import { UpscalingLevel } from '../sd/sdSlice';
-import { backendToFrontendParameters } from '../../app/parameterTranslation';
-
-// TODO: Revise pending metadata RFC: https://github.com/lstein/stable-diffusion/issues/266
-export interface SDMetadata {
-  prompt?: string;
-  steps?: number;
-  cfgScale?: number;
-  height?: number;
-  width?: number;
-  sampler?: string;
-  seed?: number;
-  img2imgStrength?: number;
-  gfpganStrength?: number;
-  upscalingLevel?: UpscalingLevel;
-  upscalingStrength?: number;
-  initialImagePath?: string;
-  maskPath?: string;
-  seamless?: boolean;
-  shouldFitToWidthHeight?: boolean;
-}
-
-export interface SDImage {
-  // TODO: I have installed @types/uuid but cannot figure out how to use them here.
-  uuid: string;
-  url: string;
-  metadata: SDMetadata;
-}
+import { clamp } from 'lodash';
+import * as InvokeAI from '../../app/invokeai';
 
 export interface GalleryState {
+  currentImage?: InvokeAI.Image;
   currentImageUuid: string;
-  images: Array<SDImage>;
-  intermediateImage?: SDImage;
-  currentImage?: SDImage;
+  images: Array<InvokeAI.Image>;
+  intermediateImage?: InvokeAI.Image;
+  nextPage: number;
+  offset: number;
 }
 
 const initialState: GalleryState = {
   currentImageUuid: '',
   images: [],
+  nextPage: 1,
+  offset: 0,
 };
 
 export const gallerySlice = createSlice({
   name: 'gallery',
   initialState,
   reducers: {
-    setCurrentImage: (state, action: PayloadAction<SDImage>) => {
+    setCurrentImage: (state, action: PayloadAction<InvokeAI.Image>) => {
       state.currentImage = action.payload;
       state.currentImageUuid = action.payload.uuid;
     },
-    removeImage: (state, action: PayloadAction<SDImage>) => {
-      const { uuid } = action.payload;
+    removeImage: (state, action: PayloadAction<string>) => {
+      const uuid = action.payload;
 
       const newImages = state.images.filter((image) => image.uuid !== uuid);
 
-      const imageToDeleteIndex = state.images.findIndex(
-        (image) => image.uuid === uuid
-      );
+      if (uuid === state.currentImageUuid) {
+        /**
+         * We are deleting the currently selected image.
+         *
+         * We want the new currentl selected image to be under the cursor in the
+         * gallery, so we need to do some fanagling. The currently selected image
+         * is set by its UUID, not its index in the image list.
+         *
+         * Get the currently selected image's index.
+         */
+        const imageToDeleteIndex = state.images.findIndex(
+          (image) => image.uuid === uuid
+        );
 
-      const newCurrentImageIndex = Math.min(
-        Math.max(imageToDeleteIndex, 0),
-        newImages.length - 1
-      );
+        /**
+         * New current image needs to be in the same spot, but because the gallery
+         * is sorted in reverse order, the new current image's index will actuall be
+         * one less than the deleted image's index.
+         *
+         * Clamp the new index to ensure it is valid..
+         */
+        const newCurrentImageIndex = clamp(
+          imageToDeleteIndex,
+          0,
+          newImages.length - 1
+        );
+
+        state.currentImage = newImages.length
+          ? newImages[newCurrentImageIndex]
+          : undefined;
+
+        state.currentImageUuid = newImages.length
+          ? newImages[newCurrentImageIndex].uuid
+          : '';
+      }
 
       state.images = newImages;
-
-      state.currentImage = newImages.length
-        ? newImages[newCurrentImageIndex]
-        : undefined;
-
-      state.currentImageUuid = newImages.length
-        ? newImages[newCurrentImageIndex].uuid
-        : '';
     },
-    addImage: (state, action: PayloadAction<SDImage>) => {
-      state.images.push(action.payload);
+    addImage: (state, action: PayloadAction<InvokeAI.Image>) => {
+      state.images.unshift(action.payload);
       state.currentImageUuid = action.payload.uuid;
       state.intermediateImage = undefined;
       state.currentImage = action.payload;
+      state.offset += 1
     },
-    setIntermediateImage: (state, action: PayloadAction<SDImage>) => {
+    setIntermediateImage: (state, action: PayloadAction<InvokeAI.Image>) => {
       state.intermediateImage = action.payload;
     },
     clearIntermediateImage: (state) => {
       state.intermediateImage = undefined;
     },
-    setGalleryImages: (
+    addGalleryImages: (
       state,
-      action: PayloadAction<
-        Array<{
-          path: string;
-          metadata: { [key: string]: string | number | boolean };
-        }>
-      >
+      action: PayloadAction<{
+        images: Array<InvokeAI.Image>;
+        nextPage: number;
+        offset: number;
+      }>
     ) => {
-      // TODO: Revise pending metadata RFC: https://github.com/lstein/stable-diffusion/issues/266
-      const images = action.payload;
-
-      if (images.length === 0) {
-        // there are no images on disk, clear the gallery
-        state.images = [];
-        state.currentImageUuid = '';
-        state.currentImage = undefined;
-      } else {
-        // Filter image urls that are already in the rehydrated state
-        const filteredImages = action.payload.filter(
-          (image) => !state.images.find((i) => i.url === image.path)
-        );
-
-        const preparedImages = filteredImages.map((image): SDImage => {
-          return {
-            uuid: uuidv4(),
-            url: image.path,
-            metadata: backendToFrontendParameters(image.metadata),
-          };
-        });
-
-        const newImages = [...state.images].concat(preparedImages);
-
-        // if previous currentimage no longer exists, set a new one
-        if (!newImages.find((image) => image.uuid === state.currentImageUuid)) {
-          const newCurrentImage = newImages[newImages.length - 1];
-          state.currentImage = newCurrentImage;
-          state.currentImageUuid = newCurrentImage.uuid;
-        }
-
-        state.images = newImages;
+      const { images, nextPage, offset } = action.payload;
+      if (images.length) {
+        const newCurrentImage = images[0];
+        state.images = state.images
+          .concat(images)
+          .sort((a, b) => b.mtime - a.mtime);
+        state.currentImage = newCurrentImage;
+        state.currentImageUuid = newCurrentImage.uuid;
+        state.nextPage = nextPage;
+        state.offset = offset;
       }
     },
   },
 });
 
 export const {
-  setCurrentImage,
-  removeImage,
   addImage,
-  setGalleryImages,
-  setIntermediateImage,
   clearIntermediateImage,
+  removeImage,
+  setCurrentImage,
+  addGalleryImages,
+  setIntermediateImage,
 } = gallerySlice.actions;
 
 export default gallerySlice.reducer;