init

extensions/openOutpaint-webUI-extension/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 tim h
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

extensions/openOutpaint-webUI-extension/README.MD

@@ -0,0 +1,22 @@
+In this repo lives a mighty handy little wrapper for adding [openOutpaint](https://github.com/zero01101/openOutpaint) to [AUTOMATIC1111 webUI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) directly as a native extension.
+
+Please see the respective READMEs and wikis for each of the above projects for a more comprehensive understanding of their feature sets.
+
+This extension also adds buttons to send output from webUI txt2img and img2img tools directly to openOutpaint which will also include the prompts used for convenience.
+
+**_2023-01-23: new `--lock-oo-submodule` commandline argument if you want to roll back to a previous version of openOutpaint and keep it there - be sure to install/run openOutpaint extension at least once before enabling this flag_**
+
+**Note: Requires `--api` flag enabled in your webui-user launch script!**
+
+**_FURTHER NOTE: the commandline flag `--gradio-debug` disables custom API routes and completely breaks openOutpaint. please remove it from your COMMANDLINE_ARGS before running openOutpaint._**
+
+**_EVEN FURTHER NOTE: [PLEASE SEE DOCUMENTATION REGARDING NEW HRfix FEATURES](https://github.com/zero01101/openOutpaint/wiki/Manual#hrfix) IMPLEMENTED AS OF webUI COMMIT [ef27a18](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/ef27a18b6b7cb1a8eebdc9b2e88d25baf2c2414d)_**
+
+![image](https://user-images.githubusercontent.com/1649724/209033089-fb908d92-0c52-4165-a6a3-e6e9f28b032d.png)
+
+### surprising incompatibilities
+
+**_COLAB USERS: you may experience issues installing openOutpaint (and other webUI extensions) - there is a workaround that has been discovered and tested against [TheLastBen's fast-stable-diffusion](https://github.com/TheLastBen/fast-stable-diffusion). Please see [this discussion](https://github.com/TheLastBen/fast-stable-diffusion/discussions/1161) containing the workaround, which requires adding a command into the final cell of the colab, as well as setting `Enable_API` to `True`._**
+
+- [microsoft editor extension for chrome/edge seems to disable the overmask slider](https://github.com/zero01101/openOutpaint/discussions/88#discussioncomment-4498341)
+- ~~[duckduckgo privacy extension for firefox breaks outpainting, resulting in pure black output](https://github.com/zero01101/openOutpaint-webUI-extension/issues/3#issuecomment-1367694000) - add an exception for your openOutpaint host (likely localhost or 127.0.0.1)~~ should be fixed as of [b128943](https://github.com/zero01101/openOutpaint/commit/b128943f0c94970600fdc1c98bfec22de619866f)

extensions/openOutpaint-webUI-extension/app/.devtools/README.md

@@ -0,0 +1,12 @@
+# openOutpaint DevTools
+
+This is a folder containing some handy scripts to help developers to automate workflows and write code in openOutpaint's standards.
+All scripts must be run from the root of the project.
+
+## `sethooks.sh` and `sethooks.ps1` scripts
+
+These scripts will setup git hooks for this project. Hooks are mainly for cache busting purposes for now. It is recommended to run this script and setup hooks before any commits are made.
+
+## `lint.sh` script
+
+Uses `npm` to install prettier and lint javascript, html and css files according to `.prettierrc.json`. This script will install node modules locally, so editors with prettier support are recommended over this script.

extensions/openOutpaint-webUI-extension/app/.devtools/lint.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/bash
+
+if ! which npx 2>&1 > /dev/null; then
+    echo "[lint] npm/npx is not installed"
+    exit 1
+fi
+
+npx prettier > /dev/null || npm install prettier && echo "[lint] We have 'prettier'"
+npx eslint > /dev/null || npm install eslint && echo "[lint] We have 'eslint'"
+npx prettier-eslint > /dev/null || npm install prettier-eslint-cli && echo "[lint] We have 'prettier-eslint'"
+
+echo "[lint] Linting JavaScript files..."
+npx prettier-eslint --write "**/*.js"
+echo "[lint] Linting HTML files..."
+npx prettier-eslint --write "**/*.html"
+echo "[lint] Linting CSS files..."
+npx prettier-eslint --write "**/*.css"
+echo "[lint] Linting MarkDown files"
+npx prettier-eslint --write "**/*.md"
+
+echo "[lint] Finished Linting."

extensions/openOutpaint-webUI-extension/app/.devtools/sethooks.ps1

@@ -0,0 +1,4 @@
+git config core.eol lf
+git config core.autocrlf input
+
+git config core.hooksPath .githooks/windows

extensions/openOutpaint-webUI-extension/app/.devtools/sethooks.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/sh
+
+git config core.hooksPath .githooks/linux

extensions/openOutpaint-webUI-extension/app/.devtools/updatehashes.ps1

@@ -0,0 +1,27 @@
+# Updates html files with cache busting urls including file hashes.
+
+# Actual file processing
+$htmlfiles = Get-ChildItem -Path . -Recurse -Filter "*.html" | Where {$_.FullName -notlike "*\node_modules\*"} | Resolve-path -relative
+foreach ($htmlfile in $htmlfiles) {
+    Write-Host "[info] Processing '${htmlfile}' for cache busting..." -ForegroundColor Blue
+
+    $resfiles = (@(Get-ChildItem -Path . -Recurse -Filter "*.css") + (Get-ChildItem -Path . -Recurse -Filter "*.js")) | Resolve-Path -relative
+
+    if ($args[0] -eq "gitadd") {
+        $resfiles = (git status -s | Select-String -Pattern "[A-Z]  .+") | ForEach-Object { -split $_.Line | Select-Object -Last 1 }
+    }
+
+    foreach ($resfile in $resfiles) {
+        $resfile = $resfile -replace '\\', '/' -replace '\./', ''
+        # Check if resource is used in html file
+        if ($null -ne (Select-String -Path $htmlfile -Pattern $resfile)) {
+            $hash = (Get-FileHash $resfile -Algorithm SHA1).Hash
+            
+            # This is just for cache busting...
+            # If 7 first characters of SHA1 is okay for git, it should be more than enough for us
+            $hash = $hash.Substring(0, 7).ToLower()
+
+            (Get-Content -Raw -Path $htmlfile).replace('\r\n', "\n") -replace "$resfile(\?v=[a-z0-9]+)?", "${resfile}?v=$hash" | Set-Content $htmlfile
+        }
+    }
+}

extensions/openOutpaint-webUI-extension/app/.devtools/updatehashes.sh

@@ -0,0 +1,128 @@
+#!/usr/bin/bash
+#
+# Updates html files with cache busting urls including file hashes.
+
+# Setup colors
+# Reset
+Color_Off='\033[0m'       # Text Reset
+
+# Regular Colors
+Black='\033[0;30m'        # Black
+Red='\033[0;31m'          # Red
+Green='\033[0;32m'        # Green
+Yellow='\033[0;33m'       # Yellow
+Blue='\033[0;34m'         # Blue
+Purple='\033[0;35m'       # Purple
+Cyan='\033[0;36m'         # Cyan
+White='\033[0;37m'        # White
+
+# Bold
+BBlack='\033[1;30m'       # Black
+BRed='\033[1;31m'         # Red
+BGreen='\033[1;32m'       # Green
+BYellow='\033[1;33m'      # Yellow
+BBlue='\033[1;34m'        # Blue
+BPurple='\033[1;35m'      # Purple
+BCyan='\033[1;36m'        # Cyan
+BWhite='\033[1;37m'       # White
+
+# Underline
+UBlack='\033[4;30m'       # Black
+URed='\033[4;31m'         # Red
+UGreen='\033[4;32m'       # Green
+UYellow='\033[4;33m'      # Yellow
+UBlue='\033[4;34m'        # Blue
+UPurple='\033[4;35m'      # Purple
+UCyan='\033[4;36m'        # Cyan
+UWhite='\033[4;37m'       # White
+
+# Background
+On_Black='\033[40m'       # Black
+On_Red='\033[41m'         # Red
+On_Green='\033[42m'       # Green
+On_Yellow='\033[43m'      # Yellow
+On_Blue='\033[44m'        # Blue
+On_Purple='\033[45m'      # Purple
+On_Cyan='\033[46m'        # Cyan
+On_White='\033[47m'       # White
+
+# High Intensity
+IBlack='\033[0;90m'       # Black
+IRed='\033[0;91m'         # Red
+IGreen='\033[0;92m'       # Green
+IYellow='\033[0;93m'      # Yellow
+IBlue='\033[0;94m'        # Blue
+IPurple='\033[0;95m'      # Purple
+ICyan='\033[0;96m'        # Cyan
+IWhite='\033[0;97m'       # White
+
+# Bold High Intensity
+BIBlack='\033[1;90m'      # Black
+BIRed='\033[1;91m'        # Red
+BIGreen='\033[1;92m'      # Green
+BIYellow='\033[1;93m'     # Yellow
+BIBlue='\033[1;94m'       # Blue
+BIPurple='\033[1;95m'     # Purple
+BICyan='\033[1;96m'       # Cyan
+BIWhite='\033[1;97m'      # White
+
+# High Intensity backgrounds
+On_IBlack='\033[0;100m'   # Black
+On_IRed='\033[0;101m'     # Red
+On_IGreen='\033[0;102m'   # Green
+On_IYellow='\033[0;103m'  # Yellow
+On_IBlue='\033[0;104m'    # Blue
+On_IPurple='\033[0;105m'  # Purple
+On_ICyan='\033[0;106m'    # Cyan
+On_IWhite='\033[0;107m'   # White
+
+# Check requirements
+if ! which echo > /dev/null
+then
+    exit -1
+fi
+
+required_programs=(find grep cut sed sha1sum)
+
+for program in $required_programs
+do
+    if ! which $program > /dev/null
+    then
+        echo -e "${Red}[error] Requires '$program' command to be installed${Color_Off}"
+        exit -1
+    fi
+done
+
+# Actual file processing
+for htmlfile in $(find -type f -name \*.html -not -path "./node_modules/*")
+do
+    echo -e "${BIBlue}[info] Processing '${htmlfile}' for cache busting...${Color_Off}"
+    
+    LIST=$(find -type f -regex '.*\.css\|.*\.js' -not -path "./node_modules/*" | sed 's/\.\///g')
+
+    if [ "$1" = "gitadd" ]
+    then
+        LIST=$(git status -s | grep -oE "[A-Z]  .+" | cut -d" " -f3)
+    fi
+
+    for resourcefile in $LIST
+    do
+        # Check if resource is used in html file
+        resourceusage=$(grep -i "$resourcefile" "$htmlfile")
+        if [ $? -eq 0 ]
+        then
+            # This is just for cache busting...
+            # If 7 first characters of SHA1 is okay for git, it should be more than enough for us
+            hash="$(sha1sum $resourcefile | cut -d' ' -f1 | head -c 7)"
+            
+            # Check if resource hash is already correct
+            if ! echo "$resourceusage" | grep -i "=$hash\"" > /dev/null
+            then
+                escaped=$(echo $resourcefile | sed 's/\//\\\//g' | sed 's/\./\\./g')
+                sed -Ei "s/${escaped}(\?v=[a-z0-9]+)?/${escaped}?v=${hash}/g" "$htmlfile"
+                
+                echo -e "${BIBlue}[info]${Color_Off} Updated resource ${resourcefile} to hash ${hash}"
+            fi
+        fi
+    done
+done

extensions/openOutpaint-webUI-extension/app/.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

extensions/openOutpaint-webUI-extension/app/.githooks/linux/pre-commit

@@ -0,0 +1,9 @@
+#!/bin/sh
+#
+# Script to perform some basic operations to the code before committing.
+
+# Adds file hashes to html script imports for cache busting purposes
+sh .devtools/updatehashes.sh gitadd
+
+# Adds file to current commit
+git add "**.html"

extensions/openOutpaint-webUI-extension/app/.githooks/windows/pre-commit

@@ -0,0 +1,9 @@
+#!/bin/sh
+#
+# Script to perform some basic operations to the code before committing.
+
+# Adds file hashes to html script imports for cache busting purposes
+powershell .devtools/updatehashes.ps1 gitadd
+
+# Adds file to current commit
+git add "**.html"

extensions/openOutpaint-webUI-extension/app/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,91 @@
+name: Bug Report
+description: You think somethings is broken in the UI
+title: "[Bug]: "
+labels: ["bug"]
+assignees: zero01101, seijihariki
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        *Please complete this form with as much detailed information as possible.*
+  - type: textarea
+    id: what-did
+    attributes:
+      label: What happened?
+      description: What happened that you weren't expecting, or what happened incorrectly?
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce the problem
+      description: Please provide us with precise step-by-step information on how to reproduce the issue
+      value: |
+        1. Go to .... 
+        2. Press ....
+        3. ... [etc]
+    validations:
+      required: true
+  - type: textarea
+    id: what-should
+    attributes:
+      label: What should have happened?
+      description: Describe what you believe should have ocurred instead of what actually happened.
+    validations:
+      required: true
+  - type: input
+    id: commit
+    attributes:
+      label: Commit where the problem happens
+      description: Which commit are you running? (i.e. https://github.com/zero01101/openOutpaint/commit/bf21c19ae352800d9e1b37bb490e817b6848e533, bf21c19)
+    validations:
+      required: true
+  - type: dropdown
+    id: platforms
+    attributes:
+      label: What platforms do you use to access openOutpaint?
+      multiple: true
+      options:
+        - Windows
+        - Linux
+        - MacOS
+        - iOS
+        - Android
+        - Other/Cloud
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers do you use to access the UI ?
+      multiple: true
+      options:
+        - Mozilla Firefox
+        - Google Chrome
+        - Brave
+        - Apple Safari
+        - Microsoft Edge
+        - Opera
+        - Other (please list in additional information)
+    validations:
+      required: true
+  - type: textarea
+    id: browser-extensions
+    attributes:
+      label: Browser Extensions/Addons
+      description: Please list all browser extensions/addons you have running.  Some have been known to cause issues with openOutpaint.
+    validations:
+      required: true
+  - type: textarea
+    id: webui-commandline
+    attributes:
+      label: AUTOMATIC1111 webUI Commandline Arguments
+      description: Please list all used commandline arguments passed to A1111 webUI (i.e. `--api`).
+    validations:
+      required: true
+  - type: textarea
+    id: misc
+    attributes:
+      label: Additional information
+      description: Please provide us with any relevant additional information, context, screenshots, etc.

extensions/openOutpaint-webUI-extension/app/.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,48 @@
+name: Feature request
+description: Suggest an idea for this project
+title: "[Feature Request]: "
+labels: ["enhancement"]
+assignees: zero01101, seijihariki
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        *Please complete this form with as much detailed information as possible.*
+  - type: textarea
+    id: related
+    attributes:
+      label: Is your feature request related to a problem? Please describe.
+      description: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+    validations:
+      required: true
+  - type: textarea
+    id: feature
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen, preferably with example use-case scenario.
+    validations:
+      required: true
+  - type: textarea
+    id: workflow
+    attributes:
+      label: Proposed workflow
+      description: Please provide us with step by step information on how you'd like the feature to be accessed and used
+      value: |
+        1. Go to .... 
+        2. Press ....
+        3. ...
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: true
+  - type: textarea
+    id: misc
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.

extensions/openOutpaint-webUI-extension/app/.github/workflows/autoformat.yml

@@ -0,0 +1,22 @@
+name: Prettier Autoformatting
+on:
+  push:
+    branches:
+      - "main"
+      - "testing"
+  pull_request:
+    branches: [main, testing]
+    types: [opened, synchronize, closed]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Prettify
+        uses: creyD/[email protected]
+        with:
+          prettier_options: --write **/*.{js,html,css,md}

extensions/openOutpaint-webUI-extension/app/.github/workflows/cachebusting.yml

@@ -0,0 +1,26 @@
+name: Cache Busting
+on:
+  push:
+    branches:
+      - "main"
+      - "testing"
+  pull_request:
+    branches: [main, testing]
+    types: [opened, synchronize, closed]
+
+jobs:
+  update_hashes:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+      - name: Update hashes in html files
+        run: bash .devtools/updatehashes.sh
+      - name: Commit
+        uses: EndBug/[email protected]
+        with:
+          committer_name: Github Actions
+          committer_email: [email protected]
+          message: "Fixed resource hashes"

extensions/openOutpaint-webUI-extension/app/.gitignore

@@ -0,0 +1,12 @@
+.vscode/*
+
+# Key for embedding
+key.json
+
+# NPM things
+package.json
+package-lock.json
+node_modules/
+
+# Yarn things
+yarn.lock

extensions/openOutpaint-webUI-extension/app/.prettierrc.json

@@ -0,0 +1,19 @@
+{
+	"arrowParens": "always",
+	"bracketSameLine": true,
+	"bracketSpacing": false,
+	"embeddedLanguageFormatting": "auto",
+	"htmlWhitespaceSensitivity": "ignore",
+	"insertPragma": false,
+	"jsxSingleQuote": false,
+	"printWidth": 80,
+	"proseWrap": "preserve",
+	"quoteProps": "as-needed",
+	"requirePragma": false,
+	"semi": true,
+	"singleQuote": false,
+	"tabWidth": 2,
+	"trailingComma": "es5",
+	"useTabs": true,
+	"vueIndentScriptAndStyle": false
+}

extensions/openOutpaint-webUI-extension/app/CONTRIBUTING.md

@@ -0,0 +1,63 @@
+# Contributing to openOutpaint
+
+We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
+
+- Reporting a bug
+- Discussing the current state of the code
+- Submitting a fix
+- Proposing new features
+- Becoming a maintainer
+
+## We Develop with Github
+
+We use github to host code, to track issues and feature requests, as well as accept pull requests.
+
+## We Use [Github Flow](https://guides.github.com/introduction/flow/index.html), So All Code Changes Happen Through Pull Requests
+
+Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests:
+
+1. Fork the repo and create your branch from `main` or `testing`.
+2. Setup [commit hooks](https://github.com/zero01101/openOutpaint/tree/main/.devtools) for automatic calculation of cache busting hashes for resources.
+3. Please add comments when reasonable, and when possible, use [JSDoc](https://jsdoc.app/) for documenting types. Lack of this will not prevent your pull being merged, but it would be nice to have.
+4. If you've added code that should be tested please pull into `testing`. For documentation and smaller fixes, a pull request directly to `main` should be okay, unless it pertains to changes only present in `testing`.
+5. Create a pull request with a short description of what you did. Thanks for your contribution!
+
+## Any contributions you make will be under the MIT Software License
+
+In short, when you submit code changes, your submissions are understood to be under the same [MIT License](http://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern.
+
+## Report bugs using Github's [issues](https://github.com/zero01101/openOutpaint/issues)
+
+We use GitHub issues to track public bugs. Report a bug by [opening a new issue](https://github.com/zero01101/openOutpaint/issues); it's that easy!
+
+## Write bug reports with detail, background, and sample code
+
+If possible, bug reports should have the most detail it is reasonable to have for the bug in question. If you are more versed in javascript, pointing out the issue in code, or even creating a pull request is also appreciated!
+
+**Great Bug Reports** tend to have:
+
+- A quick summary and/or background
+- Steps to reproduce
+  - Be specific!
+  - Give sample code or screenshots if you can!
+- What you expected would happen
+- What actually happens
+- Notes (possibly including why you think this might be happening, or stuff you tried that didn't work)
+
+We have some issue templates that are, admittedly, basically github's default templates. You can and should use that as a guide. Sometimes some fields may not be applicable to your particular report. In this case, things such as _alternative solutions_ don't need to be included.
+
+People _love_ thorough bug reports. I'm not even kidding.
+
+## Use a Consistent Coding Style
+
+For styling, we are currently using prettier for linting. And that's basically it. We are currently using tabs and some other defaults defined in the [.prettierrc.json](https://github.com/zero01101/openOutpaint/blob/main/.prettierrc.json) file. We don't use npm on our project, so you would have to install prettier and prettier-eslint locally. We have a handy [lint.sh](https://github.com/zero01101/openOutpaint/blob/main/lint.sh) script you can run, but it is recommended to use an IDE with prettier support for more practical use.
+
+Any suggestions regarding change of styles or style guides (Airbnb, Google, or whatnot) are welcome, as the current file is quite simplistic.
+
+## License
+
+By contributing, you agree that your contributions will be licensed under its MIT License.
+
+## References
+
+This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/a9316a723f9e918afde44dea68b5f9f39b7d9b00/CONTRIBUTING.md) and based on [this template from briandk](https://gist.github.com/briandk/3d2e8b3ec8daf5a27a62).

extensions/openOutpaint-webUI-extension/app/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 tim h
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

extensions/openOutpaint-webUI-extension/app/README.md

@@ -0,0 +1,92 @@
+# hello there 🐠
+
+[openOutpaint creating some undersea... well, stuff](https://user-images.githubusercontent.com/1649724/205455599-7817812e-5b50-4c96-807e-268b40fa2fd7.mp4)
+
+_silly demo example current as of [9b174d6](https://github.com/zero01101/openOutpaint/commit/9b174d66c9b9d83ce8657128c97f917b473b13a9) / v0.0.8 / 2022-12-03_ //TODO UPDATE SRSLY
+
+this is a completely vanilla javascript and html canvas outpainting convenience doodad built for the API optionally exposed by [AUTOMATIC1111's stable diffusion webUI](https://github.com/AUTOMATIC1111/stable-diffusion-webui), operating similarly to a few others that are probably more well-known. this simply offers an alternative for my following vain desires:
+
+- avoiding the overhead of an additional virtual python environment or impacting a pre-existing one
+- operates against the API exposed by A1111's webUI
+- no external dependencies, extremely boring vanilla
+- no external connectivity, self-hosted and offline
+- unobfuscated (cough cough)
+- <a name="terrible"></a>i am terrible at javascript and should probably correct that
+- i have never used html canvas for anything before and should try it out
+
+## features
+
+- SDXL "support"! (please check outpaint/inpaint fill types in the context menus and fiddle with denoising a LOT for img2img, it's touchy)
+- [now available as an extension for webUI!](https://github.com/zero01101/openOutpaint-webUI-extension) you can find it under the default "available" section in the webUI _extensions_ tab
+  - **_NOTE: extension still requires `--api` flag in webui-user launch script_**
+- intuitive, convenient outpainting - that's like the whole point right
+- queueable, cancelable dreams - just start a'clickin' all over the place
+- arbitrary dream reticle size - draw the rectangle of your dreams
+- an [effectively infinite](https://github.com/zero01101/openOutpaint/pull/108), resizable, scalable canvas for you to paint all over
+  - **_NOTE: v0.0.10 introduces a new "camera control" modifier key - hold [`CTRL`] and use the scrollwheel to zoom (scroll the wheel or use the two-finger vertical gesture on, uh, modern touchpads) and pan (hold the scrollwheel button, or if you don't have one, left-click button) around the canvas_**
+- extremely limited, janky support for a shockingly restrictive list of A1111 extensions including controlnet inpainting for legitimately magic promptless inpainting and outpainting ([a](https://github.com/Mikubill/sd-webui-controlnet/discussions/1464), [b](https://github.com/Mikubill/sd-webui-controlnet/discussions/1143), [c](https://github.com/Mikubill/sd-webui-controlnet/discussions/1597)) and in-line reference preprocessors for keeping existing style while replacing things (reference requires at least 2 controlnet units enabled in A1111 settings), as well as a very very basic dynamic-prompts-on-or-off toggle
+  - **_NOTE: this is_ JANKY, _pull requests greatly welcomed lol_**
+- a very nicely functional and familiar layer system
+- save, load, import, and export workspaces - includes all your layers, history, canvas size, you name it!
+- inpainting/touchup mask brush
+- webUI script support (but you gotta [_find it_](https://github.com/zero01101/openOutpaint/wiki/Manual))
+- prompt history panel
+- optional (visibly) inverted mask mode - red masks get mutated, blue masks stay the same, but you can't take both pills at once
+- inpainting color brush to bring out your inner vincent van bob ross
+- dedicated img2img tool with optional border masking for enhanced output coherence with existing subject matter
+- marquee select tool to select regions and arbitrarily scale, rotate, create stamps, move chunks, peek at lower layers, do all sorts of damage
+- optionally decoupled cursor size and output resolution
+- interrogate tool
+- floating control panel to easily change models/samplers/steps/prompts/CFG/etc options for each dream summoned from the latent void _(NOTE: model switching requires A1111 webUI to be on commit [5a6387e](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/5a6387e189dc365c47a7979b9040d5b6fdd7ba43) or more recent)_
+- floating toolbox with handy keyboard shortcuts
+- optional grid snapping for precision
+- optional hi-res fix for blank/txt2img dreams
+  - **_NOTE: as of v0.0.12.5/webUI commit [ef27a18](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/ef27a18b6b7cb1a8eebdc9b2e88d25baf2c2414d), HRfix has been COMPLETELY reworked and no longer works remotely the same, thus openOutpaint's implementation is no longer compatible with versions of A1111 predating that. You will be alerted to the outdated webUI and the HRfix option will become limited to simply using [reticle dimensions / 2] in this event. Please see the [manual entry](https://github.com/zero01101/openOutpaint/wiki/Manual#hrfix) regarding HRfix and its available options._**
+- optional overmasking for potentially better seams between outpaints - set overmask px value to 0 to disable the feature
+- import arbitrary images and rotate/scale/stamp on the canvas whenever, wherever you'd like
+- upscaler support for final output images
+- saves your preferences/imported images to browser localstorage for maximum convenience
+- reset to defaults button to unsave your preferences if things go squirrely
+- floating navigable undo/redo palette with ctrl+z/y keyboard shortcuts for additional maximum convenience and desquirreliness
+- optional generate-ahead function to keep crankin' out the dreams while you look through the ones that already exist
+- _all this and much more for the low, low price of simply already owning an expensive GPU!_
+
+## operation
+
+**_NOTE: [PLEASE SEE DOCUMENTATION REGARDING NEW HRfix FEATURES](https://github.com/zero01101/openOutpaint/wiki/Manual#hrfix) IMPLEMENTED AS OF webUI COMMIT [ef27a18](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/ef27a18b6b7cb1a8eebdc9b2e88d25baf2c2414d)_**
+
+### prerequisities
+
+you'll obviously need A1111's webUI installed before you can use this, thus you're presumed to have an operational python install up and running to boot.
+
+A1111 webUI must be launched with the `--api` flag enabled, and the `--cors-allow-origins=` flag set with the host where openOutpaint will be running.
+
+**_NOTE: the commandline flag `--gradio-debug` disables custom API routes and completely breaks openOutpaint. please remove it from your COMMANDLINE_ARGS before running openOutpaint._**
+
+### surprising incompatibilities
+
+**_COLAB USERS: you may experience issues installing openOutpaint (and other webUI extensions) - there is a workaround that has been discovered and tested against [TheLastBen's fast-stable-diffusion](https://github.com/TheLastBen/fast-stable-diffusion). Please see [this discussion](https://github.com/TheLastBen/fast-stable-diffusion/discussions/1161) containing the workaround, which requires adding a command into the final cell of the colab, as well as setting `Enable_API` to `True`._**
+
+If anything goes wrong with openOutpaint, try running it on another browser and disable all extensions and try again. If a new incompatible extension is found, please open an issue so we can notify other users of extension incompatibilities.
+
+- [microsoft editor extension for chrome/edge seems to disable the overmask slider](https://github.com/zero01101/openOutpaint/discussions/88#discussioncomment-4498341)
+- ~~[duckduckgo privacy extension for firefox breaks outpainting, resulting in pure black output](https://github.com/zero01101/openOutpaint-webUI-extension/issues/3#issuecomment-1367694000) - add an exception for your openOutpaint host (likely localhost or 127.0.0.1)~~ should be fixed as of [b128943](https://github.com/zero01101/openOutpaint/commit/b128943f0c94970600fdc1c98bfec22de619866f)
+- ~~[same for dark reader](https://github.com/zero01101/openOutpaint-webUI-extension/issues/3#issuecomment-1367838766)~~ same for dark reader
+
+### quickstart speedrun
+
+1. edit your `cors-allow-origins` to include https://zero01101.github.io and run webUI
+2. go to https://zero01101.github.io/openOutpaint/ and fill in the host value with your webUI API address
+3. click things and do stuff
+
+### step-by-step actually useful instructions
+
+please see the [quickstart wiki article](https://github.com/zero01101/openOutpaint/wiki/SBS-Guided-Example) and comprehensive [manual](https://github.com/zero01101/openOutpaint/wiki/Manual).
+
+## pull requests/bug reports
+
+please do! see [contributing](https://github.com/zero01101/openOutpaint/blob/main/CONTRIBUTING.md) for details!
+
+## warranty
+
+[lmao](https://github.com/moyix/fauxpilot#support-and-warranty)

extensions/openOutpaint-webUI-extension/app/css/colors.css

@@ -0,0 +1,10 @@
+:root {
+	--c-primary: #2c3333;
+	--c-disabled: rgb(81, 81, 81);
+	--c-hover: hsl(180, 7%, 30%);
+	--c-active: hsl(180, 7%, 25%);
+	--c-primary-accent: hsl(180, 7%, 40%);
+	--c-secondary: #395b64;
+	--c-accent: #a5c9ca;
+	--c-text: #e7f6f2;
+}

extensions/openOutpaint-webUI-extension/app/css/fonts.css

@@ -0,0 +1,4 @@
+@font-face {
+	font-family: "Open Sans", sans-serif;
+	src: url("../res/fonts/OpenSans.ttf") format("truetype");
+}

extensions/openOutpaint-webUI-extension/app/css/icons.css

@@ -0,0 +1,198 @@
+.ui.inline-icon {
+	position: relative;
+
+	display: flex;
+}
+
+.ui.inline-icon::after {
+	content: "";
+	display: block;
+
+	position: absolute;
+
+	box-sizing: border-box;
+
+	margin: auto;
+	top: 15%;
+	bottom: 15%;
+
+	mask-size: contain;
+	-webkit-mask-size: contain;
+	mask-repeat: no-repeat;
+	-webkit-mask-repeat: no-repeat;
+
+	max-height: 70%;
+	aspect-ratio: 1;
+
+	left: 0;
+	right: 0;
+
+	background-color: var(--c-text);
+}
+
+.ui.inline-icon.icon-eye-off::after,
+.ui.icon > .icon-eye-off {
+	-webkit-mask-image: url("../res/icons/eye-off.svg");
+	mask-image: url("../res/icons/eye-off.svg");
+}
+
+.ui.icon > .icon-eye {
+	-webkit-mask-image: url("../res/icons/eye.svg");
+	mask-image: url("../res/icons/eye.svg");
+}
+
+.ui.icon > .icon-file-plus {
+	-webkit-mask-image: url("../res/icons/file-plus.svg");
+	mask-image: url("../res/icons/file-plus.svg");
+}
+
+.ui.inline-icon.icon-flip-horizontal::after,
+.ui.icon > .icon-flip-horizontal {
+	-webkit-mask-image: url("../res/icons/flip-horizontal.svg");
+	mask-image: url("../res/icons/flip-horizontal.svg");
+}
+
+.ui.inline-icon.icon-flip-vertical::after,
+.ui.icon > .icon-flip-vertical {
+	-webkit-mask-image: url("../res/icons/flip-vertical.svg");
+	mask-image: url("../res/icons/flip-vertical.svg");
+}
+
+.ui.icon > .icon-file-x {
+	-webkit-mask-image: url("../res/icons/file-x.svg");
+	mask-image: url("../res/icons/file-x.svg");
+}
+
+.ui.icon > .icon-chevron-down {
+	-webkit-mask-image: url("../res/icons/chevron-down.svg");
+	mask-image: url("../res/icons/chevron-down.svg");
+}
+
+.ui.icon > .icon-chevron-up {
+	-webkit-mask-image: url("../res/icons/chevron-up.svg");
+	mask-image: url("../res/icons/chevron-up.svg");
+}
+.ui.icon > .icon-chevron-first {
+	-webkit-mask-image: url("../res/icons/chevron-first.svg");
+	mask-image: url("../res/icons/chevron-first.svg");
+}
+
+.ui.icon > .icon-chevron-flat-down {
+	-webkit-mask-image: url("../res/icons/chevron-first.svg");
+	mask-image: url("../res/icons/chevron-first.svg");
+	transform: rotate(-90deg);
+}
+
+.ui.icon > .icon-scroll {
+	-webkit-mask-image: url("../res/icons/scroll.svg");
+	mask-image: url("../res/icons/scroll.svg");
+}
+
+.ui.icon > .icon-settings {
+	-webkit-mask-image: url("../res/icons/settings.svg");
+	mask-image: url("../res/icons/settings.svg");
+}
+
+.ui.icon > .icon-unzoom {
+	-webkit-mask-image: url("../res/icons/scaling.svg");
+	mask-image: url("../res/icons/scaling.svg");
+}
+
+.ui.inline-icon.icon-grid::after,
+.ui.icon > .icon-grid {
+	-webkit-mask-image: url("../res/icons/grid.svg");
+	mask-image: url("../res/icons/grid.svg");
+}
+
+.ui.inline-icon.icon-venetian-mask::after,
+.ui.icon > .icon-venetian-mask {
+	-webkit-mask-image: url("../res/icons/venetian-mask.svg");
+	mask-image: url("../res/icons/venetian-mask.svg");
+}
+
+.ui.inline-icon.icon-brush::after,
+.ui.icon > .icon-brush {
+	-webkit-mask-image: url("../res/icons/brush.svg");
+	mask-image: url("../res/icons/brush.svg");
+}
+
+.ui.inline-icon.icon-paintbrush::after,
+.ui.icon > .icon-paintbrush {
+	-webkit-mask-image: url("../res/icons/paintbrush.svg");
+	mask-image: url("../res/icons/paintbrush.svg");
+}
+
+.ui.inline-icon.icon-slice::after,
+.ui.icon > .icon-slice {
+	-webkit-mask-image: url("../res/icons/slice.svg");
+	mask-image: url("../res/icons/slice.svg");
+}
+
+.ui.inline-icon.icon-joystick::after,
+.ui.icon > .icon-joystick {
+	-webkit-mask-image: url("../res/icons/joystick.svg");
+	mask-image: url("../res/icons/joystick.svg");
+}
+
+.ui.inline-icon.icon-save::after,
+.ui.icon > .icon-save {
+	-webkit-mask-image: url("../res/icons/save.svg");
+	mask-image: url("../res/icons/save.svg");
+}
+
+.ui.inline-icon.icon-pencil::after,
+.ui.icon > .icon-pencil {
+	-webkit-mask-image: url("../res/icons/pencil.svg");
+	mask-image: url("../res/icons/pencil.svg");
+}
+
+.ui.inline-icon.icon-download::after,
+.ui.icon > .icon-download {
+	-webkit-mask-image: url("../res/icons/download.svg");
+	mask-image: url("../res/icons/download.svg");
+}
+.ui.inline-icon.icon-upload::after,
+.ui.icon > .icon-upload {
+	-webkit-mask-image: url("../res/icons/upload.svg");
+	mask-image: url("../res/icons/upload.svg");
+}
+.ui.inline-icon.icon-more-horizontal::after,
+.ui.icon > .icon-more-horizontal {
+	-webkit-mask-image: url("../res/icons/more-horizontal.svg");
+	mask-image: url("../res/icons/more-horizontal.svg");
+}
+.ui.inline-icon.icon-trash::after,
+.ui.icon > .icon-trash {
+	-webkit-mask-image: url("../res/icons/trash.svg");
+	mask-image: url("../res/icons/trash.svg");
+}
+
+.ui.inline-icon.icon-expand::after,
+.ui.icon > .icon-expand {
+	-webkit-mask-image: url("../res/icons/expand.svg");
+	mask-image: url("../res/icons/expand.svg");
+}
+
+.ui.inline-icon.icon-pin::after,
+.ui.icon > .icon-pin {
+	-webkit-mask-image: url("../res/icons/pin.svg");
+	mask-image: url("../res/icons/pin.svg");
+}
+
+.ui.inline-icon.icon-box-select::after,
+.ui.icon > .icon-box-select {
+	-webkit-mask-image: url("../res/icons/box-select.svg");
+	mask-image: url("../res/icons/box-select.svg");
+}
+
+.ui.inline-icon.icon-maximize::after,
+.ui.icon > .icon-maximize {
+	-webkit-mask-image: url("../res/icons/maximize.svg");
+	mask-image: url("../res/icons/maximize.svg");
+}
+
+.ui.inline-icon.icon-clipboard-list::after,
+.ui.icon > .icon-clipboard-list {
+	-webkit-mask-image: url("../res/icons/clipboard-list.svg");
+	mask-image: url("../res/icons/clipboard-list.svg");
+}

extensions/openOutpaint-webUI-extension/app/css/index.css

@@ -0,0 +1,678 @@
+* {
+	font-size: 100%;
+	font-family: Arial, Helvetica, sans-serif;
+	user-select: none;
+}
+
+input,
+textarea {
+	user-select: auto;
+}
+
+/* Body is stuck with no scroll */
+body {
+	width: 100%;
+	height: 100%;
+
+	margin: 0px;
+	padding: 0px;
+
+	overflow: clip;
+}
+
+.invisible {
+	display: none !important;
+}
+
+.collapsible {
+	background-color: rgb(0, 0, 0);
+	color: rgb(255, 255, 255);
+	border-radius: 5px;
+	cursor: pointer;
+	width: 100%;
+	border: none;
+	text-align: center;
+	outline: none;
+	padding: 0px;
+}
+
+.collapsible {
+	background-color: var(--c-primary);
+
+	margin-bottom: 2px;
+	margin-top: 5px;
+
+	transition-duration: 50ms;
+}
+
+.collapsible::before {
+	content: "";
+	display: block;
+
+	position: absolute;
+
+	width: 21px;
+	height: 21px;
+
+	background-color: var(--c-text);
+	mask-image: url("../res/icons/chevron-up.svg");
+	-webkit-mask-image: url("../res/icons/chevron-up.svg");
+	mask-size: contain;
+	-webkit-mask-size: contain;
+	rotate: 90deg;
+}
+
+.collapsible.active::before {
+	rotate: 180deg;
+}
+
+.display-none {
+	display: none;
+}
+
+.collapsible:hover {
+	background-color: var(--c-hover);
+}
+
+.collapsible:active {
+	filter: brightness(110%);
+}
+
+.content {
+	max-height: 0;
+	overflow-y: clip;
+	overflow-x: visible;
+	transition:
+		max-height 0.2s ease-out,
+		height 0s ease-out;
+}
+
+.menu-container {
+	background-color: rgba(255, 255, 255, 0.5);
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+
+	color: black;
+	border: solid;
+	border-top: none;
+	border-color: black;
+	font-size: medium;
+	text-align: left;
+	max-height: fit-content;
+	overflow: visible;
+	cursor: auto;
+}
+
+#page-overlay-wrapper {
+	position: fixed;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+
+	background-color: #fff6;
+	backdrop-filter: blur(5px);
+
+	transition-duration: 50ms;
+
+	z-index: 1000;
+}
+
+.page-overlay-window {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	border-radius: 10px;
+
+	min-width: 400px;
+	width: 400px;
+	min-height: 260px;
+	height: 260px;
+
+	color: var(--c-text);
+
+	overflow: hidden;
+
+	position: absolute;
+
+	margin: auto;
+
+	background-color: var(--c-primary);
+}
+
+.page-overlay-window .close {
+	position: absolute;
+
+	cursor: pointer;
+
+	top: 0;
+	right: 0;
+
+	margin: 5px;
+
+	width: 25px;
+	height: 25px;
+
+	-webkit-mask-image: url("../res/icons/x.svg");
+	mask-image: url("../res/icons/x.svg");
+
+	background-color: var(--c-text);
+}
+
+.page-overlay-window .close:hover {
+	transform: scale(1.1);
+}
+
+.page-overlay-window .title {
+	padding: 10px;
+	padding-top: 7px;
+
+	font-size: large;
+	font-weight: bold;
+
+	margin: auto;
+
+	background-color: var(--c-primary);
+}
+
+#page-overlay {
+	border: 0;
+
+	min-height: 200px;
+	max-height: 600px;
+
+	width: 100%;
+	height: 100%;
+}
+
+/* Mask colors for mask inversion */
+/* Filters are some magic acquired at https://codepen.io/sosuke/pen/Pjoqqp */
+.mask-canvas {
+	opacity: 0%;
+}
+
+.mask-canvas.display {
+	opacity: 40%;
+	filter: invert(100%);
+}
+
+.mask-canvas.display.opaque {
+	opacity: 100%;
+}
+
+.mask-canvas.display.clear {
+	filter: invert(71%) sepia(46%) saturate(6615%) hue-rotate(321deg)
+		brightness(106%) contrast(100%);
+}
+
+.mask-canvas.display.hold {
+	filter: invert(41%) sepia(16%) saturate(5181%) hue-rotate(218deg)
+		brightness(103%) contrast(108%);
+}
+
+.wideSelect {
+	width: 100%;
+	text-overflow: ellipsis;
+}
+
+/* Host input */
+.host-field-wrapper {
+	position: relative;
+	display: flex;
+
+	align-items: stretch;
+	justify-content: space-between;
+
+	width: 100%;
+}
+
+.host-field-wrapper > .host-field {
+	display: flex;
+	width: calc(100% - 15px);
+}
+
+.host-field-wrapper > .host-field > .label {
+	padding-left: 5px;
+	padding-right: 5px;
+
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+
+	background-color: var(--c-primary);
+	color: var(--c-text);
+}
+
+.host-field-wrapper input {
+	display: block;
+	min-width: 0;
+
+	border: 0;
+}
+
+.host-field-wrapper .connection-status {
+	width: 15px;
+
+	position: absolute;
+	left: calc(100% - 15px);
+
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+
+	box-sizing: inherit;
+
+	cursor: pointer;
+
+	transition-duration: 50ms;
+
+	padding-top: 1px;
+	padding-bottom: 1px;
+
+	overflow: hidden;
+}
+.host-field-wrapper .connection-status:active,
+.host-field-wrapper .connection-status:hover {
+	width: fit-content;
+	padding-left: 5px;
+	padding-right: 6px;
+
+	filter: brightness(110%);
+}
+
+.host-field-wrapper .connection-status:active {
+	filter: brightness(80%);
+}
+
+.host-field-wrapper .connection-status > #connection-status-indicator-text {
+	opacity: 0%;
+	transition-duration: 20ms;
+}
+
+.host-field-wrapper
+	.connection-status:hover
+	> #connection-status-indicator-text {
+	opacity: 100%;
+}
+
+.host-field-wrapper .connection-status.online {
+	background-color: #49dd49;
+	color: #1f3f1f;
+}
+
+.host-field-wrapper .connection-status.offline {
+	background-color: #dd4949;
+	color: #3f1f1f;
+}
+
+.host-field-wrapper .connection-status.webui-issue {
+	background-color: #dddd49;
+	color: #3f3f1f;
+}
+
+.host-field-wrapper .connection-status.before {
+	background-color: #777;
+	color: #1f1f1f;
+}
+
+input#host {
+	box-sizing: border-box;
+}
+
+/* Model Select */
+#models-ac-select option {
+	background-color: #fcc;
+}
+
+#models-ac-select option.inpainting {
+	background-color: #cfc;
+}
+
+/* Settings button */
+.ui.icon.header-button {
+	padding: 0;
+	border: 0;
+
+	cursor: pointer;
+
+	background-color: transparent;
+}
+
+.ui.icon.header-button > *:first-child {
+	background-color: black;
+
+	-webkit-mask-size: contain;
+	mask-size: contain;
+
+	width: 28px;
+	height: 28px;
+	transition-duration: 30ms;
+}
+
+.ui.icon.header-button:hover > *:last-child {
+	transform: scale(1.1);
+}
+
+/* Prompt Fields */
+
+.content.prompt {
+	display: flex;
+	align-items: stretch;
+}
+
+.content.prompt > .inputs {
+	width: 200px;
+}
+
+div.prompt-wrapper {
+	display: flex;
+
+	width: calc(100%);
+
+	overflow: visible;
+}
+
+div.prompt-wrapper > * {
+	flex-shrink: 0;
+}
+
+div.prompt-wrapper textarea {
+	margin: 0;
+
+	border-radius: 0;
+
+	border: none;
+
+	z-index: 1;
+}
+
+div.prompt-wrapper:not(:first-child) textarea {
+	border-top: 1px solid black;
+}
+
+div.prompt-wrapper > textarea {
+	box-sizing: border-box;
+	width: calc(100% - 20px);
+
+	padding: 2px;
+
+	transition-duration: 200ms;
+
+	resize: vertical;
+}
+
+div.prompt-wrapper > textarea:focus {
+	width: 700px;
+}
+
+div.prompt-wrapper > .prompt-indicator {
+	display: flex;
+
+	cursor: help;
+
+	width: 20px;
+}
+
+div.prompt-wrapper:first-child > .prompt-indicator {
+	border-top-left-radius: 5px;
+}
+
+div.prompt-wrapper:last-child > .prompt-indicator {
+	border-bottom-left-radius: 5px;
+}
+
+div.prompt-wrapper > .prompt-indicator.positive {
+	background-color: #484;
+}
+
+div.prompt-wrapper > .prompt-indicator.negative {
+	background-color: #844;
+}
+div.prompt-wrapper > .prompt-indicator.styles {
+	background-color: #448;
+}
+
+div.prompt-wrapper > .prompt-indicator::after {
+	content: "";
+	display: block;
+	margin: auto;
+
+	width: 16px;
+	height: 16px;
+
+	background-color: var(--c-text);
+
+	mask-size: contain;
+	-webkit-mask-size: contain;
+}
+
+div.prompt-wrapper > .prompt-indicator.positive::after {
+	mask-image: url("../res/icons/plus-square.svg");
+	-webkit-mask-image: url("../res/icons/plus-square.svg");
+}
+
+div.prompt-wrapper > .prompt-indicator.negative::after {
+	mask-image: url("../res/icons/minus-square.svg");
+	-webkit-mask-image: url("../res/icons/minus-square.svg");
+}
+
+div.prompt-wrapper > .prompt-indicator.styles::after {
+	mask-image: url("../res/icons/library.svg");
+	-webkit-mask-image: url("../res/icons/library.svg");
+}
+
+.prompt-history-wrapper {
+	position: relative;
+
+	flex-shrink: 0;
+
+	width: 20px;
+}
+
+.prompt-history-container {
+	display: flex;
+
+	position: absolute;
+
+	top: 0;
+	left: 0;
+
+	height: 100%;
+}
+
+#prompt-history {
+	width: 0px;
+	height: 100%;
+
+	transition-duration: 200ms;
+
+	background-color: #1e1e50;
+}
+
+#prompt-history.expanded {
+	width: 300px;
+	overflow-y: auto;
+}
+
+#prompt-history .entry {
+	display: flex;
+	align-items: stretch;
+	justify-content: stretch;
+
+	border: 1px #fff3;
+
+	height: 25px;
+}
+
+#prompt-history.expanded .entry > button {
+	padding: 2px;
+	padding-left: 5px;
+}
+
+#prompt-history .entry > button {
+	flex: 1;
+
+	cursor: pointer;
+
+	margin: 0;
+	border: 0;
+	padding: 0;
+
+	color: var(--c-text);
+
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	transition-duration: 100ms;
+}
+
+#prompt-history .entry:hover > button:not(:hover) {
+	flex-grow: 0;
+	flex-shrink: 1;
+	flex-basis: 20%;
+	width: 20%;
+}
+
+#prompt-history .entry > button.prompt {
+	background-color: #484;
+}
+
+#prompt-history .entry > button.negative {
+	background-color: #844;
+}
+
+#prompt-history .entry > button.styles {
+	background-color: #448;
+}
+
+#prompt-history .entry > button:hover {
+	filter: brightness(115%);
+	backdrop-filter: brightness(115%);
+}
+
+#prompt-history .entry > button:active {
+	filter: brightness(150%);
+	backdrop-filter: brightness(150%);
+}
+
+button.prompt-history-btn {
+	cursor: pointer;
+
+	border-radius: 0;
+
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+
+	background-color: #1e1e50;
+
+	margin: 0;
+	padding: 0;
+	border: 0;
+
+	width: 20px;
+}
+
+button.prompt-history-btn::after {
+	content: "";
+	display: block;
+	margin: auto;
+
+	width: 16px;
+	height: 16px;
+
+	background-color: var(--c-text);
+
+	mask-size: contain;
+	-webkit-mask-size: contain;
+
+	mask-image: url("../res/icons/history.svg");
+	-webkit-mask-image: url("../res/icons/history.svg");
+}
+
+button.prompt-history-btn:hover {
+	filter: brightness(115%);
+}
+
+button.prompt-history-btn:active {
+	filter: brightness(150%);
+}
+
+/* Style Field */
+select > .style-select-option {
+	position: relative;
+
+	cursor: pointer;
+}
+
+select > .style-select-option:hover {
+	background-color: #999;
+}
+
+select > .style-select-option:active {
+	background-color: #aaa;
+}
+
+/* Tool buttons */
+.button-array {
+	display: flex;
+	justify-content: stretch;
+}
+
+.button-array > .button.tool {
+	flex: 1;
+	border-radius: 0;
+}
+
+.button-array > .button.tool:first-child {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+
+.button-array > .button.tool:last-child {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+.button.tool {
+	background-color: rgb(0, 0, 50);
+	color: rgb(255, 255, 255);
+	cursor: pointer;
+	border: none;
+	text-align: center;
+	outline: none;
+	font-size: 15px;
+	padding: 5px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+.button.tool:disabled {
+	background-color: #666 !important;
+	cursor: default;
+}
+
+.button.tool:hover {
+	background-color: rgb(30, 30, 80);
+}
+.button.tool:active,
+.button.tool.active {
+	background-color: rgb(60, 60, 130);
+}
+
+/* Miscellaneous garbage */
+
+.thirdwidth {
+	max-width: 33%;
+}
+
+.refreshbutton {
+	max-width: 50%;
+	max-height: 50%;
+}

extensions/openOutpaint-webUI-extension/app/css/layers.css

@@ -0,0 +1,71 @@
+/* Debug floating window */
+#layer-preview .preview-canvas {
+	background-color: white;
+	width: 100%;
+	height: 150px;
+}
+
+#layer-manager .menu-container {
+	height: 200px;
+}
+
+.layer-render-target {
+	position: fixed;
+	background-color: #466;
+
+	margin: 0;
+	padding: 0;
+
+	top: 0;
+	left: 0;
+
+	width: 100%;
+	height: 100%;
+}
+
+.layer-render-target .collection {
+	position: absolute;
+	transform-origin: 0px 0px;
+}
+
+.layer-render-target .collection > .collection-input-overlay {
+	position: absolute;
+
+	top: 0;
+	left: 0;
+
+	z-index: 10;
+}
+
+.layer-render-target canvas {
+	position: absolute;
+
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+}
+
+.overlay-canvas {
+	position: fixed;
+
+	top: 0;
+	left: 0;
+
+	width: 100%;
+	height: 100%;
+
+	pointer-events: none;
+
+	z-index: 15;
+}
+
+#layer-render.pixelated canvas {
+	image-rendering: pixelated;
+	image-rendering: crisp-edges;
+}
+
+canvas.pixelated {
+	image-rendering: pixelated;
+	image-rendering: crisp-edges;
+}

