diff --git a/.github/workflows/build-container.yml b/.github/workflows/build-container.yml index b5daf76932..f708c82a04 100644 --- a/.github/workflows/build-container.yml +++ b/.github/workflows/build-container.yml @@ -5,8 +5,17 @@ on: - 'main' - 'update/ci/docker/*' - 'update/docker/*' + paths: + - '/pyproject.toml' + - '/ldm/**' + - '/invokeai/backend/**' + - '/invokeai/configs/**' + - '/invokeai/frontend/dist/**' + - '/docker/Dockerfile' tags: - 'v*.*.*' + workflow_dispatch: + jobs: docker: diff --git a/.github/workflows/test-invoke-pip-skip.yml b/.github/workflows/test-invoke-pip-skip.yml new file mode 100644 index 0000000000..982ed202e9 --- /dev/null +++ b/.github/workflows/test-invoke-pip-skip.yml @@ -0,0 +1,67 @@ +name: Test invoke.py pip +on: + pull_request: + paths-ignore: + - '/pyproject.toml' + - '/ldm/**' + - '/invokeai/backend/**' + - '/invokeai/configs/**' + - '/invokeai/frontend/dist/**' + merge_group: + workflow_dispatch: + +concurrency: + group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }} + cancel-in-progress: true + +jobs: + matrix: + if: github.event.pull_request.draft == false + strategy: + matrix: + python-version: + # - '3.9' + - '3.10' + pytorch: + # - linux-cuda-11_6 + - linux-cuda-11_7 + - linux-rocm-5_2 + - linux-cpu + - macos-default + - windows-cpu + # - windows-cuda-11_6 + # - windows-cuda-11_7 + include: + # - pytorch: linux-cuda-11_6 + # os: ubuntu-22.04 + # extra-index-url: 'https://download.pytorch.org/whl/cu116' + # github-env: $GITHUB_ENV + - pytorch: linux-cuda-11_7 + os: ubuntu-22.04 + github-env: $GITHUB_ENV + - pytorch: linux-rocm-5_2 + os: ubuntu-22.04 + extra-index-url: 'https://download.pytorch.org/whl/rocm5.2' + github-env: $GITHUB_ENV + - pytorch: linux-cpu + os: ubuntu-22.04 + extra-index-url: 'https://download.pytorch.org/whl/cpu' + github-env: $GITHUB_ENV + - pytorch: macos-default + os: macOS-12 + github-env: $GITHUB_ENV + - pytorch: windows-cpu + os: windows-2022 + github-env: $env:GITHUB_ENV + # - pytorch: windows-cuda-11_6 + # os: windows-2022 + # extra-index-url: 'https://download.pytorch.org/whl/cu116' + # github-env: $env:GITHUB_ENV + # - pytorch: windows-cuda-11_7 + # os: windows-2022 + # extra-index-url: 'https://download.pytorch.org/whl/cu117' + # github-env: $env:GITHUB_ENV + name: ${{ matrix.pytorch }} on ${{ matrix.python-version }} + runs-on: ${{ matrix.os }} + steps: + - run: 'echo "No build required"' diff --git a/.github/workflows/test-invoke-pip.yml b/.github/workflows/test-invoke-pip.yml index 844809427e..88b177a276 100644 --- a/.github/workflows/test-invoke-pip.yml +++ b/.github/workflows/test-invoke-pip.yml @@ -3,7 +3,19 @@ on: push: branches: - 'main' + paths: + - '/pyproject.toml' + - '/ldm/**' + - '/invokeai/backend/**' + - '/invokeai/configs/**' + - '/invokeai/frontend/dist/**' pull_request: + paths: + - '/pyproject.toml' + - '/ldm/**' + - '/invokeai/backend/**' + - '/invokeai/configs/**' + - '/invokeai/frontend/dist/**' types: - 'ready_for_review' - 'opened' diff --git a/README.md b/README.md index 5ae87d8678..4c9a3d537e 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ [![github open issues badge]][github open issues link] [![github open prs badge]][github open prs link] [CI checks on main badge]: https://flat.badgen.net/github/checks/invoke-ai/InvokeAI/main?label=CI%20status%20on%20main&cache=900&icon=github -[CI checks on main link]: https://github.com/invoke-ai/InvokeAI/actions/workflows/test-invoke-conda.yml +[CI checks on main link]:https://github.com/invoke-ai/InvokeAI/actions?query=branch%3Amain [discord badge]: https://flat.badgen.net/discord/members/ZmtBAhwWhy?icon=discord [discord link]: https://discord.gg/ZmtBAhwWhy [github forks badge]: https://flat.badgen.net/github/forks/invoke-ai/InvokeAI?icon=github diff --git a/invokeai/frontend/.eslintignore b/invokeai/frontend/.eslintignore index 31ae502559..35ea9e1948 100644 --- a/invokeai/frontend/.eslintignore +++ b/invokeai/frontend/.eslintignore @@ -3,3 +3,4 @@ dist/ node_modules/ patches/ public/ +stats.html diff --git a/invokeai/frontend/.prettierignore b/invokeai/frontend/.prettierignore index 31ae502559..35ea9e1948 100644 --- a/invokeai/frontend/.prettierignore +++ b/invokeai/frontend/.prettierignore @@ -3,3 +3,4 @@ dist/ node_modules/ patches/ public/ +stats.html diff --git a/invokeai/frontend/dist/assets/index-6b9f1e33.js b/invokeai/frontend/dist/assets/index-12bd70ca.js similarity index 100% rename from invokeai/frontend/dist/assets/index-6b9f1e33.js rename to invokeai/frontend/dist/assets/index-12bd70ca.js diff --git a/invokeai/frontend/dist/assets/index-c1af841f.css b/invokeai/frontend/dist/assets/index-c1af841f.css new file mode 100644 index 0000000000..bef1189928 --- /dev/null +++ b/invokeai/frontend/dist/assets/index-c1af841f.css @@ -0,0 +1 @@ +@font-face{font-family:Inter;src:url(./Inter-b9a8e5e2.ttf);font-display:swap;font-weight:400;font-style:normal}@font-face{font-family:Inter;src:url(./Inter-Bold-790c108b.ttf);font-display:swap;font-weight:600;font-style:normal}@keyframes slideOut{0%{transform:translate(10rem)}to{transform:translate(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}*{scrollbar-width:thick;scrollbar-color:var(--scrollbar-color) transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--scrollbar-color);border-radius:8px;border:2px solid var(--scrollbar-color)}*::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color-hover);border:2px solid var(--scrollbar-color-hover)}::-webkit-scrollbar-button{background:transparent}[data-theme=dark]{--white: rgb(255, 255, 255);--accent-color-dim: rgb(57, 25, 153);--accent-color: rgb(80, 40, 200);--accent-color-bright: rgb(104, 60, 230);--accent-color-hover: var(--accent-color-bright);--root-bg-color: rgb(10, 10, 10);--background-color: rgb(26, 26, 32);--background-color-light: rgb(40, 44, 48);--background-color-secondary: rgb(16, 16, 22);--text-color: rgb(255, 255, 255);--text-color-secondary: rgb(160, 162, 188);--subtext-color: rgb(24, 24, 34);--subtext-color-bright: rgb(48, 48, 64);--border-color: rgb(30, 30, 46);--border-color-light: rgb(60, 60, 76);--svg-color: rgb(255, 255, 255);--invalid: rgb(255, 75, 75);--invalid-secondary: rgb(120, 5, 5);--destructive-color: rgb(185, 55, 55);--destructive-color-hover: rgb(255, 75, 75);--warning-color: rgb(200, 88, 40);--warning-color-hover: rgb(230, 117, 60);--border-color-invalid: rgb(255, 80, 50);--box-shadow-color-invalid: rgb(210, 30, 10);--tab-color: rgb(30, 32, 42);--tab-hover-color: rgb(46, 48, 58);--tab-panel-bg: rgb(36, 38, 48);--tab-list-bg: var(--accent-color);--tab-list-text: rgb(202, 204, 216);--tab-list-text-inactive: rgb(92, 94, 114);--btn-base-color: rgb(30, 32, 42);--btn-base-color-hover: rgb(46, 48, 68);--btn-load-more: rgb(30, 32, 42);--btn-load-more-hover: rgb(54, 56, 66);--btn-svg-color: rgb(255, 255, 255);--btn-delete-image: rgb(182, 46, 46);--btn-checkbox-border-hover: rgb(46, 48, 68);--progress-bar-color: var(--accent-color);--prompt-bg-color: rgb(10, 10, 10);--switch-bg-color: rgb(100, 102, 110);--switch-bg-active-color: var(--accent-color);--slider-color: var(--accent-color-bright);--slider-color: rgb(151, 113, 255);--slider-mark-color: rgb(151, 113, 255);--resizeable-handle-border-color: var(--accent-color);--metadata-bg-color: rgba(0, 0, 0, .7);--metadata-json-bg-color: rgba(255, 255, 255, .1);--status-good-color: rgb(125, 255, 100);--status-good-glow: rgb(40, 215, 40);--status-working-color: rgb(255, 175, 55);--status-working-glow: rgb(255, 160, 55);--status-bad-color: rgb(255, 90, 90);--status-bad-glow: rgb(255, 40, 40);--notice-color: rgb(130, 71, 19);--settings-modal-bg: rgb(30, 32, 42);--input-checkbox-bg: rgb(60, 64, 68);--input-checkbox-checked-bg: var(--accent-color);--input-checkbox-checked-tick: rgb(0, 0, 0);--input-border-color: var(--accent-color-bright);--input-box-shadow-color: var(--accent-color);--error-level-info: rgb(200, 202, 224);--error-level-warning: rgb(255, 225, 105);--error-level-error: rgb(255, 81, 46);--console-bg-color: rgb(30, 30, 36);--console-icon-button-bg-color: rgb(50, 53, 64);--console-icon-button-bg-color-hover: rgb(70, 73, 84);--img2img-img-bg-color: rgb(30, 32, 42);--context-menu-bg-color: rgb(46, 48, 58);--context-menu-box-shadow: none;--context-menu-bg-color-hover: rgb(30, 32, 42);--floating-button-drop-shadow-color: var(--accent-color);--inpainting-alerts-bg: rgba(20, 20, 26, .75);--inpainting-alerts-icon-color: rgb(255, 255, 255);--inpainting-alerts-bg-active: var(--accent-color);--inpainting-alerts-icon-active: rgb(255, 255, 255);--inpainting-alerts-bg-alert: var(--invalid);--inpainting-alerts-icon-alert: rgb(255, 255, 255);--checkboard-dots-color: rgb(35, 35, 39);--scrollbar-color: var(--accent-color);--scrollbar-color-hover: var(--accent-color-bright)}[data-theme=light]{--white: rgb(255, 255, 255);--accent-color-dim: rgb(186, 146, 0);--accent-color: rgb(235, 185, 5);--accent-color-bright: rgb(255, 200, 0);--accent-color-hover: var(--accent-color-bright);--root-bg-color: rgb(255, 255, 255);--background-color: rgb(220, 222, 224);--background-color-light: rgb(250, 252, 254);--background-color-secondary: rgb(208, 210, 212);--text-color: rgb(0, 0, 0);--text-color-secondary: rgb(40, 40, 40);--subtext-color: rgb(24, 24, 34);--subtext-color-bright: rgb(142, 144, 146);--border-color: rgb(200, 200, 200);--border-color-light: rgb(147, 147, 147);--svg-color: rgb(50, 50, 50);--invalid: rgb(255, 75, 75);--invalid-secondary: rgb(120, 5, 5);--destructive-color: rgb(237, 51, 51);--destructive-color-hover: rgb(255, 55, 55);--warning-color: rgb(224, 142, 42);--warning-color-hover: rgb(255, 167, 60);--border-color-invalid: rgb(255, 80, 50);--box-shadow-color-invalid: none;--tab-color: rgb(202, 204, 206);--tab-hover-color: rgb(196, 198, 200);--tab-panel-bg: rgb(206, 208, 210);--tab-list-bg: rgb(235, 185, 5);--tab-list-text: rgb(0, 0, 0);--tab-list-text-inactive: rgb(106, 108, 110);--btn-base-color: rgb(184, 186, 188);--btn-base-color-hover: rgb(230, 232, 234);--btn-load-more: rgb(202, 204, 206);--btn-load-more-hover: rgb(178, 180, 182);--btn-svg-color: rgb(0, 0, 0);--btn-delete-image: rgb(213, 49, 49);--btn-checkbox-border-hover: rgb(176, 178, 182);--progress-bar-color: rgb(235, 185, 5);--prompt-bg-color: rgb(225, 227, 229);--switch-bg-color: rgb(178, 180, 182);--switch-bg-active-color: rgb(235, 185, 5);--slider-color: var(--accent-color);--slider-mark-color: rgb(0, 0, 0);--resizeable-handle-border-color: rgb(160, 162, 164);--metadata-bg-color: rgba(230, 230, 230, .9);--metadata-json-bg-color: rgba(0, 0, 0, .1);--status-good-color: rgb(21, 126, 0);--status-good-glow: var(--background-color);--status-working-color: rgb(235, 141, 0);--status-working-glow: var(--background-color);--status-bad-color: rgb(202, 0, 0);--status-bad-glow: var(--background-color);--notice-color: rgb(255, 71, 90);--settings-modal-bg: rgb(202, 204, 206);--input-checkbox-bg: rgb(167, 167, 171);--input-checkbox-checked-bg: rgb(235, 185, 5);--input-checkbox-checked-tick: rgb(0, 0, 0);--input-border-color: rgb(0, 0, 0);--input-box-shadow-color: none;--error-level-info: rgb(42, 42, 42);--error-level-warning: rgb(173, 121, 0);--error-level-error: rgb(145, 14, 0);--console-bg-color: rgb(220, 224, 230);--console-icon-button-bg-color: var(--switch-bg-color);--console-icon-button-bg-color-hover: var(--resizeable-handle-border-color);--img2img-img-bg-color: rgb(180, 182, 184);--context-menu-bg-color: var(--background-color);--context-menu-box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, .35), 0px 10px 20px -15px rgba(22, 23, 24, .2);--context-menu-bg-color-hover: var(--background-color-secondary);--floating-button-drop-shadow-color: rgba(0, 0, 0, .7);--inpainting-alerts-bg: rgba(220, 222, 224, .75);--inpainting-alerts-icon-color: rgb(0, 0, 0);--inpainting-alerts-bg-active: rgb(255, 200, 0);--inpainting-alerts-icon-active: rgb(0, 0, 0);--inpainting-alerts-bg-alert: var(--invalid);--inpainting-alerts-icon-alert: rgb(0, 0, 0);--checkboard-dots-color: rgb(160, 160, 172);--scrollbar-color: rgb(180, 180, 184);--scrollbar-color-hover: rgb(150, 150, 154)}[data-theme=green]{--white: rgb(255, 255, 255);--accent-color-dim: rgb(10, 60, 40);--accent-color: rgb(20, 110, 70);--accent-color-bright: rgb(30, 180, 100);--accent-color-hover: var(--accent-color-bright);--root-bg-color: rgb(10, 10, 14);--background-color: rgb(30, 32, 37);--background-color-light: rgb(40, 44, 48);--background-color-secondary: rgb(22, 24, 28);--text-color: rgb(255, 255, 255);--text-color-secondary: rgb(160, 164, 168);--subtext-color: rgb(24, 24, 28);--subtext-color-bright: rgb(68, 72, 76);--border-color: rgb(40, 44, 48);--border-color-light: rgb(60, 60, 64);--svg-color: rgb(220, 224, 228);--invalid: rgb(255, 75, 75);--invalid-secondary: rgb(120, 5, 5);--destructive-color: rgb(185, 55, 55);--destructive-color-hover: rgb(255, 75, 75);--warning-color: rgb(200, 88, 40);--warning-color-hover: rgb(230, 117, 60);--border-color-invalid: rgb(255, 80, 50);--box-shadow-color-invalid: rgb(210, 30, 10);--tab-color: rgb(40, 44, 48);--tab-hover-color: rgb(48, 52, 56);--tab-panel-bg: rgb(36, 40, 44);--tab-list-bg: var(--accent-color);--tab-list-text: rgb(202, 204, 206);--tab-list-text-inactive: rgb(92, 94, 96);--btn-base-color: rgb(40, 44, 48);--btn-base-color-hover: rgb(56, 60, 64);--btn-load-more: rgb(30, 32, 42);--btn-load-more-hover: rgb(54, 56, 66);--btn-svg-color: rgb(255, 255, 255);--btn-delete-image: rgb(182, 46, 46);--btn-checkbox-border-hover: rgb(46, 48, 68);--progress-bar-color: var(--accent-color);--prompt-bg-color: rgb(10, 10, 14);--switch-bg-color: rgb(100, 102, 110);--switch-bg-active-color: var(--accent-color);--slider-color: var(--accent-color-bright);--slider-mark-color: var(--accent-color-bright);--resizeable-handle-border-color: var(--accent-color);--metadata-bg-color: rgba(0, 0, 0, .7);--metadata-json-bg-color: rgba(255, 255, 255, .1);--status-good-color: rgb(125, 255, 100);--status-good-glow: rgb(40, 215, 40);--status-working-color: rgb(255, 175, 55);--status-working-glow: rgb(255, 160, 55);--status-bad-color: rgb(255, 90, 90);--status-bad-glow: rgb(255, 40, 40);--notice-color: rgb(130, 71, 19);--settings-modal-bg: rgb(30, 32, 42);--input-checkbox-bg: rgb(60, 64, 68);--input-checkbox-checked-bg: var(--accent-color);--input-checkbox-checked-tick: rgb(0, 0, 0);--input-border-color: var(--accent-color-bright);--input-box-shadow-color: var(--accent-color);--error-level-info: rgb(200, 202, 224);--error-level-warning: rgb(255, 225, 105);--error-level-error: rgb(255, 81, 46);--console-bg-color: rgb(30, 30, 36);--console-icon-button-bg-color: rgb(50, 53, 64);--console-icon-button-bg-color-hover: rgb(70, 73, 84);--img2img-img-bg-color: rgb(30, 32, 42);--context-menu-bg-color: rgb(46, 48, 58);--context-menu-box-shadow: none;--context-menu-bg-color-hover: rgb(30, 32, 42);--floating-button-drop-shadow-color: var(--accent-color);--inpainting-alerts-bg: rgba(20, 20, 26, .75);--inpainting-alerts-icon-color: rgb(255, 255, 255);--inpainting-alerts-bg-active: var(--accent-color);--inpainting-alerts-icon-active: rgb(255, 255, 255);--inpainting-alerts-bg-alert: var(--invalid);--inpainting-alerts-icon-alert: rgb(255, 255, 255);--checkboard-dots-color: rgb(35, 35, 39);--scrollbar-color: var(--accent-color);--scrollbar-color-hover: var(--accent-color-bright)}@media (max-width: 600px){#root .app-content{padding:5px}#root .app-content .site-header{position:fixed;display:flex;height:100px;z-index:1}#root .app-content .site-header .site-header-left-side{position:absolute;display:flex;min-width:145px;float:left;padding-left:0}#root .app-content .site-header .site-header-right-side{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:25px 25px 25px;grid-template-areas:"logoSpace logoSpace logoSpace sampler sampler sampler" "status status status status status status" "btn1 btn2 btn3 btn4 btn5 btn6";row-gap:15px}#root .app-content .site-header .site-header-right-side .chakra-popover__popper{grid-area:logoSpace}#root .app-content .site-header .site-header-right-side>:nth-child(1).chakra-text{grid-area:status;width:100%;display:flex;justify-content:center}#root .app-content .site-header .site-header-right-side>:nth-child(2){grid-area:sampler;display:flex;justify-content:center;align-items:center}#root .app-content .site-header .site-header-right-side>:nth-child(2) select{width:185px;margin-top:10px}#root .app-content .site-header .site-header-right-side>:nth-child(2) .chakra-select__icon-wrapper{right:10px}#root .app-content .site-header .site-header-right-side>:nth-child(2) .chakra-select__icon-wrapper svg{margin-top:10px}#root .app-content .site-header .site-header-right-side>:nth-child(3){grid-area:btn1}#root .app-content .site-header .site-header-right-side>:nth-child(4){grid-area:btn2}#root .app-content .site-header .site-header-right-side>:nth-child(6){grid-area:btn3}#root .app-content .site-header .site-header-right-side>:nth-child(7){grid-area:btn4}#root .app-content .site-header .site-header-right-side>:nth-child(8){grid-area:btn5}#root .app-content .site-header .site-header-right-side>:nth-child(9){grid-area:btn6}#root .app-content .app-tabs{position:fixed;display:flex;flex-direction:column;row-gap:15px;max-width:100%;overflow:hidden;margin-top:120px}#root .app-content .app-tabs .app-tabs-list{display:flex;justify-content:space-between}#root .app-content .app-tabs .app-tabs-panels{overflow:hidden;overflow-y:scroll}#root .app-content .app-tabs .app-tabs-panels .workarea-main{display:grid;grid-template-areas:"workarea" "options" "gallery";row-gap:15px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .parameters-panel-wrapper{grid-area:options;width:100%;max-width:100%;height:inherit;overflow:inherit;padding:0 10px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .parameters-panel-wrapper .main-settings-row,#root .app-content .app-tabs .app-tabs-panels .workarea-main .parameters-panel-wrapper .advanced-parameters-item{max-width:100%}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper{grid-area:workarea}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .workarea-split-view{display:flex;flex-direction:column}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .current-image-options{column-gap:3px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .text-to-image-area{padding:0}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .current-image-preview{height:430px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .image-upload-button{row-gap:10px;padding:5px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .image-upload-button svg{width:2rem;height:2rem;margin-top:10px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .inpainting-settings{display:flex;flex-wrap:wrap;row-gap:10px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .inpainting-canvas-area .konvajs-content{height:400px!important}#root .app-content .app-tabs .app-tabs-panels .workarea-main .image-gallery-wrapper{grid-area:gallery;min-height:400px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .image-gallery-wrapper .image-gallery-popup{width:100%!important;max-width:100%!important}}svg{fill:var(--svg-color)}.App{display:grid;width:100vw;height:100vh;background-color:var(--background-color)}.app-content{display:grid;row-gap:1rem;padding:1rem;grid-auto-rows:min-content auto;width:calc(100vw + -0px);height:calc(100vh - .3rem)}.site-header{display:grid;grid-template-columns:auto max-content}.site-header-left-side{display:flex;align-items:center;column-gap:.7rem;padding-left:.5rem}.site-header-left-side img{width:32px;height:32px}.site-header-right-side{display:flex;align-items:center;column-gap:.5rem}.site-header-right-side .lang-select-btn[data-selected=true],.site-header-right-side .lang-select-btn[data-selected=true]:hover{background-color:var(--accent-color)}.status{font-size:.8rem;font-weight:700}.status-good{color:var(--status-good-color);text-shadow:0 0 10px var(--status-good-glow)}.status-bad{color:var(--status-bad-color);text-shadow:0 0 10px var(--status-bad-glow)}.status-working{color:var(--status-working-color);text-shadow:0 0 10px var(--status-working-glow)}.settings-modal{max-height:36rem;font-family:Inter}.settings-modal .settings-modal-content{display:grid;row-gap:2rem;overflow-y:scroll}.settings-modal .settings-modal-header{font-weight:700}.settings-modal .settings-modal-items{display:grid;row-gap:.5rem}.settings-modal .settings-modal-items .settings-modal-item{display:grid;grid-auto-flow:column;background-color:var(--background-color);padding:.4rem 1rem;border-radius:.5rem;align-items:center;width:100%}.settings-modal .settings-modal-reset{display:grid;row-gap:1rem}.settings-modal .settings-modal-reset button{min-width:100%;min-height:100%;background-color:var(--destructive-color)!important}.settings-modal .settings-modal-reset button:hover{background-color:var(--destructive-color-hover)}.settings-modal .settings-modal-reset button:disabled{background-color:var(--btn-base-color)}.settings-modal .settings-modal-reset button:disabled:hover{background-color:var(--btn-base-color)}.settings-modal .settings-modal-reset button svg{width:20px;height:20px;color:var(--btn-svg-color)}.add-model-modal{display:flex}.add-model-modal-body{display:flex;flex-direction:column;row-gap:1rem;padding-bottom:2rem}.add-model-form{display:flex;flex-direction:column;row-gap:.5rem}.hotkeys-modal{width:36rem;max-width:36rem;display:grid;padding:1rem;row-gap:1rem;font-family:Inter}.hotkeys-modal h1{font-size:1.2rem;font-weight:700}.hotkeys-modal h2{font-weight:700}.hotkeys-modal-button{display:flex;align-items:center;justify-content:space-between}.hotkeys-modal-items{max-height:36rem;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.hotkeys-modal-items::-webkit-scrollbar{display:none}.hotkeys-modal-items .chakra-accordion{display:grid;row-gap:.5rem}.hotkeys-modal-items .chakra-accordion__item{border:none;border-radius:.3rem;background-color:var(--tab-hover-color)}.hotkeys-modal-items button{border-radius:.3rem}.hotkeys-modal-items button[aria-expanded=true]{background-color:var(--tab-hover-color);border-radius:.3rem}.hotkey-modal-category{display:grid;row-gap:.5rem}.hotkey-modal-item{display:grid;grid-template-columns:auto max-content;justify-content:space-between;align-items:center;background-color:var(--background-color);padding:.5rem 1rem;border-radius:.3rem}.hotkey-modal-item .hotkey-info{display:grid}.hotkey-modal-item .hotkey-info .hotkey-title{font-weight:700}.hotkey-modal-item .hotkey-info .hotkey-description{font-size:.9rem;color:var(--text-color-secondary)}.hotkey-modal-item .hotkey-key{font-size:.8rem;font-weight:700;background-color:var(--background-color-light);padding:.2rem .5rem;border-radius:.3rem}.console{width:100vw;display:flex;flex-direction:column;background:var(--console-bg-color);overflow:auto;direction:column;font-family:monospace;padding:0 1rem 1rem 3rem;border-top-width:.3rem;border-color:var(--resizeable-handle-border-color)}.console .console-info-color{color:var(--error-level-info)}.console .console-warning-color{color:var(--error-level-warning)}.console .console-error-color{color:var(--status-bad-color)}.console .console-entry{display:flex;column-gap:.5rem}.console .console-entry .console-timestamp{font-weight:semibold}.console .console-entry .console-message{word-break:break-all}.console-toggle-icon-button{background:var(--console-icon-button-bg-color);position:fixed;left:.5rem;bottom:.5rem;z-index:10000}.console-toggle-icon-button:hover{background:var(--console-icon-button-bg-color-hover)}.console-toggle-icon-button[data-error-seen=true],.console-toggle-icon-button[data-error-seen=true]:hover{background:var(--status-bad-color)}.console-autoscroll-icon-button{background:var(--console-icon-button-bg-color);position:fixed;left:.5rem;bottom:3rem;z-index:10000}.console-autoscroll-icon-button:hover{background:var(--console-icon-button-bg-color-hover)}.console-autoscroll-icon-button[data-autoscroll-enabled=true]{background:var(--accent-color)}.console-autoscroll-icon-button[data-autoscroll-enabled=true]:hover{background:var(--accent-color-hover)}.progress-bar{background-color:var(--root-bg-color);height:.3rem;z-index:99}.progress-bar div{background-color:var(--progress-bar-color);transition:width .2s ease-in-out}.progress-bar div[data-indeterminate]{background-color:unset;background-image:linear-gradient(to right,transparent 0%,var(--progress-bar-color) 50%,transparent 100%)}.prompt-bar{display:grid;row-gap:1rem}.prompt-bar input,.prompt-bar textarea{background-color:var(--prompt-bg-color);font-size:1rem;border:2px solid var(--border-color)}.prompt-bar input:hover,.prompt-bar textarea:hover{border:2px solid var(--border-color-light)}.prompt-bar input:focus-visible,.prompt-bar textarea:focus-visible{border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.prompt-bar input[aria-invalid=true],.prompt-bar textarea[aria-invalid=true]{border:2px solid var(--border-color-invalid);box-shadow:0 0 10px 0 var(--box-shadow-color-invalid)}.prompt-bar input:disabled,.prompt-bar textarea:disabled{border:2px solid var(--border-color);box-shadow:none}.prompt-bar textarea{min-height:10rem}.process-buttons{display:flex;column-gap:.5rem}.invoke-btn{flex-grow:1;width:100%;min-width:100%;min-height:100%;background-color:var(--accent-color)!important}.invoke-btn:hover{background-color:var(--accent-color-hover)}.invoke-btn:disabled{background-color:var(--btn-base-color)}.invoke-btn:disabled:hover{background-color:var(--btn-base-color)}.invoke-btn svg{width:16px;height:16px;color:var(--btn-svg-color)}.cancel-btn{min-width:3rem;min-height:100%;background-color:var(--destructive-color)!important}.cancel-btn:hover{background-color:var(--destructive-color-hover)}.cancel-btn:disabled{background-color:var(--btn-base-color)}.cancel-btn:disabled:hover{background-color:var(--btn-base-color)}.cancel-btn svg{width:20px;height:20px;color:var(--btn-svg-color)}.loopback-btn[data-as-checkbox=true]{background-color:var(--btn-btn-base-color);border:3px solid var(--btn-btn-base-color)}.loopback-btn[data-as-checkbox=true] svg{fill:var(--text-color)}.loopback-btn[data-as-checkbox=true]:hover{background-color:var(--btn-btn-base-color);border-color:var(--btn-checkbox-border-hover)}.loopback-btn[data-as-checkbox=true]:hover svg{fill:var(--text-color)}.loopback-btn[data-as-checkbox=true][data-selected=true]{border-color:var(--accent-color);background-color:var(--btn-btn-base-color)}.loopback-btn[data-as-checkbox=true][data-selected=true] svg{fill:var(--text-color)}.loopback-btn[data-as-checkbox=true][data-selected=true]:hover{border-color:var(--accent-color);background-color:var(--btn-btn-base-color)}.loopback-btn[data-as-checkbox=true][data-selected=true]:hover svg{fill:var(--text-color)}.main-settings,.main-settings-list{display:grid;row-gap:1rem}.main-settings-row{display:grid;grid-template-columns:repeat(3,auto);column-gap:.5rem;max-width:22.5rem}.main-settings-block{border-radius:.5rem;display:grid!important;grid-template-columns:auto!important;row-gap:.5rem}.main-settings-block .invokeai__number-input-form-label,.main-settings-block .invokeai__select-label{font-weight:700;font-size:.9rem!important}.main-settings-block .invokeai__select-label{margin:0}.advanced-parameters{padding-top:.5rem;display:grid;row-gap:.5rem}.advanced-parameters-item{display:grid;max-width:22.5rem;border:none;border-top:0px;border-radius:.4rem;background-color:var(--tab-panel-bg)}.advanced-parameters-item[aria-expanded=true]{background-color:var(--tab-hover-color);border-radius:0 0 .4rem .4rem}.advanced-parameters-panel{background-color:var(--tab-panel-bg);border-radius:0 0 .4rem .4rem;padding:1rem}.advanced-parameters-panel button{background-color:var(--btn-base-color)}.advanced-parameters-panel button:hover{background-color:var(--btn-base-color-hover)}.advanced-parameters-panel button:disabled:hover{background-color:var(--btn-base-color)}.advanced-parameters-header{border-radius:.4rem;font-weight:700}.advanced-parameters-header[aria-expanded=true]{background-color:var(--tab-hover-color);border-radius:.4rem .4rem 0 0}.advanced-parameters-header:hover{background-color:var(--tab-hover-color)}.inpainting-bounding-box-settings{display:flex;flex-direction:column;border-radius:.4rem;border:2px solid var(--tab-color)}.inpainting-bounding-box-header{background-color:var(--tab-color);display:flex;flex-direction:row;justify-content:space-between;padding:.5rem 1rem;border-radius:.3rem .3rem 0 0;align-items:center}.inpainting-bounding-box-header button{width:.5rem;height:1.2rem;background:none}.inpainting-bounding-box-header button:hover{background:none}.inpainting-bounding-box-settings-items{padding:1rem;display:flex;flex-direction:column;row-gap:1rem}.inpainting-bounding-box-settings-items .inpainting-bounding-box-reset-icon-btn{background-color:var(--btn-base-color)}.inpainting-bounding-box-settings-items .inpainting-bounding-box-reset-icon-btn:hover{background-color:var(--btn-base-color-hover)}.inpainting-bounding-box-dimensions-slider-numberinput{display:grid;grid-template-columns:repeat(3,auto);column-gap:1rem}.inpainting-bounding-box-darken{width:max-content}.current-image-area{display:flex;flex-direction:column;height:100%;row-gap:1rem;background-color:var(--background-color-secondary);border-radius:.5rem}.current-image-preview{position:relative;justify-content:center;align-items:center;display:flex;width:100%;height:100%}.current-image-preview img{border-radius:.5rem;object-fit:contain;max-width:100%;max-height:100%;height:auto;position:absolute}.current-image-metadata{grid-area:current-image-preview}.current-image-next-prev-buttons{grid-area:current-image-content;display:flex;justify-content:space-between;z-index:1;height:100%;width:100%;pointer-events:none}.next-prev-button-trigger-area{width:7rem;height:100%;width:15%;display:grid;align-items:center;pointer-events:auto}.next-prev-button-trigger-area.prev-button-trigger-area{justify-content:flex-start}.next-prev-button-trigger-area.next-button-trigger-area{justify-content:flex-end}.next-prev-button{font-size:4rem;fill:var(--white);filter:drop-shadow(0 0 1rem var(--text-color-secondary));opacity:70%}.current-image-display-placeholder{background-color:var(--background-color-secondary);display:grid;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:.5rem}.current-image-display-placeholder svg{width:10rem;height:10rem;color:var(--svg-color)}.current-image-options{width:100%;display:flex;justify-content:center;align-items:center;column-gap:.5em}.current-image-options .current-image-send-to-popover,.current-image-options .current-image-postprocessing-popover{display:flex;flex-direction:column;row-gap:.5rem;max-width:25rem}.current-image-options .current-image-send-to-popover .invokeai__button{place-content:start}.current-image-options .chakra-popover__popper{z-index:11}.current-image-options .delete-image-btn{background-color:var(--btn-base-color)}.current-image-options .delete-image-btn svg{fill:var(--btn-delete-image)}.image-gallery-wrapper-enter{transform:translate(150%)}.image-gallery-wrapper-enter-active{transform:translate(0);transition:all .12s ease-out}.image-gallery-wrapper-exit{transform:translate(0)}.image-gallery-wrapper-exit-active{transform:translate(150%);transition:all .12s ease-out}.image-gallery-wrapper[data-pinned=false]{position:fixed;height:100vh;top:0;right:0}.image-gallery-wrapper[data-pinned=false] .image-gallery-popup{border-radius:0;box-shadow:0 0 1rem var(--text-color-a3)}.image-gallery-wrapper[data-pinned=false] .image-gallery-popup .image-gallery-container{max-height:calc(100vh + 4.7rem)}.image-gallery-wrapper .image-gallery-popup{background-color:var(--background-color-secondary);padding:1rem;display:flex;flex-direction:column;row-gap:1rem;border-radius:.5rem;border-left-width:.3rem;border-color:var(--tab-list-text-inactive)}.image-gallery-wrapper .image-gallery-popup[data-resize-alert=true]{border-color:var(--status-bad-color)}.image-gallery-wrapper .image-gallery-popup .image-gallery-header{display:flex;align-items:center;column-gap:.5rem;justify-content:space-between}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-header-right-icons{display:flex;flex-direction:row;column-gap:.5rem}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-icon-btn{background-color:var(--btn-load-more)}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-icon-btn:hover{background-color:var(--btn-load-more-hover)}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-settings-popover{display:flex;flex-direction:column;row-gap:.5rem}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-settings-popover div{display:flex;column-gap:.5rem;align-items:center;justify-content:space-between}.image-gallery-wrapper .image-gallery-popup .image-gallery-header h1{font-weight:700}.image-gallery-wrapper .image-gallery-popup .image-gallery-container{display:flex;flex-direction:column;max-height:calc(100vh - (70px + 7rem));overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.image-gallery-wrapper .image-gallery-popup .image-gallery-container::-webkit-scrollbar{display:none}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder{display:flex;flex-direction:column;row-gap:.5rem;background-color:var(--background-color);border-radius:.5rem;place-items:center;padding:2rem;text-align:center}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder p{color:var(--subtext-color-bright);font-family:Inter}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder svg{width:4rem;height:4rem;color:var(--svg-color)}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn{background-color:var(--btn-load-more);font-size:.85rem;padding:.5rem;margin-top:1rem}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn:disabled:hover{background-color:var(--btn-load-more)}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn:hover{background-color:var(--btn-load-more-hover)}.image-gallery-category-btn-group{width:max-content;column-gap:0;justify-content:stretch}.image-gallery-category-btn-group button{background-color:var(--btn-base-color);flex-grow:1}.image-gallery-category-btn-group button:hover{background-color:var(--btn-base-color-hover)}.image-gallery-category-btn-group button[data-selected=true]{background-color:var(--accent-color)}.image-gallery-category-btn-group button[data-selected=true]:hover{background-color:var(--accent-color-hover)}.image-gallery{display:grid;grid-gap:.5rem}.image-gallery .hoverable-image{padding:.5rem;position:relative}.image-gallery .hoverable-image:before{content:"";display:block;padding-bottom:100%}.image-gallery .hoverable-image .hoverable-image-image{position:absolute;max-width:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.hoverable-image{display:flex;justify-content:center;transition:transform .2s ease-out}.hoverable-image:hover{cursor:pointer;border-radius:.5rem;z-index:2}.hoverable-image .hoverable-image-image{width:100%;height:100%;max-width:100%;max-height:100%}.hoverable-image .hoverable-image-delete-button{position:absolute;top:.25rem;right:.25rem}.hoverable-image .hoverable-image-content{display:flex;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center}.hoverable-image .hoverable-image-content .hoverable-image-check{fill:var(--status-good-color)}.hoverable-image .hoverable-image-icons{position:absolute;bottom:-2rem;display:grid;width:min-content;grid-template-columns:repeat(2,max-content);border-radius:.4rem;background-color:var(--background-color-secondary);padding:.2rem;gap:.2rem;grid-auto-rows:max-content}.hoverable-image .hoverable-image-icons button{width:12px;height:12px;border-radius:.2rem;padding:10px 0;flex-shrink:2}.hoverable-image .hoverable-image-icons button svg{width:12px;height:12px}.hoverable-image-context-menu{z-index:15;padding:.4rem;border-radius:.25rem;background-color:var(--context-menu-bg-color);box-shadow:var(--context-menu-box-shadow)}.hoverable-image-context-menu [role=menuitem]{font-size:.8rem;line-height:1rem;border-radius:3px;display:flex;align-items:center;height:1.75rem;padding:0 .5rem;position:relative;user-select:none;cursor:pointer;outline:none}.hoverable-image-context-menu [role=menuitem][data-disabled]{color:gray;pointer-events:none;cursor:not-allowed}.hoverable-image-context-menu [role=menuitem][data-warning]{color:var(--status-bad-color)}.hoverable-image-context-menu [role=menuitem][data-highlighted]{background-color:var(--context-menu-bg-color-hover)}.image-metadata-viewer{position:absolute;top:0;width:100%;border-radius:.5rem;padding:1rem;background-color:var(--metadata-bg-color);overflow:scroll;max-height:calc(100vh - (70px + 5.4rem));height:100%;z-index:10}.image-json-viewer{border-radius:.5rem;margin:0 .5rem 1rem;padding:1rem;overflow-x:scroll;word-break:break-all;background-color:var(--metadata-json-bg-color)}.lightbox-container{width:100%;height:100%;color:var(--text-color);overflow:hidden;position:absolute;left:0;top:0;background-color:var(--background-color-secondary);z-index:30;animation:popIn .3s ease-in}.lightbox-container .image-gallery-wrapper{max-height:100%!important}.lightbox-container .image-gallery-wrapper .image-gallery-container{max-height:calc(100vh - 5rem)}.lightbox-container .current-image-options{z-index:2;position:absolute;top:1rem}.lightbox-container .image-metadata-viewer{left:0;max-height:100%}.lightbox-close-btn{z-index:3;position:absolute;left:1rem;top:1rem;background-color:var(--btn-base-color)}.lightbox-close-btn:hover{background-color:var(--btn-base-color-hover)}.lightbox-close-btn:disabled:hover{background-color:var(--btn-base-color)}.lightbox-display-container{display:flex;flex-direction:row}.lightbox-preview-wrapper{overflow:hidden;background-color:var(--background-color-secondary);display:grid;grid-template-columns:auto max-content;place-items:center;width:100vw;height:100vh}.lightbox-preview-wrapper .current-image-next-prev-buttons{position:absolute}.lightbox-preview-wrapper .lightbox-image{grid-area:lightbox-content;border-radius:.5rem}.lightbox-preview-wrapper .lightbox-image-options{position:absolute;z-index:2;left:1rem;top:4.5rem;user-select:none;border-radius:.5rem;display:flex;flex-direction:column;row-gap:.5rem}@keyframes popIn{0%{opacity:0;filter:blur(100)}to{opacity:1;filter:blur(0)}}.app-tabs{display:grid;grid-template-columns:min-content auto;column-gap:1rem;height:calc(100vh - (70px + 1rem))}.app-tabs-list{display:grid;row-gap:.3rem;grid-auto-rows:min-content;color:var(--tab-list-text-inactive)}.app-tabs-list button{font-size:.85rem;padding:.5rem}.app-tabs-list button:hover{background-color:var(--tab-hover-color);border-radius:.3rem}.app-tabs-list button svg{width:24px;height:24px}.app-tabs-list button[aria-selected=true]{background-color:var(--tab-list-bg);color:var(--tab-list-text);font-weight:700;border-radius:.3rem;border:none}.app-tabs-panels .app-tabs-panel{padding:0;height:100%}.workarea-wrapper{position:relative;width:100%;height:100%}.workarea-wrapper .workarea-main{display:flex;column-gap:1rem;height:100%}.workarea-wrapper .workarea-main .workarea-children-wrapper{position:relative;width:100%;height:100%}.workarea-wrapper .workarea-main .workarea-split-view{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;background-color:var(--background-color-secondary);border-radius:.5rem}.workarea-wrapper .workarea-main .workarea-split-view .workarea-split-view-left{padding-right:.5rem}.workarea-wrapper .workarea-main .workarea-split-view .workarea-split-view-right{padding-left:.5rem}.workarea-wrapper .workarea-main .workarea-single-view{width:100%;height:100%;background-color:var(--background-color-secondary);border-radius:.5rem}.workarea-wrapper .workarea-main .workarea-split-view-left,.workarea-wrapper .workarea-main .workarea-split-view-right{display:flex;flex-direction:column;height:100%;width:100%;row-gap:1rem;background-color:var(--background-color-secondary);border-radius:.5rem;padding:1rem}.workarea-split-button{position:absolute;cursor:pointer;padding:.5rem;top:0;right:0}.workarea-split-button[data-selected=true]{top:0;right:0}.workarea-split-button[data-selected=true] svg{opacity:1}.workarea-split-button svg{opacity:.5}.parameters-panel-wrapper-enter{transform:translate(-150%)}.parameters-panel-wrapper-enter-active{transform:translate(0);transition:all .12s ease-out}.parameters-panel-wrapper-exit{transform:translate(0)}.parameters-panel-wrapper-exit-active{transform:translate(-150%);transition:all .12s ease-out}.parameters-panel-wrapper{background-color:var(--background-color);height:calc(100vh - (70px + 1rem));width:22.5rem;max-width:22.5rem;flex-shrink:0;position:relative;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.parameters-panel-wrapper::-webkit-scrollbar{display:none}.parameters-panel-wrapper .parameters-panel{display:flex;flex-direction:column;row-gap:1rem;height:100%;-ms-overflow-style:none;scrollbar-width:none;background-color:var(--background-color)}.parameters-panel-wrapper .parameters-panel::-webkit-scrollbar{display:none}.parameters-panel-wrapper[data-pinned=false]{z-index:20;position:fixed;top:0;left:0;filter:var(--floating-panel-drop-shadow);width:24.5rem;max-width:24.5rem;height:100%}.parameters-panel-wrapper[data-pinned=false] .parameters-panel-margin{margin:1rem}.parameters-panel-wrapper .parameters-panel-pin-button{position:absolute;cursor:pointer;padding:.5rem;top:1rem;right:1rem;z-index:20}.parameters-panel-wrapper .parameters-panel-pin-button[data-selected=true]{top:0;right:0}.parameters-panel-wrapper .parameters-panel-pin-button svg{opacity:.5}.invoke-ai-logo-wrapper{display:flex;align-items:center;column-gap:.7rem;padding-left:.5rem;padding-top:.3rem}.invoke-ai-logo-wrapper img{width:32px;height:32px}.invoke-ai-logo-wrapper h1{font-size:1.4rem}.text-to-image-area{padding:1rem;height:100%}.image-to-image-area{display:flex;flex-direction:column;row-gap:1rem;width:100%;height:100%}.image-to-image-strength-main-option{display:flex;row-gap:.5rem!important}.image-to-image-strength-main-option .invokeai__slider-component-label{color:var(--text-color-secondary);font-size:.9rem!important}.init-image-preview-header{display:flex;align-items:center;justify-content:space-between;width:100%}.init-image-preview-header h2{font-weight:700;font-size:.9rem}.init-image-preview{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.init-image-preview img{border-radius:.5rem;object-fit:contain;position:absolute}.image-to-image-current-image-display{position:relative}.floating-show-hide-button{position:absolute;top:50%;transform:translateY(-50%);z-index:20;padding:0;background-color:red!important;min-width:2rem;min-height:12rem;background-color:var(--btn-btn-base-color)!important}.floating-show-hide-button.left{left:0;border-radius:0 .5rem .5rem 0}.floating-show-hide-button.right{right:0;border-radius:.5rem 0 0 .5rem}.floating-show-hide-button:hover{background-color:var(--btn-btn-base-color-hover)}.floating-show-hide-button:disabled{background-color:var(--btn-base-color)}.floating-show-hide-button:disabled:hover{background-color:var(--btn-base-color)}.floating-show-hide-button svg{width:20px;height:20px;color:var(--btn-svg-color)}.show-hide-button-options{position:absolute;transform:translateY(-50%);z-index:20;min-width:2rem;top:50%;left:calc(42px + 2rem);border-radius:0 .5rem .5rem 0;display:flex;flex-direction:column;row-gap:.5rem}.show-hide-button-options button{border-radius:0 .3rem .3rem 0}.show-hide-button-gallery{padding-left:.75rem;padding-right:.75rem;background-color:var(--background-color)!important}.inpainting-main-area{display:flex;flex-direction:column;align-items:center;row-gap:1rem;width:100%;height:100%}.inpainting-main-area .inpainting-settings{display:flex;align-items:center;column-gap:.5rem}.inpainting-main-area .inpainting-settings svg{transform:scale(.9)}.inpainting-main-area .inpainting-settings .inpainting-buttons-group{display:flex;align-items:center;column-gap:.5rem}.inpainting-main-area .inpainting-settings .inpainting-button-dropdown{display:flex;flex-direction:column;row-gap:.5rem}.inpainting-main-area .inpainting-settings .inpainting-color-picker{margin-left:1rem}.inpainting-main-area .inpainting-settings .inpainting-brush-options{display:flex;align-items:center;column-gap:1rem}.inpainting-canvas-area{display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:1rem;width:100%;height:100%}.inpainting-canvas-spiner{display:flex;align-items:center;width:100%;height:100%}.inpainting-canvas-container{display:flex;position:relative;height:100%;width:100%;border-radius:.5rem}.inpainting-canvas-wrapper{position:relative}.inpainting-canvas-stage{outline:none;border-radius:.5rem;box-shadow:0 0 0 1px var(--border-color-light);overflow:hidden}.inpainting-canvas-stage canvas{outline:none;border-radius:.5rem}.inpainting-options-btn{min-height:2rem}.canvas-status-text{position:absolute;top:0;left:0;background-color:var(--background-color);opacity:.65;display:flex;flex-direction:column;font-size:.8rem;padding:.25rem;min-width:12rem;border-radius:.25rem;margin:.25rem;pointer-events:none}.invokeai__number-input-form-control{display:flex;align-items:center;column-gap:1rem}.invokeai__number-input-form-control .invokeai__number-input-form-label{color:var(--text-color-secondary)}.invokeai__number-input-form-control .invokeai__number-input-form-label[data-focus]+.invokeai__number-input-root{outline:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.invokeai__number-input-form-control .invokeai__number-input-form-label[aria-invalid=true]+.invokeai__number-input-root{outline:none;border:2px solid var(--border-color-invalid);box-shadow:0 0 10px 0 var(--box-shadow-color-invalid)}.invokeai__number-input-form-control .invokeai__number-input-root{height:2rem;display:grid;grid-template-columns:auto max-content;column-gap:.5rem;align-items:center;background-color:var(--background-color-secondary);border:2px solid var(--border-color);border-radius:.3rem}.invokeai__number-input-form-control .invokeai__number-input-field{border:none;font-weight:700;width:100%;height:auto;font-size:.9rem;padding:0 .5rem}.invokeai__number-input-form-control .invokeai__number-input-field:focus{outline:none;box-shadow:none}.invokeai__number-input-form-control .invokeai__number-input-field:disabled{opacity:.2}.invokeai__number-input-form-control .invokeai__number-input-stepper{display:grid;padding-right:.5rem}.invokeai__number-input-form-control .invokeai__number-input-stepper .invokeai__number-input-stepper-button{border:none;padding:0 .5rem;margin:0 -.5rem}.invokeai__number-input-form-control .invokeai__number-input-stepper .invokeai__number-input-stepper-button svg{width:10px;height:10px}.input{display:grid;grid-template-columns:max-content auto;column-gap:1rem;align-items:center}.input .input-label{color:var(--text-color-secondary)}.input .input-entry{background-color:var(--background-color-secondary);border:2px solid var(--border-color);border-radius:.2rem;font-weight:700}.input .input-entry:focus{outline:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.input .input-entry:disabled{opacity:.2}.input .input-entry[aria-invalid=true]{outline:none;border:2px solid var(--border-color-invalid);box-shadow:0 0 10px 0 var(--box-shadow-color-invalid)}.invokeai__icon-button{background:var(--btn-base-color);cursor:pointer}.invokeai__icon-button:hover{background-color:var(--btn-base-color-hover)}.invokeai__icon-button[data-selected=true]{background-color:var(--accent-color)}.invokeai__icon-button[data-selected=true]:hover{background-color:var(--accent-color-hover)}.invokeai__icon-button[disabled]{cursor:not-allowed}.invokeai__icon-button[data-variant=link],.invokeai__icon-button[data-variant=link]:hover{background:none}.invokeai__icon-button[data-as-checkbox=true]{background-color:var(--btn-base-color);border:3px solid var(--btn-base-color)}.invokeai__icon-button[data-as-checkbox=true] svg{fill:var(--text-color)}.invokeai__icon-button[data-as-checkbox=true]:hover{background-color:var(--btn-base-color);border-color:var(--btn-checkbox-border-hover)}.invokeai__icon-button[data-as-checkbox=true]:hover svg{fill:var(--text-color)}.invokeai__icon-button[data-as-checkbox=true][data-selected=true]{border-color:var(--accent-color)}.invokeai__icon-button[data-as-checkbox=true][data-selected=true] svg{fill:var(--accent-color-hover)}.invokeai__icon-button[data-as-checkbox=true][data-selected=true]:hover svg{fill:var(--accent-color-hover)}.invokeai__icon-button[data-alert=true]{animation-name:pulseColor;animation-duration:1s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.invokeai__icon-button[data-alert=true]:hover{animation:none;background-color:var(--accent-color-hover)}@keyframes pulseColor{0%{background-color:var(--accent-color)}50%{background-color:var(--accent-color-dim)}to{background-color:var(--accent-color)}}.invokeai__button{background-color:var(--btn-base-color);place-content:center}.invokeai__button:hover{background-color:var(--btn-base-color-hover)}.invokeai__switch-form-control .invokeai__switch-form-label{color:var(--text-color-secondary)}.invokeai__switch-form-control .invokeai__switch-root span{background-color:var(--switch-bg-color)}.invokeai__switch-form-control .invokeai__switch-root span span{background-color:var(--white)}.invokeai__switch-form-control .invokeai__switch-root[data-checked] span{background:var(--switch-bg-active-color)}.invokeai__switch-form-control .invokeai__switch-root[data-checked] span span{background-color:var(--white)}.invokeai__select{display:flex;column-gap:1rem;align-items:center}.invokeai__select .invokeai__select-label{color:var(--text-color-secondary)}.invokeai__select .invokeai__select-picker{border:2px solid var(--border-color);background-color:var(--background-color-secondary);font-weight:700;font-size:.9rem;height:2rem;border-radius:.2rem}.invokeai__select .invokeai__select-picker:focus{outline:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.invokeai__select .invokeai__select-option{background-color:var(--background-color-secondary);color:var(--text-color-secondary)}.invokeai__slider-component{padding-bottom:.5rem;border-radius:.5rem}.invokeai__slider-component .invokeai__slider-component-label{min-width:max-content;margin:0;font-weight:700;font-size:.9rem;color:var(--text-color-secondary)}.invokeai__slider-component .invokeai__slider_track{background-color:var(--tab-color)}.invokeai__slider-component .invokeai__slider_track-filled{background-color:var(--slider-color)}.invokeai__slider-component .invokeai__slider-thumb{width:4px}.invokeai__slider-component .invokeai__slider-mark{font-size:.75rem;font-weight:700;color:var(--slider-mark-color);margin-top:.3rem}.invokeai__slider-component .invokeai__slider-number-input{border:none;font-size:.9rem;font-weight:700;height:2rem;background-color:var(--background-color-secondary);border:2px solid var(--border-color)}.invokeai__slider-component .invokeai__slider-number-input:focus{outline:none;box-shadow:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.invokeai__slider-component .invokeai__slider-number-input:disabled{opacity:.2}.invokeai__slider-component .invokeai__slider-number-stepper{border:none}.invokeai__slider-component[data-markers=true] .invokeai__slider_container{margin-top:-1rem}.invokeai__checkbox .chakra-checkbox__label{margin-top:1px;color:var(--text-color-secondary);font-size:.9rem}.invokeai__checkbox .chakra-checkbox__control{width:1rem;height:1rem;border:none;border-radius:.2rem;background-color:var(--input-checkbox-bg)}.invokeai__checkbox .chakra-checkbox__control svg{width:.6rem;height:.6rem;stroke-width:3px}.invokeai__checkbox .chakra-checkbox__control[data-checked]{color:var(--text-color);background-color:var(--input-checkbox-checked-bg)}.invokeai__popover-content{min-width:unset;width:unset;padding:1rem;border-radius:.5rem;background-color:var(--background-color);border:2px solid var(--border-color)}.invokeai__popover-content .invokeai__popover-arrow{background-color:var(--background-color)!important}.invokeai__color-picker .react-colorful__hue-pointer,.invokeai__color-picker .react-colorful__saturation-pointer{width:1.5rem;height:1.5rem;border-color:var(--white)}.dropzone-container{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:999;backdrop-filter:blur(20px)}.dropzone-container .dropzone-overlay{opacity:.5;width:100%;height:100%;display:flex;flex-direction:column;row-gap:1rem;align-items:center;justify-content:center;background-color:var(--background-color)}.dropzone-container .dropzone-overlay.is-drag-accept{box-shadow:inset 0 0 20rem 1rem var(--accent-color)}.dropzone-container .dropzone-overlay.is-drag-reject{box-shadow:inset 0 0 20rem 1rem var(--status-bad-color)}.dropzone-container .dropzone-overlay.is-handling-upload{box-shadow:inset 0 0 20rem 1rem var(--status-working-color)}.image-uploader-button-outer{width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:.5rem;color:var(--tab-list-text-inactive);background-color:var(--background-color)}.image-uploader-button-outer:hover{background-color:var(--background-color-light)}.image-upload-button-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-upload-button{display:flex;flex-direction:column;row-gap:2rem;align-items:center;justify-content:center;text-align:center}.image-upload-button svg{width:4rem;height:4rem}.image-upload-button h2{font-size:1.2rem}.work-in-progress{display:grid;width:100%;height:calc(100vh - (70px + 1rem));grid-auto-rows:max-content;background-color:var(--background-color-secondary);border-radius:.4rem;place-content:center;place-items:center;row-gap:1rem}.work-in-progress h1{font-size:2rem;font-weight:700}.work-in-progress p{text-align:center;max-width:50rem;color:var(--subtext-color-bright)}.guide-popover-arrow{background-color:var(--tab-panel-bg);box-shadow:none}.guide-popover-content{background-color:var(--background-color-secondary);border:none}.guide-popover-guide-content{background:var(--tab-panel-bg);border:2px solid var(--tab-hover-color);border-radius:.4rem;padding:.75rem 1rem;display:grid;grid-template-rows:repeat(auto-fill,1fr);grid-row-gap:.5rem;justify-content:space-between}.modal{background-color:var(--background-color-secondary);color:var(--text-color);font-family:Inter}.modal-close-btn{background-color:var(--btn-base-color)}.modal-close-btn:hover{background-color:var(--btn-base-color-hover)}.modal-close-btn:disabled:hover{background-color:var(--btn-base-color)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{-ms-overflow-style:none;scrollbar-width:none;background-color:var(--root-bg-color);overflow:hidden}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}#root{background-color:var(--root-bg-color);color:var(--text-color);font-family:Inter,Arial,Helvetica,sans-serif} diff --git a/invokeai/frontend/dist/assets/index-fecb6dd4.css b/invokeai/frontend/dist/assets/index-fecb6dd4.css deleted file mode 100644 index 11433ce132..0000000000 --- a/invokeai/frontend/dist/assets/index-fecb6dd4.css +++ /dev/null @@ -1 +0,0 @@ -@font-face{font-family:Inter;src:url(./Inter-b9a8e5e2.ttf);font-display:swap;font-weight:400;font-style:normal}@font-face{font-family:Inter;src:url(./Inter-Bold-790c108b.ttf);font-display:swap;font-weight:600;font-style:normal}@keyframes slideOut{0%{transform:translate(10rem)}to{transform:translate(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}*{scrollbar-width:thick;scrollbar-color:var(--scrollbar-color) transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--scrollbar-color);border-radius:8px;border:2px solid var(--scrollbar-color)}*::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color-hover);border:2px solid var(--scrollbar-color-hover)}::-webkit-scrollbar-button{background:transparent}[data-theme=dark]{--white: rgb(255, 255, 255);--accent-color-dim: rgb(57, 25, 153);--accent-color: rgb(80, 40, 200);--accent-color-bright: rgb(104, 60, 230);--accent-color-hover: var(--accent-color-bright);--root-bg-color: rgb(10, 10, 10);--background-color: rgb(26, 26, 32);--background-color-light: rgb(40, 44, 48);--background-color-secondary: rgb(16, 16, 22);--text-color: rgb(255, 255, 255);--text-color-secondary: rgb(160, 162, 188);--subtext-color: rgb(24, 24, 34);--subtext-color-bright: rgb(48, 48, 64);--border-color: rgb(30, 30, 46);--border-color-light: rgb(60, 60, 76);--svg-color: rgb(255, 255, 255);--invalid: rgb(255, 75, 75);--invalid-secondary: rgb(120, 5, 5);--destructive-color: rgb(185, 55, 55);--destructive-color-hover: rgb(255, 75, 75);--warning-color: rgb(200, 88, 40);--warning-color-hover: rgb(230, 117, 60);--border-color-invalid: rgb(255, 80, 50);--box-shadow-color-invalid: rgb(210, 30, 10);--tab-color: rgb(30, 32, 42);--tab-hover-color: rgb(46, 48, 58);--tab-panel-bg: rgb(36, 38, 48);--tab-list-bg: var(--accent-color);--tab-list-text: rgb(202, 204, 216);--tab-list-text-inactive: rgb(92, 94, 114);--btn-base-color: rgb(30, 32, 42);--btn-base-color-hover: rgb(46, 48, 68);--btn-load-more: rgb(30, 32, 42);--btn-load-more-hover: rgb(54, 56, 66);--btn-svg-color: rgb(255, 255, 255);--btn-delete-image: rgb(182, 46, 46);--btn-checkbox-border-hover: rgb(46, 48, 68);--progress-bar-color: var(--accent-color);--prompt-bg-color: rgb(10, 10, 10);--switch-bg-color: rgb(100, 102, 110);--switch-bg-active-color: var(--accent-color);--slider-color: var(--accent-color-bright);--slider-color: rgb(151, 113, 255);--slider-mark-color: rgb(151, 113, 255);--resizeable-handle-border-color: var(--accent-color);--metadata-bg-color: rgba(0, 0, 0, .7);--metadata-json-bg-color: rgba(255, 255, 255, .1);--status-good-color: rgb(125, 255, 100);--status-good-glow: rgb(40, 215, 40);--status-working-color: rgb(255, 175, 55);--status-working-glow: rgb(255, 160, 55);--status-bad-color: rgb(255, 90, 90);--status-bad-glow: rgb(255, 40, 40);--notice-color: rgb(130, 71, 19);--settings-modal-bg: rgb(30, 32, 42);--input-checkbox-bg: rgb(60, 64, 68);--input-checkbox-checked-bg: var(--accent-color);--input-checkbox-checked-tick: rgb(0, 0, 0);--input-border-color: var(--accent-color-bright);--input-box-shadow-color: var(--accent-color);--error-level-info: rgb(200, 202, 224);--error-level-warning: rgb(255, 225, 105);--error-level-error: rgb(255, 81, 46);--console-bg-color: rgb(30, 30, 36);--console-icon-button-bg-color: rgb(50, 53, 64);--console-icon-button-bg-color-hover: rgb(70, 73, 84);--img2img-img-bg-color: rgb(30, 32, 42);--context-menu-bg-color: rgb(46, 48, 58);--context-menu-box-shadow: none;--context-menu-bg-color-hover: rgb(30, 32, 42);--floating-button-drop-shadow-color: var(--accent-color);--inpainting-alerts-bg: rgba(20, 20, 26, .75);--inpainting-alerts-icon-color: rgb(255, 255, 255);--inpainting-alerts-bg-active: var(--accent-color);--inpainting-alerts-icon-active: rgb(255, 255, 255);--inpainting-alerts-bg-alert: var(--invalid);--inpainting-alerts-icon-alert: rgb(255, 255, 255);--checkboard-dots-color: rgb(35, 35, 39);--scrollbar-color: var(--accent-color);--scrollbar-color-hover: var(--accent-color-bright)}[data-theme=light]{--white: rgb(255, 255, 255);--accent-color-dim: rgb(186, 146, 0);--accent-color: rgb(235, 185, 5);--accent-color-bright: rgb(255, 200, 0);--accent-color-hover: var(--accent-color-bright);--root-bg-color: rgb(255, 255, 255);--background-color: rgb(220, 222, 224);--background-color-light: rgb(250, 252, 254);--background-color-secondary: rgb(208, 210, 212);--text-color: rgb(0, 0, 0);--text-color-secondary: rgb(40, 40, 40);--subtext-color: rgb(24, 24, 34);--subtext-color-bright: rgb(142, 144, 146);--border-color: rgb(200, 200, 200);--border-color-light: rgb(147, 147, 147);--svg-color: rgb(50, 50, 50);--invalid: rgb(255, 75, 75);--invalid-secondary: rgb(120, 5, 5);--destructive-color: rgb(237, 51, 51);--destructive-color-hover: rgb(255, 55, 55);--warning-color: rgb(224, 142, 42);--warning-color-hover: rgb(255, 167, 60);--border-color-invalid: rgb(255, 80, 50);--box-shadow-color-invalid: none;--tab-color: rgb(202, 204, 206);--tab-hover-color: rgb(196, 198, 200);--tab-panel-bg: rgb(206, 208, 210);--tab-list-bg: rgb(235, 185, 5);--tab-list-text: rgb(0, 0, 0);--tab-list-text-inactive: rgb(106, 108, 110);--btn-base-color: rgb(184, 186, 188);--btn-base-color-hover: rgb(230, 232, 234);--btn-load-more: rgb(202, 204, 206);--btn-load-more-hover: rgb(178, 180, 182);--btn-svg-color: rgb(0, 0, 0);--btn-delete-image: rgb(213, 49, 49);--btn-checkbox-border-hover: rgb(176, 178, 182);--progress-bar-color: rgb(235, 185, 5);--prompt-bg-color: rgb(225, 227, 229);--switch-bg-color: rgb(178, 180, 182);--switch-bg-active-color: rgb(235, 185, 5);--slider-color: var(--accent-color);--slider-mark-color: rgb(0, 0, 0);--resizeable-handle-border-color: rgb(160, 162, 164);--metadata-bg-color: rgba(230, 230, 230, .9);--metadata-json-bg-color: rgba(0, 0, 0, .1);--status-good-color: rgb(21, 126, 0);--status-good-glow: var(--background-color);--status-working-color: rgb(235, 141, 0);--status-working-glow: var(--background-color);--status-bad-color: rgb(202, 0, 0);--status-bad-glow: var(--background-color);--notice-color: rgb(255, 71, 90);--settings-modal-bg: rgb(202, 204, 206);--input-checkbox-bg: rgb(167, 167, 171);--input-checkbox-checked-bg: rgb(235, 185, 5);--input-checkbox-checked-tick: rgb(0, 0, 0);--input-border-color: rgb(0, 0, 0);--input-box-shadow-color: none;--error-level-info: rgb(42, 42, 42);--error-level-warning: rgb(173, 121, 0);--error-level-error: rgb(145, 14, 0);--console-bg-color: rgb(220, 224, 230);--console-icon-button-bg-color: var(--switch-bg-color);--console-icon-button-bg-color-hover: var(--resizeable-handle-border-color);--img2img-img-bg-color: rgb(180, 182, 184);--context-menu-bg-color: var(--background-color);--context-menu-box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, .35), 0px 10px 20px -15px rgba(22, 23, 24, .2);--context-menu-bg-color-hover: var(--background-color-secondary);--floating-button-drop-shadow-color: rgba(0, 0, 0, .7);--inpainting-alerts-bg: rgba(220, 222, 224, .75);--inpainting-alerts-icon-color: rgb(0, 0, 0);--inpainting-alerts-bg-active: rgb(255, 200, 0);--inpainting-alerts-icon-active: rgb(0, 0, 0);--inpainting-alerts-bg-alert: var(--invalid);--inpainting-alerts-icon-alert: rgb(0, 0, 0);--checkboard-dots-color: rgb(160, 160, 172);--scrollbar-color: rgb(180, 180, 184);--scrollbar-color-hover: rgb(150, 150, 154)}[data-theme=green]{--white: rgb(255, 255, 255);--accent-color-dim: rgb(10, 60, 40);--accent-color: rgb(20, 110, 70);--accent-color-bright: rgb(30, 180, 100);--accent-color-hover: var(--accent-color-bright);--root-bg-color: rgb(10, 10, 14);--background-color: rgb(30, 32, 37);--background-color-light: rgb(40, 44, 48);--background-color-secondary: rgb(22, 24, 28);--text-color: rgb(255, 255, 255);--text-color-secondary: rgb(160, 164, 168);--subtext-color: rgb(24, 24, 28);--subtext-color-bright: rgb(68, 72, 76);--border-color: rgb(40, 44, 48);--border-color-light: rgb(60, 60, 64);--svg-color: rgb(220, 224, 228);--invalid: rgb(255, 75, 75);--invalid-secondary: rgb(120, 5, 5);--destructive-color: rgb(185, 55, 55);--destructive-color-hover: rgb(255, 75, 75);--warning-color: rgb(200, 88, 40);--warning-color-hover: rgb(230, 117, 60);--border-color-invalid: rgb(255, 80, 50);--box-shadow-color-invalid: rgb(210, 30, 10);--tab-color: rgb(40, 44, 48);--tab-hover-color: rgb(48, 52, 56);--tab-panel-bg: rgb(36, 40, 44);--tab-list-bg: var(--accent-color);--tab-list-text: rgb(202, 204, 206);--tab-list-text-inactive: rgb(92, 94, 96);--btn-base-color: rgb(40, 44, 48);--btn-base-color-hover: rgb(56, 60, 64);--btn-load-more: rgb(30, 32, 42);--btn-load-more-hover: rgb(54, 56, 66);--btn-svg-color: rgb(255, 255, 255);--btn-delete-image: rgb(182, 46, 46);--btn-checkbox-border-hover: rgb(46, 48, 68);--progress-bar-color: var(--accent-color);--prompt-bg-color: rgb(10, 10, 14);--switch-bg-color: rgb(100, 102, 110);--switch-bg-active-color: var(--accent-color);--slider-color: var(--accent-color-bright);--slider-mark-color: var(--accent-color-bright);--resizeable-handle-border-color: var(--accent-color);--metadata-bg-color: rgba(0, 0, 0, .7);--metadata-json-bg-color: rgba(255, 255, 255, .1);--status-good-color: rgb(125, 255, 100);--status-good-glow: rgb(40, 215, 40);--status-working-color: rgb(255, 175, 55);--status-working-glow: rgb(255, 160, 55);--status-bad-color: rgb(255, 90, 90);--status-bad-glow: rgb(255, 40, 40);--notice-color: rgb(130, 71, 19);--settings-modal-bg: rgb(30, 32, 42);--input-checkbox-bg: rgb(60, 64, 68);--input-checkbox-checked-bg: var(--accent-color);--input-checkbox-checked-tick: rgb(0, 0, 0);--input-border-color: var(--accent-color-bright);--input-box-shadow-color: var(--accent-color);--error-level-info: rgb(200, 202, 224);--error-level-warning: rgb(255, 225, 105);--error-level-error: rgb(255, 81, 46);--console-bg-color: rgb(30, 30, 36);--console-icon-button-bg-color: rgb(50, 53, 64);--console-icon-button-bg-color-hover: rgb(70, 73, 84);--img2img-img-bg-color: rgb(30, 32, 42);--context-menu-bg-color: rgb(46, 48, 58);--context-menu-box-shadow: none;--context-menu-bg-color-hover: rgb(30, 32, 42);--floating-button-drop-shadow-color: var(--accent-color);--inpainting-alerts-bg: rgba(20, 20, 26, .75);--inpainting-alerts-icon-color: rgb(255, 255, 255);--inpainting-alerts-bg-active: var(--accent-color);--inpainting-alerts-icon-active: rgb(255, 255, 255);--inpainting-alerts-bg-alert: var(--invalid);--inpainting-alerts-icon-alert: rgb(255, 255, 255);--checkboard-dots-color: rgb(35, 35, 39);--scrollbar-color: var(--accent-color);--scrollbar-color-hover: var(--accent-color-bright)}@media (max-width: 600px){#root .app-content{padding:5px}#root .app-content .site-header{position:fixed;display:flex;height:100px;z-index:1}#root .app-content .site-header .site-header-left-side{position:absolute;display:flex;min-width:145px;float:left;padding-left:0}#root .app-content .site-header .site-header-right-side{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:25px 25px 25px;grid-template-areas:"logoSpace logoSpace logoSpace sampler sampler sampler" "status status status status status status" "btn1 btn2 btn3 btn4 btn5 btn6";row-gap:15px}#root .app-content .site-header .site-header-right-side .chakra-popover__popper{grid-area:logoSpace}#root .app-content .site-header .site-header-right-side>:nth-child(1).chakra-text{grid-area:status;width:100%;display:flex;justify-content:center}#root .app-content .site-header .site-header-right-side>:nth-child(2){grid-area:sampler;display:flex;justify-content:center;align-items:center}#root .app-content .site-header .site-header-right-side>:nth-child(2) select{width:185px;margin-top:10px}#root .app-content .site-header .site-header-right-side>:nth-child(2) .chakra-select__icon-wrapper{right:10px}#root .app-content .site-header .site-header-right-side>:nth-child(2) .chakra-select__icon-wrapper svg{margin-top:10px}#root .app-content .site-header .site-header-right-side>:nth-child(3){grid-area:btn1}#root .app-content .site-header .site-header-right-side>:nth-child(4){grid-area:btn2}#root .app-content .site-header .site-header-right-side>:nth-child(6){grid-area:btn3}#root .app-content .site-header .site-header-right-side>:nth-child(7){grid-area:btn4}#root .app-content .site-header .site-header-right-side>:nth-child(8){grid-area:btn5}#root .app-content .site-header .site-header-right-side>:nth-child(9){grid-area:btn6}#root .app-content .app-tabs{position:fixed;display:flex;flex-direction:column;row-gap:15px;max-width:100%;overflow:hidden;margin-top:120px}#root .app-content .app-tabs .app-tabs-list{display:flex;justify-content:space-between}#root .app-content .app-tabs .app-tabs-panels{overflow:hidden;overflow-y:scroll}#root .app-content .app-tabs .app-tabs-panels .workarea-main{display:grid;grid-template-areas:"workarea" "options" "gallery";row-gap:15px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .parameters-panel-wrapper{grid-area:options;width:100%;max-width:100%;height:inherit;overflow:inherit;padding:0 10px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .parameters-panel-wrapper .main-settings-row,#root .app-content .app-tabs .app-tabs-panels .workarea-main .parameters-panel-wrapper .advanced-parameters-item{max-width:100%}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper{grid-area:workarea}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .workarea-split-view{display:flex;flex-direction:column}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .current-image-options{column-gap:3px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .text-to-image-area{padding:0}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .current-image-preview{height:430px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .image-upload-button{row-gap:10px;padding:5px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .image-upload-button svg{width:2rem;height:2rem;margin-top:10px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .inpainting-settings{display:flex;flex-wrap:wrap;row-gap:10px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .workarea-children-wrapper .inpainting-canvas-area .konvajs-content{height:400px!important}#root .app-content .app-tabs .app-tabs-panels .workarea-main .image-gallery-wrapper{grid-area:gallery;min-height:400px}#root .app-content .app-tabs .app-tabs-panels .workarea-main .image-gallery-wrapper .image-gallery-popup{width:100%!important;max-width:100%!important}}svg{fill:var(--svg-color)}.App{display:grid;width:100vw;height:100vh;background-color:var(--background-color)}.app-content{display:grid;row-gap:1rem;padding:1rem;grid-auto-rows:min-content auto;width:calc(100vw + -0px);height:calc(100vh - .3rem)}.site-header{display:grid;grid-template-columns:auto max-content}.site-header-left-side{display:flex;align-items:center;column-gap:.7rem;padding-left:.5rem}.site-header-left-side img{width:32px;height:32px}.site-header-right-side{display:flex;align-items:center;column-gap:.5rem}.site-header-right-side .lang-select-btn[data-selected=true],.site-header-right-side .lang-select-btn[data-selected=true]:hover{background-color:var(--accent-color)}.status{font-size:.8rem;font-weight:700}.status-good{color:var(--status-good-color);text-shadow:0 0 10px var(--status-good-glow)}.status-bad{color:var(--status-bad-color);text-shadow:0 0 10px var(--status-bad-glow)}.status-working{color:var(--status-working-color);text-shadow:0 0 10px var(--status-working-glow)}.settings-modal{max-height:36rem;font-family:Inter}.settings-modal .settings-modal-content{display:grid;row-gap:2rem;overflow-y:scroll}.settings-modal .settings-modal-header{font-weight:700}.settings-modal .settings-modal-items{display:grid;row-gap:.5rem}.settings-modal .settings-modal-items .settings-modal-item{display:grid;grid-auto-flow:column;background-color:var(--background-color);padding:.4rem 1rem;border-radius:.5rem;align-items:center;width:100%}.settings-modal .settings-modal-reset{display:grid;row-gap:1rem}.settings-modal .settings-modal-reset button{min-width:100%;min-height:100%;background-color:var(--destructive-color)!important}.settings-modal .settings-modal-reset button:hover{background-color:var(--destructive-color-hover)}.settings-modal .settings-modal-reset button:disabled{background-color:var(--btn-base-color)}.settings-modal .settings-modal-reset button:disabled:hover{background-color:var(--btn-base-color)}.settings-modal .settings-modal-reset button svg{width:20px;height:20px;color:var(--btn-svg-color)}.add-model-modal{display:flex}.add-model-modal-body{display:flex;flex-direction:column;row-gap:1rem;padding-bottom:2rem}.add-model-form{display:flex;flex-direction:column;row-gap:.5rem}.hotkeys-modal{width:36rem;max-width:36rem;display:grid;padding:1rem;row-gap:1rem;font-family:Inter}.hotkeys-modal h1{font-size:1.2rem;font-weight:700}.hotkeys-modal h2{font-weight:700}.hotkeys-modal-button{display:flex;align-items:center;justify-content:space-between}.hotkeys-modal-items{max-height:36rem;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.hotkeys-modal-items::-webkit-scrollbar{display:none}.hotkeys-modal-items .chakra-accordion{display:grid;row-gap:.5rem}.hotkeys-modal-items .chakra-accordion__item{border:none;border-radius:.3rem;background-color:var(--tab-hover-color)}.hotkeys-modal-items button{border-radius:.3rem}.hotkeys-modal-items button[aria-expanded=true]{background-color:var(--tab-hover-color);border-radius:.3rem}.hotkey-modal-category{display:grid;row-gap:.5rem}.hotkey-modal-item{display:grid;grid-template-columns:auto max-content;justify-content:space-between;align-items:center;background-color:var(--background-color);padding:.5rem 1rem;border-radius:.3rem}.hotkey-modal-item .hotkey-info{display:grid}.hotkey-modal-item .hotkey-info .hotkey-title{font-weight:700}.hotkey-modal-item .hotkey-info .hotkey-description{font-size:.9rem;color:var(--text-color-secondary)}.hotkey-modal-item .hotkey-key{font-size:.8rem;font-weight:700;background-color:var(--background-color-light);padding:.2rem .5rem;border-radius:.3rem}.console{width:100vw;display:flex;flex-direction:column;background:var(--console-bg-color);overflow:auto;direction:column;font-family:monospace;padding:0 1rem 1rem 3rem;border-top-width:.3rem;border-color:var(--resizeable-handle-border-color)}.console .console-info-color{color:var(--error-level-info)}.console .console-warning-color{color:var(--error-level-warning)}.console .console-error-color{color:var(--status-bad-color)}.console .console-entry{display:flex;column-gap:.5rem}.console .console-entry .console-timestamp{font-weight:semibold}.console .console-entry .console-message{word-break:break-all}.console-toggle-icon-button{background:var(--console-icon-button-bg-color);position:fixed;left:.5rem;bottom:.5rem;z-index:10000}.console-toggle-icon-button:hover{background:var(--console-icon-button-bg-color-hover)}.console-toggle-icon-button[data-error-seen=true],.console-toggle-icon-button[data-error-seen=true]:hover{background:var(--status-bad-color)}.console-autoscroll-icon-button{background:var(--console-icon-button-bg-color);position:fixed;left:.5rem;bottom:3rem;z-index:10000}.console-autoscroll-icon-button:hover{background:var(--console-icon-button-bg-color-hover)}.console-autoscroll-icon-button[data-autoscroll-enabled=true]{background:var(--accent-color)}.console-autoscroll-icon-button[data-autoscroll-enabled=true]:hover{background:var(--accent-color-hover)}.progress-bar{background-color:var(--root-bg-color);height:.3rem;z-index:99}.progress-bar div{background-color:var(--progress-bar-color)}.progress-bar div[data-indeterminate]{background-color:unset;background-image:linear-gradient(to right,transparent 0%,var(--progress-bar-color) 50%,transparent 100%)}.prompt-bar{display:grid;row-gap:1rem}.prompt-bar input,.prompt-bar textarea{background-color:var(--prompt-bg-color);font-size:1rem;border:2px solid var(--border-color)}.prompt-bar input:hover,.prompt-bar textarea:hover{border:2px solid var(--border-color-light)}.prompt-bar input:focus-visible,.prompt-bar textarea:focus-visible{border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.prompt-bar input[aria-invalid=true],.prompt-bar textarea[aria-invalid=true]{border:2px solid var(--border-color-invalid);box-shadow:0 0 10px 0 var(--box-shadow-color-invalid)}.prompt-bar input:disabled,.prompt-bar textarea:disabled{border:2px solid var(--border-color);box-shadow:none}.prompt-bar textarea{min-height:10rem}.process-buttons{display:flex;column-gap:.5rem}.invoke-btn{flex-grow:1;width:100%;min-width:100%;min-height:100%;background-color:var(--accent-color)!important}.invoke-btn:hover{background-color:var(--accent-color-hover)}.invoke-btn:disabled{background-color:var(--btn-base-color)}.invoke-btn:disabled:hover{background-color:var(--btn-base-color)}.invoke-btn svg{width:16px;height:16px;color:var(--btn-svg-color)}.cancel-btn{min-width:3rem;min-height:100%;background-color:var(--destructive-color)!important}.cancel-btn:hover{background-color:var(--destructive-color-hover)}.cancel-btn:disabled{background-color:var(--btn-base-color)}.cancel-btn:disabled:hover{background-color:var(--btn-base-color)}.cancel-btn svg{width:20px;height:20px;color:var(--btn-svg-color)}.loopback-btn[data-as-checkbox=true]{background-color:var(--btn-btn-base-color);border:3px solid var(--btn-btn-base-color)}.loopback-btn[data-as-checkbox=true] svg{fill:var(--text-color)}.loopback-btn[data-as-checkbox=true]:hover{background-color:var(--btn-btn-base-color);border-color:var(--btn-checkbox-border-hover)}.loopback-btn[data-as-checkbox=true]:hover svg{fill:var(--text-color)}.loopback-btn[data-as-checkbox=true][data-selected=true]{border-color:var(--accent-color);background-color:var(--btn-btn-base-color)}.loopback-btn[data-as-checkbox=true][data-selected=true] svg{fill:var(--text-color)}.loopback-btn[data-as-checkbox=true][data-selected=true]:hover{border-color:var(--accent-color);background-color:var(--btn-btn-base-color)}.loopback-btn[data-as-checkbox=true][data-selected=true]:hover svg{fill:var(--text-color)}.main-settings,.main-settings-list{display:grid;row-gap:1rem}.main-settings-row{display:grid;grid-template-columns:repeat(3,auto);column-gap:.5rem;max-width:22.5rem}.main-settings-block{border-radius:.5rem;display:grid!important;grid-template-columns:auto!important;row-gap:.5rem}.main-settings-block .invokeai__number-input-form-label,.main-settings-block .invokeai__select-label{font-weight:700;font-size:.9rem!important}.main-settings-block .invokeai__select-label{margin:0}.advanced-parameters{padding-top:.5rem;display:grid;row-gap:.5rem}.advanced-parameters-item{display:grid;max-width:22.5rem;border:none;border-top:0px;border-radius:.4rem;background-color:var(--tab-panel-bg)}.advanced-parameters-item[aria-expanded=true]{background-color:var(--tab-hover-color);border-radius:0 0 .4rem .4rem}.advanced-parameters-panel{background-color:var(--tab-panel-bg);border-radius:0 0 .4rem .4rem;padding:1rem}.advanced-parameters-panel button{background-color:var(--btn-base-color)}.advanced-parameters-panel button:hover{background-color:var(--btn-base-color-hover)}.advanced-parameters-panel button:disabled:hover{background-color:var(--btn-base-color)}.advanced-parameters-header{border-radius:.4rem;font-weight:700}.advanced-parameters-header[aria-expanded=true]{background-color:var(--tab-hover-color);border-radius:.4rem .4rem 0 0}.advanced-parameters-header:hover{background-color:var(--tab-hover-color)}.inpainting-bounding-box-settings{display:flex;flex-direction:column;border-radius:.4rem;border:2px solid var(--tab-color)}.inpainting-bounding-box-header{background-color:var(--tab-color);display:flex;flex-direction:row;justify-content:space-between;padding:.5rem 1rem;border-radius:.3rem .3rem 0 0;align-items:center}.inpainting-bounding-box-header button{width:.5rem;height:1.2rem;background:none}.inpainting-bounding-box-header button:hover{background:none}.inpainting-bounding-box-settings-items{padding:1rem;display:flex;flex-direction:column;row-gap:1rem}.inpainting-bounding-box-settings-items .inpainting-bounding-box-reset-icon-btn{background-color:var(--btn-base-color)}.inpainting-bounding-box-settings-items .inpainting-bounding-box-reset-icon-btn:hover{background-color:var(--btn-base-color-hover)}.inpainting-bounding-box-dimensions-slider-numberinput{display:grid;grid-template-columns:repeat(3,auto);column-gap:1rem}.inpainting-bounding-box-darken{width:max-content}.current-image-area{display:flex;flex-direction:column;height:100%;row-gap:1rem;background-color:var(--background-color-secondary);border-radius:.5rem}.current-image-preview{position:relative;justify-content:center;align-items:center;display:flex;width:100%;height:100%}.current-image-preview img{border-radius:.5rem;object-fit:contain;max-width:100%;max-height:100%;height:auto;position:absolute}.current-image-metadata{grid-area:current-image-preview}.current-image-next-prev-buttons{grid-area:current-image-content;display:flex;justify-content:space-between;z-index:1;height:100%;width:100%;pointer-events:none}.next-prev-button-trigger-area{width:7rem;height:100%;width:15%;display:grid;align-items:center;pointer-events:auto}.next-prev-button-trigger-area.prev-button-trigger-area{justify-content:flex-start}.next-prev-button-trigger-area.next-button-trigger-area{justify-content:flex-end}.next-prev-button{font-size:4rem;fill:var(--white);filter:drop-shadow(0 0 1rem var(--text-color-secondary));opacity:70%}.current-image-display-placeholder{background-color:var(--background-color-secondary);display:grid;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:.5rem}.current-image-display-placeholder svg{width:10rem;height:10rem;color:var(--svg-color)}.current-image-options{width:100%;display:flex;justify-content:center;align-items:center;column-gap:.5em}.current-image-options .current-image-send-to-popover,.current-image-options .current-image-postprocessing-popover{display:flex;flex-direction:column;row-gap:.5rem;max-width:25rem}.current-image-options .current-image-send-to-popover .invokeai__button{place-content:start}.current-image-options .chakra-popover__popper{z-index:11}.current-image-options .delete-image-btn{background-color:var(--btn-base-color)}.current-image-options .delete-image-btn svg{fill:var(--btn-delete-image)}.image-gallery-wrapper-enter{transform:translate(150%)}.image-gallery-wrapper-enter-active{transform:translate(0);transition:all .12s ease-out}.image-gallery-wrapper-exit{transform:translate(0)}.image-gallery-wrapper-exit-active{transform:translate(150%);transition:all .12s ease-out}.image-gallery-wrapper[data-pinned=false]{position:fixed;height:100vh;top:0;right:0}.image-gallery-wrapper[data-pinned=false] .image-gallery-popup{border-radius:0;box-shadow:0 0 1rem var(--text-color-a3)}.image-gallery-wrapper[data-pinned=false] .image-gallery-popup .image-gallery-container{max-height:calc(100vh + 4.7rem)}.image-gallery-wrapper .image-gallery-popup{background-color:var(--background-color-secondary);padding:1rem;display:flex;flex-direction:column;row-gap:1rem;border-radius:.5rem;border-left-width:.3rem;border-color:var(--tab-list-text-inactive)}.image-gallery-wrapper .image-gallery-popup[data-resize-alert=true]{border-color:var(--status-bad-color)}.image-gallery-wrapper .image-gallery-popup .image-gallery-header{display:flex;align-items:center;column-gap:.5rem;justify-content:space-between}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-header-right-icons{display:flex;flex-direction:row;column-gap:.5rem}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-icon-btn{background-color:var(--btn-load-more)}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-icon-btn:hover{background-color:var(--btn-load-more-hover)}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-settings-popover{display:flex;flex-direction:column;row-gap:.5rem}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-settings-popover div{display:flex;column-gap:.5rem;align-items:center;justify-content:space-between}.image-gallery-wrapper .image-gallery-popup .image-gallery-header h1{font-weight:700}.image-gallery-wrapper .image-gallery-popup .image-gallery-container{display:flex;flex-direction:column;max-height:calc(100vh - (70px + 7rem));overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.image-gallery-wrapper .image-gallery-popup .image-gallery-container::-webkit-scrollbar{display:none}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder{display:flex;flex-direction:column;row-gap:.5rem;background-color:var(--background-color);border-radius:.5rem;place-items:center;padding:2rem;text-align:center}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder p{color:var(--subtext-color-bright);font-family:Inter}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder svg{width:4rem;height:4rem;color:var(--svg-color)}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn{background-color:var(--btn-load-more);font-size:.85rem;padding:.5rem;margin-top:1rem}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn:disabled:hover{background-color:var(--btn-load-more)}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn:hover{background-color:var(--btn-load-more-hover)}.image-gallery-category-btn-group{width:max-content;column-gap:0;justify-content:stretch}.image-gallery-category-btn-group button{background-color:var(--btn-base-color);flex-grow:1}.image-gallery-category-btn-group button:hover{background-color:var(--btn-base-color-hover)}.image-gallery-category-btn-group button[data-selected=true]{background-color:var(--accent-color)}.image-gallery-category-btn-group button[data-selected=true]:hover{background-color:var(--accent-color-hover)}.image-gallery{display:grid;grid-gap:.5rem}.image-gallery .hoverable-image{padding:.5rem;position:relative}.image-gallery .hoverable-image:before{content:"";display:block;padding-bottom:100%}.image-gallery .hoverable-image .hoverable-image-image{position:absolute;max-width:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.hoverable-image{display:flex;justify-content:center;transition:transform .2s ease-out}.hoverable-image:hover{cursor:pointer;border-radius:.5rem;z-index:2}.hoverable-image .hoverable-image-image{width:100%;height:100%;max-width:100%;max-height:100%}.hoverable-image .hoverable-image-delete-button{position:absolute;top:.25rem;right:.25rem}.hoverable-image .hoverable-image-content{display:flex;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center}.hoverable-image .hoverable-image-content .hoverable-image-check{fill:var(--status-good-color)}.hoverable-image .hoverable-image-icons{position:absolute;bottom:-2rem;display:grid;width:min-content;grid-template-columns:repeat(2,max-content);border-radius:.4rem;background-color:var(--background-color-secondary);padding:.2rem;gap:.2rem;grid-auto-rows:max-content}.hoverable-image .hoverable-image-icons button{width:12px;height:12px;border-radius:.2rem;padding:10px 0;flex-shrink:2}.hoverable-image .hoverable-image-icons button svg{width:12px;height:12px}.hoverable-image-context-menu{z-index:15;padding:.4rem;border-radius:.25rem;background-color:var(--context-menu-bg-color);box-shadow:var(--context-menu-box-shadow)}.hoverable-image-context-menu [role=menuitem]{font-size:.8rem;line-height:1rem;border-radius:3px;display:flex;align-items:center;height:1.75rem;padding:0 .5rem;position:relative;user-select:none;cursor:pointer;outline:none}.hoverable-image-context-menu [role=menuitem][data-disabled]{color:gray;pointer-events:none;cursor:not-allowed}.hoverable-image-context-menu [role=menuitem][data-warning]{color:var(--status-bad-color)}.hoverable-image-context-menu [role=menuitem][data-highlighted]{background-color:var(--context-menu-bg-color-hover)}.image-metadata-viewer{position:absolute;top:0;width:100%;border-radius:.5rem;padding:1rem;background-color:var(--metadata-bg-color);overflow:scroll;max-height:calc(100vh - (70px + 5.4rem));height:100%;z-index:10}.image-json-viewer{border-radius:.5rem;margin:0 .5rem 1rem;padding:1rem;overflow-x:scroll;word-break:break-all;background-color:var(--metadata-json-bg-color)}.lightbox-container{width:100%;height:100%;color:var(--text-color);overflow:hidden;position:absolute;left:0;top:0;background-color:var(--background-color-secondary);z-index:30;animation:popIn .3s ease-in}.lightbox-container .image-gallery-wrapper{max-height:100%!important}.lightbox-container .image-gallery-wrapper .image-gallery-container{max-height:calc(100vh - 5rem)}.lightbox-container .current-image-options{z-index:2;position:absolute;top:1rem}.lightbox-container .image-metadata-viewer{left:0;max-height:100%}.lightbox-close-btn{z-index:3;position:absolute;left:1rem;top:1rem;background-color:var(--btn-base-color)}.lightbox-close-btn:hover{background-color:var(--btn-base-color-hover)}.lightbox-close-btn:disabled:hover{background-color:var(--btn-base-color)}.lightbox-display-container{display:flex;flex-direction:row}.lightbox-preview-wrapper{overflow:hidden;background-color:var(--background-color-secondary);display:grid;grid-template-columns:auto max-content;place-items:center;width:100vw;height:100vh}.lightbox-preview-wrapper .current-image-next-prev-buttons{position:absolute}.lightbox-preview-wrapper .lightbox-image{grid-area:lightbox-content;border-radius:.5rem}.lightbox-preview-wrapper .lightbox-image-options{position:absolute;z-index:2;left:1rem;top:4.5rem;user-select:none;border-radius:.5rem;display:flex;flex-direction:column;row-gap:.5rem}@keyframes popIn{0%{opacity:0;filter:blur(100)}to{opacity:1;filter:blur(0)}}.app-tabs{display:grid;grid-template-columns:min-content auto;column-gap:1rem;height:calc(100vh - (70px + 1rem))}.app-tabs-list{display:grid;row-gap:.3rem;grid-auto-rows:min-content;color:var(--tab-list-text-inactive)}.app-tabs-list button{font-size:.85rem;padding:.5rem}.app-tabs-list button:hover{background-color:var(--tab-hover-color);border-radius:.3rem}.app-tabs-list button svg{width:24px;height:24px}.app-tabs-list button[aria-selected=true]{background-color:var(--tab-list-bg);color:var(--tab-list-text);font-weight:700;border-radius:.3rem;border:none}.app-tabs-panels .app-tabs-panel{padding:0;height:100%}.workarea-wrapper{position:relative;width:100%;height:100%}.workarea-wrapper .workarea-main{display:flex;column-gap:1rem;height:100%}.workarea-wrapper .workarea-main .workarea-children-wrapper{position:relative;width:100%;height:100%}.workarea-wrapper .workarea-main .workarea-split-view{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;background-color:var(--background-color-secondary);border-radius:.5rem}.workarea-wrapper .workarea-main .workarea-split-view .workarea-split-view-left{padding-right:.5rem}.workarea-wrapper .workarea-main .workarea-split-view .workarea-split-view-right{padding-left:.5rem}.workarea-wrapper .workarea-main .workarea-single-view{width:100%;height:100%;background-color:var(--background-color-secondary);border-radius:.5rem}.workarea-wrapper .workarea-main .workarea-split-view-left,.workarea-wrapper .workarea-main .workarea-split-view-right{display:flex;flex-direction:column;height:100%;width:100%;row-gap:1rem;background-color:var(--background-color-secondary);border-radius:.5rem;padding:1rem}.workarea-split-button{position:absolute;cursor:pointer;padding:.5rem;top:0;right:0}.workarea-split-button[data-selected=true]{top:0;right:0}.workarea-split-button[data-selected=true] svg{opacity:1}.workarea-split-button svg{opacity:.5}.parameters-panel-wrapper-enter{transform:translate(-150%)}.parameters-panel-wrapper-enter-active{transform:translate(0);transition:all .12s ease-out}.parameters-panel-wrapper-exit{transform:translate(0)}.parameters-panel-wrapper-exit-active{transform:translate(-150%);transition:all .12s ease-out}.parameters-panel-wrapper{background-color:var(--background-color);height:calc(100vh - (70px + 1rem));width:22.5rem;max-width:22.5rem;flex-shrink:0;position:relative;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.parameters-panel-wrapper::-webkit-scrollbar{display:none}.parameters-panel-wrapper .parameters-panel{display:flex;flex-direction:column;row-gap:1rem;height:100%;-ms-overflow-style:none;scrollbar-width:none;background-color:var(--background-color)}.parameters-panel-wrapper .parameters-panel::-webkit-scrollbar{display:none}.parameters-panel-wrapper[data-pinned=false]{z-index:20;position:fixed;top:0;left:0;filter:var(--floating-panel-drop-shadow);width:24.5rem;max-width:24.5rem;height:100%}.parameters-panel-wrapper[data-pinned=false] .parameters-panel-margin{margin:1rem}.parameters-panel-wrapper .parameters-panel-pin-button{position:absolute;cursor:pointer;padding:.5rem;top:1rem;right:1rem;z-index:20}.parameters-panel-wrapper .parameters-panel-pin-button[data-selected=true]{top:0;right:0}.parameters-panel-wrapper .parameters-panel-pin-button svg{opacity:.5}.invoke-ai-logo-wrapper{display:flex;align-items:center;column-gap:.7rem;padding-left:.5rem;padding-top:.3rem}.invoke-ai-logo-wrapper img{width:32px;height:32px}.invoke-ai-logo-wrapper h1{font-size:1.4rem}.text-to-image-area{padding:1rem;height:100%}.image-to-image-area{display:flex;flex-direction:column;row-gap:1rem;width:100%;height:100%}.image-to-image-strength-main-option{display:flex;row-gap:.5rem!important}.image-to-image-strength-main-option .invokeai__slider-component-label{color:var(--text-color-secondary);font-size:.9rem!important}.init-image-preview-header{display:flex;align-items:center;justify-content:space-between;width:100%}.init-image-preview-header h2{font-weight:700;font-size:.9rem}.init-image-preview{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.init-image-preview img{border-radius:.5rem;object-fit:contain;position:absolute}.image-to-image-current-image-display{position:relative}.floating-show-hide-button{position:absolute;top:50%;transform:translateY(-50%);z-index:20;padding:0;background-color:red!important;min-width:2rem;min-height:12rem;background-color:var(--btn-btn-base-color)!important}.floating-show-hide-button.left{left:0;border-radius:0 .5rem .5rem 0}.floating-show-hide-button.right{right:0;border-radius:.5rem 0 0 .5rem}.floating-show-hide-button:hover{background-color:var(--btn-btn-base-color-hover)}.floating-show-hide-button:disabled{background-color:var(--btn-base-color)}.floating-show-hide-button:disabled:hover{background-color:var(--btn-base-color)}.floating-show-hide-button svg{width:20px;height:20px;color:var(--btn-svg-color)}.show-hide-button-options{position:absolute;transform:translateY(-50%);z-index:20;min-width:2rem;top:50%;left:calc(42px + 2rem);border-radius:0 .5rem .5rem 0;display:flex;flex-direction:column;row-gap:.5rem}.show-hide-button-options button{border-radius:0 .3rem .3rem 0}.show-hide-button-gallery{padding-left:.75rem;padding-right:.75rem;background-color:var(--background-color)!important}.inpainting-main-area{display:flex;flex-direction:column;align-items:center;row-gap:1rem;width:100%;height:100%}.inpainting-main-area .inpainting-settings{display:flex;align-items:center;column-gap:.5rem}.inpainting-main-area .inpainting-settings svg{transform:scale(.9)}.inpainting-main-area .inpainting-settings .inpainting-buttons-group{display:flex;align-items:center;column-gap:.5rem}.inpainting-main-area .inpainting-settings .inpainting-button-dropdown{display:flex;flex-direction:column;row-gap:.5rem}.inpainting-main-area .inpainting-settings .inpainting-color-picker{margin-left:1rem}.inpainting-main-area .inpainting-settings .inpainting-brush-options{display:flex;align-items:center;column-gap:1rem}.inpainting-canvas-area{display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:1rem;width:100%;height:100%}.inpainting-canvas-spiner{display:flex;align-items:center;width:100%;height:100%}.inpainting-canvas-container{display:flex;position:relative;height:100%;width:100%;border-radius:.5rem}.inpainting-canvas-wrapper{position:relative}.inpainting-canvas-stage{outline:none;border-radius:.5rem;box-shadow:0 0 0 1px var(--border-color-light);overflow:hidden}.inpainting-canvas-stage canvas{outline:none;border-radius:.5rem}.inpainting-options-btn{min-height:2rem}.canvas-status-text{position:absolute;top:0;left:0;background-color:var(--background-color);opacity:.65;display:flex;flex-direction:column;font-size:.8rem;padding:.25rem;min-width:12rem;border-radius:.25rem;margin:.25rem;pointer-events:none}.invokeai__number-input-form-control{display:flex;align-items:center;column-gap:1rem}.invokeai__number-input-form-control .invokeai__number-input-form-label{color:var(--text-color-secondary)}.invokeai__number-input-form-control .invokeai__number-input-form-label[data-focus]+.invokeai__number-input-root{outline:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.invokeai__number-input-form-control .invokeai__number-input-form-label[aria-invalid=true]+.invokeai__number-input-root{outline:none;border:2px solid var(--border-color-invalid);box-shadow:0 0 10px 0 var(--box-shadow-color-invalid)}.invokeai__number-input-form-control .invokeai__number-input-root{height:2rem;display:grid;grid-template-columns:auto max-content;column-gap:.5rem;align-items:center;background-color:var(--background-color-secondary);border:2px solid var(--border-color);border-radius:.3rem}.invokeai__number-input-form-control .invokeai__number-input-field{border:none;font-weight:700;width:100%;height:auto;font-size:.9rem;padding:0 .5rem}.invokeai__number-input-form-control .invokeai__number-input-field:focus{outline:none;box-shadow:none}.invokeai__number-input-form-control .invokeai__number-input-field:disabled{opacity:.2}.invokeai__number-input-form-control .invokeai__number-input-stepper{display:grid;padding-right:.5rem}.invokeai__number-input-form-control .invokeai__number-input-stepper .invokeai__number-input-stepper-button{border:none;padding:0 .5rem;margin:0 -.5rem}.invokeai__number-input-form-control .invokeai__number-input-stepper .invokeai__number-input-stepper-button svg{width:10px;height:10px}.input{display:grid;grid-template-columns:max-content auto;column-gap:1rem;align-items:center}.input .input-label{color:var(--text-color-secondary)}.input .input-entry{background-color:var(--background-color-secondary);border:2px solid var(--border-color);border-radius:.2rem;font-weight:700}.input .input-entry:focus{outline:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.input .input-entry:disabled{opacity:.2}.input .input-entry[aria-invalid=true]{outline:none;border:2px solid var(--border-color-invalid);box-shadow:0 0 10px 0 var(--box-shadow-color-invalid)}.invokeai__icon-button{background:var(--btn-base-color);cursor:pointer}.invokeai__icon-button:hover{background-color:var(--btn-base-color-hover)}.invokeai__icon-button[data-selected=true]{background-color:var(--accent-color)}.invokeai__icon-button[data-selected=true]:hover{background-color:var(--accent-color-hover)}.invokeai__icon-button[disabled]{cursor:not-allowed}.invokeai__icon-button[data-variant=link],.invokeai__icon-button[data-variant=link]:hover{background:none}.invokeai__icon-button[data-as-checkbox=true]{background-color:var(--btn-base-color);border:3px solid var(--btn-base-color)}.invokeai__icon-button[data-as-checkbox=true] svg{fill:var(--text-color)}.invokeai__icon-button[data-as-checkbox=true]:hover{background-color:var(--btn-base-color);border-color:var(--btn-checkbox-border-hover)}.invokeai__icon-button[data-as-checkbox=true]:hover svg{fill:var(--text-color)}.invokeai__icon-button[data-as-checkbox=true][data-selected=true]{border-color:var(--accent-color)}.invokeai__icon-button[data-as-checkbox=true][data-selected=true] svg{fill:var(--accent-color-hover)}.invokeai__icon-button[data-as-checkbox=true][data-selected=true]:hover svg{fill:var(--accent-color-hover)}.invokeai__icon-button[data-alert=true]{animation-name:pulseColor;animation-duration:1s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.invokeai__icon-button[data-alert=true]:hover{animation:none;background-color:var(--accent-color-hover)}@keyframes pulseColor{0%{background-color:var(--accent-color)}50%{background-color:var(--accent-color-dim)}to{background-color:var(--accent-color)}}.invokeai__button{background-color:var(--btn-base-color);place-content:center}.invokeai__button:hover{background-color:var(--btn-base-color-hover)}.invokeai__switch-form-control .invokeai__switch-form-label{color:var(--text-color-secondary)}.invokeai__switch-form-control .invokeai__switch-root span{background-color:var(--switch-bg-color)}.invokeai__switch-form-control .invokeai__switch-root span span{background-color:var(--white)}.invokeai__switch-form-control .invokeai__switch-root[data-checked] span{background:var(--switch-bg-active-color)}.invokeai__switch-form-control .invokeai__switch-root[data-checked] span span{background-color:var(--white)}.invokeai__select{display:flex;column-gap:1rem;align-items:center}.invokeai__select .invokeai__select-label{color:var(--text-color-secondary)}.invokeai__select .invokeai__select-picker{border:2px solid var(--border-color);background-color:var(--background-color-secondary);font-weight:700;font-size:.9rem;height:2rem;border-radius:.2rem}.invokeai__select .invokeai__select-picker:focus{outline:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.invokeai__select .invokeai__select-option{background-color:var(--background-color-secondary);color:var(--text-color-secondary)}.invokeai__slider-component{padding-bottom:.5rem;border-radius:.5rem}.invokeai__slider-component .invokeai__slider-component-label{min-width:max-content;margin:0;font-weight:700;font-size:.9rem;color:var(--text-color-secondary)}.invokeai__slider-component .invokeai__slider_track{background-color:var(--tab-color)}.invokeai__slider-component .invokeai__slider_track-filled{background-color:var(--slider-color)}.invokeai__slider-component .invokeai__slider-thumb{width:4px}.invokeai__slider-component .invokeai__slider-mark{font-size:.75rem;font-weight:700;color:var(--slider-mark-color);margin-top:.3rem}.invokeai__slider-component .invokeai__slider-number-input{border:none;font-size:.9rem;font-weight:700;height:2rem;background-color:var(--background-color-secondary);border:2px solid var(--border-color)}.invokeai__slider-component .invokeai__slider-number-input:focus{outline:none;box-shadow:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.invokeai__slider-component .invokeai__slider-number-input:disabled{opacity:.2}.invokeai__slider-component .invokeai__slider-number-stepper{border:none}.invokeai__slider-component[data-markers=true] .invokeai__slider_container{margin-top:-1rem}.invokeai__checkbox .chakra-checkbox__label{margin-top:1px;color:var(--text-color-secondary);font-size:.9rem}.invokeai__checkbox .chakra-checkbox__control{width:1rem;height:1rem;border:none;border-radius:.2rem;background-color:var(--input-checkbox-bg)}.invokeai__checkbox .chakra-checkbox__control svg{width:.6rem;height:.6rem;stroke-width:3px}.invokeai__checkbox .chakra-checkbox__control[data-checked]{color:var(--text-color);background-color:var(--input-checkbox-checked-bg)}.invokeai__popover-content{min-width:unset;width:unset;padding:1rem;border-radius:.5rem;background-color:var(--background-color);border:2px solid var(--border-color)}.invokeai__popover-content .invokeai__popover-arrow{background-color:var(--background-color)!important}.invokeai__color-picker .react-colorful__hue-pointer,.invokeai__color-picker .react-colorful__saturation-pointer{width:1.5rem;height:1.5rem;border-color:var(--white)}.dropzone-container{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:999;backdrop-filter:blur(20px)}.dropzone-container .dropzone-overlay{opacity:.5;width:100%;height:100%;display:flex;flex-direction:column;row-gap:1rem;align-items:center;justify-content:center;background-color:var(--background-color)}.dropzone-container .dropzone-overlay.is-drag-accept{box-shadow:inset 0 0 20rem 1rem var(--accent-color)}.dropzone-container .dropzone-overlay.is-drag-reject{box-shadow:inset 0 0 20rem 1rem var(--status-bad-color)}.dropzone-container .dropzone-overlay.is-handling-upload{box-shadow:inset 0 0 20rem 1rem var(--status-working-color)}.image-uploader-button-outer{width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:.5rem;color:var(--tab-list-text-inactive);background-color:var(--background-color)}.image-uploader-button-outer:hover{background-color:var(--background-color-light)}.image-upload-button-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-upload-button{display:flex;flex-direction:column;row-gap:2rem;align-items:center;justify-content:center;text-align:center}.image-upload-button svg{width:4rem;height:4rem}.image-upload-button h2{font-size:1.2rem}.work-in-progress{display:grid;width:100%;height:calc(100vh - (70px + 1rem));grid-auto-rows:max-content;background-color:var(--background-color-secondary);border-radius:.4rem;place-content:center;place-items:center;row-gap:1rem}.work-in-progress h1{font-size:2rem;font-weight:700}.work-in-progress p{text-align:center;max-width:50rem;color:var(--subtext-color-bright)}.guide-popover-arrow{background-color:var(--tab-panel-bg);box-shadow:none}.guide-popover-content{background-color:var(--background-color-secondary);border:none}.guide-popover-guide-content{background:var(--tab-panel-bg);border:2px solid var(--tab-hover-color);border-radius:.4rem;padding:.75rem 1rem;display:grid;grid-template-rows:repeat(auto-fill,1fr);grid-row-gap:.5rem;justify-content:space-between}.modal{background-color:var(--background-color-secondary);color:var(--text-color);font-family:Inter}.modal-close-btn{background-color:var(--btn-base-color)}.modal-close-btn:hover{background-color:var(--btn-base-color-hover)}.modal-close-btn:disabled:hover{background-color:var(--btn-base-color)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{-ms-overflow-style:none;scrollbar-width:none;background-color:var(--root-bg-color);overflow:hidden}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}#root{background-color:var(--root-bg-color);color:var(--text-color);font-family:Inter,Arial,Helvetica,sans-serif} diff --git a/invokeai/frontend/dist/index.html b/invokeai/frontend/dist/index.html index c8440caaa2..738b02657d 100644 --- a/invokeai/frontend/dist/index.html +++ b/invokeai/frontend/dist/index.html @@ -5,8 +5,8 @@ InvokeAI - A Stable Diffusion Toolkit - - + + diff --git a/invokeai/frontend/src/Loading.tsx b/invokeai/frontend/src/Loading.tsx index 8e71bb9ac6..066315ecd1 100644 --- a/invokeai/frontend/src/Loading.tsx +++ b/invokeai/frontend/src/Loading.tsx @@ -3,8 +3,8 @@ import { Flex, Spinner } from '@chakra-ui/react'; const Loading = () => { return ( diff --git a/invokeai/frontend/src/common/components/GuideIcon.tsx b/invokeai/frontend/src/common/components/GuideIcon.tsx index 7b78affd19..1816d9f30b 100644 --- a/invokeai/frontend/src/common/components/GuideIcon.tsx +++ b/invokeai/frontend/src/common/components/GuideIcon.tsx @@ -13,7 +13,7 @@ const GuideIcon = forwardRef( ({ feature, icon = MdHelp }: GuideIconProps, ref) => ( - + ) diff --git a/invokeai/frontend/src/common/components/GuidePopover.tsx b/invokeai/frontend/src/common/components/GuidePopover.tsx index b2f9dfe494..ca45343588 100644 --- a/invokeai/frontend/src/common/components/GuidePopover.tsx +++ b/invokeai/frontend/src/common/components/GuidePopover.tsx @@ -29,15 +29,15 @@ const GuidePopover = ({ children, feature }: GuideProps) => { if (!shouldDisplayGuides) return null; return ( - + {children} e.preventDefault()} - cursor={'initial'} + cursor="initial" >
{text}
diff --git a/invokeai/frontend/src/common/components/IAISlider.tsx b/invokeai/frontend/src/common/components/IAISlider.tsx index a4db05e6dc..03f24ccab4 100644 --- a/invokeai/frontend/src/common/components/IAISlider.tsx +++ b/invokeai/frontend/src/common/components/IAISlider.tsx @@ -169,7 +169,7 @@ export default function IAISlider(props: IAIFullSliderProps) { {label} - + } onClick={handleResetDisable} isDisabled={isResetDisabled} diff --git a/invokeai/frontend/src/common/components/ImageUploadOverlay.tsx b/invokeai/frontend/src/common/components/ImageUploadOverlay.tsx index 85da3253e1..39e6578cc8 100644 --- a/invokeai/frontend/src/common/components/ImageUploadOverlay.tsx +++ b/invokeai/frontend/src/common/components/ImageUploadOverlay.tsx @@ -24,13 +24,13 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
{isDragAccept && (
- Upload Image{overlaySecondaryText} + Upload Image{overlaySecondaryText}
)} {isDragReject && (
- Invalid Upload - Must be single JPEG or PNG image + Invalid Upload + Must be single JPEG or PNG image
)}
diff --git a/invokeai/frontend/src/common/components/ImageUploaderButton.tsx b/invokeai/frontend/src/common/components/ImageUploaderButton.tsx index 5cf2375630..1a989b8c8e 100644 --- a/invokeai/frontend/src/common/components/ImageUploaderButton.tsx +++ b/invokeai/frontend/src/common/components/ImageUploaderButton.tsx @@ -22,7 +22,7 @@ const ImageUploaderButton = (props: ImageUploaderButtonProps) => { >
- Click or Drag and Drop + Click or Drag and Drop
); diff --git a/invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx b/invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx index 2cd37d64cf..8ce69627dc 100644 --- a/invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx +++ b/invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx @@ -17,7 +17,7 @@ const ClearCanvasHistoryButtonModal = () => { acceptCallback={() => dispatch(clearCanvasHistory())} acceptButtonText={t('unifiedcanvas:clearHistory')} triggerComponent={ - } isDisabled={isStaging}> + } isDisabled={isStaging}> {t('unifiedcanvas:clearCanvasHistory')} } diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvas.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvas.tsx index a077884a99..b57bc1cc16 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvas.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvas.tsx @@ -140,7 +140,7 @@ const IAICanvas = () => { { onWheel={handleWheel} draggable={(tool === 'move' || isStaging) && !isModifyingBoundingBox} > - + - + diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx index a572c4418d..cfdbddb1e2 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx @@ -49,7 +49,7 @@ const IAICanvasBoundingBoxOverlay = () => { offsetY={stageCoordinates.y / stageScale} height={stageDimensions.height / stageScale} width={stageDimensions.width / stageScale} - fill={'rgba(0,0,0,0.4)'} + fill="rgba(0,0,0,0.4)" listening={false} visible={shouldDarkenOutsideBoundingBox} /> @@ -58,10 +58,10 @@ const IAICanvasBoundingBoxOverlay = () => { y={boundingBoxCoordinates.y} width={boundingBoxDimensions.width} height={boundingBoxDimensions.height} - fill={'rgb(255,255,255)'} + fill="rgb(255,255,255)" listening={false} visible={shouldDarkenOutsideBoundingBox} - globalCompositeOperation={'destination-out'} + globalCompositeOperation="destination-out" /> ); diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx index 7ff5ecb6a6..5417e101f8 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx @@ -163,10 +163,10 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => { width={stageDimensions.width / stageScale} fillPatternImage={fillPatternImage} fillPatternOffsetY={!isNumber(offset) ? 0 : offset} - fillPatternRepeat={'repeat'} + fillPatternRepeat="repeat" fillPatternScale={{ x: 1 / stageScale, y: 1 / stageScale }} listening={true} - globalCompositeOperation={'source-in'} + globalCompositeOperation="source-in" {...rest} /> ); diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx index 4da61231d1..0ff1101626 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx @@ -36,7 +36,7 @@ const IAICanvasLines = (props: InpaintingCanvasLinesProps) => { 0 + stroke="rgb(0,0,0)" // The lines can be any color, just need alpha > 0 strokeWidth={line.strokeWidth * 2} tension={0} lineCap="round" diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx index d7f7a05160..3ee493c7c0 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx @@ -93,8 +93,8 @@ const IAICanvasObjectRenderer = () => { y={obj.y} width={obj.width} height={obj.height} - fill={'rgb(255, 255, 255)'} - globalCompositeOperation={'destination-out'} + fill="rgb(255, 255, 255)" + globalCompositeOperation="destination-out" /> ); } diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx index 17155b3cae..5ccb072942 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx @@ -67,7 +67,7 @@ const IAICanvasStagingArea = (props: Props) => { width={width} height={height} strokeWidth={1} - stroke={'white'} + stroke="white" strokeScaleEnabled={false} /> { height={height} dash={[4, 4]} strokeWidth={1} - stroke={'black'} + stroke="black" strokeScaleEnabled={false} /> diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx index ea088cf722..de45654244 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx @@ -114,11 +114,11 @@ const IAICanvasStagingAreaToolbar = () => { return ( { x={brushX} y={brushY} radius={radius} - stroke={'rgba(255,255,255,0.4)'} + stroke="rgba(255,255,255,0.4)" strokeWidth={strokeWidth * 2} strokeEnabled={true} listening={false} @@ -181,7 +181,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => { x={brushX} y={brushY} radius={radius} - stroke={'rgba(0,0,0,1)'} + stroke="rgba(0,0,0,1)" strokeWidth={strokeWidth} strokeEnabled={true} listening={false} @@ -192,14 +192,14 @@ const IAICanvasToolPreview = (props: GroupConfig) => { x={brushX} y={brushY} radius={dotRadius * 2} - fill={'rgba(255,255,255,0.4)'} + fill="rgba(255,255,255,0.4)" listening={false} /> diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx index 0e939dbac0..58577f999f 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx @@ -269,12 +269,12 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { { } > - + { color={maskColor} onChange={(newColor) => dispatch(setMaskColor(newColor))} /> - } onClick={handleClearMask}> + } onClick={handleClearMask}> {t('unifiedcanvas:clearMask')} (Shift+C) diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx index 0a90b97538..58a7d8b794 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx @@ -97,7 +97,7 @@ const IAICanvasSettingsButtonPopover = () => { /> } > - + { /> } > - - + + { >
} > {t('parameters:sendToImg2Img')} } > @@ -430,14 +430,14 @@ const CurrentImageButtons = () => { } > {t('parameters:copyImage')} } > @@ -445,7 +445,7 @@ const CurrentImageButtons = () => { - } size={'sm'} w="100%"> + } size="sm" w="100%"> {t('parameters:downloadImage')} diff --git a/invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx b/invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx index dc32db215b..720df07f4a 100644 --- a/invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx +++ b/invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx @@ -82,7 +82,7 @@ export default function CurrentImagePreview() { }; return ( -
+
{imageToDisplay && ( - + Are you sure? Deleted images will be sent to the Bin. You can restore from there if you wish to. - + Don't ask me again { > @@ -189,15 +189,15 @@ const HoverableImage = memo((props: HoverableImageProps) => { objectFit={ shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit } - rounded={'md'} + rounded="md" src={thumbnail || url} - loading={'lazy'} + loading="lazy" />
{isSelected && ( @@ -210,7 +210,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { aria-label={t('parameters:deleteImage')} icon={} size="xs" - variant={'imageHoverIconButton'} + variant="imageHoverIconButton" fontSize={14} isDisabled={!mayDeleteImage} /> @@ -221,7 +221,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { { e.detail.originalEvent.preventDefault(); }} diff --git a/invokeai/frontend/src/features/gallery/components/ImageGallery.tsx b/invokeai/frontend/src/features/gallery/components/ImageGallery.tsx index 41929d0126..46e133a4e2 100644 --- a/invokeai/frontend/src/features/gallery/components/ImageGallery.tsx +++ b/invokeai/frontend/src/features/gallery/components/ImageGallery.tsx @@ -281,7 +281,7 @@ export default function ImageGallery() { dispatch(setCurrentCategory('result'))} > {t('gallery:generations')} dispatch(setCurrentCategory('user'))} > @@ -433,14 +433,14 @@ export default function ImageGallery() { } className="image-gallery-icon-btn" - cursor={'pointer'} + cursor="pointer" /> } > @@ -455,7 +455,7 @@ export default function ImageGallery() { label={t('gallery:galleryImageSize')} /> dispatch(setGalleryImageMinimumWidth(64))} @@ -505,8 +505,8 @@ export default function ImageGallery() { } - size={'xs'} - variant={'ghost'} + size="xs" + variant="ghost" fontSize={20} onClick={onClick} /> @@ -83,23 +83,23 @@ const MetadataItem = ({ } - size={'xs'} - variant={'ghost'} + size="xs" + variant="ghost" fontSize={14} onClick={() => navigator.clipboard.writeText(value.toString())} /> )} - + {label}: {isLink ? ( - + {value.toString()} ) : ( - + {value.toString()} )} @@ -163,10 +163,10 @@ const ImageMetadataViewer = memo( return (
- + - File: - + File: + {image.url.length > 64 ? image.url.substring(0, 64).concat('...') : image.url} @@ -304,7 +304,7 @@ const ImageMetadataViewer = memo( )} {postprocessing && postprocessing.length > 0 && ( <> - Postprocessing + Postprocessing {postprocessing.map( ( postprocess: InvokeAI.PostProcessedImageMetadata, @@ -313,13 +313,8 @@ const ImageMetadataViewer = memo( if (postprocess.type === 'esrgan') { const { scale, strength, denoise_str } = postprocess; return ( - - {`${ + + {`${ i + 1 }: Upscale (ESRGAN)`} - {`${ + + {`${ i + 1 }: Face restoration (GFPGAN)`} @@ -371,13 +361,8 @@ const ImageMetadataViewer = memo( } else if (postprocess.type === 'codeformer') { const { strength, fidelity } = postprocess; return ( - - {`${ + + {`${ i + 1 }: Face restoration (Codeformer)`} @@ -413,30 +398,30 @@ const ImageMetadataViewer = memo( value={dreamPrompt} /> )} - + - + } - size={'xs'} - variant={'ghost'} + size="xs" + variant="ghost" fontSize={14} onClick={() => navigator.clipboard.writeText(metadataJSON) } /> - Metadata JSON: + Metadata JSON: -
+ 
{metadataJSON}
) : ( -
- +
+ No metadata available
diff --git a/invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx b/invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx index 196fa1bfe1..af93704c82 100644 --- a/invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx +++ b/invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx @@ -23,8 +23,8 @@ export default function InvokeAccordionItem(props: InvokeAccordionItemProps) { return ( - - + + {header} {additionalHeaderComponents} diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx index f6da49e1c6..9af75a363a 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx @@ -63,7 +63,7 @@ const FaceRestoreSettings = () => { const { t } = useTranslation(); return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx index 89075f653a..3aa2425dff 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx @@ -49,7 +49,7 @@ const HiresStrength = () => { isInteger={false} withInput withSliderMarks - inputWidth={'5.5rem'} + inputWidth="5.5rem" withReset handleReset={handleHiResStrengthReset} isSliderDisabled={!hiresFix} @@ -75,10 +75,10 @@ const HiresSettings = () => { dispatch(setHiresFix(e.target.checked)); return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx index 11e037b801..f037e79523 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx @@ -3,7 +3,7 @@ import SeamlessSettings from './SeamlessSettings'; const ImageToImageOutputSettings = () => { return ( - + ); diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx index f741a79406..1eaba1eaae 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx @@ -4,7 +4,7 @@ import SeamlessSettings from './SeamlessSettings'; const OutputSettings = () => { return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx index 4107d02c8e..dd7afd5bb7 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx @@ -22,10 +22,10 @@ const SeamlessSettings = () => { const { t } = useTranslation(); return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx index 33798de4a4..d524ace666 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx @@ -10,7 +10,7 @@ import Threshold from './Threshold'; */ const SeedSettings = () => { return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx index 32841dfe2d..f3f129bdba 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx @@ -18,7 +18,7 @@ export default function ShuffleSeed() { return (
- {t('settings:resetWebUI')} + {t('settings:resetWebUI')} @@ -232,8 +232,8 @@ const SettingsModal = ({ children }: SettingsModalProps) => { - - + + {t('settings:resetComplete')} diff --git a/invokeai/frontend/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/src/features/system/components/SiteHeader.tsx index 1bc516e926..af2d408d99 100644 --- a/invokeai/frontend/src/features/system/components/SiteHeader.tsx +++ b/invokeai/frontend/src/features/system/components/SiteHeader.tsx @@ -56,7 +56,7 @@ const SiteHeader = () => { { { variant="link" data-variant="link" fontSize={20} - size={'sm'} + size="sm" icon={ @@ -100,7 +100,7 @@ const SiteHeader = () => { variant="link" data-variant="link" fontSize={20} - size={'sm'} + size="sm" icon={ @@ -114,7 +114,7 @@ const SiteHeader = () => { variant="link" data-variant="link" fontSize={20} - size={'sm'} + size="sm" icon={ @@ -129,7 +129,7 @@ const SiteHeader = () => { variant="link" data-variant="link" fontSize={22} - size={'sm'} + size="sm" icon={} /> diff --git a/invokeai/frontend/src/features/system/components/ThemeChanger.tsx b/invokeai/frontend/src/features/system/components/ThemeChanger.tsx index 8bf016be59..38b79402e0 100644 --- a/invokeai/frontend/src/features/system/components/ThemeChanger.tsx +++ b/invokeai/frontend/src/features/system/components/ThemeChanger.tsx @@ -46,7 +46,7 @@ export default function ThemeChanger() { width: '6rem', }} leftIcon={currentTheme === theme ? : undefined} - size={'sm'} + size="sm" onClick={() => handleChangeTheme(theme)} key={theme} > @@ -64,7 +64,7 @@ export default function ThemeChanger() { triggerComponent={ } > - {renderThemeOptions()} + {renderThemeOptions()} ); } diff --git a/invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx b/invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx index 6c0d848ee8..c9ca2cc6da 100644 --- a/invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx +++ b/invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx @@ -35,9 +35,9 @@ export default function InitImagePreview() { {initialImage && (
) : null; } diff --git a/invokeai/frontend/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/src/features/ui/components/InvokeTabs.tsx index c3a8c3d907..911f95ac77 100644 --- a/invokeai/frontend/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/src/features/ui/components/InvokeTabs.tsx @@ -31,32 +31,32 @@ export interface InvokeTabInfo { export const tabDict: Record = { txt2img: { - title: , + title: , workarea: , tooltip: 'Text To Image', }, img2img: { - title: , + title: , workarea: , tooltip: 'Image To Image', }, unifiedCanvas: { - title: , + title: , workarea: , tooltip: 'Unified Canvas', }, nodes: { - title: , + title: , workarea: , tooltip: 'Nodes', }, postprocess: { - title: , + title: , workarea: , tooltip: 'Post Processing', }, training: { - title: , + title: , workarea: , tooltip: 'Training', }, @@ -122,7 +122,7 @@ export default function InvokeTabs() { key={key} hasArrow label={tabDict[key as keyof typeof tabDict].tooltip} - placement={'right'} + placement="right" > {tabDict[key as keyof typeof tabDict].title} @@ -147,7 +147,7 @@ export default function InvokeTabs() { { diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx index 561f746590..f06c1ae988 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx @@ -45,21 +45,16 @@ const UnifiedCanvasDisplayBeta = () => { }, [dispatch]); return ( -
+
- + {doesCanvasNeedScaling ? : } diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx index cb185e36bb..44deea45c6 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx @@ -4,7 +4,7 @@ import UnifiedCanvasLimitStrokesToBox from './UnifiedCanvasLimitStrokesToBox'; export default function UnifiedCanvasBaseBrushSettings() { return ( - + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx index 40f6df1dbf..387495598d 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx @@ -4,7 +4,7 @@ import UnifiedCanvasColorPicker from './UnifiedCanvasColorPicker'; export default function UnifiedCanvasBrushSettings() { return ( - + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx index e36e59892c..6b40b92714 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx @@ -49,7 +49,7 @@ export default function UnifiedCanvasBrushSize() { onChange={(newSize) => dispatch(setBrushSize(newSize))} sliderNumberInputProps={{ max: 500 }} inputReadOnly={false} - width={'100px'} + width="100px" isCompact /> ); diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx index 98493bd522..b4beb2b585 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx @@ -14,7 +14,7 @@ export default function UnifiedCanvasClearMask() { return ( } onClick={handleClearMask} tooltip={`${t('unifiedcanvas:clearMask')} (Shift+C)`} diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx index 94dfb7b8ac..e6957a63d7 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx @@ -92,7 +92,7 @@ export default function UnifiedCanvasColorPicker() { /> } > - + {layer === 'base' && ( + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx index 9f3052b116..2c5a8277db 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx @@ -5,7 +5,7 @@ import UnifiedCanvasSnapToGrid from './UnifiedCanvasSnapToGrid'; export default function UnifiedCanvasMoveSettings() { return ( - + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx index 1f8c45fef2..4f3cbb508b 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx @@ -68,7 +68,7 @@ const UnifiedCanvasSettings = () => { /> } > - + + {layer == 'base' && ['brush', 'eraser', 'colorPicker'].includes(tool) && ( )} diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx index 3f81451352..4790ddd245 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx @@ -25,7 +25,7 @@ export default function UnifiedCanvasProcessingButtons() { }; return ( - + - + ); diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx index 9602150d43..a738379f5f 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx @@ -113,7 +113,7 @@ const UnifiedCanvasToolSelect = () => { const handleEraseBoundingBox = () => dispatch(addEraseRect()); return ( - + { data-selected={tool === 'colorPicker' && !isStaging} isDisabled={isStaging} onClick={handleSelectColorPickerTool} - width={'max-content'} + width="max-content" /> ); diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx index b3328529fb..9860bd12f7 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx @@ -23,30 +23,30 @@ const UnifiedCanvasToolbarBeta = () => { ); return ( - + - + - + - + - + - + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx index 12fc1d786f..37e7e71fdb 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx @@ -43,7 +43,7 @@ const UnifiedCanvasDisplay = () => { }, [dispatch]); return ( -
+
diff --git a/invokeai/frontend/stats.html b/invokeai/frontend/stats.html index 9ba6f73f0d..96cce94c55 100644 --- a/invokeai/frontend/stats.html +++ b/invokeai/frontend/stats.html @@ -6157,7 +6157,7 @@ var drawChart = (function (exports) {