diff --git a/.DS_Store b/.DS_Store index a7ef6fc0bc7282d5fcb6a848572066d73c5829ec..daeb73c3e2f7d6d66e06448e0788a1660bc83ed4 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/extensions/.DS_Store b/extensions/.DS_Store index 27719949c135aae1faed48a9dc8abc55a4264719..d19c29c02f30a000743114a5a506caff3c8ac65c 100644 Binary files a/extensions/.DS_Store and b/extensions/.DS_Store differ diff --git a/extensions/openOutpaint-webUI-extension/.DS_Store b/extensions/openOutpaint-webUI-extension/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..550a0e822e51a5ff68b044e4e1c42ee09d6154e5 Binary files /dev/null and b/extensions/openOutpaint-webUI-extension/.DS_Store differ diff --git a/extensions/openOutpaint-webUI-extension/LICENSE b/extensions/openOutpaint-webUI-extension/LICENSE new file mode 100644 index 0000000000000000000000000000000000000000..2228febc5439cf0dfb8165c06a1c4cb1e671aa99 --- /dev/null +++ b/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. diff --git a/extensions/openOutpaint-webUI-extension/README.MD b/extensions/openOutpaint-webUI-extension/README.MD new file mode 100644 index 0000000000000000000000000000000000000000..8e0bc3d6235a689bb96c2c798570c7dd6aa6d70c --- /dev/null +++ b/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)_** + + + +### 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) diff --git a/extensions/openOutpaint-webUI-extension/__pycache__/preload.cpython-310.pyc b/extensions/openOutpaint-webUI-extension/__pycache__/preload.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..a048251f7e9cdf412b817dee5fc745ed34b64ed5 Binary files /dev/null and b/extensions/openOutpaint-webUI-extension/__pycache__/preload.cpython-310.pyc differ diff --git a/extensions/openOutpaint-webUI-extension/__pycache__/preload.cpython-311.pyc b/extensions/openOutpaint-webUI-extension/__pycache__/preload.cpython-311.pyc new file mode 100644 index 0000000000000000000000000000000000000000..8b35d41d287600d280d275b48109bc694eada496 Binary files /dev/null and b/extensions/openOutpaint-webUI-extension/__pycache__/preload.cpython-311.pyc differ diff --git a/extensions/openOutpaint-webUI-extension/app/.DS_Store b/extensions/openOutpaint-webUI-extension/app/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..71d301a991462da5bae904bba310af1fa57a3b97 Binary files /dev/null and b/extensions/openOutpaint-webUI-extension/app/.DS_Store differ diff --git a/extensions/openOutpaint-webUI-extension/app/.devtools/README.md b/extensions/openOutpaint-webUI-extension/app/.devtools/README.md new file mode 100644 index 0000000000000000000000000000000000000000..d0586e72f8ae65e84826864a1cd95cc26c375e88 --- /dev/null +++ b/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. diff --git a/extensions/openOutpaint-webUI-extension/app/.devtools/lint.sh b/extensions/openOutpaint-webUI-extension/app/.devtools/lint.sh new file mode 100755 index 0000000000000000000000000000000000000000..d803fcfb1b14f24d8f931e99d9acbe5a96e1a220 --- /dev/null +++ b/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." \ No newline at end of file diff --git a/extensions/openOutpaint-webUI-extension/app/.devtools/sethooks.ps1 b/extensions/openOutpaint-webUI-extension/app/.devtools/sethooks.ps1 new file mode 100644 index 0000000000000000000000000000000000000000..930a120238a462d90d5ae6ca2cd5673c0b16b259 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/extensions/openOutpaint-webUI-extension/app/.devtools/sethooks.sh b/extensions/openOutpaint-webUI-extension/app/.devtools/sethooks.sh new file mode 100755 index 0000000000000000000000000000000000000000..ddb661997bb8008b7ad5b367606cf87ca429969f --- /dev/null +++ b/extensions/openOutpaint-webUI-extension/app/.devtools/sethooks.sh @@ -0,0 +1,3 @@ +#!/usr/bin/sh + +git config core.hooksPath .githooks/linux \ No newline at end of file diff --git a/extensions/openOutpaint-webUI-extension/app/.devtools/updatehashes.ps1 b/extensions/openOutpaint-webUI-extension/app/.devtools/updatehashes.ps1 new file mode 100644 index 0000000000000000000000000000000000000000..993cab6e3e2ebabe5bec5d6387487feda12a498d --- /dev/null +++ b/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 + } + } +} diff --git a/extensions/openOutpaint-webUI-extension/app/.devtools/updatehashes.sh b/extensions/openOutpaint-webUI-extension/app/.devtools/updatehashes.sh new file mode 100755 index 0000000000000000000000000000000000000000..e52c675224bcbbd10c60a996e733b6fd8f4c6e0d --- /dev/null +++ b/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 \ No newline at end of file diff --git a/extensions/openOutpaint-webUI-extension/app/.gitattributes b/extensions/openOutpaint-webUI-extension/app/.gitattributes new file mode 100644 index 0000000000000000000000000000000000000000..07764a78d9844210a15958387933a1fa526c43a5 --- /dev/null +++ b/extensions/openOutpaint-webUI-extension/app/.gitattributes @@ -0,0 +1 @@ +* text eol=lf \ No newline at end of file diff --git a/extensions/openOutpaint-webUI-extension/app/.githooks/linux/pre-commit b/extensions/openOutpaint-webUI-extension/app/.githooks/linux/pre-commit new file mode 100755 index 0000000000000000000000000000000000000000..3bfde07c0f01cacd125aa8d91e98eded4159bdef --- /dev/null +++ b/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" \ No newline at end of file diff --git a/extensions/openOutpaint-webUI-extension/app/.githooks/windows/pre-commit b/extensions/openOutpaint-webUI-extension/app/.githooks/windows/pre-commit new file mode 100755 index 0000000000000000000000000000000000000000..6b35b7981c0a1957528339bd1cce7c3111db18ad --- /dev/null +++ b/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" \ No newline at end of file diff --git a/extensions/openOutpaint-webUI-extension/app/.github/ISSUE_TEMPLATE/bug_report.yml b/extensions/openOutpaint-webUI-extension/app/.github/ISSUE_TEMPLATE/bug_report.yml new file mode 100644 index 0000000000000000000000000000000000000000..70e54f8838aa72743eaeb3fcb80e47dd4d236f36 --- /dev/null +++ b/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. diff --git a/extensions/openOutpaint-webUI-extension/app/.github/ISSUE_TEMPLATE/feature_request.yml b/extensions/openOutpaint-webUI-extension/app/.github/ISSUE_TEMPLATE/feature_request.yml new file mode 100644 index 0000000000000000000000000000000000000000..60157dc5ed6236799abc6babfb97326594a59260 --- /dev/null +++ b/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. diff --git a/extensions/openOutpaint-webUI-extension/app/.github/workflows/autoformat.yml b/extensions/openOutpaint-webUI-extension/app/.github/workflows/autoformat.yml new file mode 100644 index 0000000000000000000000000000000000000000..7a95e97b222e67deeed3d3f11968e75f2f697e0a --- /dev/null +++ b/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/prettier_action@v4.3 + with: + prettier_options: --write **/*.{js,html,css,md} diff --git a/extensions/openOutpaint-webUI-extension/app/.github/workflows/cachebusting.yml b/extensions/openOutpaint-webUI-extension/app/.github/workflows/cachebusting.yml new file mode 100644 index 0000000000000000000000000000000000000000..68270f26f61ea37de5d0fecc45734165ce189de9 --- /dev/null +++ b/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/add-and-commit@v9.1.1 + with: + committer_name: Github Actions + committer_email: actions@github.com + message: "Fixed resource hashes" diff --git a/extensions/openOutpaint-webUI-extension/app/.gitignore b/extensions/openOutpaint-webUI-extension/app/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..621ea6d82b1c432a4d7302b12a04290c7f6aaf3d --- /dev/null +++ b/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 diff --git a/extensions/openOutpaint-webUI-extension/app/.prettierrc.json b/extensions/openOutpaint-webUI-extension/app/.prettierrc.json new file mode 100644 index 0000000000000000000000000000000000000000..328b6f3c69a31b84d4b8e8b948ce4ccdf4ed86b3 --- /dev/null +++ b/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 +} diff --git a/extensions/openOutpaint-webUI-extension/app/CONTRIBUTING.md b/extensions/openOutpaint-webUI-extension/app/CONTRIBUTING.md new file mode 100644 index 0000000000000000000000000000000000000000..e25a52f9621c2ea542035d326f9fea7c23bae663 --- /dev/null +++ b/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). diff --git a/extensions/openOutpaint-webUI-extension/app/LICENSE b/extensions/openOutpaint-webUI-extension/app/LICENSE new file mode 100644 index 0000000000000000000000000000000000000000..2228febc5439cf0dfb8165c06a1c4cb1e671aa99 --- /dev/null +++ b/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. diff --git a/extensions/openOutpaint-webUI-extension/app/README.md b/extensions/openOutpaint-webUI-extension/app/README.md new file mode 100644 index 0000000000000000000000000000000000000000..879c0830d4d7149df0374d0d32b116d3405e8d78 --- /dev/null +++ b/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) +- 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) diff --git a/extensions/openOutpaint-webUI-extension/app/css/colors.css b/extensions/openOutpaint-webUI-extension/app/css/colors.css new file mode 100644 index 0000000000000000000000000000000000000000..3034b8619c566f818ebf7905d4ac9ba3458d64fc --- /dev/null +++ b/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; +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/fonts.css b/extensions/openOutpaint-webUI-extension/app/css/fonts.css new file mode 100644 index 0000000000000000000000000000000000000000..219997c9dd11a7e0d751eeee6c468a04efdf5774 --- /dev/null +++ b/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"); +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/icons.css b/extensions/openOutpaint-webUI-extension/app/css/icons.css new file mode 100644 index 0000000000000000000000000000000000000000..08e7c00350f986526c37d6d9b1012922ad8857fa --- /dev/null +++ b/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"); +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/index.css b/extensions/openOutpaint-webUI-extension/app/css/index.css new file mode 100644 index 0000000000000000000000000000000000000000..9f3dafcf3d123b463da090ce18ef55e6e95fa7a7 --- /dev/null +++ b/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%; +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/layers.css b/extensions/openOutpaint-webUI-extension/app/css/layers.css new file mode 100644 index 0000000000000000000000000000000000000000..434e77e1b54e21934390397928712235aa0b7136 --- /dev/null +++ b/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; +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/ui/generic.css b/extensions/openOutpaint-webUI-extension/app/css/ui/generic.css new file mode 100644 index 0000000000000000000000000000000000000000..036b905b84ebe7f7cd28e1227c991d1a6c5e8c7b --- /dev/null +++ b/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"); +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/ui/history.css b/extensions/openOutpaint-webUI-extension/app/css/ui/history.css new file mode 100644 index 0000000000000000000000000000000000000000..0c1834f6ad79124998d7b4d68f8b75a9803c1c94 --- /dev/null +++ b/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; +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/ui/layers.css b/extensions/openOutpaint-webUI-extension/app/css/ui/layers.css new file mode 100644 index 0000000000000000000000000000000000000000..8adc44c49ec4a1418c7fea985c6cabac0313a1b4 --- /dev/null +++ b/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; +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/ui/notifications.css b/extensions/openOutpaint-webUI-extension/app/css/ui/notifications.css new file mode 100644 index 0000000000000000000000000000000000000000..3e07b1104117cb74c859781921ef1790dd013315 --- /dev/null +++ b/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); +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/ui/tool/colorbrush.css b/extensions/openOutpaint-webUI-extension/app/css/ui/tool/colorbrush.css new file mode 100644 index 0000000000000000000000000000000000000000..4fa0d053ed1621c349b7603cd48b37d1d975d7aa --- /dev/null +++ b/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; +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/ui/tool/dream.css b/extensions/openOutpaint-webUI-extension/app/css/ui/tool/dream.css new file mode 100644 index 0000000000000000000000000000000000000000..b0ac86eaa18b8b428e8007c6011ec23af556500f --- /dev/null +++ b/extensions/openOutpaint-webUI-extension/app/css/ui/tool/dream.css @@ -0,0 +1,3 @@ +.dream-stop-btn { + width: 100px; +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/ui/tool/stamp.css b/extensions/openOutpaint-webUI-extension/app/css/ui/tool/stamp.css new file mode 100644 index 0000000000000000000000000000000000000000..4686e1926eb9c4277c42961e95eb1f2fbf0876b5 --- /dev/null +++ b/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; +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/ui/toolbar.css b/extensions/openOutpaint-webUI-extension/app/css/ui/toolbar.css new file mode 100644 index 0000000000000000000000000000000000000000..fa27b5fce27fb2a841e359e56d5f6af35e32c089 --- /dev/null +++ b/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%); +} diff --git a/extensions/openOutpaint-webUI-extension/app/css/ui/workspace.css b/extensions/openOutpaint-webUI-extension/app/css/ui/workspace.css new file mode 100644 index 0000000000000000000000000000000000000000..159a75e02581df307a6d40b4c58a9635a2627332 --- /dev/null +++ b/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; +} diff --git a/extensions/openOutpaint-webUI-extension/app/defaultscripts.json b/extensions/openOutpaint-webUI-extension/app/defaultscripts.json new file mode 100644 index 0000000000000000000000000000000000000000..3fa06e7919f7f22691560772afaa49f556368771 --- /dev/null +++ b/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]" + } + } +} diff --git a/extensions/openOutpaint-webUI-extension/app/docs/.DS_Store b/extensions/openOutpaint-webUI-extension/app/docs/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 Binary files /dev/null and b/extensions/openOutpaint-webUI-extension/app/docs/.DS_Store differ diff --git a/extensions/openOutpaint-webUI-extension/app/favicon.ico b/extensions/openOutpaint-webUI-extension/app/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a0ea5e09824686f5c632568c17421dbf3d986292 Binary files /dev/null and b/extensions/openOutpaint-webUI-extension/app/favicon.ico differ diff --git a/extensions/openOutpaint-webUI-extension/app/index.html b/extensions/openOutpaint-webUI-extension/app/index.html new file mode 100644 index 0000000000000000000000000000000000000000..33471e0b1f403da046dbff72c0895dffb4663d3c --- /dev/null +++ b/extensions/openOutpaint-webUI-extension/app/index.html @@ -0,0 +1,591 @@ + + +
+ +Canvas Size | ++ + x + + | +
Max Steps | ++ + | +
CFG minmax | ++ + :: + + | +
+ + | +|
Lie to HRfix | ++ + | +
New Layer per Dream | ++ + | +
Smooth Rendering | ++ + | +
+ Button Updates Prompt | ++ + | +
Jump to 1st New on + | ++ + | +