extensions/openOutpaint-webUI-extension/app/css/ui/generic.css

@@ -0,0 +1,451 @@
+/* UI Floating Windows */
+.floating-window {
+	position: fixed;
+	width: 250px;
+	height: auto;
+	z-index: 999;
+}
+
+.floating-window-title {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	cursor: move;
+	background-color: rgba(104, 104, 104, 0.75);
+
+	user-select: none;
+
+	padding: 5px;
+	padding-left: 10px;
+
+	margin-bottom: auto;
+	font-size: 1.5em;
+	color: black;
+	text-align: center;
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	border: solid;
+	border-bottom: none;
+	border-color: black;
+}
+
+.draggable {
+	cursor: move;
+}
+
+/* Slider Input */
+div.slider-wrapper {
+	margin: 5px;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+div.slider-wrapper {
+	position: relative;
+	height: 20px;
+	border-radius: 5px;
+
+	overflow-y: visible;
+}
+
+div.slider-wrapper * {
+	height: 20px;
+	border-radius: 5px;
+	margin: 0;
+}
+
+div.slider-wrapper > * {
+	position: absolute;
+	padding: inherit;
+	width: 100%;
+
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+
+	overflow: hidden;
+}
+
+div.slider-wrapper > div.under {
+	display: flex;
+	background-color: var(--c-primary-accent);
+}
+div.slider-wrapper > div.under > div:first-child {
+	background-color: var(--c-primary);
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+div.slider-wrapper > div.under > div:last-child {
+	flex: 1;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+div.slider-wrapper > div.under > * {
+	height: 100%;
+}
+
+div.slider-wrapper > div.over {
+	cursor: pointer;
+}
+
+div.slider-wrapper > input.text {
+	color: var(--c-text);
+
+	flex: 1;
+	appearance: textfield;
+	border: 0px;
+
+	height: 100%;
+	text-align: center;
+	background-color: transparent;
+}
+
+/* Checkbox Input */
+div.checkbox-array {
+	display: flex;
+
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+input.oo-checkbox[type="checkbox"] {
+	/* Hide original checkbox */
+	-webkit-appearance: none;
+	appearance: none;
+
+	flex: 1;
+
+	margin: 0;
+
+	min-width: 28px;
+	height: 28px;
+
+	background-color: var(--c-primary);
+
+	cursor: pointer;
+}
+
+input.oo-checkbox[type="checkbox"]:disabled {
+	background-color: #666 !important;
+	cursor: default !important;
+}
+
+input.oo-checkbox[type="checkbox"]:disabled:hover {
+	filter: none !important;
+}
+
+input.oo-checkbox[type="checkbox"]:checked::after {
+	background-color: #66f;
+}
+
+input.oo-checkbox[type="checkbox"]:hover {
+	background-color: var(--c-hover);
+}
+
+input.oo-checkbox[type="checkbox"]:active {
+	filter: brightness(120%);
+}
+
+input.oo-checkbox[type="checkbox"]:first-child {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+
+input.oo-checkbox[type="checkbox"]:last-child {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+/* Mask Inversion Checkbox */
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox::after {
+	background-color: var(--c-text);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:hover {
+	filter: brightness(120%);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:active {
+	filter: brightness(140%);
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox {
+	background-color: #922;
+}
+
+input.oo-checkbox[type="checkbox"].invert-mask-checkbox:checked {
+	background-color: #229;
+}
+
+/* Bare Select */
+
+.bareselector {
+	border-radius: 5px;
+
+	background-color: white;
+
+	overflow-y: auto;
+
+	margin-top: 0;
+	margin-left: 0;
+
+	max-height: 200px;
+	min-width: 100%;
+	max-width: 800px;
+
+	width: fit-content;
+	z-index: 200;
+}
+
+/* Autocomplete Select */
+div.autocomplete {
+	border-radius: 5px;
+}
+
+div.autocomplete > .autocomplete-text {
+	box-sizing: border-box;
+
+	border-radius: 5px;
+
+	width: 100%;
+}
+
+div.autocomplete > .refreshable {
+	width: 82% !important;
+}
+
+div.autocomplete > .autocomplete-list {
+	position: absolute;
+
+	background-color: white;
+
+	overflow-y: auto;
+
+	margin-top: 0;
+	margin-left: 0;
+
+	max-height: 200px;
+	min-width: 100%;
+	max-width: 800px;
+
+	width: fit-content;
+	z-index: 200;
+}
+
+div.autocomplete > .autocomplete-list > .autocomplete-option {
+	position: relative;
+	cursor: pointer;
+
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	padding: 3px;
+}
+
+div.autocomplete > .autocomplete-list > .autocomplete-option:hover {
+	background-color: #dddf;
+}
+
+div.autocomplete > .autocomplete-list > .autocomplete-option.selected::after {
+	content: "";
+
+	position: absolute;
+	right: 5px;
+	top: 0;
+
+	height: 100%;
+	aspect-ratio: 1;
+
+	background-color: darkgreen;
+
+	-webkit-mask-image: url("../../res/icons/check.svg");
+	-webkit-mask-size: contain;
+	mask-image: url("../../res/icons/check.svg");
+	mask-size: contain;
+}
+
+/* Select Input */
+select > option:checked::after {
+	content: "";
+
+	position: absolute;
+	right: 5px;
+	top: 0;
+
+	height: 100%;
+	aspect-ratio: 1;
+
+	background-color: darkgreen;
+
+	-webkit-mask-image: url("../../res/icons/check.svg");
+	-webkit-mask-size: contain;
+	mask-image: url("../../res/icons/check.svg");
+	mask-size: contain;
+}
+/*************/
+/* UI styles */
+/*************/
+
+/* The separator */
+.ui.separator {
+	width: 80%;
+	margin: auto;
+	align-self: center;
+	border-top: 1px var(--c-hover) solid;
+}
+
+/* Icon button */
+.ui.square {
+	aspect-ratio: 1;
+}
+
+.ui.button {
+	cursor: pointer;
+
+	padding: 0;
+	margin: 0;
+	border: 0;
+	color: var(--c-text);
+	background-color: var(--c-primary);
+	transition-duration: 50ms;
+}
+
+.ui.button:hover {
+	background-color: var(--c-hover);
+}
+
+.ui.button:active {
+	background-color: var(--c-hover);
+	filter: brightness(120%);
+}
+
+.ui.button.icon {
+	display: flex;
+	align-items: stretch;
+}
+
+.ui.button.icon > *:first-child {
+	flex: 1;
+	margin: 3px;
+
+	-webkit-mask-position: center;
+	mask-position: center;
+
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	background-color: var(--c-text);
+}
+
+/**
+ * Generic list
+ */
+
+.list {
+	height: 200px;
+
+	overflow-y: auto;
+
+	background-color: var(--c-primary);
+
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+.list > *:first-child {
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+.list .list-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	height: 25px;
+	padding-left: 5px;
+	padding-right: 5px;
+
+	cursor: pointer;
+
+	color: var(--c-text);
+
+	transition-duration: 50ms;
+}
+
+.list .list-item.active {
+	background-color: var(--c-active);
+}
+.list .list-item.active:hover,
+.list .list-item:hover {
+	background-color: var(--c-hover);
+}
+.list .list-item.active:active,
+.list .list-item:active {
+	background-color: var(--c-hover);
+	filter: brightness(120%);
+}
+
+.list .list-item > .title {
+	flex: 1;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+
+	background-color: transparent;
+
+	border: 0;
+	color: var(--c-text);
+}
+
+.list .list-item > .actions {
+	display: flex;
+	align-self: stretch;
+}
+
+.list .actions > button {
+	display: flex;
+	align-items: stretch;
+
+	padding: 0;
+
+	width: 25px;
+	aspect-ratio: 1;
+
+	background-color: transparent;
+	border: 0;
+	cursor: pointer;
+}
+
+.list .list-item > .actions > *:hover > * {
+	margin: 2px;
+}
+
+.list .actions > button > *:first-child {
+	flex: 1;
+	margin: 3px;
+
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	background-color: var(--c-text);
+}
+
+/* Generic buttons */
+.list .actions > .delete-btn > *:first-child {
+	-webkit-mask-image: url("../../res/icons/trash.svg");
+	mask-image: url("../../res/icons/trash.svg");
+}
+
+.list .actions > .rename-btn > *:first-child {
+	-webkit-mask-image: url("../../res/icons/edit.svg");
+	mask-image: url("../../res/icons/edit.svg");
+}
+
+.list .actions > .download-btn > *:first-child {
+	-webkit-mask-image: url("../../res/icons/download.svg");
+	mask-image: url("../../res/icons/download.svg");
+}

extensions/openOutpaint-webUI-extension/app/css/ui/history.css

@@ -0,0 +1,38 @@
+#historyContainer > .info {
+	padding: 0;
+}
+
+#history.history {
+	height: 200px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+#history.history > .history-item {
+	cursor: pointer;
+
+	padding: 5px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+#history.history > .history-item {
+	background-color: #0000;
+}
+#history.history > .history-item:hover {
+	background-color: #fff5;
+}
+
+#history.history > .history-item.current {
+	background-color: #66f5;
+}
+#history.history > .history-item.current:hover {
+	background-color: #66f5;
+}
+
+#history.history > .history-item.future {
+	background-color: #4445;
+}
+#history.history > .history-item.future:hover {
+	background-color: #ddd5;
+}

extensions/openOutpaint-webUI-extension/app/css/ui/layers.css

@@ -0,0 +1,206 @@
+.layer-manager {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	border-radius: 5px;
+	overflow: hidden;
+
+	background-color: var(--c-primary);
+}
+
+#layer-list {
+	height: 200px;
+
+	overflow-y: auto;
+
+	background-color: var(--c-primary);
+
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+#layer-list > *:first-child {
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+#layer-list .ui-layer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	height: 25px;
+	padding-left: 5px;
+	padding-right: 5px;
+
+	cursor: pointer;
+
+	color: var(--c-text);
+
+	transition-duration: 50ms;
+}
+
+#layer-list .ui-layer.active {
+	background-color: var(--c-active);
+}
+#layer-list .ui-layer.active:hover,
+#layer-list .ui-layer:hover {
+	background-color: var(--c-hover);
+}
+#layer-list .ui-layer.active:active,
+#layer-list .ui-layer:active {
+	background-color: var(--c-hover);
+	filter: brightness(120%);
+}
+
+#layer-list .ui-layer > .title {
+	flex: 1;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+
+	background-color: transparent;
+
+	border: 0;
+	color: var(--c-text);
+}
+
+#layer-list .ui-layer > .actions {
+	display: flex;
+	align-self: stretch;
+}
+
+#layer-list .actions > button {
+	display: flex;
+	align-items: stretch;
+
+	padding: 0;
+
+	width: 25px;
+	aspect-ratio: 1;
+
+	background-color: transparent;
+	border: 0;
+	cursor: pointer;
+}
+
+#layer-list .ui-layer > .actions > *:hover > * {
+	margin: 2px;
+}
+
+#layer-list .actions > button > *:first-child {
+	flex: 1;
+	margin: 3px;
+
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	background-color: var(--c-text);
+}
+
+#layer-list .actions > .rename-btn > *:first-child {
+	-webkit-mask-image: url("../../res/icons/edit.svg");
+	mask-image: url("../../res/icons/edit.svg");
+}
+
+#layer-list .actions > .delete-btn > *:first-child {
+	-webkit-mask-image: url("../../res/icons/trash.svg");
+	mask-image: url("../../res/icons/trash.svg");
+}
+
+#layer-list .actions > .hide-btn > *:first-child {
+	-webkit-mask-image: url("../../res/icons/eye.svg");
+	mask-image: url("../../res/icons/eye.svg");
+}
+#layer-list .hidden .actions > .hide-btn > *:first-child {
+	-webkit-mask-image: url("../../res/icons/eye-off.svg");
+	mask-image: url("../../res/icons/eye-off.svg");
+}
+
+.layer-manager > .separator {
+	width: calc(100% - 10px);
+}
+
+.layer-manager > .layer-list-actions {
+	display: flex;
+	padding: 0;
+
+	justify-content: stretch;
+}
+
+.layer-manager > .layer-list-actions > * {
+	flex: 1;
+	height: 25px;
+}
+
+/* Resizing buttons */
+.expand-button {
+	display: flex;
+
+	align-items: center;
+	justify-content: center;
+
+	margin: 0;
+	padding: 0;
+	border: 0;
+
+	background-color: transparent;
+
+	cursor: pointer;
+
+	transition-duration: 300ms;
+	transition-property: background-color;
+
+	border: 2px solid #293d3d30;
+}
+
+.expand-button::after {
+	content: "";
+
+	background-color: #293d3d77;
+
+	-webkit-mask-image: url("../../res/icons/chevron-up.svg");
+	mask-image: url("../../res/icons/chevron-up.svg");
+	-webkit-mask-size: contain;
+	mask-size: contain;
+
+	width: 60px;
+	height: 60px;
+}
+
+.expand-button:hover::after {
+	background-color: #466;
+}
+
+.expand-button.right::after {
+	transform: rotate(90deg);
+}
+
+.expand-button.bottom::after {
+	transform: rotate(180deg);
+}
+
+.expand-button.left::after {
+	transform: rotate(270deg);
+}
+
+.expand-button.left {
+	border-top-left-radius: 10px;
+	border-bottom-left-radius: 10px;
+}
+.expand-button.top {
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+}
+.expand-button.right {
+	border-top-right-radius: 10px;
+	border-bottom-right-radius: 10px;
+}
+.expand-button.bottom {
+	border-bottom-right-radius: 10px;
+	border-bottom-left-radius: 10px;
+}
+
+.expand-button:hover {
+	background-color: #293d3d77;
+}

