Merge dev into main for 2.2.0 (#1642)

* Fixes inpainting + code cleanup

* Disable stage info in Inpainting Tab

* Mask Brush Preview now always at 0.5 opacity

The new mask is only visible properly at max opacity but at max opacity the brush preview becomes fully opaque blocking the view. So the mask brush preview no remains at 0.5 no matter what the Brush opacity is.

* Remove save button from Canvas Controls (cleanup)

* Implements invert mask

* Changes "Invert Mask" to "Preserve Masked Areas"

* Fixes (?) spacebar issues

* Patches redux-persist and redux-deep-persist with debounced persists

Our app changes redux state very, very often. As our undo/redo history grows, the calls to persist state start to take in the 100ms range, due to a the deep cloning of the history. This causes very noticeable performance lag.

The deep cloning is required because we need to blacklist certain items in redux from being persisted (e.g. the app's connection status).

Debouncing the whole process of persistence is a simple and effective solution. Unfortunately, `redux-persist` dropped `debounce` between v4 and v5, replacing it with `throttle`. `throttle`, instead of delaying the expensive action until a period of X ms of inactivity, simply ensures the action is executed at least every X ms. Of course, this does not fix our performance issue. 

The patch is very simple. It adds a `debounce` argument - a number of milliseconds - and debounces `redux-persist`'s `update()` method (provided by `createPersistoid`) by that many ms.

Before this, I also tried writing a custom storage adapter for `redux-persist` to debounce the calls to `localStorage.setItem()`. While this worked and was far less invasive, it doesn't actually address the issue. It turns out `setItem()` is a very fast part of the process.

We use `redux-deep-persist` to simplify the `redux-persist` configuration, which can get complicated when you need to blacklist or whitelist deeply nested state. There is also a patch here for that library because it uses the same types as `redux-persist`.

Unfortunately, the last release of `redux-persist` used a package `flat-stream` which was malicious and has been removed from npm. The latest commits to `redux-persist` (about 1 year ago) do not build; we cannot use the master branch. And between the last release and last commit, the changes have all been breaking.

Patching this last release (about 3 years old at this point) directly is far simpler than attempting to fix the upstream library's master branch or figuring out an alternative to the malicious and now non-existent dependency.

* Adds debouncing

* Fixes AttributeError: 'dict' object has no attribute 'invert_mask'

* Updates package.json to use redux-persist patches

* Attempts to fix redux-persist debounce patch

* Fixes undo/redo

* Fixes invert mask

* Debounce > 300ms

* Limits history to 256 for each of undo and redo

* Canvas styling

* Hotkeys improvement

* Add Metadata To Viewer

* Increases CFG Scale max to 200

* Fix gallery width size for Outpainting

Also fixes the canvas resizing failing n fast pushes

* Fixes disappearing canvas grid lines

* Adds staging area

* Fixes "use all" not setting variationAmount

Now sets to 0 when the image had variations.

* Builds fresh bundle

* Outpainting tab loads to empty canvas instead of upload

* Fixes wonky canvas layer ordering & compositing

* Fixes error on inpainting paste back

`TypeError: 'float' object cannot be interpreted as an integer`

* Hides staging area outline on mouseover prev/next

* Fixes inpainting not doing img2img when no mask

* Fixes bbox not resizing in outpainting if partially off screen

* Fixes crashes during iterative outpaint. Still doesn't work correctly though.

* Fix iterative outpainting by restoring original images

* Moves image uploading to HTTP

- It all seems to work fine
- A lot of cleanup is still needed
- Logging needs to be added
- May need types to be reviewed

* Fixes: outpainting temp images show in gallery

* WIP refactor to unified canvas

* Removes console.log from redux-persist patch

* Initial unification of canvas

* Removes all references to split inpainting/outpainting canvas

* Add patchmatch and infill_method parameter to prompt2image (options are 'patchmatch' or 'tile').

* Fixes app after removing in/out-painting refs

* Rebases on dev, updates new env files w/ patchmatch

* Organises features/canvas

* Fixes bounding box ending up offscreen

* Organises features/canvas

* Stops unnecessary canvas rescales on gallery state change

* Fixes 2px layout shift on toggle canvas lock

* Clips lines drawn while canvas locked

When drawing with the locked canvas, if a brush stroke gets too close to the edge of the canvas and its stroke would extend past the edge of the canvas, the edge of that stroke will be seen after unlocking the canvas.

This could cause a problem if you unlock the canvas and now have a bunch of strokes just outside the init image area, which are far back in undo history and you cannot easily erase.

With this change, lines drawn while the canvas is locked get clipped to the initial image bbox, fixing this issue.

Additionally, the merge and save to gallery functions have been updated to respect the initial image bbox so they function how you'd expect.

* Fixes reset canvas view when locked

* Fixes send to buttons

* Fixes bounding box not being rounded to 64

* Abandons "inpainting" canvas lock

* Fixes save to gallery including empty area, adds download and copy image

* Fix Current Image display background going over image bounds

* Sets status immediately when clicking Invoke

* Adds hotkeys and refactors sharing of konva instances

Adds hotkeys to canvas. As part of this change, the access to konva instance objects was refactored:

Previously closure'd refs were used to indirectly get access to the konva instances outside of react components.

Now, a  getter and setter function are used to provide access directly to the konva objects.

* Updates hotkeys

* Fixes canvas showing spinner on first load

Also adds good default canvas scale and positioning when no image is on it

* Fixes possible hang on MaskCompositer

* Improves behaviour when setting init canvas image/reset view

* Resets bounding box coords/dims when no image present

* Disables canvas actions which cannot be done during processing

* Adds useToastWatcher hook

- Dispatch an `addToast` action with standard Chakra toast options object to add a toast to the toastQueue
- The hook is called in App.tsx and just useEffect's w/ toastQueue as dependency to create the toasts
- So now you can add toasts anywhere you have access to `dispatch`, which includes middleware and thunks
- Adds first usage of this for the save image buttons in canvas

* Update Hotkey Info

Add missing tooltip hotkeys and update the hotkeys modal to reflect the new hotkeys for the Unified Canvas.

* Fix theme changer not displaying current theme on page refresh

* Fix tab count in hotkeys panel

* Unify Brush and Eraser Sizes

* Fix staging area display toggle not working

* Staging Area delete button is now red

So it doesnt feel blended into to the rest of them.

* Revert "Fix theme changer not displaying current theme on page refresh"

This reverts commit 903edfb803e743500242589ff093a8a8a0912726.

* Add arguments to use SSL to webserver

* Integrates #1487 - touch events

Need to add:
- Pinch zoom
- Touch-specific handling (some things aren't quite right)

* Refactors upload-related async thunks

- Now standard thunks instead of RTK createAsyncThunk()
- Adds toasts for all canvas upload-related actions

* Reorganises app file structure

* Fixes Canvas Auto Save to Gallery

* Fixes staging area outline

* Adds staging area hotkeys, disables gallery left/right when staging

* Fixes Use All Parameters

* Fix metadata viewer image url length when viewing intermediate

* Fixes intermediate images being tiny in txt2img/img2img

* Removes stale code

* Improves canvas status text and adds option to toggle debug info

* Fixes paste image to upload

* Adds model drop-down to site header

* Adds theme changer popover

* Fix missing key on ThemeChanger map

* Fixes stage position changing on zoom

* Hotkey Cleanup

- Viewer is now Z
- Canvas Move tool is V - sync with PS
- Removed some unused hotkeys

* Fix canvas resizing when both options and gallery are unpinned

* Implements thumbnails for gallery

- Thumbnails are saved whenever an image is saved, and when gallery requests images from server
- Thumbnails saved at original image aspect ratio with width of 128px as WEBP
- If the thumbnail property of an image is unavailable for whatever reason, the image's full size URL is used instead

* Saves thumbnails to separate thumbnails directory

* Thumbnail size = 256px

* Fix Lightbox Issues

* Disables canvas image saving functions when processing

* Fix index error on going past last image in Gallery

* WIP - Lightbox Fixes

Still need to fix the images not being centered on load when the image res changes

* Fixes another similar index error, simplifies logic

* Reworks canvas toolbar

* Fixes canvas toolbar upload button

* Cleans up IAICanvasStatusText

* Improves metadata handling, fixes #1450

- Removes model list from metadata
- Adds generation's specific model to metadata
- Displays full metadata in JSON viewer

* Gracefully handles corrupted images; fixes #1486

- App does not crash if corrupted image loaded
- Error is displayed in the UI console and CLI output if an image cannot be loaded

* Adds hotkey to reset canvas interaction state

If the canvas' interaction state (e.g. isMovingBoundingBox, isDrawing, etc) get stuck somehow, user can press Escape to reset the state.

* Removes stray console.log()

* Fixes bug causing gallery to close on context menu open

* Minor bugfixes

- When doing long-running canvas image exporting actions, display indeterminate progress bar
- Fix staging area image outline not displaying after committing/discarding results

* Removes unused imports

* Fixes repo root .gitignore ignoring frontend things

* Builds fresh bundle

* Styling updates

* Removes reasonsWhyNotReady

The popover doesn't play well with the button being disabled, and I don't think adds any value.

* Image gallery resize/style tweaks

* Styles buttons for clearing canvas history and mask

* First pass on Canvas options panel

* Fixes bug where discarding staged images results in loss of history

* Adds Save to Gallery button to staging toolbar

* Rearrange some canvas toolbar icons

Put brush stuff together and canvas movement stuff together

* Fix gallery maxwidth on unified canvas

* Update Layer hotkey display to UI

* Adds option to crop to bounding box on save

* Masking option tweaks

* Crop to Bounding Box > Save Box Region Only

* Adds clear temp folder

* Updates mask options popover behavior

* Builds fresh bundle

* Fix styling on alert modals

* Fix input checkbox styling being incorrect on light theme

* Styling fixes

* Improves gallery resize behaviour

* Cap gallery size on canvas tab so it doesnt overflow

* Fixes bug when postprocessing image with no metadata

* Adds IAIAlertDialog component

* Moves Loopback to app settings

* Fixes metadata viewer not showing metadata after refresh

Also adds Dream-style prompt to metadata

* Adds outpainting specific options

* Linting

* Fixes gallery width on lightbox, fixes gallery button expansion

* Builds fresh bundle

* Fix Lightbox images of different res not centering

* Update feature tooltip text

* Highlight mask icon when on mask layer

* Fix gallery not resizing correctly on open and close

* Add loopback to just img2img. Remove from settings.

* Fix to gallery resizing

* Removes Advanced checkbox, cleans up options panel for unified canvas

* Minor styling fixes to new options panel layout

* Styling Updates

* Adds infill method

* Tab Styling Fixes

* memoize outpainting options

* Fix unnecessary gallery re-renders

* Isolate Cursor Pos debug text on canvas to prevent rerenders

* Fixes missing postprocessed image metadata before refresh

* Builds fresh bundle

* Fix rerenders on model select

* Floating panel re-render fix

* Simplify fullscreen hotkey selector

* Add Training WIP Tab

* Adds Training icon

* Move full screen hotkey to floating to prevent tab rerenders

* Adds single-column gallery layout

* Fixes crash on cancel with intermediates enabled, fixes #1416

* Updates npm dependencies

* Fixes img2img attempting inpaint when init image has transparency

* Fixes missing threshold and perlin parameters in metadata viewer

* Renames "Threshold" > "Noise Threshold"

* Fixes postprocessing not being disabled when clicking use all

* Builds fresh bundle

* Adds color picker

* Lints & builds fresh bundle

* Fixes iterations being disabled when seed random & variations are off

* Un-floors cursor position

* Changes color picker preview to circles

* Fixes variation params not set correctly when recalled

* Fixes invoke hotkey not working in input fields

* Simplifies Accordion

Prep for adding reset buttons for each section

* Fixes mask brush preview color

* Committing color picker color changes tool to brush

* Color picker does not overwrite user-selected alpha

* Adds brush color alpha hotkey

* Lints

* Removes force_outpaint param

* Add inpaint size options to inpaint at a larger size than the actual inpaint image, then scale back down for recombination

* Bug fix for inpaint size

* Adds inpaint size (as scale bounding box) to UI

* Adds auto-scaling for inpaint size

* Improves scaled bbox display logic

* Fixes bug with clear mask and history

* Fixes shouldShowStagingImage not resetting to true on commit

* Builds fresh bundle

* Fixes canvas failing to scale on first run

* Builds fresh bundle

* Fixes unnecessary canvas scaling

* Adds gallery drag and drop to img2img/canvas

* Builds fresh bundle

* Fix desktop mode being broken with new versions of flaskwebgui

* Fixes canvas dimensions not setting on first load

* Builds fresh bundle

* stop crash on !import_models call on model inside rootdir

- addresses bug report #1546

* prevent "!switch state gets confused if model switching fails"

- If !switch were to fail on a particular model, then generate got
  confused and wouldn't try again until you switch to a different working
  model and back again.

- This commit fixes and closes #1547

* Revert "make the docstring more readable and improve the list_models logic"

This reverts commit 248068fe5d.

* fix model cache path

* also set fail-fast to it's default (true)
in this way the whole action fails if one job fails
this should unblock the runners!!!

* fix output path for Archive results

* disable checks for python 3.9

* Update-requirements and test-invoke-pip workflow (#1574)

* update requirements files

* update test-invoke-pip workflow

* move requirements-mkdocs.txt to docs folder (#1575)

* move requirements-mkdocs.txt to docs folder

* update copyright

* Fixes outpainting with resized inpaint size

* Interactive configuration (#1517)

* Update scripts/configure_invokeai.py

prevent crash if output exists

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>

* implement changes requested by reviews

* default to correct root and output directory on Windows systems

- Previously the script was relying on the readline buffer editing
  feature to set up the correct default. But this feature doesn't
  exist on windows.

- This commit detects when user typed return with an empty directory
  value and replaces with the default directory.

* improved readability of directory choices

* Update scripts/configure_invokeai.py

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>

* better error reporting at startup

- If user tries to run the script outside of the repo or runtime directory,
  a more informative message will appear explaining the problem.

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>

* Embedding merging (#1526)

* add whole <style token> to vocab for concept library embeddings

* add ability to load multiple concept .bin files

* make --log_tokenization respect custom tokens

* start working on concept downloading system

* preliminary support for dynamic loading and merging of multiple embedded models

- The embedding_manager is now enhanced with ldm.invoke.concepts_lib,
  which handles dynamic downloading and caching of embedded models from
  the Hugging Face concepts library (https://huggingface.co/sd-concepts-library)

- Downloading of a embedded model is triggered by the presence of one or more
  <concept> tags in the prompt.

- Once the embedded model is downloaded, its trigger phrase will be loaded
  into the embedding manager and the prompt's <concept> tag will be replaced
  with the <trigger_phrase>

- The downloaded model stays on disk for fast loading later.

- The CLI autocomplete will complete partial <concept> tags for you. Type a
  '<' and hit tab to get all ~700 concepts.

BUGS AND LIMITATIONS:

- MODEL NAME VS TRIGGER PHRASE

  You must use the name of the concept embed model from the SD
  library, and not the trigger phrase itself. Usually these are the
  same, but not always. For example, the model named "hoi4-leaders"
  corresponds to the trigger "<HOI4-Leader>"

  One reason for this design choice is that there is no apparent
  constraint on the uniqueness of the trigger phrases and one trigger
  phrase may map onto multiple models. So we use the model name
  instead.

  The second reason is that there is no way I know of to search
  Hugging Face for models with certain trigger phrases. So we'd have
  to download all 700 models to index the phrases.

  The problem this presents is that this may confuse users, who will
  want to reuse prompts from distributions that use the trigger phrase
  directly. Usually this will work, but not always.

- WON'T WORK ON A FIREWALLED SYSTEM

  If the host running IAI has no internet connection, it can't
  download the concept libraries. I will add a script that allows
  users to preload a list of concept models.

- BUG IN PROMPT REPLACEMENT WHEN MODEL NOT FOUND

  There's a small bug that occurs when the user provides an invalid
  model name. The <concept> gets replaced with <None> in the prompt.

* fix loading .pt embeddings; allow multi-vector embeddings; warn on dupes

* simplify replacement logic and remove cuda assumption

* download list of concepts from hugging face

* remove misleading customization of '*' placeholder

the existing code as-is did not do anything; unclear what it was supposed to do.

the obvious alternative -- setting using 'placeholder_strings' instead of
'placeholder_tokens' to match model.params.personalization_config.params.placeholder_strings --
caused a crash. i think this is because the passed string also needed to be handed over
on init of the PersonalizedBase as the 'placeholder_token' argument.
this is weird config dict magic and i don't want to touch it. put a
breakpoint in personalzied.py line 116 (top of PersonalizedBase.__init__) if
you want to have a crack at it yourself.

* address all the issues raised by damian0815 in review of PR #1526

* actually resize the token_embeddings

* multiple improvements to the concept loader based on code reviews

1. Activated the --embedding_directory option (alias --embedding_path)
   to load a single embedding or an entire directory of embeddings at
   startup time.

2. Can turn off automatic loading of embeddings using --no-embeddings.

3. Embedding checkpoints are scanned with the pickle scanner.

4. More informative error messages when a concept can't be loaded due
   either to a 404 not found error or a network error.

* autocomplete terms end with ">" now

* fix startup error and network unreachable

1. If the .invokeai file does not contain the --root and --outdir options,
  invoke.py will now fix it.

2. Catch and handle network problems when downloading hugging face textual
   inversion concepts.

* fix misformatted error string

Co-authored-by: Damian Stewart <d@damianstewart.com>

* model_cache.py: fix list_models

Signed-off-by: devops117 <55235206+devops117@users.noreply.github.com>

* add statement of values (#1584)

* this adds the Statement of Values

Google doc source = https://docs.google.com/document/d/1-PrUKDJcxy8OyNGc8CyiHhv2VgLvjt7LRGlEpbg1nmQ/edit?usp=sharing

* Fix heading

* Update InvokeAI_Statement_of_Values.md

* Update InvokeAI_Statement_of_Values.md

* Update InvokeAI_Statement_of_Values.md

* Update InvokeAI_Statement_of_Values.md

* Update InvokeAI_Statement_of_Values.md

* add keturn and mauwii to the team member list

* Fix punctuation

* this adds the Statement of Values

Google doc source = https://docs.google.com/document/d/1-PrUKDJcxy8OyNGc8CyiHhv2VgLvjt7LRGlEpbg1nmQ/edit?usp=sharing

* add keturn and mauwii to the team member list

* fix formating
- make sub bullets use * (decide to all use - or *)
- indent sub bullets
Sorry, first only looked at the code version and found this only after
looking at the markdown rendered version

* use multiparagraph numbered sections

* Break up Statement Of Values as per comments on #1584

* remove duplicated word, reduce vagueness

it's important not to overstate how many artists we are consulting.

* fix typo (sorry blessedcoolant)

Co-authored-by: mauwii <Mauwii@outlook.de>
Co-authored-by: damian <git@damianstewart.com>

* update dockerfile (#1551)

* update dockerfile

* remove not existing file from .dockerignore

* remove bloat and unecesary step
also use --no-cache-dir for pip install
image is now close to 2GB

* make Dockerfile a variable

* set base image to `ubuntu:22.10`

* add build-essential

* link outputs folder for persistence

* update tag variable

* update docs

* fix not customizeable build args, add reqs output

* !model_import autocompletes in ROOTDIR

* Adds psychedelicious to statement of values signature (#1602)

* add a --no-patchmatch option to disable patchmatch loading (#1598)

This feature was added to prevent the CI Macintosh tests from erroring
out when patchmatch is unable to retrieve its shared library from
github assets.

* Fix #1599 by relaxing the `match_trigger` regex (#1601)

* Fix #1599 by relaxing the `match_trigger` regex

Also simplify logic and reduce duplication.

* restrict trigger regex again (but not so far)

* make concepts library work with Web UI

This PR makes it possible to include a Hugging Face concepts library
<style-or-subject-trigger> in the WebUI prompt. The metadata seems
to be correctly handled.

* documentation enhancements (#1603)

- Add documentation for the Hugging Face concepts library and TI embedding.

- Fixup index.md to point to each of the feature documentation files,
  including ones that are pending.

* tweak setup and environment files for linux & pypatchmatch (#1580)

* tweak setup and environment files for linux & pypatchmatch

- Downgrade python requirements to 3.9 because 3.10 is not supported
  on Ubuntu 20.04 LTS (widely-used distro)
- Use our github pypatchmatch 0.1.3 in order to install Makefile
  where it needs to be.
- Restored "-e ." as the last install step on pip installs. Hopefully
  this will not trigger the high-CPU hang we've previously experienced.

* keep windows on basicsr 1.4.1

* keep windows on basicsr 1.4.1

* bump pypatchmatch requirement to 0.1.4

- This brings in a version of pypatchmatch that will gracefully
  handle internet connection not available at startup time.
- Also refactors and simplifies the handling of gfpgan's basicsr requirement
  across various platforms.

* revert to older version of list_models() (#1611)

This restores the correct behavior of list_models() and quenches
the bug of list_models() returning a single model entry named "name".

I have not investigated what was wrong with the new version, but I
think it may have to do with changes to the behavior in dict.update()

* Fixes for #1604 (#1605)

* Converts ESRGAN image input to RGB

- Also adds typing for image input.
- Partially resolves #1604

* ensure there are unmasked pixels before color matching

Co-authored-by: Kyle Schouviller <kyle0654@hotmail.com>

* update index.md (#1609)

- comment out non existing link
- fix indention
- add seperator between feature categories

* Debloat-docker (#1612)

* debloat Dockerfile
- less options more but more userfriendly
- better Entrypoint to simulate CLI usage
- without command the container still starts the web-host

* debloat build.sh

* better syntax in run.sh

* update Docker docs
- fix description of VOLUMENAME
- update run script example to reflect new entrypoint

* Test installer (#1618)

* test linux install

* try removing http from parsed requirements

* pip install confirmed working on linux

* ready for linux testing

- rebuilt py3.10-linux-x86_64-cuda-reqs.txt to include pypatchmatch
  dependency.
- point install.sh and install.bat to test-installer branch.

* Updates MPS reqs

* detect broken readline history files

* fix download.pytorch.org URL

* Test installer (Win 11) (#1620)

Co-authored-by: Cyrus Chan <cyruswkc@hku.hk>

* Test installer (MacOS 13.0.1 w/ torch==1.12.0) (#1621)

* Test installer (Win 11)

* Test installer (MacOS 13.0.1 w/ torch==1.12.0)

Co-authored-by: Cyrus Chan <cyruswkc@hku.hk>

* change sourceball to development for testing

* Test installer (MacOS 13.0.1 w/ torch==1.12.1 & torchvision==1.13.1) (#1622)

* Test installer (Win 11)

* Test installer (MacOS 13.0.1 w/ torch==1.12.0)

* Test installer (MacOS 13.0.1 w/ torch==1.12.1 & torchvision==1.13.1)

Co-authored-by: Cyrus Chan <cyruswkc@hku.hk>

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Co-authored-by: Cyrus Chan <82143712+cyruschan360@users.noreply.github.com>
Co-authored-by: Cyrus Chan <cyruswkc@hku.hk>

* 2.2 Doc Updates (#1589)

* Unified Canvas Docs & Assets

Unified Canvas draft

Advanced Tools Updates

Doc Updates (lstein feedback)

* copy edits to Unified Canvas docs

- consistent capitalisation and feature naming
- more intimate address (replace "the user" with "you") for improved User
  Engagement(tm)
- grammatical massaging and *poesie*

Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>
Co-authored-by: damian <git@damianstewart.com>

* include a step after config to `cat ~/.invokeai` (#1629)

* disable patchmatch in CI actions (#1626)

* disable patchmatch in CI actions

* fix indention

* replace tab with spaces

Co-authored-by: Matthias Wild <40327258+mauwii@users.noreply.github.com>
Co-authored-by: mauwii <Mauwii@outlook.de>

* Fix installer script for macOS. (#1630)

* refer to the platform as 'osx' instead of 'mac', otherwise the
composed URL to micromamba is wrong.
* move the `-O` option to `tar` to be grouped with the other tar flags
to avoid the `-O` being interpreted as something to unarchive.

* Removes symlinked environment.yaml (#1631)

Was unintentionally added in #1621

* Fix inpainting with iterations (#1635)

* fix error when inpainting using runwayml inpainting model (#1634)

- error was "Omnibus object has no attribute pil_image"
- closes #1596

* add k_dpmpp_2_a and k_dpmpp_2 solvers options (#1389)

* add k_dpmpp_2_a and k_dpmpp_2 solvers options

* update frontend

Co-authored-by: Victor <victorca25@users.noreply.github.com>
Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>

* add .editorconfig (#1636)

* Web UI 2.2 bugfixes (#1572)

* Fixes bug preventing multiple images from being generated

* Fixes valid seam strength value range

* Update Delete Alert Text

Indicates to the user that images are not permanently deleted.

* Fixes left/right arrows not working on gallery

* Fixes initial image on load erroneously set to a user uploaded image

Should be a result gallery image.

* Lightbox Fixes

- Lightbox is now a button in the current image buttons
- Lightbox is also now available in the gallery context menu
- Lightbox zoom issues fixed
- Lightbox has a fade in animation.

* Fix image display wrapper in current preview not overflow bounds

* Revert "Fix image display wrapper in current preview not overflow bounds"

This reverts commit 5511c82714dbf1d1999d64e8bc357bafa34ddf37.

* Change Staging Area discard icon from Bin to X

* Expose Snap Threshold and Move Snap Settings to BBox Panel

* Changes img2img strength default to 0.75

* Fixes drawing triggering when mouse enters canvas w/ button down

When we only supported inpainting and no zoom, this was useful. It allowed the cursor to leave the canvas (which was easy to do given the limited canvas dimensions) and without losing the "I am drawing" state. 

With a zoomable canvas this is no longer as useful.

Additionally, we have more popovers and tools (like the color pickers) which result in unexpected brush strokes. This fixes that issue.

* Revert "Expose Snap Threshold and Move Snap Settings to BBox Panel"

We will handle this a bit differently - by allowing the grid origin to be moved. I will dig in at some point.

This reverts commit 33c92ecf4da724c2f17d9d91c7ea31a43a2f6deb.

* Adds Limit Strokes to Box

* Adds fill bounding box button

* Adds erase bounding box button

* Changes Staging area discard icon to match others

* Fixes right click breaking move tool

* Fixes brush preview visibility issue with "darken outside box"

* Fixes history bugs with addFillRect, addEraseRect, and other actions

* Adds missing `key`

* Fixes postprocessing being applied to canvas generations

* Fixes bbox not getting scaled in various situations

* Fixes staging area show image toggle not resetting on accept/discard

* Locks down canvas while generating/staging

* Fixes move tool breaking when canvas loses focus during move/transform

* Hides cursor when restrict strokes is on and mouse outside bbox

* Lints

* Builds fresh bundle

* Fix overlapping hotkey for Fill Bounding Box

* Build Fresh Bundle

* Fixes bug with mask and bbox overlay

* Builds fresh bundle

Co-authored-by: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>

* disable NSFW checker loading during the CI tests (#1641)

* disable NSFW checker loading during the CI tests

The NSFW filter apparently causes invoke.py to crash during CI testing,
possibly due to out of memory errors. This workaround disables NSFW
model loading.

* doc change

* fix formatting errors in yml files

* Configure the NSFW checker at install time with default on (#1624)

* configure the NSFW checker at install time with default on

1. Changes the --safety_checker argument to --nsfw_checker and
--no-nsfw_checker. The original argument is recognized for backward
compatibility.

2. The configure script asks users whether to enable the checker
(default yes). Also offers users ability to select default sampler and
number of generation steps.

3.Enables the pasting of the caution icon on blurred images when
InvokeAI is installed into the package directory.

4. Adds documentation for the NSFW checker, including caveats about
accuracy, memory requirements, and intermediate image dispaly.

* use better fitting icon

* NSFW defaults false for testing

* set default back to nsfw active

Co-authored-by: Matthias Wild <40327258+mauwii@users.noreply.github.com>
Co-authored-by: mauwii <Mauwii@outlook.de>

Signed-off-by: devops117 <55235206+devops117@users.noreply.github.com>
Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Co-authored-by: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Co-authored-by: Kyle Schouviller <kyle0654@hotmail.com>
Co-authored-by: javl <mail@jaspervanloenen.com>
Co-authored-by: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Co-authored-by: mauwii <Mauwii@outlook.de>
Co-authored-by: Matthias Wild <40327258+mauwii@users.noreply.github.com>
Co-authored-by: Damian Stewart <d@damianstewart.com>
Co-authored-by: DevOps117 <55235206+devops117@users.noreply.github.com>
Co-authored-by: damian <git@damianstewart.com>
Co-authored-by: Damian Stewart <null@damianstewart.com>
Co-authored-by: Cyrus Chan <82143712+cyruschan360@users.noreply.github.com>
Co-authored-by: Cyrus Chan <cyruswkc@hku.hk>
Co-authored-by: Andre LaBranche <dre@mac.com>
Co-authored-by: victorca25 <41912303+victorca25@users.noreply.github.com>
Co-authored-by: Victor <victorca25@users.noreply.github.com>

frontend/src/app/App.scss

@@ -1,5 +1,9 @@
 @use '../styles/Mixins/' as *;
 
+svg {
+  fill: var(--svg-color);
+}
+
 .App {
   display: grid;
   width: 100vw;

frontend/src/app/App.tsx

@@ -1,89 +1,19 @@
-import { useEffect } from 'react';
-import ProgressBar from '../features/system/ProgressBar';
-import SiteHeader from '../features/system/SiteHeader';
-import Console from '../features/system/Console';
-import { useAppDispatch } from './store';
-import { requestSystemConfig } from './socketio/actions';
+import ProgressBar from 'features/system/components/ProgressBar';
+import SiteHeader from 'features/system/components/SiteHeader';
+import Console from 'features/system/components/Console';
 import { keepGUIAlive } from './utils';
-import InvokeTabs from '../features/tabs/InvokeTabs';
-import ImageUploader from '../common/components/ImageUploader';
-import { RootState, useAppSelector } from '../app/store';
+import InvokeTabs from 'features/tabs/components/InvokeTabs';
+import ImageUploader from 'common/components/ImageUploader';
 
-import FloatingGalleryButton from '../features/tabs/FloatingGalleryButton';
-import FloatingOptionsPanelButtons from '../features/tabs/FloatingOptionsPanelButtons';
-import { createSelector } from '@reduxjs/toolkit';
-import { GalleryState } from '../features/gallery/gallerySlice';
-import { OptionsState } from '../features/options/optionsSlice';
-import { activeTabNameSelector } from '../features/options/optionsSelectors';
-import { SystemState } from '../features/system/systemSlice';
-import _ from 'lodash';
-import { Model } from './invokeai';
+import useToastWatcher from 'features/system/hooks/useToastWatcher';
+
+import FloatingOptionsPanelButtons from 'features/tabs/components/FloatingOptionsPanelButtons';
+import FloatingGalleryButton from 'features/tabs/components/FloatingGalleryButton';
 
 keepGUIAlive();
 
-const appSelector = createSelector(
-  [
-    (state: RootState) => state.gallery,
-    (state: RootState) => state.options,
-    (state: RootState) => state.system,
-    activeTabNameSelector,
-  ],
-  (
-    gallery: GalleryState,
-    options: OptionsState,
-    system: SystemState,
-    activeTabName
-  ) => {
-    const { shouldShowGallery, shouldHoldGalleryOpen, shouldPinGallery } =
-      gallery;
-    const {
-      shouldShowOptionsPanel,
-      shouldHoldOptionsPanelOpen,
-      shouldPinOptionsPanel,
-    } = options;
-
-    const modelStatusText = _.reduce(
-      system.model_list,
-      (acc: string, cur: Model, key: string) => {
-        if (cur.status === 'active') acc = key;
-        return acc;
-      },
-      ''
-    );
-
-    const shouldShowGalleryButton = !(
-      shouldShowGallery ||
-      (shouldHoldGalleryOpen && !shouldPinGallery)
-    );
-
-    const shouldShowOptionsPanelButton =
-      !(
-        shouldShowOptionsPanel ||
-        (shouldHoldOptionsPanelOpen && !shouldPinOptionsPanel)
-      ) && ['txt2img', 'img2img', 'inpainting'].includes(activeTabName);
-
-    return {
-      modelStatusText,
-      shouldShowGalleryButton,
-      shouldShowOptionsPanelButton,
-    };
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: _.isEqual,
-    },
-  }
-);
-
 const App = () => {
-  const dispatch = useAppDispatch();
-
-  const { shouldShowGalleryButton, shouldShowOptionsPanelButton } =
-    useAppSelector(appSelector);
-
-  useEffect(() => {
-    dispatch(requestSystemConfig());
-  }, [dispatch]);
+  useToastWatcher();
 
   return (
     <div className="App">
@@ -96,9 +26,9 @@ const App = () => {
         <div className="app-console">
           <Console />
         </div>
-        {shouldShowGalleryButton && <FloatingGalleryButton />}
-        {shouldShowOptionsPanelButton && <FloatingOptionsPanelButtons />}
       </ImageUploader>
+      <FloatingOptionsPanelButtons />
+      <FloatingGalleryButton />
     </div>
   );
 };

frontend/src/app/constants.ts

@@ -1,6 +1,6 @@
 // TODO: use Enums?
 
-import { InProgressImageType } from '../features/system/systemSlice';
+import { InProgressImageType } from 'features/system/store/systemSlice';
 
 // Valid samplers
 export const SAMPLERS: Array<string> = [
@@ -9,6 +9,8 @@ export const SAMPLERS: Array<string> = [
   'k_lms',
   'k_dpm_2',
   'k_dpm_2_a',
+  'k_dpmpp_2',
+  'k_dpmpp_2_a',
   'k_euler',
   'k_euler_a',
   'k_heun',

frontend/src/app/features.ts

@@ -13,10 +13,13 @@ export enum Feature {
   UPSCALE,
   FACE_CORRECTION,
   IMAGE_TO_IMAGE,
+  BOUNDING_BOX,
+  SEAM_CORRECTION,
+  INFILL_AND_SCALING,
 }
 /** For each tooltip in the UI, the below feature definitions & props will pull relevant information into the tooltip.
  *
- * To-do: href & GuideImages are placeholders, and are not currently utilized, but will be updated (along with the tooltip UI) as feature and UI development and we get a better idea on where things "forever homes" will be .
+ * To-do: href & GuideImages are placeholders, and are not currently utilized, but will be updated (along with the tooltip UI) as feature and UI develop and we get a better idea on where things "forever homes" will be .
  */
 export const FEATURES: Record<Feature, FeatureHelpInfo> = {
   [Feature.PROMPT]: {
@@ -55,7 +58,22 @@ export const FEATURES: Record<Feature, FeatureHelpInfo> = {
     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 ',
+    text: 'Image to Image 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.BOUNDING_BOX]: {
+    text: 'The bounding box is analogous to the Width and Height settings for Text to Image or Image to Image. Only the area in the box will be processed.',
+    href: 'link/to/docs/feature3.html',
+    guideImage: 'asset/path.gif',
+  },
+  [Feature.SEAM_CORRECTION]: {
+    text: 'Control the handling of visible seams which may occur when a generated image is pasted back onto the canvas.',
+    href: 'link/to/docs/feature3.html',
+    guideImage: 'asset/path.gif',
+  },
+  [Feature.INFILL_AND_SCALING]: {
+    text: 'Manage infill methods (used on masked or erased areas of the canvas) and scaling (useful for small bounding box sizes).',
     href: 'link/to/docs/feature3.html',
     guideImage: 'asset/path.gif',
   },

frontend/src/app/invokeai.d.ts

@@ -12,7 +12,9 @@
  * 'gfpgan'.
  */
 
-import { Category as GalleryCategory } from '../features/gallery/gallerySlice';
+import { Category as GalleryCategory } from 'features/gallery/store/gallerySlice';
+import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
+import { IRect } from 'konva/lib/types';
 
 /**
  * TODO:
@@ -44,6 +46,8 @@ export declare type CommonGeneratedImageMetadata = {
     | 'ddim'
     | 'k_dpm_2_a'
     | 'k_dpm_2'
+    | 'k_dpmpp_2_a'
+    | 'k_dpmpp_2'
     | 'k_euler_a'
     | 'k_euler'
     | 'k_heun'
@@ -103,7 +107,7 @@ export declare type PostProcessedImageMetadata =
   | FacetoolMetadata;
 
 // Metadata includes the system config and image metadata.
-export declare type Metadata = SystemConfig & {
+export declare type Metadata = SystemGenerationMetadata & {
   image: GeneratedImageMetadata | PostProcessedImageMetadata;
 };
 
@@ -111,12 +115,14 @@ export declare type Metadata = SystemConfig & {
 export declare type Image = {
   uuid: string;
   url: string;
+  thumbnail: string;
   mtime: number;
   metadata?: Metadata;
   width: number;
   height: number;
-  category: GalleryCategory; 
-  isBase64: boolean; 
+  category: GalleryCategory;
+  isBase64?: boolean;
+  dreamPrompt?: 'string';
 };
 
 // GalleryImages is an array of Image.
@@ -140,13 +146,18 @@ export declare type SystemStatus = {
   hasError: boolean;
 };
 
-export declare type SystemConfig = {
+export declare type SystemGenerationMetadata = {
   model: string;
-  model_id: string;
+  model_weights?: string;
+  model_id?: string;
   model_hash: string;
   app_id: string;
   app_version: string;
+};
+
+export declare type SystemConfig = SystemGenerationMetadata & {
   model_list: ModelList;
+  infill_methods: string[];
 };
 
 export declare type ModelStatus = 'active' | 'cached' | 'not loaded';
@@ -171,10 +182,19 @@ export declare type SystemStatusResponse = SystemStatus;
 
 export declare type SystemConfigResponse = SystemConfig;
 
-export declare type ImageResultResponse = Omit<Image, 'uuid'>;
+export declare type ImageResultResponse = Omit<Image, 'uuid'> & {
+  boundingBox?: IRect;
+  generationMode: InvokeTabName;
+};
 
-export declare type ImageUploadResponse = Omit<Image, 'uuid' | 'metadata'> & {
-  destination: 'img2img' | 'inpainting';
+export declare type ImageUploadResponse = {
+  // image: Omit<Image, 'uuid' | 'metadata' | 'category'>;
+  url: string;
+  mtime: number;
+  width: number;
+  height: number;
+  thumbnail: string;
+  // bbox: [number, number, number, number];
 };
 
 export declare type ErrorResponse = {
@@ -198,9 +218,12 @@ export declare type ImageUrlResponse = {
   url: string;
 };
 
-export declare type ImageUploadDestination = 'img2img' | 'inpainting';
-
 export declare type UploadImagePayload = {
   file: File;
   destination?: ImageUploadDestination;
 };
+
+export declare type UploadOutpaintingMergeImagePayload = {
+  dataURL: string;
+  name: string;
+};

frontend/src/app/selectors/readinessSelector.ts

@@ -1,39 +1,35 @@
 import { createSelector } from '@reduxjs/toolkit';
 import _ from 'lodash';
-import { RootState } from '../store';
-import { activeTabNameSelector } from '../../features/options/optionsSelectors';
-import { OptionsState } from '../../features/options/optionsSlice';
-
-import { SystemState } from '../../features/system/systemSlice';
-import { InpaintingState } from '../../features/tabs/Inpainting/inpaintingSlice';
-import { validateSeedWeights } from '../../common/util/seedWeightPairs';
+import { RootState } from 'app/store';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import { OptionsState } from 'features/options/store/optionsSlice';
+import { SystemState } from 'features/system/store/systemSlice';
+import { validateSeedWeights } from 'common/util/seedWeightPairs';
+import { initialCanvasImageSelector } from 'features/canvas/store/canvasSelectors';
 
 export const readinessSelector = createSelector(
   [
     (state: RootState) => state.options,
     (state: RootState) => state.system,
-    (state: RootState) => state.inpainting,
+    initialCanvasImageSelector,
     activeTabNameSelector,
   ],
   (
     options: OptionsState,
     system: SystemState,
-    inpainting: InpaintingState,
+    initialCanvasImage,
     activeTabName
   ) => {
     const {
       prompt,
       shouldGenerateVariations,
       seedWeights,
-      // maskPath,
       initialImage,
       seed,
     } = options;
 
     const { isProcessing, isConnected } = system;
 
-    const { imageToInpaint } = inpainting;
-
     let isReady = true;
     const reasonsWhyNotReady: string[] = [];
 
@@ -48,20 +44,6 @@ export const readinessSelector = createSelector(
       reasonsWhyNotReady.push('No initial image selected');
     }
 
-    if (activeTabName === 'inpainting' && !imageToInpaint) {
-      isReady = false;
-      reasonsWhyNotReady.push('No inpainting image selected');
-    }
-
-    // // We don't use mask paths now.
-    // //  Cannot generate with a mask without img2img
-    // if (maskPath && !initialImage) {
-    //   isReady = false;
-    //   reasonsWhyNotReady.push(
-    //     'On ImageToImage tab, but no mask is provided.'
-    //   );
-    // }
-
     // TODO: job queue
     // Cannot generate if already processing an image
     if (isProcessing) {

frontend/src/app/socketio/actions.ts

@@ -1,8 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
-import { GalleryCategory } from '../../features/gallery/gallerySlice';
-import { InvokeTabName } from '../../features/tabs/InvokeTabs';
-import * as InvokeAI from '../invokeai';
-
+import { GalleryCategory } from 'features/gallery/store/gallerySlice';
+import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
+import * as InvokeAI from 'app/invokeai';
 
 /**
  * We can't use redux-toolkit's createSlice() to make these actions,
@@ -26,8 +25,6 @@ export const requestNewImages = createAction<GalleryCategory>(
 export const cancelProcessing = createAction<undefined>(
   'socketio/cancelProcessing'
 );
-export const uploadImage = createAction<InvokeAI.UploadImagePayload>('socketio/uploadImage');
-export const uploadMaskImage = createAction<File>('socketio/uploadMaskImage');
 
 export const requestSystemConfig = createAction<undefined>(
   'socketio/requestSystemConfig'
@@ -36,3 +33,11 @@ export const requestSystemConfig = createAction<undefined>(
 export const requestModelChange = createAction<string>(
   'socketio/requestModelChange'
 );
+
+export const saveStagingAreaImageToGallery = createAction<string>(
+  'socketio/saveStagingAreaImageToGallery'
+);
+
+export const emptyTempFolder = createAction<undefined>(
+  'socketio/requestEmptyTempFolder'
+);

frontend/src/app/socketio/emitters.ts

@@ -4,23 +4,22 @@ import { Socket } from 'socket.io-client';
 import {
   frontendToBackendParameters,
   FrontendToBackendParametersConfig,
-} from '../../common/util/parameterTranslation';
+} from 'common/util/parameterTranslation';
 import {
   GalleryCategory,
   GalleryState,
   removeImage,
-} from '../../features/gallery/gallerySlice';
-import { OptionsState } from '../../features/options/optionsSlice';
+} from 'features/gallery/store/gallerySlice';
+import { OptionsState } from 'features/options/store/optionsSlice';
 import {
   addLogEntry,
-  errorOccurred,
+  generationRequested,
   modelChangeRequested,
   setIsProcessing,
-} from '../../features/system/systemSlice';
-import { inpaintingImageElementRef } from '../../features/tabs/Inpainting/InpaintingCanvas';
-import { InvokeTabName } from '../../features/tabs/InvokeTabs';
-import * as InvokeAI from '../invokeai';
-import { RootState } from '../store';
+} from 'features/system/store/systemSlice';
+import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
+import * as InvokeAI from 'app/invokeai';
+import { RootState } from 'app/store';
 
 /**
  * Returns an object containing all functions which use `socketio.emit()`.
@@ -42,7 +41,7 @@ const makeSocketIOEmitters = (
       const {
         options: optionsState,
         system: systemState,
-        inpainting: inpaintingState,
+        canvas: canvasState,
         gallery: galleryState,
       } = state;
 
@@ -50,32 +49,13 @@ const makeSocketIOEmitters = (
         {
           generationMode,
           optionsState,
-          inpaintingState,
+          canvasState,
           systemState,
         };
 
-      if (generationMode === 'inpainting') {
-        if (
-          !inpaintingImageElementRef.current ||
-          !inpaintingState.imageToInpaint?.url
-        ) {
-          dispatch(
-            addLogEntry({
-              timestamp: dateFormat(new Date(), 'isoDateTime'),
-              message: 'Inpainting image not loaded, cannot generate image.',
-              level: 'error',
-            })
-          );
-          dispatch(errorOccurred());
-          return;
-        }
+      dispatch(generationRequested());
 
-        frontendToBackendParametersConfig.imageToProcessUrl =
-          inpaintingState.imageToInpaint.url;
-
-        frontendToBackendParametersConfig.maskImageElement =
-          inpaintingImageElementRef.current;
-      } else if (!['txt2img', 'img2img'].includes(generationMode)) {
+      if (!['txt2img', 'img2img'].includes(generationMode)) {
         if (!galleryState.currentImage?.url) return;
 
         frontendToBackendParametersConfig.imageToProcessUrl =
@@ -96,7 +76,12 @@ const makeSocketIOEmitters = (
       // TODO: handle maintaining masks for reproducibility in future
       if (generationParameters.init_mask) {
         generationParameters.init_mask = generationParameters.init_mask
-          .substr(0, 20)
+          .substr(0, 64)
+          .concat('...');
+      }
+      if (generationParameters.init_img) {
+        generationParameters.init_img = generationParameters.init_img
+          .substr(0, 64)
           .concat('...');
       }
 
@@ -162,9 +147,9 @@ const makeSocketIOEmitters = (
       );
     },
     emitDeleteImage: (imageToDelete: InvokeAI.Image) => {
-      const { url, uuid, category } = imageToDelete;
+      const { url, uuid, category, thumbnail } = imageToDelete;
       dispatch(removeImage(imageToDelete));
-      socketio.emit('deleteImage', url, uuid, category);
+      socketio.emit('deleteImage', url, thumbnail, uuid, category);
     },
     emitRequestImages: (category: GalleryCategory) => {
       const gallery: GalleryState = getState().gallery;
@@ -179,13 +164,6 @@ const makeSocketIOEmitters = (
     emitCancelProcessing: () => {
       socketio.emit('cancel');
     },
-    emitUploadImage: (payload: InvokeAI.UploadImagePayload) => {
-      const { file, destination } = payload;
-      socketio.emit('uploadImage', file, file.name, destination);
-    },
-    emitUploadMaskImage: (file: File) => {
-      socketio.emit('uploadMaskImage', file, file.name);
-    },
     emitRequestSystemConfig: () => {
       socketio.emit('requestSystemConfig');
     },
@@ -193,6 +171,12 @@ const makeSocketIOEmitters = (
       dispatch(modelChangeRequested());
       socketio.emit('requestModelChange', modelName);
     },
+    emitSaveStagingAreaImageToGallery: (url: string) => {
+      socketio.emit('requestSaveStagingAreaImageToGallery', url);
+    },
+    emitRequestEmptyTempFolder: () => {
+      socketio.emit('requestEmptyTempFolder');
+    },
   };
 };
 

frontend/src/app/socketio/listeners.ts

@@ -2,7 +2,7 @@ import { AnyAction, MiddlewareAPI, Dispatch } from '@reduxjs/toolkit';
 import { v4 as uuidv4 } from 'uuid';
 import dateFormat from 'dateformat';
 
-import * as InvokeAI from '../invokeai';
+import * as InvokeAI from 'app/invokeai';
 
 import {
   addLogEntry,
@@ -15,7 +15,8 @@ import {
   errorOccurred,
   setModelList,
   setIsCancelable,
-} from '../../features/system/systemSlice';
+  addToast,
+} from 'features/system/store/systemSlice';
 
 import {
   addGalleryImages,
@@ -23,21 +24,22 @@ import {
   clearIntermediateImage,
   GalleryState,
   removeImage,
-  setCurrentImage,
   setIntermediateImage,
-} from '../../features/gallery/gallerySlice';
+} from 'features/gallery/store/gallerySlice';
 
 import {
   clearInitialImage,
+  setInfillMethod,
   setInitialImage,
   setMaskPath,
-} from '../../features/options/optionsSlice';
-import { requestImages, requestNewImages } from './actions';
+} from 'features/options/store/optionsSlice';
 import {
-  clearImageToInpaint,
-  setImageToInpaint,
-} from '../../features/tabs/Inpainting/inpaintingSlice';
-import { tabMap } from '../../features/tabs/InvokeTabs';
+  requestImages,
+  requestNewImages,
+  requestSystemConfig,
+} from './actions';
+import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
+import { tabMap } from 'features/tabs/components/InvokeTabs';
 
 /**
  * Returns an object containing listener callbacks for socketio events.
@@ -56,19 +58,20 @@ const makeSocketIOListeners = (
       try {
         dispatch(setIsConnected(true));
         dispatch(setCurrentStatus('Connected'));
+        dispatch(requestSystemConfig());
         const gallery: GalleryState = getState().gallery;
 
-        if (gallery.categories.user.latest_mtime) {
-          dispatch(requestNewImages('user'));
-        } else {
-          dispatch(requestImages('user'));
-        }
-
         if (gallery.categories.result.latest_mtime) {
           dispatch(requestNewImages('result'));
         } else {
           dispatch(requestImages('result'));
         }
+
+        if (gallery.categories.user.latest_mtime) {
+          dispatch(requestNewImages('user'));
+        } else {
+          dispatch(requestImages('user'));
+        }
       } catch (e) {
         console.error(e);
       }
@@ -97,19 +100,42 @@ const makeSocketIOListeners = (
      */
     onGenerationResult: (data: InvokeAI.ImageResultResponse) => {
       try {
-        const { shouldLoopback, activeTab } = getState().options;
+        const state = getState();
+        const { shouldLoopback, activeTab } = state.options;
+        const { boundingBox: _, generationMode, ...rest } = data;
+
         const newImage = {
           uuid: uuidv4(),
-          ...data,
-          category: 'result',
+          ...rest,
         };
 
-        dispatch(
-          addImage({
-            category: 'result',
-            image: newImage,
-          })
-        );
+        if (['txt2img', 'img2img'].includes(generationMode)) {
+          dispatch(
+            addImage({
+              category: 'result',
+              image: { ...newImage, category: 'result' },
+            })
+          );
+        }
+
+        if (generationMode === 'unifiedCanvas' && data.boundingBox) {
+          const { boundingBox } = data;
+          dispatch(
+            addImageToStagingArea({
+              image: { ...newImage, category: 'temp' },
+              boundingBox,
+            })
+          );
+
+          if (state.canvas.shouldAutoSave) {
+            dispatch(
+              addImage({
+                image: { ...newImage, category: 'result' },
+                category: 'result',
+              })
+            );
+          }
+        }
 
         if (shouldLoopback) {
           const activeTabName = tabMap[activeTab];
@@ -118,13 +144,11 @@ const makeSocketIOListeners = (
               dispatch(setInitialImage(newImage));
               break;
             }
-            case 'inpainting': {
-              dispatch(setImageToInpaint(newImage));
-              break;
-            }
           }
         }
 
+        dispatch(clearIntermediateImage());
+
         dispatch(
           addLogEntry({
             timestamp: dateFormat(new Date(), 'isoDateTime'),
@@ -144,6 +168,7 @@ const makeSocketIOListeners = (
           setIntermediateImage({
             uuid: uuidv4(),
             ...data,
+            category: 'result',
           })
         );
         if (!data.isBase64) {
@@ -299,16 +324,11 @@ const makeSocketIOListeners = (
 
       // remove references to image in options
       const { initialImage, maskPath } = getState().options;
-      const { imageToInpaint } = getState().inpainting;
 
       if (initialImage?.url === url || initialImage === url) {
         dispatch(clearInitialImage());
       }
 
-      if (imageToInpaint?.url === url) {
-        dispatch(clearImageToInpaint());
-      }
-
       if (maskPath === url) {
         dispatch(setMaskPath(''));
       }
@@ -320,56 +340,11 @@ const makeSocketIOListeners = (
         })
       );
     },
-    onImageUploaded: (data: InvokeAI.ImageUploadResponse) => {
-      const { destination, ...rest } = data;
-      const image = {
-        uuid: uuidv4(),
-        ...rest,
-      };
-
-      try {
-        dispatch(addImage({ image, category: 'user' }));
-
-        switch (destination) {
-          case 'img2img': {
-            dispatch(setInitialImage(image));
-            break;
-          }
-          case 'inpainting': {
-            dispatch(setImageToInpaint(image));
-            break;
-          }
-          default: {
-            dispatch(setCurrentImage(image));
-            break;
-          }
-        }
-
-        dispatch(
-          addLogEntry({
-            timestamp: dateFormat(new Date(), 'isoDateTime'),
-            message: `Image uploaded: ${data.url}`,
-          })
-        );
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    /**
-     * 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));
+      if (!data.infill_methods.includes('patchmatch')) {
+        dispatch(setInfillMethod(data.infill_methods[0]));
+      }
     },
     onModelChanged: (data: InvokeAI.ModelChangeResponse) => {
       const { model_name, model_list } = data;
@@ -399,6 +374,16 @@ const makeSocketIOListeners = (
         })
       );
     },
+    onTempFolderEmptied: () => {
+      dispatch(
+        addToast({
+          title: 'Temp Folder Emptied',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        })
+      );
+    },
   };
 };
 

frontend/src/app/socketio/middleware.ts

@@ -4,7 +4,7 @@ import { io } from 'socket.io-client';
 import makeSocketIOListeners from './listeners';
 import makeSocketIOEmitters from './emitters';
 
-import * as InvokeAI from '../invokeai';
+import * as InvokeAI from 'app/invokeai';
 
 /**
  * Creates a socketio middleware to handle communication with server.
@@ -43,11 +43,10 @@ export const socketioMiddleware = () => {
       onGalleryImages,
       onProcessingCanceled,
       onImageDeleted,
-      onImageUploaded,
-      onMaskImageUploaded,
       onSystemConfig,
       onModelChanged,
       onModelChangeFailed,
+      onTempFolderEmptied,
     } = makeSocketIOListeners(store);
 
     const {
@@ -58,10 +57,10 @@ export const socketioMiddleware = () => {
       emitRequestImages,
       emitRequestNewImages,
       emitCancelProcessing,
-      emitUploadImage,
-      emitUploadMaskImage,
       emitRequestSystemConfig,
       emitRequestModelChange,
+      emitSaveStagingAreaImageToGallery,
+      emitRequestEmptyTempFolder,
     } = makeSocketIOEmitters(store, socketio);
 
     /**
@@ -104,17 +103,6 @@ export const socketioMiddleware = () => {
         onImageDeleted(data);
       });
 
-      socketio.on(
-        'imageUploaded',
-        (data: InvokeAI.ImageUploadResponse) => {
-          onImageUploaded(data);
-        }
-      );
-
-      socketio.on('maskImageUploaded', (data: InvokeAI.ImageUrlResponse) => {
-        onMaskImageUploaded(data);
-      });
-
       socketio.on('systemConfig', (data: InvokeAI.SystemConfig) => {
         onSystemConfig(data);
       });
@@ -127,6 +115,10 @@ export const socketioMiddleware = () => {
         onModelChangeFailed(data);
       });
 
+      socketio.on('tempFolderEmptied', () => {
+        onTempFolderEmptied();
+      });
+
       areListenersSet = true;
     }
 
@@ -169,16 +161,6 @@ export const socketioMiddleware = () => {
         break;
       }
 
-      case 'socketio/uploadImage': {
-        emitUploadImage(action.payload);
-        break;
-      }
-
-      case 'socketio/uploadMaskImage': {
-        emitUploadMaskImage(action.payload);
-        break;
-      }
-
       case 'socketio/requestSystemConfig': {
         emitRequestSystemConfig();
         break;
@@ -188,6 +170,16 @@ export const socketioMiddleware = () => {
         emitRequestModelChange(action.payload);
         break;
       }
+
+      case 'socketio/saveStagingAreaImageToGallery': {
+        emitSaveStagingAreaImageToGallery(action.payload);
+        break;
+      }
+
+      case 'socketio/requestEmptyTempFolder': {
+        emitRequestEmptyTempFolder();
+        break;
+      }
     }
 
     next(action);

frontend/src/app/store.ts

@@ -5,16 +5,14 @@ import type { TypedUseSelectorHook } from 'react-redux';
 import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
 
-import optionsReducer, { OptionsState } from '../features/options/optionsSlice';
-import galleryReducer, { GalleryState } from '../features/gallery/gallerySlice';
-import inpaintingReducer, {
-  InpaintingState,
-} from '../features/tabs/Inpainting/inpaintingSlice';
+import { getPersistConfig } from 'redux-deep-persist';
+
+import optionsReducer from 'features/options/store/optionsSlice';
+import galleryReducer from 'features/gallery/store/gallerySlice';
+import systemReducer from 'features/system/store/systemSlice';
+import canvasReducer from 'features/canvas/store/canvasSlice';
 
-import systemReducer, { SystemState } from '../features/system/systemSlice';
 import { socketioMiddleware } from './socketio/middleware';
-import autoMergeLevel2 from 'redux-persist/es/stateReconciler/autoMergeLevel2';
-import { PersistPartial } from 'redux-persist/es/persistReducer';
 
 /**
  * redux-persist provides an easy and reliable way to persist state across reloads.
@@ -28,87 +26,79 @@ import { PersistPartial } from 'redux-persist/es/persistReducer';
  * 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 rootPersistConfig = {
-  key: 'root',
-  storage,
-  stateReconciler: autoMergeLevel2,
-  blacklist: ['gallery', 'system', 'inpainting'],
-};
+const canvasBlacklist = [
+  'cursorPosition',
+  'isCanvasInitialized',
+  'doesCanvasNeedScaling',
+].map((blacklistItem) => `canvas.${blacklistItem}`);
 
-const systemPersistConfig = {
-  key: 'system',
-  storage,
-  stateReconciler: autoMergeLevel2,
-  blacklist: [
-    'isCancelable',
-    'isConnected',
-    'isProcessing',
-    'currentStep',
-    'socketId',
-    'isESRGANAvailable',
-    'isGFPGANAvailable',
-    'currentStep',
-    'totalSteps',
-    'currentIteration',
-    'totalIterations',
-    'currentStatus',
-  ],
-};
+const systemBlacklist = [
+  'currentIteration',
+  'currentStatus',
+  'currentStep',
+  'isCancelable',
+  'isConnected',
+  'isESRGANAvailable',
+  'isGFPGANAvailable',
+  'isProcessing',
+  'socketId',
+  'totalIterations',
+  'totalSteps',
+].map((blacklistItem) => `system.${blacklistItem}`);
 
-const galleryPersistConfig = {
-  key: 'gallery',
-  storage,
-  stateReconciler: autoMergeLevel2,
-  whitelist: [
-    'galleryWidth',
-    'shouldPinGallery',
-    'shouldShowGallery',
-    'galleryScrollPosition',
-    'galleryImageMinimumWidth',
-    'galleryImageObjectFit',
-  ],
-};
+const galleryBlacklist = [
+  'categories',
+  'currentCategory',
+  'currentImage',
+  'currentImageUuid',
+  'shouldAutoSwitchToNewImages',
+  'shouldHoldGalleryOpen',
+  'intermediateImage',
+].map((blacklistItem) => `gallery.${blacklistItem}`);
 
-const inpaintingPersistConfig = {
-  key: 'inpainting',
-  storage,
-  stateReconciler: autoMergeLevel2,
-  blacklist: ['pastLines', 'futuresLines', 'cursorPosition'],
-};
-
-const reducers = combineReducers({
+const rootReducer = combineReducers({
   options: optionsReducer,
-  gallery: persistReducer<GalleryState>(galleryPersistConfig, galleryReducer),
-  system: persistReducer<SystemState>(systemPersistConfig, systemReducer),
-  inpainting: persistReducer<InpaintingState>(
-    inpaintingPersistConfig,
-    inpaintingReducer
-  ),
+  gallery: galleryReducer,
+  system: systemReducer,
+  canvas: canvasReducer,
 });
 
-const persistedReducer = persistReducer<{
-  options: OptionsState;
-  gallery: GalleryState & PersistPartial;
-  system: SystemState & PersistPartial;
-  inpainting: InpaintingState & PersistPartial;
-}>(rootPersistConfig, reducers);
+const rootPersistConfig = getPersistConfig({
+  key: 'root',
+  storage,
+  rootReducer,
+  blacklist: [...canvasBlacklist, ...systemBlacklist, ...galleryBlacklist],
+  debounce: 300,
+});
+
+const persistedReducer = persistReducer(rootPersistConfig, rootReducer);
 
 // Continue with store setup
 export const store = configureStore({
   reducer: persistedReducer,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
-      // redux-persist sometimes needs to temporarily put a function in redux state, need to disable this check
+      immutableCheck: false,
       serializableCheck: false,
     }).concat(socketioMiddleware()),
+  devTools: {
+    // Uncommenting these very rapidly called actions makes the redux dev tools output much more readable
+    actionsDenylist: [
+      'canvas/setCursorPosition',
+      'canvas/setStageCoordinates',
+      'canvas/setStageScale',
+      'canvas/setIsDrawing',
+      // 'canvas/setBoundingBoxCoordinates',
+      // 'canvas/setBoundingBoxDimensions',
+      'canvas/setIsDrawing',
+      'canvas/addPointToCurrentLine',
+    ],
+  },
 });
 
+export type AppGetState = typeof store.getState;
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 

frontend/src/assets/images/mask.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    <g transform="matrix(1,0,0,1,0,5)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,10)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,15)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,20)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,25)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,30)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,35)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,40)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,45)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,50)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,55)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,60)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-5)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-10)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-15)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-20)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-25)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-30)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-35)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-40)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-45)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-50)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-55)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,0,-60)">
+        <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+    </g>
+</svg>

frontend/src/common/components/GuideIcon.tsx

@@ -1,7 +1,7 @@
 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 { Feature } from 'app/features';
 import GuidePopover from './GuidePopover';
 
 type GuideIconProps = {
@@ -13,7 +13,7 @@ const GuideIcon = forwardRef(
   ({ feature, icon = MdHelp }: GuideIconProps, ref) => (
     <GuidePopover feature={feature}>
       <Box ref={ref}>
-        <Icon as={icon} />
+        <Icon marginBottom={'-.15rem'} as={icon} />
       </Box>
     </GuidePopover>
   )

frontend/src/common/components/GuidePopover.scss

@@ -1,11 +1,11 @@
 .guide-popover-arrow {
-  background-color: var(--tab-panel-bg) !important;
-  box-shadow: none !important;
+  background-color: var(--tab-panel-bg);
+  box-shadow: none;
 }
 
 .guide-popover-content {
-  background-color: var(--background-color-secondary) !important;
-  border: none !important;
+  background-color: var(--background-color-secondary);
+  border: none;
 }
 
 .guide-popover-guide-content {

frontend/src/common/components/GuidePopover.tsx

@@ -5,12 +5,12 @@ import {
   PopoverTrigger,
   Box,
 } from '@chakra-ui/react';
-import { SystemState } from '../../features/system/systemSlice';
-import { useAppSelector } from '../../app/store';
-import { RootState } from '../../app/store';
+import { SystemState } from 'features/system/store/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';
+import { Feature, FEATURES } from 'app/features';
 
 type GuideProps = {
   children: ReactElement;

frontend/src/common/components/IAIAlertDialog.tsx

@@ -0,0 +1,86 @@
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+  forwardRef,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { cloneElement, ReactElement, ReactNode, useRef } from 'react';
+
+type Props = {
+  acceptButtonText?: string;
+  acceptCallback: () => void;
+  cancelButtonText?: string;
+  cancelCallback?: () => void;
+  children: ReactNode;
+  title: string;
+  triggerComponent: ReactElement;
+};
+
+const IAIAlertDialog = forwardRef((props: Props, ref) => {
+  const {
+    acceptButtonText = 'Accept',
+    acceptCallback,
+    cancelButtonText = 'Cancel',
+    cancelCallback,
+    children,
+    title,
+    triggerComponent,
+  } = props;
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleAccept = () => {
+    acceptCallback();
+    onClose();
+  };
+
+  const handleCancel = () => {
+    cancelCallback && cancelCallback();
+    onClose();
+  };
+
+  return (
+    <>
+      {cloneElement(triggerComponent, {
+        onClick: onOpen,
+        ref: ref,
+      })}
+
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent className="modal">
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              {title}
+            </AlertDialogHeader>
+
+            <AlertDialogBody>{children}</AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button
+                ref={cancelRef}
+                onClick={handleCancel}
+                className="modal-close-btn"
+              >
+                {cancelButtonText}
+              </Button>
+              <Button colorScheme="red" onClick={handleAccept} ml={3}>
+                {acceptButtonText}
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+});
+export default IAIAlertDialog;

frontend/src/common/components/IAIButton.scss

@@ -1,3 +1,8 @@
 .invokeai__button {
-  justify-content: space-between;
+  background-color: var(--btn-base-color);
+  place-content: center;
+
+  &:hover {
+    background-color: var(--btn-base-color-hover);
+  }
 }

frontend/src/common/components/IAICheckbox.scss

@@ -15,7 +15,7 @@
     svg {
       width: 0.6rem;
       height: 0.6rem;
-      stroke-width: 3px !important;
+      stroke-width: 3px;
     }
 
     &[data-checked] {

frontend/src/common/components/IAIIconButton.scss

@@ -1,11 +1,11 @@
 @use '../../styles/Mixins/' as *;
 
 .invokeai__icon-button {
-  background-color: var(--btn-grey);
+  background: var(--btn-base-color);
   cursor: pointer;
 
   &:hover {
-    background-color: var(--btn-grey-hover);
+    background-color: var(--btn-base-color-hover);
   }
 
   &[data-selected='true'] {
@@ -20,16 +20,39 @@
   }
 
   &[data-variant='link'] {
-    background: none !important;
+    background: none;
     &:hover {
-      background: none !important;
+      background: none;
     }
   }
 
-  &[data-selected='true'] {
-    border-color: var(--accent-color);
+  // Check Box Style
+  &[data-as-checkbox='true'] {
+    background-color: var(--btn-base-color);
+    border: 3px solid var(--btn-base-color);
+
+    svg {
+      fill: var(--text-color);
+    }
+
     &:hover {
-      border-color: var(--accent-color-hover);
+      background-color: var(--btn-base-color);
+      border-color: var(--btn-checkbox-border-hover);
+      svg {
+        fill: var(--text-color);
+      }
+    }
+
+    &[data-selected='true'] {
+      border-color: var(--accent-color);
+      svg {
+        fill: var(--accent-color-hover);
+      }
+      &:hover {
+        svg {
+          fill: var(--accent-color-hover);
+        }
+      }
     }
   }
 
@@ -38,28 +61,12 @@
     animation-duration: 1s;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
+
     &:hover {
       animation: none;
       background-color: var(--accent-color-hover);
     }
   }
-
-  &[data-as-checkbox='true'] {
-    background-color: var(--btn-grey);
-    border: 3px solid var(--btn-grey);
-
-    svg {
-      fill: var(--text-color);
-    }
-
-    &:hover {
-      background-color: var(--btn-grey);
-      border-color: var(--btn-checkbox-border-hover);
-      svg {
-        fill: var(--text-color);
-      }
-    }
-  }
 }
 
 @keyframes pulseColor {

frontend/src/common/components/IAIIconButton.tsx

@@ -25,13 +25,23 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
   } = props;
 
   return (
-    <Tooltip label={tooltip} hasArrow {...tooltipProps}>
+    <Tooltip
+      label={tooltip}
+      hasArrow
+      {...tooltipProps}
+      {...(tooltipProps?.placement
+        ? { placement: tooltipProps.placement }
+        : { placement: 'top' })}
+    >
       <IconButton
         ref={forwardedRef}
-        className={`invokeai__icon-button ${styleClass}`}
+        className={
+          styleClass
+            ? `invokeai__icon-button ${styleClass}`
+            : `invokeai__icon-button`
+        }
         data-as-checkbox={asCheckbox}
         data-selected={isChecked !== undefined ? isChecked : undefined}
-        style={props.onClick ? { cursor: 'pointer' } : {}}
         {...rest}
       />
     </Tooltip>

frontend/src/common/components/IAINumberInput.scss

@@ -1,16 +1,14 @@
 .invokeai__number-input-form-control {
-  display: grid;
-  grid-template-columns: max-content auto;
+  display: flex;
   align-items: center;
+  column-gap: 1rem;
 
   .invokeai__number-input-form-label {
     color: var(--text-color-secondary);
     margin-right: 0;
     font-size: 1rem;
     margin-bottom: 0;
-    flex-grow: 2;
     white-space: nowrap;
-    padding-right: 1rem;
 
     &[data-focus] + .invokeai__number-input-root {
       outline: none;
@@ -33,7 +31,7 @@
     align-items: center;
     background-color: var(--background-color-secondary);
     border: 2px solid var(--border-color);
-    border-radius: 0.2rem;
+    border-radius: 0.3rem;
   }
 
   .invokeai__number-input-field {
@@ -41,10 +39,8 @@
     font-weight: bold;
     width: 100%;
     height: auto;
-    padding: 0;
     font-size: 0.9rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    padding: 0 0.5rem;
 
     &:focus {
       outline: none;

frontend/src/common/components/IAINumberInput.tsx

@@ -21,6 +21,7 @@ const numberStringRegex = /^-?(0\.)?\.?$/;
 interface Props extends Omit<NumberInputProps, 'onChange'> {
   styleClass?: string;
   label?: string;
+  labelFontSize?: string | number;
   width?: string | number;
   showStepper?: boolean;
   value: number;
@@ -43,6 +44,7 @@ interface Props extends Omit<NumberInputProps, 'onChange'> {
 const IAINumberInput = (props: Props) => {
   const {
     label,
+    labelFontSize = '1rem',
     styleClass,
     isDisabled = false,
     showStepper = true,
@@ -127,6 +129,7 @@ const IAINumberInput = (props: Props) => {
           <FormLabel
             className="invokeai__number-input-form-label"
             style={{ display: label ? 'block' : 'none' }}
+            fontSize={labelFontSize}
             {...formLabelProps}
           >
             {label}

frontend/src/common/components/IAIPopover.scss

@@ -1,10 +1,10 @@
 .invokeai__popover-content {
   min-width: unset;
-  width: unset !important;
+  width: unset;
   padding: 1rem;
-  border-radius: 0.5rem !important;
-  background-color: var(--background-color) !important;
-  border: 2px solid var(--border-color) !important;
+  border-radius: 0.5rem;
+  background-color: var(--background-color);
+  border: 2px solid var(--border-color);
 
   .invokeai__popover-arrow {
     background-color: var(--background-color) !important;

frontend/src/common/components/IAIPopover.tsx

@@ -29,7 +29,7 @@ const IAIPopover = (props: IAIPopoverProps) => {
     <Popover {...rest}>
       <PopoverTrigger>{triggerComponent}</PopoverTrigger>
       <PopoverContent className={`invokeai__popover-content ${styleClass}`}>
-        {hasArrow && <PopoverArrow className={'invokeai__popover-arrow'} />}
+        {hasArrow && <PopoverArrow className="invokeai__popover-arrow" />}
         {children}
       </PopoverContent>
     </Popover>

frontend/src/common/components/IAISelect.scss

@@ -4,7 +4,6 @@
   display: flex;
   column-gap: 1rem;
   align-items: center;
-  width: max-content;
 
   .invokeai__select-label {
     color: var(--text-color-secondary);
@@ -15,6 +14,7 @@
     border: 2px solid var(--border-color);
     background-color: var(--background-color-secondary);
     font-weight: bold;
+    font-size: 0.9rem;
     height: 2rem;
     border-radius: 0.2rem;
 
@@ -27,5 +27,6 @@
 
   .invokeai__select-option {
     background-color: var(--background-color-secondary);
+    color: var(--text-color-secondary);
   }
 }

frontend/src/common/components/IAISelect.tsx

@@ -1,9 +1,18 @@
-import { FormControl, FormLabel, Select, SelectProps } from '@chakra-ui/react';
+import {
+  FormControl,
+  FormLabel,
+  Select,
+  SelectProps,
+  Tooltip,
+  TooltipProps,
+} from '@chakra-ui/react';
 import { MouseEvent } from 'react';
 
 type IAISelectProps = SelectProps & {
-  label: string;
+  label?: string;
   styleClass?: string;
+  tooltip?: string;
+  tooltipProps?: Omit<TooltipProps, 'children'>;
   validValues:
     | Array<number | string>
     | Array<{ key: string; value: string | number }>;
@@ -16,6 +25,8 @@ const IAISelect = (props: IAISelectProps) => {
     label,
     isDisabled,
     validValues,
+    tooltip,
+    tooltipProps,
     size = 'sm',
     fontSize = 'md',
     styleClass,
@@ -32,37 +43,41 @@ const IAISelect = (props: IAISelectProps) => {
         e.nativeEvent.cancelBubble = true;
       }}
     >
-      <FormLabel
-        className="invokeai__select-label"
-        fontSize={fontSize}
-        marginBottom={1}
-        flexGrow={2}
-        whiteSpace="nowrap"
-      >
-        {label}
-      </FormLabel>
-      <Select
-        className="invokeai__select-picker"
-        fontSize={fontSize}
-        size={size}
-        {...rest}
-      >
-        {validValues.map((opt) => {
-          return typeof opt === 'string' || typeof opt === 'number' ? (
-            <option key={opt} value={opt} className="invokeai__select-option">
-              {opt}
-            </option>
-          ) : (
-            <option
-              key={opt.value}
-              value={opt.value}
-              className="invokeai__select-option"
-            >
-              {opt.key}
-            </option>
-          );
-        })}
-      </Select>
+      {label && (
+        <FormLabel
+          className="invokeai__select-label"
+          fontSize={fontSize}
+          marginBottom={1}
+          flexGrow={2}
+          whiteSpace="nowrap"
+        >
+          {label}
+        </FormLabel>
+      )}
+      <Tooltip label={tooltip} {...tooltipProps}>
+        <Select
+          className="invokeai__select-picker"
+          fontSize={fontSize}
+          size={size}
+          {...rest}
+        >
+          {validValues.map((opt) => {
+            return typeof opt === 'string' || typeof opt === 'number' ? (
+              <option key={opt} value={opt} className="invokeai__select-option">
+                {opt}
+              </option>
+            ) : (
+              <option
+                key={opt.value}
+                value={opt.value}
+                className="invokeai__select-option"
+              >
+                {opt.key}
+              </option>
+            );
+          })}
+        </Select>
+      </Tooltip>
     </FormControl>
   );
 };

frontend/src/common/components/IAISlider.scss

@@ -1,40 +1,62 @@
-@use '../../styles/Mixins/' as *;
-
-.invokeai__slider-form-control {
+.invokeai__slider-component {
   display: flex;
-  column-gap: 1rem;
-  justify-content: space-between;
+  gap: 1rem;
   align-items: center;
-  width: max-content;
-  padding-right: 0.25rem;
 
-  .invokeai__slider-inner-container {
-    display: flex;
-    column-gap: 0.5rem;
+  .invokeai__slider-component-label {
+    min-width: max-content;
+    margin: 0;
+    font-weight: bold;
+    font-size: 0.9rem;
+    color: var(--text-color-secondary);
+  }
 
-    .invokeai__slider-form-label {
-      color: var(--text-color-secondary);
-      margin: 0;
-      margin-right: 0.5rem;
-      margin-bottom: 0.1rem;
+  .invokeai__slider_track {
+    background-color: var(--tab-color);
+  }
+
+  .invokeai__slider_track-filled {
+    background-color: var(--slider-color);
+  }
+
+  .invokeai__slider-thumb {
+    width: 4px;
+  }
+
+  .invokeai__slider-mark {
+    font-size: 0.75rem;
+    font-weight: bold;
+    color: var(--slider-color);
+    margin-top: 0.3rem;
+  }
+
+  .invokeai__slider-number-input {
+    border: none;
+    font-size: 0.9rem;
+    font-weight: bold;
+    height: 2rem;
+    background-color: var(--background-color-secondary);
+    border: 2px solid var(--border-color);
+
+    &:focus {
+      outline: none;
+      box-shadow: none;
+      border: 2px solid var(--input-border-color);
+      box-shadow: 0 0 10px 0 var(--input-box-shadow-color);
     }
 
-    .invokeai__slider-root {
-      .invokeai__slider-filled-track {
-        background-color: var(--accent-color-hover);
-      }
+    &:disabled {
+      opacity: 0.2;
+    }
+  }
 
-      .invokeai__slider-track {
-        background-color: var(--text-color-secondary);
-        height: 5px;
-        border-radius: 9999px;
-      }
+  .invokeai__slider-number-stepper {
+    border: none;
+  }
 
-      .invokeai__slider-thumb {
-      }
+  &[data-markers='true'] {
+    .invokeai__slider_container {
+      margin-top: -1rem;
     }
   }
 }
-
-.invokeai__slider-thumb-tooltip {
-}

frontend/src/common/components/IAISlider.tsx

@@ -1,87 +1,246 @@
 import {
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
   FormControl,
-  FormLabel,
-  Tooltip,
-  SliderProps,
   FormControlProps,
+  FormLabel,
   FormLabelProps,
-  SliderTrackProps,
+  HStack,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputFieldProps,
+  NumberInputProps,
+  NumberInputStepper,
+  NumberInputStepperProps,
+  Slider,
+  SliderFilledTrack,
+  SliderMark,
+  SliderMarkProps,
+  SliderThumb,
   SliderThumbProps,
+  SliderTrack,
+  SliderTrackProps,
+  Tooltip,
   TooltipProps,
-  SliderInnerTrackProps,
 } from '@chakra-ui/react';
+import React, { FocusEvent, useEffect, useMemo, useState } from 'react';
+import { BiReset } from 'react-icons/bi';
+import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton';
+import _ from 'lodash';
 
-type IAISliderProps = SliderProps & {
-  label?: string;
+export type IAIFullSliderProps = {
+  label: string;
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange: (v: number) => void;
+  withSliderMarks?: boolean;
+  sliderMarkLeftOffset?: number;
+  sliderMarkRightOffset?: number;
+  withInput?: boolean;
+  isInteger?: boolean;
+  inputWidth?: string | number;
+  inputReadOnly?: boolean;
+  withReset?: boolean;
+  handleReset?: () => void;
+  isResetDisabled?: boolean;
+  isSliderDisabled?: boolean;
+  isInputDisabled?: boolean;
+  tooltipSuffix?: string;
+  hideTooltip?: boolean;
   styleClass?: string;
-  formControlProps?: FormControlProps;
-  formLabelProps?: FormLabelProps;
+  sliderFormControlProps?: FormControlProps;
+  sliderFormLabelProps?: FormLabelProps;
+  sliderMarkProps?: Omit<SliderMarkProps, 'value'>;
   sliderTrackProps?: SliderTrackProps;
-  sliderInnerTrackProps?: SliderInnerTrackProps;
   sliderThumbProps?: SliderThumbProps;
-  sliderThumbTooltipProps?: Omit<TooltipProps, 'children'>;
+  sliderNumberInputProps?: NumberInputProps;
+  sliderNumberInputFieldProps?: NumberInputFieldProps;
+  sliderNumberInputStepperProps?: NumberInputStepperProps;
+  sliderTooltipProps?: Omit<TooltipProps, 'children'>;
+  sliderIAIIconButtonProps?: IAIIconButtonProps;
 };
 
-const IAISlider = (props: IAISliderProps) => {
+export default function IAISlider(props: IAIFullSliderProps) {
+  const [showTooltip, setShowTooltip] = useState(false);
   const {
     label,
+    value,
+    min = 1,
+    max = 100,
+    step = 1,
+    onChange,
+    tooltipSuffix = '',
+    withSliderMarks = false,
+    sliderMarkLeftOffset = 0,
+    sliderMarkRightOffset = -7,
+    withInput = false,
+    isInteger = false,
+    inputWidth = '5rem',
+    inputReadOnly = true,
+    withReset = false,
+    hideTooltip = false,
+    handleReset,
+    isResetDisabled,
+    isSliderDisabled,
+    isInputDisabled,
     styleClass,
-    formControlProps,
-    formLabelProps,
+    sliderFormControlProps,
+    sliderFormLabelProps,
+    sliderMarkProps,
     sliderTrackProps,
-    sliderInnerTrackProps,
     sliderThumbProps,
-    sliderThumbTooltipProps,
+    sliderNumberInputProps,
+    sliderNumberInputFieldProps,
+    sliderNumberInputStepperProps,
+    sliderTooltipProps,
+    sliderIAIIconButtonProps,
     ...rest
   } = props;
+
+  const [localInputValue, setLocalInputValue] = useState<string>(String(value));
+
+  const numberInputMax = useMemo(
+    () => (sliderNumberInputProps?.max ? sliderNumberInputProps.max : max),
+    [max, sliderNumberInputProps?.max]
+  );
+
+  useEffect(() => {
+    if (String(value) !== localInputValue && localInputValue !== '') {
+      setLocalInputValue(String(value));
+    }
+  }, [value, localInputValue, setLocalInputValue]);
+
+  const handleInputBlur = (e: FocusEvent<HTMLInputElement>) => {
+    const clamped = _.clamp(
+      isInteger ? Math.floor(Number(e.target.value)) : Number(e.target.value),
+      min,
+      numberInputMax
+    );
+    setLocalInputValue(String(clamped));
+    onChange(clamped);
+  };
+
+  const handleInputChange = (v: any) => {
+    setLocalInputValue(v);
+    onChange(Number(v));
+  };
+
+  const handleResetDisable = () => {
+    if (!handleReset) return;
+    handleReset();
+  };
+
   return (
     <FormControl
-      className={`invokeai__slider-form-control ${styleClass}`}
-      {...formControlProps}
+      className={
+        styleClass
+          ? `invokeai__slider-component ${styleClass}`
+          : `invokeai__slider-component`
+      }
+      data-markers={withSliderMarks}
+      {...sliderFormControlProps}
     >
-      <div className="invokeai__slider-inner-container">
-        <FormLabel
-          className={`invokeai__slider-form-label`}
-          whiteSpace="nowrap"
-          {...formLabelProps}
-        >
-          {label}
-        </FormLabel>
+      <FormLabel
+        className="invokeai__slider-component-label"
+        {...sliderFormLabelProps}
+      >
+        {label}
+      </FormLabel>
 
+      <HStack w={'100%'} gap={2}>
         <Slider
-          className={`invokeai__slider-root`}
           aria-label={label}
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          onChange={handleInputChange}
+          onMouseEnter={() => setShowTooltip(true)}
+          onMouseLeave={() => setShowTooltip(false)}
+          focusThumbOnChange={false}
+          isDisabled={isSliderDisabled}
           {...rest}
         >
-          <SliderTrack
-            className={`invokeai__slider-track`}
-            {...sliderTrackProps}
-          >
-            <SliderFilledTrack
-              className={`invokeai__slider-filled-track`}
-              {...sliderInnerTrackProps}
-            />
+          {withSliderMarks && (
+            <>
+              <SliderMark
+                value={min}
+                className="invokeai__slider-mark invokeai__slider-mark-start"
+                ml={sliderMarkLeftOffset}
+                {...sliderMarkProps}
+              >
+                {min}
+              </SliderMark>
+              <SliderMark
+                value={max}
+                className="invokeai__slider-mark invokeai__slider-mark-end"
+                ml={sliderMarkRightOffset}
+                {...sliderMarkProps}
+              >
+                {max}
+              </SliderMark>
+            </>
+          )}
+
+          <SliderTrack className="invokeai__slider_track" {...sliderTrackProps}>
+            <SliderFilledTrack className="invokeai__slider_track-filled" />
           </SliderTrack>
 
           <Tooltip
-            className={`invokeai__slider-thumb-tooltip`}
-            placement="top"
             hasArrow
-            {...sliderThumbTooltipProps}
+            className="invokeai__slider-component-tooltip"
+            placement="top"
+            isOpen={showTooltip}
+            label={`${value}${tooltipSuffix}`}
+            hidden={hideTooltip}
+            {...sliderTooltipProps}
           >
             <SliderThumb
-              className={`invokeai__slider-thumb`}
+              className="invokeai__slider-thumb"
               {...sliderThumbProps}
             />
           </Tooltip>
         </Slider>
-      </div>
+
+        {withInput && (
+          <NumberInput
+            min={min}
+            max={numberInputMax}
+            step={step}
+            value={localInputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            className="invokeai__slider-number-field"
+            isDisabled={isInputDisabled}
+            {...sliderNumberInputProps}
+          >
+            <NumberInputField
+              className="invokeai__slider-number-input"
+              width={inputWidth}
+              readOnly={inputReadOnly}
+              {...sliderNumberInputFieldProps}
+            />
+            <NumberInputStepper {...sliderNumberInputStepperProps}>
+              <NumberIncrementStepper className="invokeai__slider-number-stepper" />
+              <NumberDecrementStepper className="invokeai__slider-number-stepper" />
+            </NumberInputStepper>
+          </NumberInput>
+        )}
+
+        {withReset && (
+          <IAIIconButton
+            size={'sm'}
+            aria-label={'Reset'}
+            tooltip={'Reset'}
+            icon={<BiReset />}
+            onClick={handleResetDisable}
+            isDisabled={isResetDisabled}
+            {...sliderIAIIconButtonProps}
+          />
+        )}
+      </HStack>
     </FormControl>
   );
-};
-
-export default IAISlider;
+}

frontend/src/common/components/ImageUploader.scss

@@ -33,7 +33,6 @@
 }
 
 .image-uploader-button-outer {
-  min-width: 20rem;
   width: 100%;
   height: 100%;
   display: flex;
@@ -42,10 +41,10 @@
   cursor: pointer;
   border-radius: 0.5rem;
   color: var(--tab-list-text-inactive);
-  background-color: var(--btn-grey);
+  background-color: var(--background-color);
 
   &:hover {
-    background-color: var(--btn-grey-hover);
+    background-color: var(--background-color-light);
   }
 }
 
@@ -66,10 +65,10 @@
   text-align: center;
 
   svg {
-    width: 4rem !important;
-    height: 4rem !important;
+    width: 4rem;
+    height: 4rem;
   }
   h2 {
-    font-size: 1.2rem !important;
+    font-size: 1.2rem;
   }
 }

frontend/src/common/components/ImageUploader.tsx

@@ -1,13 +1,19 @@
-import { useCallback, ReactNode, useState, useEffect } from 'react';
-import { useAppDispatch, useAppSelector } from '../../app/store';
+import {
+  useCallback,
+  ReactNode,
+  useState,
+  useEffect,
+  KeyboardEvent,
+} from 'react';
+import { useAppDispatch, useAppSelector } from 'app/store';
 import { FileRejection, useDropzone } from 'react-dropzone';
 import { useToast } from '@chakra-ui/react';
-import { uploadImage } from '../../app/socketio/actions';
-import { ImageUploadDestination, UploadImagePayload } from '../../app/invokeai';
-import { ImageUploaderTriggerContext } from '../../app/contexts/ImageUploaderTriggerContext';
-import { activeTabNameSelector } from '../../features/options/optionsSelectors';
-import { tabDict } from '../../features/tabs/InvokeTabs';
+import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import { tabDict } from 'features/tabs/components/InvokeTabs';
 import ImageUploadOverlay from './ImageUploadOverlay';
+import { uploadImage } from 'features/gallery/store/thunks/uploadImage';
+import useImageUploader from 'common/hooks/useImageUploader';
 
 type ImageUploaderProps = {
   children: ReactNode;
@@ -19,6 +25,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
   const activeTabName = useAppSelector(activeTabNameSelector);
   const toast = useToast({});
   const [isHandlingUpload, setIsHandlingUpload] = useState<boolean>(false);
+  const { setOpenUploader } = useImageUploader();
 
   const fileRejectionCallback = useCallback(
     (rejection: FileRejection) => {
@@ -38,15 +45,10 @@ const ImageUploader = (props: ImageUploaderProps) => {
   );
 
   const fileAcceptedCallback = useCallback(
-    (file: File) => {
-      setIsHandlingUpload(true);
-      const payload: UploadImagePayload = { file };
-      if (['img2img', 'inpainting'].includes(activeTabName)) {
-        payload.destination = activeTabName as ImageUploadDestination;
-      }
-      dispatch(uploadImage(payload));
+    async (file: File) => {
+      dispatch(uploadImage({ imageFile: file }));
     },
-    [dispatch, activeTabName]
+    [dispatch]
   );
 
   const onDrop = useCallback(
@@ -77,6 +79,8 @@ const ImageUploader = (props: ImageUploaderProps) => {
     maxFiles: 1,
   });
 
+  setOpenUploader(open);
+
   useEffect(() => {
     const pasteImageListener = (e: ClipboardEvent) => {
       const dataTransferItemList = e.clipboardData?.items;
@@ -118,12 +122,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
         return;
       }
 
-      const payload: UploadImagePayload = { file };
-      if (['img2img', 'inpainting'].includes(activeTabName)) {
-        payload.destination = activeTabName as ImageUploadDestination;
-      }
-
-      dispatch(uploadImage(payload));
+      dispatch(uploadImage({ imageFile: file }));
     };
     document.addEventListener('paste', pasteImageListener);
     return () => {
@@ -131,13 +130,21 @@ const ImageUploader = (props: ImageUploaderProps) => {
     };
   }, [dispatch, toast, activeTabName]);
 
-  const overlaySecondaryText = ['img2img', 'inpainting'].includes(activeTabName)
+  const overlaySecondaryText = ['img2img', 'unifiedCanvas'].includes(
+    activeTabName
+  )
     ? ` to ${tabDict[activeTabName as keyof typeof tabDict].tooltip}`
     : ``;
 
   return (
     <ImageUploaderTriggerContext.Provider value={open}>
-      <div {...getRootProps({ style: {} })}>
+      <div
+        {...getRootProps({ style: {} })}
+        onKeyDown={(e: KeyboardEvent) => {
+          // Bail out if user hits spacebar - do not open the uploader
+          if (e.key === ' ') return;
+        }}
+      >
         <input {...getInputProps()} />
         {children}
         {isDragActive && isHandlingUpload && (

frontend/src/common/components/ImageUploaderButton.tsx

@@ -1,7 +1,7 @@
 import { Heading } from '@chakra-ui/react';
 import { useContext } from 'react';
 import { FaUpload } from 'react-icons/fa';
-import { ImageUploaderTriggerContext } from '../../app/contexts/ImageUploaderTriggerContext';
+import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
 
 type ImageUploaderButtonProps = {
   styleClass?: string;

frontend/src/common/components/ImageUploaderIconButton.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { FaUpload } from 'react-icons/fa';
-import { ImageUploaderTriggerContext } from '../../app/contexts/ImageUploaderTriggerContext';
+import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
 import IAIIconButton from './IAIIconButton';
 
 const ImageUploaderIconButton = () => {

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import Img2ImgPlaceHolder from '../../../assets/images/image2img.png';
-
-export const ImageToImageWIP = () => {
-  return (
-    <div className="work-in-progress txt2img-work-in-progress">
-      <img src={Img2ImgPlaceHolder} alt="img2img_placeholder" />
-      <h1>Image To Image</h1>
-      <p>
-        Image to Image is already available in the WebUI. You can access it from
-        the Text to Image - Advanced Options menu. A dedicated UI for Image To
-        Image will be released soon.
-      </p>
-    </div>
-  );
-};

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

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export default function InpaintingWIP() {
-  return (
-    <div className="work-in-progress inpainting-work-in-progress">
-      <h1>Inpainting</h1>
-      <p>
-        Inpainting is available as a part of the Invoke AI Command Line
-        Interface. A dedicated WebUI interface will be released in the near
-        future.
-      </p>
-    </div>
-  );
-}

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

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export default function OutpaintingWIP() {
-  return (
-    <div className="work-in-progress outpainting-work-in-progress">
-      <h1>Outpainting</h1>
-      <p>
-        Outpainting is available as a part of the Invoke AI Command Line
-        Interface. A dedicated WebUI interface will be released in the near
-        future.
-      </p>
-    </div>
-  );
-}

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

@@ -9,7 +9,7 @@ export const PostProcessingWIP = () => {
         Upscaling and Face Restoration are already available in the WebUI. You
         can access them from the Advanced Options menu of the Text To Image and
         Image To Image tabs. You can also process images directly, using the
-        image action buttons above the main image display.
+        image action buttons above the current image display or in the viewer.
       </p>
       <p>
         A dedicated UI will be released soon to facilitate more advanced post

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function TrainingWIP() {
+  return (
+    <div className="work-in-progress nodes-work-in-progress">
+      <h1>Training</h1>
+      <p>
+        A dedicated workflow for training your own embeddings and checkpoints
+        using Textual Inversion and Dreambooth from the web interface. <br />
+        <br />
+        InvokeAI already supports training custom embeddings using Textual
+        Inversion using the main script.
+      </p>
+    </div>
+  );
+}

frontend/src/common/hooks/useClickOutsideWatcher.ts

@@ -1,25 +1,37 @@
-import { RefObject, useEffect } from 'react';
+import { RefObject, useEffect, useRef } from 'react';
+import { Rect } from 'react-konva';
 
-const useClickOutsideWatcher = (
-  ref: RefObject<HTMLElement>,
-  callback: () => void,
-  req = true
-) => {
+const watchers: {
+  ref: RefObject<HTMLElement>;
+  enable: boolean;
+  callback: () => void;
+}[] = [];
+
+const useClickOutsideWatcher = () => {
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        callback();
-      }
-    }
-    if (req) {
-      document.addEventListener('mousedown', handleClickOutside);
+      watchers.forEach(({ ref, enable, callback }) => {
+        if (enable && ref.current && !ref.current.contains(e.target as Node)) {
+          console.log('callback');
+          callback();
+        }
+      });
     }
+    document.addEventListener('mousedown', handleClickOutside);
     return () => {
-      if (req) {
-        document.removeEventListener('mousedown', handleClickOutside);
-      }
+      document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [ref, req, callback]);
+  }, []);
+
+  return {
+    addWatcher: (watcher: {
+      ref: RefObject<HTMLElement>;
+      callback: () => void;
+      enable: boolean;
+    }) => {
+      watchers.push(watcher);
+    },
+  };
 };
 
 export default useClickOutsideWatcher;

frontend/src/common/hooks/useImageUploader.ts

@@ -0,0 +1,14 @@
+let openFunction: () => void;
+
+const useImageUploader = () => {
+  return {
+    setOpenUploader: (open?: () => void) => {
+      if (open) {
+        openFunction = open;
+      }
+    },
+    openUploader: openFunction,
+  };
+};
+
+export default useImageUploader;

frontend/src/common/icons/TrainingIcon.tsx

@@ -0,0 +1,16 @@
+import { createIcon } from '@chakra-ui/react';
+
+const TrainingIcon = createIcon({
+  displayName: 'TrainingIcon',
+  viewBox: '0 0 3544 3544',
+  path: (
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0,768.593L0,2774.71C0,2930.6 78.519,3068.3 198.135,3150.37C273.059,3202.68 364.177,3233.38 462.407,3233.38C462.407,3233.38 3080.9,3233.38 3080.9,3233.38C3179.13,3233.38 3270.25,3202.68 3345.17,3150.37C3464.79,3068.3 3543.31,2930.6 3543.31,2774.71L3543.31,768.593C3543.31,517.323 3339.31,313.324 3088.04,313.324L455.269,313.324C203.999,313.324 0,517.323 0,768.593ZM3427.88,775.73L3427.88,2770.97C3427.88,2962.47 3272.4,3117.95 3080.9,3117.95L462.407,3117.95C270.906,3117.95 115.431,2962.47 115.431,2770.97C115.431,2770.97 115.431,775.73 115.431,775.73C115.431,584.229 270.906,428.755 462.407,428.755C462.407,428.755 3080.9,428.755 3080.9,428.755C3272.4,428.755 3427.88,584.229 3427.88,775.73ZM796.24,1322.76L796.24,1250.45C796.24,1199.03 836.16,1157.27 885.331,1157.27C885.331,1157.27 946.847,1157.27 946.847,1157.27C996.017,1157.27 1035.94,1199.03 1035.94,1250.45L1035.94,1644.81L2507.37,1644.81L2507.37,1250.45C2507.37,1199.03 2547.29,1157.27 2596.46,1157.27C2596.46,1157.27 2657.98,1157.27 2657.98,1157.27C2707.15,1157.27 2747.07,1199.03 2747.07,1250.45L2747.07,1322.76C2756.66,1319.22 2767.02,1317.29 2777.83,1317.29C2777.83,1317.29 2839.34,1317.29 2839.34,1317.29C2888.51,1317.29 2928.43,1357.21 2928.43,1406.38L2928.43,1527.32C2933.51,1526.26 2938.77,1525.71 2944.16,1525.71L2995.3,1525.71C3036.18,1525.71 3069.37,1557.59 3069.37,1596.86C3069.37,1596.86 3069.37,1946.44 3069.37,1946.44C3069.37,1985.72 3036.18,2017.6 2995.3,2017.6C2995.3,2017.6 2944.16,2017.6 2944.16,2017.6C2938.77,2017.6 2933.51,2017.04 2928.43,2015.99L2928.43,2136.92C2928.43,2186.09 2888.51,2226.01 2839.34,2226.01L2777.83,2226.01C2767.02,2226.01 2756.66,2224.08 2747.07,2220.55L2747.07,2292.85C2747.07,2344.28 2707.15,2386.03 2657.98,2386.03C2657.98,2386.03 2596.46,2386.03 2596.46,2386.03C2547.29,2386.03 2507.37,2344.28 2507.37,2292.85L2507.37,1898.5L1035.94,1898.5L1035.94,2292.85C1035.94,2344.28 996.017,2386.03 946.847,2386.03C946.847,2386.03 885.331,2386.03 885.331,2386.03C836.16,2386.03 796.24,2344.28 796.24,2292.85L796.24,2220.55C786.651,2224.08 776.29,2226.01 765.482,2226.01L703.967,2226.01C654.796,2226.01 614.876,2186.09 614.876,2136.92L614.876,2015.99C609.801,2017.04 604.539,2017.6 599.144,2017.6C599.144,2017.6 548.003,2017.6 548.003,2017.6C507.125,2017.6 473.937,1985.72 473.937,1946.44C473.937,1946.44 473.937,1596.86 473.937,1596.86C473.937,1557.59 507.125,1525.71 548.003,1525.71L599.144,1525.71C604.539,1525.71 609.801,1526.26 614.876,1527.32L614.876,1406.38C614.876,1357.21 654.796,1317.29 703.967,1317.29C703.967,1317.29 765.482,1317.29 765.482,1317.29C776.29,1317.29 786.651,1319.22 796.24,1322.76ZM977.604,1250.45C977.604,1232.7 963.822,1218.29 946.847,1218.29L885.331,1218.29C868.355,1218.29 854.573,1232.7 854.573,1250.45L854.573,2292.85C854.573,2310.61 868.355,2325.02 885.331,2325.02L946.847,2325.02C963.822,2325.02 977.604,2310.61 977.604,2292.85L977.604,1250.45ZM2565.7,1250.45C2565.7,1232.7 2579.49,1218.29 2596.46,1218.29L2657.98,1218.29C2674.95,1218.29 2688.73,1232.7 2688.73,1250.45L2688.73,2292.85C2688.73,2310.61 2674.95,2325.02 2657.98,2325.02L2596.46,2325.02C2579.49,2325.02 2565.7,2310.61 2565.7,2292.85L2565.7,1250.45ZM673.209,1406.38L673.209,2136.92C673.209,2153.9 686.991,2167.68 703.967,2167.68L765.482,2167.68C782.458,2167.68 796.24,2153.9 796.24,2136.92L796.24,1406.38C796.24,1389.41 782.458,1375.63 765.482,1375.63L703.967,1375.63C686.991,1375.63 673.209,1389.41 673.209,1406.38ZM2870.1,1406.38L2870.1,2136.92C2870.1,2153.9 2856.32,2167.68 2839.34,2167.68L2777.83,2167.68C2760.85,2167.68 2747.07,2153.9 2747.07,2136.92L2747.07,1406.38C2747.07,1389.41 2760.85,1375.63 2777.83,1375.63L2839.34,1375.63C2856.32,1375.63 2870.1,1389.41 2870.1,1406.38ZM614.876,1577.5C610.535,1574.24 605.074,1572.3 599.144,1572.3L548.003,1572.3C533.89,1572.3 522.433,1583.3 522.433,1596.86L522.433,1946.44C522.433,1960 533.89,1971.01 548.003,1971.01L599.144,1971.01C605.074,1971.01 610.535,1969.07 614.876,1965.81L614.876,1577.5ZM2928.43,1965.81L2928.43,1577.5C2932.77,1574.24 2938.23,1572.3 2944.16,1572.3L2995.3,1572.3C3009.42,1572.3 3020.87,1583.3 3020.87,1596.86L3020.87,1946.44C3020.87,1960 3009.42,1971.01 2995.3,1971.01L2944.16,1971.01C2938.23,1971.01 2932.77,1969.07 2928.43,1965.81ZM2507.37,1703.14L1035.94,1703.14L1035.94,1840.16L2507.37,1840.16L2507.37,1898.38L2507.37,1659.46L2507.37,1703.14Z"
+    />
+  ),
+});
+
+export default TrainingIcon;

frontend/src/common/icons/design_files/Training.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 3544 3544" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M0,768.593L0,2774.71C0,2930.6 78.519,3068.3 198.135,3150.37C273.059,3202.68 364.177,3233.38 462.407,3233.38C462.407,3233.38 3080.9,3233.38 3080.9,3233.38C3179.13,3233.38 3270.25,3202.68 3345.17,3150.37C3464.79,3068.3 3543.31,2930.6 3543.31,2774.71L3543.31,768.593C3543.31,517.323 3339.31,313.324 3088.04,313.324L455.269,313.324C203.999,313.324 0,517.323 0,768.593ZM3427.88,775.73L3427.88,2770.97C3427.88,2962.47 3272.4,3117.95 3080.9,3117.95L462.407,3117.95C270.906,3117.95 115.431,2962.47 115.431,2770.97C115.431,2770.97 115.431,775.73 115.431,775.73C115.431,584.229 270.906,428.755 462.407,428.755C462.407,428.755 3080.9,428.755 3080.9,428.755C3272.4,428.755 3427.88,584.229 3427.88,775.73ZM796.24,1322.76L796.24,1250.45C796.24,1199.03 836.16,1157.27 885.331,1157.27C885.331,1157.27 946.847,1157.27 946.847,1157.27C996.017,1157.27 1035.94,1199.03 1035.94,1250.45L1035.94,1644.81L2507.37,1644.81L2507.37,1250.45C2507.37,1199.03 2547.29,1157.27 2596.46,1157.27C2596.46,1157.27 2657.98,1157.27 2657.98,1157.27C2707.15,1157.27 2747.07,1199.03 2747.07,1250.45L2747.07,1322.76C2756.66,1319.22 2767.02,1317.29 2777.83,1317.29C2777.83,1317.29 2839.34,1317.29 2839.34,1317.29C2888.51,1317.29 2928.43,1357.21 2928.43,1406.38L2928.43,1527.32C2933.51,1526.26 2938.77,1525.71 2944.16,1525.71L2995.3,1525.71C3036.18,1525.71 3069.37,1557.59 3069.37,1596.86C3069.37,1596.86 3069.37,1946.44 3069.37,1946.44C3069.37,1985.72 3036.18,2017.6 2995.3,2017.6C2995.3,2017.6 2944.16,2017.6 2944.16,2017.6C2938.77,2017.6 2933.51,2017.04 2928.43,2015.99L2928.43,2136.92C2928.43,2186.09 2888.51,2226.01 2839.34,2226.01L2777.83,2226.01C2767.02,2226.01 2756.66,2224.08 2747.07,2220.55L2747.07,2292.85C2747.07,2344.28 2707.15,2386.03 2657.98,2386.03C2657.98,2386.03 2596.46,2386.03 2596.46,2386.03C2547.29,2386.03 2507.37,2344.28 2507.37,2292.85L2507.37,1898.5L1035.94,1898.5L1035.94,2292.85C1035.94,2344.28 996.017,2386.03 946.847,2386.03C946.847,2386.03 885.331,2386.03 885.331,2386.03C836.16,2386.03 796.24,2344.28 796.24,2292.85L796.24,2220.55C786.651,2224.08 776.29,2226.01 765.482,2226.01L703.967,2226.01C654.796,2226.01 614.876,2186.09 614.876,2136.92L614.876,2015.99C609.801,2017.04 604.539,2017.6 599.144,2017.6C599.144,2017.6 548.003,2017.6 548.003,2017.6C507.125,2017.6 473.937,1985.72 473.937,1946.44C473.937,1946.44 473.937,1596.86 473.937,1596.86C473.937,1557.59 507.125,1525.71 548.003,1525.71L599.144,1525.71C604.539,1525.71 609.801,1526.26 614.876,1527.32L614.876,1406.38C614.876,1357.21 654.796,1317.29 703.967,1317.29C703.967,1317.29 765.482,1317.29 765.482,1317.29C776.29,1317.29 786.651,1319.22 796.24,1322.76ZM977.604,1250.45C977.604,1232.7 963.822,1218.29 946.847,1218.29L885.331,1218.29C868.355,1218.29 854.573,1232.7 854.573,1250.45L854.573,2292.85C854.573,2310.61 868.355,2325.02 885.331,2325.02L946.847,2325.02C963.822,2325.02 977.604,2310.61 977.604,2292.85L977.604,1250.45ZM2565.7,1250.45C2565.7,1232.7 2579.49,1218.29 2596.46,1218.29L2657.98,1218.29C2674.95,1218.29 2688.73,1232.7 2688.73,1250.45L2688.73,2292.85C2688.73,2310.61 2674.95,2325.02 2657.98,2325.02L2596.46,2325.02C2579.49,2325.02 2565.7,2310.61 2565.7,2292.85L2565.7,1250.45ZM673.209,1406.38L673.209,2136.92C673.209,2153.9 686.991,2167.68 703.967,2167.68L765.482,2167.68C782.458,2167.68 796.24,2153.9 796.24,2136.92L796.24,1406.38C796.24,1389.41 782.458,1375.63 765.482,1375.63L703.967,1375.63C686.991,1375.63 673.209,1389.41 673.209,1406.38ZM2870.1,1406.38L2870.1,2136.92C2870.1,2153.9 2856.32,2167.68 2839.34,2167.68L2777.83,2167.68C2760.85,2167.68 2747.07,2153.9 2747.07,2136.92L2747.07,1406.38C2747.07,1389.41 2760.85,1375.63 2777.83,1375.63L2839.34,1375.63C2856.32,1375.63 2870.1,1389.41 2870.1,1406.38ZM614.876,1577.5C610.535,1574.24 605.074,1572.3 599.144,1572.3L548.003,1572.3C533.89,1572.3 522.433,1583.3 522.433,1596.86L522.433,1946.44C522.433,1960 533.89,1971.01 548.003,1971.01L599.144,1971.01C605.074,1971.01 610.535,1969.07 614.876,1965.81L614.876,1577.5ZM2928.43,1965.81L2928.43,1577.5C2932.77,1574.24 2938.23,1572.3 2944.16,1572.3L2995.3,1572.3C3009.42,1572.3 3020.87,1583.3 3020.87,1596.86L3020.87,1946.44C3020.87,1960 3009.42,1971.01 2995.3,1971.01L2944.16,1971.01C2938.23,1971.01 2932.77,1969.07 2928.43,1965.81ZM2507.37,1703.14L1035.94,1703.14L1035.94,1840.16L2507.37,1840.16L2507.37,1898.38L2507.37,1659.46L2507.37,1703.14Z"/>
+</svg>

frontend/src/common/util/openBase64ImageInTab.ts

@@ -0,0 +1,21 @@
+type Base64AndCaption = {
+  base64: string;
+  caption: string;
+};
+
+const openBase64ImageInTab = (images: Base64AndCaption[]) => {
+  const w = window.open('');
+  if (!w) return;
+
+  images.forEach((i) => {
+    const image = new Image();
+    image.src = i.base64;
+
+    w.document.write(i.caption);
+    w.document.write('</br>');
+    w.document.write(image.outerHTML);
+    w.document.write('</br></br>');
+  });
+};
+
+export default openBase64ImageInTab;

frontend/src/common/util/parameterTranslation.ts

@@ -1,20 +1,24 @@
-import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from '../../app/constants';
-import { OptionsState } from '../../features/options/optionsSlice';
-import { SystemState } from '../../features/system/systemSlice';
+import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
+import { OptionsState } from 'features/options/store/optionsSlice';
+import { SystemState } from 'features/system/store/systemSlice';
 
 import { stringToSeedWeightsArray } from './seedWeightPairs';
 import randomInt from './randomInt';
-import { InvokeTabName } from '../../features/tabs/InvokeTabs';
-import { InpaintingState } from '../../features/tabs/Inpainting/inpaintingSlice';
-import generateMask from '../../features/tabs/Inpainting/util/generateMask';
+import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
+import {
+  CanvasState,
+  isCanvasMaskLine,
+} from 'features/canvas/store/canvasTypes';
+import generateMask from 'features/canvas/util/generateMask';
+import openBase64ImageInTab from './openBase64ImageInTab';
+import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 
 export type FrontendToBackendParametersConfig = {
   generationMode: InvokeTabName;
   optionsState: OptionsState;
-  inpaintingState: InpaintingState;
+  canvasState: CanvasState;
   systemState: SystemState;
   imageToProcessUrl?: string;
-  maskImageElement?: HTMLImageElement;
 };
 
 /**
@@ -24,51 +28,60 @@ export type FrontendToBackendParametersConfig = {
 export const frontendToBackendParameters = (
   config: FrontendToBackendParametersConfig
 ): { [key: string]: any } => {
+  const canvasBaseLayer = getCanvasBaseLayer();
+
   const {
     generationMode,
     optionsState,
-    inpaintingState,
+    canvasState,
     systemState,
     imageToProcessUrl,
-    maskImageElement,
   } = config;
 
   const {
-    prompt,
-    iterations,
-    steps,
     cfgScale,
-    threshold,
-    perlin,
+    codeformerFidelity,
+    facetoolStrength,
+    facetoolType,
     height,
-    width,
-    sampler,
-    seed,
-    seamless,
     hiresFix,
     img2imgStrength,
+    infillMethod,
     initialImage,
+    iterations,
+    perlin,
+    prompt,
+    sampler,
+    seamBlur,
+    seamless,
+    seamSize,
+    seamSteps,
+    seamStrength,
+    seed,
+    seedWeights,
     shouldFitToWidthHeight,
     shouldGenerateVariations,
-    variationAmount,
-    seedWeights,
+    shouldRandomizeSeed,
     shouldRunESRGAN,
+    shouldRunFacetool,
+    steps,
+    threshold,
+    tileSize,
     upscalingLevel,
     upscalingStrength,
-    shouldRunFacetool,
-    facetoolStrength,
-    codeformerFidelity,
-    facetoolType,
-    shouldRandomizeSeed,
+    variationAmount,
+    width,
   } = optionsState;
 
-  const { shouldDisplayInProgressType, saveIntermediatesInterval } =
-    systemState;
+  const {
+    shouldDisplayInProgressType,
+    saveIntermediatesInterval,
+    enableImageDebugging,
+  } = systemState;
 
   const generationParameters: { [k: string]: any } = {
     prompt,
-    iterations:
-      shouldRandomizeSeed || shouldGenerateVariations ? iterations : 1,
+    iterations,
     steps,
     cfg_scale: cfgScale,
     threshold,
@@ -80,8 +93,13 @@ export const frontendToBackendParameters = (
     progress_images: shouldDisplayInProgressType === 'full-res',
     progress_latents: shouldDisplayInProgressType === 'latents',
     save_intermediates: saveIntermediatesInterval,
+    generation_mode: generationMode,
+    init_mask: '',
   };
 
+  let esrganParameters: false | { [k: string]: any } = false;
+  let facetoolParameters: false | { [k: string]: any } = false;
+
   generationParameters.seed = shouldRandomizeSeed
     ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)
     : seed;
@@ -90,6 +108,23 @@ export const frontendToBackendParameters = (
   if (['txt2img', 'img2img'].includes(generationMode)) {
     generationParameters.seamless = seamless;
     generationParameters.hires_fix = hiresFix;
+
+    if (shouldRunESRGAN) {
+      esrganParameters = {
+        level: upscalingLevel,
+        strength: upscalingStrength,
+      };
+    }
+
+    if (shouldRunFacetool) {
+      facetoolParameters = {
+        type: facetoolType,
+        strength: facetoolStrength,
+      };
+      if (facetoolType === 'codeformer') {
+        facetoolParameters.codeformer_fidelity = codeformerFidelity;
+      }
+    }
   }
 
   // img2img exclusive parameters
@@ -101,35 +136,38 @@ export const frontendToBackendParameters = (
   }
 
   // inpainting exclusive parameters
-  if (generationMode === 'inpainting' && maskImageElement) {
+  if (generationMode === 'unifiedCanvas' && canvasBaseLayer) {
     const {
-      lines,
-      boundingBoxCoordinate,
+      layerState: { objects },
+      boundingBoxCoordinates,
       boundingBoxDimensions,
       inpaintReplace,
       shouldUseInpaintReplace,
-    } = inpaintingState;
+      stageScale,
+      isMaskEnabled,
+      shouldPreserveMaskedArea,
+      boundingBoxScaleMethod: boundingBoxScale,
+      scaledBoundingBoxDimensions,
+    } = canvasState;
 
     const boundingBox = {
-      ...boundingBoxCoordinate,
+      ...boundingBoxCoordinates,
       ...boundingBoxDimensions,
     };
 
-    generationParameters.init_img = imageToProcessUrl;
-    generationParameters.strength = img2imgStrength;
-    generationParameters.fit = false;
-
-    const { maskDataURL, isMaskEmpty } = generateMask(
-      maskImageElement,
-      lines,
+    const maskDataURL = generateMask(
+      isMaskEnabled ? objects.filter(isCanvasMaskLine) : [],
       boundingBox
     );
 
-    generationParameters.is_mask_empty = isMaskEmpty;
+    generationParameters.init_mask = maskDataURL;
 
-    generationParameters.init_mask = maskDataURL.split(
-      'data:image/png;base64,'
-    )[1];
+    generationParameters.fit = false;
+
+    generationParameters.init_img = imageToProcessUrl;
+    generationParameters.strength = img2imgStrength;
+
+    generationParameters.invert_mask = shouldPreserveMaskedArea;
 
     if (shouldUseInpaintReplace) {
       generationParameters.inpaint_replace = inpaintReplace;
@@ -137,8 +175,47 @@ export const frontendToBackendParameters = (
 
     generationParameters.bounding_box = boundingBox;
 
-    // TODO: The server metadata generation needs to be changed to fix this.
+    const tempScale = canvasBaseLayer.scale();
+
+    canvasBaseLayer.scale({
+      x: 1 / stageScale,
+      y: 1 / stageScale,
+    });
+
+    const absPos = canvasBaseLayer.getAbsolutePosition();
+
+    const imageDataURL = canvasBaseLayer.toDataURL({
+      x: boundingBox.x + absPos.x,
+      y: boundingBox.y + absPos.y,
+      width: boundingBox.width,
+      height: boundingBox.height,
+    });
+
+    if (enableImageDebugging) {
+      openBase64ImageInTab([
+        { base64: maskDataURL, caption: 'mask sent as init_mask' },
+        { base64: imageDataURL, caption: 'image sent as init_img' },
+      ]);
+    }
+
+    canvasBaseLayer.scale(tempScale);
+
+    generationParameters.init_img = imageDataURL;
+
     generationParameters.progress_images = false;
+
+    if (boundingBoxScale !== 'none') {
+      generationParameters.inpaint_width = scaledBoundingBoxDimensions.width;
+      generationParameters.inpaint_height = scaledBoundingBoxDimensions.height;
+    }
+
+    generationParameters.seam_size = seamSize;
+    generationParameters.seam_blur = seamBlur;
+    generationParameters.seam_strength = seamStrength;
+    generationParameters.seam_steps = seamSteps;
+    generationParameters.tile_size = tileSize;
+    generationParameters.infill_method = infillMethod;
+    generationParameters.force_outpaint = false;
   }
 
   if (shouldGenerateVariations) {
@@ -151,24 +228,8 @@ export const frontendToBackendParameters = (
     generationParameters.variation_amount = 0;
   }
 
-  let esrganParameters: false | { [k: string]: any } = false;
-  let facetoolParameters: false | { [k: string]: any } = false;
-
-  if (shouldRunESRGAN) {
-    esrganParameters = {
-      level: upscalingLevel,
-      strength: upscalingStrength,
-    };
-  }
-
-  if (shouldRunFacetool) {
-    facetoolParameters = {
-      type: facetoolType,
-      strength: facetoolStrength,
-    };
-    if (facetoolType === 'codeformer') {
-      facetoolParameters.codeformer_fidelity = codeformerFidelity;
-    }
+  if (enableImageDebugging) {
+    generationParameters.enable_image_debugging = enableImageDebugging;
   }
 
   return {

frontend/src/common/util/promptToString.ts

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

frontend/src/common/util/seedWeightPairs.ts

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

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

@@ -0,0 +1,32 @@
+import { useAppDispatch, useAppSelector } from 'app/store';
+import IAIAlertDialog from 'common/components/IAIAlertDialog';
+import IAIButton from 'common/components/IAIButton';
+import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
+import { FaTrash } from 'react-icons/fa';
+import { isStagingSelector } from '../store/canvasSelectors';
+
+const ClearCanvasHistoryButtonModal = () => {
+  const isStaging = useAppSelector(isStagingSelector);
+  const dispatch = useAppDispatch();
+
+  return (
+    <IAIAlertDialog
+      title={'Clear Canvas History'}
+      acceptCallback={() => dispatch(clearCanvasHistory())}
+      acceptButtonText={'Clear History'}
+      triggerComponent={
+        <IAIButton size={'sm'} leftIcon={<FaTrash />} isDisabled={isStaging}>
+          Clear Canvas History
+        </IAIButton>
+      }
+    >
+      <p>
+        Clearing the canvas history leaves your current canvas intact, but
+        irreversibly clears the undo and redo history.
+      </p>
+      <br />
+      <p>Are you sure you want to clear the canvas history?</p>
+    </IAIAlertDialog>
+  );
+};
+export default ClearCanvasHistoryButtonModal;

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

@@ -0,0 +1,207 @@
+import { useCallback, useRef } from 'react';
+import Konva from 'konva';
+import { Layer, Stage } from 'react-konva';
+import { useAppSelector } from 'app/store';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
+import IAICanvasMaskLines from './IAICanvasMaskLines';
+import IAICanvasToolPreview from './IAICanvasToolPreview';
+import { Vector2d } from 'konva/lib/types';
+import IAICanvasBoundingBox from './IAICanvasToolbar/IAICanvasBoundingBox';
+import useCanvasHotkeys from '../hooks/useCanvasHotkeys';
+import _ from 'lodash';
+import { createSelector } from '@reduxjs/toolkit';
+import IAICanvasMaskCompositer from './IAICanvasMaskCompositer';
+import useCanvasWheel from '../hooks/useCanvasZoom';
+import useCanvasMouseDown from '../hooks/useCanvasMouseDown';
+import useCanvasMouseUp from '../hooks/useCanvasMouseUp';
+import useCanvasMouseMove from '../hooks/useCanvasMouseMove';
+import useCanvasMouseOut from '../hooks/useCanvasMouseOut';
+import useCanvasDragMove from '../hooks/useCanvasDragMove';
+import IAICanvasObjectRenderer from './IAICanvasObjectRenderer';
+import IAICanvasGrid from './IAICanvasGrid';
+import IAICanvasIntermediateImage from './IAICanvasIntermediateImage';
+import IAICanvasStatusText from './IAICanvasStatusText';
+import IAICanvasStagingArea from './IAICanvasStagingArea';
+import IAICanvasStagingAreaToolbar from './IAICanvasStagingAreaToolbar';
+import {
+  setCanvasBaseLayer,
+  setCanvasStage,
+} from '../util/konvaInstanceProvider';
+import { KonvaEventObject } from 'konva/lib/Node';
+import IAICanvasBoundingBoxOverlay from './IAICanvasBoundingBoxOverlay';
+
+const selector = createSelector(
+  [canvasSelector, isStagingSelector],
+  (canvas, isStaging) => {
+    const {
+      isMaskEnabled,
+      stageScale,
+      shouldShowBoundingBox,
+      isTransformingBoundingBox,
+      isMouseOverBoundingBox,
+      isMovingBoundingBox,
+      stageDimensions,
+      stageCoordinates,
+      tool,
+      isMovingStage,
+      shouldShowIntermediates,
+      shouldShowGrid,
+      shouldRestrictStrokesToBox,
+    } = canvas;
+
+    let stageCursor: string | undefined = 'none';
+
+    if (tool === 'move' || isStaging) {
+      if (isMovingStage) {
+        stageCursor = 'grabbing';
+      } else {
+        stageCursor = 'grab';
+      }
+    } else if (isTransformingBoundingBox) {
+      stageCursor = undefined;
+    } else if (shouldRestrictStrokesToBox && !isMouseOverBoundingBox) {
+      stageCursor = 'default';
+    }
+
+    return {
+      isMaskEnabled,
+      isModifyingBoundingBox: isTransformingBoundingBox || isMovingBoundingBox,
+      shouldShowBoundingBox,
+      shouldShowGrid,
+      stageCoordinates,
+      stageCursor,
+      stageDimensions,
+      stageScale,
+      tool,
+      isStaging,
+      shouldShowIntermediates,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+const IAICanvas = () => {
+  const {
+    isMaskEnabled,
+    isModifyingBoundingBox,
+    shouldShowBoundingBox,
+    shouldShowGrid,
+    stageCoordinates,
+    stageCursor,
+    stageDimensions,
+    stageScale,
+    tool,
+    isStaging,
+    shouldShowIntermediates,
+  } = useAppSelector(selector);
+  useCanvasHotkeys();
+
+  const stageRef = useRef<Konva.Stage | null>(null);
+  const canvasBaseLayerRef = useRef<Konva.Layer | null>(null);
+
+  const canvasStageRefCallback = useCallback((el: Konva.Stage) => {
+    setCanvasStage(el as Konva.Stage);
+    stageRef.current = el;
+  }, []);
+
+  const canvasBaseLayerRefCallback = useCallback((el: Konva.Layer) => {
+    setCanvasBaseLayer(el as Konva.Layer);
+    canvasBaseLayerRef.current = el;
+  }, []);
+
+  const lastCursorPositionRef = useRef<Vector2d>({ x: 0, y: 0 });
+
+  // Use refs for values that do not affect rendering, other values in redux
+  const didMouseMoveRef = useRef<boolean>(false);
+
+  const handleWheel = useCanvasWheel(stageRef);
+  const handleMouseDown = useCanvasMouseDown(stageRef);
+  const handleMouseUp = useCanvasMouseUp(stageRef, didMouseMoveRef);
+  const handleMouseMove = useCanvasMouseMove(
+    stageRef,
+    didMouseMoveRef,
+    lastCursorPositionRef
+  );
+  const handleMouseOut = useCanvasMouseOut();
+  const { handleDragStart, handleDragMove, handleDragEnd } =
+    useCanvasDragMove();
+
+  return (
+    <div className="inpainting-canvas-container">
+      <div className="inpainting-canvas-wrapper">
+        <Stage
+          tabIndex={-1}
+          ref={canvasStageRefCallback}
+          className={'inpainting-canvas-stage'}
+          style={{
+            ...(stageCursor ? { cursor: stageCursor } : {}),
+          }}
+          x={stageCoordinates.x}
+          y={stageCoordinates.y}
+          width={stageDimensions.width}
+          height={stageDimensions.height}
+          scale={{ x: stageScale, y: stageScale }}
+          onTouchStart={handleMouseDown}
+          onTouchMove={handleMouseMove}
+          onTouchEnd={handleMouseUp}
+          onMouseDown={handleMouseDown}
+          onMouseLeave={handleMouseOut}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onDragStart={handleDragStart}
+          onDragMove={handleDragMove}
+          onDragEnd={handleDragEnd}
+          onContextMenu={(e: KonvaEventObject<MouseEvent>) =>
+            e.evt.preventDefault()
+          }
+          onWheel={handleWheel}
+          draggable={(tool === 'move' || isStaging) && !isModifyingBoundingBox}
+        >
+          <Layer id={'grid'} visible={shouldShowGrid}>
+            <IAICanvasGrid />
+          </Layer>
+
+          <Layer
+            id={'base'}
+            ref={canvasBaseLayerRefCallback}
+            listening={false}
+            imageSmoothingEnabled={false}
+          >
+            <IAICanvasObjectRenderer />
+          </Layer>
+          <Layer id={'mask'} visible={isMaskEnabled} listening={false}>
+            <IAICanvasMaskLines visible={true} listening={false} />
+            <IAICanvasMaskCompositer listening={false} />
+          </Layer>
+          <Layer>
+            <IAICanvasBoundingBoxOverlay />
+          </Layer>
+          <Layer id="preview" imageSmoothingEnabled={false}>
+            {!isStaging && (
+              <IAICanvasToolPreview
+                visible={tool !== 'move'}
+                listening={false}
+              />
+            )}
+            <IAICanvasStagingArea visible={isStaging} />
+            {shouldShowIntermediates && <IAICanvasIntermediateImage />}
+            <IAICanvasBoundingBox
+              visible={shouldShowBoundingBox && !isStaging}
+            />
+          </Layer>
+        </Stage>
+        <IAICanvasStatusText />
+        <IAICanvasStagingAreaToolbar />
+      </div>
+    </div>
+  );
+};
+
+export default IAICanvas;

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

@@ -0,0 +1,69 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store';
+import _ from 'lodash';
+import { Group, Rect } from 'react-konva';
+import { canvasSelector } from '../store/canvasSelectors';
+
+const selector = createSelector(
+  canvasSelector,
+  (canvas) => {
+    const {
+      boundingBoxCoordinates,
+      boundingBoxDimensions,
+      stageDimensions,
+      stageScale,
+      shouldDarkenOutsideBoundingBox,
+      stageCoordinates,
+    } = canvas;
+
+    return {
+      boundingBoxCoordinates,
+      boundingBoxDimensions,
+      shouldDarkenOutsideBoundingBox,
+      stageCoordinates,
+      stageDimensions,
+      stageScale,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+const IAICanvasBoundingBoxOverlay = () => {
+  const {
+    boundingBoxCoordinates,
+    boundingBoxDimensions,
+    shouldDarkenOutsideBoundingBox,
+    stageCoordinates,
+    stageDimensions,
+    stageScale,
+  } = useAppSelector(selector);
+
+  return (
+    <Group>
+      <Rect
+        offsetX={stageCoordinates.x / stageScale}
+        offsetY={stageCoordinates.y / stageScale}
+        height={stageDimensions.height / stageScale}
+        width={stageDimensions.width / stageScale}
+        fill={'rgba(0,0,0,0.4)'}
+        listening={false}
+        visible={shouldDarkenOutsideBoundingBox}
+      />
+      <Rect
+        x={boundingBoxCoordinates.x}
+        y={boundingBoxCoordinates.y}
+        width={boundingBoxDimensions.width}
+        height={boundingBoxDimensions.height}
+        fill={'rgb(255,255,255)'}
+        listening={false}
+        visible={shouldDarkenOutsideBoundingBox}
+        globalCompositeOperation={'destination-out'}
+      />
+    </Group>
+  );
+};
+
+export default IAICanvasBoundingBoxOverlay;

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

@@ -0,0 +1,115 @@
+// Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
+
+import { useColorMode } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store';
+import _ from 'lodash';
+import { ReactNode, useCallback, useLayoutEffect, useState } from 'react';
+import { Group, Line as KonvaLine } from 'react-konva';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+
+const selector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    const { stageScale, stageCoordinates, stageDimensions } = canvas;
+    return { stageScale, stageCoordinates, stageDimensions };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+const gridLinesColor = {
+  dark: 'rgba(255, 255, 255, 0.2)',
+  green: 'rgba(255, 255, 255, 0.2)',
+  light: 'rgba(0, 0, 0, 0.2)',
+};
+
+const IAICanvasGrid = () => {
+  const { colorMode } = useColorMode();
+  const { stageScale, stageCoordinates, stageDimensions } =
+    useAppSelector(selector);
+  const [gridLines, setGridLines] = useState<ReactNode[]>([]);
+
+  const unscale = useCallback(
+    (value: number) => {
+      return value / stageScale;
+    },
+    [stageScale]
+  );
+
+  useLayoutEffect(() => {
+    const gridLineColor = gridLinesColor[colorMode];
+
+    const { width, height } = stageDimensions;
+    const { x, y } = stageCoordinates;
+
+    const stageRect = {
+      x1: 0,
+      y1: 0,
+      x2: width,
+      y2: height,
+      offset: {
+        x: unscale(x),
+        y: unscale(y),
+      },
+    };
+
+    const gridOffset = {
+      x: Math.ceil(unscale(x) / 64) * 64,
+      y: Math.ceil(unscale(y) / 64) * 64,
+    };
+
+    const gridRect = {
+      x1: -gridOffset.x,
+      y1: -gridOffset.y,
+      x2: unscale(width) - gridOffset.x + 64,
+      y2: unscale(height) - gridOffset.y + 64,
+    };
+
+    const gridFullRect = {
+      x1: Math.min(stageRect.x1, gridRect.x1),
+      y1: Math.min(stageRect.y1, gridRect.y1),
+      x2: Math.max(stageRect.x2, gridRect.x2),
+      y2: Math.max(stageRect.y2, gridRect.y2),
+    };
+
+    const fullRect = gridFullRect;
+
+    const // find the x & y size of the grid
+      xSize = fullRect.x2 - fullRect.x1,
+      ySize = fullRect.y2 - fullRect.y1,
+      // compute the number of steps required on each axis.
+      xSteps = Math.round(xSize / 64) + 1,
+      ySteps = Math.round(ySize / 64) + 1;
+
+    const xLines = _.range(0, xSteps).map((i) => (
+      <KonvaLine
+        key={`x_${i}`}
+        x={fullRect.x1 + i * 64}
+        y={fullRect.y1}
+        points={[0, 0, 0, ySize]}
+        stroke={gridLineColor}
+        strokeWidth={1}
+      />
+    ));
+    const yLines = _.range(0, ySteps).map((i) => (
+      <KonvaLine
+        key={`y_${i}`}
+        x={fullRect.x1}
+        y={fullRect.y1 + i * 64}
+        points={[0, 0, xSize, 0]}
+        stroke={gridLineColor}
+        strokeWidth={1}
+      />
+    ));
+
+    setGridLines(xLines.concat(yLines));
+  }, [stageScale, stageCoordinates, stageDimensions, colorMode, unscale]);
+
+  return <Group>{gridLines}</Group>;
+};
+
+export default IAICanvasGrid;

frontend/src/features/canvas/components/IAICanvasImage.tsx

@@ -0,0 +1,15 @@
+import { Image } from 'react-konva';
+import useImage from 'use-image';
+
+type IAICanvasImageProps = {
+  url: string;
+  x: number;
+  y: number;
+};
+const IAICanvasImage = (props: IAICanvasImageProps) => {
+  const { url, x, y } = props;
+  const [image] = useImage(url);
+  return <Image x={x} y={y} image={image} listening={false} />;
+};
+
+export default IAICanvasImage;

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

@@ -0,0 +1,59 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState, useAppSelector } from 'app/store';
+import { GalleryState } from 'features/gallery/store/gallerySlice';
+import { ImageConfig } from 'konva/lib/shapes/Image';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { Image as KonvaImage } from 'react-konva';
+
+const selector = createSelector(
+  [(state: RootState) => state.gallery],
+  (gallery: GalleryState) => {
+    return gallery.intermediateImage ? gallery.intermediateImage : null;
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+type Props = Omit<ImageConfig, 'image'>;
+
+const IAICanvasIntermediateImage = (props: Props) => {
+  const { ...rest } = props;
+  const intermediateImage = useAppSelector(selector);
+
+  const [loadedImageElement, setLoadedImageElement] =
+    useState<HTMLImageElement | null>(null);
+
+  useEffect(() => {
+    if (!intermediateImage) return;
+    const tempImage = new Image();
+
+    tempImage.onload = () => {
+      setLoadedImageElement(tempImage);
+    };
+    tempImage.src = intermediateImage.url;
+  }, [intermediateImage]);
+
+  if (!intermediateImage?.boundingBox) return null;
+
+  const {
+    boundingBox: { x, y, width, height },
+  } = intermediateImage;
+  
+  return loadedImageElement ? (
+    <KonvaImage
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      image={loadedImageElement}
+      listening={false}
+      {...rest}
+    />
+  ) : null;
+};
+
+export default IAICanvasIntermediateImage;

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

@@ -0,0 +1,175 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store';
+import { RectConfig } from 'konva/lib/shapes/Rect';
+import { Rect } from 'react-konva';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+
+import { rgbaColorToString } from 'features/canvas/util/colorToString';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Konva from 'konva';
+import { isNumber } from 'lodash';
+
+export const canvasMaskCompositerSelector = createSelector(
+  canvasSelector,
+  (canvas) => {
+    const { maskColor, stageCoordinates, stageDimensions, stageScale } = canvas;
+
+    return {
+      stageCoordinates,
+      stageDimensions,
+      stageScale,
+      maskColorString: rgbaColorToString(maskColor),
+    };
+  }
+);
+
+type IAICanvasMaskCompositerProps = RectConfig;
+
+const getColoredSVG = (color: string) => {
+  return `data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+  <svg width="60px" height="60px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+  <g transform="matrix(0.5,0,0,0.5,0,0)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,2.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,7.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,10)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,12.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,15)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,17.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,20)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,22.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,25)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,27.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,30)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-2.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-7.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-10)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-12.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-15)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-17.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-20)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-22.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-25)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-27.5)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+  <g transform="matrix(0.5,0,0,0.5,0,-30)">
+      <path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
+  </g>
+</svg>`.replaceAll('black', color);
+};
+
+const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
+  const { ...rest } = props;
+
+  const { maskColorString, stageCoordinates, stageDimensions, stageScale } =
+    useAppSelector(canvasMaskCompositerSelector);
+
+  const [fillPatternImage, setFillPatternImage] =
+    useState<HTMLImageElement | null>(null);
+
+  const [offset, setOffset] = useState<number>(0);
+
+  const rectRef = useRef<Konva.Rect>(null);
+  const incrementOffset = useCallback(() => {
+    setOffset(offset + 1);
+    setTimeout(incrementOffset, 500);
+  }, [offset]);
+
+  useEffect(() => {
+    if (fillPatternImage) return;
+    const image = new Image();
+
+    image.onload = () => {
+      setFillPatternImage(image);
+    };
+    image.src = getColoredSVG(maskColorString);
+  }, [fillPatternImage, maskColorString]);
+
+  useEffect(() => {
+    if (!fillPatternImage) return;
+    fillPatternImage.src = getColoredSVG(maskColorString);
+  }, [fillPatternImage, maskColorString]);
+
+  useEffect(() => {
+    const timer = setInterval(() => setOffset((i) => (i + 1) % 5), 50);
+    return () => clearInterval(timer);
+  }, []);
+
+  if (
+    !fillPatternImage ||
+    !isNumber(stageCoordinates.x) ||
+    !isNumber(stageCoordinates.y) ||
+    !isNumber(stageScale) ||
+    !isNumber(stageDimensions.width) ||
+    !isNumber(stageDimensions.height)
+  )
+    return null;
+
+  return (
+    <Rect
+      ref={rectRef}
+      offsetX={stageCoordinates.x / stageScale}
+      offsetY={stageCoordinates.y / stageScale}
+      height={stageDimensions.height / stageScale}
+      width={stageDimensions.width / stageScale}
+      fillPatternImage={fillPatternImage}
+      fillPatternOffsetY={!isNumber(offset) ? 0 : offset}
+      fillPatternRepeat={'repeat'}
+      fillPatternScale={{ x: 1 / stageScale, y: 1 / stageScale }}
+      listening={true}
+      globalCompositeOperation={'source-in'}
+      {...rest}
+    />
+  );
+};
+
+export default IAICanvasMaskCompositer;

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

@@ -0,0 +1,54 @@
+import { GroupConfig } from 'konva/lib/Group';
+import { Group, Line } from 'react-konva';
+import { useAppSelector } from 'app/store';
+import { createSelector } from '@reduxjs/toolkit';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import { isCanvasMaskLine } from '../store/canvasTypes';
+import _ from 'lodash';
+
+export const canvasLinesSelector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    return { objects: canvas.layerState.objects };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+type InpaintingCanvasLinesProps = GroupConfig;
+
+/**
+ * Draws the lines which comprise the mask.
+ *
+ * Uses globalCompositeOperation to handle the brush and eraser tools.
+ */
+const IAICanvasLines = (props: InpaintingCanvasLinesProps) => {
+  const { ...rest } = props;
+  const { objects } = useAppSelector(canvasLinesSelector);
+
+  return (
+    <Group listening={false} {...rest}>
+      {objects.filter(isCanvasMaskLine).map((line, i) => (
+        <Line
+          key={i}
+          points={line.points}
+          stroke={'rgb(0,0,0)'} // The lines can be any color, just need alpha > 0
+          strokeWidth={line.strokeWidth * 2}
+          tension={0}
+          lineCap="round"
+          lineJoin="round"
+          shadowForStrokeEnabled={false}
+          listening={false}
+          globalCompositeOperation={
+            line.tool === 'brush' ? 'source-over' : 'destination-out'
+          }
+        />
+      ))}
+    </Group>
+  );
+};
+
+export default IAICanvasLines;

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

@@ -0,0 +1,105 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store';
+import _ from 'lodash';
+import { Group, Line, Rect } from 'react-konva';
+import {
+  isCanvasBaseImage,
+  isCanvasBaseLine,
+  isCanvasEraseRect,
+  isCanvasFillRect,
+} from '../store/canvasTypes';
+import IAICanvasImage from './IAICanvasImage';
+import { rgbaColorToString } from 'features/canvas/util/colorToString';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+
+const selector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    const {
+      layerState: { objects },
+    } = canvas;
+    return {
+      objects,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+const IAICanvasObjectRenderer = () => {
+  const { objects } = useAppSelector(selector);
+
+  if (!objects) return null;
+
+  return (
+    <Group name="outpainting-objects" listening={false}>
+      {objects.map((obj, i) => {
+        if (isCanvasBaseImage(obj)) {
+          return (
+            <IAICanvasImage key={i} x={obj.x} y={obj.y} url={obj.image.url} />
+          );
+        } else if (isCanvasBaseLine(obj)) {
+          const line = (
+            <Line
+              key={i}
+              points={obj.points}
+              stroke={obj.color ? rgbaColorToString(obj.color) : 'rgb(0,0,0)'} // The lines can be any color, just need alpha > 0
+              strokeWidth={obj.strokeWidth * 2}
+              tension={0}
+              lineCap="round"
+              lineJoin="round"
+              shadowForStrokeEnabled={false}
+              listening={false}
+              globalCompositeOperation={
+                obj.tool === 'brush' ? 'source-over' : 'destination-out'
+              }
+            />
+          );
+          if (obj.clip) {
+            return (
+              <Group
+                key={i}
+                clipX={obj.clip.x}
+                clipY={obj.clip.y}
+                clipWidth={obj.clip.width}
+                clipHeight={obj.clip.height}
+              >
+                {line}
+              </Group>
+            );
+          } else {
+            return line;
+          }
+        } else if (isCanvasFillRect(obj)) {
+          return (
+            <Rect
+              key={i}
+              x={obj.x}
+              y={obj.y}
+              width={obj.width}
+              height={obj.height}
+              fill={rgbaColorToString(obj.color)}
+            />
+          );
+        } else if (isCanvasEraseRect(obj)) {
+          return (
+            <Rect
+              key={i}
+              x={obj.x}
+              y={obj.y}
+              width={obj.width}
+              height={obj.height}
+              fill={'rgb(255, 255, 255)'}
+              globalCompositeOperation={'destination-out'}
+            />
+          );
+        }
+      })}
+    </Group>
+  );
+};
+
+export default IAICanvasObjectRenderer;

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

@@ -0,0 +1,79 @@
+import { Spinner } from '@chakra-ui/react';
+import { useLayoutEffect, useRef } from 'react';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import {
+  resizeAndScaleCanvas,
+  resizeCanvas,
+  setCanvasContainerDimensions,
+  setDoesCanvasNeedScaling,
+} from 'features/canvas/store/canvasSlice';
+import { createSelector } from '@reduxjs/toolkit';
+import {
+  canvasSelector,
+  initialCanvasImageSelector,
+} from 'features/canvas/store/canvasSelectors';
+
+const canvasResizerSelector = createSelector(
+  canvasSelector,
+  initialCanvasImageSelector,
+  activeTabNameSelector,
+  (canvas, initialCanvasImage, activeTabName) => {
+    const { doesCanvasNeedScaling, isCanvasInitialized } = canvas;
+    return {
+      doesCanvasNeedScaling,
+      activeTabName,
+      initialCanvasImage,
+      isCanvasInitialized,
+    };
+  }
+);
+
+const IAICanvasResizer = () => {
+  const dispatch = useAppDispatch();
+  const {
+    doesCanvasNeedScaling,
+    activeTabName,
+    initialCanvasImage,
+    isCanvasInitialized,
+  } = useAppSelector(canvasResizerSelector);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    window.setTimeout(() => {
+      if (!ref.current) return;
+
+      const { clientWidth, clientHeight } = ref.current;
+
+      dispatch(
+        setCanvasContainerDimensions({
+          width: clientWidth,
+          height: clientHeight,
+        })
+      );
+
+      if (!isCanvasInitialized) {
+        dispatch(resizeAndScaleCanvas());
+      } else {
+        dispatch(resizeCanvas());
+      }
+
+      dispatch(setDoesCanvasNeedScaling(false));
+    }, 0);
+  }, [
+    dispatch,
+    initialCanvasImage,
+    doesCanvasNeedScaling,
+    activeTabName,
+    isCanvasInitialized,
+  ]);
+
+  return (
+    <div ref={ref} className="inpainting-canvas-area">
+      <Spinner thickness="2px" speed="1s" size="xl" />
+    </div>
+  );
+};
+
+export default IAICanvasResizer;

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

@@ -0,0 +1,88 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store';
+import { GroupConfig } from 'konva/lib/Group';
+import _ from 'lodash';
+import { Group, Rect } from 'react-konva';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import IAICanvasImage from './IAICanvasImage';
+
+const selector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    const {
+      layerState: {
+        stagingArea: { images, selectedImageIndex },
+      },
+      shouldShowStagingImage,
+      shouldShowStagingOutline,
+      boundingBoxCoordinates: { x, y },
+      boundingBoxDimensions: { width, height },
+    } = canvas;
+
+    return {
+      currentStagingAreaImage:
+        images.length > 0 ? images[selectedImageIndex] : undefined,
+      isOnFirstImage: selectedImageIndex === 0,
+      isOnLastImage: selectedImageIndex === images.length - 1,
+      shouldShowStagingImage,
+      shouldShowStagingOutline,
+      x,
+      y,
+      width,
+      height,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+type Props = GroupConfig;
+
+const IAICanvasStagingArea = (props: Props) => {
+  const { ...rest } = props;
+  const {
+    currentStagingAreaImage,
+    shouldShowStagingImage,
+    shouldShowStagingOutline,
+    x,
+    y,
+    width,
+    height,
+  } = useAppSelector(selector);
+
+  return (
+    <Group {...rest}>
+      {shouldShowStagingImage && currentStagingAreaImage && (
+        <IAICanvasImage url={currentStagingAreaImage.image.url} x={x} y={y} />
+      )}
+      {shouldShowStagingOutline && (
+        <Group>
+          <Rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            strokeWidth={1}
+            stroke={'white'}
+            strokeScaleEnabled={false}
+          />
+          <Rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            dash={[4, 4]}
+            strokeWidth={1}
+            stroke={'black'}
+            strokeScaleEnabled={false}
+          />
+        </Group>
+      )}
+    </Group>
+  );
+};
+
+export default IAICanvasStagingArea;

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

@@ -0,0 +1,181 @@
+import { ButtonGroup, Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import IAIIconButton from 'common/components/IAIIconButton';
+import _ from 'lodash';
+import { useCallback } from 'react';
+import {
+  FaArrowLeft,
+  FaArrowRight,
+  FaCheck,
+  FaEye,
+  FaEyeSlash,
+  FaPlus,
+  FaSave,
+} from 'react-icons/fa';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import {
+  commitStagingAreaImage,
+  discardStagedImages,
+  nextStagingAreaImage,
+  prevStagingAreaImage,
+  setShouldShowStagingImage,
+  setShouldShowStagingOutline,
+} from 'features/canvas/store/canvasSlice';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { saveStagingAreaImageToGallery } from 'app/socketio/actions';
+
+const selector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    const {
+      layerState: {
+        stagingArea: { images, selectedImageIndex },
+      },
+      shouldShowStagingOutline,
+      shouldShowStagingImage,
+    } = canvas;
+
+    return {
+      currentStagingAreaImage:
+        images.length > 0 ? images[selectedImageIndex] : undefined,
+      isOnFirstImage: selectedImageIndex === 0,
+      isOnLastImage: selectedImageIndex === images.length - 1,
+      shouldShowStagingImage,
+      shouldShowStagingOutline,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+const IAICanvasStagingAreaToolbar = () => {
+  const dispatch = useAppDispatch();
+  const {
+    isOnFirstImage,
+    isOnLastImage,
+    currentStagingAreaImage,
+    shouldShowStagingImage,
+  } = useAppSelector(selector);
+
+  const handleMouseOver = useCallback(() => {
+    dispatch(setShouldShowStagingOutline(true));
+  }, [dispatch]);
+
+  const handleMouseOut = useCallback(() => {
+    dispatch(setShouldShowStagingOutline(false));
+  }, [dispatch]);
+
+  useHotkeys(
+    ['left'],
+    () => {
+      handlePrevImage();
+    },
+    {
+      enabled: () => true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeys(
+    ['right'],
+    () => {
+      handleNextImage();
+    },
+    {
+      enabled: () => true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeys(
+    ['enter'],
+    () => {
+      handleAccept();
+    },
+    {
+      enabled: () => true,
+      preventDefault: true,
+    }
+  );
+
+  const handlePrevImage = () => dispatch(prevStagingAreaImage());
+  const handleNextImage = () => dispatch(nextStagingAreaImage());
+  const handleAccept = () => dispatch(commitStagingAreaImage());
+
+  if (!currentStagingAreaImage) return null;
+
+  return (
+    <Flex
+      pos={'absolute'}
+      bottom={'1rem'}
+      w={'100%'}
+      align={'center'}
+      justify={'center'}
+      filter="drop-shadow(0 0.5rem 1rem rgba(0,0,0))"
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+    >
+      <ButtonGroup isAttached>
+        <IAIIconButton
+          tooltip="Previous (Left)"
+          aria-label="Previous (Left)"
+          icon={<FaArrowLeft />}
+          onClick={handlePrevImage}
+          data-selected={true}
+          isDisabled={isOnFirstImage}
+        />
+        <IAIIconButton
+          tooltip="Next (Right)"
+          aria-label="Next (Right)"
+          icon={<FaArrowRight />}
+          onClick={handleNextImage}
+          data-selected={true}
+          isDisabled={isOnLastImage}
+        />
+        <IAIIconButton
+          tooltip="Accept (Enter)"
+          aria-label="Accept (Enter)"
+          icon={<FaCheck />}
+          onClick={handleAccept}
+          data-selected={true}
+        />
+        <IAIIconButton
+          tooltip="Show/Hide"
+          aria-label="Show/Hide"
+          data-alert={!shouldShowStagingImage}
+          icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />}
+          onClick={() =>
+            dispatch(setShouldShowStagingImage(!shouldShowStagingImage))
+          }
+          data-selected={true}
+        />
+        <IAIIconButton
+          tooltip="Save to Gallery"
+          aria-label="Save to Gallery"
+          icon={<FaSave />}
+          onClick={() =>
+            dispatch(
+              saveStagingAreaImageToGallery(currentStagingAreaImage.image.url)
+            )
+          }
+          data-selected={true}
+        />
+        <IAIIconButton
+          tooltip="Discard All"
+          aria-label="Discard All"
+          icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
+          onClick={() => dispatch(discardStagedImages())}
+          data-selected={true}
+          style={{ backgroundColor: 'var(--btn-delete-image)' }}
+          fontSize={20}
+        />
+      </ButtonGroup>
+    </Flex>
+  );
+};
+
+export default IAICanvasStagingAreaToolbar;

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

@@ -0,0 +1,116 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store';
+import _ from 'lodash';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusTextCursorPos';
+import roundToHundreth from '../util/roundToHundreth';
+
+const selector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    const {
+      stageDimensions: { width: stageWidth, height: stageHeight },
+      stageCoordinates: { x: stageX, y: stageY },
+      boundingBoxDimensions: { width: boxWidth, height: boxHeight },
+      scaledBoundingBoxDimensions: {
+        width: scaledBoxWidth,
+        height: scaledBoxHeight,
+      },
+      boundingBoxCoordinates: { x: boxX, y: boxY },
+      stageScale,
+      shouldShowCanvasDebugInfo,
+      layer,
+      boundingBoxScaleMethod,
+    } = canvas;
+
+    let boundingBoxColor = 'inherit';
+
+    if (
+      (boundingBoxScaleMethod === 'none' &&
+        (boxWidth < 512 || boxHeight < 512)) ||
+      (boundingBoxScaleMethod === 'manual' &&
+        scaledBoxWidth * scaledBoxHeight < 512 * 512)
+    ) {
+      boundingBoxColor = 'var(--status-working-color)';
+    }
+
+    const activeLayerColor =
+      layer === 'mask' ? 'var(--status-working-color)' : 'inherit';
+
+    return {
+      activeLayerColor,
+      activeLayerString: layer.charAt(0).toUpperCase() + layer.slice(1),
+      boundingBoxColor,
+      boundingBoxCoordinatesString: `(${roundToHundreth(
+        boxX
+      )}, ${roundToHundreth(boxY)})`,
+      boundingBoxDimensionsString: `${boxWidth}×${boxHeight}`,
+      scaledBoundingBoxDimensionsString: `${scaledBoxWidth}×${scaledBoxHeight}`,
+      canvasCoordinatesString: `${roundToHundreth(stageX)}×${roundToHundreth(
+        stageY
+      )}`,
+      canvasDimensionsString: `${stageWidth}×${stageHeight}`,
+      canvasScaleString: Math.round(stageScale * 100),
+      shouldShowCanvasDebugInfo,
+      shouldShowBoundingBox: boundingBoxScaleMethod !== 'auto',
+      shouldShowScaledBoundingBox: boundingBoxScaleMethod !== 'none',
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+const IAICanvasStatusText = () => {
+  const {
+    activeLayerColor,
+    activeLayerString,
+    boundingBoxColor,
+    boundingBoxCoordinatesString,
+    boundingBoxDimensionsString,
+    scaledBoundingBoxDimensionsString,
+    shouldShowScaledBoundingBox,
+    canvasCoordinatesString,
+    canvasDimensionsString,
+    canvasScaleString,
+    shouldShowCanvasDebugInfo,
+    shouldShowBoundingBox,
+  } = useAppSelector(selector);
+
+  return (
+    <div className="canvas-status-text">
+      <div
+        style={{
+          color: activeLayerColor,
+        }}
+      >{`Active Layer: ${activeLayerString}`}</div>
+      <div>{`Canvas Scale: ${canvasScaleString}%`}</div>
+      {shouldShowBoundingBox && (
+        <div
+          style={{
+            color: boundingBoxColor,
+          }}
+        >{`Bounding Box: ${boundingBoxDimensionsString}`}</div>
+      )}
+      {shouldShowScaledBoundingBox && (
+        <div
+          style={{
+            color: boundingBoxColor,
+          }}
+        >{`Scaled Bounding Box: ${scaledBoundingBoxDimensionsString}`}</div>
+      )}
+      {shouldShowCanvasDebugInfo && (
+        <>
+          <div>{`Bounding Box Position: ${boundingBoxCoordinatesString}`}</div>
+          <div>{`Canvas Dimensions: ${canvasDimensionsString}`}</div>
+          <div>{`Canvas Position: ${canvasCoordinatesString}`}</div>
+          <IAICanvasStatusTextCursorPos />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default IAICanvasStatusText;

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

@@ -0,0 +1,34 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import React from 'react';
+import _ from 'lodash';
+import roundToHundreth from 'features/canvas/util/roundToHundreth';
+
+const cursorPositionSelector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    const { cursorPosition } = canvas;
+
+    const { cursorX, cursorY } = cursorPosition
+      ? { cursorX: cursorPosition.x, cursorY: cursorPosition.y }
+      : { cursorX: -1, cursorY: -1 };
+
+    return {
+      cursorCoordinatesString: `(${roundToHundreth(cursorX)}, ${roundToHundreth(
+        cursorY
+      )})`,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+export default function IAICanvasStatusTextCursorPos() {
+  const { cursorCoordinatesString } = useAppSelector(cursorPositionSelector);
+
+  return <div>{`Cursor Position: ${cursorCoordinatesString}`}</div>;
+}

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

@@ -0,0 +1,208 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { GroupConfig } from 'konva/lib/Group';
+import _ from 'lodash';
+import { Circle, Group } from 'react-konva';
+import { useAppSelector } from 'app/store';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import { rgbaColorToString } from 'features/canvas/util/colorToString';
+import {
+  COLOR_PICKER_SIZE,
+  COLOR_PICKER_STROKE_RADIUS,
+} from '../util/constants';
+
+const canvasBrushPreviewSelector = createSelector(
+  canvasSelector,
+  (canvas) => {
+    const {
+      cursorPosition,
+      brushSize,
+      colorPickerColor,
+      maskColor,
+      brushColor,
+      tool,
+      layer,
+      shouldShowBrush,
+      isMovingBoundingBox,
+      isTransformingBoundingBox,
+      stageScale,
+      stageDimensions,
+      boundingBoxCoordinates,
+      boundingBoxDimensions,
+      shouldRestrictStrokesToBox,
+    } = canvas;
+
+    const clip = shouldRestrictStrokesToBox
+      ? {
+          clipX: boundingBoxCoordinates.x,
+          clipY: boundingBoxCoordinates.y,
+          clipWidth: boundingBoxDimensions.width,
+          clipHeight: boundingBoxDimensions.height,
+        }
+      : {};
+
+    // // big brain time; this is the *inverse* of the clip that is needed for shouldRestrictStrokesToBox
+    // // it took some fiddling to work out, so I am leaving it here in case it is needed for something else...
+    // const clipFunc = shouldRestrictStrokesToBox
+    //   ? (ctx: SceneContext) => {
+    //       console.log(
+    //         stageCoordinates.x / stageScale,
+    //         stageCoordinates.y / stageScale,
+    //         stageDimensions.height / stageScale,
+    //         stageDimensions.width / stageScale
+    //       );
+    //       ctx.fillStyle = 'red';
+    //       ctx.rect(
+    //         -stageCoordinates.x / stageScale,
+    //         -stageCoordinates.y / stageScale,
+    //         stageDimensions.width / stageScale,
+    //         stageCoordinates.y / stageScale + boundingBoxCoordinates.y
+    //       );
+    //       ctx.rect(
+    //         -stageCoordinates.x / stageScale,
+    //         boundingBoxCoordinates.y + boundingBoxDimensions.height,
+    //         stageDimensions.width / stageScale,
+    //         stageDimensions.height / stageScale
+    //       );
+    //       ctx.rect(
+    //         -stageCoordinates.x / stageScale,
+    //         -stageCoordinates.y / stageScale,
+    //         stageCoordinates.x / stageScale + boundingBoxCoordinates.x,
+    //         stageDimensions.height / stageScale
+    //       );
+    //       ctx.rect(
+    //         boundingBoxCoordinates.x + boundingBoxDimensions.width,
+    //         -stageCoordinates.y / stageScale,
+    //         stageDimensions.width / stageScale -
+    //           (boundingBoxCoordinates.x + boundingBoxDimensions.width),
+    //         stageDimensions.height / stageScale
+    //       );
+    //     }
+    //   : undefined;
+
+    return {
+      cursorPosition,
+      brushX: cursorPosition ? cursorPosition.x : stageDimensions.width / 2,
+      brushY: cursorPosition ? cursorPosition.y : stageDimensions.height / 2,
+      radius: brushSize / 2,
+      colorPickerOuterRadius: COLOR_PICKER_SIZE / stageScale,
+      colorPickerInnerRadius:
+        (COLOR_PICKER_SIZE - COLOR_PICKER_STROKE_RADIUS + 1) / stageScale,
+      maskColorString: rgbaColorToString({ ...maskColor, a: 0.5 }),
+      brushColorString: rgbaColorToString(brushColor),
+      colorPickerColorString: rgbaColorToString(colorPickerColor),
+      tool,
+      layer,
+      shouldShowBrush,
+      shouldDrawBrushPreview:
+        !(
+          isMovingBoundingBox ||
+          isTransformingBoundingBox ||
+          !cursorPosition
+        ) && shouldShowBrush,
+      strokeWidth: 1.5 / stageScale,
+      dotRadius: 1.5 / stageScale,
+      clip,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+/**
+ * Draws a black circle around the canvas brush preview.
+ */
+const IAICanvasToolPreview = (props: GroupConfig) => {
+  const { ...rest } = props;
+  const {
+    brushX,
+    brushY,
+    radius,
+    maskColorString,
+    tool,
+    layer,
+    shouldDrawBrushPreview,
+    dotRadius,
+    strokeWidth,
+    brushColorString,
+    colorPickerColorString,
+    colorPickerInnerRadius,
+    colorPickerOuterRadius,
+    clip,
+  } = useAppSelector(canvasBrushPreviewSelector);
+
+  if (!shouldDrawBrushPreview) return null;
+
+  return (
+    <Group listening={false} {...clip} {...rest}>
+      {tool === 'colorPicker' ? (
+        <>
+          <Circle
+            x={brushX}
+            y={brushY}
+            radius={colorPickerOuterRadius}
+            stroke={brushColorString}
+            strokeWidth={COLOR_PICKER_STROKE_RADIUS}
+            strokeScaleEnabled={false}
+          />
+          <Circle
+            x={brushX}
+            y={brushY}
+            radius={colorPickerInnerRadius}
+            stroke={colorPickerColorString}
+            strokeWidth={COLOR_PICKER_STROKE_RADIUS}
+            strokeScaleEnabled={false}
+          />
+        </>
+      ) : (
+        <>
+          <Circle
+            x={brushX}
+            y={brushY}
+            radius={radius}
+            fill={layer === 'mask' ? maskColorString : brushColorString}
+            globalCompositeOperation={
+              tool === 'eraser' ? 'destination-out' : 'source-out'
+            }
+          />
+          <Circle
+            x={brushX}
+            y={brushY}
+            radius={radius}
+            stroke={'rgba(255,255,255,0.4)'}
+            strokeWidth={strokeWidth * 2}
+            strokeEnabled={true}
+            listening={false}
+          />
+          <Circle
+            x={brushX}
+            y={brushY}
+            radius={radius}
+            stroke={'rgba(0,0,0,1)'}
+            strokeWidth={strokeWidth}
+            strokeEnabled={true}
+            listening={false}
+          />
+        </>
+      )}
+      <Circle
+        x={brushX}
+        y={brushY}
+        radius={dotRadius * 2}
+        fill={'rgba(255,255,255,0.4)'}
+        listening={false}
+      />
+      <Circle
+        x={brushX}
+        y={brushY}
+        radius={dotRadius}
+        fill={'rgba(0,0,0,1)'}
+        listening={false}
+      />
+    </Group>
+  );
+};
+
+export default IAICanvasToolPreview;

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

@@ -0,0 +1,295 @@
+import { createSelector } from '@reduxjs/toolkit';
+import Konva from 'konva';
+import { KonvaEventObject } from 'konva/lib/Node';
+import { Vector2d } from 'konva/lib/types';
+import _ from 'lodash';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Group, Rect, Transformer } from 'react-konva';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import {
+  roundDownToMultiple,
+  roundToMultiple,
+} from 'common/util/roundDownToMultiple';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import {
+  setBoundingBoxCoordinates,
+  setBoundingBoxDimensions,
+  setIsMouseOverBoundingBox,
+  setIsMovingBoundingBox,
+  setIsTransformingBoundingBox,
+} from 'features/canvas/store/canvasSlice';
+import { GroupConfig } from 'konva/lib/Group';
+
+const boundingBoxPreviewSelector = createSelector(
+  canvasSelector,
+  (canvas) => {
+    const {
+      boundingBoxCoordinates,
+      boundingBoxDimensions,
+      stageScale,
+      isDrawing,
+      isTransformingBoundingBox,
+      isMovingBoundingBox,
+      tool,
+      shouldSnapToGrid,
+    } = canvas;
+
+    return {
+      boundingBoxCoordinates,
+      boundingBoxDimensions,
+      isDrawing,
+      isMovingBoundingBox,
+      isTransformingBoundingBox,
+      stageScale,
+      shouldSnapToGrid,
+      tool,
+      hitStrokeWidth: 20 / stageScale,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+type IAICanvasBoundingBoxPreviewProps = GroupConfig;
+
+const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
+  const { ...rest } = props;
+
+  const dispatch = useAppDispatch();
+  const {
+    boundingBoxCoordinates,
+    boundingBoxDimensions,
+    isDrawing,
+    isMovingBoundingBox,
+    isTransformingBoundingBox,
+    stageScale,
+    shouldSnapToGrid,
+    tool,
+    hitStrokeWidth,
+  } = useAppSelector(boundingBoxPreviewSelector);
+
+  const transformerRef = useRef<Konva.Transformer>(null);
+  const shapeRef = useRef<Konva.Rect>(null);
+
+  const [isMouseOverBoundingBoxOutline, setIsMouseOverBoundingBoxOutline] =
+    useState(false);
+
+  useEffect(() => {
+    if (!transformerRef.current || !shapeRef.current) return;
+    transformerRef.current.nodes([shapeRef.current]);
+    transformerRef.current.getLayer()?.batchDraw();
+  }, []);
+
+  const scaledStep = 64 * stageScale;
+
+  const handleOnDragMove = useCallback(
+    (e: KonvaEventObject<DragEvent>) => {
+      if (!shouldSnapToGrid) {
+        dispatch(
+          setBoundingBoxCoordinates({
+            x: Math.floor(e.target.x()),
+            y: Math.floor(e.target.y()),
+          })
+        );
+        return;
+      }
+
+      const dragX = e.target.x();
+      const dragY = e.target.y();
+
+      const newX = roundToMultiple(dragX, 64);
+      const newY = roundToMultiple(dragY, 64);
+
+      e.target.x(newX);
+      e.target.y(newY);
+
+      dispatch(
+        setBoundingBoxCoordinates({
+          x: newX,
+          y: newY,
+        })
+      );
+    },
+    [dispatch, shouldSnapToGrid]
+  );
+
+  const handleOnTransform = useCallback(() => {
+    /**
+     * The Konva Transformer changes the object's anchor point and scale factor,
+     * not its width and height. We need to un-scale the width and height before
+     * setting the values.
+     */
+    if (!shapeRef.current) return;
+
+    const rect = shapeRef.current;
+
+    const scaleX = rect.scaleX();
+    const scaleY = rect.scaleY();
+
+    // undo the scaling
+    const width = Math.round(rect.width() * scaleX);
+    const height = Math.round(rect.height() * scaleY);
+
+    const x = Math.round(rect.x());
+    const y = Math.round(rect.y());
+
+    dispatch(
+      setBoundingBoxDimensions({
+        width,
+        height,
+      })
+    );
+
+    dispatch(
+      setBoundingBoxCoordinates({
+        x: shouldSnapToGrid ? roundDownToMultiple(x, 64) : x,
+        y: shouldSnapToGrid ? roundDownToMultiple(y, 64) : y,
+      })
+    );
+
+    // Reset the scale now that the coords/dimensions have been un-scaled
+    rect.scaleX(1);
+    rect.scaleY(1);
+  }, [dispatch, shouldSnapToGrid]);
+
+  const anchorDragBoundFunc = useCallback(
+    (
+      oldPos: Vector2d, // old absolute position of anchor point
+      newPos: Vector2d, // new absolute position (potentially) of anchor point
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _e: MouseEvent
+    ) => {
+      /**
+       * Konva does not transform with width or height. It transforms the anchor point
+       * and scale factor. This is then sent to the shape's onTransform listeners.
+       *
+       * We need to snap the new dimensions to steps of 64. But because the whole
+       * stage is scaled, our actual desired step is actually 64 * the stage scale.
+       *
+       * Additionally, we need to ensure we offset the position so that we snap to a
+       * multiple of 64 that is aligned with the grid, and not from the absolute zero
+       * coordinate.
+       */
+
+      // Calculate the offset of the grid.
+      const offsetX = oldPos.x % scaledStep;
+      const offsetY = oldPos.y % scaledStep;
+
+      const newCoordinates = {
+        x: roundDownToMultiple(newPos.x, scaledStep) + offsetX,
+        y: roundDownToMultiple(newPos.y, scaledStep) + offsetY,
+      };
+
+      return newCoordinates;
+    },
+    [scaledStep]
+  );
+
+  const handleStartedTransforming = () => {
+    dispatch(setIsTransformingBoundingBox(true));
+  };
+
+  const handleEndedTransforming = () => {
+    dispatch(setIsTransformingBoundingBox(false));
+    dispatch(setIsMovingBoundingBox(false));
+    dispatch(setIsMouseOverBoundingBox(false));
+    setIsMouseOverBoundingBoxOutline(false);
+  };
+
+  const handleStartedMoving = () => {
+    dispatch(setIsMovingBoundingBox(true));
+  };
+
+  const handleEndedModifying = () => {
+    dispatch(setIsTransformingBoundingBox(false));
+    dispatch(setIsMovingBoundingBox(false));
+    dispatch(setIsMouseOverBoundingBox(false));
+    setIsMouseOverBoundingBoxOutline(false);
+  };
+
+  const handleMouseOver = () => {
+    setIsMouseOverBoundingBoxOutline(true);
+  };
+
+  const handleMouseOut = () => {
+    !isTransformingBoundingBox &&
+      !isMovingBoundingBox &&
+      setIsMouseOverBoundingBoxOutline(false);
+  };
+
+  const handleMouseEnterBoundingBox = () => {
+    dispatch(setIsMouseOverBoundingBox(true));
+  };
+
+  const handleMouseLeaveBoundingBox = () => {
+    dispatch(setIsMouseOverBoundingBox(false));
+  };
+
+  return (
+    <Group {...rest}>
+      <Rect
+        height={boundingBoxDimensions.height}
+        width={boundingBoxDimensions.width}
+        x={boundingBoxCoordinates.x}
+        y={boundingBoxCoordinates.y}
+        onMouseEnter={handleMouseEnterBoundingBox}
+        onMouseOver={handleMouseEnterBoundingBox}
+        onMouseLeave={handleMouseLeaveBoundingBox}
+        onMouseOut={handleMouseLeaveBoundingBox}
+      />
+      <Rect
+        draggable={true}
+        fillEnabled={false}
+        height={boundingBoxDimensions.height}
+        hitStrokeWidth={hitStrokeWidth}
+        listening={!isDrawing && tool === 'move'}
+        onDragStart={handleStartedMoving}
+        onDragEnd={handleEndedModifying}
+        onDragMove={handleOnDragMove}
+        onMouseDown={handleStartedMoving}
+        onMouseOut={handleMouseOut}
+        onMouseOver={handleMouseOver}
+        onMouseEnter={handleMouseOver}
+        onMouseUp={handleEndedModifying}
+        onTransform={handleOnTransform}
+        onTransformEnd={handleEndedTransforming}
+        ref={shapeRef}
+        stroke={
+          isMouseOverBoundingBoxOutline ? 'rgba(255,255,255,0.7)' : 'white'
+        }
+        strokeWidth={(isMouseOverBoundingBoxOutline ? 8 : 1) / stageScale}
+        width={boundingBoxDimensions.width}
+        x={boundingBoxCoordinates.x}
+        y={boundingBoxCoordinates.y}
+      />
+      <Transformer
+        anchorCornerRadius={3}
+        anchorDragBoundFunc={anchorDragBoundFunc}
+        anchorFill={'rgba(212,216,234,1)'}
+        anchorSize={15}
+        anchorStroke={'rgb(42,42,42)'}
+        borderDash={[4, 4]}
+        borderEnabled={true}
+        borderStroke={'black'}
+        draggable={false}
+        enabledAnchors={tool === 'move' ? undefined : []}
+        flipEnabled={false}
+        ignoreStroke={true}
+        keepRatio={false}
+        listening={!isDrawing && tool === 'move'}
+        onDragStart={handleStartedMoving}
+        onDragEnd={handleEndedModifying}
+        onMouseDown={handleStartedTransforming}
+        onMouseUp={handleEndedTransforming}
+        onTransformEnd={handleEndedTransforming}
+        ref={transformerRef}
+        rotateEnabled={false}
+      />
+    </Group>
+  );
+};
+
+export default IAICanvasBoundingBox;

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

@@ -0,0 +1,146 @@
+import { ButtonGroup, Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import {
+  clearMask,
+  setIsMaskEnabled,
+  setLayer,
+  setMaskColor,
+  setShouldPreserveMaskedArea,
+} from 'features/canvas/store/canvasSlice';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import _ from 'lodash';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { FaMask, FaTrash } from 'react-icons/fa';
+import IAIPopover from 'common/components/IAIPopover';
+import IAICheckbox from 'common/components/IAICheckbox';
+import IAIColorPicker from 'common/components/IAIColorPicker';
+import IAIButton from 'common/components/IAIButton';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { rgbaColorToString } from 'features/canvas/util/colorToString';
+
+export const selector = createSelector(
+  [canvasSelector, isStagingSelector],
+  (canvas, isStaging) => {
+    const { maskColor, layer, isMaskEnabled, shouldPreserveMaskedArea } =
+      canvas;
+
+    return {
+      layer,
+      maskColor,
+      maskColorString: rgbaColorToString(maskColor),
+      isMaskEnabled,
+      shouldPreserveMaskedArea,
+      isStaging,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+const IAICanvasMaskOptions = () => {
+  const dispatch = useAppDispatch();
+  const {
+    layer,
+    maskColor,
+    isMaskEnabled,
+    shouldPreserveMaskedArea,
+    isStaging,
+  } = useAppSelector(selector);
+
+  useHotkeys(
+    ['q'],
+    () => {
+      handleToggleMaskLayer();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [layer]
+  );
+
+  useHotkeys(
+    ['shift+c'],
+    () => {
+      handleClearMask();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    []
+  );
+
+  useHotkeys(
+    ['h'],
+    () => {
+      handleToggleEnableMask();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [isMaskEnabled]
+  );
+
+  const handleToggleMaskLayer = () => {
+    dispatch(setLayer(layer === 'mask' ? 'base' : 'mask'));
+  };
+
+  const handleClearMask = () => dispatch(clearMask());
+
+  const handleToggleEnableMask = () =>
+    dispatch(setIsMaskEnabled(!isMaskEnabled));
+
+  return (
+    <IAIPopover
+      trigger="hover"
+      triggerComponent={
+        <ButtonGroup>
+          <IAIIconButton
+            aria-label="Masking Options"
+            tooltip="Masking Options"
+            icon={<FaMask />}
+            style={
+              layer === 'mask'
+                ? { backgroundColor: 'var(--accent-color)' }
+                : { backgroundColor: 'var(--btn-base-color)' }
+            }
+            isDisabled={isStaging}
+          />
+        </ButtonGroup>
+      }
+    >
+      <Flex direction={'column'} gap={'0.5rem'}>
+        <IAICheckbox
+          label="Enable Mask (H)"
+          isChecked={isMaskEnabled}
+          onChange={handleToggleEnableMask}
+        />
+        <IAICheckbox
+          label="Preserve Masked Area"
+          isChecked={shouldPreserveMaskedArea}
+          onChange={(e) =>
+            dispatch(setShouldPreserveMaskedArea(e.target.checked))
+          }
+        />
+        <IAIColorPicker
+          style={{ paddingTop: '0.5rem', paddingBottom: '0.5rem' }}
+          color={maskColor}
+          onChange={(newColor) => dispatch(setMaskColor(newColor))}
+        />
+        <IAIButton size={'sm'} leftIcon={<FaTrash />} onClick={handleClearMask}>
+          Clear Mask (Shift+C)
+        </IAIButton>
+      </Flex>
+    </IAIPopover>
+  );
+};
+
+export default IAICanvasMaskOptions;

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

@@ -0,0 +1,59 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { FaRedo } from 'react-icons/fa';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+
+import _ from 'lodash';
+import { redo } from 'features/canvas/store/canvasSlice';
+import { systemSelector } from 'features/system/store/systemSelectors';
+
+const canvasRedoSelector = createSelector(
+  [canvasSelector, activeTabNameSelector, systemSelector],
+  (canvas, activeTabName, system) => {
+    const { futureLayerStates } = canvas;
+
+    return {
+      canRedo: futureLayerStates.length > 0 && !system.isProcessing,
+      activeTabName,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+export default function IAICanvasRedoButton() {
+  const dispatch = useAppDispatch();
+  const { canRedo, activeTabName } = useAppSelector(canvasRedoSelector);
+
+  const handleRedo = () => {
+    dispatch(redo());
+  };
+
+  useHotkeys(
+    ['meta+shift+z', 'ctrl+shift+z', 'control+y', 'meta+y'],
+    () => {
+      handleRedo();
+    },
+    {
+      enabled: () => canRedo,
+      preventDefault: true,
+    },
+    [activeTabName, canRedo]
+  );
+
+  return (
+    <IAIIconButton
+      aria-label="Redo (Ctrl+Shift+Z)"
+      tooltip="Redo (Ctrl+Shift+Z)"
+      icon={<FaRedo />}
+      onClick={handleRedo}
+      isDisabled={!canRedo}
+    />
+  );
+}

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

@@ -0,0 +1,154 @@
+import { Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import {
+  setShouldAutoSave,
+  setShouldCropToBoundingBoxOnSave,
+  setShouldDarkenOutsideBoundingBox,
+  setShouldRestrictStrokesToBox,
+  setShouldShowCanvasDebugInfo,
+  setShouldShowGrid,
+  setShouldShowIntermediates,
+  setShouldSnapToGrid,
+} from 'features/canvas/store/canvasSlice';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import _ from 'lodash';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { FaWrench } from 'react-icons/fa';
+import IAIPopover from 'common/components/IAIPopover';
+import IAICheckbox from 'common/components/IAICheckbox';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
+import ClearCanvasHistoryButtonModal from '../ClearCanvasHistoryButtonModal';
+import { ChangeEvent } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+export const canvasControlsSelector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    const {
+      shouldAutoSave,
+      shouldCropToBoundingBoxOnSave,
+      shouldDarkenOutsideBoundingBox,
+      shouldShowCanvasDebugInfo,
+      shouldShowGrid,
+      shouldShowIntermediates,
+      shouldSnapToGrid,
+      shouldRestrictStrokesToBox,
+    } = canvas;
+
+    return {
+      shouldAutoSave,
+      shouldCropToBoundingBoxOnSave,
+      shouldDarkenOutsideBoundingBox,
+      shouldShowCanvasDebugInfo,
+      shouldShowGrid,
+      shouldShowIntermediates,
+      shouldSnapToGrid,
+      shouldRestrictStrokesToBox,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+const IAICanvasSettingsButtonPopover = () => {
+  const dispatch = useAppDispatch();
+  const {
+    shouldAutoSave,
+    shouldCropToBoundingBoxOnSave,
+    shouldDarkenOutsideBoundingBox,
+    shouldShowCanvasDebugInfo,
+    shouldShowGrid,
+    shouldShowIntermediates,
+    shouldSnapToGrid,
+    shouldRestrictStrokesToBox,
+  } = useAppSelector(canvasControlsSelector);
+
+  useHotkeys(
+    ['n'],
+    () => {
+      dispatch(setShouldSnapToGrid(!shouldSnapToGrid));
+    },
+    {
+      enabled: true,
+      preventDefault: true,
+    },
+    [shouldSnapToGrid]
+  );
+
+  const handleChangeShouldSnapToGrid = (e: ChangeEvent<HTMLInputElement>) =>
+    dispatch(setShouldSnapToGrid(e.target.checked));
+
+  return (
+    <IAIPopover
+      trigger="hover"
+      triggerComponent={
+        <IAIIconButton
+          tooltip="Canvas Settings"
+          aria-label="Canvas Settings"
+          icon={<FaWrench />}
+        />
+      }
+    >
+      <Flex direction={'column'} gap={'0.5rem'}>
+        <IAICheckbox
+          label="Show Intermediates"
+          isChecked={shouldShowIntermediates}
+          onChange={(e) =>
+            dispatch(setShouldShowIntermediates(e.target.checked))
+          }
+        />
+        <IAICheckbox
+          label="Show Grid"
+          isChecked={shouldShowGrid}
+          onChange={(e) => dispatch(setShouldShowGrid(e.target.checked))}
+        />
+        <IAICheckbox
+          label="Snap to Grid"
+          isChecked={shouldSnapToGrid}
+          onChange={handleChangeShouldSnapToGrid}
+        />
+        <IAICheckbox
+          label="Darken Outside Selection"
+          isChecked={shouldDarkenOutsideBoundingBox}
+          onChange={(e) =>
+            dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked))
+          }
+        />
+        <IAICheckbox
+          label="Auto Save to Gallery"
+          isChecked={shouldAutoSave}
+          onChange={(e) => dispatch(setShouldAutoSave(e.target.checked))}
+        />
+        <IAICheckbox
+          label="Save Box Region Only"
+          isChecked={shouldCropToBoundingBoxOnSave}
+          onChange={(e) =>
+            dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked))
+          }
+        />
+        <IAICheckbox
+          label="Limit Strokes to Box"
+          isChecked={shouldRestrictStrokesToBox}
+          onChange={(e) =>
+            dispatch(setShouldRestrictStrokesToBox(e.target.checked))
+          }
+        />
+        <IAICheckbox
+          label="Show Canvas Debug Info"
+          isChecked={shouldShowCanvasDebugInfo}
+          onChange={(e) =>
+            dispatch(setShouldShowCanvasDebugInfo(e.target.checked))
+          }
+        />
+        <ClearCanvasHistoryButtonModal />
+        <EmptyTempFolderButtonModal />
+      </Flex>
+    </IAIPopover>
+  );
+};
+
+export default IAICanvasSettingsButtonPopover;

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

@@ -0,0 +1,259 @@
+import { ButtonGroup, Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import {
+  addEraseRect,
+  addFillRect,
+  setBrushColor,
+  setBrushSize,
+  setTool,
+} from 'features/canvas/store/canvasSlice';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import _ from 'lodash';
+import IAIIconButton from 'common/components/IAIIconButton';
+import {
+  FaEraser,
+  FaEyeDropper,
+  FaFillDrip,
+  FaPaintBrush,
+  FaPlus,
+  FaSlidersH,
+} from 'react-icons/fa';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
+import { systemSelector } from 'features/system/store/systemSelectors';
+import { useHotkeys } from 'react-hotkeys-hook';
+import IAIPopover from 'common/components/IAIPopover';
+import IAISlider from 'common/components/IAISlider';
+import IAIColorPicker from 'common/components/IAIColorPicker';
+
+export const selector = createSelector(
+  [canvasSelector, isStagingSelector, systemSelector],
+  (canvas, isStaging, system) => {
+    const { isProcessing } = system;
+    const { tool, brushColor, brushSize } = canvas;
+
+    return {
+      tool,
+      isStaging,
+      isProcessing,
+      brushColor,
+      brushSize,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+const IAICanvasToolChooserOptions = () => {
+  const dispatch = useAppDispatch();
+  const { tool, brushColor, brushSize, isStaging } = useAppSelector(selector);
+
+  useHotkeys(
+    ['b'],
+    () => {
+      handleSelectBrushTool();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    []
+  );
+
+  useHotkeys(
+    ['e'],
+    () => {
+      handleSelectEraserTool();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [tool]
+  );
+
+  useHotkeys(
+    ['c'],
+    () => {
+      handleSelectColorPickerTool();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [tool]
+  );
+
+  useHotkeys(
+    ['shift+f'],
+    () => {
+      handleFillRect();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeys(
+    ['delete', 'backspace'],
+    () => {
+      handleEraseBoundingBox();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeys(
+    ['BracketLeft'],
+    () => {
+      dispatch(setBrushSize(Math.max(brushSize - 5, 5)));
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [brushSize]
+  );
+
+  useHotkeys(
+    ['BracketRight'],
+    () => {
+      dispatch(setBrushSize(Math.min(brushSize + 5, 500)));
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [brushSize]
+  );
+
+  useHotkeys(
+    ['shift+BracketLeft'],
+    () => {
+      dispatch(
+        setBrushColor({
+          ...brushColor,
+          a: _.clamp(brushColor.a - 0.05, 0.05, 1),
+        })
+      );
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [brushColor]
+  );
+
+  useHotkeys(
+    ['shift+BracketRight'],
+    () => {
+      dispatch(
+        setBrushColor({
+          ...brushColor,
+          a: _.clamp(brushColor.a + 0.05, 0.05, 1),
+        })
+      );
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [brushColor]
+  );
+
+  const handleSelectBrushTool = () => dispatch(setTool('brush'));
+  const handleSelectEraserTool = () => dispatch(setTool('eraser'));
+  const handleSelectColorPickerTool = () => dispatch(setTool('colorPicker'));
+  const handleFillRect = () => dispatch(addFillRect());
+  const handleEraseBoundingBox = () => dispatch(addEraseRect());
+
+  return (
+    <ButtonGroup isAttached>
+      <IAIIconButton
+        aria-label="Brush Tool (B)"
+        tooltip="Brush Tool (B)"
+        icon={<FaPaintBrush />}
+        data-selected={tool === 'brush' && !isStaging}
+        onClick={handleSelectBrushTool}
+        isDisabled={isStaging}
+      />
+      <IAIIconButton
+        aria-label="Eraser Tool (E)"
+        tooltip="Eraser Tool (E)"
+        icon={<FaEraser />}
+        data-selected={tool === 'eraser' && !isStaging}
+        isDisabled={isStaging}
+        onClick={handleSelectEraserTool}
+      />
+      <IAIIconButton
+        aria-label="Fill Bounding Box (Shift+F)"
+        tooltip="Fill Bounding Box (Shift+F)"
+        icon={<FaFillDrip />}
+        isDisabled={isStaging}
+        onClick={handleFillRect}
+      />
+      <IAIIconButton
+        aria-label="Erase Bounding Box Area (Delete/Backspace)"
+        tooltip="Erase Bounding Box Area (Delete/Backspace)"
+        icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
+        isDisabled={isStaging}
+        onClick={handleEraseBoundingBox}
+      />
+      <IAIIconButton
+        aria-label="Color Picker (C)"
+        tooltip="Color Picker (C)"
+        icon={<FaEyeDropper />}
+        data-selected={tool === 'colorPicker' && !isStaging}
+        isDisabled={isStaging}
+        onClick={handleSelectColorPickerTool}
+      />
+      <IAIPopover
+        trigger="hover"
+        triggerComponent={
+          <IAIIconButton
+            aria-label="Brush Options"
+            tooltip="Brush Options"
+            icon={<FaSlidersH />}
+          />
+        }
+      >
+        <Flex
+          minWidth={'15rem'}
+          direction={'column'}
+          gap={'1rem'}
+          width={'100%'}
+        >
+          <Flex gap={'1rem'} justifyContent="space-between">
+            <IAISlider
+              label="Size"
+              value={brushSize}
+              withInput
+              onChange={(newSize) => dispatch(setBrushSize(newSize))}
+              sliderNumberInputProps={{ max: 500 }}
+              inputReadOnly={false}
+            />
+          </Flex>
+          <IAIColorPicker
+            style={{
+              width: '100%',
+              paddingTop: '0.5rem',
+              paddingBottom: '0.5rem',
+            }}
+            color={brushColor}
+            onChange={(newColor) => dispatch(setBrushColor(newColor))}
+          />
+        </Flex>
+      </IAIPopover>
+    </ButtonGroup>
+  );
+};
+
+export default IAICanvasToolChooserOptions;

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

@@ -0,0 +1,310 @@
+import { ButtonGroup } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import {
+  resetCanvas,
+  resetCanvasView,
+  resizeAndScaleCanvas,
+  setIsMaskEnabled,
+  setLayer,
+  setTool,
+} from 'features/canvas/store/canvasSlice';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import _ from 'lodash';
+import IAIIconButton from 'common/components/IAIIconButton';
+import {
+  FaArrowsAlt,
+  FaCopy,
+  FaCrosshairs,
+  FaDownload,
+  FaLayerGroup,
+  FaSave,
+  FaTrash,
+  FaUpload,
+} from 'react-icons/fa';
+import IAICanvasUndoButton from './IAICanvasUndoButton';
+import IAICanvasRedoButton from './IAICanvasRedoButton';
+import IAICanvasSettingsButtonPopover from './IAICanvasSettingsButtonPopover';
+import IAICanvasMaskOptions from './IAICanvasMaskOptions';
+import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
+import { systemSelector } from 'features/system/store/systemSelectors';
+import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
+import useImageUploader from 'common/hooks/useImageUploader';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
+import IAISelect from 'common/components/IAISelect';
+import {
+  CanvasLayer,
+  LAYER_NAMES_DICT,
+} from 'features/canvas/store/canvasTypes';
+import { ChangeEvent } from 'react';
+
+export const selector = createSelector(
+  [systemSelector, canvasSelector, isStagingSelector],
+  (system, canvas, isStaging) => {
+    const { isProcessing } = system;
+    const { tool, shouldCropToBoundingBoxOnSave, layer, isMaskEnabled } =
+      canvas;
+
+    return {
+      isProcessing,
+      isStaging,
+      isMaskEnabled,
+      tool,
+      layer,
+      shouldCropToBoundingBoxOnSave,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+const IAICanvasOutpaintingControls = () => {
+  const dispatch = useAppDispatch();
+  const {
+    isProcessing,
+    isStaging,
+    isMaskEnabled,
+    layer,
+    tool,
+    shouldCropToBoundingBoxOnSave,
+  } = useAppSelector(selector);
+  const canvasBaseLayer = getCanvasBaseLayer();
+
+  const { openUploader } = useImageUploader();
+
+  useHotkeys(
+    ['v'],
+    () => {
+      handleSelectMoveTool();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    []
+  );
+
+  useHotkeys(
+    ['r'],
+    () => {
+      handleResetCanvasView();
+    },
+    {
+      enabled: () => true,
+      preventDefault: true,
+    },
+    [canvasBaseLayer]
+  );
+
+  useHotkeys(
+    ['shift+m'],
+    () => {
+      handleMergeVisible();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [canvasBaseLayer, isProcessing]
+  );
+
+  useHotkeys(
+    ['shift+s'],
+    () => {
+      handleSaveToGallery();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [canvasBaseLayer, isProcessing]
+  );
+
+  useHotkeys(
+    ['meta+c', 'ctrl+c'],
+    () => {
+      handleCopyImageToClipboard();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [canvasBaseLayer, isProcessing]
+  );
+
+  useHotkeys(
+    ['shift+d'],
+    () => {
+      handleDownloadAsImage();
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [canvasBaseLayer, isProcessing]
+  );
+
+  const handleSelectMoveTool = () => dispatch(setTool('move'));
+
+  const handleResetCanvasView = () => {
+    const canvasBaseLayer = getCanvasBaseLayer();
+    if (!canvasBaseLayer) return;
+    const clientRect = canvasBaseLayer.getClientRect({
+      skipTransform: true,
+    });
+    dispatch(
+      resetCanvasView({
+        contentRect: clientRect,
+      })
+    );
+  };
+
+  const handleResetCanvas = () => {
+    dispatch(resetCanvas());
+    dispatch(resizeAndScaleCanvas());
+  };
+
+  const handleMergeVisible = () => {
+    dispatch(
+      mergeAndUploadCanvas({
+        cropVisible: false,
+        shouldSetAsInitialImage: true,
+      })
+    );
+  };
+
+  const handleSaveToGallery = () => {
+    dispatch(
+      mergeAndUploadCanvas({
+        cropVisible: shouldCropToBoundingBoxOnSave ? false : true,
+        cropToBoundingBox: shouldCropToBoundingBoxOnSave,
+        shouldSaveToGallery: true,
+      })
+    );
+  };
+
+  const handleCopyImageToClipboard = () => {
+    dispatch(
+      mergeAndUploadCanvas({
+        cropVisible: shouldCropToBoundingBoxOnSave ? false : true,
+        cropToBoundingBox: shouldCropToBoundingBoxOnSave,
+        shouldCopy: true,
+      })
+    );
+  };
+
+  const handleDownloadAsImage = () => {
+    dispatch(
+      mergeAndUploadCanvas({
+        cropVisible: shouldCropToBoundingBoxOnSave ? false : true,
+        cropToBoundingBox: shouldCropToBoundingBoxOnSave,
+        shouldDownload: true,
+      })
+    );
+  };
+
+  const handleChangeLayer = (e: ChangeEvent<HTMLSelectElement>) => {
+    const newLayer = e.target.value as CanvasLayer;
+    dispatch(setLayer(newLayer));
+    if (newLayer === 'mask' && !isMaskEnabled) {
+      dispatch(setIsMaskEnabled(true));
+    }
+  };
+
+  return (
+    <div className="inpainting-settings">
+      <IAISelect
+        tooltip={'Layer (Q)'}
+        tooltipProps={{ hasArrow: true, placement: 'top' }}
+        value={layer}
+        validValues={LAYER_NAMES_DICT}
+        onChange={handleChangeLayer}
+        isDisabled={isStaging}
+      />
+
+      <IAICanvasMaskOptions />
+      <IAICanvasToolChooserOptions />
+
+      <ButtonGroup isAttached>
+        <IAIIconButton
+          aria-label="Move Tool (V)"
+          tooltip="Move Tool (V)"
+          icon={<FaArrowsAlt />}
+          data-selected={tool === 'move' || isStaging}
+          onClick={handleSelectMoveTool}
+        />
+        <IAIIconButton
+          aria-label="Reset View (R)"
+          tooltip="Reset View (R)"
+          icon={<FaCrosshairs />}
+          onClick={handleResetCanvasView}
+        />
+      </ButtonGroup>
+
+      <ButtonGroup isAttached>
+        <IAIIconButton
+          aria-label="Merge Visible (Shift+M)"
+          tooltip="Merge Visible (Shift+M)"
+          icon={<FaLayerGroup />}
+          onClick={handleMergeVisible}
+          isDisabled={isStaging}
+        />
+        <IAIIconButton
+          aria-label="Save to Gallery (Shift+S)"
+          tooltip="Save to Gallery (Shift+S)"
+          icon={<FaSave />}
+          onClick={handleSaveToGallery}
+          isDisabled={isStaging}
+        />
+        <IAIIconButton
+          aria-label="Copy to Clipboard (Cmd/Ctrl+C)"
+          tooltip="Copy to Clipboard (Cmd/Ctrl+C)"
+          icon={<FaCopy />}
+          onClick={handleCopyImageToClipboard}
+          isDisabled={isStaging}
+        />
+        <IAIIconButton
+          aria-label="Download as Image (Shift+D)"
+          tooltip="Download as Image (Shift+D)"
+          icon={<FaDownload />}
+          onClick={handleDownloadAsImage}
+          isDisabled={isStaging}
+        />
+      </ButtonGroup>
+      <ButtonGroup isAttached>
+        <IAICanvasUndoButton />
+        <IAICanvasRedoButton />
+      </ButtonGroup>
+
+      <ButtonGroup isAttached>
+        <IAIIconButton
+          aria-label="Upload"
+          tooltip="Upload"
+          icon={<FaUpload />}
+          onClick={openUploader}
+          isDisabled={isStaging}
+        />
+        <IAIIconButton
+          aria-label="Clear Canvas"
+          tooltip="Clear Canvas"
+          icon={<FaTrash />}
+          onClick={handleResetCanvas}
+          style={{ backgroundColor: 'var(--btn-delete-image)' }}
+          isDisabled={isStaging}
+        />
+      </ButtonGroup>
+      <ButtonGroup isAttached>
+        <IAICanvasSettingsButtonPopover />
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default IAICanvasOutpaintingControls;

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

@@ -0,0 +1,60 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { FaUndo } from 'react-icons/fa';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+
+import _ from 'lodash';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import { undo } from 'features/canvas/store/canvasSlice';
+import { systemSelector } from 'features/system/store/systemSelectors';
+
+const canvasUndoSelector = createSelector(
+  [canvasSelector, activeTabNameSelector, systemSelector],
+  (canvas, activeTabName, system) => {
+    const { pastLayerStates } = canvas;
+
+    return {
+      canUndo: pastLayerStates.length > 0 && !system.isProcessing,
+      activeTabName,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+export default function IAICanvasUndoButton() {
+  const dispatch = useAppDispatch();
+
+  const { canUndo, activeTabName } = useAppSelector(canvasUndoSelector);
+
+  const handleUndo = () => {
+    dispatch(undo());
+  };
+
+  useHotkeys(
+    ['meta+z', 'ctrl+z'],
+    () => {
+      handleUndo();
+    },
+    {
+      enabled: () => canUndo,
+      preventDefault: true,
+    },
+    [activeTabName, canUndo]
+  );
+
+  return (
+    <IAIIconButton
+      aria-label="Undo (Ctrl+Z)"
+      tooltip="Undo (Ctrl+Z)"
+      icon={<FaUndo />}
+      onClick={handleUndo}
+      isDisabled={!canUndo}
+    />
+  );
+}

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

@@ -0,0 +1,56 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import { KonvaEventObject } from 'konva/lib/Node';
+import _ from 'lodash';
+import { useCallback } from 'react';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
+import {
+  setIsMovingStage,
+  setStageCoordinates,
+} from 'features/canvas/store/canvasSlice';
+
+const selector = createSelector(
+  [canvasSelector, isStagingSelector],
+  (canvas, isStaging) => {
+    const { tool, isMovingBoundingBox } = canvas;
+    return {
+      tool,
+      isStaging,
+      isMovingBoundingBox,
+    };
+  },
+  { memoizeOptions: { resultEqualityCheck: _.isEqual } }
+);
+
+const useCanvasDrag = () => {
+  const dispatch = useAppDispatch();
+  const { tool, isStaging, isMovingBoundingBox } = useAppSelector(selector);
+
+  return {
+    handleDragStart: useCallback(() => {
+      if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) return;
+      dispatch(setIsMovingStage(true));
+    }, [dispatch, isMovingBoundingBox, isStaging, tool]),
+
+    handleDragMove: useCallback(
+      (e: KonvaEventObject<MouseEvent>) => {
+        if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) return;
+
+        const newCoordinates = { x: e.target.x(), y: e.target.y() };
+
+        dispatch(setStageCoordinates(newCoordinates));
+      },
+      [dispatch, isMovingBoundingBox, isStaging, tool]
+    ),
+
+    handleDragEnd: useCallback(() => {
+      if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) return;
+      dispatch(setIsMovingStage(false));
+    }, [dispatch, isMovingBoundingBox, isStaging, tool]),
+  };
+};
+
+export default useCanvasDrag;

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

@@ -0,0 +1,107 @@
+import { createSelector } from '@reduxjs/toolkit';
+import _ from 'lodash';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import {
+  resetCanvasInteractionState,
+  setShouldShowBoundingBox,
+  setTool,
+} from 'features/canvas/store/canvasSlice';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import { useRef } from 'react';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
+import { CanvasTool } from '../store/canvasTypes';
+import { getCanvasStage } from '../util/konvaInstanceProvider';
+
+const selector = createSelector(
+  [canvasSelector, activeTabNameSelector, isStagingSelector],
+  (canvas, activeTabName, isStaging) => {
+    const {
+      cursorPosition,
+      shouldLockBoundingBox,
+      shouldShowBoundingBox,
+      tool,
+    } = canvas;
+
+    return {
+      activeTabName,
+      isCursorOnCanvas: Boolean(cursorPosition),
+      shouldLockBoundingBox,
+      shouldShowBoundingBox,
+      tool,
+      isStaging,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+const useInpaintingCanvasHotkeys = () => {
+  const dispatch = useAppDispatch();
+  const { activeTabName, shouldShowBoundingBox, tool, isStaging } =
+    useAppSelector(selector);
+
+  const previousToolRef = useRef<CanvasTool | null>(null);
+
+  const canvasStage = getCanvasStage();
+
+  useHotkeys(
+    'esc',
+    () => {
+      dispatch(resetCanvasInteractionState());
+    },
+    {
+      enabled: () => true,
+      preventDefault: true,
+    }
+  );
+
+  useHotkeys(
+    'shift+h',
+    () => {
+      dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [activeTabName, shouldShowBoundingBox]
+  );
+
+  useHotkeys(
+    ['space'],
+    (e: KeyboardEvent) => {
+      if (e.repeat) return;
+
+      canvasStage?.container().focus();
+
+      if (tool !== 'move') {
+        previousToolRef.current = tool;
+        dispatch(setTool('move'));
+      }
+
+      if (
+        tool === 'move' &&
+        previousToolRef.current &&
+        previousToolRef.current !== 'move'
+      ) {
+        dispatch(setTool(previousToolRef.current));
+        previousToolRef.current = 'move';
+      }
+    },
+    {
+      keyup: true,
+      keydown: true,
+      preventDefault: true,
+    },
+    [tool, previousToolRef]
+  );
+};
+
+export default useInpaintingCanvasHotkeys;

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

@@ -0,0 +1,69 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import Konva from 'konva';
+import { KonvaEventObject } from 'konva/lib/Node';
+import _ from 'lodash';
+import { MutableRefObject, useCallback } from 'react';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
+import {
+  addLine,
+  setIsDrawing,
+  setIsMovingStage,
+} from 'features/canvas/store/canvasSlice';
+import getScaledCursorPosition from '../util/getScaledCursorPosition';
+import useColorPicker from './useColorUnderCursor';
+
+const selector = createSelector(
+  [activeTabNameSelector, canvasSelector, isStagingSelector],
+  (activeTabName, canvas, isStaging) => {
+    const { tool } = canvas;
+    return {
+      tool,
+      activeTabName,
+      isStaging,
+    };
+  },
+  { memoizeOptions: { resultEqualityCheck: _.isEqual } }
+);
+
+const useCanvasMouseDown = (stageRef: MutableRefObject<Konva.Stage | null>) => {
+  const dispatch = useAppDispatch();
+  const { tool, isStaging } = useAppSelector(selector);
+  const { commitColorUnderCursor } = useColorPicker();
+
+  return useCallback(
+    (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
+      if (!stageRef.current) return;
+
+      stageRef.current.container().focus();
+
+      if (tool === 'move' || isStaging) {
+        dispatch(setIsMovingStage(true));
+        return;
+      }
+
+      if (tool === 'colorPicker') {
+        commitColorUnderCursor();
+        return;
+      }
+
+      const scaledCursorPosition = getScaledCursorPosition(stageRef.current);
+
+      if (!scaledCursorPosition) return;
+
+      e.evt.preventDefault();
+
+      dispatch(setIsDrawing(true));
+
+      // Add a new line starting from the current cursor position.
+      dispatch(addLine([scaledCursorPosition.x, scaledCursorPosition.y]));
+    },
+    [stageRef, tool, isStaging, dispatch, commitColorUnderCursor]
+  );
+};
+
+export default useCanvasMouseDown;

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

@@ -0,0 +1,76 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import Konva from 'konva';
+import { Vector2d } from 'konva/lib/types';
+import _ from 'lodash';
+import { MutableRefObject, useCallback } from 'react';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
+import {
+  addPointToCurrentLine,
+  setCursorPosition,
+} from 'features/canvas/store/canvasSlice';
+import getScaledCursorPosition from '../util/getScaledCursorPosition';
+import useColorPicker from './useColorUnderCursor';
+
+const selector = createSelector(
+  [activeTabNameSelector, canvasSelector, isStagingSelector],
+  (activeTabName, canvas, isStaging) => {
+    const { tool, isDrawing } = canvas;
+    return {
+      tool,
+      isDrawing,
+      activeTabName,
+      isStaging,
+    };
+  },
+  { memoizeOptions: { resultEqualityCheck: _.isEqual } }
+);
+
+const useCanvasMouseMove = (
+  stageRef: MutableRefObject<Konva.Stage | null>,
+  didMouseMoveRef: MutableRefObject<boolean>,
+  lastCursorPositionRef: MutableRefObject<Vector2d>
+) => {
+  const dispatch = useAppDispatch();
+  const { isDrawing, tool, isStaging } = useAppSelector(selector);
+  const { updateColorUnderCursor } = useColorPicker();
+
+  return useCallback(() => {
+    if (!stageRef.current) return;
+
+    const scaledCursorPosition = getScaledCursorPosition(stageRef.current);
+
+    if (!scaledCursorPosition) return;
+
+    dispatch(setCursorPosition(scaledCursorPosition));
+
+    lastCursorPositionRef.current = scaledCursorPosition;
+
+    if (tool === 'colorPicker') {
+      updateColorUnderCursor();
+      return;
+    }
+
+    if (!isDrawing || tool === 'move' || isStaging) return;
+
+    didMouseMoveRef.current = true;
+    dispatch(
+      addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y])
+    );
+  }, [
+    didMouseMoveRef,
+    dispatch,
+    isDrawing,
+    isStaging,
+    lastCursorPositionRef,
+    stageRef,
+    tool,
+    updateColorUnderCursor,
+  ]);
+};
+
+export default useCanvasMouseMove;

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

@@ -0,0 +1,13 @@
+import { useAppDispatch } from 'app/store';
+import { useCallback } from 'react';
+import { mouseLeftCanvas } from 'features/canvas/store/canvasSlice';
+
+const useCanvasMouseOut = () => {
+  const dispatch = useAppDispatch();
+
+  return useCallback(() => {
+    dispatch(mouseLeftCanvas());
+  }, [dispatch]);
+};
+
+export default useCanvasMouseOut;

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

@@ -0,0 +1,64 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import Konva from 'konva';
+import _ from 'lodash';
+import { MutableRefObject, useCallback } from 'react';
+import { canvasSelector, isStagingSelector } from 'features/canvas/store/canvasSelectors';
+import {
+  // addPointToCurrentEraserLine,
+  addPointToCurrentLine,
+  setIsDrawing,
+  setIsMovingStage,
+} from 'features/canvas/store/canvasSlice';
+import getScaledCursorPosition from '../util/getScaledCursorPosition';
+
+const selector = createSelector(
+  [activeTabNameSelector, canvasSelector, isStagingSelector],
+  (activeTabName, canvas, isStaging) => {
+    const { tool, isDrawing } = canvas;
+    return {
+      tool,
+      isDrawing,
+      activeTabName,
+      isStaging,
+    };
+  },
+  { memoizeOptions: { resultEqualityCheck: _.isEqual } }
+);
+
+const useCanvasMouseUp = (
+  stageRef: MutableRefObject<Konva.Stage | null>,
+  didMouseMoveRef: MutableRefObject<boolean>
+) => {
+  const dispatch = useAppDispatch();
+  const { tool, isDrawing, isStaging } = useAppSelector(selector);
+
+  return useCallback(() => {
+    if (tool === 'move' || isStaging) {
+      dispatch(setIsMovingStage(false));
+      return;
+    }
+
+    if (!didMouseMoveRef.current && isDrawing && stageRef.current) {
+      const scaledCursorPosition = getScaledCursorPosition(stageRef.current);
+
+      if (!scaledCursorPosition) return;
+
+      /**
+       * Extend the current line.
+       * In this case, the mouse didn't move, so we append the same point to
+       * the line's existing points. This allows the line to render as a circle
+       * centered on that point.
+       */
+      dispatch(
+        addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y])
+      );
+    } else {
+      didMouseMoveRef.current = false;
+    }
+    dispatch(setIsDrawing(false));
+  }, [didMouseMoveRef, dispatch, isDrawing, isStaging, stageRef, tool]);
+};
+
+export default useCanvasMouseUp;

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

@@ -0,0 +1,76 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store';
+import Konva from 'konva';
+import { KonvaEventObject } from 'konva/lib/Node';
+import _ from 'lodash';
+import { MutableRefObject, useCallback } from 'react';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import {
+  setStageCoordinates,
+  setStageScale,
+} from 'features/canvas/store/canvasSlice';
+import {
+  CANVAS_SCALE_BY,
+  MAX_CANVAS_SCALE,
+  MIN_CANVAS_SCALE,
+} from '../util/constants';
+
+const selector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    const { isMoveStageKeyHeld, stageScale } = canvas;
+    return {
+      isMoveStageKeyHeld,
+      stageScale,
+    };
+  },
+  { memoizeOptions: { resultEqualityCheck: _.isEqual } }
+);
+
+const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
+  const dispatch = useAppDispatch();
+  const { isMoveStageKeyHeld, stageScale } = useAppSelector(selector);
+
+  return useCallback(
+    (e: KonvaEventObject<WheelEvent>) => {
+      // stop default scrolling
+      if (!stageRef.current || isMoveStageKeyHeld) return;
+
+      e.evt.preventDefault();
+
+      const cursorPos = stageRef.current.getPointerPosition();
+
+      if (!cursorPos) return;
+
+      const mousePointTo = {
+        x: (cursorPos.x - stageRef.current.x()) / stageScale,
+        y: (cursorPos.y - stageRef.current.y()) / stageScale,
+      };
+
+      let delta = e.evt.deltaY;
+
+      // when we zoom on trackpad, e.evt.ctrlKey is true
+      // in that case lets revert direction
+      if (e.evt.ctrlKey) {
+        delta = -delta;
+      }
+
+      const newScale = _.clamp(
+        stageScale * CANVAS_SCALE_BY ** delta,
+        MIN_CANVAS_SCALE,
+        MAX_CANVAS_SCALE
+      );
+
+      const newCoordinates = {
+        x: cursorPos.x - mousePointTo.x * newScale,
+        y: cursorPos.y - mousePointTo.y * newScale,
+      };
+
+      dispatch(setStageScale(newScale));
+      dispatch(setStageCoordinates(newCoordinates));
+    },
+    [stageRef, isMoveStageKeyHeld, stageScale, dispatch]
+  );
+};
+
+export default useCanvasWheel;

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

@@ -0,0 +1,45 @@
+import { useAppDispatch } from 'app/store';
+import Konva from 'konva';
+import _ from 'lodash';
+import {
+  commitColorPickerColor,
+  setColorPickerColor,
+} from '../store/canvasSlice';
+import {
+  getCanvasBaseLayer,
+  getCanvasStage,
+} from '../util/konvaInstanceProvider';
+
+const useColorPicker = () => {
+  const dispatch = useAppDispatch();
+  const canvasBaseLayer = getCanvasBaseLayer();
+  const stage = getCanvasStage();
+
+  return {
+    updateColorUnderCursor: () => {
+      if (!stage || !canvasBaseLayer) return;
+
+      const position = stage.getPointerPosition();
+
+      if (!position) return;
+
+      const pixelRatio = Konva.pixelRatio;
+
+      const [r, g, b, a] = canvasBaseLayer
+        .getContext()
+        .getImageData(
+          position.x * pixelRatio,
+          position.y * pixelRatio,
+          1,
+          1
+        ).data;
+
+      dispatch(setColorPickerColor({ r, g, b, a }));
+    },
+    commitColorUnderCursor: () => {
+      dispatch(commitColorPickerColor());
+    },
+  };
+};
+
+export default useColorPicker;

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

@@ -0,0 +1,19 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState } from 'app/store';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import { systemSelector } from 'features/system/store/systemSelectors';
+import { CanvasImage, CanvasState, isCanvasBaseImage } from './canvasTypes';
+
+export const canvasSelector = (state: RootState): CanvasState => state.canvas;
+
+export const isStagingSelector = createSelector(
+  [canvasSelector, activeTabNameSelector, systemSelector],
+  (canvas, activeTabName, system) =>
+    canvas.layerState.stagingArea.images.length > 0 ||
+    (activeTabName === 'unifiedCanvas' && system.isProcessing)
+);
+
+export const initialCanvasImageSelector = (
+  state: RootState
+): CanvasImage | undefined =>
+  state.canvas.layerState.objects.find(isCanvasBaseImage);

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

@@ -0,0 +1,896 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import * as InvokeAI from 'app/invokeai';
+import {
+  roundDownToMultiple,
+  roundToMultiple,
+} from 'common/util/roundDownToMultiple';
+import { IRect, Vector2d } from 'konva/lib/types';
+import _ from 'lodash';
+import { RgbaColor } from 'react-colorful';
+import calculateCoordinates from '../util/calculateCoordinates';
+import calculateScale from '../util/calculateScale';
+import { STAGE_PADDING_PERCENTAGE } from '../util/constants';
+import floorCoordinates from '../util/floorCoordinates';
+import getScaledBoundingBoxDimensions from '../util/getScaledBoundingBoxDimensions';
+import roundDimensionsTo64 from '../util/roundDimensionsTo64';
+import {
+  BoundingBoxScale,
+  CanvasImage,
+  CanvasLayer,
+  CanvasLayerState,
+  CanvasBaseLine,
+  CanvasMaskLine,
+  CanvasState,
+  CanvasTool,
+  Dimensions,
+  isCanvasAnyLine,
+  isCanvasBaseImage,
+  isCanvasMaskLine,
+} from './canvasTypes';
+
+export const initialLayerState: CanvasLayerState = {
+  objects: [],
+  stagingArea: {
+    images: [],
+    selectedImageIndex: -1,
+  },
+};
+
+const initialCanvasState: CanvasState = {
+  boundingBoxCoordinates: { x: 0, y: 0 },
+  boundingBoxDimensions: { width: 512, height: 512 },
+  boundingBoxPreviewFill: { r: 0, g: 0, b: 0, a: 0.5 },
+  boundingBoxScaleMethod: 'auto',
+  brushColor: { r: 90, g: 90, b: 255, a: 1 },
+  brushSize: 50,
+  canvasContainerDimensions: { width: 0, height: 0 },
+  colorPickerColor: { r: 90, g: 90, b: 255, a: 1 },
+  cursorPosition: null,
+  doesCanvasNeedScaling: false,
+  futureLayerStates: [],
+  inpaintReplace: 0.1,
+  isCanvasInitialized: false,
+  isDrawing: false,
+  isMaskEnabled: true,
+  isMouseOverBoundingBox: false,
+  isMoveBoundingBoxKeyHeld: false,
+  isMoveStageKeyHeld: false,
+  isMovingBoundingBox: false,
+  isMovingStage: false,
+  isTransformingBoundingBox: false,
+  layer: 'base',
+  layerState: initialLayerState,
+  maskColor: { r: 255, g: 90, b: 90, a: 1 },
+  maxHistory: 128,
+  minimumStageScale: 1,
+  pastLayerStates: [],
+  scaledBoundingBoxDimensions: { width: 512, height: 512 },
+  shouldAutoSave: false,
+  shouldCropToBoundingBoxOnSave: false,
+  shouldDarkenOutsideBoundingBox: false,
+  shouldLockBoundingBox: false,
+  shouldPreserveMaskedArea: false,
+  shouldRestrictStrokesToBox: true,
+  shouldShowBoundingBox: true,
+  shouldShowBrush: true,
+  shouldShowBrushPreview: false,
+  shouldShowCanvasDebugInfo: false,
+  shouldShowCheckboardTransparency: false,
+  shouldShowGrid: true,
+  shouldShowIntermediates: true,
+  shouldShowStagingImage: true,
+  shouldShowStagingOutline: true,
+  shouldSnapToGrid: true,
+  shouldUseInpaintReplace: false,
+  stageCoordinates: { x: 0, y: 0 },
+  stageDimensions: { width: 0, height: 0 },
+  stageScale: 1,
+  tool: 'brush',
+};
+
+export const canvasSlice = createSlice({
+  name: 'canvas',
+  initialState: initialCanvasState,
+  reducers: {
+    setTool: (state, action: PayloadAction<CanvasTool>) => {
+      const tool = action.payload;
+      state.tool = action.payload;
+      if (tool !== 'move') {
+        state.isTransformingBoundingBox = false;
+        state.isMouseOverBoundingBox = false;
+        state.isMovingBoundingBox = false;
+        state.isMovingStage = false;
+      }
+    },
+    setLayer: (state, action: PayloadAction<CanvasLayer>) => {
+      state.layer = action.payload;
+    },
+    toggleTool: (state) => {
+      const currentTool = state.tool;
+      if (currentTool !== 'move') {
+        state.tool = currentTool === 'brush' ? 'eraser' : 'brush';
+      }
+    },
+    setMaskColor: (state, action: PayloadAction<RgbaColor>) => {
+      state.maskColor = action.payload;
+    },
+    setBrushColor: (state, action: PayloadAction<RgbaColor>) => {
+      state.brushColor = action.payload;
+    },
+    setBrushSize: (state, action: PayloadAction<number>) => {
+      state.brushSize = action.payload;
+    },
+    clearMask: (state) => {
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+      state.layerState.objects = state.layerState.objects.filter(
+        (obj) => !isCanvasMaskLine(obj)
+      );
+      state.futureLayerStates = [];
+      state.shouldPreserveMaskedArea = false;
+    },
+    toggleShouldInvertMask: (state) => {
+      state.shouldPreserveMaskedArea = !state.shouldPreserveMaskedArea;
+    },
+    toggleShouldShowMask: (state) => {
+      state.isMaskEnabled = !state.isMaskEnabled;
+    },
+    setShouldPreserveMaskedArea: (state, action: PayloadAction<boolean>) => {
+      state.shouldPreserveMaskedArea = action.payload;
+    },
+    setIsMaskEnabled: (state, action: PayloadAction<boolean>) => {
+      state.isMaskEnabled = action.payload;
+      state.layer = action.payload ? 'mask' : 'base';
+    },
+    setShouldShowCheckboardTransparency: (
+      state,
+      action: PayloadAction<boolean>
+    ) => {
+      state.shouldShowCheckboardTransparency = action.payload;
+    },
+    setShouldShowBrushPreview: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowBrushPreview = action.payload;
+    },
+    setShouldShowBrush: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowBrush = action.payload;
+    },
+    setCursorPosition: (state, action: PayloadAction<Vector2d | null>) => {
+      state.cursorPosition = action.payload;
+    },
+    setInitialCanvasImage: (state, action: PayloadAction<InvokeAI.Image>) => {
+      const image = action.payload;
+      const { stageDimensions } = state;
+
+      const newBoundingBoxDimensions = {
+        width: roundDownToMultiple(_.clamp(image.width, 64, 512), 64),
+        height: roundDownToMultiple(_.clamp(image.height, 64, 512), 64),
+      };
+
+      const newBoundingBoxCoordinates = {
+        x: roundToMultiple(
+          image.width / 2 - newBoundingBoxDimensions.width / 2,
+          64
+        ),
+        y: roundToMultiple(
+          image.height / 2 - newBoundingBoxDimensions.height / 2,
+          64
+        ),
+      };
+
+      if (state.boundingBoxScaleMethod === 'auto') {
+        const scaledDimensions = getScaledBoundingBoxDimensions(
+          newBoundingBoxDimensions
+        );
+        state.scaledBoundingBoxDimensions = scaledDimensions;
+      }
+
+      state.boundingBoxDimensions = newBoundingBoxDimensions;
+      state.boundingBoxCoordinates = newBoundingBoxCoordinates;
+
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      state.layerState = {
+        ...initialLayerState,
+        objects: [
+          {
+            kind: 'image',
+            layer: 'base',
+            x: 0,
+            y: 0,
+            width: image.width,
+            height: image.height,
+            image: image,
+          },
+        ],
+      };
+      state.futureLayerStates = [];
+
+      state.isCanvasInitialized = false;
+      const newScale = calculateScale(
+        stageDimensions.width,
+        stageDimensions.height,
+        image.width,
+        image.height,
+        STAGE_PADDING_PERCENTAGE
+      );
+
+      const newCoordinates = calculateCoordinates(
+        stageDimensions.width,
+        stageDimensions.height,
+        0,
+        0,
+        image.width,
+        image.height,
+        newScale
+      );
+      state.stageScale = newScale;
+      state.stageCoordinates = newCoordinates;
+      state.doesCanvasNeedScaling = true;
+    },
+    setBoundingBoxDimensions: (state, action: PayloadAction<Dimensions>) => {
+      const newDimensions = roundDimensionsTo64(action.payload);
+      state.boundingBoxDimensions = newDimensions;
+
+      if (state.boundingBoxScaleMethod === 'auto') {
+        const scaledDimensions = getScaledBoundingBoxDimensions(newDimensions);
+        state.scaledBoundingBoxDimensions = scaledDimensions;
+      }
+    },
+    setBoundingBoxCoordinates: (state, action: PayloadAction<Vector2d>) => {
+      state.boundingBoxCoordinates = floorCoordinates(action.payload);
+    },
+    setStageCoordinates: (state, action: PayloadAction<Vector2d>) => {
+      state.stageCoordinates = action.payload;
+    },
+    setBoundingBoxPreviewFill: (state, action: PayloadAction<RgbaColor>) => {
+      state.boundingBoxPreviewFill = action.payload;
+    },
+    setDoesCanvasNeedScaling: (state, action: PayloadAction<boolean>) => {
+      state.doesCanvasNeedScaling = action.payload;
+    },
+    setStageScale: (state, action: PayloadAction<number>) => {
+      state.stageScale = action.payload;
+    },
+    setShouldDarkenOutsideBoundingBox: (
+      state,
+      action: PayloadAction<boolean>
+    ) => {
+      state.shouldDarkenOutsideBoundingBox = action.payload;
+    },
+    setIsDrawing: (state, action: PayloadAction<boolean>) => {
+      state.isDrawing = action.payload;
+    },
+    clearCanvasHistory: (state) => {
+      state.pastLayerStates = [];
+      state.futureLayerStates = [];
+    },
+    setShouldUseInpaintReplace: (state, action: PayloadAction<boolean>) => {
+      state.shouldUseInpaintReplace = action.payload;
+    },
+    setInpaintReplace: (state, action: PayloadAction<number>) => {
+      state.inpaintReplace = action.payload;
+    },
+    setShouldLockBoundingBox: (state, action: PayloadAction<boolean>) => {
+      state.shouldLockBoundingBox = action.payload;
+    },
+    toggleShouldLockBoundingBox: (state) => {
+      state.shouldLockBoundingBox = !state.shouldLockBoundingBox;
+    },
+    setShouldShowBoundingBox: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowBoundingBox = action.payload;
+    },
+    setIsTransformingBoundingBox: (state, action: PayloadAction<boolean>) => {
+      state.isTransformingBoundingBox = action.payload;
+    },
+    setIsMovingBoundingBox: (state, action: PayloadAction<boolean>) => {
+      state.isMovingBoundingBox = action.payload;
+    },
+    setIsMouseOverBoundingBox: (state, action: PayloadAction<boolean>) => {
+      state.isMouseOverBoundingBox = action.payload;
+    },
+    setIsMoveBoundingBoxKeyHeld: (state, action: PayloadAction<boolean>) => {
+      state.isMoveBoundingBoxKeyHeld = action.payload;
+    },
+    setIsMoveStageKeyHeld: (state, action: PayloadAction<boolean>) => {
+      state.isMoveStageKeyHeld = action.payload;
+    },
+    addImageToStagingArea: (
+      state,
+      action: PayloadAction<{
+        boundingBox: IRect;
+        image: InvokeAI.Image;
+      }>
+    ) => {
+      const { boundingBox, image } = action.payload;
+
+      if (!boundingBox || !image) return;
+
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      if (state.pastLayerStates.length > state.maxHistory) {
+        state.pastLayerStates.shift();
+      }
+
+      state.layerState.stagingArea.images.push({
+        kind: 'image',
+        layer: 'base',
+        ...boundingBox,
+        image,
+      });
+
+      state.layerState.stagingArea.selectedImageIndex =
+        state.layerState.stagingArea.images.length - 1;
+
+      state.futureLayerStates = [];
+    },
+    discardStagedImages: (state) => {
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      if (state.pastLayerStates.length > state.maxHistory) {
+        state.pastLayerStates.shift();
+      }
+
+      state.layerState.stagingArea = {
+        ...initialLayerState.stagingArea,
+      };
+
+      state.futureLayerStates = [];
+      state.shouldShowStagingOutline = true;
+      state.shouldShowStagingOutline = true;
+    },
+    addFillRect: (state) => {
+      const { boundingBoxCoordinates, boundingBoxDimensions, brushColor } =
+        state;
+
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      if (state.pastLayerStates.length > state.maxHistory) {
+        state.pastLayerStates.shift();
+      }
+
+      state.layerState.objects.push({
+        kind: 'fillRect',
+        layer: 'base',
+        ...boundingBoxCoordinates,
+        ...boundingBoxDimensions,
+        color: brushColor,
+      });
+
+      state.futureLayerStates = [];
+    },
+    addEraseRect: (state) => {
+      const { boundingBoxCoordinates, boundingBoxDimensions } = state;
+
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      if (state.pastLayerStates.length > state.maxHistory) {
+        state.pastLayerStates.shift();
+      }
+
+      state.layerState.objects.push({
+        kind: 'eraseRect',
+        layer: 'base',
+        ...boundingBoxCoordinates,
+        ...boundingBoxDimensions,
+      });
+
+      state.futureLayerStates = [];
+    },
+    addLine: (state, action: PayloadAction<number[]>) => {
+      const { tool, layer, brushColor, brushSize, shouldRestrictStrokesToBox } =
+        state;
+
+      if (tool === 'move' || tool === 'colorPicker') return;
+
+      const newStrokeWidth = brushSize / 2;
+
+      // set & then spread this to only conditionally add the "color" key
+      const newColor =
+        layer === 'base' && tool === 'brush' ? { color: brushColor } : {};
+
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      if (state.pastLayerStates.length > state.maxHistory) {
+        state.pastLayerStates.shift();
+      }
+
+      const newLine: CanvasMaskLine | CanvasBaseLine = {
+        kind: 'line',
+        layer,
+        tool,
+        strokeWidth: newStrokeWidth,
+        points: action.payload,
+        ...newColor,
+      };
+
+      if (shouldRestrictStrokesToBox) {
+        newLine.clip = {
+          ...state.boundingBoxCoordinates,
+          ...state.boundingBoxDimensions,
+        };
+      }
+
+      state.layerState.objects.push(newLine);
+
+      state.futureLayerStates = [];
+    },
+    addPointToCurrentLine: (state, action: PayloadAction<number[]>) => {
+      const lastLine = state.layerState.objects.findLast(isCanvasAnyLine);
+
+      if (!lastLine) return;
+
+      lastLine.points.push(...action.payload);
+    },
+    undo: (state) => {
+      const targetState = state.pastLayerStates.pop();
+
+      if (!targetState) return;
+
+      state.futureLayerStates.unshift(_.cloneDeep(state.layerState));
+
+      if (state.futureLayerStates.length > state.maxHistory) {
+        state.futureLayerStates.pop();
+      }
+
+      state.layerState = targetState;
+    },
+    redo: (state) => {
+      const targetState = state.futureLayerStates.shift();
+
+      if (!targetState) return;
+
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      if (state.pastLayerStates.length > state.maxHistory) {
+        state.pastLayerStates.shift();
+      }
+
+      state.layerState = targetState;
+    },
+    setShouldShowGrid: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowGrid = action.payload;
+    },
+    setIsMovingStage: (state, action: PayloadAction<boolean>) => {
+      state.isMovingStage = action.payload;
+    },
+    setShouldSnapToGrid: (state, action: PayloadAction<boolean>) => {
+      state.shouldSnapToGrid = action.payload;
+    },
+    setShouldAutoSave: (state, action: PayloadAction<boolean>) => {
+      state.shouldAutoSave = action.payload;
+    },
+    setShouldShowIntermediates: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowIntermediates = action.payload;
+    },
+    resetCanvas: (state) => {
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      state.layerState = initialLayerState;
+      state.futureLayerStates = [];
+    },
+    setCanvasContainerDimensions: (
+      state,
+      action: PayloadAction<Dimensions>
+    ) => {
+      state.canvasContainerDimensions = action.payload;
+    },
+    resizeAndScaleCanvas: (state) => {
+      const { width: containerWidth, height: containerHeight } =
+        state.canvasContainerDimensions;
+
+      const initialCanvasImage =
+        state.layerState.objects.find(isCanvasBaseImage);
+
+      const newStageDimensions = {
+        width: Math.floor(containerWidth),
+        height: Math.floor(containerHeight),
+      };
+
+      if (!initialCanvasImage) {
+        const newScale = calculateScale(
+          newStageDimensions.width,
+          newStageDimensions.height,
+          512,
+          512,
+          STAGE_PADDING_PERCENTAGE
+        );
+
+        const newCoordinates = calculateCoordinates(
+          newStageDimensions.width,
+          newStageDimensions.height,
+          0,
+          0,
+          512,
+          512,
+          newScale
+        );
+
+        const newBoundingBoxDimensions = { width: 512, height: 512 };
+
+        state.stageScale = newScale;
+        state.stageCoordinates = newCoordinates;
+        state.stageDimensions = newStageDimensions;
+        state.boundingBoxCoordinates = { x: 0, y: 0 };
+        state.boundingBoxDimensions = newBoundingBoxDimensions;
+
+        if (state.boundingBoxScaleMethod === 'auto') {
+          const scaledDimensions = getScaledBoundingBoxDimensions(
+            newBoundingBoxDimensions
+          );
+          state.scaledBoundingBoxDimensions = scaledDimensions;
+        }
+
+        return;
+      }
+
+      const { width: imageWidth, height: imageHeight } = initialCanvasImage;
+
+      const padding = 0.95;
+
+      const newScale = calculateScale(
+        containerWidth,
+        containerHeight,
+        imageWidth,
+        imageHeight,
+        padding
+      );
+
+      const newCoordinates = calculateCoordinates(
+        newStageDimensions.width,
+        newStageDimensions.height,
+        0,
+        0,
+        imageWidth,
+        imageHeight,
+        newScale
+      );
+
+      state.minimumStageScale = newScale;
+      state.stageScale = newScale;
+      state.stageCoordinates = floorCoordinates(newCoordinates);
+      state.stageDimensions = newStageDimensions;
+
+      state.isCanvasInitialized = true;
+    },
+    resizeCanvas: (state) => {
+      const { width: containerWidth, height: containerHeight } =
+        state.canvasContainerDimensions;
+
+      const newStageDimensions = {
+        width: Math.floor(containerWidth),
+        height: Math.floor(containerHeight),
+      };
+
+      state.stageDimensions = newStageDimensions;
+
+      if (!state.layerState.objects.find(isCanvasBaseImage)) {
+        const newScale = calculateScale(
+          newStageDimensions.width,
+          newStageDimensions.height,
+          512,
+          512,
+          STAGE_PADDING_PERCENTAGE
+        );
+
+        const newCoordinates = calculateCoordinates(
+          newStageDimensions.width,
+          newStageDimensions.height,
+          0,
+          0,
+          512,
+          512,
+          newScale
+        );
+
+        const newBoundingBoxDimensions = { width: 512, height: 512 };
+
+        state.stageScale = newScale;
+
+        state.stageCoordinates = newCoordinates;
+        state.boundingBoxCoordinates = { x: 0, y: 0 };
+        state.boundingBoxDimensions = newBoundingBoxDimensions;
+
+        if (state.boundingBoxScaleMethod === 'auto') {
+          const scaledDimensions = getScaledBoundingBoxDimensions(
+            newBoundingBoxDimensions
+          );
+          state.scaledBoundingBoxDimensions = scaledDimensions;
+        }
+      }
+    },
+    resetCanvasView: (
+      state,
+      action: PayloadAction<{
+        contentRect: IRect;
+      }>
+    ) => {
+      const { contentRect } = action.payload;
+      const {
+        stageDimensions: { width: stageWidth, height: stageHeight },
+      } = state;
+
+      const { x, y, width, height } = contentRect;
+
+      if (width !== 0 && height !== 0) {
+        const newScale = calculateScale(
+          stageWidth,
+          stageHeight,
+          width,
+          height,
+          STAGE_PADDING_PERCENTAGE
+        );
+
+        const newCoordinates = calculateCoordinates(
+          stageWidth,
+          stageHeight,
+          x,
+          y,
+          width,
+          height,
+          newScale
+        );
+
+        state.stageScale = newScale;
+        state.stageCoordinates = newCoordinates;
+      } else {
+        const newScale = calculateScale(
+          stageWidth,
+          stageHeight,
+          512,
+          512,
+          STAGE_PADDING_PERCENTAGE
+        );
+
+        const newCoordinates = calculateCoordinates(
+          stageWidth,
+          stageHeight,
+          0,
+          0,
+          512,
+          512,
+          newScale
+        );
+
+        const newBoundingBoxDimensions = { width: 512, height: 512 };
+
+        state.stageScale = newScale;
+        state.stageCoordinates = newCoordinates;
+        state.boundingBoxCoordinates = { x: 0, y: 0 };
+        state.boundingBoxDimensions = newBoundingBoxDimensions;
+
+        if (state.boundingBoxScaleMethod === 'auto') {
+          const scaledDimensions = getScaledBoundingBoxDimensions(
+            newBoundingBoxDimensions
+          );
+          state.scaledBoundingBoxDimensions = scaledDimensions;
+        }
+      }
+    },
+    nextStagingAreaImage: (state) => {
+      const currentIndex = state.layerState.stagingArea.selectedImageIndex;
+      const length = state.layerState.stagingArea.images.length;
+
+      state.layerState.stagingArea.selectedImageIndex = Math.min(
+        currentIndex + 1,
+        length - 1
+      );
+    },
+    prevStagingAreaImage: (state) => {
+      const currentIndex = state.layerState.stagingArea.selectedImageIndex;
+
+      state.layerState.stagingArea.selectedImageIndex = Math.max(
+        currentIndex - 1,
+        0
+      );
+    },
+    commitStagingAreaImage: (state) => {
+      const { images, selectedImageIndex } = state.layerState.stagingArea;
+
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      if (state.pastLayerStates.length > state.maxHistory) {
+        state.pastLayerStates.shift();
+      }
+
+      state.layerState.objects.push({
+        ...images[selectedImageIndex],
+      });
+
+      state.layerState.stagingArea = {
+        ...initialLayerState.stagingArea,
+      };
+
+      state.futureLayerStates = [];
+      state.shouldShowStagingOutline = true;
+      state.shouldShowStagingImage = true;
+    },
+    fitBoundingBoxToStage: (state) => {
+      const {
+        boundingBoxDimensions,
+        boundingBoxCoordinates,
+        stageDimensions,
+        stageScale,
+      } = state;
+      const scaledStageWidth = stageDimensions.width / stageScale;
+      const scaledStageHeight = stageDimensions.height / stageScale;
+
+      if (
+        boundingBoxCoordinates.x < 0 ||
+        boundingBoxCoordinates.x + boundingBoxDimensions.width >
+          scaledStageWidth ||
+        boundingBoxCoordinates.y < 0 ||
+        boundingBoxCoordinates.y + boundingBoxDimensions.height >
+          scaledStageHeight
+      ) {
+        const newBoundingBoxDimensions = {
+          width: roundDownToMultiple(_.clamp(scaledStageWidth, 64, 512), 64),
+          height: roundDownToMultiple(_.clamp(scaledStageHeight, 64, 512), 64),
+        };
+
+        const newBoundingBoxCoordinates = {
+          x: roundToMultiple(
+            scaledStageWidth / 2 - newBoundingBoxDimensions.width / 2,
+            64
+          ),
+          y: roundToMultiple(
+            scaledStageHeight / 2 - newBoundingBoxDimensions.height / 2,
+            64
+          ),
+        };
+
+        state.boundingBoxDimensions = newBoundingBoxDimensions;
+        state.boundingBoxCoordinates = newBoundingBoxCoordinates;
+
+        if (state.boundingBoxScaleMethod === 'auto') {
+          const scaledDimensions = getScaledBoundingBoxDimensions(
+            newBoundingBoxDimensions
+          );
+          state.scaledBoundingBoxDimensions = scaledDimensions;
+        }
+      }
+    },
+    setBoundingBoxScaleMethod: (
+      state,
+      action: PayloadAction<BoundingBoxScale>
+    ) => {
+      state.boundingBoxScaleMethod = action.payload;
+
+      if (action.payload === 'auto') {
+        const scaledDimensions = getScaledBoundingBoxDimensions(
+          state.boundingBoxDimensions
+        );
+        state.scaledBoundingBoxDimensions = scaledDimensions;
+      }
+    },
+    setScaledBoundingBoxDimensions: (
+      state,
+      action: PayloadAction<Dimensions>
+    ) => {
+      state.scaledBoundingBoxDimensions = action.payload;
+    },
+    setShouldShowStagingImage: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowStagingImage = action.payload;
+    },
+    setShouldShowStagingOutline: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowStagingOutline = action.payload;
+    },
+    setShouldShowCanvasDebugInfo: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowCanvasDebugInfo = action.payload;
+    },
+    setShouldRestrictStrokesToBox: (state, action: PayloadAction<boolean>) => {
+      state.shouldRestrictStrokesToBox = action.payload;
+    },
+    setShouldCropToBoundingBoxOnSave: (
+      state,
+      action: PayloadAction<boolean>
+    ) => {
+      state.shouldCropToBoundingBoxOnSave = action.payload;
+    },
+    setColorPickerColor: (state, action: PayloadAction<RgbaColor>) => {
+      state.colorPickerColor = action.payload;
+    },
+    commitColorPickerColor: (state) => {
+      state.brushColor = {
+        ...state.colorPickerColor,
+        a: state.brushColor.a,
+      };
+      state.tool = 'brush';
+    },
+    setMergedCanvas: (state, action: PayloadAction<CanvasImage>) => {
+      state.pastLayerStates.push(_.cloneDeep(state.layerState));
+
+      state.futureLayerStates = [];
+
+      state.layerState.objects = [action.payload];
+    },
+    resetCanvasInteractionState: (state) => {
+      state.cursorPosition = null;
+      state.isDrawing = false;
+      state.isMouseOverBoundingBox = false;
+      state.isMoveBoundingBoxKeyHeld = false;
+      state.isMoveStageKeyHeld = false;
+      state.isMovingBoundingBox = false;
+      state.isMovingStage = false;
+      state.isTransformingBoundingBox = false;
+    },
+    mouseLeftCanvas: (state) => {
+      state.cursorPosition = null;
+      state.isDrawing = false;
+      state.isMouseOverBoundingBox = false;
+      state.isMovingBoundingBox = false;
+      state.isTransformingBoundingBox = false;
+    },
+  },
+});
+
+export const {
+  addEraseRect,
+  addFillRect,
+  addImageToStagingArea,
+  addLine,
+  addPointToCurrentLine,
+  clearCanvasHistory,
+  clearMask,
+  commitColorPickerColor,
+  commitStagingAreaImage,
+  discardStagedImages,
+  fitBoundingBoxToStage,
+  mouseLeftCanvas,
+  nextStagingAreaImage,
+  prevStagingAreaImage,
+  redo,
+  resetCanvas,
+  resetCanvasInteractionState,
+  resetCanvasView,
+  resizeAndScaleCanvas,
+  resizeCanvas,
+  setBoundingBoxCoordinates,
+  setBoundingBoxDimensions,
+  setBoundingBoxPreviewFill,
+  setBoundingBoxScaleMethod,
+  setBrushColor,
+  setBrushSize,
+  setCanvasContainerDimensions,
+  setColorPickerColor,
+  setCursorPosition,
+  setDoesCanvasNeedScaling,
+  setInitialCanvasImage,
+  setInpaintReplace,
+  setIsDrawing,
+  setIsMaskEnabled,
+  setIsMouseOverBoundingBox,
+  setIsMoveBoundingBoxKeyHeld,
+  setIsMoveStageKeyHeld,
+  setIsMovingBoundingBox,
+  setIsMovingStage,
+  setIsTransformingBoundingBox,
+  setLayer,
+  setMaskColor,
+  setMergedCanvas,
+  setShouldAutoSave,
+  setShouldCropToBoundingBoxOnSave,
+  setShouldDarkenOutsideBoundingBox,
+  setShouldLockBoundingBox,
+  setShouldPreserveMaskedArea,
+  setShouldShowBoundingBox,
+  setShouldShowBrush,
+  setShouldShowBrushPreview,
+  setShouldShowCanvasDebugInfo,
+  setShouldShowCheckboardTransparency,
+  setShouldShowGrid,
+  setShouldShowIntermediates,
+  setShouldShowStagingImage,
+  setShouldShowStagingOutline,
+  setShouldSnapToGrid,
+  setShouldUseInpaintReplace,
+  setStageCoordinates,
+  setStageScale,
+  setTool,
+  toggleShouldLockBoundingBox,
+  toggleTool,
+  undo,
+  setScaledBoundingBoxDimensions,
+  setShouldRestrictStrokesToBox,
+} = canvasSlice.actions;
+
+export default canvasSlice.reducer;

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

@@ -0,0 +1,167 @@
+import * as InvokeAI from 'app/invokeai';
+import { IRect, Vector2d } from 'konva/lib/types';
+import { RgbaColor } from 'react-colorful';
+
+export const LAYER_NAMES_DICT = [
+  { key: 'Base', value: 'base' },
+  { key: 'Mask', value: 'mask' },
+];
+
+export const LAYER_NAMES = ['base', 'mask'] as const;
+
+export type CanvasLayer = typeof LAYER_NAMES[number];
+
+export const BOUNDING_BOX_SCALES_DICT = [
+  { key: 'Auto', value: 'auto' },
+  { key: 'Manual', value: 'manual' },
+  { key: 'None', value: 'none' },
+];
+
+export const BOUNDING_BOX_SCALES = ['none', 'auto', 'manual'] as const;
+
+export type BoundingBoxScale = typeof BOUNDING_BOX_SCALES[number];
+
+export type CanvasDrawingTool = 'brush' | 'eraser';
+
+export type CanvasTool = CanvasDrawingTool | 'move' | 'colorPicker';
+
+export type Dimensions = {
+  width: number;
+  height: number;
+};
+
+export type CanvasImage = {
+  kind: 'image';
+  layer: 'base';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  image: InvokeAI.Image;
+};
+
+export type CanvasMaskLine = {
+  layer: 'mask';
+  kind: 'line';
+  tool: CanvasDrawingTool;
+  strokeWidth: number;
+  points: number[];
+  clip?: IRect;
+};
+
+export type CanvasBaseLine = {
+  layer: 'base';
+  color?: RgbaColor;
+  kind: 'line';
+  tool: CanvasDrawingTool;
+  strokeWidth: number;
+  points: number[];
+  clip?: IRect;
+};
+
+export type CanvasFillRect = {
+  kind: 'fillRect';
+  layer: 'base';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: RgbaColor;
+};
+
+export type CanvasEraseRect = {
+  kind: 'eraseRect';
+  layer: 'base';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type CanvasObject =
+  | CanvasImage
+  | CanvasBaseLine
+  | CanvasMaskLine
+  | CanvasFillRect
+  | CanvasEraseRect;
+
+export type CanvasLayerState = {
+  objects: CanvasObject[];
+  stagingArea: {
+    images: CanvasImage[];
+    selectedImageIndex: number;
+  };
+};
+
+// type guards
+export const isCanvasMaskLine = (obj: CanvasObject): obj is CanvasMaskLine =>
+  obj.kind === 'line' && obj.layer === 'mask';
+
+export const isCanvasBaseLine = (obj: CanvasObject): obj is CanvasBaseLine =>
+  obj.kind === 'line' && obj.layer === 'base';
+
+export const isCanvasBaseImage = (obj: CanvasObject): obj is CanvasImage =>
+  obj.kind === 'image' && obj.layer === 'base';
+
+export const isCanvasFillRect = (obj: CanvasObject): obj is CanvasFillRect =>
+  obj.kind === 'fillRect' && obj.layer === 'base';
+
+export const isCanvasEraseRect = (obj: CanvasObject): obj is CanvasEraseRect =>
+  obj.kind === 'eraseRect' && obj.layer === 'base';
+
+export const isCanvasAnyLine = (
+  obj: CanvasObject
+): obj is CanvasMaskLine | CanvasBaseLine => obj.kind === 'line';
+
+export interface CanvasState {
+  boundingBoxCoordinates: Vector2d;
+  boundingBoxDimensions: Dimensions;
+  boundingBoxPreviewFill: RgbaColor;
+  boundingBoxScaleMethod: BoundingBoxScale;
+  brushColor: RgbaColor;
+  brushSize: number;
+  canvasContainerDimensions: Dimensions;
+  colorPickerColor: RgbaColor;
+  cursorPosition: Vector2d | null;
+  doesCanvasNeedScaling: boolean;
+  futureLayerStates: CanvasLayerState[];
+  inpaintReplace: number;
+  intermediateImage?: InvokeAI.Image;
+  isCanvasInitialized: boolean;
+  isDrawing: boolean;
+  isMaskEnabled: boolean;
+  isMouseOverBoundingBox: boolean;
+  isMoveBoundingBoxKeyHeld: boolean;
+  isMoveStageKeyHeld: boolean;
+  isMovingBoundingBox: boolean;
+  isMovingStage: boolean;
+  isTransformingBoundingBox: boolean;
+  layer: CanvasLayer;
+  layerState: CanvasLayerState;
+  maskColor: RgbaColor;
+  maxHistory: number;
+  minimumStageScale: number;
+  pastLayerStates: CanvasLayerState[];
+  scaledBoundingBoxDimensions: Dimensions;
+  shouldAutoSave: boolean;
+  shouldCropToBoundingBoxOnSave: boolean;
+  shouldDarkenOutsideBoundingBox: boolean;
+  shouldLockBoundingBox: boolean;
+  shouldPreserveMaskedArea: boolean;
+  shouldRestrictStrokesToBox: boolean;
+  shouldShowBoundingBox: boolean;
+  shouldShowBrush: boolean;
+  shouldShowBrushPreview: boolean;
+  shouldShowCanvasDebugInfo: boolean;
+  shouldShowCheckboardTransparency: boolean;
+  shouldShowGrid: boolean;
+  shouldShowIntermediates: boolean;
+  shouldShowStagingImage: boolean;
+  shouldShowStagingOutline: boolean;
+  shouldSnapToGrid: boolean;
+  shouldUseInpaintReplace: boolean;
+  stageCoordinates: Vector2d;
+  stageDimensions: Dimensions;
+  stageScale: number;
+  tool: CanvasTool;
+}

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

@@ -0,0 +1,171 @@
+import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
+import { RootState } from 'app/store';
+import * as InvokeAI from 'app/invokeai';
+import { v4 as uuidv4 } from 'uuid';
+import layerToDataURL from '../../util/layerToDataURL';
+import downloadFile from '../../util/downloadFile';
+import copyImage from '../../util/copyImage';
+import { getCanvasBaseLayer } from '../../util/konvaInstanceProvider';
+import {
+  addToast,
+  setCurrentStatus,
+  setIsCancelable,
+  setIsProcessing,
+  setProcessingIndeterminateTask,
+} from 'features/system/store/systemSlice';
+import { addImage } from 'features/gallery/store/gallerySlice';
+import { setMergedCanvas } from '../canvasSlice';
+import { CanvasState } from '../canvasTypes';
+
+type MergeAndUploadCanvasConfig = {
+  cropVisible?: boolean;
+  cropToBoundingBox?: boolean;
+  shouldSaveToGallery?: boolean;
+  shouldDownload?: boolean;
+  shouldCopy?: boolean;
+  shouldSetAsInitialImage?: boolean;
+};
+
+const defaultConfig: MergeAndUploadCanvasConfig = {
+  cropVisible: false,
+  cropToBoundingBox: false,
+  shouldSaveToGallery: false,
+  shouldDownload: false,
+  shouldCopy: false,
+  shouldSetAsInitialImage: true,
+};
+
+export const mergeAndUploadCanvas =
+  (config = defaultConfig): ThunkAction<void, RootState, unknown, AnyAction> =>
+  async (dispatch, getState) => {
+    const {
+      cropVisible,
+      cropToBoundingBox,
+      shouldSaveToGallery,
+      shouldDownload,
+      shouldCopy,
+      shouldSetAsInitialImage,
+    } = config;
+
+    dispatch(setProcessingIndeterminateTask('Exporting Image'));
+    dispatch(setIsCancelable(false));
+
+    const state = getState() as RootState;
+
+    const {
+      stageScale,
+      boundingBoxCoordinates,
+      boundingBoxDimensions,
+      stageCoordinates,
+    } = state.canvas as CanvasState;
+
+    const canvasBaseLayer = getCanvasBaseLayer();
+
+    if (!canvasBaseLayer) {
+      dispatch(setIsProcessing(false));
+      dispatch(setIsCancelable(true));
+
+      return;
+    }
+
+    const { dataURL, boundingBox: originalBoundingBox } = layerToDataURL(
+      canvasBaseLayer,
+      stageScale,
+      stageCoordinates,
+      cropToBoundingBox
+        ? { ...boundingBoxCoordinates, ...boundingBoxDimensions }
+        : undefined
+    );
+
+    if (!dataURL) {
+      dispatch(setIsProcessing(false));
+      dispatch(setIsCancelable(true));
+      return;
+    }
+
+    const formData = new FormData();
+
+    formData.append(
+      'data',
+      JSON.stringify({
+        dataURL,
+        filename: 'merged_canvas.png',
+        kind: shouldSaveToGallery ? 'result' : 'temp',
+        cropVisible,
+      })
+    );
+
+    const response = await fetch(window.location.origin + '/upload', {
+      method: 'POST',
+      body: formData,
+    });
+
+    const image = (await response.json()) as InvokeAI.ImageUploadResponse;
+
+    const { url, width, height } = image;
+
+    const newImage: InvokeAI.Image = {
+      uuid: uuidv4(),
+      category: shouldSaveToGallery ? 'result' : 'user',
+      ...image,
+    };
+
+    if (shouldDownload) {
+      downloadFile(url);
+      dispatch(
+        addToast({
+          title: 'Image Download Started',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        })
+      );
+    }
+
+    if (shouldCopy) {
+      copyImage(url, width, height);
+      dispatch(
+        addToast({
+          title: 'Image Copied',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        })
+      );
+    }
+
+    if (shouldSaveToGallery) {
+      dispatch(addImage({ image: newImage, category: 'result' }));
+      dispatch(
+        addToast({
+          title: 'Image Saved to Gallery',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        })
+      );
+    }
+
+    if (shouldSetAsInitialImage) {
+      dispatch(
+        setMergedCanvas({
+          kind: 'image',
+          layer: 'base',
+          ...originalBoundingBox,
+          image: newImage,
+        })
+      );
+      dispatch(
+        addToast({
+          title: 'Canvas Merged',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        })
+      );
+    }
+
+    dispatch(setIsProcessing(false));
+    dispatch(setCurrentStatus('Connected'));
+    dispatch(setIsCancelable(true));
+  };

frontend/src/features/canvas/util/calculateCoordinates.ts

@@ -0,0 +1,17 @@
+import { Vector2d } from 'konva/lib/types';
+
+const calculateCoordinates = (
+  containerWidth: number,
+  containerHeight: number,
+  containerX: number,
+  containerY: number,
+  contentWidth: number,
+  contentHeight: number,
+  scale: number
+): Vector2d => {
+  const x = containerWidth / 2 - (containerX + contentWidth / 2) * scale;
+  const y = containerHeight / 2 - (containerY + contentHeight / 2) * scale;
+  return { x, y };
+};
+
+export default calculateCoordinates;

frontend/src/features/canvas/util/calculateScale.ts

@@ -0,0 +1,14 @@
+const calculateScale = (
+  containerWidth: number,
+  containerHeight: number,
+  contentWidth: number,
+  contentHeight: number,
+  padding = 0.95
+): number => {
+  const scaleX = (containerWidth * padding) / contentWidth;
+  const scaleY = (containerHeight * padding) / contentHeight;
+  const scaleFit = Math.min(1, Math.min(scaleX, scaleY));
+  return scaleFit;
+};
+
+export default calculateScale;

frontend/src/features/canvas/util/constants.ts

@@ -0,0 +1,17 @@
+// bounding box anchor size
+export const TRANSFORMER_ANCHOR_SIZE = 15;
+
+// canvas wheel zoom exponential scale factor
+export const CANVAS_SCALE_BY = 0.999;
+
+// minimum (furthest-zoomed-out) scale
+export const MIN_CANVAS_SCALE = 0.1;
+
+// maximum (furthest-zoomed-in) scale
+export const MAX_CANVAS_SCALE = 20;
+
+// padding given to initial image/bounding box when stage view is reset
+export const STAGE_PADDING_PERCENTAGE = 0.95;
+
+export const COLOR_PICKER_SIZE = 30;
+export const COLOR_PICKER_STROKE_RADIUS = 10;

frontend/src/features/canvas/util/copyImage.ts

@@ -0,0 +1,34 @@
+/**
+ * Copies an image to the clipboard by drawing it to a canvas and then
+ * calling toBlob() on the canvas.
+ */
+const copyImage = (url: string, width: number, height: number) => {
+  const imageElement = document.createElement('img');
+
+  imageElement.addEventListener('load', () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d');
+
+    if (!context) return;
+
+    context.drawImage(imageElement, 0, 0);
+
+    canvas.toBlob((blob) => {
+      blob &&
+        navigator.clipboard.write([
+          new ClipboardItem({
+            [blob.type]: blob,
+          }),
+        ]);
+    });
+
+    canvas.remove();
+    imageElement.remove();
+  });
+
+  imageElement.src = url;
+};
+
+export default copyImage;

frontend/src/features/canvas/util/downloadFile.ts

@@ -0,0 +1,14 @@
+/**
+ * Downloads a file, given its URL.
+ */
+const downloadFile = (url: string) => {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = '';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  a.remove();
+};
+
+export default downloadFile;

frontend/src/features/canvas/util/floorCoordinates.ts

@@ -0,0 +1,10 @@
+import { Vector2d } from 'konva/lib/types';
+
+const floorCoordinates = (coord: Vector2d): Vector2d => {
+  return {
+    x: Math.floor(coord.x),
+    y: Math.floor(coord.y),
+  };
+};
+
+export default floorCoordinates;

frontend/src/features/canvas/util/generateMask.ts

@@ -0,0 +1,64 @@
+import Konva from 'konva';
+import { IRect } from 'konva/lib/types';
+import { CanvasMaskLine } from 'features/canvas/store/canvasTypes';
+
+/**
+ * Generating a mask image from InpaintingCanvas.tsx is not as simple
+ * as calling toDataURL() on the canvas, because the mask may be represented
+ * by colored lines or transparency, or the user may have inverted the mask
+ * display.
+ *
+ * So we need to regenerate the mask image by creating an offscreen canvas,
+ * drawing the mask and compositing everything correctly to output a valid
+ * mask image.
+ */
+const generateMask = (lines: CanvasMaskLine[], boundingBox: IRect): string => {
+  // create an offscreen canvas and add the mask to it
+  const { width, height } = boundingBox;
+
+  const offscreenContainer = document.createElement('div');
+
+  const stage = new Konva.Stage({
+    container: offscreenContainer,
+    width: width,
+    height: height,
+  });
+
+  const baseLayer = new Konva.Layer();
+  const maskLayer = new Konva.Layer();
+
+  // composite the image onto the mask layer
+  baseLayer.add(
+    new Konva.Rect({
+      ...boundingBox,
+      fill: 'white',
+    })
+  );
+
+  lines.forEach((line) =>
+    maskLayer.add(
+      new Konva.Line({
+        points: line.points,
+        stroke: 'black',
+        strokeWidth: line.strokeWidth * 2,
+        tension: 0,
+        lineCap: 'round',
+        lineJoin: 'round',
+        shadowForStrokeEnabled: false,
+        globalCompositeOperation:
+          line.tool === 'brush' ? 'source-over' : 'destination-out',
+      })
+    )
+  );
+
+  stage.add(baseLayer);
+  stage.add(maskLayer);
+
+  const dataURL = stage.toDataURL({ ...boundingBox });
+
+  offscreenContainer.remove();
+
+  return dataURL;
+};
+
+export default generateMask;

frontend/src/features/canvas/util/getScaledBoundingBoxDimensions.ts

@@ -0,0 +1,39 @@
+import { roundToMultiple } from 'common/util/roundDownToMultiple';
+import { Dimensions } from '../store/canvasTypes';
+
+const getScaledBoundingBoxDimensions = (dimensions: Dimensions) => {
+  const { width, height } = dimensions;
+
+  const scaledDimensions = { width, height };
+  const targetArea = 512 * 512;
+  const aspectRatio = width / height;
+  let currentArea = width * height;
+  let maxDimension = 448;
+  while (currentArea < targetArea) {
+    maxDimension += 64;
+    if (width === height) {
+      scaledDimensions.width = 512;
+      scaledDimensions.height = 512;
+      break;
+    } else {
+      if (aspectRatio > 1) {
+        scaledDimensions.width = maxDimension;
+        scaledDimensions.height = roundToMultiple(
+          maxDimension / aspectRatio,
+          64
+        );
+      } else if (aspectRatio < 1) {
+        scaledDimensions.height = maxDimension;
+        scaledDimensions.width = roundToMultiple(
+          maxDimension * aspectRatio,
+          64
+        );
+      }
+      currentArea = scaledDimensions.width * scaledDimensions.height;
+    }
+  }
+
+  return scaledDimensions;
+};
+
+export default getScaledBoundingBoxDimensions;

frontend/src/features/canvas/util/getScaledCursorPosition.ts

@@ -10,8 +10,8 @@ const getScaledCursorPosition = (stage: Stage) => {
   const scaledCursorPosition = stageTransform.invert().point(pointerPosition);
 
   return {
-    x: Math.floor(scaledCursorPosition.x),
-    y: Math.floor(scaledCursorPosition.y),
+    x: scaledCursorPosition.x,
+    y: scaledCursorPosition.y,
   };
 };
 

frontend/src/features/canvas/util/konvaInstanceProvider.ts

@@ -0,0 +1,16 @@
+import Konva from 'konva';
+
+let canvasBaseLayer: Konva.Layer | null = null;
+let canvasStage: Konva.Stage | null = null;
+
+export const setCanvasBaseLayer = (layer: Konva.Layer) => {
+  canvasBaseLayer = layer;
+};
+
+export const getCanvasBaseLayer = () => canvasBaseLayer;
+
+export const setCanvasStage = (stage: Konva.Stage) => {
+  canvasStage = stage;
+};
+
+export const getCanvasStage = () => canvasStage;

frontend/src/features/canvas/util/layerToDataURL.ts

@@ -0,0 +1,53 @@
+import Konva from 'konva';
+import { IRect, Vector2d } from 'konva/lib/types';
+
+const layerToDataURL = (
+  layer: Konva.Layer,
+  stageScale: number,
+  stageCoordinates: Vector2d,
+  boundingBox?: IRect
+) => {
+  const tempScale = layer.scale();
+
+  const relativeClientRect = layer.getClientRect({
+    relativeTo: layer.getParent(),
+  });
+
+  // Scale the canvas before getting it as a Blob
+  layer.scale({
+    x: 1 / stageScale,
+    y: 1 / stageScale,
+  });
+
+  const { x, y, width, height } = layer.getClientRect();
+  const dataURLBoundingBox = boundingBox
+    ? {
+        x: Math.round(boundingBox.x + stageCoordinates.x),
+        y: Math.round(boundingBox.y + stageCoordinates.y),
+        width: Math.round(boundingBox.width),
+        height: Math.round(boundingBox.height),
+      }
+    : {
+        x: Math.round(x),
+        y: Math.round(y),
+        width: Math.round(width),
+        height: Math.round(height),
+      };
+
+  const dataURL = layer.toDataURL(dataURLBoundingBox);
+
+  // Unscale the canvas
+  layer.scale(tempScale);
+
+  return {
+    dataURL,
+    boundingBox: {
+      x: Math.round(relativeClientRect.x),
+      y: Math.round(relativeClientRect.y),
+      width: Math.round(width),
+      height: Math.round(height),
+    },
+  };
+};
+
+export default layerToDataURL;

frontend/src/features/canvas/util/roundDimensionsTo64.ts

@@ -0,0 +1,11 @@
+import { roundToMultiple } from 'common/util/roundDownToMultiple';
+import { Dimensions } from '../store/canvasTypes';
+
+const roundDimensionsTo64 = (dimensions: Dimensions): Dimensions => {
+  return {
+    width: roundToMultiple(dimensions.width, 64),
+    height: roundToMultiple(dimensions.height, 64),
+  };
+};
+
+export default roundDimensionsTo64;

frontend/src/features/canvas/util/roundToHundreth.ts

@@ -0,0 +1,5 @@
+const roundToHundreth = (val: number): number => {
+  return Math.round(val * 100) / 100;
+};
+
+export default roundToHundreth;

frontend/src/features/gallery/components/CurrentImageButtons.scss

@@ -13,11 +13,18 @@
     max-width: 25rem;
   }
 
+  .current-image-send-to-popover {
+    .invokeai__button {
+      place-content: start;
+    }
+  }
+
   .chakra-popover__popper {
     z-index: 11;
   }
 
   .delete-image-btn {
+    background-color: var(--btn-base-color);
     svg {
       fill: var(--btn-delete-image);
     }