extensions/openOutpaint-webUI-extension/app/css/ui/notifications.css

@@ -0,0 +1,253 @@
+/** Notification Ripple */
+@keyframes notification-ripple {
+	0% {
+		border: none 0px;
+	}
+	50% {
+		border: solid 5px;
+	}
+	100% {
+		border: none 0px;
+	}
+}
+
+div.notification-highlight {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100%;
+	height: 100%;
+
+	z-index: 1000;
+	pointer-events: none;
+
+	box-sizing: border-box;
+
+	animation: notification-ripple;
+	animation-iteration-count: 1;
+}
+
+.notification-highlight.notification-success {
+	border-color: #39b34999 !important;
+}
+.notification-highlight.notification-warn {
+	border-color: #b3a13999 !important;
+}
+.notification-highlight.notification-info {
+	border-color: #3976b399 !important;
+}
+
+/** Notification area */
+.notification-area {
+	position: absolute;
+
+	width: 250px;
+	min-width: 200px;
+
+	z-index: 25;
+
+	pointer-events: none;
+
+	padding: 10px;
+}
+
+.notification-area > * {
+	pointer-events: all;
+}
+
+.notification-area.bottom-left {
+	left: 0px;
+	bottom: 0px;
+}
+
+/** Notifications */
+.notification-area .notification {
+	position: relative;
+
+	cursor: pointer;
+
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+
+	border-radius: 5px;
+	border: solid 1px;
+
+	padding: 5px;
+	margin-top: 5px;
+
+	color: white;
+}
+
+.notification-area .notification:hover {
+	filter: brightness(110%);
+}
+
+.notification-area .notification:active {
+	filter: brightness(90%);
+}
+
+.notification-area .notification-content {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	max-height: 100%;
+}
+
+.notification-area .notification.expanded .notification-content {
+	white-space: normal !important;
+}
+
+.notification .notification-closebtn {
+	position: relative;
+
+	flex: 0;
+
+	cursor: pointer;
+
+	padding: 0;
+	border: 0;
+
+	min-width: 20px;
+	max-width: 20px;
+	min-height: 20px;
+	max-height: 20px;
+
+	border-radius: 10px;
+
+	background-color: #0002;
+
+	transition-duration: 20ms;
+}
+
+.notification .notification-closebtn:hover {
+	background-color: #fff2;
+}
+
+.notification .notification-closebtn:active {
+	background-color: #fff4;
+}
+
+.notification .notification-closebtn::after {
+	content: "";
+	position: absolute;
+
+	cursor: pointer;
+
+	top: 0;
+	right: 0;
+
+	margin: 2px;
+
+	width: 16px;
+	height: 16px;
+
+	-webkit-mask-size: contain;
+	mask-size: contain;
+
+	-webkit-mask-image: url("../../res/icons/x.svg");
+	mask-image: url("../../res/icons/x.svg");
+
+	background-color: var(--c-text);
+}
+
+/** Notification Types */
+.notification-area .notification.info {
+	background-color: #3976b399;
+	border-color: #12375c;
+}
+
+.notification-area .notification.success {
+	background-color: #39b34999;
+	border-color: #1b5c12;
+}
+
+.notification-area .notification.error {
+	background-color: #b3393999;
+	border-color: #5c1212;
+}
+
+.notification-area .notification.warn {
+	background-color: #b3a13999;
+	border-color: #5c4e12;
+}
+
+/** Dialog */
+.dialog-bg {
+	position: fixed;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+
+	backdrop-filter: blur(5px);
+	background-color: #fff6;
+
+	z-index: 1000;
+}
+
+.dialog-bg .dialog {
+	background-color: var(--c-primary);
+	color: var(--c-text);
+
+	border-radius: 10px;
+
+	position: absolute;
+	margin: auto;
+
+	min-width: 200px;
+	min-height: 20px;
+
+	max-width: 400px;
+}
+
+.dialog .dialog-title {
+	margin: 10px;
+	font-weight: bold;
+}
+
+.dialog .dialog-content {
+	margin: 10px;
+}
+
+.dialog .dialog-choices {
+	display: flex;
+}
+
+.dialog .dialog-choices > *:first-child {
+	border-bottom-left-radius: 10px;
+}
+.dialog .dialog-choices > *:last-child {
+	border-bottom-right-radius: 10px;
+}
+
+.dialog .dialog-choices > * {
+	flex: 1;
+
+	cursor: pointer;
+
+	padding: 5px;
+
+	background-color: transparent;
+	color: var(--c-text);
+
+	border: 0px;
+	border-top: solid 1px var(--c-hover);
+
+	transition-duration: 50ms;
+}
+
+.dialog .dialog-choices > *:not(:first-child) {
+	border-left: solid 1px var(--c-hover);
+}
+
+.dialog .dialog-choices > *:hover {
+	background-color: var(--c-hover);
+}

extensions/openOutpaint-webUI-extension/app/css/ui/tool/colorbrush.css

@@ -0,0 +1,42 @@
+.brush-color-picker.wrapper {
+	position: relative;
+
+	height: 32px;
+
+	display: flex;
+	flex-direction: row;
+	align-items: stretch;
+	justify-content: space-between;
+}
+
+.brush-color-picker.picker {
+	cursor: pointer;
+
+	flex: 1;
+
+	height: 100%;
+
+	border-bottom-left-radius: 3px;
+	border-top-left-radius: 3px;
+
+	padding: 0;
+	border: 0;
+}
+
+.brush-color-picker.eyedropper {
+	cursor: pointer;
+
+	border-radius: 3px;
+	border-bottom-left-radius: 0;
+	border-top-left-radius: 0;
+
+	height: 100%;
+	aspect-ratio: 1;
+
+	border: 0;
+
+	background-image: url("../../../res/icons/pipette.svg");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: contain;
+}

extensions/openOutpaint-webUI-extension/app/css/ui/tool/dream.css

@@ -0,0 +1,3 @@
+.dream-stop-btn {
+	width: 100px;
+}

extensions/openOutpaint-webUI-extension/app/css/ui/tool/stamp.css

@@ -0,0 +1,56 @@
+.resource-manager {
+	position: relative;
+	border-radius: 5px;
+}
+
+.resource-manager {
+	user-select: none;
+}
+.resource-manager > .preview-pane {
+	display: none;
+
+	position: absolute;
+
+	height: 200px;
+	width: 200px;
+
+	right: -200px;
+	top: 0px;
+
+	background-color: white;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+
+	border-radius: 2px;
+}
+
+.resource-manager > .resource-list {
+	height: 200px;
+
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+.resource-manager > .upload-button {
+	display: block;
+	width: 100%;
+
+	padding-left: 0;
+	padding-right: 0;
+
+	margin-top: 0;
+
+	text-align: center;
+
+	border-top-left-radius: 0px;
+	border-top-right-radius: 0px;
+
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+
+	border: 0px;
+}

extensions/openOutpaint-webUI-extension/app/css/ui/toolbar.css

@@ -0,0 +1,94 @@
+#ui-toolbar {
+	align-content: center;
+
+	width: 60px;
+
+	border-radius: 5px;
+
+	color: var(--c-text);
+	background-color: var(--c-primary);
+}
+
+#ui-toolbar * {
+	user-select: none;
+}
+
+#ui-toolbar .handle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: 10px;
+}
+
+#ui-toolbar .handle > .line {
+	width: 80%;
+	border-top: 2px #777 dotted;
+}
+
+#ui-toolbar .tool .tool-icon {
+	filter: invert(60%);
+}
+#ui-toolbar .tool.using .tool-icon {
+	filter: invert(80%);
+}
+#ui-toolbar .tool:hover .tool-icon {
+	filter: invert(90%);
+}
+
+/* Toolbar lock indicator */
+#ui-toolbar .lock-indicator {
+	position: absolute;
+	display: none;
+
+	padding: 0;
+
+	right: 2px;
+	top: 10px;
+
+	width: 15px;
+	height: 15px;
+
+	background-color: red;
+
+	-webkit-mask-image: url("../../res/icons/lock.svg");
+	-webkit-mask-size: contain;
+	mask-image: url("../../res/icons/lock.svg");
+	mask-size: contain;
+}
+
+/* The separator */
+#ui-toolbar .separator {
+	width: 80%;
+	margin: auto;
+	align-self: center;
+	border-top: 1px var(--c-hover) solid;
+}
+
+/* Styles for the tool buttons */
+#ui-toolbar .tool {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	aspect-ratio: 1;
+	margin: 5px;
+	border-radius: 5px;
+
+	cursor: pointer;
+
+	transition-duration: 50ms;
+}
+
+#ui-toolbar .tool.using {
+	background-color: var(--c-active);
+}
+
+#ui-toolbar .tool:hover {
+	background-color: var(--c-hover);
+}
+
+#ui-toolbar .tool:active {
+	background-color: var(--c-hover);
+	filter: brightness(120%);
+}

extensions/openOutpaint-webUI-extension/app/css/ui/workspace.css

@@ -0,0 +1,59 @@
+#workspace-select input.autocomplete-text {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+
+	padding-left: 5px;
+
+	border: none;
+
+	text-overflow: ellipsis;
+}
+
+#workspace-select-area .buttons > *:last-child {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+.workspace-btn {
+	cursor: pointer;
+
+	border: 0;
+	width: 21px;
+	height: 21px;
+
+	background-color: var(--c-primary);
+}
+
+.workspace-btn:disabled {
+	cursor: default;
+	background-color: var(--c-disabled) !important;
+}
+
+.workspace-btn:hover {
+	background-color: var(--c-hover);
+}
+
+.workspace-btn:active {
+	background-color: var(--c-active);
+}
+
+.workspace-collapsible {
+	position: relative;
+
+	width: 0;
+	overflow: visible;
+}
+
+.workspace-collapsible > *:first-child {
+	display: flex;
+
+	width: fit-content;
+	height: 21px;
+
+	transition-duration: 50ms;
+}
+
+.workspace-collapsible.collapsed > *:first-child {
+	width: 0 !important;
+	overflow: hidden !important;
+}

extensions/openOutpaint-webUI-extension/app/defaultscripts.json

@@ -0,0 +1,16 @@
+{
+	"defaultScripts": {
+		"Loopback": {
+			"titleText": "IMG2IMG ONLY\n\nParams:\nloops (int) //def: 8\ndenoising_strength_change_factor (decimal, 0.90-1.10) //def: 0.99\nappend_interrogation (enum, str: [\"None\",\"CLIP\",\"DeepBooru\"]) //def: None",
+			"scriptValues": "[8, 0.99, \"None\"]"
+		},
+		"Prompt matrix": {
+			"titleText": "Params:\nput_at_start (bool): expect pipe (|) delimited options at start of prompt //def: false\ndifferent_seeds (bool): use different seeds for each picture //def: false\nprompt_type (enum, str: [\"positive\",\"negative\"]) //def: \"positive\"\nvariations_delimiter (enum, str [\"comma\", \"space\"] //def: \"comma\"\nmargin_size (int): px margin value //def: 2",
+			"scriptValues": "[false, false, \"positive\", \"comma\", 2]"
+		},
+		"X/Y/Z plot": {
+			"titleText": "Params:\nx_type (int): index of axis type (see below) //def: 3\nx_values (mixed, str) //def: \"0.00-0.99 [4]\"\nx_values_dropdown (NOIDEA) //def: \"\"\ny_type (int) //def: 4\ny_values (mixed, str) //def: \"5-30 [4]\"\ny_values_dropdown (NOIDEA) //def: \"\"\nz_type (int) //def: 6\nz_values (mixed, str) //def: \"2.5-12.5 [4]\"\nz_values_dropdown (NOIDEA) //def: \"\"\ndraw_legend (bool): return grid of all images //def: false\ninclude_lone_images (bool): return individual images //def: true\ninclude_subgrids (bool) //def: false\nno_fixed_seeds (bool): use different seeds for each picture //def: false\nmargin_size (int): grid margins in px //def: 2\n\nAvailable axis types:\n0: Nothing\n1: Seed\n2: Var. seed\n3: Var. strength\n4: Steps\n5: Hires steps (txt2img only)\n6: CFG Scale\n7: Image CFG Scale (img2img with instructPix2Pix only)\n8: Prompt S/R\n9: Prompt order\n10: Sampler (txt2img only)\n11: Sampler (img2img only)\n12: Checkpoint Name\n13: Negative Guidance minimum sigma\n14: Sigma Churn\n15: Sigma min\n16: Sigma max\n17: Sigma noise\n18: Schedule Type\n19: Schedule min sigma\n20:Schedule max sigma\n21: Schedule rho\n22: Eta\n23: Clip skip\n24: Denoising\n25: Hires upscaler (txt2img only)\n26: Cond. Image Mask Weight (img2img only)\n27: VAE\n23: Styles\n28: UniPC Order\n29: Face Restore\n30: Token merging ratio\n31: Token merging ratio hi-res",
+			"scriptValues": "[3, \"0.00-0.99 [4]\", \"\", 4, \"5-30 [4]\", \"\", 6, \"2.5-12.5 [4]\", \"\", false, true, false, false, 2]"
+		}
+	}
+}

extensions/openOutpaint-webUI-extension/app/index.html

@@ -0,0 +1,591 @@
+<!doctype html>
+<html lang="en-US">
+	<head>
+		<meta charset="utf-8" />
+		<title>openOutpaint 🐠</title>
+		<!-- CSS Variables -->
+		<link href="css/colors.css?v=f732f19" rel="stylesheet" />
+		<link href="css/icons.css?v=e6f94af" rel="stylesheet" />
+
+		<link href="css/index.css?v=a1f5bff" rel="stylesheet" />
+		<link href="css/layers.css?v=92c0352" rel="stylesheet" />
+
+		<link href="css/ui/generic.css?v=30837f8" rel="stylesheet" />
+
+		<link href="css/ui/notifications.css?v=7b152de" rel="stylesheet" />
+		<link href="css/ui/workspace.css?v=2a9fdf7" rel="stylesheet" />
+		<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
+		<link href="css/ui/layers.css?v=1d66c2b" rel="stylesheet" />
+		<link href="css/ui/toolbar.css?v=109c78f" rel="stylesheet" />
+
+		<!-- Tool Specific CSS -->
+		<link href="css/ui/tool/dream.css?v=2d8a8ac" rel="stylesheet" />
+		<link href="css/ui/tool/stamp.css?v=6f5ce15" rel="stylesheet" />
+		<link href="css/ui/tool/colorbrush.css?v=57c8be5" rel="stylesheet" />
+
+		<link rel="icon" type="image/x-icon" href="favicon.ico" />
+	</head>
+
+	<body>
+		<!-- Main Toolbar -->
+		<div
+			id="infoContainer"
+			class="floating-window"
+			style="left: 10px; top: 10px">
+			<div id="infoTitleBar" class="draggable floating-window-title">
+				openOutpaint 🐠
+				<div style="flex: 1"></div>
+				<button id="settings-btn" class="ui icon header-button">
+					<div class="icon-settings"></div>
+				</button>
+			</div>
+			<div id="info" class="menu-container" style="min-width: 200px">
+				<div
+					id="workspace-select-area"
+					style="display: flex; margin-bottom: 5px">
+					<div id="workspace-select"></div>
+					<div class="buttons" style="display: flex">
+						<button
+							id="save-workspace-btn"
+							class="ui inline-icon icon-save workspace-btn"
+							title="Save Workspace"></button>
+						<button
+							id="rename-workspace-btn"
+							class="ui inline-icon icon-pencil workspace-btn"
+							title="Rename Workspace"></button>
+						<button
+							id="more-workspace-btn"
+							class="ui inline-icon icon-more-horizontal workspace-btn"
+							title="More Options"></button>
+						<div
+							id="more-workspace-menu"
+							class="workspace-collapsible collapsed">
+							<div>
+								<button
+									id="export-workspace-btn"
+									class="ui inline-icon icon-download workspace-btn"
+									title="Export Workspace"></button>
+								<button
+									id="import-workspace-btn"
+									class="ui inline-icon icon-upload workspace-btn"
+									title="Import Workspace"></button>
+								<button
+									id="delete-workspace-btn"
+									class="ui inline-icon icon-trash workspace-btn"
+									title="Delete Workspace"></button>
+							</div>
+							<div style="width: 5px; background-color: var(--c-primary)"></div>
+						</div>
+						<div style="width: 5px; background-color: var(--c-primary)"></div>
+					</div>
+				</div>
+
+				<div class="host-field-wrapper">
+					<div class="host-field">
+						<div class="label">Host</div>
+						<input id="host" value="http://127.0.0.1:7860" />
+					</div>
+					<div
+						id="connection-status-indicator"
+						class="connection-status before">
+						<span id="connection-status-indicator-text">Waiting</span>
+					</div>
+				</div>
+
+				<!-- Prompts section -->
+				<button type="button" class="collapsible">Prompts</button>
+				<div class="content prompt">
+					<div class="inputs">
+						<div class="prompt-wrapper">
+							<div class="prompt-indicator positive" title="Prompt"></div>
+							<textarea id="prompt" class="expandable"></textarea>
+						</div>
+						<div class="prompt-wrapper">
+							<div
+								class="prompt-indicator negative"
+								title="Negative Prompt"></div>
+							<textarea id="negPrompt" class="expandable"></textarea>
+						</div>
+						<div class="prompt-wrapper">
+							<div class="prompt-indicator styles" title="Styles"></div>
+							<div id="style-ac-mselect" style="flex-shrink: 1"></div>
+						</div>
+					</div>
+					<div class="prompt-history-wrapper">
+						<div class="prompt-history-container">
+							<div id="prompt-history"></div>
+							<button
+								id="prompt-history-btn"
+								class="prompt-history-btn"></button>
+						</div>
+					</div>
+				</div>
+				<!-- SD section -->
+				<button type="button" class="collapsible">
+					Stable Diffusion settings
+				</button>
+				<div class="content">
+					<label>Model:</label>
+					<div id="models-ac-select"></div>
+					<button id="refreshModelsBtn" onclick="getModels(true)">
+						<img
+							class="refreshbutton"
+							src="./res/icons/refresh-cw.svg?v=f627140"
+							alt="refresh models"
+							title="refresh models" />
+					</button>
+					<label>Sampler:</label>
+					<div id="sampler-ac-select"></div>
+					<label for="seed">Seed (-1 for random):</label>
+					<br />
+					<input
+						type="number"
+						id="seed"
+						onchange="changeSeed()"
+						min="-1"
+						max="99999999999999999999"
+						value="-1"
+						step="1" />
+					<br />
+					<label>Lora:</label>
+					<div id="lora-ac-select"></div>
+					<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
+					<label for="cbxHRFix">Apply Txt2Img HRfix</label>
+					<br />
+					<input
+						type="checkbox"
+						id="cbxHRFSquare"
+						onchange="changeHiResSquare()"
+						class="hrfix" />
+					<label for="cbxHRFSquare" class="hrfix">
+						Square Firstpass Aspect
+					</label>
+					<br class="hrfix" />
+					<div id="hrFixScale" class="hrfix"></div>
+					<div id="hrFixLockPx" class="hrfix"></div>
+					<div id="hrFixSteps" class="hrfix"></div>
+					<label id="hrFixLabel" class="hrfix">Choose HRfix upscaler</label>
+					<div id="hrFixUpscaler" class="hrfix"></div>
+					<div id="hrDenoising" class="hrfix"></div>
+					<input
+						type="checkbox"
+						id="cbxRestoreFaces"
+						onchange="changeRestoreFaces()" />
+					<label for="cbxRestoreFaces">Restore Faces</label>
+					<br />
+					<input
+						type="checkbox"
+						id="cbxSyncCursorSize"
+						onchange="changeSyncCursorSize()" />
+					<label for="cbxSyncCursorSize">Sync cursor size</label>
+					<br />
+					<div id="resolution"></div>
+					<div id="steps"></div>
+					<div id="cfgScale"></div>
+					<div id="batchSize"></div>
+					<div id="batchCount"></div>
+					<label for="maskBlur">Mask blur:</label>
+					<span id="maskBlurText"></span>
+					<br />
+					<input
+						type="number"
+						id="maskBlur"
+						name="maskBlur"
+						min="0"
+						max="256"
+						value="0"
+						step="1"
+						onchange="changeMaskBlur()" />
+				</div>
+				<!-- Extensions section -->
+				<button type="button" class="collapsible">Extensions</button>
+				<div class="content">
+					<input
+						type="checkbox"
+						id="cbxDynPrompts"
+						onchange="changeDynamicPromptsExtension()"
+						disabled="disabled" />
+					<label for="cbxDynPrompts">Dynamic Prompts</label>
+					<br />
+					<input
+						type="checkbox"
+						id="cbxControlNet"
+						onchange="changeControlNetExtension()"
+						disabled="disabled" />
+					<label for="cbxControlNet">ControlNet In/Outpainting</label>
+					<br class="controlNetElement" />
+					<label id="cnModuleLabel" class="controlNetElement">
+						Inpaint Preprocessor
+					</label>
+					<div id="controlNetModule-ac-select" class="controlNetElement"></div>
+					<label id="cnModelLabel" class="controlNetElement">Model</label>
+					<div id="controlNetModel-ac-select" class="controlNetElement"></div>
+					<label id="cnControlLabel" class="controlNetElement">
+						Inpaint Mode
+					</label>
+					<select id="controlNetMode-select" class="controlNetElement">
+						<option value="Balanced">balanced</option>
+						<option value="My prompt is more important">+prompt</option>
+						<option value="ControlNet is more important">+CN</option>
+					</select>
+					<br class="controlNetElement" />
+					<label id="cnResizeLabel" class="controlNetElement">
+						Resize Mode
+					</label>
+					<select id="controlNetResize-select" class="controlNetElement">
+						<option value="Just Resize">resize</option>
+						<option value="Crop and Resize">+crop</option>
+						<option value="Resize and Fill">+fill</option>
+					</select>
+					<br class="controlNetElement" />
+					<input
+						type="checkbox"
+						id="cbxControlNetReferenceLayer"
+						onchange="changeControlNetReference()"
+						class="controlNetElement" />
+					<label for="cbxControlNetReferenceLayer" class="controlNetElement">
+						Reference as 1st CN Unit
+					</label>
+					<br class="controlNetReferenceElement" />
+					<label id="cnReferenceModuleLabel" class="controlNetReferenceElement">
+						Reference Preprocessor
+					</label>
+					<div
+						id="controlNetReferenceModule-ac-select"
+						class="controlNetReferenceElement"></div>
+					<div
+						id="controlNetReferenceFidelity"
+						class="controlNetReferenceElement"></div>
+					<label id="cnResizeLabel" class="controlNetReferenceElement">
+						Reference Mode
+					</label>
+					<select
+						id="controlNetReferenceMode-select"
+						class="controlNetReferenceElement">
+						<option value="Balanced">balanced</option>
+						<option value="My prompt is more important">+prompt</option>
+						<option value="ControlNet is more important">+CN</option>
+					</select>
+				</div>
+				<!-- Save/load image section -->
+				<button type="button" class="collapsible">Save/Upscaling</button>
+				<div class="content">
+					<button onclick="downloadCanvas()">Save canvas</button>
+					<br />
+					<label>Choose upscaler</label>
+					<div id="upscaler-ac-select"></div>
+					<div id="upscaleX"></div>
+					<button onclick="upscaleAndDownload()">
+						Upscale (might take a sec)
+					</button>
+					<br />
+
+					<button onclick="newImage()">Clear canvas</button>
+				</div>
+				<!-- Debug info -->
+				<button type="button" class="collapsible">Debug info</button>
+				<div id="coords" class="content">
+					<label for="mouseX">mouseX:</label>
+					<span id="mouseX"></span>
+					<br />
+					<label for="mouseY">mouseY:</label>
+					<span id="mouseY"></span>
+					<br />
+					<label for="canvasX">canvasX:</label>
+					<span id="canvasX"></span>
+					<br />
+					<label for="canvasY">canvasY:</label>
+					<span id="canvasY"></span>
+					<br />
+					<label for="snapX">snapX:</label>
+					<span id="snapX"></span>
+					<br />
+					<label for="snapY">snapY:</label>
+					<span id="snapY"></span>
+					<br />
+					<label for="heldButton">Mouse button:</label>
+					<span id="heldButton"></span>
+					<br />
+					<button id="resetToDefaults" onclick="resetToDefaults()">
+						Reset to defaults
+					</button>
+					<button id="toggleDebugBtn" onclick="global.toggledebug()">
+						Toggle Debug
+					</button>
+					<br />
+					<span id="version">
+						<a href="https://github.com/zero01101/openOutpaint" target="_blank">
+							<s>Alpha release v0.0.16.5</s>
+							v20230812.001
+						</a>
+						<br />
+						<a
+							href="https://github.com/zero01101/openOutpaint/wiki/Manual"
+							target="_blank">
+							User Manual
+						</a>
+					</span>
+					<br />
+					<!-- <hr /> -->
+				</div>
+				<div style="display: flex; align-items: center">
+					<div
+						style="
+							flex: 1;
+							border-top: 1px black solid;
+							margin-right: 10px;
+						"></div>
+					Context Menu
+					<div
+						style="
+							flex: 1;
+							border-top: 1px black solid;
+							margin-left: 10px;
+						"></div>
+				</div>
+				<div id="tool-context" class="context-menu"></div>
+			</div>
+		</div>
+
+		<!-- History -->
+		<div id="ui-history" class="floating-window" style="right: 10px; top: 10px">
+			<div class="draggable floating-window-title">
+				History
+				<div style="flex: 1"></div>
+				<button
+					id="history-logs-btn"
+					class="ui icon header-button"
+					title="Generate History Log">
+					<div class="icon-scroll"></div>
+				</button>
+			</div>
+			<div class="menu-container" style="min-width: 200px">
+				<div id="history" class="history"></div>
+				<div class="button-array" style="padding: 10px">
+					<button type="button" onclick="commands.undo()" class="button tool">
+						undo
+					</button>
+					<button type="button" onclick="commands.redo()" class="button tool">
+						redo
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Layers -->
+		<div
+			id="ui-layers"
+			class="floating-window"
+			style="right: 10px; bottom: 10px">
+			<div class="draggable floating-window-title">
+				Layers
+				<div style="flex: 1"></div>
+				<button
+					id="unzoom-btn"
+					class="ui icon header-button"
+					title="Reset Zoom to 1x"
+					onclick="unzoom()">
+					<div class="icon-unzoom"></div>
+				</button>
+			</div>
+			<div class="menu-container" style="min-width: 200px">
+				<div class="layer-manager">
+					<div id="layer-list" class="layer-list"></div>
+					<div class="ui separator"></div>
+					<div class="layer-list-actions">
+						<button
+							type="button"
+							title="Add Layer"
+							onclick="commands.runCommand('addLayer', 'Added Layer', {})"
+							class="ui icon button">
+							<div class="icon-file-plus"></div>
+						</button>
+
+						<button
+							type="button"
+							title="Move Layer Up"
+							onclick="commands.runCommand('moveLayer', 'Moved Layer Up',{delta: 1})"
+							class="ui icon button">
+							<div class="icon-chevron-up"></div>
+						</button>
+
+						<button
+							type="button"
+							title="Move Layer Down"
+							onclick="commands.runCommand('moveLayer', 'Moved Layer Down', {delta: -1})"
+							class="ui icon button">
+							<div class="icon-chevron-down"></div>
+						</button>
+
+						<button
+							type="button"
+							title="Merge Layer Down"
+							onclick="commands.runCommand('mergeLayer', 'Merged Layer Down')"
+							class="ui icon button">
+							<div class="icon-chevron-flat-down"></div>
+						</button>
+
+						<button
+							type="button"
+							title="Delete Layer"
+							onclick="commands.runCommand('deleteLayer', 'Deleted Layer')"
+							class="ui icon button">
+							<div class="icon-file-x"></div>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Scripts-->
+		<div
+			id="ui-script"
+			class="floating-window"
+			style="right: 10px; top: 330px; display: none">
+			<div class="draggable floating-window-title">Script</div>
+			<div class="menu-container" style="min-width: 200px">
+				<div id="script-select" class="script-select">
+					<select id="script-selector" onchange="changeScript(event)">
+						<!-- <option id="no_selected_script" value="">Select a script...</option>
+						<option id="custom" value="custom">Custom</option> -->
+					</select>
+					<!-- <button
+						id="save-custom-script"
+						disabled="disabled"
+						title="Save custom script"
+						onclick="saveCustomScript()">
+						<image src="./res/icons/save.svg" width="60%"></image>
+					</button> -->
+				</div>
+				<div id="script-name" class="script-name">
+					<label for="script-name-input">Script Name:</label>
+					<br />
+					<input
+						id="script-name-input"
+						disabled="disabled"
+						onfocusout="storeUserscriptVal(event, 'name')" />
+					<br />
+				</div>
+				<div id="script-args" class="script-args">
+					<label for="script-args-input">Script Args List:</label>
+					<br />
+					<textarea
+						id="script-args-input"
+						onfocusout="storeUserscriptVal(event, 'args')"></textarea>
+					<br />
+				</div>
+			</div>
+		</div>
+
+		<!-- Toolbar -->
+		<div
+			id="ui-toolbar"
+			class="floating-window toolbar"
+			style="right: 270px; top: 10px">
+			<div class="draggable handle">
+				<span class="line"></span>
+			</div>
+			<div class="lock-indicator" id="toolbar-lock-indicator"></div>
+			<div class="toolbar-section"></div>
+		</div>
+
+		<!-- Canvases -->
+		<div id="layer-render" class="layer-render-target"></div>
+
+		<!-- Overlay -->
+		<canvas id="layer-overlay" class="overlay-canvas"></canvas>
+		<canvas id="layer-debug-overlay" class="overlay-canvas"></canvas>
+
+		<!-- Page Overlay -->
+		<div id="page-overlay-wrapper" class="page-overlay invisible">
+			<div class="page-overlay-window">
+				<div class="title">
+					Settings
+					<button id="settings-btn-close" class="close"></button>
+				</div>
+				<div class="ui separator"></div>
+				<iframe
+					id="page-overlay"
+					src="pages/configuration.html?v=fdbd833"></iframe>
+			</div>
+		</div>
+
+		<!-- Basics -->
+		<script src="js/global.js?v=ac30d16" type="text/javascript"></script>
+		<script src="js/defaults.js?v=5b06818" type="text/javascript"></script>
+		<script src="js/extensions.js?v=0bd1fbe" type="text/javascript"></script>
+
+		<!-- Base Libs -->
+		<script src="js/lib/util.js?v=379aef7" type="text/javascript"></script>
+		<script
+			src="js/lib/notifications.js?v=270db88"
+			type="text/javascript"></script>
+		<script src="js/lib/events.js?v=2ab7933" type="text/javascript"></script>
+		<script src="js/lib/db.js?v=434363b" type="text/javascript"></script>
+		<script src="js/lib/input.js?v=769485c" type="text/javascript"></script>
+		<script src="js/lib/layers.js?v=26b7436" type="text/javascript"></script>
+		<script src="js/lib/commands.js?v=ad60afc" type="text/javascript"></script>
+
+		<script src="js/lib/toolbar.js?v=4fcf718" type="text/javascript"></script>
+		<script src="js/lib/ui.js?v=17014b3" type="text/javascript"></script>
+
+		<script
+			src="js/initalize/layers.populate.js?v=066dc8e"
+			type="text/javascript"></script>
+
+		<!-- Configuration -->
+		<script src="js/config.js?v=9747005" type="text/javascript"></script>
+		<script src="js/theme.js?v=435cc1b" type="text/javascript"></script>
+
+		<!-- Content -->
+		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
+		<script src="js/index.js?v=d4006e8" type="text/javascript"></script>
+
+		<script
+			src="js/ui/floating/history.js?v=4f29db4"
+			type="text/javascript"></script>
+		<script
+			src="js/ui/floating/layers.js?v=3f5807f"
+			type="text/javascript"></script>
+
+		<!-- Load Tools -->
+		<script
+			src="js/ui/tool/generic.js?v=3e678e0"
+			type="text/javascript"></script>
+
+		<script src="js/ui/tool/dream.js?v=95bd3f0" type="text/javascript"></script>
+		<script
+			src="js/ui/tool/maskbrush.js?v=e9bd0eb"
+			type="text/javascript"></script>
+		<script
+			src="js/ui/tool/colorbrush.js?v=84ff9fa"
+			type="text/javascript"></script>
+		<script
+			src="js/ui/tool/select.js?v=dfacef5"
+			type="text/javascript"></script>
+		<script src="js/ui/tool/stamp.js?v=4494df6" type="text/javascript"></script>
+		<script
+			src="js/ui/tool/interrogate.js?v=dd45b4a"
+			type="text/javascript"></script>
+
+		<!-- Initialize -->
+		<script
+			src="js/initalize/workspace.populate.js?v=925431d"
+			type="text/javascript"></script>
+		<script
+			src="js/initalize/shortcuts.populate.js?v=e68546f"
+			type="text/javascript"></script>
+		<script
+			src="js/initalize/toolbar.populate.js?v=c1ca438"
+			type="text/javascript"></script>
+		<script
+			src="js/initalize/debug.populate.js?v=64ad17f"
+			type="text/javascript"></script>
+		<script
+			src="js/initalize/ui.populate.js?v=b59b288"
+			type="text/javascript"></script>
+
+		<!-- Deals with webui communication -->
+		<script src="js/webui.js?v=ccd423a" type="text/javascript"></script>
+	</body>
+</html>

extensions/openOutpaint-webUI-extension/app/js/config.js

@@ -0,0 +1,52 @@
+/**
+ * This is a file for static unchanging global configurations.
+ *
+ * Do NOT confuse with settings, which are modifiable by either the settings menu, or in the application itself.
+ */
+const config = makeReadOnly(
+	{
+		// Grid Size
+		gridSize: 64,
+
+		// Scroll Tick Limit (How much must scroll to reach next tick)
+		wheelTickSize: 50,
+
+		/** Select Tool */
+		// Handle Draw Size
+		handleDrawSize: 12,
+		// Handle Draw Hover Scale
+		handleDrawHoverScale: 1.3,
+		// Handle Detect Size
+		handleDetectSize: 20,
+		// Rotate Handle Distance (from selection)
+		rotateHandleDistance: 32,
+
+		// Rotation Snapping Distance
+		rotationSnappingDistance: (10 * Math.PI) / 180,
+		// Rotation Snapping Angles
+		rotationSnappingAngles: [
+			(-Math.PI * 4) / 4,
+			(-Math.PI * 3) / 4,
+			(-Math.PI * 2) / 4,
+			(-Math.PI * 1) / 4,
+			0,
+			(Math.PI * 1) / 4,
+			(Math.PI * 2) / 4,
+			(Math.PI * 3) / 4,
+			(Math.PI * 4) / 4,
+		],
+
+		// Endpoint
+		api: makeReadOnly({path: "/sdapi/v1/"}),
+
+		// Default notification timeout
+		notificationTimeout: 8000,
+		notificationHighlightAnimationDuration: 200,
+
+		/**
+		 * Interrogate Tool
+		 */
+		interrogateToolNotificationTimeout: 120000, // Default is two minutes
+	},
+	"config"
+);

extensions/openOutpaint-webUI-extension/app/js/defaults.js

@@ -0,0 +1,28 @@
+/**
+ * Default settings for local configurations
+ */
+const localDefaults = {
+	/** Default Host */
+	host: "http://127.0.0.1:7860",
+};
+
+/**
+ * Default settings for workspace configurations
+ */
+const workspaceDefaults = {
+	/** Default Prompt - REQ */
+	prompt: "ocean floor scientific expedition, underwater wildlife",
+	/** Default Negative Prompt - REQ */
+	neg_prompt:
+		"people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry",
+	/** Default Stable Diffusion Seed - REQ */
+	seed: -1,
+
+	/** Default CFG Scale - REQ */
+	cfg_scale: 7.0,
+	/** Default steps - REQ */
+	steps: 30,
+
+	/** Default Resolution */
+	resolution: 512,
+};

extensions/openOutpaint-webUI-extension/app/js/extensions.js

@@ -0,0 +1,196 @@
+/**
+ * Extensions helper thing or class or whatever
+ */
+
+const extensions = {
+	// alwaysOnScriptsData: {},
+	alwaysOnScripts: false,
+	controlNetEnabled: false,
+	controlNetActive: false,
+	controlNetReferenceActive: false,
+	controlNetReferenceFidelity: 0.5,
+	selectedControlNetModel: null,
+	selectedControlNetModule: null,
+	selectedCNReferenceModule: null,
+	controlNetModelCount: 0,
+	dynamicPromptsEnabled: false,
+	dynamicPromptsActive: false,
+	dynamicPromptsAlwaysonScriptName: null, //GRUMBLE GRUMBLE
+	enabledExtensions: [],
+	controlNetModels: null,
+	controlNetModules: null,
+
+	async getExtensions(
+		controlNetModelAutoComplete,
+		controlNetModuleAutoComplete,
+		controlNetReferenceModuleAutoComplete
+	) {
+		const allowedExtensions = [
+			"controlnet",
+			// "none",
+			// "adetailer", // no API, can't verify available models
+			"dynamic prompts", //seriously >:( why put version in the name, now i have to fuzzy match it - just simply enabled or not? no API but so so good
+			//"segment anything", // ... API lets me get model but not processor?!?!?!
+			//"self attention guidance", // no API but useful, just enabled button, scale and threshold sliders?
+		];
+		// check http://127.0.0.1:7860/sdapi/v1/scripts for extensions
+		// if any of the allowed extensions are found, add them to the list
+		var url = document.getElementById("host").value + "/sdapi/v1/scripts";
+		try {
+			const response = await fetch(url);
+			const data = await response.json();
+			// enable checkboxes for extensions based on existence in data
+			data.img2img
+				.filter((extension) => {
+					return allowedExtensions.some((allowedExtension) => {
+						return extension.toLowerCase().includes(allowedExtension);
+					});
+				})
+				.forEach((extension) => {
+					this.enabledExtensions.push(extension);
+				});
+		} catch (e) {
+			console.warn("[index] Failed to fetch extensions");
+			console.warn(e);
+		}
+		this.checkForDynamicPrompts();
+		this.checkForControlNet(
+			controlNetModelAutoComplete,
+			controlNetModuleAutoComplete,
+			controlNetReferenceModuleAutoComplete
+		);
+		//checkForSAM(); //or inpaintAnything or something i dunno
+		//checkForADetailer(); //? this one seems iffy
+		//checkForSAG(); //??
+	},
+
+	async checkForDynamicPrompts() {
+		if (
+			this.enabledExtensions.filter((e) => e.includes("dynamic prompts"))
+				.length > 0
+		) {
+			// Dynamic Prompts found, enable checkbox
+			this.alwaysOnScripts = true;
+			this.dynamicPromptsAlwaysonScriptName =
+				this.enabledExtensions[
+					this.enabledExtensions.findIndex((e) => e.includes("dynamic prompts"))
+				];
+			// this.alwaysOnScriptsData[this.dynamicPromptsAlwaysonScriptName] = {};
+			this.dynamicPromptsEnabled = true;
+			document.getElementById("cbxDynPrompts").disabled = false;
+		}
+		// basically param 0 is true for on, false for off, that's it
+	},
+
+	async checkForControlNet(
+		controlNetModelAutoComplete,
+		controlNetModuleAutoComplete,
+		controlNetReferenceModuleAutoComplete
+	) {
+		var url = document.getElementById("host").value + "/controlnet/version";
+
+		if (
+			this.enabledExtensions.filter((e) => e.includes("controlnet")).length > 0
+		) {
+			try {
+				const response = await fetch(url);
+				const data = await response.json();
+
+				if (data.version > 0) {
+					// ControlNet found
+					this.alwaysOnScripts = true;
+					this.controlNetEnabled = true;
+					document.getElementById("cbxControlNet").disabled = false;
+					// ok cool so now we can get the models and modules
+					this.getModels(controlNetModelAutoComplete);
+					this.getModules(
+						controlNetModuleAutoComplete,
+						controlNetReferenceModuleAutoComplete
+					);
+				}
+				url = document.getElementById("host").value + "/controlnet/settings";
+				try {
+					const response2 = await fetch(url);
+					const data2 = await response2.json();
+					if (data2.control_net_max_models_num < 2) {
+						document.getElementById("cbxControlNetReferenceLayer").disabled =
+							"disabled";
+						console.warn(
+							"[extensions] ControlNet reference layer disabled due to insufficient units enabled in settings - cannot be enabled via API, please increase to at least 2 units manually"
+						);
+					}
+				} catch (ex) {}
+			} catch (e) {
+				// ??
+				global.controlnetAPI = false;
+			}
+		} else {
+			global.controlnetAPI = false;
+		}
+	},
+	async getModels(controlNetModelAutoComplete) {
+		// only worry about inpaint models for now
+		var url = document.getElementById("host").value + "/controlnet/model_list";
+
+		try {
+			const response = await fetch(url);
+			const data = await response.json();
+
+			this.controlNetModels = data.model_list;
+		} catch (e) {
+			console.warn("[extensions] Failed to fetch controlnet models");
+			console.warn(e);
+		}
+
+		let opt = null;
+		opt = this.controlNetModels
+			.filter((m) => m.includes("inpaint"))
+			.map((option) => ({
+				name: option,
+				value: option,
+			}));
+
+		controlNetModelAutoComplete.options = opt;
+	},
+	async getModules(
+		controlNetModuleAutoComplete,
+		controlNetReferenceModuleAutoComplete
+	) {
+		const allowedModules = ["reference", "inpaint"];
+		var url = document.getElementById("host").value + "/controlnet/module_list";
+
+		try {
+			const response = await fetch(url);
+			const data = await response.json();
+
+			this.controlNetModules = data;
+		} catch (e) {
+			console.warn("[extensions] Failed to fetch controlnet modules");
+			console.warn(e);
+		}
+
+		let opt = null;
+		opt = this.controlNetModules.module_list
+			.filter((m) => m.includes("inpaint")) // why is there just "inpaint" in the modules if it's not in the ui
+			.map((option) => ({
+				name: option,
+				value: option,
+			}));
+
+		opt.push({
+			name: "inpaint_global_harmonious",
+			value: "inpaint_global_harmonious", // WTF WHY IS THIS ONE NOT LISTED IN MODULES BUT DISTINCT IN THE API CALL?!?!?!??!??! it is slightly different from "inpaint" from what i can tell
+		});
+
+		controlNetModuleAutoComplete.options = opt;
+
+		opt = this.controlNetModules.module_list
+			.filter((m) => m.includes("reference"))
+			.map((option) => ({
+				name: option,
+				value: option,
+			}));
+
+		controlNetReferenceModuleAutoComplete.options = opt;
+	},
+};

extensions/openOutpaint-webUI-extension/app/js/global.js

@@ -0,0 +1,61 @@
+/**
+ * Stores global variables without polluting the global namespace.
+ */
+
+const global = {
+	// If this is the first run of openOutpaint
+	get firstRun() {
+		return this._firstRun;
+	},
+
+	// Connection
+	_connection: "offline",
+	set connection(v) {
+		this._connection = v;
+
+		toolbar &&
+			toolbar.currentTool &&
+			toolbar.currentTool.state.redraw &&
+			toolbar.currentTool.state.redraw();
+	},
+	get connection() {
+		return this._connection;
+	},
+
+	// If there is a selected input
+	hasActiveInput: false,
+
+	// If cursor size sync is enabled
+	syncCursorSize: false,
+
+	// If debugging is enabled
+	_debug: false,
+	set debug(v) {
+		if (debugLayer) {
+			if (v) {
+				debugLayer.unhide();
+			} else {
+				debugLayer.hide();
+			}
+		}
+
+		this._debug = v;
+	},
+	get debug() {
+		return this._debug;
+	},
+	/**
+	 * Toggles debugging.
+	 */
+	toggledebug() {
+		this.debug = !this.debug;
+	},
+
+	// HRFix compatibility shenanigans
+	isOldHRFix: false,
+
+	// WebUI object to communitate with parent window
+	webui: null,
+};
+
+global._firstRun = !localStorage.getItem("openoutpaint/host");

extensions/openOutpaint-webUI-extension/app/js/index.js

@@ -0,0 +1,1685 @@
+//TODO FIND OUT WHY I HAVE TO RESIZE A TEXTBOX AND THEN START USING IT TO AVOID THE 1px WHITE LINE ON LEFT EDGES DURING IMG2IMG
+//...lmao did setting min width 200 on info div fix that accidentally?  once the canvas is infinite and the menu bar is hideable it'll probably be a problem again
+
+/**
+ * Workaround for Firefox bug #733698
+ *
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=733698
+ *
+ * Workaround by https://github.com/subzey on https://gist.github.com/subzey/2030480
+ *
+ * Replaces and handles NS_ERROR_FAILURE errors triggered by 733698.
+ */
+(function () {
+	var FakeTextMetrics,
+		proto,
+		fontSetterNative,
+		measureTextNative,
+		fillTextNative,
+		strokeTextNative;
+
+	if (
+		!window.CanvasRenderingContext2D ||
+		!window.TextMetrics ||
+		!(proto = window.CanvasRenderingContext2D.prototype) ||
+		!proto.hasOwnProperty("font") ||
+		!proto.hasOwnProperty("mozTextStyle") ||
+		typeof proto.__lookupSetter__ !== "function" ||
+		!(fontSetterNative = proto.__lookupSetter__("font"))
+	) {
+		return;
+	}
+
+	proto.__defineSetter__("font", function (value) {
+		try {
+			return fontSetterNative.call(this, value);
+		} catch (e) {
+			if (e.name !== "NS_ERROR_FAILURE") {
+				throw e;
+			}
+		}
+	});
+
+	measureTextNative = proto.measureText;
+	FakeTextMetrics = function () {
+		this.width = 0;
+		this.isFake = true;
+		this.__proto__ = window.TextMetrics.prototype;
+	};
+	proto.measureText = function ($0) {
+		try {
+			return measureTextNative.apply(this, arguments);
+		} catch (e) {
+			if (e.name !== "NS_ERROR_FAILURE") {
+				throw e;
+			} else {
+				return new FakeTextMetrics();
+			}
+		}
+	};
+
+	fillTextNative = proto.fillText;
+	proto.fillText = function ($0, $1, $2, $3) {
+		try {
+			fillTextNative.apply(this, arguments);
+		} catch (e) {
+			if (e.name !== "NS_ERROR_FAILURE") {
+				throw e;
+			}
+		}
+	};
+
+	strokeTextNative = proto.strokeText;
+	proto.strokeText = function ($0, $1, $2, $3) {
+		try {
+			strokeTextNative.apply(this, arguments);
+		} catch (e) {
+			if (e.name !== "NS_ERROR_FAILURE") {
+				throw e;
+			}
+		}
+	};
+})();
+
+// Parse url parameters
+const urlParams = new URLSearchParams(window.location.search);
+
+window.onload = startup;
+
+var stableDiffusionData = {
+	//includes img2img data but works for txt2img just fine
+	prompt: "",
+	negative_prompt: "",
+	seed: -1,
+	cfg_scale: null,
+	sampler_index: "DDIM",
+	steps: null,
+	denoising_strength: 1,
+	mask_blur: 0,
+	batch_size: null,
+	width: 512,
+	height: 512,
+	n_iter: null, // batch count
+	mask: "",
+	init_images: [],
+	inpaint_full_res: false,
+	inpainting_fill: 1,
+	outpainting_fill: 2,
+	enable_hr: false,
+	restore_faces: false,
+	//firstphase_width: 0,
+	//firstphase_height: 0, //20230102 welp looks like the entire way HRfix is implemented has become bonkersly different
+	hr_scale: 2.0,
+	hr_upscaler: "None",
+	hr_second_pass_steps: 0,
+	hr_resize_x: 0,
+	hr_resize_y: 0,
+	hr_square_aspect: false,
+	styles: [],
+	// here's some more fields that might be useful
+
+	// ---txt2img specific:
+	// "enable_hr": false,   // hires fix
+	// "denoising_strength": 0, // ok this is in both txt and img2img but txt2img only applies it if enable_hr == true
+	// "firstphase_width": 0, // hires fp w
+	// "firstphase_height": 0, // see above s/w/h/
+
+	// ---img2img specific
+	// "init_images": [ // imageS!??!? wtf maybe for batch img2img?? i just dump one base64 in here
+	//     "string"
+	// ],
+	// "resize_mode": 0,
+	// "denoising_strength": 0.75, // yeah see
+	// "mask": "string", // string is just a base64 image
+	// "mask_blur": 4,
+	// "inpainting_fill": 0, // 0- fill, 1- orig, 2- latent noise, 3- latent nothing
+	// "inpaint_full_res": true,
+	// "inpaint_full_res_padding": 0, // px
+	// "inpainting_mask_invert": 0, // bool??????? wtf
+	// "include_init_images": false // ??????
+};
+
+// stuff things use
+var host = "";
+var url = "/sdapi/v1/";
+const basePixelCount = 64; //64 px - ALWAYS 64 PX
+var focused = true;
+let defaultScripts = {};
+let userScripts = {};
+
+function startup() {
+	testHostConfiguration();
+	loadSettings();
+
+	const hostEl = document.getElementById("host");
+	testHostConnection().then((checkConnection) => {
+		hostEl.onchange = () => {
+			host = hostEl.value.endsWith("/")
+				? hostEl.value.substring(0, hostEl.value.length - 1)
+				: hostEl.value;
+			hostEl.value = host;
+			localStorage.setItem("openoutpaint/host", host);
+			checkConnection();
+		};
+	});
+
+	drawBackground();
+	changeMaskBlur();
+	changeSmoothRendering();
+	changeSeed();
+	changeHiResFix();
+	changeHiResSquare();
+	changeRestoreFaces();
+	changeSyncCursorSize();
+	changeControlNetExtension();
+	changeControlNetReference();
+	checkFocus();
+	refreshScripts();
+}
+
+function setFixedHost(h, changePromptMessage) {
+	console.info(`[index] Fixed host to '${h}'`);
+	const hostInput = document.getElementById("host");
+	host = h;
+	hostInput.value = h;
+	hostInput.readOnly = true;
+	hostInput.style.cursor = "default";
+	hostInput.style.backgroundColor = "#ddd";
+	hostInput.addEventListener("dblclick", async () => {
+		if (await notifications.dialog("Host is Locked", changePromptMessage)) {
+			hostInput.style.backgroundColor = null;
+			hostInput.style.cursor = null;
+			hostInput.readOnly = false;
+			hostInput.focus();
+		}
+	});
+}
+
+/**
+ * Initial connection checks
+ */
+function testHostConfiguration() {
+	/**
+	 * Check host configuration
+	 */
+	const hostEl = document.getElementById("host");
+	hostEl.value = localStorage.getItem("openoutpaint/host");
+
+	const requestHost = (prompt, def = "http://127.0.0.1:7860") => {
+		let value = null;
+
+		if (!urlParams.has("noprompt")) value = window.prompt(prompt, def);
+		if (value === null) value = def;
+
+		value = value.endsWith("/") ? value.substring(0, value.length - 1) : value;
+		host = value;
+		hostEl.value = host;
+		localStorage.setItem("openoutpaint/host", host);
+	};
+
+	const current = localStorage.getItem("openoutpaint/host");
+	if (current) {
+		if (!current.match(/^https?:\/\/[a-z0-9][a-z0-9.]+[a-z0-9](:[0-9]+)?$/i))
+			requestHost(
+				"Host seems to be invalid! Please fix your host here:",
+				current
+			);
+		else
+			host = current.endsWith("/")
+				? current.substring(0, current.length - 1)
+				: current;
+	} else {
+		requestHost(
+			"This seems to be the first time you are using openOutpaint! Please set your host here:"
+		);
+	}
+}
+
+async function testHostConnection() {
+	class CheckInProgressError extends Error {}
+
+	const connectionIndicator = document.getElementById(
+		"connection-status-indicator"
+	);
+
+	let connectionStatus = false;
+	let firstTimeOnline = true;
+
+	const setConnectionStatus = (status) => {
+		const connectionIndicatorText = document.getElementById(
+			"connection-status-indicator-text"
+		);
+
+		const statuses = {
+			online: () => {
+				connectionIndicator.classList.add("online");
+				connectionIndicator.classList.remove(
+					"webui-issue",
+					"offline",
+					"before",
+					"server-error"
+				);
+				connectionIndicatorText.textContent = connectionIndicator.title =
+					"Connected";
+				connectionStatus = true;
+			},
+			error: () => {
+				connectionIndicator.classList.add("server-error");
+				connectionIndicator.classList.remove(
+					"online",
+					"offline",
+					"before",
+					"webui-issue"
+				);
+				connectionIndicatorText.textContent = "Error";
+				connectionIndicator.title =
+					"Server is online, but is returning an error response";
+				connectionStatus = false;
+			},
+			corsissue: () => {
+				connectionIndicator.classList.add("webui-issue");
+				connectionIndicator.classList.remove(
+					"online",
+					"offline",
+					"before",
+					"server-error"
+				);
+				connectionIndicatorText.textContent = "CORS";
+				connectionIndicator.title =
+					"Server is online, but CORS is blocking our requests";
+				connectionStatus = false;
+			},
+			apiissue: () => {
+				connectionIndicator.classList.add("webui-issue");
+				connectionIndicator.classList.remove(
+					"online",
+					"offline",
+					"before",
+					"server-error"
+				);
+				connectionIndicatorText.textContent = "API";
+				connectionIndicator.title =
+					"Server is online, but the API seems to be disabled";
+				connectionStatus = false;
+			},
+			offline: () => {
+				connectionIndicator.classList.add("offline");
+				connectionIndicator.classList.remove(
+					"webui-issue",
+					"online",
+					"before",
+					"server-error"
+				);
+				connectionIndicatorText.textContent = "Offline";
+				connectionIndicator.title =
+					"Server seems to be offline. Please check the console for more information.";
+				connectionStatus = false;
+			},
+			before: () => {
+				connectionIndicator.classList.add("before");
+				connectionIndicator.classList.remove(
+					"webui-issue",
+					"online",
+					"offline",
+					"server-error"
+				);
+				connectionIndicatorText.textContent = "Waiting";
+				connectionIndicator.title = "Waiting for check to complete.";
+				connectionStatus = false;
+			},
+		};
+
+		statuses[status] &&
+			(() => {
+				statuses[status]();
+				global.connection = status;
+			})();
+	};
+
+	setConnectionStatus("before");
+
+	let checkInProgress = false;
+
+	const checkConnection = async (
+		notify = false,
+		simpleProgressStatus = false
+	) => {
+		const apiIssueResult = () => {
+			setConnectionStatus("apiissue");
+			const message = `The host is online, but the API seems to be disabled.<br>Have you run the webui with the flag '--api', or is the flag '--gradio-debug' currently active?`;
+			console.error(message);
+			if (notify)
+				notifications.notify(message, {
+					type: NotificationType.ERROR,
+					timeout: config.notificationTimeout * 2,
+				});
+		};
+
+		const offlineResult = () => {
+			setConnectionStatus("offline");
+			const message = `The connection with the host returned an error: ${response.status} - ${response.statusText}`;
+			console.error(message);
+			if (notify)
+				notifications.notify(message, {
+					type: NotificationType.ERROR,
+					timeout: config.notificationTimeout * 2,
+				});
+		};
+		if (checkInProgress)
+			throw new CheckInProgressError(
+				"Check is currently in progress, please try again"
+			);
+		checkInProgress = true;
+		var url = document.getElementById("host").value + "/startup-events";
+		// Attempt normal request
+		try {
+			if (simpleProgressStatus) {
+				const response = await fetch(
+					document.getElementById("host").value + "/sdapi/v1/progress" // seems to be the "lightest" endpoint?
+				);
+				switch (response.status) {
+					case 200: {
+						setConnectionStatus("online");
+						break;
+					}
+					case 404: {
+						apiIssueResult();
+						break;
+					}
+					default: {
+						offlineResult();
+					}
+				}
+			} else {
+				// Check if API is available
+				const response = await fetch(
+					document.getElementById("host").value + "/sdapi/v1/options"
+				);
+				const optionsdata = await response.json();
+				if (optionsdata["use_scale_latent_for_hires_fix"]) {
+					const message = `You are using an outdated version of A1111 webUI.<br>The HRfix options will not work until you update to at least commit ef27a18 or newer.<br>(https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/ef27a18b6b7cb1a8eebdc9b2e88d25baf2c2414d)<br>HRfix will fallback to half-resolution only.`;
+					console.warn(message);
+					if (notify)
+						notifications.notify(message, {
+							type: NotificationType.WARN,
+							timeout: config.notificationTimeout * 4,
+						});
+					// Hide all new hrfix options
+					document
+						.querySelectorAll(".hrfix")
+						.forEach((el) => (el.style.display = "none"));
+
+					// We are using old HRFix
+					global.isOldHRFix = true;
+					stableDiffusionData.enable_hr = false;
+				}
+				switch (response.status) {
+					case 200: {
+						setConnectionStatus("online");
+						// Load data as soon as connection is first stablished
+						if (firstTimeOnline) {
+							getConfig();
+							getStyles();
+							getSamplers();
+							getUpscalers();
+							getModels();
+							extensions.getExtensions(
+								controlNetModelAutoComplete,
+								controlNetModuleAutoComplete,
+								controlNetReferenceModuleAutoComplete
+							);
+							getLoras();
+							// getTIEmbeddings();
+							// getHypernets();
+							firstTimeOnline = false;
+						}
+						break;
+					}
+					case 404: {
+						apiIssueResult();
+						break;
+					}
+					default: {
+						offlineResult();
+					}
+				}
+			}
+		} catch (e) {
+			try {
+				if (e instanceof DOMException) throw "offline";
+				// Tests if problem is CORS
+				await fetch(url, {mode: "no-cors"});
+
+				setConnectionStatus("corsissue");
+				const message = `CORS is blocking our requests. Try running the webui with the flag '--cors-allow-origins=${window.location.protocol}//${window.location.host}/'`;
+				console.error(message);
+				if (notify)
+					notifications.notify(message, {
+						type: NotificationType.ERROR,
+						timeout: config.notificationTimeout * 2,
+					});
+			} catch (e) {
+				setConnectionStatus("offline");
+				const message = `The server seems to be offline. Is host '${
+					document.getElementById("host").value
+				}' correct?`;
+				console.error(message);
+				if (notify)
+					notifications.notify(message, {
+						type: NotificationType.ERROR,
+						timeout: config.notificationTimeout * 2,
+					});
+			}
+		}
+		checkInProgress = false;
+		return status;
+	};
+
+	if (focused || firstTimeOnline) {
+		await checkConnection(!urlParams.has("noprompt"));
+	}
+
+	// On click, attempt to refresh
+	connectionIndicator.onclick = async () => {
+		try {
+			await checkConnection(true);
+			checked = true;
+		} catch (e) {
+			console.debug("Already refreshing");
+		}
+	};
+
+	// Checks every 5 seconds if offline, 60 seconds if online
+	const checkAgain = () => {
+		checkFocus();
+		if (focused || firstTimeOnline) {
+			setTimeout(
+				async () => {
+					let simple = !firstTimeOnline;
+					await checkConnection(false, simple);
+					checkAgain();
+				},
+				connectionStatus ? 60000 : 5000
+			);
+		} else {
+			setTimeout(() => {
+				checkAgain();
+			}, 60000);
+		}
+	};
+
+	checkAgain();
+
+	return () => {
+		checkConnection().catch(() => {});
+	};
+}
+
+function newImage(evt) {
+	clearPaintedMask();
+	uil.layers.forEach(({layer}) => {
+		commands.runCommand(
+			"eraseImage",
+			"Clear Canvas",
+			{
+				...layer.bb,
+				ctx: layer.ctx,
+			},
+			{
+				extra: {
+					log: `Cleared Canvas`,
+				},
+			}
+		);
+	});
+}
+
+function clearPaintedMask() {
+	maskPaintLayer.clear();
+}
+
+function march(bb, options = {}) {
+	defaultOpt(options, {
+		title: null,
+		titleStyle: "#FFF5",
+		style: "#FFFF",
+		width: "2px",
+		filter: null,
+	});
+
+	const expanded = {...bb};
+	expanded.x--;
+	expanded.y--;
+	expanded.w += 2;
+	expanded.h += 2;
+
+	// Get temporary layer to draw marching ants
+	const layer = imageCollection.registerLayer(null, {
+		bb: expanded,
+		category: "display",
+	});
+	layer.canvas.style.imageRendering = "pixelated";
+	let offset = 0;
+
+	const interval = setInterval(() => {
+		drawMarchingAnts(layer.ctx, bb, offset++, options);
+		offset %= 12;
+	}, 20);
+
+	return () => {
+		clearInterval(interval);
+		imageCollection.deleteLayer(layer);
+	};
+}
+
+function drawMarchingAnts(ctx, bb, offset, options) {
+	ctx.save();
+
+	ctx.clearRect(0, 0, bb.w + 2, bb.h + 2);
+
+	// Draw Tool Name
+	if (bb.h > 40 && options.title) {
+		ctx.font = `bold 20px Open Sans`;
+
+		ctx.textAlign = "left";
+		ctx.fillStyle = options.titleStyle;
+		ctx.fillText(options.title, 10, 30, bb.w);
+	}
+
+	ctx.strokeStyle = options.style;
+	ctx.strokeWidth = options.width;
+	ctx.filter = options.filter;
+	ctx.setLineDash([4, 2]);
+	ctx.lineDashOffset = -offset;
+	ctx.strokeRect(1, 1, bb.w, bb.h);
+
+	ctx.restore();
+}
+
+const makeSlider = (
+	label,
+	el,
+	lsKey,
+	min,
+	max,
+	step,
+	defaultValue,
+	textStep = null,
+	valuecb = null
+) => {
+	const local = lsKey && localStorage.getItem(`openoutpaint/${lsKey}`);
+	const def = parseFloat(local === null ? defaultValue : local);
+	let cb = (v) => {
+		stableDiffusionData[lsKey] = v;
+		if (lsKey) localStorage.setItem(`openoutpaint/${lsKey}`, v);
+	};
+	if (valuecb) {
+		cb = (v) => {
+			valuecb(v);
+			localStorage.setItem(`openoutpaint/${lsKey}`, v);
+		};
+	}
+	return createSlider(label, el, {
+		valuecb: cb,
+		min,
+		max,
+		step,
+		defaultValue: def,
+		textStep,
+	});
+};
+
+let modelAutoComplete = createAutoComplete(
+	"Model",
+	document.getElementById("models-ac-select"),
+	{},
+	document.getElementById("refreshModelsBtn"),
+	"refreshable"
+);
+modelAutoComplete.onchange.on(({value}) => {
+	/**
+	 * TODO implement optional API call to check model unet channel count
+	 * extension users guaranteed to have it as of
+	 * https://github.com/zero01101/openOutpaint-webUI-extension/commit/1f22f5ea5b860c6e91f77edfb47743a124596dec
+	 * but still need a fallback check like below
+	 */
+
+	if (value.toLowerCase().includes("inpainting"))
+		document.querySelector(
+			"#models-ac-select input.autocomplete-text"
+		).style.backgroundColor = "#cfc";
+	else
+		document.querySelector(
+			"#models-ac-select input.autocomplete-text"
+		).style.backgroundColor = "#fcc";
+});
+
+let loraAutoComplete = createAutoComplete(
+	"LoRa",
+	document.getElementById("lora-ac-select")
+);
+loraAutoComplete.onchange.on(({value}) => {
+	// add selected lora to the end of the prompt
+	let passVal = "  <lora:" + value + ":1>";
+	let promptInput = document.getElementById("prompt");
+	promptInput.value += passVal;
+	let promptThing = prompt;
+});
+
+const samplerAutoComplete = createAutoComplete(
+	"Sampler",
+	document.getElementById("sampler-ac-select")
+);
+
+const upscalerAutoComplete = createAutoComplete(
+	"Upscaler",
+	document.getElementById("upscaler-ac-select")
+);
+
+const hrFixUpscalerAutoComplete = createAutoComplete(
+	"HRfix Upscaler",
+	document.getElementById("hrFixUpscaler")
+);
+
+let controlNetModelAutoComplete = createAutoComplete(
+	"Inpaint Model",
+	document.getElementById("controlNetModel-ac-select")
+);
+
+controlNetModelAutoComplete.onchange.on(({value}) => {
+	extensions.selectedControlNetModel = value;
+});
+
+let controlNetModuleAutoComplete = createAutoComplete(
+	"Inpaint Preprocessor",
+	document.getElementById("controlNetModule-ac-select")
+);
+
+controlNetModuleAutoComplete.onchange.on(({value}) => {
+	extensions.selectedControlNetModule = value;
+});
+
+let controlNetReferenceModuleAutoComplete = createAutoComplete(
+	"Reference Preprocessor",
+	document.getElementById("controlNetReferenceModule-ac-select")
+);
+
+controlNetReferenceModuleAutoComplete.onchange.on(({value}) => {
+	extensions.selectedCNReferenceModule = value;
+});
+
+// const extensionsAutoComplete = createAutoComplete(
+// 	"Extension",
+// 	document.getElementById("extension-ac-select")
+// );
+
+hrFixUpscalerAutoComplete.onchange.on(({value}) => {
+	stableDiffusionData.hr_upscaler = value;
+	localStorage.setItem(`openoutpaint/hr_upscaler`, value);
+});
+
+const resSlider = makeSlider(
+	"Resolution",
+	document.getElementById("resolution"),
+	"resolution",
+	128,
+	2048,
+	128,
+	512,
+	2,
+	(v) => {
+		stableDiffusionData.width = stableDiffusionData.height = v;
+
+		toolbar.currentTool &&
+			toolbar.currentTool.redraw &&
+			toolbar.currentTool.redraw();
+	}
+);
+
+const refSlider = makeSlider(
+	"Reference Fidelity",
+	document.getElementById("controlNetReferenceFidelity"),
+	"cn_reference_fidelity",
+	0.0,
+	1.0,
+	0.1,
+	0.5,
+	0.01,
+	(v) => {
+		extensions.controlNetReferenceFidelity = v;
+
+		toolbar.currentTool &&
+			toolbar.currentTool.redraw &&
+			toolbar.currentTool.redraw();
+	}
+);
+
+makeSlider(
+	"CFG Scale",
+	document.getElementById("cfgScale"),
+	"cfg_scale",
+	localStorage.getItem("openoutpaint/settings.min-cfg") || 1,
+	localStorage.getItem("openoutpaint/settings.max-cfg") || 25,
+	0.5,
+	7.0,
+	0.1
+);
+makeSlider(
+	"Batch Size",
+	document.getElementById("batchSize"),
+	"batch_size",
+	1,
+	8,
+	1,
+	2
+);
+makeSlider(
+	"Iterations",
+	document.getElementById("batchCount"),
+	"n_iter",
+	1,
+	8,
+	1,
+	2
+);
+makeSlider(
+	"Upscale X",
+	document.getElementById("upscaleX"),
+	"upscale_x",
+	1.0,
+	4.0,
+	0.1,
+	2.0,
+	0.1
+);
+
+makeSlider(
+	"Steps",
+	document.getElementById("steps"),
+	"steps",
+	1,
+	localStorage.getItem("openoutpaint/settings.max-steps") || 70,
+	5,
+	30,
+	1
+);
+
+// 20230102 grumble grumble
+const hrFixScaleSlider = makeSlider(
+	"HRfix Scale",
+	document.getElementById("hrFixScale"),
+	"hr_scale",
+	1.0,
+	4.0,
+	0.1,
+	2.0,
+	0.1
+);
+
+makeSlider(
+	"HRfix Denoising",
+	document.getElementById("hrDenoising"),
+	"hr_denoising_strength",
+	0.0,
+	1.0,
+	0.05,
+	0.7,
+	0.01
+);
+
+const lockPxSlider = makeSlider(
+	"HRfix Autoscale Lock Px.",
+	document.getElementById("hrFixLockPx"),
+	"hr_fix_lock_px",
+	0,
+	1024,
+	256,
+	0,
+	1
+);
+
+const hrStepsSlider = makeSlider(
+	"HRfix Steps",
+	document.getElementById("hrFixSteps"),
+	"hr_second_pass_steps",
+	0,
+	localStorage.getItem("openoutpaint/settings.max-steps") || 70,
+	5,
+	0,
+	1
+);
+
+function changeMaskBlur() {
+	stableDiffusionData.mask_blur = parseInt(
+		document.getElementById("maskBlur").value
+	);
+	localStorage.setItem("openoutpaint/mask_blur", stableDiffusionData.mask_blur);
+}
+
+function changeSeed() {
+	stableDiffusionData.seed = document.getElementById("seed").value;
+	localStorage.setItem("openoutpaint/seed", stableDiffusionData.seed);
+}
+
+function changeHRFX() {
+	stableDiffusionData.hr_resize_x =
+		document.getElementById("hr_resize_x").value;
+}
+
+function changeHRFY() {
+	stableDiffusionData.hr_resize_y =
+		document.getElementById("hr_resize_y").value;
+}
+
+function changeDynamicPromptsExtension() {
+	extensions.dynamicPromptsActive =
+		document.getElementById("cbxDynPrompts").checked;
+}
+
+function changeControlNetExtension() {
+	extensions.controlNetActive =
+		document.getElementById("cbxControlNet").checked;
+	if (extensions.controlNetActive) {
+		document
+			.querySelectorAll(".controlNetElement")
+			.forEach((el) => el.classList.remove("invisible"));
+	} else {
+		document
+			.querySelectorAll(".controlNetElement")
+			.forEach((el) => el.classList.add("invisible"));
+	}
+	changeControlNetReference();
+}
+
+function changeControlNetReference() {
+	extensions.controlNetReferenceActive = document.getElementById(
+		"cbxControlNetReferenceLayer"
+	).checked;
+	if (extensions.controlNetReferenceActive && extensions.controlNetActive) {
+		document
+			.querySelectorAll(".controlNetReferenceElement")
+			.forEach((el) => el.classList.remove("invisible"));
+	} else {
+		document
+			.querySelectorAll(".controlNetReferenceElement")
+			.forEach((el) => el.classList.add("invisible"));
+	}
+}
+
+function changeHiResFix() {
+	stableDiffusionData.enable_hr = Boolean(
+		document.getElementById("cbxHRFix").checked
+	);
+	localStorage.setItem("openoutpaint/enable_hr", stableDiffusionData.enable_hr);
+	// var hrfSlider = document.getElementById("hrFixScale");
+	// var hrfOpotions = document.getElementById("hrFixUpscaler");
+	// var hrfLabel = document.getElementById("hrFixLabel");
+	// var hrfDenoiseSlider = document.getElementById("hrDenoising");
+	// var hrfLockPxSlider = document.getElementById("hrFixLockPx");
+	if (stableDiffusionData.enable_hr) {
+		document
+			.querySelectorAll(".hrfix")
+			.forEach((el) => el.classList.remove("invisible"));
+	} else {
+		document
+			.querySelectorAll(".hrfix")
+			.forEach((el) => el.classList.add("invisible"));
+	}
+}
+
+function changeHiResSquare() {
+	stableDiffusionData.hr_square_aspect = Boolean(
+		document.getElementById("cbxHRFSquare").checked
+	);
+}
+
+function changeRestoreFaces() {
+	stableDiffusionData.restore_faces = Boolean(
+		document.getElementById("cbxRestoreFaces").checked
+	);
+	localStorage.setItem(
+		"openoutpaint/restore_faces",
+		stableDiffusionData.restore_faces
+	);
+}
+
+function changeSyncCursorSize() {
+	global.syncCursorSize = Boolean(
+		document.getElementById("cbxSyncCursorSize").checked
+	);
+	localStorage.setItem("openoutpaint/sync_cursor_size", global.syncCursorSize);
+}
+
+function changeSmoothRendering() {
+	const layers = document.getElementById("layer-render");
+	if (localStorage.getItem("openoutpaint/settings.smooth") === "true") {
+		layers.classList.remove("pixelated");
+	} else {
+		layers.classList.add("pixelated");
+	}
+}
+
+function isCanvasBlank(x, y, w, h, canvas) {
+	return !canvas
+		.getContext("2d")
+		.getImageData(x, y, w, h)
+		.data.some((channel) => channel !== 0);
+}
+
+function drawBackground() {
+	{
+		// Existing Canvas BG
+		const canvas = document.createElement("canvas");
+		canvas.width = config.gridSize * 2;
+		canvas.height = config.gridSize * 2;
+
+		const ctx = canvas.getContext("2d");
+		ctx.fillStyle = theme.grid.dark;
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = theme.grid.light;
+		ctx.fillRect(0, 0, config.gridSize, config.gridSize);
+		ctx.fillRect(
+			config.gridSize,
+			config.gridSize,
+			config.gridSize,
+			config.gridSize
+		);
+
+		canvas.toBlob((blob) => {
+			const url = window.URL.createObjectURL(blob);
+			console.debug(url);
+			bgLayer.canvas.style.backgroundImage = `url(${url})`;
+		});
+	}
+}
+
+async function exportWorkspaceState() {
+	return {
+		defaultLayer: {
+			id: uil.layerIndex.default.id,
+			name: uil.layerIndex.default.name,
+		},
+		bb: {
+			x: imageCollection.bb.x,
+			y: imageCollection.bb.y,
+			w: imageCollection.bb.w,
+			h: imageCollection.bb.h,
+		},
+		history: await commands.export(),
+	};
+}
+
+async function importWorkspaceState(state) {
+	// Start from zero, effectively
+	await commands.clear();
+
+	// Setup initial layer
+	const layer = uil.layerIndex.default;
+	layer.deletable = true;
+
+	await commands.runCommand(
+		"addLayer",
+		"Temporary Layer",
+		{name: "Temporary Layer", key: "tmp"},
+		{recordHistory: false}
+	);
+
+	await commands.runCommand(
+		"deleteLayer",
+		"Deleted Layer",
+		{
+			layer,
+		},
+		{recordHistory: false}
+	);
+
+	await commands.runCommand(
+		"addLayer",
+		"Initial Layer Creation",
+		{
+			id: state.defaultLayer.id,
+			name: state.defaultLayer.name,
+			key: "default",
+			deletable: false,
+		},
+		{recordHistory: false}
+	);
+
+	await commands.runCommand(
+		"deleteLayer",
+		"Deleted Layer",
+		{
+			layer: uil.layerIndex.tmp,
+		},
+		{recordHistory: false}
+	);
+
+	// Resize canvas to match original size
+	const sbb = new BoundingBox(state.bb);
+
+	const bb = imageCollection.bb;
+	let eleft = 0;
+	if (bb.x > sbb.x) eleft = bb.x - sbb.x;
+	let etop = 0;
+	if (bb.y > sbb.y) etop = bb.y - sbb.y;
+
+	let eright = 0;
+	if (bb.tr.x < sbb.tr.x) eright = sbb.tr.x - bb.tr.x;
+	let ebottom = 0;
+	if (bb.br.y < sbb.br.y) ebottom = sbb.br.y - bb.br.y;
+
+	imageCollection.expand(eleft, etop, eright, ebottom);
+
+	// Run commands in order
+	for (const command of state.history) {
+		await commands.import(command);
+	}
+}
+
+async function saveWorkspaceToFile() {
+	const workspace = await exportWorkspaceState();
+
+	const blob = new Blob([JSON.stringify(workspace)], {
+		type: "application/json",
+	});
+
+	const url = URL.createObjectURL(blob);
+	var link = document.createElement("a"); // Or maybe get it from the current document
+	link.href = url;
+	link.download = `${new Date().toISOString()}_openOutpaint_workspace.json`;
+	link.click();
+}
+
+async function getUpscalers() {
+	var url = document.getElementById("host").value + "/sdapi/v1/upscalers";
+	let upscalers = [];
+
+	try {
+		const response = await fetch(url, {
+			method: "GET",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json",
+			},
+		});
+		const data = await response.json();
+		for (var i = 0; i < data.length; i++) {
+			if (data[i].name.includes("None")) {
+				continue;
+			}
+			upscalers.push(data[i].name);
+		}
+	} catch (e) {
+		console.warn("[index] Failed to fetch upscalers:");
+		console.warn(e);
+		upscalers = [
+			"Lanczos",
+			"Nearest",
+			"LDSR",
+			"SwinIR",
+			"R-ESRGAN General 4xV3",
+			"R-ESRGAN General WDN 4xV3",
+			"R-ESRGAN AnimeVideo",
+			"R-ESRGAN 4x+",
+			"R-ESRGAN 4x+ Anime6B",
+			"R-ESRGAN 2x+",
+		];
+	}
+	const upscalersPlusNone = [...upscalers];
+	upscalersPlusNone.unshift("None");
+	upscalersPlusNone.push("Latent");
+	upscalersPlusNone.push("Latent (antialiased)");
+	upscalersPlusNone.push("Latent (bicubic)");
+	upscalersPlusNone.push("Latent (bicubic, antialiased)");
+	upscalersPlusNone.push("Latent (nearest)");
+
+	upscalerAutoComplete.options = upscalers.map((u) => {
+		return {name: u, value: u};
+	});
+	hrFixUpscalerAutoComplete.options = upscalersPlusNone.map((u) => {
+		return {name: u, value: u};
+	});
+
+	upscalerAutoComplete.value = upscalers[0];
+	hrFixUpscalerAutoComplete.value =
+		localStorage.getItem("openoutpaint/hr_upscaler") === null
+			? "None"
+			: localStorage.getItem("openoutpaint/hr_upscaler");
+}
+
+async function getModels(refresh = false) {
+	const url = document.getElementById("host").value + "/sdapi/v1/sd-models";
+	let opt = null;
+
+	try {
+		const response = await fetch(url);
+		const data = await response.json();
+
+		opt = data.map((option) => ({
+			name: option.title,
+			value: option.title,
+			optionelcb: (el) => {
+				if (option.title.toLowerCase().includes("inpainting"))
+					el.classList.add("inpainting");
+			},
+		}));
+
+		modelAutoComplete.options = opt;
+
+		try {
+			const optResponse = await fetch(
+				document.getElementById("host").value + "/sdapi/v1/options"
+			);
+			const optData = await optResponse.json();
+
+			var model = optData.sd_model_checkpoint;
+			// 20230722 - sigh so this key is now removed https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/66c5f1bb1556a2d86d9f11aeb92f83d4a09832cc
+			// no idea why but time to deal with it
+			if (model === undefined) {
+				const modelHash = optData.sd_checkpoint_hash;
+				const hashMap = data.map((option) => ({
+					hash: option.sha256,
+					title: option.title,
+				}));
+				model = hashMap.find((option) => option.hash === modelHash).title;
+			}
+			console.log("Current model: " + model);
+			if (modelAutoComplete.value !== model) modelAutoComplete.value = model;
+		} catch (e) {
+			console.warn("[index] Failed to fetch current model:");
+			console.warn(e);
+		}
+	} catch (e) {
+		console.warn("[index] Failed to fetch models:");
+		console.warn(e);
+	}
+
+	if (!refresh)
+		modelAutoComplete.onchange.on(async ({value}) => {
+			console.log(`[index] Changing model to [${value}]`);
+			const payload = {
+				sd_model_checkpoint: value,
+			};
+			const url = document.getElementById("host").value + "/sdapi/v1/options/";
+			try {
+				await fetch(url, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify(payload),
+				});
+
+				notifications.notify(`Model changed to [${value}]`, {type: "success"});
+			} catch (e) {
+				console.warn("[index] Error changing model");
+				console.warn(e);
+
+				notifications.notify(
+					"Error changing model, please check console for additional information",
+					{
+						type: NotificationType.ERROR,
+						timeout: config.notificationTimeout * 2,
+					}
+				);
+			}
+		});
+
+	// If first time running, ask if user wants to switch to an inpainting model
+	if (global.firstRun && !modelAutoComplete.value.includes("inpainting")) {
+		const inpainting = opt.find(({name}) => name.includes("inpainting"));
+
+		let message =
+			"It seems this is your first time using openOutpaint. It is highly recommended that you switch to an inpainting model. \
+			These are highlighted as green in the model selector.";
+
+		if (inpainting) {
+			message += `<br><br>We have found the inpainting model<br><br> - ${inpainting.name}<br><br>available in the webui. Do you want to switch to it?`;
+			if (await notifications.dialog("Automatic Model Switch", message)) {
+				modelAutoComplete.value = inpainting.value;
+			}
+		} else {
+			message += `<br><br>No inpainting model seems to be available in the webui. It is recommended that you download an inpainting model, or outpainting results may not be optimal.`;
+			notifications.notify(message, {
+				type: NotificationType.WARN,
+				timeout: null,
+			});
+		}
+	}
+}
+
+async function getLoras() {
+	var url = document.getElementById("host").value + "/sdapi/v1/loras";
+	let opt = null;
+
+	try {
+		const response = await fetch(url);
+		const data = await response.json();
+
+		loraAutoComplete.options = data.map((lora) => ({
+			name: lora.name,
+			value: lora.name,
+		}));
+	} catch (e) {
+		console.warn("[index] Failed to fetch loras");
+		console.warn(e);
+	}
+}
+
+async function getConfig() {
+	var url = document.getElementById("host").value + "/sdapi/v1/options";
+
+	let message =
+		"The following options for the AUTOMATIC1111's webui are not recommended to use with this software:";
+
+	try {
+		const response = await fetch(url);
+
+		const data = await response.json();
+
+		let wrong = false;
+
+		// Check if img2img color correction is disabled and inpainting mask weight is set to one
+		// TODO: API Seems bugged for retrieving inpainting mask weight - returning 0 for all values different than 1.0
+		if (data.img2img_color_correction) {
+			message += "<br> - Image to Image Color Correction: false recommended";
+			wrong = true;
+		}
+
+		if (data.inpainting_mask_weight < 1.0) {
+			message += `<br> - Inpainting Conditioning Mask Strength: 1.0 recommended`;
+			wrong = true;
+		}
+
+		message +=
+			"<br><br>Should these values be changed to the recommended ones?";
+
+		if (!wrong) {
+			console.info("[index] WebUI Settings set as recommended.");
+			return;
+		}
+
+		console.info(
+			"[index] WebUI Settings not set as recommended. Prompting for changing settings automatically."
+		);
+
+		if (!(await notifications.dialog("Recommended Settings", message))) return;
+
+		try {
+			await fetch(url, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					img2img_color_correction: false,
+					inpainting_mask_weight: 1.0,
+				}),
+			});
+		} catch (e) {
+			console.warn("[index] Failed to fetch WebUI Configuration");
+			console.warn(e);
+		}
+	} catch (e) {
+		console.warn("[index] Failed to fetch WebUI Configuration");
+		console.warn(e);
+	}
+}
+
+function changeStyles() {
+	/** @type {HTMLSelectElement} */
+	const styleSelectEl = document.getElementById("styleSelect");
+	const selected = Array.from(styleSelectEl.options).filter(
+		(option) => option.selected
+	);
+	let selectedString = selected.map((option) => option.value);
+
+	if (selectedString.find((selected) => selected === "None")) {
+		selectedString = [];
+		Array.from(styleSelectEl.options).forEach((option) => {
+			if (option.value !== "None") option.selected = false;
+		});
+	}
+
+	localStorage.setItem(
+		"openoutpaint/promptStyle",
+		JSON.stringify(selectedString)
+	);
+
+	// change the model
+	if (selectedString.length > 0)
+		console.log(`[index] Changing styles to ${selectedString.join(", ")}`);
+	else console.log(`[index] Clearing styles`);
+	stableDiffusionData.styles = selectedString;
+}
+
+async function getSamplers() {
+	var url = document.getElementById("host").value + "/sdapi/v1/samplers";
+
+	try {
+		const response = await fetch(url);
+		const data = await response.json();
+
+		samplerAutoComplete.onchange.on(({value}) => {
+			stableDiffusionData.sampler_index = value;
+			localStorage.setItem("openoutpaint/sampler", value);
+		});
+
+		samplerAutoComplete.options = data.map((sampler) => ({
+			name: sampler.name,
+			value: sampler.name,
+		}));
+
+		// Initial sampler
+		if (localStorage.getItem("openoutpaint/sampler") != null) {
+			samplerAutoComplete.value = localStorage.getItem("openoutpaint/sampler");
+		} else {
+			samplerAutoComplete.value = data[0].name;
+			localStorage.setItem("openoutpaint/sampler", samplerAutoComplete.value);
+		}
+		stableDiffusionData.sampler_index = samplerAutoComplete.value;
+	} catch (e) {
+		console.warn("[index] Failed to fetch samplers");
+		console.warn(e);
+	}
+}
+
+async function upscaleAndDownload() {
+	// Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount
+
+	// get cropped canvas, send it to upscaler, download result
+	var upscale_factor = localStorage.getItem("openoutpaint/upscale_x")
+		? localStorage.getItem("openoutpaint/upscale_x")
+		: 2;
+	var upscaler = upscalerAutoComplete.value;
+	var croppedCanvas = cropCanvas(
+		uil.getVisible({
+			x: 0,
+			y: 0,
+			w: imageCollection.size.w,
+			h: imageCollection.size.h,
+		})
+	);
+	if (croppedCanvas != null) {
+		var url =
+			document.getElementById("host").value + "/sdapi/v1/extra-single-image/";
+		var imgdata = croppedCanvas.canvas.toDataURL("image/png");
+		var data = {
+			"resize-mode": 0, // 0 = just resize, 1 = crop and resize, 2 = resize and fill i assume based on theimg2img tabs options
+			upscaling_resize: upscale_factor,
+			upscaler_1: upscaler,
+			image: imgdata,
+		};
+		console.log(data);
+		await fetch(url, {
+			method: "POST",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(data),
+		})
+			.then((response) => response.json())
+			.then((data) => {
+				console.log(data);
+				var link = document.createElement("a");
+				link.download =
+					new Date()
+						.toISOString()
+						.slice(0, 19)
+						.replace("T", " ")
+						.replace(":", " ") +
+					" openOutpaint image upscaler_" +
+					upscaler +
+					"_x" +
+					upscale_factor +
+					".png";
+				link.href = "data:image/png;base64," + data["image"];
+				link.click();
+			});
+	}
+}
+
+function loadSettings() {
+	// set default values if not set
+	var _mask_blur =
+		localStorage.getItem("openoutpaint/mask_blur") == null
+			? 0
+			: localStorage.getItem("openoutpaint/mask_blur");
+	var _seed =
+		localStorage.getItem("openoutpaint/seed") == null
+			? -1
+			: localStorage.getItem("openoutpaint/seed");
+	let _enable_hr =
+		localStorage.getItem("openoutpaint/enable_hr") === null
+			? false
+			: localStorage.getItem("openoutpaint/enable_hr") === "true";
+	let _restore_faces =
+		localStorage.getItem("openoutpaint/restore_faces") === null
+			? false
+			: localStorage.getItem("openoutpaint/restore_faces") === "true";
+
+	let _sync_cursor_size =
+		localStorage.getItem("openoutpaint/sync_cursor_size") === null
+			? true
+			: localStorage.getItem("openoutpaint/sync_cursor_size") === "true";
+
+	let _hrfix_scale =
+		localStorage.getItem("openoutpaint/hr_scale") === null
+			? 2.0
+			: localStorage.getItem("openoutpaint/hr_scale");
+
+	let _hrfix_denoising =
+		localStorage.getItem("openoutpaint/hr_denoising_strength") === null
+			? 0.7
+			: localStorage.getItem("openoutpaint/hr_denoising_strength");
+	let _hrfix_lock_px =
+		localStorage.getItem("openoutpaint/hr_fix_lock_px") === null
+			? 0
+			: localStorage.getItem("openoutpaint/hr_fix_lock_px");
+
+	// set the values into the UI
+	document.getElementById("maskBlur").value = Number(_mask_blur);
+	document.getElementById("seed").value = Number(_seed);
+	document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
+	document.getElementById("cbxRestoreFaces").checked = Boolean(_restore_faces);
+	document.getElementById("cbxSyncCursorSize").checked =
+		Boolean(_sync_cursor_size);
+	document.getElementById("hrFixScale").value = Number(_hrfix_scale);
+	document.getElementById("hrDenoising").value = Number(_hrfix_denoising);
+	document.getElementById("hrFixLockPx").value = Number(_hrfix_lock_px);
+}
+
+imageCollection.element.addEventListener(
+	"wheel",
+	(evn) => {
+		evn.preventDefault();
+	},
+	{passive: false}
+);
+
+imageCollection.element.addEventListener(
+	"contextmenu",
+	(evn) => {
+		evn.preventDefault();
+	},
+	{passive: false}
+);
+
+async function resetToDefaults() {
+	if (
+		await notifications.dialog(
+			"Clear Settings",
+			"Are you sure you want to clear your settings?"
+		)
+	) {
+		localStorage.clear();
+	}
+}
+
+document.addEventListener("visibilitychange", () => {
+	checkFocus();
+});
+
+window.addEventListener("blur", () => {
+	checkFocus();
+});
+
+window.addEventListener("focus", () => {
+	checkFocus();
+});
+
+function checkFocus() {
+	let hasFocus = document.hasFocus();
+	if (document.hidden || !hasFocus) {
+		focused = false;
+	} else {
+		focused = true;
+	}
+}
+
+function refreshScripts() {
+	selector = document.getElementById("script-selector");
+	selector.innerHTML = "";
+	createBaseScriptOptions();
+	loadDefaultScripts();
+	// loadUserScripts();
+}
+
+function createBaseScriptOptions() {
+	selector = document.getElementById("script-selector");
+	var noScript = document.createElement("option");
+	noScript.id = "no_selected_script";
+	noScript.value = "";
+	noScript.innerHTML = "(disabled)";
+	selector.appendChild(noScript);
+	var customScript = document.createElement("option");
+	customScript.id = "custom";
+	customScript.value = "custom";
+	customScript.innerHTML = "Custom";
+	selector.appendChild(customScript);
+}
+
+async function loadDefaultScripts() {
+	selector = document.getElementById("script-selector");
+	const response = await fetch("./defaultscripts.json");
+	const json = await response.json();
+	for (const key in json.defaultScripts) {
+		var opt = document.createElement("option");
+		opt.value = opt.innerHTML = key;
+		selector.appendChild(opt);
+	}
+	defaultScripts = json;
+}
+
+// async function loadUserScripts() {
+// 	selector = document.getElementById("script-selector");
+// 	const response = await fetch("./userdefinedscripts.json");
+// 	const json = await response.json();
+// 	for (const key in json.userScripts) {
+// 		var opt = document.createElement("option");
+// 		opt.value = opt.innerHTML = key;
+// 		selector.appendChild(opt);
+// 	}
+// 	userScripts = json;
+// }
+
+function changeScript(event) {
+	let enable = () => {
+		scriptName.disabled = false;
+		// saveScriptButton.disabled = false;
+	};
+	let disable = () => {
+		scriptName.disabled = true;
+		// saveScriptButton.disabled = true;
+	};
+	let selected = event.target.value;
+	let scriptName = document.getElementById("script-name-input");
+	let scriptArgs = document.getElementById("script-args-input");
+	// let saveScriptButton = document.getElementById("save-custom-script");
+	scriptName.value = selected;
+	scriptArgs.title = "";
+	disable();
+	switch (selected) {
+		case "custom": {
+			let _script_name_input =
+				localStorage.getItem("openoutpaint/script_name_input") === null
+					? ""
+					: localStorage.getItem("openoutpaint/script_name_input");
+			let _script_args_input =
+				localStorage.getItem("openoutpaint/script_args_input") === null
+					? "[]"
+					: localStorage.getItem("openoutpaint/script_args_input");
+			scriptName.value = _script_name_input;
+			scriptArgs.value = _script_args_input;
+			scriptArgs.title = "";
+			enable();
+			break;
+		}
+		case "": {
+			// specifically no selected script
+			scriptArgs.value = "";
+			break;
+		}
+		default: {
+			scriptName.value = selected;
+			// check default scripts for selected script
+			if (selected in defaultScripts.defaultScripts) {
+				scriptArgs.value = defaultScripts.defaultScripts[selected].scriptValues;
+				scriptArgs.title = defaultScripts.defaultScripts[selected].titleText;
+			}
+			// FURTHER TODO see if this is even plausible as i don't think JS can arbitrarily save data to files without downloading
+
+			// if not found, check user scripts
+			// TODO yknow what check userscripts first; if customizations have been made load those instead of defaults, i'm too stupid to do that right now
+			// else if (selected in userScripts.userScripts) {
+			// 	scriptArgs.value = userScripts.userScripts[selected].scriptValues;
+			// 	enable();
+			// }
+			// if not found, wtf
+		}
+	}
+}
+
+// async function saveCustomScript() {
+// 	let selector = document.getElementById("script-name-input");
+// 	let selected = selector.value;
+// 	let args = document.getElementById("script-args-input").value;
+// 	if (selected.trim() != "") {
+// 		if (selected in userScripts.userScripts) {
+// 			userScripts.userScripts[selected].scriptValues = args;
+// 		} else {
+// 		}
+// 	}
+// }
+
+function togglePix2PixImgCfg(value) {
+	// super hacky
+	// actually doesn't work at all yet so i'm leaving it here to taunt and remind me of my failures
+	// try {
+	// 	if (value.toLowerCase().includes("pix2pix")) {
+	// 		document
+	// 			.querySelector(".instruct-pix2pix-img-cfg")
+	// 			.classList.remove("invisible");
+	// 	} else {
+	// 		document
+	// 			.querySelector(".instruct-pix2pix-img-cfg")
+	// 			.classList.add("invisible");
+	// 	}
+	// } catch (e) {
+	// 	// highly likely not currently using img2img tool, do nothing
+	// }
+}
+
+function storeUserscriptVal(evt, type) {
+	let currentScript = document.getElementById("script-selector").value;
+	if (currentScript === "custom") {
+		console.log(type);
+		console.log(evt);
+		let val = (currentScript = document.getElementById(
+			"script-" + type + "-input"
+		).value);
+
+		localStorage.setItem("openoutpaint/script_" + type + "_input", val);
+	}
+}

extensions/openOutpaint-webUI-extension/app/js/initalize/debug.populate.js

@@ -0,0 +1,33 @@
+// info div, sometimes hidden
+let mouseXInfo = document.getElementById("mouseX");
+let mouseYInfo = document.getElementById("mouseY");
+let canvasXInfo = document.getElementById("canvasX");
+let canvasYInfo = document.getElementById("canvasY");
+let snapXInfo = document.getElementById("snapX");
+let snapYInfo = document.getElementById("snapY");
+let heldButtonInfo = document.getElementById("heldButton");
+
+mouse.listen.window.onmousemove.on((evn) => {
+	mouseXInfo.textContent = evn.x;
+	mouseYInfo.textContent = evn.y;
+});
+
+mouse.listen.world.onmousemove.on((evn) => {
+	canvasXInfo.textContent = evn.x;
+	canvasYInfo.textContent = evn.y;
+	snapXInfo.textContent = evn.x + snap(evn.x);
+	snapYInfo.textContent = evn.y + snap(evn.y);
+
+	if (global.debug) {
+		debugLayer.clear();
+		debugCtx.fillStyle = "#F0F";
+		debugCtx.beginPath();
+		debugCtx.arc(viewport.cx, viewport.cy, 5, 0, Math.PI * 2);
+		debugCtx.fill();
+
+		debugCtx.fillStyle = "#0FF";
+		debugCtx.beginPath();
+		debugCtx.arc(evn.x, evn.y, 5, 0, Math.PI * 2);
+		debugCtx.fill();
+	}
+});